fix(styles): design review fixes for Icon Tab Bar [ci visual]

SAP · Jul 14, 2023 · da7c553 · da7c553
1 parent f8e434f
commit da7c553
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 7 deletions.
diff --git a/packages/styles/src/icon-tab-bar.scss b/packages/styles/src/icon-tab-bar.scss
@@ -541,6 +541,8 @@ $fd-icon-tab-bar-semantic-values: (
     height: $fd-icon-tab-bar-multi-click-button-size;
     min-width: $fd-icon-tab-bar-multi-click-button-size;
 
+    --fdButton_Hover_Shadow: none;
+
     @include fd-focus() {
       &::after {
         border-radius: var(--fdIcon_Tab_Bar_Multi_Click_Button_Focus_Radius);
@@ -805,8 +807,6 @@ $fd-icon-tab-bar-semantic-values: (
       --fdIconTabBar_Overflow_Button_Border_Color: var(--sapButton_Hover_BorderColor);
       --fdIconTabBar_Overflow_Button_Text_Color: var(--fdIcon_Tab_Bar_Overflow_Button_Text_Color_Hover);
       --fdIconTabBar_Overflow_Button_Icon_Color: var(--fdIcon_Tab_Bar_Overflow_Button_Icon_Color_Hover);
-
-      box-shadow: var(--fdIcon_Tab_Bar_Overflow_Button_Hover_Box_Shadow);
     }
 
     @include fd-active() {

diff --git a/packages/styles/stories/Components/icon-tab-bar/icon-tab-bar.stories.js b/packages/styles/stories/Components/icon-tab-bar/icon-tab-bar.stories.js
@@ -92,7 +92,7 @@ Counter.storyName = 'Counters and Text';
 Counter.parameters = {
   docs: {
     description: {
-      story: 'Counters can be shown on top of labels. In this case you need to apply the `fd-icon-tab-bar--counters` modifier class. <br> The control has the same look and feel in Cozy and Compact mode.'
+      story: '<code>NOTE: This is no longer recommended.</code> Counters can be shown on top of labels. In this case you need to apply the `fd-icon-tab-bar--counters` modifier class. <br> The control has the same look and feel in Cozy and Compact mode.'
     }
   }
 };

diff --git a/packages/styles/stories/Components/icon-tab-bar/single-click.example.html b/packages/styles/stories/Components/icon-tab-bar/single-click.example.html
@@ -193,7 +193,7 @@
     <li role='presentation' class='fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow' style="left: 23rem;">
         <div class="fd-popover">
             <div class="fd-popover__control">
-                <button class='fd-icon-tab-bar__overflow'>
+                <button class='fd-icon-tab-bar__overflow is-active'>
                     <span class='fd-icon-tab-bar__overflow-text'>More</span>
                     <i class='sap-icon--slim-arrow-down' role='presentation'></i>
                 </button>

diff --git a/packages/styles/stories/Components/icon-tab-bar/text-only-closable.example.html b/packages/styles/stories/Components/icon-tab-bar/text-only-closable.example.html
@@ -404,7 +404,7 @@ <h4>Overflow</h4>
             <li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow" style="left: 23rem">
                 <div class="fd-popover">
                     <div class="fd-popover__control">
-                        <button class="fd-icon-tab-bar__overflow">
+                        <button class="fd-icon-tab-bar__overflow is-active">
                             <span class="fd-icon-tab-bar__overflow-text">More</span>
                             <i class="sap-icon--slim-arrow-down" role="presentation"></i>
                         </button>

diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap
@@ -16274,7 +16274,7 @@ exports[`Check stories > Components/Icon Tab Bar > Story SingleClick > Should ma
     <li role='presentation' class='fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow' style=\\"left: 23rem;\\">
         <div class=\\"fd-popover\\">
             <div class=\\"fd-popover__control\\">
-                <button class='fd-icon-tab-bar__overflow'>
+                <button class='fd-icon-tab-bar__overflow is-active'>
                     <span class='fd-icon-tab-bar__overflow-text'>More</span>
                     <i class='sap-icon--slim-arrow-down' role='presentation'></i>
                 </button>
@@ -16764,7 +16764,7 @@ exports[`Check stories > Components/Icon Tab Bar > Story TextOnlyClosable > Shou
             <li role=\\"presentation\\" class=\\"fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow\\" style=\\"left: 23rem\\">
                 <div class=\\"fd-popover\\">
                     <div class=\\"fd-popover__control\\">
-                        <button class=\\"fd-icon-tab-bar__overflow\\">
+                        <button class=\\"fd-icon-tab-bar__overflow is-active\\">
                             <span class=\\"fd-icon-tab-bar__overflow-text\\">More</span>
                             <i class=\\"sap-icon--slim-arrow-down\\" role=\\"presentation\\"></i>
                         </button>