diff --git a/packages/styles/src/title.scss b/packages/styles/src/title.scss index 8ff032a442..509b67d620 100644 --- 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 index ac457d1d41..a275abdf0f 100644 --- 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 index 44ad080799..4260c8b5c3 100644 --- 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 @@
-

- Changed variant -

+

+ Unsaved Variant Title +

*
-

- Changed variant -

+

+ Unsaved Variant Title +

changed diff --git a/packages/styles/stories/Components/variant-management/sizes.example.html b/packages/styles/stories/Components/variant-management/sizes.example.html new file mode 100644 index 0000000000..f925c8ce15 --- /dev/null +++ b/packages/styles/stories/Components/variant-management/sizes.example.html @@ -0,0 +1,109 @@ +
+
+

+ Variant Title H1 +

+ +
+
+
+
+
+

+ Variant Title H2 +

+ +
+
+
+
+
+

+ Variant Title H3 +

+ +
+
+
+
+
+

+ Variant Title H4 +

+ +
+
+
+
+
+
+ Variant Title H5 +
+ +
+
+
+
+
+
+ Variant Title H6 +
+ +
+
+
+
+
+
+ Object Header +
+ +
+
+
+
+
+
+ Snapped Object Header +
+ +
+
+
+
+
+
+ Table Header +
+ +
+
+
+
+
+

+ Disabled Variant Title H4 +

+ +
+
\ No newline at end of file diff --git a/packages/styles/stories/Components/variant-management/variant-management.stories.js b/packages/styles/stories/Components/variant-management/variant-management.stories.js index ecf0f2542c..4773911c72 100644 --- 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,36 +15,18 @@ export default { tags: ['f3', 'theme', 'development'] } }; -export const HeaderSizes = () => { - const headers = Array.from({ - length: 6 - }, (_, i) => i + 1); - return headers.map(header => ` -
-
-

- Variant Title H${header} -

- -
-
- `).join('\n'); -}; -HeaderSizes.storyName = 'Header sizes'; -HeaderSizes.parameters = { + +export const Sizes = () => sizesExampleHtml; +Sizes.parameters = { docs: { description: { - story: ` -

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.

-

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.

- ` + story: `- For matching the dynamic / object page header style: add the modifier class .fd-variant-management__title--object-header to the .fd-variant-management__title base class. +- For matching the dynamic / object page header style when the header is snapped or scrolled: add the modifier class .fd-variant-management__title--snapped-object-header to the .fd-variant-management__title base class. +- For matching the size of Headers within Tables: add the modifier class .fd-variant-management__title--title to the .fd-variant-management__title base class.` } } }; + export const DirtyLabel = () => dirtyLabelExampleHtml; DirtyLabel.storyName = 'Dirty state'; DirtyLabel.parameters = { @@ -50,8 +34,7 @@ DirtyLabel.parameters = { description: { story: `

Variant management supports dirty indicator in cases when selected variant has been modified but not saved.

-

It can be either an asterisk sign, or a human-readable text.

- ` +

It can be either an asterisk sign, or a human-readable text.

` } } }; \ No newline at end of file diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap index e9d1b4953e..a976af5b35 100644 --- a/packages/styles/tests/__snapshots__/styles.test.ts.snap +++ b/packages/styles/tests/__snapshots__/styles.test.ts.snap @@ -46402,9 +46402,9 @@ exports[`Check stories > Components/Variant Management > Story DirtyLabel > Shou "
-

- Changed variant -

+

+ Unsaved Variant Title +

*
-

- Changed variant -

+

+ Unsaved Variant Title +

changed @@ -46427,79 +46427,116 @@ exports[`Check stories > Components/Variant Management > Story DirtyLabel > Shou " `; -exports[`Check stories > Components/Variant Management > Story HeaderSizes > Should match snapshot 1`] = ` -" -
-
-

- Variant Title H1 -

- -
+exports[`Check stories > Components/Variant Management > Story Sizes > Should match snapshot 1`] = ` +"
+
+

+ Variant Title H1 +

+
- - -
-
-

- Variant Title H2 -

- -
+
+
+
+
+

+ Variant Title H2 +

+
- - -
-
-

- Variant Title H3 -

- -
+
+
+
+
+

+ Variant Title H3 +

+
- - -
-
-

- Variant Title H4 -

- +
+
+
+
+

+ Variant Title H4 +

+ +
+
+
+
+
+
+ Variant Title H5 +
+ +
+
+
+
+
+
+ Variant Title H6 +
+ +
+
+
+
+
+
+ Object Header
+
- - -
-
-

- Variant Title H5 -

- +
+
+
+
+
+ Snapped Object Header
+
- - -
-
-

- Variant Title H6 -

- +
+
+
+
+
+ Table Header
+ +
+
+
+
+
+

+ Disabled Variant Title H4 +

+
- " +
" `; exports[`Check stories > Components/Vertical Navigation > Story Condensed > Should match snapshot 1`] = `