fix(styles): update ShellBar [ci visual]

SAP · Jan 29, 2025 · 281e955 · 281e955
1 parent c87132c
commit 281e955
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 175 deletions.
diff --git a/packages/styles/src/shellbar.scss b/packages/styles/src/shellbar.scss
@@ -106,11 +106,11 @@ $select: #{$fd-namespace}-select;
       gap: 0.25rem;
     }
 
-    cursor: var(--fdShellBar_Branding_Cursor, pointer);
-    padding-inline: 0.25rem 0.5rem;
-    padding-block: 0.125rem;
     height: 2.25rem;
-    border-radius: var(--sapButton_BorderCornerRadius);
+    padding-block: 0.125rem;
+    border-radius: 0.375rem;
+    padding-inline: 0.25rem 0.5rem;
+    cursor: var(--fdShellBar_Branding_Cursor, pointer);
     background: var(--fdShellBar_Branding_Background, var(--sapButton_Lite_Background));
     border: var(--sapButton_BorderWidth) solid var(--fdShellBar_Branding_Border_Color, var(--sapButton_Lite_BorderColor));
 
@@ -122,10 +122,14 @@ $select: #{$fd-namespace}-select;
     @include fd-active() {
       --fdShellBar_Branding_Background: var(--fdShellbar_Branding_Active_Background);
       --fdShellBar_Branding_Border_Color: var(--fdShellbar_Branding_Active_Border_Color);
+
+      @include fd-focus() {
+        outline: none;
+      }
     }
 
     @include fd-focus() {
-      outline-offset: -0.1875rem;
+      outline-offset: -0.125rem;
       outline: var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--fdShellbar_Button_Outline_Color);
     }
 
@@ -176,19 +180,19 @@ $select: #{$fd-namespace}-select;
   &__logo {
     @include fd-reset();
 
+    max-height: 2rem;
     position: relative;
     display: inline-block;
     vertical-align: middle;
-    max-height: 2rem;
-    background-repeat: no-repeat;
+    margin-inline: 0.25rem;
     background-size: contain;
-    margin-inline: 0.25rem 0;
+    background-repeat: no-repeat;
 
     > * {
-      line-height: 0;
-      max-height: 2.5rem;
       width: auto;
       display: block;
+      line-height: 0;
+      max-height: 2rem;
     }
 
     &--image-replaced {
@@ -235,7 +239,7 @@ $select: #{$fd-namespace}-select;
     @include fd-hover() {
       --fdButtonBackgroundColor: var(--sapShell_Hover_Background);
       --fdButtonBorderColor: var(--fdShellbar_Button_Hover_Border_Color);
-      --fdButtonColor: var(--sapShell_TextColor;);
+      --fdButtonColor: var(--sapShell_TextColor);
 
       & > [class*="sap-icon"] {
         color: var(--fdButtonIconColor, var(--sapShell_InteractiveTextColor));
@@ -312,12 +316,16 @@ $select: #{$fd-namespace}-select;
 
   .#{$block}__search-field {
     border: none;
-    min-width: 20rem;
-    max-width: 36rem;
+    min-width: 25rem;
+    max-width: 25rem;
     border-radius: var(--fdShellbar_SearchField_Border_Radius);
     box-shadow: var(--fdShellbar_SearchField_Box_Shadow, var(--fdShellbar_SearchField_Shadow));
     background-color: var(--fdShellbar_SearchField_Background_Color, var(--sapShell_InteractiveBackground));
 
+    &:has(.#{$block}__search-field-category) {
+      max-width: 36rem;
+    }
+
     @include fd-hover() {
       --fdShellbar_SearchField_Box_Shadow: var(--sapField_Hover_Shadow);
       --fdShellbar_SearchField_Background_Color: var(--fdShellbar_SearchField_Background_Color_Hover);
@@ -574,7 +582,7 @@ $select: #{$fd-namespace}-select;
     &--context-area {
       flex: 1;
       order: 2;
-      gap: 1rem;
+      gap: 0.5rem;
     }
 
     &--actions {
@@ -620,14 +628,16 @@ $select: #{$fd-namespace}-select;
   }
 
   &--side-nav {
+    --fdShellbar_Inline_Padding: 0.875rem 1rem;
+
     &.#{$block}--s,
     &.#{$block}--m,
     &.#{$block}--l,
     &.#{$block}--sm,
     &.#{$block}--md,
     &.#{$block}--lg,
     &.#{$block}--xl {
-      padding-inline: 1rem;
+      padding-inline: 0.875rem 1rem;
     }
   }
 

diff --git a/packages/styles/src/theming/common/shellbar/_sap_horizon.scss b/packages/styles/src/theming/common/shellbar/_sap_horizon.scss
@@ -46,7 +46,7 @@
   --fdShellbar_Search_Input_X_Padding: 0.9rem;
   --fdShellbar_Title_Color: var(--sapShell_SubBrand_TextColor);
   --fdShellbar_Subtitle_Color: var(--sapObjectHeader_Subtitle_TextColor);
-  --fdShellbar_Branding_Hover_Background: var(--sapButton_Lite_Hover_Background);
+  --fdShellbar_Branding_Hover_Background: var(--sapShell_Hover_Background);
   --fdShellbar_Branding_Active_Background: var(--sapButton_Lite_Active_Background);
   --fdShellbar_Branding_Hover_Border_Color: var(--sapButton_Lite_Hover_BorderColor);
   --fdShellbar_Branding_Active_Border_Color: var(--sapButton_Lite_Active_BorderColor);

diff --git a/packages/styles/stories/Components/shellbar/optional-items.example.html b/packages/styles/stories/Components/shellbar/optional-items.example.html
@@ -4,13 +4,15 @@
             <button aria-label="Main Navigation" aria-expanded="false" class="fd-button fd-button--transparent fd-shellbar__button">
                 <i class="sap-icon--menu2"></i>
             </button>
+
+            <button aria-label="Back Navigation" aria-expanded="false" class="fd-button fd-button--transparent fd-shellbar__button">
+              <i class="sap-icon--nav-back"></i>
+            </button>
+
+
             <div class="fd-shellbar__branding" role="link" tabindex="0" aria-label="SAP Corporate Portal Solution Name Home">
                 <span class="fd-shellbar__logo"><img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" width="48" height="24" alt="SAP"></span>
-
-                <div class="fd-shellbar__product">
-                    <span class="fd-shellbar__title">Corporate Portal</span>
-                    <span class="fd-shellbar__subtitle">Solution name</span>
-                </div>
+                <span class="fd-shellbar__title">Corporate Portal</span>
             </div>
         </div>
         <div class="fd-shellbar__group fd-shellbar__group--context-area" role="group" aria-label="Additional info">
@@ -128,11 +130,7 @@
             </button>
             <div class="fd-shellbar__branding" role="link" tabindex="0" aria-label="SAP Corporate Portal Solution Name Home">
                 <span class="fd-shellbar__logo"><img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" width="48" height="24" alt="SAP"></span>
-
-                <div class="fd-shellbar__product">
-                    <span class="fd-shellbar__title">Corporate Portal</span>
-                    <span class="fd-shellbar__subtitle">Solution name</span>
-                </div>
+                <span class="fd-shellbar__title">Corporate Portal</span>
             </div>
         </div>
         <div class="fd-shellbar__group fd-shellbar__group--context-area" role="group" aria-label="Additional info">

diff --git a/packages/styles/stories/Components/shellbar/overflow-toolbar.example.html b/packages/styles/stories/Components/shellbar/overflow-toolbar.example.html
@@ -7,10 +7,7 @@
             <div class="fd-shellbar__branding" role="link" tabindex="0" aria-label="SAP Corporate Portal Solution Name Home">
                 <span class="fd-shellbar__logo"><img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" width="48" height="24" alt="SAP"></span>
 
-                <div class="fd-shellbar__product">
-                    <span class="fd-shellbar__title">Corporate Portal</span>
-                    <span class="fd-shellbar__subtitle">Solution name</span>
-                </div>
+                <span class="fd-shellbar__title">Corporate Portal</span>
             </div>
         </div>
         <div class="fd-shellbar__group fd-shellbar__group--context-area" role="group" aria-label="Additional info">

diff --git a/packages/styles/stories/Components/shellbar/primary.example.html b/packages/styles/stories/Components/shellbar/primary.example.html
@@ -2,7 +2,9 @@
     <div class="fd-shellbar" role="banner" aria-label="Shell Bar">
         <div class="fd-shellbar__group fd-shellbar__group--product">
             <div class="fd-shellbar__branding" role="link" tabindex="0" aria-label="SAP Corporate Portal Home">
-                <span class="fd-shellbar__logo"><img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" width="48" height="24" alt="SAP"></span>
+                <span class="fd-shellbar__logo">
+                    <img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" width="48" height="24" alt="SAP">
+                </span>
                 <span class="fd-shellbar__title">Corporate Portal</span>
             </div>
         </div>
@@ -39,47 +41,3 @@
         </div>
     </div>
 </div>
-
-<br><br>
-
-<div style="height:150px">
-    <div class="fd-shellbar" aria-label="Shell Bar">
-        <div class="fd-shellbar__group fd-shellbar__group--product">
-            <div class="fd-shellbar__branding" role="link" tabindex="0" aria-label="SAP Corporate Portal Solution Name Home">
-                <span class="fd-shellbar__logo"><img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" width="48" height="24" alt="SAP"></span>
-
-                <div class="fd-shellbar__product">
-                    <span class="fd-shellbar__title">Corporate Portal</span>
-                    <span class="fd-shellbar__subtitle">Solution name</span>
-                </div>
-            </div>
-        </div>
-        <div class="fd-shellbar__group fd-shellbar__group--actions">
-            <div class="fd-shellbar__action">
-                <div class="fd-popover fd-popover--right">
-                    <div class="fd-popover__control">
-                        <div class="fd-button fd-button--transparent fd-shellbar__button fd-user-menu__control" aria-controls="WV3AY276" aria-expanded="false" aria-haspopup="true" role="button" tabindex="0">
-                            <span class="fd-avatar fd-avatar--xs fd-avatar--circle fd-shellbar__avatar--circle">SD</span>
-                        </div>
-                    </div>
-                    <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right" aria-hidden="true" id="WV3AY276">
-                        <nav class="fd-menu">
-                            <ul class="fd-menu__list fd-menu__list--no-shadow">
-                                <li class="fd-menu__item">
-                                    <a role="button" class="fd-menu__link">
-                                        <span class="fd-menu__title">Settings</span>
-                                    </a>
-                                </li>
-                                <li class="fd-menu__item">
-                                    <a role="button" class="fd-menu__link">
-                                        <span class="fd-menu__title">Sign Out</span>
-                                    </a>
-                                </li>
-                            </ul>
-                        </nav>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/packages/styles/stories/Components/shellbar/responsive-paddings.example.html b/packages/styles/stories/Components/shellbar/responsive-paddings.example.html
@@ -4,10 +4,7 @@
             <div class="fd-shellbar__branding" role="link" tabindex="0" aria-label="SAP Corporate Portal Solution Name Home">
                 <span class="fd-shellbar__logo"><img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" width="48" height="24" alt="SAP"></span>
 
-                <div class="fd-shellbar__product">
-                    <span class="fd-shellbar__title">Corporate Portal</span>
-                    <span class="fd-shellbar__subtitle">Solution name</span>
-                </div>
+                <span class="fd-shellbar__title">Corporate Portal</span>
             </div>
         </div>
         <div class="fd-shellbar__group fd-shellbar__group--actions">
@@ -198,10 +195,7 @@
             <div class="fd-shellbar__branding" role="link" tabindex="0" aria-label="SAP Corporate Portal Solution Name Home">
                 <span class="fd-shellbar__logo"><img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" width="48" height="24" alt="SAP"></span>
 
-                <div class="fd-shellbar__product">
-                    <span class="fd-shellbar__title">Corporate Portal</span>
-                    <span class="fd-shellbar__subtitle">Solution name</span>
-                </div>
+                <span class="fd-shellbar__title">Corporate Portal</span>
             </div>
         </div>
         <div class="fd-shellbar__group fd-shellbar__group--actions">

diff --git a/packages/styles/stories/Components/shellbar/responsiveness.example.html b/packages/styles/stories/Components/shellbar/responsiveness.example.html
@@ -6,9 +6,7 @@
       <div class="fd-shellbar__branding" role="link" tabindex="0" aria-label="SAP Corporate Portal Solution Name Home">
           <span class="fd-shellbar__logo"><img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" width="48" height="24" alt="SAP"></span>
 
-          <div class="fd-shellbar__product">
-              <span class="fd-shellbar__title">Corporate Portal</span>
-          </div>
+          <span class="fd-shellbar__title">Corporate Portal</span>
       </div>
   </div>
   <div class="fd-shellbar__group fd-shellbar__group--actions">
@@ -174,9 +172,7 @@
       <div class="fd-shellbar__branding" role="link" tabindex="0" aria-label="SAP Corporate Portal Solution Name Home">
           <span class="fd-shellbar__logo"><img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" width="48" height="24" alt="SAP"></span>
 
-          <div class="fd-shellbar__product">
-              <span class="fd-shellbar__title">Corporate Portal</span>
-          </div>
+          <span class="fd-shellbar__title">Corporate Portal</span>
       </div>
   </div>
   <div class="fd-shellbar__group fd-shellbar__group--actions">
@@ -315,9 +311,7 @@
       <div class="fd-shellbar__branding" role="link" tabindex="0" aria-label="SAP Corporate Portal Solution Name Home">
           <span class="fd-shellbar__logo"><img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" width="48" height="24" alt="SAP"></span>
 
-          <div class="fd-shellbar__product">
-              <span class="fd-shellbar__title">Corporate Portal</span>
-          </div>
+          <span class="fd-shellbar__title">Corporate Portal</span>
       </div>
   </div>
   <div class="fd-shellbar__group fd-shellbar__group--actions">
@@ -461,9 +455,7 @@
       <div class="fd-shellbar__branding" role="link" tabindex="0" aria-label="SAP Corporate Portal Solution Name Home">
           <span class="fd-shellbar__logo"><img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" width="48" height="24" alt="SAP"></span>
 
-          <div class="fd-shellbar__product">
-              <span class="fd-shellbar__title">Corporate Portal</span>
-          </div>
+          <span class="fd-shellbar__title">Corporate Portal</span>
       </div>
   </div>
   <div class="fd-shellbar__group fd-shellbar__group--actions">

diff --git a/packages/styles/stories/Components/shellbar/shellbar.stories.js b/packages/styles/stories/Components/shellbar/shellbar.stories.js
@@ -107,7 +107,8 @@ OptionalItems.parameters = {
     description: {
       story: `The following elements of the Shell Bar are optional:: 
       <ul>
-        <li><b>Side Navigation Button:</b> expands or collapses a vertical navigation panel for local navigation, and is mandatory in the Shell Bar if side navigation is used.</li>
+        <li><b>Side Navigation Button:</b> expands or collapses a vertical navigation panel for local navigation, and is mandatory in the Shell Bar if side navigation is used. In this case, the left spacing is fixed to 0.875rem to ensure alignment with the navigation panel. Right spacing is fixed to 1rem. </li>
+        <li><b>Back Button: </b> back navigation</li>
         <li><b>Additional Context Area:</b> for containers holding product-related elements like system or status information, and should include components relevant to the entire product, not specific applications, while avoiding content meant for other Shell Bar elements.</li>
         <li><b>Search:</b> the search field in the Shell Bar can be expanded or collapsed based on screen size, and on smaller screens (S), it may be collapsed or moved to the overflow menu if multiple action icons are present.</li>
         <li><b>Joule:</b> AI Assistant</li>