fix(styles): update icon font size, line-height [ci visual] (#5001)

* fix(styles): update icon font size, line-height [ci visual] * fix(styles): add fixes after Chromatic review [ci visual]
SAP · Nov 24, 2023 · 7216696 · 7216696
1 parent dd7f1d1
commit 7216696
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 8 deletions.
diff --git a/packages/styles/src/icon-tab-bar.scss b/packages/styles/src/icon-tab-bar.scss
@@ -521,6 +521,7 @@ $fd-icon-tab-bar-semantic-values: (
 
     &::before {
       left: 0;
+      top: 0.75rem;
       content: '';
       height: 1rem;
       width: 0.0625rem;
@@ -1046,15 +1047,11 @@ $fd-icon-tab-bar-semantic-values: (
 
     .#{$block}__list-item-icon-container {
       @include fd-flex-center();
-      @include fd-set-margin-right(0.5rem);
+      @include fd-set-margin-right(0.25rem);
 
       width: 1.25rem;
     }
 
-    .#{$block}__list-item-counter {
-      @include fd-set-padding-left(0.25rem);
-    }
-
     .#{$block}__list-link {
       @include fd-selected() {
         border-bottom: none;

diff --git a/packages/styles/src/icon.scss b/packages/styles/src/icon.scss
@@ -11,8 +11,10 @@ $blockTNT: sap-icon-TNT;
   @include fd-icon-base();
   @include fd-icon-control-enumeration($block);
 
+  line-height: 1;
+  font-size: 1rem;
   font-style: normal;
-  display: inline-block;
+  display: inline-flex;
 
   @include fd-fiori-focus(0);
 }

diff --git a/packages/styles/src/mixins/list/_list-navigation.scss b/packages/styles/src/mixins/list/_list-navigation.scss
@@ -4,6 +4,12 @@
   &--navigation {
     @include fd-list-reset-item-paddings();
 
+    &.fd-icon-tab-bar__list {
+      .#{$block}__link {
+        gap: 0.25rem;
+      }
+    }
+
     .#{$block}__link {
       @include fd-set-paddings-x(var(--fdList_Navigation_Link_Padding_Left, #{$fd-list-item-padding-x}), var(--fdList_Navigation_Link_Padding_Right, #{$fd-list-item-padding-x}));
     }

diff --git a/packages/styles/src/mixins/vertical-nav/_vertical-nav-navigation.scss b/packages/styles/src/mixins/vertical-nav/_vertical-nav-navigation.scss
@@ -303,7 +303,7 @@ $fd-list-second-level-popover-position: 3.25rem !default;
         width: 2.25rem;
         color: var(--fdVerticalNav_Icon_Color);
         vertical-align: top;
-        text-align: center;
+        justify-content: center;
       }
 
       &-text {

diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap