fix(story): i#3954 replace pencil button with text button

kaleidos-ventures · Sep 6, 2023 · 97fab01 · 97fab01
1 parent 2a97669
commit 97fab01
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 12 deletions.
diff --git a/...t/story-detail/components/story-detail-description/story-detail-description.component.css b/...t/story-detail/components/story-detail-description/story-detail-description.component.css
@@ -44,7 +44,7 @@ Copyright (c) 2023-present Kaleidos INC
   &:not(.edit) {
     border-block-end: 1px solid var(--color-gray20);
     border-block-start: 1px solid var(--color-gray10);
-    padding-block-end: var(--spacing-16);
+    padding-block-end: var(--spacing-8);
   }
 }
 
@@ -53,6 +53,17 @@ Copyright (c) 2023-present Kaleidos INC
   position: relative;
 }
 
+.description-empty {
+  margin-block: 0;
+  margin-inline: var(--spacing-8);
+
+  .edit-description {
+    inset-block-start: 0;
+    inset-inline-end: 2px;
+    position: absolute;
+  }
+}
+
 .edit-description {
   inset-block-start: var(--spacing-12);
   inset-inline-end: 2px;
@@ -68,12 +79,14 @@ Copyright (c) 2023-present Kaleidos INC
 }
 
 .empty {
+  background-color: var(--color-gray10);
   color: var(--color-gray70);
   font-size: var(--font-size-medium);
   font-style: italic;
   margin: 0;
-  padding-block-end: var(--spacing-8);
-  padding-block-start: var(--spacing-16);
+  margin-block-start: var(--spacing-8);
+  padding-block: var(--spacing-8);
+  padding-inline: var(--spacing-16);
   text-align: center;
 
   &.can-view {

diff --git a/.../story-detail/components/story-detail-description/story-detail-description.component.html b/.../story-detail/components/story-detail-description/story-detail-description.component.html
@@ -79,7 +79,7 @@
       <ng-template #emptyTpl>
         <div
           #descriptionContent
-          class="description-wrapper">
+          class="description-wrapper description-empty">
           <p
             class="empty"
             [ngClass]="{
@@ -106,10 +106,11 @@
         class="edit-description"
         [attr.aria-label]="t('story.edit_description')"
         [tgUiTooltip]="t('story.edit_description')"
-        appearance="tertiary"
-        tuiIconButton
-        icon="pen"
-        type="button"></button>
+        appearance="small"
+        tuiButton
+        type="button">
+        Edit
+      </button>
     </ng-template>
 
     <tg-discard-changes-modal

diff --git a/...ules/project/story-detail/components/story-detail-title/story-detail-title.component.html b/...ules/project/story-detail/components/story-detail-title/story-detail-title.component.html
@@ -28,10 +28,11 @@
           class="edit-title"
           [attr.aria-label]="t('story.edit_title')"
           [tgUiTooltip]="t('story.edit_title')"
-          appearance="tertiary"
-          tuiIconButton
-          icon="pen"
-          type="button"></button>
+          appearance="small"
+          tuiButton
+          type="button">
+          Edit
+        </button>
       </div>
     </ng-container>
 

diff --git a/javascript/apps/taiga/src/app/styles/shared/button.css b/javascript/apps/taiga/src/app/styles/shared/button.css
@@ -164,6 +164,37 @@ Used only in comment list sort button
   }
 }
 
+[data-appearance="small"]:is(button, a) {
+  @mixin button-dropdown-expanded {
+    background: var(--color-gray30);
+    color: var(--color-secondary90);
+  }
+
+  & [tuiWrapper] {
+    background: var(--color-gray10);
+    block-size: auto !important;
+    border-radius: 3px;
+    color: var(--color-secondary);
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-regular);
+    line-height: 0.875rem;
+    padding-block: var(--spacing-4) !important;
+    padding-inline: var(--spacing-8) !important;
+
+    @mixin wrapper-hover {
+      background: var(--color-gray30);
+      color: var(--color-secondary90);
+    }
+
+    @mixin wrapper-focus {
+      &::after {
+        border-color: var(--color-secondary);
+        border-width: 1px;
+      }
+    }
+  }
+}
+
 [data-appearance="main-nav"]:is(button, a) {
   @mixin button-dropdown-expanded {
     background: var(--color-white);