From 45dc56222d7f7ec5514cce9785b737ca11e5ef96 Mon Sep 17 00:00:00 2001 From: Inna Atanasova Date: Wed, 6 Sep 2023 15:26:38 -0400 Subject: [PATCH] feat(styles): new BTP Tool Header [ci visual] --- package.json | 2 +- .../common/tool-header/_sap_horizon.scss | 3 + .../common/tool-header/_sap_horizon_hc.scss | 3 + packages/styles/src/theming/sap_fiori_3.scss | 1 + .../theming/sap_fiori_3/_css_variables.scss | 1 + .../styles/src/theming/sap_fiori_3_dark.scss | 1 + .../sap_fiori_3_dark/_css_variables.scss | 1 + .../styles/src/theming/sap_fiori_3_hcb.scss | 1 + .../sap_fiori_3_hcb/_css_variables.scss | 1 + .../styles/src/theming/sap_fiori_3_hcw.scss | 1 + .../sap_fiori_3_hcw/_css_variables.scss | 1 + .../src/theming/sap_fiori_3_light_dark.scss | 1 + .../_css_variables.scss | 1 + packages/styles/src/theming/sap_horizon.scss | 1 + .../theming/sap_horizon/_css_variables.scss | 1 + .../styles/src/theming/sap_horizon_dark.scss | 1 + .../sap_horizon_dark/_css_variables.scss | 1 + .../styles/src/theming/sap_horizon_hcb.scss | 1 + .../sap_horizon_hcb/_css_variables.scss | 1 + .../styles/src/theming/sap_horizon_hcw.scss | 1 + .../sap_horizon_hcw/_css_variables.scss | 1 + packages/styles/src/tool-header.scss | 299 +++----------- .../BTP/tool-header/desktop.example.html | 251 +++++++++++ .../BTP/tool-header/mobile.example.html | 261 ++++++++++++ .../BTP/tool-header/tablet.example.html | 390 ++++++++++++++++++ .../BTP/tool-header/tool-header.stories.js | 64 +++ .../horizontal-paddings.example.html | 124 ------ .../tool-header/menu-buttons.example.html | 46 --- .../Components/tool-header/menu.example.html | 48 --- .../tool-header/primary.example.html | 54 --- .../responsive-paddings.example.html | 39 -- .../tool-header/tool-header.stories.js | 118 ------ 32 files changed, 1058 insertions(+), 662 deletions(-) create mode 100644 packages/styles/src/theming/common/tool-header/_sap_horizon.scss create mode 100644 packages/styles/src/theming/common/tool-header/_sap_horizon_hc.scss create mode 100644 packages/styles/stories/BTP/tool-header/desktop.example.html create mode 100644 packages/styles/stories/BTP/tool-header/mobile.example.html create mode 100644 packages/styles/stories/BTP/tool-header/tablet.example.html create mode 100644 packages/styles/stories/BTP/tool-header/tool-header.stories.js delete mode 100644 packages/styles/stories/Components/tool-header/horizontal-paddings.example.html delete mode 100644 packages/styles/stories/Components/tool-header/menu-buttons.example.html delete mode 100644 packages/styles/stories/Components/tool-header/menu.example.html delete mode 100644 packages/styles/stories/Components/tool-header/primary.example.html delete mode 100644 packages/styles/stories/Components/tool-header/responsive-paddings.example.html delete mode 100644 packages/styles/stories/Components/tool-header/tool-header.stories.js diff --git a/package.json b/package.json index f1186a1b93..2683bb8038 100644 --- a/package.json +++ b/package.json @@ -170,4 +170,4 @@ "fast-deep-equal": "^3.1.3", "jsdom": "^20.0.1" } -} \ No newline at end of file +} diff --git a/packages/styles/src/theming/common/tool-header/_sap_horizon.scss b/packages/styles/src/theming/common/tool-header/_sap_horizon.scss new file mode 100644 index 0000000000..0dfa26d360 --- /dev/null +++ b/packages/styles/src/theming/common/tool-header/_sap_horizon.scss @@ -0,0 +1,3 @@ +:root { + --fdToolHeader_Border_Color: transparent; +} diff --git a/packages/styles/src/theming/common/tool-header/_sap_horizon_hc.scss b/packages/styles/src/theming/common/tool-header/_sap_horizon_hc.scss new file mode 100644 index 0000000000..15d5168104 --- /dev/null +++ b/packages/styles/src/theming/common/tool-header/_sap_horizon_hc.scss @@ -0,0 +1,3 @@ +:root { + --fdToolHeader_Border_Color: var(--sapShell_BorderColor); +} diff --git a/packages/styles/src/theming/sap_fiori_3.scss b/packages/styles/src/theming/sap_fiori_3.scss index 95e1cccd27..f9bee68d06 100644 --- a/packages/styles/src/theming/sap_fiori_3.scss +++ b/packages/styles/src/theming/sap_fiori_3.scss @@ -44,6 +44,7 @@ @import "./common/pagination/sap_fiori"; @import "./common/search-field/sap_fiori"; @import "./common/navigation-menu/sap_fiori"; +@import "./common/tool-header/sap_horizon"; @import "./sap_fiori_3/css_variables"; :root { diff --git a/packages/styles/src/theming/sap_fiori_3/_css_variables.scss b/packages/styles/src/theming/sap_fiori_3/_css_variables.scss index b83d6a964c..d3625f07b7 100644 --- a/packages/styles/src/theming/sap_fiori_3/_css_variables.scss +++ b/packages/styles/src/theming/sap_fiori_3/_css_variables.scss @@ -862,6 +862,7 @@ --sapMenu_Hover_Background: var(--sapList_Hover_Background); --sapMenu_Active_Background: var(--sapList_Active_Background); --sapMenu_Selected_Background: var(--sapList_Hover_SelectionBackground); + --sapToolHeader_Shadow1: 0 0 0.125rem 0 rgba(0, 0, 0, 0.16), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.16); } .background-image--sapCompanyLogo { diff --git a/packages/styles/src/theming/sap_fiori_3_dark.scss b/packages/styles/src/theming/sap_fiori_3_dark.scss index c594478b41..84f555a5ba 100644 --- a/packages/styles/src/theming/sap_fiori_3_dark.scss +++ b/packages/styles/src/theming/sap_fiori_3_dark.scss @@ -44,6 +44,7 @@ @import "./common/pagination/sap_fiori"; @import "./common/search-field/sap_fiori"; @import "./common/navigation-menu/sap_fiori"; +@import "./common/tool-header/sap_horizon"; @import "./sap_fiori_3_dark/css_variables"; :root { diff --git a/packages/styles/src/theming/sap_fiori_3_dark/_css_variables.scss b/packages/styles/src/theming/sap_fiori_3_dark/_css_variables.scss index 25e36200b6..a4d3e92b05 100644 --- a/packages/styles/src/theming/sap_fiori_3_dark/_css_variables.scss +++ b/packages/styles/src/theming/sap_fiori_3_dark/_css_variables.scss @@ -862,6 +862,7 @@ --sapMenu_Hover_Background: var(--sapList_Hover_Background); --sapMenu_Active_Background: var(--sapList_Active_Background); --sapMenu_Selected_Background: var(--sapList_Hover_SelectionBackground); + --sapToolHeader_Shadow1: 0 0 0.125rem 0 rgba(0, 0, 0, 0.16), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.32); } .background-image--sapCompanyLogo { diff --git a/packages/styles/src/theming/sap_fiori_3_hcb.scss b/packages/styles/src/theming/sap_fiori_3_hcb.scss index 4b58f7d446..7dd7d2aa50 100644 --- a/packages/styles/src/theming/sap_fiori_3_hcb.scss +++ b/packages/styles/src/theming/sap_fiori_3_hcb.scss @@ -51,6 +51,7 @@ @import "./common/pagination/sap_fiori"; @import "./common/search-field/sap_fiori_hc"; @import "./common/navigation-menu/sap_fiori_hc"; +@import "./common/tool-header/sap_horizon_hc"; @import "./sap_fiori_3_hcb/css_variables"; :root { diff --git a/packages/styles/src/theming/sap_fiori_3_hcb/_css_variables.scss b/packages/styles/src/theming/sap_fiori_3_hcb/_css_variables.scss index a86068a18a..76d849be1d 100644 --- a/packages/styles/src/theming/sap_fiori_3_hcb/_css_variables.scss +++ b/packages/styles/src/theming/sap_fiori_3_hcb/_css_variables.scss @@ -862,6 +862,7 @@ --sapMenu_Hover_Background: var(--sapList_Hover_Background); --sapMenu_Active_Background: var(--sapList_Active_Background); --sapMenu_Selected_Background: var(--sapList_SelectionBackgroundColor); + --sapToolHeader_Shadow1: 0 0 0 0.0625rem #fff, 0 0.5rem 1rem 0 rgba(255, 255, 255, 0.16); } .background-image--sapCompanyLogo { diff --git a/packages/styles/src/theming/sap_fiori_3_hcw.scss b/packages/styles/src/theming/sap_fiori_3_hcw.scss index 1247b8a728..bbab05f766 100644 --- a/packages/styles/src/theming/sap_fiori_3_hcw.scss +++ b/packages/styles/src/theming/sap_fiori_3_hcw.scss @@ -45,6 +45,7 @@ @import "./common/pagination/sap_fiori"; @import "./common/search-field/sap_fiori_hc"; @import "./common/navigation-menu/sap_fiori_hc"; +@import "./common/tool-header/sap_horizon_hc"; @import "./common/step-input/sap_fiori"; :root { diff --git a/packages/styles/src/theming/sap_fiori_3_hcw/_css_variables.scss b/packages/styles/src/theming/sap_fiori_3_hcw/_css_variables.scss index b40499b9af..5394b41cc5 100644 --- a/packages/styles/src/theming/sap_fiori_3_hcw/_css_variables.scss +++ b/packages/styles/src/theming/sap_fiori_3_hcw/_css_variables.scss @@ -862,6 +862,7 @@ --sapMenu_Hover_Background: var(--sapList_Hover_Background); --sapMenu_Active_Background: var(--sapList_Active_Background); --sapMenu_Selected_Background: var(--sapList_SelectionBackgroundColor); + --sapToolHeader_Shadow1: 0 0 0 0.0625rem #000, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.16); } .background-image--sapCompanyLogo { diff --git a/packages/styles/src/theming/sap_fiori_3_light_dark.scss b/packages/styles/src/theming/sap_fiori_3_light_dark.scss index e3a08684b2..6fd3a0dae0 100644 --- a/packages/styles/src/theming/sap_fiori_3_light_dark.scss +++ b/packages/styles/src/theming/sap_fiori_3_light_dark.scss @@ -43,6 +43,7 @@ @import "./common/pagination/sap_fiori"; @import "./common/search-field/sap_fiori"; @import "./common/navigation-menu/sap_fiori"; +@import "./common/tool-header/sap_horizon"; @import "./sap_fiori_3_light_dark/css_variables"; :root { diff --git a/packages/styles/src/theming/sap_fiori_3_light_dark/_css_variables.scss b/packages/styles/src/theming/sap_fiori_3_light_dark/_css_variables.scss index 2cce720520..4bfccca01f 100644 --- a/packages/styles/src/theming/sap_fiori_3_light_dark/_css_variables.scss +++ b/packages/styles/src/theming/sap_fiori_3_light_dark/_css_variables.scss @@ -1730,6 +1730,7 @@ --sapMenu_Hover_Background: var(--sapList_Hover_Background); --sapMenu_Active_Background: var(--sapList_Active_Background); --sapMenu_Selected_Background: var(--sapList_Hover_SelectionBackground); + --sapToolHeader_Shadow1: 0 0 0.125rem 0 rgba(0, 0, 0, 0.16), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.16); } .background-image--sapCompanyLogo { diff --git a/packages/styles/src/theming/sap_horizon.scss b/packages/styles/src/theming/sap_horizon.scss index 8b5557c460..11e6c8ef47 100644 --- a/packages/styles/src/theming/sap_horizon.scss +++ b/packages/styles/src/theming/sap_horizon.scss @@ -46,6 +46,7 @@ @import "./common/pagination/sap_horizon"; @import "./common/search-field/sap_horizon"; @import "./common/navigation-menu/sap_horizon"; +@import "./common/tool-header/sap_horizon"; @import "./sap_horizon/css_variables"; :root { diff --git a/packages/styles/src/theming/sap_horizon/_css_variables.scss b/packages/styles/src/theming/sap_horizon/_css_variables.scss index e1a0caed3f..e7f2bd4ec8 100644 --- a/packages/styles/src/theming/sap_horizon/_css_variables.scss +++ b/packages/styles/src/theming/sap_horizon/_css_variables.scss @@ -862,6 +862,7 @@ --sapMenu_Hover_Background: var(--sapList_Hover_Background); --sapMenu_Active_Background: var(--sapList_Active_Background); --sapMenu_Selected_Background: var(--sapList_Hover_SelectionBackground); + --sapToolHeader_Shadow1: 0 0 0.125rem 0 rgba(34, 53, 72, 0.16), 0 0.5rem 1rem 0 rgba(34, 53, 72, 0.16); } .background-image--sapCompanyLogo { diff --git a/packages/styles/src/theming/sap_horizon_dark.scss b/packages/styles/src/theming/sap_horizon_dark.scss index f7967c114d..ad6a439d9c 100644 --- a/packages/styles/src/theming/sap_horizon_dark.scss +++ b/packages/styles/src/theming/sap_horizon_dark.scss @@ -46,6 +46,7 @@ @import "./common/pagination/sap_horizon"; @import "./common/search-field/sap_horizon"; @import "./common/navigation-menu/sap_horizon"; +@import "./common/tool-header/sap_horizon"; @import "./sap_horizon_dark/css_variables"; :root { diff --git a/packages/styles/src/theming/sap_horizon_dark/_css_variables.scss b/packages/styles/src/theming/sap_horizon_dark/_css_variables.scss index dc79aafb23..c379b01d18 100644 --- a/packages/styles/src/theming/sap_horizon_dark/_css_variables.scss +++ b/packages/styles/src/theming/sap_horizon_dark/_css_variables.scss @@ -862,6 +862,7 @@ --sapMenu_Hover_Background: var(--sapList_Hover_Background); --sapMenu_Active_Background: var(--sapList_Active_Background); --sapMenu_Selected_Background: var(--sapList_Hover_SelectionBackground); + --sapToolHeader_Shadow1: 0 0 0.125rem 0 rgba(0, 0, 0, 0.16), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.32); } .background-image--sapCompanyLogo { diff --git a/packages/styles/src/theming/sap_horizon_hcb.scss b/packages/styles/src/theming/sap_horizon_hcb.scss index 8bae44081d..f06ffa1ca4 100644 --- a/packages/styles/src/theming/sap_horizon_hcb.scss +++ b/packages/styles/src/theming/sap_horizon_hcb.scss @@ -46,6 +46,7 @@ @import "./common/pagination/sap_horizon"; @import "./common/search-field/sap_horizon_hc"; @import "./common/navigation-menu/sap_horizon_hc"; +@import "./common/tool-header/sap_horizon_hc"; @import "./sap_horizon_hcb/css_variables"; :root { diff --git a/packages/styles/src/theming/sap_horizon_hcb/_css_variables.scss b/packages/styles/src/theming/sap_horizon_hcb/_css_variables.scss index 8be49aea2a..19b9b5fb03 100644 --- a/packages/styles/src/theming/sap_horizon_hcb/_css_variables.scss +++ b/packages/styles/src/theming/sap_horizon_hcb/_css_variables.scss @@ -862,6 +862,7 @@ --sapMenu_Hover_Background: var(--sapList_Hover_Background); --sapMenu_Active_Background: var(--sapList_Active_Background); --sapMenu_Selected_Background: var(--sapList_SelectionBackgroundColor); + --sapToolHeader_Shadow1: 0 0 0 0.0625rem #fff, 0 0.5rem 1rem 0 rgba(255, 255, 255, 0.16); } .background-image--sapCompanyLogo { diff --git a/packages/styles/src/theming/sap_horizon_hcw.scss b/packages/styles/src/theming/sap_horizon_hcw.scss index 8e96393d83..415447945a 100644 --- a/packages/styles/src/theming/sap_horizon_hcw.scss +++ b/packages/styles/src/theming/sap_horizon_hcw.scss @@ -47,6 +47,7 @@ @import "./common/pagination/sap_horizon"; @import "./common/search-field/sap_horizon_hc"; @import "./common/navigation-menu/sap_horizon_hc"; +@import "./common/tool-header/sap_horizon_hc"; @import "./sap_horizon_hcw/css_variables"; :root { diff --git a/packages/styles/src/theming/sap_horizon_hcw/_css_variables.scss b/packages/styles/src/theming/sap_horizon_hcw/_css_variables.scss index 6c8900441c..3fb6a5dd30 100644 --- a/packages/styles/src/theming/sap_horizon_hcw/_css_variables.scss +++ b/packages/styles/src/theming/sap_horizon_hcw/_css_variables.scss @@ -862,6 +862,7 @@ --sapMenu_Hover_Background: var(--sapList_Hover_Background); --sapMenu_Active_Background: var(--sapList_Active_Background); --sapMenu_Selected_Background: var(--sapList_SelectionBackgroundColor); + --sapToolHeader_Shadow1: 0 0 0 0.0625rem #000, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.16); } .background-image--sapCompanyLogo { diff --git a/packages/styles/src/tool-header.scss b/packages/styles/src/tool-header.scss index 18f8dfeebc..7a27c8ca61 100644 --- a/packages/styles/src/tool-header.scss +++ b/packages/styles/src/tool-header.scss @@ -1,279 +1,114 @@ -@import "./new-settings"; -@import "./mixins"; +@import './new-settings'; +@import './mixins'; $block: #{$fd-namespace}-tool-header; -$fd-tool-header-height: 2.75rem !default; - -$fd-tool-header-responsive-paddings: ( - 'sm': ('padding': 0 1rem), - 'md': ('padding': 0 2rem), - 'lg': ('padding': 0 2rem), - 'xl': ('padding': 0 3rem) -); - -$fd-tool-header-icon-semantic-values: ( - 'contrast': ( - 'iconColor': var(--fdTool_Header_Icon_Color_Contrast), - 'iconColorInverted': var(--fdTool_Header_Icon_Color_Inverted_Contrast), - 'bgColorInverted': var(--fdTool_Header_Icon_Background_Color_Inverted_Contrast) - ), - 'positive': ( - 'iconColor': var(--fdTool_Header_Icon_Color_Positive), - 'iconColorInverted': var(--fdTool_Header_Icon_Color_Inverted_Positive), - 'bgColorInverted': var(--fdTool_Header_Icon_Background_Color_Inverted_Positive) - ), - 'critical': ( - 'iconColor': var(--fdTool_Header_Icon_Color_Critical), - 'iconColorInverted': var(--fdTool_Header_Icon_Color_Inverted_Critical), - 'bgColorInverted': var(--fdTool_Header_Icon_Background_Color_Inverted_Critical) - ), - 'negative': ( - 'iconColor': var(--fdTool_Header_Icon_Color_Negative), - 'iconColorInverted': var(--fdTool_Header_Icon_Color_Inverted_Negative), - 'bgColorInverted': var(--fdTool_Header_Icon_Background_Color_Inverted_Negative) - ), - 'neutral': ( - 'iconColor': var(--fdTool_Header_Icon_Color_Neutral), - 'iconColorInverted': var(--fdTool_Header_Icon_Color_Inverted_Neutral), - 'bgColorInverted': var(--fdTool_Header_Icon_Background_Color_Inverted_Neutral) - ), -); - -$fd-tool-header-object-status-semantic-values: ( - 'positive': ( - 'color': var(--fdTool_Header_Object_Status_Color_Positive), - 'iconColorInverted': var(--fdTool_Header_Object_Status_Text_Color_Inverted), - 'bgColorInverted': var(--fdTool_Header_Object_Status_Background_Color_Inverted_Positive) - ), - 'critical': ( - 'color': var(--fdTool_Header_Object_Status_Color_Critical), - 'iconColorInverted': var(--fdTool_Header_Object_Status_Text_Color_Inverted), - 'bgColorInverted': var(--fdTool_Header_Object_Status_Background_Color_Inverted_Critical) - ), - 'negative': ( - 'color': var(--fdTool_Header_Object_Status_Color_Negative), - 'iconColorInverted': var(--fdTool_Header_Object_Status_Text_Color_Inverted), - 'bgColorInverted': var(--fdTool_Header_Object_Status_Background_Color_Inverted_Negative) - ), - 'neutral': ( - 'color': var(--fdTool_Header_Object_Status_Color_Neutral), - 'iconColorInverted': var(--fdTool_Header_Object_Status_Text_Color_Inverted), - 'bgColorInverted': var(--fdTool_Header_Object_Status_Background_Color_Inverted_Neutral) - ), - 'informative': ( - 'color': var(--fdTool_Header_Object_Status_Color_Informative), - 'iconColorInverted': var(--fdTool_Header_Object_Status_Text_Color_Inverted), - 'bgColorInverted': var(--fdTool_Header_Object_Status_Background_Color_Inverted_Informative) - ) -); .#{$block} { + --fdToolHeader_Min_Height: 3.75rem; + --fdToolHeader_Padding_Left: 1.5rem; + --fdToolHeader_Padding_Right: 1.25rem; + @include fd-reset(); - @include fd-flex-vertical-center() { - justify-content: space-between; + @include fd-flex() { + gap: 0.75rem; } + @include fd-set-paddings-y-equal(0.625rem); + @include fd-set-paddings-x(var(--fdToolHeader_Padding_Left), var(--fdToolHeader_Padding_Right)); + width: 100%; - padding: 0 0.5rem 0 1rem; - height: $fd-tool-header-height; + height: auto; + border-radius: 0.5rem; background: var(--sapShellColor); - box-shadow: inset 0 -0.0625rem 0 0 var(--sapShell_BorderColor); + box-shadow: var(--sapToolHeader_Shadow1); + min-height: var(--fdToolHeader_Min_Height); + border: solid 0.0625rem var(--fdToolHeader_Border_Color); // ELEMENTS &__group { @include fd-reset(); - @include fd-flex-vertical-center(); - } - - &__element { - @include fd-reset(); - @include fd-flex-center() { - flex-shrink: 0; + @include fd-flex-vertical-center() { + gap: 0.375rem; + flex: 1; } - max-width: 100%; - height: $fd-tool-header-height; - - &:not(:last-child) { - @include fd-set-margin-right(0.5rem); + &--menu { + flex: 0; } - } - - &__logo { - @include fd-reset(); - width: auto; - height: 1.625rem; - background-size: contain; - background-repeat: no-repeat; - } - - .#{$block}__text { - @include fd-ellipsis(); - - color: var(--sapShell_TextColor); - } - - .#{$block}__label { - @include fd-ellipsis(); - @include fd-reset-margins(); - - align-self: center; - color: var(--sapShell_TextColor); - } - - .#{$block}__title { - @include fd-ellipsis(); - @include fd-set-paddings-x-equal(0.625rem); - - font-weight: bold; - color: var(--sapShell_TextColor); - } - - .#{$block}__button { - color: var(--sapShell_InteractiveTextColor); - - &:hover { - border-color: transparent; - color: var(--sapShell_InteractiveTextColor); - background: var(--sapShell_Hover_Background); + &--center { + flex: 0; } - &:focus { - outline-color: var(--sapContent_ContrastFocusColor); - - &::after { - border-color: var(--sapContent_ContrastFocusColor); - } + &--actions { + justify-content: flex-end; } - &:active { - color: var(--sapShell_Active_TextColor); - background: var(--sapShell_Active_Background); - outline-color: var(--sapContent_ContrastFocusColor); - - &::after { - border-color: var(--sapContent_ContrastFocusColor); - } - } - - .#{$block}__button-text { - @include fd-media-sm() { - display: none; - } - - color: var(--sapShell_TextColor); + &--hidden { + display: none; } + } - .#{$block}__title { - @include fd-reset-paddings-x(); + &__element { + @include fd-reset(); + @include fd-flex-center(); - @include fd-media-sm() { - display: none; - } + &--hidden { + display: none; } } - .#{$block}__icon { - color: var(--fdTool_Header_Icon_Color_Default); - font-size: 1rem; - line-height: 1; - - &--inverted { - color: var(--fdTool_Header_Icon_Color_Inverted_Default); - background: var(--fdTool_Header_Icon_Background_Color_Inverted_Default); - } + &__logo { + @include fd-reset(); - @each $set-name, $set-params in $fd-tool-header-icon-semantic-values { - &--#{$set-name} { - color: map_get($set-params, 'iconColor'); + width: auto; + cursor: pointer; + height: 1.625rem; + background-size: contain; + background-repeat: no-repeat; - &.#{$block}__icon--inverted { - color: map_get($set-params, 'iconColorInverted'); - background: map_get($set-params, 'bgColorInverted'); - } - } + @include fd-focus() { + border-radius: 0.25rem; + outline-offset: 0.125rem; + outline: var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor); } } - .#{$block}__object-status { - @each $set-name, $set-params in $fd-tool-header-object-status-semantic-values { - &--#{$set-name} { - color: map_get($set-params, 'color'); - text-shadow: none; - - [class*="sap-icon"] { - color: map_get($set-params, 'color'); - } - - &[class*="inverted"] { - text-shadow: none; - color: map_get($set-params, 'iconColorInverted'); - - [class*="icon"] { - color: map_get($set-params, 'iconColorInverted'); - } - - background: map_get($set-params, 'bgColorInverted'); - - @include fd-hover () { - color: map_get($set-params, 'iconColorInverted'); - - [class*="icon"] { - color: map_get($set-params, 'iconColorInverted'); - } - - background: map_get($set-params, 'bgColorInverted'); - } - - &[class*="link"] { - @include fd-hover () { - color: map_get($set-params, 'iconColorInverted'); - - [class*="icon"] { - color: map_get($set-params, 'iconColorInverted'); - } + &__separator { + @include fd-reset(); + @include fd-set-square(0.75rem); - background: map_get($set-params, 'bgColorInverted'); - } - } - } - } - } + background: transparent; } - .#{$block}__input-group { - background: var(--sapShellColor); - border: 0.0625rem solid var(--sapShell_InteractiveBorderColor); + &__product-name { + @include fd-reset(); - input { - color: var(--sapShell_TextColor); + font-size: 1.125rem; + line-height: 1.625rem; + vertical-align: baseline; + font-family: var(--sapFontBlackFamily); + color: var(--sapShell_GroupTitleTextColor); + } - &::placeholder { - color: var(--sapShell_InteractiveTextColor); - } - } + &__second-title { + @include fd-reset(); - @include fd-hover() { - background: var(--sapShell_Hover_Background); - border-color: var(--sapShell_InteractiveBorderColor); - } + margin-top: 0.125rem; + vertical-align: baseline; + font-size: var(--sapFontSize); + font-family: var(--sapFontFamily); + color: var(--sapContent_LabelColor); + line-height: var(--sapContent_LineHeight); } - // MODIFIER CLASSES &--menu { - @include fd-set-paddings-x-equal(0.5rem); - } - - @each $set-name, $set-padding in $fd-tool-header-responsive-paddings { - &--#{$set-name} { - padding: map_get($set-padding, 'padding'); - } + --fdToolHeader_Padding_Left: 0.75rem; } - &--responsive-paddings { - @include fd-apply-responsive-paddings(); + @include fd-compact-and-condensed() { + --fdToolHeader_Min_Height: 3.25rem; } } diff --git a/packages/styles/stories/BTP/tool-header/desktop.example.html b/packages/styles/stories/BTP/tool-header/desktop.example.html new file mode 100644 index 0000000000..3ef5299f13 --- /dev/null +++ b/packages/styles/stories/BTP/tool-header/desktop.example.html @@ -0,0 +1,251 @@ +

Without Menu Button (default)

+
+
+
+ +
+ +
+ +
+ +
+
Product Name
+
+ +
+
Second Title
+
+
+ +
+
+
+ + + +
+
+ +
+
+ +
+
+
+
+
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+ +

With Menu Button

+
+
+
+ +
+
+ +
+
+ +
+ +
+ +
+ +
+
Product Name
+
+ +
+
Second Title
+
+
+ +
+
+
+ + + +
+
+ +
+
+ +
+
+
+
+
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+
diff --git a/packages/styles/stories/BTP/tool-header/mobile.example.html b/packages/styles/stories/BTP/tool-header/mobile.example.html new file mode 100644 index 0000000000..a082df101f --- /dev/null +++ b/packages/styles/stories/BTP/tool-header/mobile.example.html @@ -0,0 +1,261 @@ +

Phone

+
+
+
+ +
+
+ +
+
+ +
+ +
+ +
+ +
+
Product Name
+
+ +
+
Second Title
+
+
+ +
+
+
+ + + +
+
+ +
+
+ +
+
+
+
+
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+ +

Phone (Expanded Search)

+
+
+
+ +
+
+ +
+
+ +
+ +
+ +
+ +
+
Product Name
+
+ +
+
Second Title
+
+
+ +
+
+
+ + + +
+
+ +
+
+ +
+
+
+
+
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + +
+ +
+ +
+
diff --git a/packages/styles/stories/BTP/tool-header/tablet.example.html b/packages/styles/stories/BTP/tool-header/tablet.example.html new file mode 100644 index 0000000000..ec44fedda8 --- /dev/null +++ b/packages/styles/stories/BTP/tool-header/tablet.example.html @@ -0,0 +1,390 @@ +

Tablet - Landscape

+
+
+
+ +
+
+ +
+
+ +
+ +
+ +
+ +
+
Product Name
+
+ +
+
Second Title
+
+
+ +
+
+
+ + + +
+
+ +
+
+ +
+
+
+
+
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+ +

Tablet - Portrait

+
+
+
+ +
+
+ +
+
+ +
+ +
+ +
+ +
+
Product Name
+
+ +
+
Second Title
+
+
+ +
+
+
+ + + +
+
+ +
+
+ +
+
+
+
+
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ +

Tablet - Portrait (Expanded Search)

+
+
+
+ +
+
+ +
+
+ +
+ +
+ +
+ +
+
Product Name
+
+ +
+
Second Title
+
+
+ +
+
+
+ + + +
+
+ +
+
+ +
+
+
+
+
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+
diff --git a/packages/styles/stories/BTP/tool-header/tool-header.stories.js b/packages/styles/stories/BTP/tool-header/tool-header.stories.js new file mode 100644 index 0000000000..67453c39bc --- /dev/null +++ b/packages/styles/stories/BTP/tool-header/tool-header.stories.js @@ -0,0 +1,64 @@ +import desktopExampleHtml from './desktop.example.html?raw'; +import tabletExampleHtml from './tablet.example.html?raw'; +import mobileExampleHtml from './mobile.example.html?raw'; +import '../../../src/avatar.scss'; +import '../../../src/button.scss'; +import '../../../src/icon.scss'; +import '../../../src/search-field.scss'; +import '../../../src/tool-header.scss'; + +export default { + title: 'BTP/Tool Header', + parameters: { + description: `The Tool Header exists on all BTP tools. It is the uppermost section of the tool. It is always visible to give users access to various functions. + +## Structure +- fd-tool-header - (required) Tool Header Container element. Holds all Tool Header UI elements + - fd-tool-header--menu -  if the Tool Header has a Menu Button +- fd-tool-header__group -  groups UI elements. The spacing between the groups is 0.75rem; + - fd-tool-header__group--hidden - modifier class to hide an entire group; + - fd-tool-header__group--menu - modifier class for the group element that contains the Menu Button; + - fd-tool-header__group--center - modifier class for the group element that contains the Search/Context Switch; + - fd-tool-header__group--actions - modifier class for the group element that contains the custom and system actions; + +- fd-tool-header__element - a wrapping HTML element around every UI control. The spacing between individual elements in the group is 0.375rem; + - fd-tool-header__element--hidden - modifier class to hide an element depending on the screen size; + +- fd-tool-header__logo - (required) the logo is the logo of the company using the tool. The SAP logo is used as default. The logo is an interactive element that always navigates to the tool's homepage. + +- fd-tool-header__product-name - (required) the Product Name is the official name of the tool. + +- fd-tool-header__second-title -  the Second Title is an optional second text identifier of the tool. + +- fd-tool-header__separator -  The Separator is an optional element that adds space between the Custom Actions Area (optional), System Actions Area (optional) and User Avatar (required). +`, + tags: ['btp'] + } +}; +export const Desktop = () => desktopExampleHtml; +Desktop.parameters = { + docs: { + description: { + story: `When menu button is present use the fd-tool-header--menu modifier class with the fd-tool-header base class. Additionally, apply the fd-tool-header__group--menu modifier to the fd-tool-header__group wrapping element.` + } + } + }; + + +export const Tablet = () => tabletExampleHtml; +Tablet.parameters = { + docs: { + description: { + story: `The second title is not displayed on tablets. The separator between the actions areas is hidden on tablet portrait orientation. The separator between the actions and the user avatar is present in all views.` + } + } + }; + +export const Mobile = () => mobileExampleHtml; +Mobile.parameters = { + docs: { + description: { + story: `Phone specification depicts only deltas from the tablet specification. It is possible that actions will overflow on phones. In such cases, the overflowing actions are displayed in a dropdown menu. The Product Name, Second Title, and Separator between the actions areas are not displayed on phones.` + } + } + }; \ No newline at end of file diff --git a/packages/styles/stories/Components/tool-header/horizontal-paddings.example.html b/packages/styles/stories/Components/tool-header/horizontal-paddings.example.html deleted file mode 100644 index 51283b0c88..0000000000 --- a/packages/styles/stories/Components/tool-header/horizontal-paddings.example.html +++ /dev/null @@ -1,124 +0,0 @@ -

Size S (1rem)

-
-
-
- - -
-
- -
-
-
-
- -
-
- -
-
-
-
-

Size M (2rem)

-
-
-
- - -
-
-

Product Name

-
-
-
-
- -
-
- -
-
- -
-
-
-
-

Size L (2rem)

-
-
-
- - -
-
- -
-
-
-
- -
-
- -
-
- -
-
-
-
-

Size XL (3rem)

-
-
-
- - -
-
- -
-
-
-
-
- - - - -
-
-
- -
-
- -
-
- -
-
-
diff --git a/packages/styles/stories/Components/tool-header/menu-buttons.example.html b/packages/styles/stories/Components/tool-header/menu-buttons.example.html deleted file mode 100644 index 47de12c104..0000000000 --- a/packages/styles/stories/Components/tool-header/menu-buttons.example.html +++ /dev/null @@ -1,46 +0,0 @@ -
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
-
- - - Status - -
-
- -
-
-
diff --git a/packages/styles/stories/Components/tool-header/menu.example.html b/packages/styles/stories/Components/tool-header/menu.example.html deleted file mode 100644 index b626f98a15..0000000000 --- a/packages/styles/stories/Components/tool-header/menu.example.html +++ /dev/null @@ -1,48 +0,0 @@ -
-
-
- -
-
- -
-
-

Product Name

-
-
- -
-
-
-
-
- - - - -
-
-
- -
-
- -
-
- -
-
- -
-
-
diff --git a/packages/styles/stories/Components/tool-header/primary.example.html b/packages/styles/stories/Components/tool-header/primary.example.html deleted file mode 100644 index ca9e73490e..0000000000 --- a/packages/styles/stories/Components/tool-header/primary.example.html +++ /dev/null @@ -1,54 +0,0 @@ -
-
-
- - -
-
-

Product Name

-
-
- -
-
-
-
- -
-
- - - Negative - -
-
- - - Positive - -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
diff --git a/packages/styles/stories/Components/tool-header/responsive-paddings.example.html b/packages/styles/stories/Components/tool-header/responsive-paddings.example.html deleted file mode 100644 index c48ec1e1cf..0000000000 --- a/packages/styles/stories/Components/tool-header/responsive-paddings.example.html +++ /dev/null @@ -1,39 +0,0 @@ -
-
-
- - -
-
-

Product Name

-
-
- -
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
diff --git a/packages/styles/stories/Components/tool-header/tool-header.stories.js b/packages/styles/stories/Components/tool-header/tool-header.stories.js deleted file mode 100644 index 2e5bd035a6..0000000000 --- a/packages/styles/stories/Components/tool-header/tool-header.stories.js +++ /dev/null @@ -1,118 +0,0 @@ -import horizontalPaddingsExampleHtml from "./horizontal-paddings.example.html?raw"; -import responsivePaddingsExampleHtml from "./responsive-paddings.example.html?raw"; -import menuButtonsExampleHtml from "./menu-buttons.example.html?raw"; -import menuExampleHtml from "./menu.example.html?raw"; -import primaryExampleHtml from "./primary.example.html?raw"; -import '../../../src/avatar.scss'; -import '../../../src/button.scss'; -import '../../../src/form-label.scss'; -import '../../../src/icon.scss'; -import '../../../src/input-group.scss'; -import '../../../src/object-status.scss'; -import '../../../src/text.scss'; -import '../../../src/title.scss'; -import '../../../src/tool-header.scss'; -export default { - title: 'Components/Tool Header', - parameters: { - description: `The tool header is a control that is found in most SAP Cloud Platform products, most commonly as a part of the Tool Page Layout. The tool header inherits its functionality from the overflow toolbar and its visual design from the shell bar. - -##Usage -**Use the tool header if:** - -- The app is launched without the SAP Fiori launchpad. -- The target group of your application is somewhat or purely technical in nature, and the application’s main use cases are in development, administration, or configuration. -- The application uses other tool components, such as side navigation or one of the layouts or floorplans for tools. -- The application makes use of a global application menu. -The application uses a horizontal tab navigation as main navigation. - -**Do not use the tool header if:** - -- Your scenarios are not in the tooling or administration space. -- Your application target group consists of non-technical users. -- You do not have to cater for complex navigation (for example, that requires side navigation) - - -##Horizontal paddings -You can add horizontal paddings by applying a modifier class to the container. For responsive horizontal paddings (based on the screen size) add the \`.fd-tool-header--responsive-paddings\` modifier class. In this case the left and right spacing will change as the screen size changes. - -| **Size** | **Modifier class** | -| :--------- | :---------- | -| sm (1rem)    | \`fd-tool-header--sm\` | -| md (2rem)    | \`fd-tool-header--md\` | -| lg (2rem)    | \`fd-tool-header--lg\` | -| xl (3rem)    | \`fd-tool-header--xl\` | - - -##Responsiveness -The tool header adjusts to different screen sizes. The tool header is a container that can hold further containers with their own overflow mechanisms. - -Cozy and Compact -Like all SAP Fiori controls, the tool header can be shown in compact mode or in cozy mode. The height of the header control itself stays the same, only the controls within it are affected. - -##Layout and Structure -The tool header is a horizontal container at the top of the tool or application. It takes up the full width of the screen, floats above the content, and does not scroll. It acts as a container for global elements, such as a global application menu, horizontal navigation, name and branding of the app, and utility functions. - -- .fd-tool-header: container class
-- .fd-tool-header__group: groups tool header elements. The first group is positioned on the left hand side and the second group is positioned on the right hand side
-- .fd-tool-header__element: a wrapper for each tool header element. Provides spacing between elements
-- .fd-tool-header__logo: class for the tool header logo
- -The tool header supports a larger set of over-styled controls. This is achieved with modifier classes which overwrite some of the rules of the base controls.
- -###Text, Titles and Labels -The tool header supports only single-line text and truncation for Texts, Titles, and Labels. Consider using small and normal size texts or title headings of H4, H5, H6. Avoid using text wrapping.
- -- .fd-tool-header__title: use this modifier class togther with base class \`.fd-title\`
-- .fd-tool-header__text: a modifier class applied together with \`.fd-text\`
-- .fd-tool-header__label: a modifier class applied together with label control
- -###Buttons -- .fd-tool-header__button: this modifier class can be applied together with button and menu button on their transparent type. - -###Icons -The tool header supports only icon color enumeration. The support extends to both icons and backgrounds. Interaction state colors are not supported. - -- .fd-tool-header__icon
- -###Object Status -The tool header supports object status in its semantic form. No industry specific color support. - -- .fd-tool-header__object-status
- -###Input Group -- .fd-tool-header__input-group - -`, - tags: ['btp', 'theme', 'development'] - } -}; -export const Primary = () => primaryExampleHtml; -Primary.storyName = 'Tool Header with Controls'; -export const Menu = () => menuExampleHtml; -Menu.storyName = 'Tool Header with Side Navigation Menu Button'; -Menu.parameters = { - docs: { - description: { - story: 'The side navigation menu button is used to collapse/expand the side navigation. It is not recommended to use horizontal and responsive paddings when this button is present.' - } - } -}; -export const MenuButtons = () => menuButtonsExampleHtml; -MenuButtons.storyName = 'Tool Header with Menu Buttons'; -export const ResponsivePaddings = () => responsivePaddingsExampleHtml; -ResponsivePaddings.parameters = { - docs: { - description: { - story: 'Horizontal responsive paddings (based on the screen size) can be applied to the tool header by adding the `fd-tool-header--responsive-paddings` modifier class to the container class. In this case the left and right spacing will change as the screen size changes.' - } - } -}; -export const HorizontalPaddings = () => horizontalPaddingsExampleHtml; -HorizontalPaddings.parameters = { - docs: { - description: { - story: 'You can add horizontal paddings by applying a modifier class to the container. For example, `.fd-tool-header--sm` modifier class will add 1rem horizontal paddings on the tool bar container.' - } - } -}; \ No newline at end of file