fix(styles): update Variant Management [ci visual] (#5017)

BREAKING CHANGE: added new modifier classes: .fd-variant-management__title--object-header, .fd-variant-management__title--snapped-object-header and .fd-variant-management__title--title to the .fd-variant-management__title base class.
SAP · Nov 29, 2023 · 6341768 · 6341768
1 parent c231980
commit 6341768
Show file tree

Hide file tree

Showing 6 changed files with 268 additions and 114 deletions.
diff --git a/packages/styles/src/title.scss b/packages/styles/src/title.scss
@@ -4,35 +4,40 @@
 $block: #{$fd-namespace}-title;
 
 .#{$block} {
+  --fdTitle_Font_Size: 1rem;
+  --fdTitle_Color: var(--sapTextColor);
+  --fdTitle_Font_Family: var(--sapFontHeaderFamily);
+
   @include fd-reset();
 
   @extend %dialog-title;
 
-  color: var(--sapTextColor);
-  font-family: var(--sapFontHeaderFamily);
+  color: var(--fdTitle_Color);
+  font-size: var(--fdTitle_Font_Size);
+  font-family: var(--fdTitle_Font_Family);
 
   &--h1 {
-    font-size: var(--sapFontHeader1Size);
+    --fdTitle_Font_Size: var(--sapFontHeader1Size);
   }
 
   &--h2 {
-    font-size: var(--sapFontHeader2Size);
+    --fdTitle_Font_Size: var(--sapFontHeader2Size);
   }
 
   &--h3 {
-    font-size: var(--sapFontHeader3Size);
+    --fdTitle_Font_Size: var(--sapFontHeader3Size);
   }
 
   &--h4 {
-    font-size: var(--sapFontHeader4Size);
+    --fdTitle_Font_Size: var(--sapFontHeader4Size);
   }
 
   &--h5 {
-    font-size: var(--sapFontHeader5Size);
+    --fdTitle_Font_Size: var(--sapFontHeader5Size);
   }
 
   &--h6 {
-    font-size: var(--sapFontHeader6Size);
+    --fdTitle_Font_Size: var(--sapFontHeader6Size);
   }
 
   &--wrap {

diff --git a/packages/styles/src/variant-management.scss b/packages/styles/src/variant-management.scss
@@ -17,14 +17,34 @@ $title-margin: 0.125rem;
   }
 
   .#{$block} &__title {
-    color: var(--fdVariantManagementHeadingColor);
+    --fdTitle_Color: var(--fdVariantManagementHeadingColor);
 
     @include fd-hover() {
-      color: var(--fdVariantManagementHeadingHoverColor);
+      --fdTitle_Color: var(--fdVariantManagementHeadingHoverColor);
     }
 
     @include fd-active() {
-      color: var(--fdVariantManagementHeadingActiveColor);
+      --fdTitle_Color: var(--fdVariantManagementHeadingActiveColor);
+    }
+
+    @include fd-disabled() {
+      --fdTitle_Color: var(--sapGroup_TitleTextColor);
+
+      cursor: default;
+    }
+
+    &--object-header {
+      --fdTitle_Font_Size: var(--sapObjectHeader_Title_FontSize);
+      --fdTitle_Font_Family: var(--sapObjectHeader_Title_FontFamily);
+    }
+
+    &--snapped-object-header {
+      --fdTitle_Font_Size: var(--sapObjectHeader_Title_SnappedFontSize);
+      --fdTitle_Font_Family: var(--sapObjectHeader_Title_FontFamily);
+    }
+
+    &--table {
+      --fdTitle_Font_Size: var(--sapGroup_Title_FontSize);
     }
   }
 

diff --git a/packages/styles/stories/Components/variant-management/dirty-label.example.html b/packages/styles/stories/Components/variant-management/dirty-label.example.html
@@ -1,9 +1,9 @@
 
 <div class="fd-variant-management">
   <div class="fd-variant-management__header" tabindex="0">
-    <h4 class="fd-title fd-variant-management__title fd-title--h3">
-      Changed variant
-    </h4>
+    <h3 class="fd-title fd-variant-management__title fd-title--h3">
+      Unsaved Variant Title
+    </h3>
     <span class="fd-variant-management__dirty-indicator">*</span>
     <button aria-disabled="false" tabindex="0" aria-haspopup="true" class="fd-button fd-button--transparent fd-button--menu" type="button">
       <i role="presentation" class="sap-icon--slim-arrow-down"></i>
@@ -12,9 +12,9 @@ <h4 class="fd-title fd-variant-management__title fd-title--h3">
 </div>
 <div class="fd-variant-management">
   <div class="fd-variant-management__header" tabindex="0">
-    <h4 class="fd-title fd-variant-management__title fd-title--h3">
-      Changed variant
-    </h4>
+    <h3 class="fd-title fd-variant-management__title fd-title--h3">
+      Unsaved Variant Title
+    </h3>
     <span class="fd-variant-management__dirty-indicator fd-variant-management__dirty-indicator--custom">
       changed
     </span>

diff --git a/packages/styles/stories/Components/variant-management/sizes.example.html b/packages/styles/stories/Components/variant-management/sizes.example.html
@@ -0,0 +1,109 @@
+<div class="fd-variant-management">
+  <div class="fd-variant-management__header" tabindex="0">
+    <h1 class="fd-title fd-variant-management__title fd-title--h1">
+      Variant Title H1
+    </h1>
+    <button aria-disabled="false" tabindex="0" aria-haspopup="true" class="fd-button fd-button--transparent fd-button--menu" type="button">
+      <i role="presentation" class="sap-icon--slim-arrow-down"></i>
+    </button>
+  </div>
+</div>
+<br>
+<div class="fd-variant-management">
+  <div class="fd-variant-management__header" tabindex="0">
+    <h2 class="fd-title fd-variant-management__title fd-title--h2">
+      Variant Title H2
+    </h2>
+    <button aria-disabled="false" tabindex="0" aria-haspopup="true" class="fd-button fd-button--transparent fd-button--menu" type="button">
+      <i role="presentation" class="sap-icon--slim-arrow-down"></i>
+    </button>
+  </div>
+</div>
+<br>
+<div class="fd-variant-management">
+  <div class="fd-variant-management__header" tabindex="0">
+    <h3 class="fd-title fd-variant-management__title fd-title--h3">
+      Variant Title H3
+    </h3>
+    <button aria-disabled="false" tabindex="0" aria-haspopup="true" class="fd-button fd-button--transparent fd-button--menu" type="button">
+      <i role="presentation" class="sap-icon--slim-arrow-down"></i>
+    </button>
+  </div>
+</div>
+<br>
+<div class="fd-variant-management">
+  <div class="fd-variant-management__header" tabindex="0">
+    <h4 class="fd-title fd-variant-management__title fd-title--h4">
+      Variant Title H4
+    </h4>
+    <button aria-disabled="false" tabindex="0" aria-haspopup="true" class="fd-button fd-button--transparent fd-button--menu" type="button">
+      <i role="presentation" class="sap-icon--slim-arrow-down"></i>
+    </button>
+  </div>
+</div>
+<br>
+<div class="fd-variant-management">
+  <div class="fd-variant-management__header" tabindex="0">
+    <h5 class="fd-title fd-variant-management__title fd-title--h5">
+      Variant Title H5
+    </h5>
+    <button aria-disabled="false" tabindex="0" aria-haspopup="true" class="fd-button fd-button--transparent fd-button--menu" type="button">
+      <i role="presentation" class="sap-icon--slim-arrow-down"></i>
+    </button>
+  </div>
+</div>
+<br>
+<div class="fd-variant-management">
+  <div class="fd-variant-management__header" tabindex="0">
+    <h6 class="fd-title fd-variant-management__title fd-title--h6">
+      Variant Title H6
+    </h6>
+    <button aria-disabled="false" tabindex="0" aria-haspopup="true" class="fd-button fd-button--transparent fd-button--menu" type="button">
+      <i role="presentation" class="sap-icon--slim-arrow-down"></i>
+    </button>
+  </div>
+</div>
+<br>
+<div class="fd-variant-management">
+  <div class="fd-variant-management__header" tabindex="0">
+    <div class="fd-title fd-variant-management__title fd-variant-management__title--object-header" role="heading" aria-level="4">
+      Object Header
+    </div>
+    <button aria-disabled="false" tabindex="0" aria-haspopup="true" class="fd-button fd-button--transparent fd-button--menu" type="button">
+      <i role="presentation" class="sap-icon--slim-arrow-down"></i>
+    </button>
+  </div>
+</div>
+<br>
+<div class="fd-variant-management">
+  <div class="fd-variant-management__header" tabindex="0">
+    <div class="fd-title fd-variant-management__title fd-variant-management__title--snapped-object-header" role="heading" aria-level="4">
+      Snapped Object Header
+    </div>
+    <button aria-disabled="false" tabindex="0" aria-haspopup="true" class="fd-button fd-button--transparent fd-button--menu" type="button">
+      <i role="presentation" class="sap-icon--slim-arrow-down"></i>
+    </button>
+  </div>
+</div>
+<br>
+<div class="fd-variant-management">
+  <div class="fd-variant-management__header" tabindex="0">
+    <div class="fd-title fd-variant-management__title fd-variant-management__title--table" role="heading" aria-level="3">
+      Table Header
+    </div>
+    <button aria-disabled="false" tabindex="0" aria-haspopup="true" class="fd-button fd-button--transparent fd-button--menu" type="button">
+      <i role="presentation" class="sap-icon--slim-arrow-down"></i>
+    </button>
+  </div>
+</div>
+<br>
+<div class="fd-variant-management">
+  <div class="fd-variant-management__header" tabindex="0">
+    <h4 class="fd-title fd-variant-management__title fd-title--h4 is-disabled">
+      Disabled Variant Title H4
+    </h4>
+    <button aria-disabled="false" tabindex="0" aria-haspopup="true" class="fd-button fd-button--transparent fd-button--menu" type="button" disabled>
+      <i role="presentation" class="sap-icon--slim-arrow-down"></i>
+    </button>
+  </div>
+</div>
diff --git a/packages/styles/stories/Components/variant-management/variant-management.stories.js b/packages/styles/stories/Components/variant-management/variant-management.stories.js
@@ -1,7 +1,9 @@
+import sizesExampleHtml from "./sizes.example.html?raw";
 import dirtyLabelExampleHtml from "./dirty-label.example.html?raw";
 import '../../../src/variant-management.scss';
 import "../../../src/button.scss";
 import "../../../src/title.scss";
+import "../../../src/icon.scss";
 export default {
   title: 'Components/Variant Management',
   parameters: {
@@ -13,45 +15,26 @@ export default {
     tags: ['f3', 'theme', 'development']
   }
 };
-export const HeaderSizes = () => {
-  const headers = Array.from({
-    length: 6
-  }, (_, i) => i + 1);
-  return headers.map(header => `
-  <div class="fd-variant-management">
-    <div class="fd-variant-management__header" tabindex="0">
-      <h4 class="fd-title fd-variant-management__title fd-title--h${header}">
-        Variant Title H${header}
-      </h4>
-      <button aria-disabled="false" tabindex="0" aria-haspopup="true" class="fd-button fd-button--transparent fd-button--menu" type="button">
-        <i role="presentation" class="sap-icon--slim-arrow-down"></i>
-      </button>
-    </div>
-  </div>
-  `).join('\n');
-};
-HeaderSizes.storyName = 'Header sizes';
-HeaderSizes.parameters = {
+
+export const Sizes = () => sizesExampleHtml;
+Sizes.parameters = {
   docs: {
     description: {
-      story: `
-<p>By using the title control the variant management control can be set to any header level size.
-This is important when setting the variant management into an object or Dynamic page header area.</p>
-<p><strong>Variant management should by default have the Title control with fd-title--h3 class in dynamic page header
-  and fd-title--h4 if used in table header/toolbar above tables.</strong></p>
-          `
+      story: `- <b>For matching the dynamic / object page header style:</b> add the modifier class <code>.fd-variant-management__title--object-header</code> to the <code>.fd-variant-management__title</code> base class.
+- <b>For matching the dynamic / object page header style when the header is snapped or scrolled:</b> add the modifier class <code>.fd-variant-management__title--snapped-object-header</code> to the <code>.fd-variant-management__title</code> base class.
+- <b>For matching the size of Headers within Tables:</b> add the modifier class <code>.fd-variant-management__title--title</code> to the <code>.fd-variant-management__title</code> base class.`
     }
   }
 };
+
 export const DirtyLabel = () => dirtyLabelExampleHtml;
 DirtyLabel.storyName = 'Dirty state';
 DirtyLabel.parameters = {
   docs: {
     description: {
       story: `
 <p>Variant management supports dirty indicator in cases when selected variant has been modified but not saved.</p>
-<p>It can be either an asterisk sign, or a human-readable text.</p>
-          `
+<p>It can be either an asterisk sign, or a human-readable text.</p>`
     }
   }
 };