From 12cba2c2f05c73f443caf8df01245534f73d5c6c Mon Sep 17 00:00:00 2001 From: Inna Atanasova <39598672+InnaAtanasova@users.noreply.github.com> Date: Wed, 25 Jan 2023 07:07:53 -0500 Subject: [PATCH] feat(styles): add new examples for ShellBar (#4172) --- .storybook/static/preview-head.js | 9 + packages/styles/src/input-group.scss | 24 +- packages/styles/src/mixins/_forms.scss | 28 +- packages/styles/src/select.scss | 29 +- packages/styles/src/shellbar.scss | 487 +++++++++++++----- .../theming/common/shellbar/_sap_fiori.scss | 40 ++ .../common/shellbar/_sap_fiori_hc.scss | 39 ++ .../theming/common/shellbar/_sap_horizon.scss | 40 ++ .../common/shellbar/_sap_horizon_hc.scss | 40 ++ packages/styles/src/theming/sap_fiori_3.scss | 17 +- .../styles/src/theming/sap_fiori_3_dark.scss | 17 +- .../styles/src/theming/sap_fiori_3_hcb.scss | 17 +- .../styles/src/theming/sap_fiori_3_hcw.scss | 17 +- packages/styles/src/theming/sap_horizon.scss | 17 +- .../styles/src/theming/sap_horizon_dark.scss | 16 +- .../styles/src/theming/sap_horizon_hcb.scss | 17 +- .../styles/src/theming/sap_horizon_hcw.scss | 17 +- .../Components/shellbar/shellbar.stories.js | 342 +++++++++--- .../tests/__snapshots__/styles.test.ts.snap | 196 +++---- .../theming-preview/src/shell-tile-card.html | 26 +- stories/docs/introduction.stories.tsx | 39 -- 21 files changed, 985 insertions(+), 489 deletions(-) create mode 100644 packages/styles/src/theming/common/shellbar/_sap_fiori.scss create mode 100644 packages/styles/src/theming/common/shellbar/_sap_fiori_hc.scss create mode 100644 packages/styles/src/theming/common/shellbar/_sap_horizon.scss create mode 100644 packages/styles/src/theming/common/shellbar/_sap_horizon_hc.scss delete mode 100644 stories/docs/introduction.stories.tsx diff --git a/.storybook/static/preview-head.js b/.storybook/static/preview-head.js index 00b7bf419f..7b3eff0476 100644 --- a/.storybook/static/preview-head.js +++ b/.storybook/static/preview-head.js @@ -335,6 +335,15 @@ function addClass(elementId, className) { } } +function removeClass(elementId, className) { + let elementRef = document.getElementById(elementId); + if (elementRef && className) { + elementRef.classList.remove(className); + } else { + console.warn("No element with id='" + elementId + "' found"); + } +} + function browseFile(inputId) { let inputRef = document.getElementById(inputId); inputRef.click(); diff --git a/packages/styles/src/input-group.scss b/packages/styles/src/input-group.scss index d1e5bff2b1..ac850b75e0 100644 --- a/packages/styles/src/input-group.scss +++ b/packages/styles/src/input-group.scss @@ -12,7 +12,13 @@ $fd-input-padding: 0.625rem; $fd-input-border-radius: var(--sapField_BorderCornerRadius); .#{$block} { - @include fd-input-field-base(false, false); + @include fd-input-field-base( + false, + false, + --fdInputGroup_Background, + --fdInputGroup_Background_Color, + --fdInputGroup_Hover_Background, + --fdInputGroup_Hover_Background_Color); @include fd-input-field-states(); @include fd-input-group-button-overwrite(); @@ -25,22 +31,28 @@ $fd-input-border-radius: var(--sapField_BorderCornerRadius); .#{$block}__input { @include fd-reset-child-spacing(); - border: none; flex: 1 1 10rem; background: none; - background-color: transparent; + background-color: var(--fdInputGroup_Input_Background, transparent); padding-left: 0.25rem; padding-right: 0.25rem; text-shadow: var(--fdInputGroup_Text_Shadow); + border: var(--fdInputGroup_Input_Border, none); + color: var(--fdInputGroup_Input_Color, inherit); + + &::placeholder { + color: var(--fdInputGroup_Input_Placeholder_Color, var(--sapField_PlaceholderTextColor)); + font-style: var(--fdInputGroup_Input_Placeholder_Style, italic); + } @include fd-hover() { - @include fd-input-field-nested-reset(); + @include fd-input-field-nested-reset(--fdInputGroup_Hover_Input_Background); } @include fd-focus() { outline: none; box-shadow: none; - background: none; + background: var(--fdInputGroup_Input_Background, none); border-radius: 0; } @@ -70,7 +82,7 @@ $fd-input-border-radius: var(--sapField_BorderCornerRadius); @include fd-ellipsis(); color: var(--sapContent_NonInteractiveIconColor); - background: none !important; + background: var(--fdInputGroup_Addon_Background, none); font-size: var(--sapFontLargeSize); min-width: 2.25rem; min-height: $fd-form-input-height; diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss index 92e512a892..04c959723c 100644 --- a/packages/styles/src/mixins/_forms.scss +++ b/packages/styles/src/mixins/_forms.scss @@ -5,7 +5,15 @@ $fd-input-field-height: 2.25rem; $fd-input-field-height--compact: 1.625rem; -@mixin fd-input-field-base($hasFocusWithin: false, $withMinHeight: true) { +@mixin fd-input-field-base( + $hasFocusWithin: false, + $withMinHeight: true, + $overrideBackgroundProperty: --sapField_BackgroundStyle, + $overrideBackgroundColorProperty: --sapField_Background, + $overrideHoverBackgroundProperty: --sapField_Hover_BackgroundStyle, + $overrideHoverBackgroundColorProperty: --sapField_Hover_Background, + $overrideFocusBackgroundProperty: --sapField_Focus_Background, + $overrideMinWidth: 2.75rem) { @include fd-reset(); @include fd-ellipsis(); @@ -15,15 +23,15 @@ $fd-input-field-height--compact: 1.625rem; z-index: 1; width: 100%; - min-width: 2.75rem; + min-width: var(#{$overrideMinWidth}, 2.75rem); border-radius: var(--sapField_BorderCornerRadius); padding: 0 0.625rem; margin: 0.25rem 0; box-shadow: none; color: var(--sapField_TextColor); text-shadow: var(--fdInput_Text_Shadow); - background: var(--sapField_BackgroundStyle); - background-color: var(--sapField_Background); + background: var(#{$overrideBackgroundProperty}, var(--sapField_BackgroundStyle)); + background-color: var(#{$overrideBackgroundColorProperty}, var(--sapField_Background)); border: var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor); cursor: text; outline: none; @@ -53,14 +61,14 @@ $fd-input-field-height--compact: 1.625rem; } @include fd-hover() { - background: var(--sapField_Hover_BackgroundStyle); - background-color: var(--sapField_Hover_Background); + background: var(#{$overrideHoverBackgroundProperty}, var(--sapField_Hover_BackgroundStyle)); + background-color: var(#{$overrideHoverBackgroundColorProperty}, var(--sapField_Hover_Background)); border-color: var(--sapField_Hover_BorderColor); box-shadow: var(--fdInput_Box_Shadow_Hover); } @include fd-focus() { - background: var(--sapField_Focus_Background); + background: var(#{$overrideFocusBackgroundProperty}, var(--sapField_Focus_Background)); outline-width: var(--sapContent_FocusWidth); outline-style: var(--sapContent_FocusStyle); outline-color: var(--fdInput_Outline_Color); @@ -70,7 +78,7 @@ $fd-input-field-height--compact: 1.625rem; @if $hasFocusWithin { @include fd-focus-within() { - background: var(--sapField_Focus_Background); + background: var(#{$overrideFocusBackgroundProperty}, var(--sapField_Focus_Background)); outline-width: var(--sapContent_FocusWidth); outline-style: var(--sapContent_FocusStyle); outline-color: var(--fdInput_Outline_Color); @@ -334,10 +342,10 @@ $fd-input-field-height--compact: 1.625rem; } } -@mixin fd-input-field-nested-reset() { +@mixin fd-input-field-nested-reset($background-color: transparent) { box-shadow: none; background: none; - background-color: transparent; + background-color: var($background-color, transparent); } @mixin fd-form-base { diff --git a/packages/styles/src/select.scss b/packages/styles/src/select.scss index 2d91ce648c..c6d4cebfd3 100644 --- a/packages/styles/src/select.scss +++ b/packages/styles/src/select.scss @@ -6,13 +6,14 @@ $fd-select-padding-x: 0.625rem; $fd-select-padding-x-compact: 0.5rem; @mixin fd-select-set-min-width($width) { - min-width: calc(#{$width} - var(--sapField_BorderWidth) * 2); + min-width: calc(var(--fdSelect_Min_Width) - var(--sapField_BorderWidth) * 2); } @mixin fd-select-button-settings($bkgdColor, $borderLeft) { .#{$block}__button { - color: var(--sapButton_Active_TextColor); - background: var(--sapField_BackgroundStyle); + --fdInput_Group_Button_Text_Color: var(--sapButton_Active_TextColor); + --fdInput_Group_Button_Background: var(--sapField_BackgroundStyle); + background-color: $bkgdColor; border-left-color: $borderLeft; box-shadow: var(--fdInput_Group_Button_Box_Shadow); @@ -90,7 +91,16 @@ $fd-select-padding-x-compact: 0.5rem; text-shadow: var(--fdSelect_Text_Shadow); &__control { - @include fd-input-field-base(); + @include fd-input-field-base( + false, + true, + --fdSelect_Background, + --fdSelect_Background_Color, + --fdSelect_Hover_Background, + --fdSelect_Hover_Background_Color, + --fdSelect_Focus_Background, + --fdSelect_Min_Width + ); @include fd-input-field-states(); @include fd-input-group-button-overwrite(); @@ -118,7 +128,8 @@ $fd-select-padding-x-compact: 0.5rem; .#{$block}__text-content { @include fd-set-paddings-x-equal($fd-select-padding-x); - @include fd-select-set-min-width(5rem); + + --fdSelect_Min_Width: 5rem; } } @@ -147,8 +158,11 @@ $fd-select-padding-x-compact: 0.5rem; @include fd-set-padding-left($fd-select-padding-x); @include fd-select-set-min-width(2.5rem); + --fdSelect_Min_Width: 2.5rem; + + color: var(--fdSelect_Text_Content_Color, var(--sapTextColor)); cursor: pointer; - display: inline-block; + display: var(--fdSelect_Text_Content_Display, inline-block); } &--compact { @@ -158,7 +172,8 @@ $fd-select-padding-x-compact: 0.5rem; .#{$block}__text-content { @include fd-set-padding-left($fd-select-padding-x-compact); - @include fd-select-set-min-width(2.75rem); + + --fdSelect_Min_Width: 2.75rem; } @include fd-readonly() { diff --git a/packages/styles/src/shellbar.scss b/packages/styles/src/shellbar.scss index 8edebdc52e..886c5f20ec 100644 --- a/packages/styles/src/shellbar.scss +++ b/packages/styles/src/shellbar.scss @@ -41,14 +41,78 @@ $block: #{$fd-namespace}-shellbar; $fd-shellbar-background: transparent !default; $fd-shellbar-hover-background: var(--sapShell_Hover_Background) !default; + @mixin fd-shellbar-sm-screen() { + --fdSelect_Text_Content_Display: none; + --fdSelect_Min_Width: 1rem; + .#{$block}__subtitle, + .#{$block}__title { + display: none; + } + + .#{$block}__group { + &--mobile-flex { + @include fd-flex-center(); + } + } + + .#{$block}__action { + &--mobile { + display: inline-block; + } + + &--desktop { + display: none; + } + } + + .#{$block}__action-combobox { + &--mobile { + @include fd-flex-center(); + + background-color: var(--sapShellColor); + width: 100%; + height: 100%; + z-index: 7; + position: absolute; + left: 0; + padding: 0 0.3rem; + margin: 0; + } + } + + .#{$block}__button--menu { + .sap-icon--megamenu { + margin: 0 !important; + } + } + } + + @mixin fd-shellbar-md-lg-xl-screens() { + .#{$block}__subtitle, + .#{$block}__title { + display: inline-block; + } + + .#{$block}__action { + &--mobile { + display: none; + } + + &--desktop { + display: inline-block; + } + } + } + @include fd-reset(); + @include fd-flex-vertical-center () { + justify-content: space-between; + } + background-color: var(--sapShellColor); box-shadow: var(--fdShellbar_Shadow); height: var(--fdShellbar_Height); - display: flex; - align-items: center; - justify-content: space-between; color: $fd-shellbar-color; position: relative; padding: 0 1rem; @@ -56,23 +120,29 @@ $block: #{$fd-namespace}-shellbar; &__group { @include fd-reset(); - display: flex; - align-items: center; - flex-grow: 1; - flex-shrink: 1; - flex-basis: 0; + @include fd-flex-vertical-center() { + flex: 1 1 0; + gap: $fd-shellbar-item-spacing; + } &--product { justify-content: flex-start; order: 1; } - &--copilot { - justify-content: center; + &--copilot, + &--center { order: 2; + display: none; + justify-content: center; + margin: 0 $fd-shellbar-item-spacing; - .#{$block}__button { - padding-left: 0; + .#{$block}__action { + width: 100%; + } + + @include fd-media-xl() { + display: inline-block; } } @@ -86,7 +156,6 @@ $block: #{$fd-namespace}-shellbar; &__subtitle { @include fd-reset(); @include fd-ellipsis(); - @include fd-set-margin-left($fd-shellbar-item-spacing); color: var(--sapShell_TextColor); } @@ -135,163 +204,314 @@ $block: #{$fd-namespace}-shellbar; } } - .#{$block}__group .#{$block}__action { - @include fd-reset(); - @include fd-set-margin-left($fd-shellbar-item-spacing); - - > * { - vertical-align: middle; - } - } + // Elements inside shellbar groups + .#{$block}__group { + --fdShellbar_Button_Active_Background: var(--sapShell_Active_Background); + --fdShellbar_Button_Active_Color: var(--sapShell_Active_TextColor); + .#{$block}__action { + @include fd-reset(); - .#{$block}__group .#{$block}__input-group { - background: transparent; - background-color: var(--fdShellbar_Input_Background); - border: var(--fdShellbar_Input_Border); - border-radius: var(--fdShellbar_Input_Border_Radius); - cursor: text; + > * { + vertical-align: middle; + } - @include fd-hover() { - border-color: var(--fdShellbar_Input_Hover_Border_Color); - box-shadow: var(--sapContent_Interaction_Shadow); - } + &--grow { + flex: 1; + } - @include fd-focus() { - outline: none; + &--shrink { + flex: 0; + } } - &-input { - border: none; - color: var(--fdShellbar_Input_Color); + .#{$block}__search-field { + --fdSelect_Text_Content_Color: var(--fdShellbar_Select_Content_Color); + --fdInputGroup_Input_Border: var(--fdShellbar_Input_Border); + --fdInputGroup_Input_Color: var(--fdShellbar_Input_Color); + --fdInputGroup_Input_Placeholder_Color: var(--fdShellbar_Input_Placeholder_Color); + --fdInputGroup_Input_Placeholder_Style: var(--fdShellbar_Input_Placeholder_Style); + --fdInputGroup_Background: transparent; + --fdInputGroup_Background_Color: var(--fdShellbar_Input_Background); + --fdInputGroup_Hover_Background: transparent; + --fdInput_Group_Button_Box_Shadow: none; + --fdInput_Box_Shadow_Hover: none; + + border: var(--fdShellbar_Search_Border); + border-radius: var(--fdShellbar_Input_Border_Radius); position: relative; + cursor: text; - @include fd-hover() { - &, - & + .#{$block}__input-group-addon { - background: transparent; - background-color: var(--fdShellbar_Input_Hover_Background) !important; + &-input { + position: relative; + + @include fd-hover() { + --fdInputGroup_Hover_Input_Background: var(--fdShellbar_Input_Hover_Background); + --fdInputGroup_Addon_Background: var(--fdShellbar_Search_Container_Hover_Background); + & ~ .#{$block}__search-field-addon { + --fdInputGroup_Addon_Background: var(--fdShellbar_Search_Container_Hover_Background); + } } - } - &::placeholder { - color: var(--fdShellbar_Input_Placeholder_Color); - font-style: italic; + @include fd-focus() { + --fdInputGroup_Input_Color: var(--fdShellbar_Input_Focus_Color); + --fdInputGroup_Input_Background: var(--fdShellbar_Input_Focus_Background); + } + + &:placeholder-shown { + & ~ .#{$block}__search-cancel { + display: none; + } + } + + &:not(:placeholder-shown) { + & ~ .#{$block}__search-submit { + > * { + --fdButtonBackgroundColor: var(--fdShellbar_Search_Active_Button_Background); + --fdButtonColor: var(--fdShellbar_Search_Active_Button_Color); + --fdShellbar_Button_Active_Background: var(--fdButtonBackgroundColor); + --fdShellbar_Button_Active_Color: var(--fdShellbar_Search_Active_Button_Color); + + @include fd-set-border-left(var(--fdShellbar_Button_Left_Border)); + + &:hover { + --fdButtonBackgroundColor: var(--fdShellbar_Search_Active_Button_Hover_Background); + } + } + } + } + + &--select { + @include fd-flex-vertical-center(); + + font-style: normal; + height: 100%; + flex: 0 1; + } } - &--select { - @include fd-flex-vertical-center(); + &-addon { + @include fd-flex-vertical-center() { + height: 100%; + flex: 0 1; + } - font-style: normal; - height: 100%; + .#{$block}__button { + height: var(--fdShellbar_Input_Addon_Dimension); + min-width: var(--fdShellbar_Input_Addon_Dimension); + border-radius: var(--fdShellbar_Input_Border_Radius); + border-width: var(--fdShellbar_Input_Addon_Border_Width); + + @include fd-hover () { + @include fd-set-border-left(var(--fdShellbar_Button_Left_Border)); + + --fdButtonBackgroundColor: var(--fdShellbar_Search_Button_Hover_Background); + } + + @include fd-active() { + border-color: var(--fdShellbar_Button_Active_Border_Color); + } + } } - } - &-addon { - @include fd-flex-vertical-center() { - height: 100%; + .#{$block}__search-field-category { + flex-shrink: 0; + + @include fd-hover() { + --fdInputGroup_Addon_Background: var(--fdShellbar_Input_Background); + & ~ .#{$block}__search-field-input, + & ~ .#{$block}__search-field-addon { + --fdInputGroup_Addon_Background: var(--fdShellbar_Input_Background); + --fdInputGroup_Input_Background: var(--fdShellbar_Input_Background); + } + + .#{$block}__search-category { + box-shadow: var(--sapContent_Interaction_Shadow); + } + + .#{$block}__search-dropdown { + background-color: var(--fdShellbar_Search_Category_Button_Hover_Background); + } + } + + > * { + @include fd-set-margin-right(var(--fdShellbar_Search_Category_Offset_Right)); + } + .#{$block}__search-dropdown { + background-color: var(--fdShellbar_Input_Background); + outline: none; + + --fdInput_Group_Button_Background: transparent; + --fdInput_Group_Button_Text_Color: var(--sapShell_InteractiveTextColor); + } + .#{$block}__search-category { + --fdSelect_Background: transparent; + --fdSelect_Hover_Background: transparent; + --fdSelect_Focus_Background: transparent; + --fdSelect_Background_Color: var(--fdShellbar_Input_Background); + --fdSelect_Hover_Background_Color: var(--fdShellbar_Input_Background); + + border: var(--fdShellbar_Search_Category_Border); + border-width: var(--fdShellbar_Search_Category_Border_width); + border-radius: 0; + min-height: var(--fdShellbar_Input_Addon_Dimension); + height: var(--fdShellbar_Input_Addon_Dimension); + margin: 0; + position: relative; + + @include fd-set-margin-left(var(--fdShellbar_Search_Category_Offset_Left)); + + &::before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + background: var(--sapShell_InteractiveBorderColor); + width: 0.0625rem; + display: var(--fdShellbar_Search_Separator_Display); + } + + @include fd-rtl() { + &::before { + left: 0; + right: auto; + } + } + + @include fd-focus() { + --fdSelect_Text_Content_Color: var(--sapButton_Active_TextColor); + --fdShellbar_Input_Background: var(--fdShellbar_Search_Category_Button_Hover_Background); + --fdSelect_Focus_Background: var(--fdShellbar_Search_Container_Hover_Background); + + border-radius: var(--fdShellbar_Input_Border_Radius); + outline-color: var(--sapButton_Lite_Active_BorderColor); + outline-width: 0.0625rem; + outline-offset: -0.0625rem; + + .#{$block}__search-dropdown { + --fdInput_Group_Button_Text_Color: var(--sapButton_Active_TextColor); + } + + &::before { + display: none; + } + } + } } - .#{$block}__button { - height: var(--fdShellbar_Input_Addon_Dimension); - min-width: var(--fdShellbar_Input_Addon_Dimension); - border-radius: var(--fdShellbar_Input_Border_Radius); - border-width: var(--fdShellbar_Input_Addon_Border_Width); + @include fd-hover() { + --sapField_Hover_BorderColor: var(--fdShellbar_Input_Hover_Border_Color); + --fdInput_Box_Shadow_Hover: var(--sapContent_Interaction_Shadow); + --fdInputGroup_Hover_Background_Color: var(--fdShellbar_Search_Container_Hover_Background); + + .#{$block}__search-field { + &-category .#{$block}__search-category { + --fdSelect_Background_Color: var(--fdShellbar_Search_Container_Hover_Background); + --fdSelect_Hover_Background_Color: var(--fdShellbar_Search_Container_Hover_Background); + + border-radius: var(--fdShellbar_Input_Border_Radius); + + &::before { + display: none; + } + } + } + + .#{$block}__search-field-category:not(:hover) { + .#{$block}__search-dropdown { + background-color: var(--fdShellbar_Search_Container_Hover_Background); + } + } } - } - } - .#{$block}__group .#{$block}__button { - outline-color: var(--fdShellbar_Button_Outline_Color); - color: var(--sapShell_InteractiveTextColor) !important; + @include fd-focus() { + outline: none; + box-shadow: var(--fdShellbar_Active_Shadow); + background-color: var(--fdShellbar_Active_Background); - &:not(&--menu) { - padding: 0; - } + &::before { + position: absolute; + content: ""; + outline: var(--fdShellbar_Search_Active_Outline); + outline-offset: -0.125rem; + z-index: 20; + pointer-events: none; + + @include fd-set-equal-positions(0); + } + + .#{$block}__search-field-addon { + --fdInputGroup_Addon_Background: var(--fdShellbar_Search_Hover_Background); + } - @include fd-hover() { - border-color: var(--fdShellbar_Button_Hover_Border_Color); - background-color: $fd-shellbar-hover-background; + .#{$block}__search-category { + background-color: var(--fdShellbar_Search_Hover_Background); - @include fd-disabled() { - background: $fd-shellbar-background; + &::before { + display: none; + } + } + + .#{$block}__search-field-category { + .#{$block}__search-dropdown { + background-color: var(--fdShellbar_Search_Hover_Category_Button_Background); + } + } } } - @include fd-active() { - border-color: var(--fdShellbar_Button_Active_Border_Color); - background: var(--sapShell_Active_Background); - color: var(--sapShell_Active_TextColor) !important; - } + .#{$block}__button { + outline-color: var(--fdShellbar_Button_Outline_Color); - &--menu { - @include fd-set-margin-left($fd-shellbar-item-spacing); + --fdButtonColor: var(--sapShell_InteractiveTextColor); - .#{$block}__title { - margin: 0; + &:not(&--menu) { + padding: 0; } - } - } - &--s { - .#{$block}__subtitle, - .#{$block}__title { - display: none; - } + @include fd-hover() { + border-color: var(--fdShellbar_Button_Hover_Border_Color); - .#{$block}__action { - &--mobile { - display: inline-block; + --fdButtonBackgroundColor: var(--fdShellbar_Input_Hover_Background); + + @include fd-disabled() { + background: $fd-shellbar-background; + } } - &--desktop { - display: none; + @include fd-active() { + border-color: var(--fdShellbar_Button_Active_Border_Color); + background: var(--fdShellbar_Button_Active_Background); + color: var(--fdShellbar_Button_Active_Color); } - } - .#{$block}__action-combobox { - &--mobile { - @include fd-flex-center(); + &--menu { - background-color: var(--sapShellColor); - width: 100%; - height: 100%; - z-index: 7; - position: absolute; - left: 0; - padding: 0 0.3rem; - margin: 0; + .#{$block}__title { + margin: 0; + } } } + } - .#{$block}__button--menu { - .sap-icon--megamenu { - margin: 0 !important; - } - } + &--s, + &--sm { + @include fd-shellbar-sm-screen(); } &--m, - &--l { + &--l, + &--md, + &--lg { padding: 0 2rem; } &--m, &--l, + &--md, + &--lg, &--xl { - .#{$block}__subtitle, - .#{$block}__title { - display: inline-block; - } - - .#{$block}__action { - &--mobile { - display: none; - } - - &--desktop { - display: inline-block; - } - } + @include fd-shellbar-md-lg-xl-screens(); } &--xl { @@ -302,6 +522,9 @@ $block: #{$fd-namespace}-shellbar; &.#{$block}--s, &.#{$block}--m, &.#{$block}--l, + &.#{$block}--sm, + &.#{$block}--md, + &.#{$block}--lg, &.#{$block}--xl { @include fd-set-padding-right(0.5rem); @@ -311,5 +534,21 @@ $block: #{$fd-namespace}-shellbar; &--responsive-paddings { @include fd-apply-responsive-paddings(); + + @include fd-media-sm() { + @include fd-shellbar-sm-screen(); + } + + @include fd-media-md() { + @include fd-shellbar-md-lg-xl-screens(); + } + + @include fd-media-lg() { + @include fd-shellbar-md-lg-xl-screens(); + } + + @include fd-media-xl() { + @include fd-shellbar-md-lg-xl-screens(); + } } } diff --git a/packages/styles/src/theming/common/shellbar/_sap_fiori.scss b/packages/styles/src/theming/common/shellbar/_sap_fiori.scss new file mode 100644 index 0000000000..0a92b48710 --- /dev/null +++ b/packages/styles/src/theming/common/shellbar/_sap_fiori.scss @@ -0,0 +1,40 @@ +:root { + --fdShellbar_Height: 2.75rem; + --fdShellbar_Shadow: inset 0 -0.0625rem 0 0 var(--sapShell_BorderColor); + --fdShellbar_Button_Hover_Border_Color: transparent; + --fdShellbar_Button_Active_Border_Color: transparent; + --fdShellbar_Button_Outline_Color: var(--sapContent_ContrastFocusColor); + --fdShellbar_Search_Border: none; + --fdShellbar_Search_Category_Border: var(--fdShellbar_Input_Border); + --fdShellbar_Search_Category_Border_width: 0.0625rem; + --fdShellbar_Search_Category_Offset: 0.25rem; + --fdShellbar_Search_Category_Offset_Left: 0; + --fdShellbar_Search_Category_Offset_Right: 0.25rem; + --fdShellbar_Search_Category_Button_Hover_Background: var(--sapShell_Hover_Background); + --fdShellbar_Search_Input_Border: solid 0.0625rem var(--sapShell_InteractiveBorderColor); + --fdShellbar_Search_Container_Background: transparent; + --fdShellbar_Search_Container_Hover_Background: transparent; + --fdShellbar_Input_Background: var(--sapShellColor); + --fdShellbar_Input_Hover_Background: var(--sapShell_Hover_Background); + --fdShellbar_Input_Color: var(--sapShell_TextColor); + --fdShellbar_Input_Placeholder_Color: var(--sapShell_InteractiveTextColor); + --fdShellbar_Input_Border_Radius: var(--sapField_BorderCornerRadius); + --fdShellbar_Input_Hover_Border_Color: var(--sapShell_InteractiveBorderColor); + --fdShellbar_Input_Addon_Dimension: 2.25rem; + --fdShellbar_Input_Addon_Border_Width: 0; + --fdShellbar_Search_Hover_Background: transparent; + --fdShellbar_Search_Active_Button_Background: inherit; + --fdShellbar_Search_Button_Hover_Background: var(--sapShell_Hover_Background); + --fdShellbar_Search_Active_Button_Hover_Background: var(--sapShell_Hover_Background); + --fdShellbar_Search_Active_Button_Color: var(--sapShell_InteractiveTextColor); + --fdShellbar_Active_Background: transparent; + --fdShellbar_Active_Shadow: none; + --fdShellbar_Search_Active_Outline: none; + --fdShellbar_Input_Border: 0.0625rem solid var(--sapShell_InteractiveBorderColor); + --fdShellbar_Search_Separator_Display: none; + --fdShellbar_Select_Content_Color: var(--sapShell_TextColor); + --fdShellbar_Input_Focus_Color: var(--sapShell_TextColor); + --fdShellbar_Input_Focus_Background: var(--sapShell_Active_Background); + --fdShellbar_Input_Placeholder_Style: italic; + --fdShellbar_Button_Left_Border: none; +} diff --git a/packages/styles/src/theming/common/shellbar/_sap_fiori_hc.scss b/packages/styles/src/theming/common/shellbar/_sap_fiori_hc.scss new file mode 100644 index 0000000000..a5a724da42 --- /dev/null +++ b/packages/styles/src/theming/common/shellbar/_sap_fiori_hc.scss @@ -0,0 +1,39 @@ +:root { + --fdShellbar_Height: 2.75rem; + --fdShellbar_Shadow: inset 0 -0.0625rem 0 0 var(--sapShell_BorderColor); + --fdShellbar_Button_Hover_Border_Color: var(--sapButton_Lite_BorderColor); + --fdShellbar_Button_Active_Border_Color: var(--sapButton_Lite_Active_BorderColor); + --fdShellbar_Button_Outline_Color: var(--sapContent_FocusColor); + --fdShellbar_Search_Border: none; + --fdShellbar_Search_Category_Border: var(--fdShellbar_Input_Border); + --fdShellbar_Search_Category_Border_width: 0.0625rem; + --fdShellbar_Search_Category_Offset: 0; + --fdShellbar_Search_Category_Offset_Left: 0; + --fdShellbar_Search_Category_Offset_Right: 0.25rem; + --fdShellbar_Search_Category_Button_Hover_Background: var(--sapShell_Hover_Background); + --fdShellbar_Search_Input_Border: solid 0.0625rem var(--sapShell_InteractiveBorderColor); + --fdShellbar_Search_Container_Background: transparent; + --fdShellbar_Search_Container_Hover_Background: transparent; + --fdShellbar_Input_Background: var(--sapShellColor); + --fdShellbar_Input_Hover_Background: var(--sapShell_Hover_Background); + --fdShellbar_Input_Color: var(--sapShell_TextColor); + --fdShellbar_Input_Placeholder_Color: var(--sapShell_InteractiveTextColor); + --fdShellbar_Input_Border_Radius: var(--sapField_BorderCornerRadius); + --fdShellbar_Input_Hover_Border_Color: var(--sapShell_InteractiveBorderColor); + --fdShellbar_Input_Addon_Dimension: 2.25rem; + --fdShellbar_Input_Addon_Border_Width: 0.0625rem; + --fdShellbar_Search_Hover_Background: transparent; + --fdShellbar_Search_Button_Hover_Background: var(--sapShell_Hover_Background); + --fdShellbar_Search_Active_Button_Background: transparent; + --fdShellbar_Search_Active_Button_Hover_Background: var(--sapShell_Hover_Background); + --fdShellbar_Search_Active_Button_Color: var(--sapShell_InteractiveTextColor); + --fdShellbar_Active_Background: transparent; + --fdShellbar_Active_Shadow: none; + --fdShellbar_Search_Active_Outline: none; + --fdShellbar_Search_Separator_Display: none; + --fdShellbar_Input_Border: 0.0625rem solid var(--sapShell_InteractiveBorderColor); + --fdShellbar_Input_Focus_Color: var(--sapShell_TextColor); + --fdShellbar_Input_Focus_Background: var(--sapShell_Active_Background); + --fdShellbar_Input_Placeholder_Style: normal; + --fdShellbar_Button_Left_Border: none; +} diff --git a/packages/styles/src/theming/common/shellbar/_sap_horizon.scss b/packages/styles/src/theming/common/shellbar/_sap_horizon.scss new file mode 100644 index 0000000000..36d4129d09 --- /dev/null +++ b/packages/styles/src/theming/common/shellbar/_sap_horizon.scss @@ -0,0 +1,40 @@ +:root { + --fdShellbar_Height: 3.25rem; + --fdShellbar_Shadow: none; + --fdShellbar_Button_Hover_Border_Color: var(--sapButton_Lite_BorderColor); + --fdShellbar_Button_Active_Border_Color: var(--sapButton_Lite_Active_BorderColor); + --fdShellbar_Button_Outline_Color: var(--sapContent_FocusColor); + --fdShellbar_Search_Border: none; + --fdShellbar_Search_Category_Border: none; + --fdShellbar_Search_Category_Border_width: 0; + --fdShellbar_Search_Category_Offset_Left: 0.25rem; + --fdShellbar_Search_Category_Offset_Right: var(--fdShellbar_Search_Category_Offset_Left); + --fdShellbar_Search_Category_Button_Hover_Background: var(--sapShell_Hover_Background); + --fdShellbar_Search_Hover_Category_Button_Background: var(--fdShellbar_Search_Category_Button_Hover_Background); + --fdShellbar_Search_Input_Border: none; + --fdShellbar_Search_Container_Background: var(--sapShell_InteractiveBackground); + --fdShellbar_Search_Container_Hover_Background: var(--sapShell_Hover_Background); + --fdShellbar_Input_Background: var(--sapShell_InteractiveBackground); + --fdShellbar_Input_Hover_Background: var(--sapShell_Hover_Background); + --fdShellbar_Input_Color: var(--sapShell_InteractiveTextColor); + --fdShellbar_Input_Placeholder_Color: var(--sapField_PlaceholderTextColor); + --fdShellbar_Input_Border_Radius: 1.125rem; + --fdShellbar_Input_Hover_Border_Color: var(--sapField_BorderColor); + --fdShellbar_Input_Addon_Dimension: 1.75rem; + --fdShellbar_Input_Addon_Border_Width: var(--sapButton_BorderWidth); + --fdShellbar_Search_Hover_Background: var(--sapShell_Hover_Background); + --fdShellbar_Search_Height: 1.75rem; + --fdShellbar_Search_Separator_Display: block; + --fdShellbar_Search_Button_Hover_Background: var(--fdShellbar_Input_Hover_Background); + --fdShellbar_Search_Active_Button_Background: var(--sapButton_Lite_Active_BorderColor); + --fdShellbar_Search_Active_Button_Hover_Background: var(--fdShellbar_Search_Active_Button_Background); + --fdShellbar_Search_Active_Button_Color: var(--sapButton_Emphasized_TextColor); + --fdShellbar_Active_Background: var(--sapShell_Active_Background); + --fdShellbar_Active_Shadow: 0 0 0 0.125rem var(--sapButton_Lite_Active_BorderColor); + --fdShellbar_Search_Active_Outline: none; + --fdShellbar_Input_Border: none; + --fdShellbar_Input_Focus_Color: var(--sapShell_InteractiveTextColor); + --fdShellbar_Input_Focus_Background: transparent; + --fdShellbar_Input_Placeholder_Style: italic; + --fdShellbar_Button_Left_Border: 0.0625rem solid transparent; +} diff --git a/packages/styles/src/theming/common/shellbar/_sap_horizon_hc.scss b/packages/styles/src/theming/common/shellbar/_sap_horizon_hc.scss new file mode 100644 index 0000000000..d9b7481289 --- /dev/null +++ b/packages/styles/src/theming/common/shellbar/_sap_horizon_hc.scss @@ -0,0 +1,40 @@ +:root { + --fdShellbar_Height: 3.25rem; + --fdShellbar_Shadow: none; + --fdShellbar_Button_Hover_Border_Color: var(--sapButton_Lite_BorderColor); + --fdShellbar_Button_Active_Border_Color: var(--sapButton_Lite_Active_BorderColor); + --fdShellbar_Button_Outline_Color: var(--sapContent_FocusColor); + --fdShellbar_Search_Border: solid 0.0625rem var(--sapShell_InteractiveBorderColor); + --fdShellbar_Search_Category_Offset: -0.0625rem; + --fdShellbar_Search_Category_Offset_Left: -0.0625rem; + --fdShellbar_Search_Category_Offset_Right: var(--fdShellbar_Search_Category_Offset_Left); + --fdShellbar_Search_Category_Border: solid var(--sapShell_InteractiveBorderColor); + --fdShellbar_Search_Category_Border_width: 0 0.0625rem; + --fdShellbar_Search_Category_Button_Hover_Background: var(--sapButton_Selected_Hover_Background); + --fdShellbar_Search_Hover_Category_Button_Background: var(--fdShellbar_Input_Hover_Background); + --fdShellbar_Search_Input_Border: none; + --fdShellbar_Search_Container_Background: var(--sapShell_InteractiveBackground); + --fdShellbar_Search_Container_Hover_Background: var(--sapShellColor); + --fdShellbar_Input_Background: var(--sapShell_InteractiveBackground); + --fdShellbar_Input_Hover_Background: var(--sapShellColor); + --fdShellbar_Input_Color: var(--sapShell_InteractiveTextColor); + --fdShellbar_Input_Placeholder_Color: var(--sapField_PlaceholderTextColor); + --fdShellbar_Input_Border_Radius: 0; + --fdShellbar_Input_Hover_Border_Color: var(--sapField_BorderColor); + --fdShellbar_Input_Addon_Dimension: 2.25rem; + --fdShellbar_Input_Addon_Border_Width: 0; + --fdShellbar_Search_Separator_Display: none; + --fdShellbar_Search_Hover_Background: var(--sapShellColor); + --fdShellbar_Search_Button_Hover_Background: var(--fdShellbar_Search_Active_Button_Background); + --fdShellbar_Search_Active_Button_Background: var(--sapShell_Active_Background); + --fdShellbar_Search_Active_Button_Hover_Background: var(--fdShellbar_Search_Active_Button_Background); + --fdShellbar_Search_Active_Button_Color: var(--sapButton_Emphasized_TextColor); + --fdShellbar_Active_Background: var(--sapShellColor); + --fdShellbar_Active_Shadow: none; + --fdShellbar_Search_Active_Outline: var(--sapButton_Lite_BorderColor) dotted 0.125rem; + --fdShellbar_Input_Border: none; + --fdShellbar_Input_Focus_Color: var(--sapShell_InteractiveTextColor); + --fdShellbar_Input_Focus_Background: transparent; + --fdShellbar_Input_Placeholder_Style: normal; + --fdShellbar_Button_Left_Border: solid 0.0625rem var(--fdShellbar_Search_Active_Button_Color); +} diff --git a/packages/styles/src/theming/sap_fiori_3.scss b/packages/styles/src/theming/sap_fiori_3.scss index de635a6698..14eb113afa 100644 --- a/packages/styles/src/theming/sap_fiori_3.scss +++ b/packages/styles/src/theming/sap_fiori_3.scss @@ -29,6 +29,7 @@ @import "./common/info-label/sap_fiori"; @import "./common/file-uploader/sap_fiori"; @import "./common/variant-management/sap_fiori"; +@import "./common/shellbar/sap_fiori"; :root { --fdInverted_Object_Border_Width: 0; @@ -297,22 +298,6 @@ /** Text */ --fdText_Selected_Background_Color: var(--sapSelectedColor); - /** Shellbar */ - --fdShellbar_Height: 2.75rem; - --fdShellbar_Shadow: inset 0 -0.0625rem 0 0 var(--sapShell_BorderColor); - --fdShellbar_Button_Hover_Border_Color: transparent; - --fdShellbar_Button_Active_Border_Color: transparent; - --fdShellbar_Button_Outline_Color: var(--sapContent_ContrastFocusColor); - --fdShellbar_Input_Border: solid 0.0625rem var(--sapShell_InteractiveBorderColor); - --fdShellbar_Input_Background: var(--sapShellColor); - --fdShellbar_Input_Hover_Background: var(--sapShell_Hover_Background); - --fdShellbar_Input_Color: var(--sapShell_TextColor); - --fdShellbar_Input_Placeholder_Color: var(--sapShell_InteractiveTextColor); - --fdShellbar_Input_Border_Radius: var(--sapField_BorderCornerRadius); - --fdShellbar_Input_Hover_Border_Color: var(--sapShell_InteractiveBorderColor); - --fdShellbar_Input_Addon_Dimension: 2.25rem; - --fdShellbar_Input_Addon_Border_Width: 0; - /** Message Page */ --fdMessage_Page_Container_Background: transparent; --fdMessage_Page_Container_Corner_Radius: 0; diff --git a/packages/styles/src/theming/sap_fiori_3_dark.scss b/packages/styles/src/theming/sap_fiori_3_dark.scss index 7bf6d8119a..05dbfa9c35 100644 --- a/packages/styles/src/theming/sap_fiori_3_dark.scss +++ b/packages/styles/src/theming/sap_fiori_3_dark.scss @@ -29,6 +29,7 @@ @import "./common/info-label/sap_fiori"; @import "./common/file-uploader/sap_fiori"; @import "./common/variant-management/sap_fiori"; +@import "./common/shellbar/sap_fiori"; :root { --fdInverted_Object_Border_Width: 0; @@ -306,22 +307,6 @@ /** Text */ --fdText_Selected_Background_Color: var(--sapSelectedColor); - /** Shellbar */ - --fdShellbar_Height: 2.75rem; - --fdShellbar_Shadow: inset 0 -0.0625rem 0 0 var(--sapShell_BorderColor); - --fdShellbar_Button_Hover_Border_Color: transparent; - --fdShellbar_Button_Active_Border_Color: transparent; - --fdShellbar_Button_Outline_Color: var(--sapContent_ContrastFocusColor); - --fdShellbar_Input_Border: solid 0.0625rem var(--sapShell_InteractiveBorderColor); - --fdShellbar_Input_Background: var(--sapShellColor); - --fdShellbar_Input_Hover_Background: var(--sapShell_Hover_Background); - --fdShellbar_Input_Color: var(--sapShell_TextColor); - --fdShellbar_Input_Placeholder_Color: var(--sapShell_InteractiveTextColor); - --fdShellbar_Input_Border_Radius: var(--sapField_BorderCornerRadius); - --fdShellbar_Input_Hover_Border_Color: var(--sapShell_InteractiveBorderColor); - --fdShellbar_Input_Addon_Dimension: 2.25rem; - --fdShellbar_Input_Addon_Border_Width: 0; - /** Message Page */ --fdMessage_Page_Container_Background: transparent; --fdMessage_Page_Container_Corner_Radius: 0; diff --git a/packages/styles/src/theming/sap_fiori_3_hcb.scss b/packages/styles/src/theming/sap_fiori_3_hcb.scss index 3caaf00bb4..7c116324a1 100644 --- a/packages/styles/src/theming/sap_fiori_3_hcb.scss +++ b/packages/styles/src/theming/sap_fiori_3_hcb.scss @@ -36,6 +36,7 @@ @import "./common/info-label/sap_fiori_hc"; @import "./common/file-uploader/sap_fiori_hc"; @import "./common/variant-management/sap_fiori"; +@import "./common/shellbar/sap_fiori_hc"; :root { --fdInverted_Object_Border_Width: 0.0625rem; @@ -310,22 +311,6 @@ /** Text */ --fdText_Selected_Background_Color: var(--sapSelectedColor); - /** Shellbar */ - --fdShellbar_Height: 2.75rem; - --fdShellbar_Shadow: inset 0 -0.0625rem 0 0 var(--sapShell_BorderColor); - --fdShellbar_Button_Hover_Border_Color: var(--sapButton_Lite_BorderColor); - --fdShellbar_Button_Active_Border_Color: var(--sapButton_Lite_Active_BorderColor); - --fdShellbar_Button_Outline_Color: var(--sapContent_FocusColor); - --fdShellbar_Input_Border: solid 0.0625rem var(--sapShell_InteractiveBorderColor); - --fdShellbar_Input_Background: var(--sapShellColor); - --fdShellbar_Input_Hover_Background: var(--sapShell_Hover_Background); - --fdShellbar_Input_Color: var(--sapShell_TextColor); - --fdShellbar_Input_Placeholder_Color: var(--sapShell_InteractiveTextColor); - --fdShellbar_Input_Border_Radius: var(--sapField_BorderCornerRadius); - --fdShellbar_Input_Hover_Border_Color: var(--sapShell_InteractiveBorderColor); - --fdShellbar_Input_Addon_Dimension: 2.25rem; - --fdShellbar_Input_Addon_Border_Width: 0; - /** Message Page */ --fdMessage_Page_Container_Background: transparent; --fdMessage_Page_Container_Corner_Radius: 0; diff --git a/packages/styles/src/theming/sap_fiori_3_hcw.scss b/packages/styles/src/theming/sap_fiori_3_hcw.scss index 7988775f01..0b13aeeebd 100644 --- a/packages/styles/src/theming/sap_fiori_3_hcw.scss +++ b/packages/styles/src/theming/sap_fiori_3_hcw.scss @@ -30,6 +30,7 @@ @import "./common/info-label/sap_fiori_hc"; @import "./common/file-uploader/sap_fiori_hc"; @import "./common/variant-management/sap_fiori"; +@import "./common/shellbar/sap_fiori_hc"; :root { --fdInverted_Object_Border_Width: 0.0625rem; @@ -306,22 +307,6 @@ /** Text */ --fdText_Selected_Background_Color: var(--sapSelectedColor); - /** Shellbar */ - --fdShellbar_Height: 2.75rem; - --fdShellbar_Shadow: inset 0 -0.0625rem 0 0 var(--sapShell_BorderColor); - --fdShellbar_Button_Hover_Border_Color: var(--sapButton_Lite_BorderColor); - --fdShellbar_Button_Active_Border_Color: var(--sapButton_Lite_Active_BorderColor); - --fdShellbar_Button_Outline_Color: var(--sapContent_FocusColor); - --fdShellbar_Input_Border: solid 0.0625rem var(--sapShell_InteractiveBorderColor); - --fdShellbar_Input_Background: var(--sapShellColor); - --fdShellbar_Input_Hover_Background: var(--sapShell_Hover_Background); - --fdShellbar_Input_Color: var(--sapShell_TextColor); - --fdShellbar_Input_Placeholder_Color: var(--sapShell_InteractiveTextColor); - --fdShellbar_Input_Border_Radius: var(--sapField_BorderCornerRadius); - --fdShellbar_Input_Hover_Border_Color: var(--sapShell_InteractiveBorderColor); - --fdShellbar_Input_Addon_Dimension: 2.25rem; - --fdShellbar_Input_Addon_Border_Width: 0; - /** Message Page */ --fdMessage_Page_Container_Background: transparent; --fdMessage_Page_Container_Corner_Radius: 0; diff --git a/packages/styles/src/theming/sap_horizon.scss b/packages/styles/src/theming/sap_horizon.scss index 65e516b6f2..3f76cdaac0 100644 --- a/packages/styles/src/theming/sap_horizon.scss +++ b/packages/styles/src/theming/sap_horizon.scss @@ -30,6 +30,7 @@ @import "./common/info-label/sap_horizon"; @import "./common/file-uploader/sap_horizon"; @import "./common/variant-management/sap_horizon"; +@import "./common/shellbar/sap_horizon"; :root { /* Switch */ @@ -306,22 +307,6 @@ /** Text */ --fdText_Selected_Background_Color: var(--sapSelectedColor); - /** Shellbar */ - --fdShellbar_Height: 3.25rem; - --fdShellbar_Shadow: none; - --fdShellbar_Button_Hover_Border_Color: var(--sapButton_Lite_BorderColor); - --fdShellbar_Button_Active_Border_Color: var(--sapButton_Lite_Active_BorderColor); - --fdShellbar_Button_Outline_Color: var(--sapContent_FocusColor); - --fdShellbar_Input_Border: none; - --fdShellbar_Input_Background: var(--sapShell_InteractiveBackground); - --fdShellbar_Input_Hover_Background: var(--sapShell_Hover_Background); - --fdShellbar_Input_Color: var(--sapShell_InteractiveTextColor); - --fdShellbar_Input_Placeholder_Color: var(--sapField_PlaceholderTextColor); - --fdShellbar_Input_Border_Radius: 1.125rem; - --fdShellbar_Input_Hover_Border_Color: var(--sapField_BorderColor); - --fdShellbar_Input_Addon_Dimension: 1.75rem; - --fdShellbar_Input_Addon_Border_Width: var(--sapButton_BorderWidth); - /** Message Page */ --fdMessage_Page_Container_Background: var(--sapGroup_ContentBackground); --fdMessage_Page_Container_Corner_Radius: var(--sapElement_BorderCornerRadius); diff --git a/packages/styles/src/theming/sap_horizon_dark.scss b/packages/styles/src/theming/sap_horizon_dark.scss index 2747f992b0..94429eb2c9 100644 --- a/packages/styles/src/theming/sap_horizon_dark.scss +++ b/packages/styles/src/theming/sap_horizon_dark.scss @@ -30,6 +30,7 @@ @import "./common/info-label/sap_horizon"; @import "./common/file-uploader/sap_horizon"; @import "./common/variant-management/sap_horizon"; +@import "./common/shellbar/sap_horizon"; :root { /* Busy indicator */ @@ -315,21 +316,6 @@ /** Text */ --fdText_Selected_Background_Color: var(--sapSelectedColor); - /** Shellbar */ - --fdShellbar_Height: 3.25rem; - --fdShellbar_Shadow: none; - --fdShellbar_Button_Hover_Border_Color: var(--sapButton_Lite_BorderColor); - --fdShellbar_Button_Active_Border_Color: var(--sapButton_Lite_Active_BorderColor); - --fdShellbar_Button_Outline_Color: var(--sapContent_FocusColor); - --fdShellbar_Input_Border: none; - --fdShellbar_Input_Background: var(--sapShell_InteractiveBackground); - --fdShellbar_Input_Addon_Border_Width: var(--sapButton_BorderWidth); - --fdShellbar_Input_Color: var(--sapShell_InteractiveTextColor); - --fdShellbar_Input_Placeholder_Color: var(--sapField_PlaceholderTextColor); - --fdShellbar_Input_Border_Radius: 1.125rem; - --fdShellbar_Input_Hover_Border_Color: var(--sapField_BorderColor); - --fdShellbar_Input_Addon_Dimension: 1.75rem; - /** Message Page */ --fdMessage_Page_Container_Background: var(--sapGroup_ContentBackground); --fdMessage_Page_Container_Corner_Radius: var(--sapElement_BorderCornerRadius); diff --git a/packages/styles/src/theming/sap_horizon_hcb.scss b/packages/styles/src/theming/sap_horizon_hcb.scss index 53211c4f89..2460067b0d 100644 --- a/packages/styles/src/theming/sap_horizon_hcb.scss +++ b/packages/styles/src/theming/sap_horizon_hcb.scss @@ -30,6 +30,7 @@ @import "./common/info-label/sap_horizon_hc"; @import "./common/file-uploader/sap_horizon_hc"; @import "./common/variant-management/sap_horizon"; +@import "./common/shellbar/sap_horizon_hc"; :root { /* Switch */ @@ -303,22 +304,6 @@ /** Text */ --fdText_Selected_Background_Color: var(--sapContent_Selected_Background); - /** Shellbar */ - --fdShellbar_Height: 3.25rem; - --fdShellbar_Shadow: none; - --fdShellbar_Button_Hover_Border_Color: var(--sapButton_Lite_BorderColor); - --fdShellbar_Button_Active_Border_Color: var(--sapButton_Lite_Active_BorderColor); - --fdShellbar_Button_Outline_Color: var(--sapContent_FocusColor); - --fdShellbar_Input_Border: solid 0.0625rem var(--sapShell_InteractiveBorderColor); - --fdShellbar_Input_Background: var(--sapShell_InteractiveBackground); - --fdShellbar_Input_Hover_Background: var(--sapShellColor); - --fdShellbar_Input_Color: var(--sapShell_InteractiveTextColor); - --fdShellbar_Input_Placeholder_Color: var(--sapField_PlaceholderTextColor); - --fdShellbar_Input_Border_Radius: 0; - --fdShellbar_Input_Hover_Border_Color: var(--sapField_BorderColor); - --fdShellbar_Input_Addon_Dimension: 2.25rem; - --fdShellbar_Input_Addon_Border_Width: 0; - /** Message Page */ --fdMessage_Page_Container_Background: var(--sapGroup_ContentBackground); --fdMessage_Page_Container_Corner_Radius: var(--sapElement_BorderCornerRadius); diff --git a/packages/styles/src/theming/sap_horizon_hcw.scss b/packages/styles/src/theming/sap_horizon_hcw.scss index bc2b712fb6..f157381f50 100644 --- a/packages/styles/src/theming/sap_horizon_hcw.scss +++ b/packages/styles/src/theming/sap_horizon_hcw.scss @@ -31,6 +31,7 @@ @import "./common/info-label/sap_horizon_hc"; @import "./common/file-uploader/sap_horizon_hc"; @import "./common/variant-management/sap_horizon"; +@import "./common/shellbar/sap_horizon_hc"; :root { /* Switch */ @@ -303,22 +304,6 @@ /** Text */ --fdText_Selected_Background_Color: var(--sapContent_Selected_Background); - /** Shellbar */ - --fdShellbar_Height: 3.25rem; - --fdShellbar_Shadow: none; - --fdShellbar_Button_Hover_Border_Color: var(--sapButton_Lite_BorderColor); - --fdShellbar_Button_Active_Border_Color: var(--sapButton_Lite_Active_BorderColor); - --fdShellbar_Button_Outline_Color: var(--sapContent_FocusColor); - --fdShellbar_Input_Border: solid 0.0625rem var(--sapShell_InteractiveBorderColor); - --fdShellbar_Input_Background: var(--sapShell_InteractiveBackground); - --fdShellbar_Input_Hover_Background: var(--sapShellColor); - --fdShellbar_Input_Color: var(--sapShell_InteractiveTextColor); - --fdShellbar_Input_Placeholder_Color: var(--sapField_PlaceholderTextColor); - --fdShellbar_Input_Border_Radius: 0; - --fdShellbar_Input_Hover_Border_Color: var(--sapField_BorderColor); - --fdShellbar_Input_Addon_Dimension: 2.25rem; - --fdShellbar_Input_Addon_Border_Width: 0; - /** Message Page */ --fdMessage_Page_Container_Background: var(--sapGroup_ContentBackground); --fdMessage_Page_Container_Corner_Radius: var(--sapElement_BorderCornerRadius); diff --git a/packages/styles/stories/Components/shellbar/shellbar.stories.js b/packages/styles/stories/Components/shellbar/shellbar.stories.js index 2b67010109..a8a7bbf7ae 100644 --- a/packages/styles/stories/Components/shellbar/shellbar.stories.js +++ b/packages/styles/stories/Components/shellbar/shellbar.stories.js @@ -7,6 +7,7 @@ import '../../../src/input-group.scss'; import '../../../src/popover.scss'; import '../../../src/product-switch.scss'; import '../../../src/shellbar.scss'; +import '../../../src/select.scss'; export default { title: 'Components/Shellbar', parameters: { @@ -19,8 +20,6 @@ The shellbar offers consistent, responsive navigation across all products and ap - Product: for branding and product elements. - Actions: for search, product links, and user settings. -**Note:** There is a third container group for [SAP CoPilot](https://help.sap.com/viewer/product/SAP_COPILOT/1902/en-US), which is a chatbot feature leveraged internally at SAP. The SAP CoPilot icon is displayed in the product switch example, and can act as a placeholder for third-party chatbot applications. - ##Elements The shellbar supports layout functionality and has some built-in elements, but relies on standalone components for most of its content. @@ -87,7 +86,7 @@ The primary shellbar displays a logo, title, and an avatar where the user settin }; export const ProductMenuAndSearch = () => `
-
+
+
+
Subtitle
+
+
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+
`; LinksWithCollapsibleMenuSSize.storyName = 'Small'; @@ -579,12 +671,12 @@ export const ProductSwitch = () => `
Corporate Portal
-
- -
+
+ +
@@ -743,10 +835,130 @@ ProductSwitch.parameters = { docs: { description: { story: ` -Shellbar can be displayed with a product switch component, indicating to the user that they can navigate to other products. See [Product Switch](product-switch.html) for more details. +Shellbar can be displayed with a product switch component, indicating to the user that they can navigate to other products. See [Product Switch](product-switch.html) for more details.
+The CoPilot is a standard button with .sap-icon--co icon. -**Note:** There is an [SAP CoPilot](https://help.sap.com/viewer/product/SAP_COPILOT/1902/en-US) icon displayed in the middle of the shellbar, which can be used to trigger a chatbot if desired. ` } } }; + +export const ResponsivePaddings = () => `
+
+
+ + Corporate Portal +
+
+
+
+ +
+
+
+
+
+ +
+
+ +
+
+
+
+
+ +
+ +
+
+
+
+
+
+ +
+ +
+
+
+
+
+`; + +ResponsivePaddings.storyName = 'Responsive Paddings'; + +ResponsivePaddings.parameters = { + docs: { + description: { + story: ` +The Shellbar paddings can be made responsive. Meaning that based on the current size of the shellbar paddings will be different. + ` + } + } +}; diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap index dbba403780..cc177e1686 100644 --- a/packages/styles/tests/__snapshots__/styles.test.ts.snap +++ b/packages/styles/tests/__snapshots__/styles.test.ts.snap @@ -1564,7 +1564,7 @@ exports[`Check stories > Components/Button > Story BadgeOnButton > Should match 3 - +

Compact

- +
- +
- +
- +
- +
- +

Compact

- +
- +
- +
- +
- +
- +
" `; @@ -5842,7 +5842,7 @@ exports[`Check stories > Components/File Uploader > Story FileUploaderWithFiles
- +

File Selected:

    @@ -11864,7 +11864,7 @@ exports[`Check stories > Components/Grid List/Grid List > Story PartialItems > S
- +
@@ -22088,7 +22088,7 @@ exports[`Check stories > Components/Popover > Story Variants > Should match snap
- +