fix(styles): update Title Bar to latest design [ci visual] (#4969)

BREAKING CHANGE: uses Nested button instead of transparent, wrapped in a container with a new classname fd-title-bar__container
SAP · Nov 9, 2023 · 672d1b1 · 672d1b1
1 parent 8957726
commit 672d1b1
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 16 deletions.
diff --git a/packages/styles/src/title-bar.scss b/packages/styles/src/title-bar.scss
@@ -4,6 +4,8 @@
 $block: #{$fd-namespace}-title-bar;
 
 .#{$block} {
+  --fdTitleBar_Button_Container_Size: 2rem;
+
   @include fd-reset();
   @include fd-ellipsis();
 
@@ -13,6 +15,12 @@ $block: #{$fd-namespace}-title-bar;
 
   max-width: 100%;
 
+  &__button-container {
+    @include fd-reset();
+    @include fd-flex-center();
+    @include fd-set-square(var(--fdTitleBar_Button_Container_Size));
+  }
+
   &__container {
     @include fd-reset();
     @include fd-ellipsis();
@@ -28,6 +36,8 @@ $block: #{$fd-namespace}-title-bar;
     @include fd-flex-vertical-center() {
       gap: 0.125rem;
     }
+
+    height: 1.625rem;
   }
 
   &__title {
@@ -43,8 +53,13 @@ $block: #{$fd-namespace}-title-bar;
     @include fd-reset();
     @include fd-ellipsis();
 
+    line-height: 1;
     font-weight: normal;
     font-size: var(--sapFontSize);
     color: var(--sapContent_LabelColor);
   }
+
+  @include fd-compact-and-condensed() {
+    --fdTitleBar_Button_Container_Size: 1.625rem;
+  }
 }
diff --git a/packages/styles/stories/BTP/title-bar/desktop.example.html b/packages/styles/stories/BTP/title-bar/desktop.example.html
@@ -58,8 +58,8 @@ <h4 class="fd-title-bar__title">Title</h4>
 <br><br>
 <div class="fd-toolbar fd-toolbar--clear fd-toolbar--title-bar" role="toolbar" aria-label="Left, center, and right-aligned toolbar">
     <div class="fd-title-bar">
-        <div class="fd-title-bar__container">
-            <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Back">
+        <div class="fd-title-bar__button-container">
+            <button class="fd-button fd-button--compact fd-button--nested" aria-label="Back">
                 <i class="sap-icon--navigation-left-arrow" role="presentation"></i>
             </button>
         </div>
@@ -129,8 +129,8 @@ <h4 class="fd-title-bar__title">Title</h4>
 <br><br>
 <div class="fd-toolbar fd-toolbar--clear fd-toolbar--title-bar" role="toolbar" aria-label="Left, center, and right-aligned toolbar">
     <div class="fd-title-bar">
-        <div class="fd-title-bar__container">
-            <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Back">
+        <div class="fd-title-bar__button-container">
+            <button class="fd-button fd-button--compact fd-button--nested" aria-label="Back">
                 <i class="sap-icon--navigation-left-arrow" role="presentation"></i>
             </button>
         </div>

diff --git a/packages/styles/stories/BTP/title-bar/mobile.example.html b/packages/styles/stories/BTP/title-bar/mobile.example.html
@@ -1,8 +1,8 @@
 <div style="max-width: 600px;">
     <div class="fd-toolbar fd-toolbar--clear fd-toolbar--title-bar" role="toolbar" aria-label="Left, center, and right-aligned toolbar">
         <div class="fd-title-bar">
-            <div class="fd-title-bar__container">
-                <button class="fd-button fd-button--transparent" aria-label="Back">
+            <div class="fd-title-bar__button-container">
+                <button class="fd-button fd-button--nested" aria-label="Back">
                     <i class="sap-icon--navigation-left-arrow" role="presentation"></i>
                 </button>
             </div>

diff --git a/packages/styles/stories/BTP/title-bar/tablet.example.html b/packages/styles/stories/BTP/title-bar/tablet.example.html
@@ -1,8 +1,8 @@
 <div style="max-width: 860px;">
     <div class="fd-toolbar fd-toolbar--clear fd-toolbar--title-bar" role="toolbar" aria-label="Left, center, and right-aligned toolbar">
         <div class="fd-title-bar">
-            <div class="fd-title-bar__container">
-                <button class="fd-button fd-button--transparent" aria-label="Back">
+            <div class="fd-title-bar__button-container">
+                <button class="fd-button fd-button--nested" aria-label="Back">
                     <i class="sap-icon--navigation-left-arrow" role="presentation"></i>
                 </button>
             </div>

diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap
@@ -4337,8 +4337,8 @@ exports[`Check stories > BTP/Title Bar > Story Desktop > Should match snapshot 1
 <br><br>
 <div class=\\"fd-toolbar fd-toolbar--clear fd-toolbar--title-bar\\" role=\\"toolbar\\" aria-label=\\"Left, center, and right-aligned toolbar\\">
     <div class=\\"fd-title-bar\\">
-        <div class=\\"fd-title-bar__container\\">
-            <button class=\\"fd-button fd-button--compact fd-button--transparent\\" aria-label=\\"Back\\">
+        <div class=\\"fd-title-bar__button-container\\">
+            <button class=\\"fd-button fd-button--compact fd-button--nested\\" aria-label=\\"Back\\">
                 <i class=\\"sap-icon--navigation-left-arrow\\" role=\\"presentation\\"></i>
             </button>
         </div>
@@ -4408,8 +4408,8 @@ exports[`Check stories > BTP/Title Bar > Story Desktop > Should match snapshot 1
 <br><br>
 <div class=\\"fd-toolbar fd-toolbar--clear fd-toolbar--title-bar\\" role=\\"toolbar\\" aria-label=\\"Left, center, and right-aligned toolbar\\">
     <div class=\\"fd-title-bar\\">
-        <div class=\\"fd-title-bar__container\\">
-            <button class=\\"fd-button fd-button--compact fd-button--transparent\\" aria-label=\\"Back\\">
+        <div class=\\"fd-title-bar__button-container\\">
+            <button class=\\"fd-button fd-button--compact fd-button--nested\\" aria-label=\\"Back\\">
                 <i class=\\"sap-icon--navigation-left-arrow\\" role=\\"presentation\\"></i>
             </button>
         </div>
@@ -4450,8 +4450,8 @@ exports[`Check stories > BTP/Title Bar > Story Mobile > Should match snapshot 1`
 "<div style=\\"max-width: 600px;\\">
     <div class=\\"fd-toolbar fd-toolbar--clear fd-toolbar--title-bar\\" role=\\"toolbar\\" aria-label=\\"Left, center, and right-aligned toolbar\\">
         <div class=\\"fd-title-bar\\">
-            <div class=\\"fd-title-bar__container\\">
-                <button class=\\"fd-button fd-button--transparent\\" aria-label=\\"Back\\">
+            <div class=\\"fd-title-bar__button-container\\">
+                <button class=\\"fd-button fd-button--nested\\" aria-label=\\"Back\\">
                     <i class=\\"sap-icon--navigation-left-arrow\\" role=\\"presentation\\"></i>
                 </button>
             </div>
@@ -4484,8 +4484,8 @@ exports[`Check stories > BTP/Title Bar > Story Tablet > Should match snapshot 1`
 "<div style=\\"max-width: 860px;\\">
     <div class=\\"fd-toolbar fd-toolbar--clear fd-toolbar--title-bar\\" role=\\"toolbar\\" aria-label=\\"Left, center, and right-aligned toolbar\\">
         <div class=\\"fd-title-bar\\">
-            <div class=\\"fd-title-bar__container\\">
-                <button class=\\"fd-button fd-button--transparent\\" aria-label=\\"Back\\">
+            <div class=\\"fd-title-bar__button-container\\">
+                <button class=\\"fd-button fd-button--nested\\" aria-label=\\"Back\\">
                     <i class=\\"sap-icon--navigation-left-arrow\\" role=\\"presentation\\"></i>
                 </button>
             </div>