From 9f7b25965b95d93ab59e120c8cc82af30dd7c4a6 Mon Sep 17 00:00:00 2001 From: Inna Atanasova Date: Fri, 8 Nov 2024 16:22:04 -0500 Subject: [PATCH] fix(styles): updates for Message Box [ci visual] --- packages/styles/src/icon.scss | 4 +- packages/styles/src/message-box.scss | 54 +++++++------- packages/styles/src/mixins/_icons.scss | 6 +- .../common/message-box/_sap_fiori.scss | 9 --- .../common/message-box/_sap_fiori_hc.scss | 9 --- .../common/message-box/_sap_horizon.scss | 9 --- .../common/message-box/_sap_horizon_hc.scss | 9 --- packages/styles/src/theming/sap_fiori_3.scss | 1 - .../styles/src/theming/sap_fiori_3_dark.scss | 1 - .../styles/src/theming/sap_fiori_3_hcb.scss | 1 - .../styles/src/theming/sap_fiori_3_hcw.scss | 1 - .../src/theming/sap_fiori_3_light_dark.scss | 1 - packages/styles/src/theming/sap_horizon.scss | 1 - .../styles/src/theming/sap_horizon_dark.scss | 1 - .../styles/src/theming/sap_horizon_hcb.scss | 1 - .../styles/src/theming/sap_horizon_hcw.scss | 1 - .../feed-input/placeholder-image.example.html | 6 +- .../message-box/responsive.example.html | 24 +++---- .../message-box/structure.example.html | 6 +- .../Components/message-box/types.example.html | 30 ++++---- .../tests/__snapshots__/styles.test.ts.snap | 72 ++++++++++--------- 21 files changed, 101 insertions(+), 146 deletions(-) delete mode 100644 packages/styles/src/theming/common/message-box/_sap_fiori.scss delete mode 100644 packages/styles/src/theming/common/message-box/_sap_fiori_hc.scss delete mode 100644 packages/styles/src/theming/common/message-box/_sap_horizon.scss delete mode 100644 packages/styles/src/theming/common/message-box/_sap_horizon_hc.scss diff --git a/packages/styles/src/icon.scss b/packages/styles/src/icon.scss index 9f3c7dfdc0..10b1bd4749 100644 --- a/packages/styles/src/icon.scss +++ b/packages/styles/src/icon.scss @@ -12,9 +12,11 @@ $blockTNT: sap-icon-TNT; @include fd-icon-control-enumeration($block); line-height: 1; - font-size: 1rem; + font-size: var(--fdIcon_Font_Size, 1rem); font-style: normal; display: inline-flex; + color: var(--fdIcon_Color, inherit); + background-color: var(--fdIcon_Background_Color, transparent); @include fd-fiori-focus(0); } diff --git a/packages/styles/src/message-box.scss b/packages/styles/src/message-box.scss index 4e3e42d6e5..2e32df65e7 100644 --- a/packages/styles/src/message-box.scss +++ b/packages/styles/src/message-box.scss @@ -7,20 +7,14 @@ $block: #{$fd-namespace}-message-box; $bar: #{$fd-namespace}-bar; $button: #{$fd-namespace}-button; -$fd-message-box-title-icon-text-size: 1rem; -$fd-message-box-footer-button-min-width: 4rem; $fd-message-box-content-padding-x: (s: 1rem, m: 2rem, l: 2rem, xl: 3rem); -$defaultBoxShadow: var(--sapContent_HeaderShadow); -$errorBoxShadow: var(--fdMessage_Box_Error_Box_Shadow); -$successBoxShadow: var(--fdMessage_Box_Success_Box_Shadow); -$warningBoxShadow: var(--fdMessage_Box_Warning_Box_Shadow); -$informationBoxShadow: var(--fdMessage_Box_Information_Box_Shadow); + $message-box-states: ( "confirmation": ("iconColor": var(--sapNeutralElementColor), "boxShadow": var(--sapContent_HeaderShadow)), - "error": ("iconColor": var(--sapNegativeElementColor), "boxShadow": $errorBoxShadow), - "success": ("iconColor": var(--sapPositiveElementColor), "boxShadow": $successBoxShadow), - "warning": ("iconColor": var(--sapCriticalElementColor), "boxShadow": $warningBoxShadow), - "information": ("iconColor": var(--sapInformativeElementColor), "boxShadow": $informationBoxShadow) + "error": ("iconColor": var(--sapNegativeElementColor), "boxShadow": var(--sapContent_Error_HeaderShadow)), + "success": ("iconColor": var(--sapPositiveElementColor), "boxShadow": var(--sapContent_Success_HeaderShadow)), + "warning": ("iconColor": var(--sapCriticalElementColor), "boxShadow": var(--sapContent_Warning_HeaderShadow)), + "information": ("iconColor": var(--sapInformativeElementColor), "boxShadow": var(--sapContent_Information_HeaderShadow)) ); .#{$block} { @@ -40,10 +34,11 @@ $message-box-states: ( @each $size-label, $size in $fd-message-box-content-padding-x { &--#{$size-label} { - .#{$block}__header.#{$bar}, - .#{$block}__footer.#{$bar}, + .#{$block}__header, + .#{$block}__footer, .#{$block}__body { - padding-inline: map.get($fd-message-box-content-padding-x, $size-label); + --fdBar_Padding_X: #{map.get($fd-message-box-content-padding-x, $size-label)}; + --fdMessageBox_Body_Inline_Padding: #{map.get($fd-message-box-content-padding-x, $size-label)}; } } } @@ -53,16 +48,9 @@ $message-box-states: ( } } - &__header, - &__footer { - &.#{$bar} { - @extend %dialog-paddings; - } - } - &__footer { - .#{$block}__decisive-button.#{$button} { - min-width: $fd-message-box-footer-button-min-width; + .#{$block}__decisive-button { + --fdButton_Min_Width: 4rem; } } @@ -71,8 +59,9 @@ $message-box-states: ( @extend %dialog-body; - padding-inline: 1rem; + padding-inline: var(--fdMessageBox_Body_Inline_Padding, 1rem); padding-block: 1rem; + } &__title { @@ -84,7 +73,7 @@ $message-box-states: ( &__more { @include fd-reset(); - margin-top: 1rem; + margin-block-start: 1rem; } // MODIFIERS @@ -94,15 +83,22 @@ $message-box-states: ( @each $set-name, $state-set in $message-box-states { &--#{$set-name} { - .#{$block}__header.#{$bar} { - box-shadow: map.get($state-set, "boxShadow"); + .#{$block}__header { + --fdBar_Shadow: #{map.get($state-set, "boxShadow")}; :not(button) > [class*="sap-icon"] { - font-size: 1rem; + --fdIcon_Font_Size: 1rem; + --fdIcon_Color: #{map.get($state-set, "iconColor")}; + margin-inline-end: 0.5rem; - color: map.get($state-set, "iconColor"); } } } } + + @include fd-compact-or-condensed() { + .#{$block}__decisive-button { + --fdButton_Min_Width: 4rem; + } + } } diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index 7fd6b82bd9..dad69655a3 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -105,12 +105,10 @@ @each $enumeration-name, $enumeration-value in $fd-icon-control-enumerations { &.#{$block} { &--color-#{$enumeration-name} { - color: map.get($enumeration-value, "color"); + --fdIcon_Color: #{map.get($enumeration-value, "color")}; } &--background-#{$enumeration-name} { - &::#{$position} { - background-color: map.get($enumeration-value, "background-color"); - } + --fdIcon_Background_Color: #{map.get($enumeration-value, "background-color")}; } } } diff --git a/packages/styles/src/theming/common/message-box/_sap_fiori.scss b/packages/styles/src/theming/common/message-box/_sap_fiori.scss deleted file mode 100644 index 106a11c151..0000000000 --- a/packages/styles/src/theming/common/message-box/_sap_fiori.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use "sass:map"; - -:root { - --fdMessage_Box_Box_Shadow: inset 0 -0.0625rem; - --fdMessage_Box_Error_Box_Shadow: var(--fdMessage_Box_Box_Shadow) var(--sapErrorBorderColor), var(--sapContent_HeaderShadow); - --fdMessage_Box_Success_Box_Shadow: var(--fdMessage_Box_Box_Shadow) var(--sapSuccessBorderColor), var(--sapContent_HeaderShadow); - --fdMessage_Box_Warning_Box_Shadow: var(--fdMessage_Box_Box_Shadow) var(--sapWarningBorderColor), var(--sapContent_HeaderShadow); - --fdMessage_Box_Information_Box_Shadow: var(--fdMessage_Box_Box_Shadow) var(--sapInformationBorderColor), var(--sapContent_HeaderShadow); -} diff --git a/packages/styles/src/theming/common/message-box/_sap_fiori_hc.scss b/packages/styles/src/theming/common/message-box/_sap_fiori_hc.scss deleted file mode 100644 index 9f840a3e41..0000000000 --- a/packages/styles/src/theming/common/message-box/_sap_fiori_hc.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use "sass:map"; - -:root { - --fdMessage_Box_Box_Shadow: inset 0 -0.125rem; - --fdMessage_Box_Error_Box_Shadow: var(--fdMessage_Box_Box_Shadow) var(--sapErrorBorderColor); - --fdMessage_Box_Success_Box_Shadow: var(--fdMessage_Box_Box_Shadow) var(--sapSuccessBorderColor); - --fdMessage_Box_Warning_Box_Shadow: var(--fdMessage_Box_Box_Shadow) var(--sapWarningBorderColor); - --fdMessage_Box_Information_Box_Shadow: var(--fdMessage_Box_Box_Shadow) var(--sapInformationBorderColor); -} diff --git a/packages/styles/src/theming/common/message-box/_sap_horizon.scss b/packages/styles/src/theming/common/message-box/_sap_horizon.scss deleted file mode 100644 index 106a11c151..0000000000 --- a/packages/styles/src/theming/common/message-box/_sap_horizon.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use "sass:map"; - -:root { - --fdMessage_Box_Box_Shadow: inset 0 -0.0625rem; - --fdMessage_Box_Error_Box_Shadow: var(--fdMessage_Box_Box_Shadow) var(--sapErrorBorderColor), var(--sapContent_HeaderShadow); - --fdMessage_Box_Success_Box_Shadow: var(--fdMessage_Box_Box_Shadow) var(--sapSuccessBorderColor), var(--sapContent_HeaderShadow); - --fdMessage_Box_Warning_Box_Shadow: var(--fdMessage_Box_Box_Shadow) var(--sapWarningBorderColor), var(--sapContent_HeaderShadow); - --fdMessage_Box_Information_Box_Shadow: var(--fdMessage_Box_Box_Shadow) var(--sapInformationBorderColor), var(--sapContent_HeaderShadow); -} diff --git a/packages/styles/src/theming/common/message-box/_sap_horizon_hc.scss b/packages/styles/src/theming/common/message-box/_sap_horizon_hc.scss deleted file mode 100644 index 9f840a3e41..0000000000 --- a/packages/styles/src/theming/common/message-box/_sap_horizon_hc.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use "sass:map"; - -:root { - --fdMessage_Box_Box_Shadow: inset 0 -0.125rem; - --fdMessage_Box_Error_Box_Shadow: var(--fdMessage_Box_Box_Shadow) var(--sapErrorBorderColor); - --fdMessage_Box_Success_Box_Shadow: var(--fdMessage_Box_Box_Shadow) var(--sapSuccessBorderColor); - --fdMessage_Box_Warning_Box_Shadow: var(--fdMessage_Box_Box_Shadow) var(--sapWarningBorderColor); - --fdMessage_Box_Information_Box_Shadow: var(--fdMessage_Box_Box_Shadow) var(--sapInformationBorderColor); -} diff --git a/packages/styles/src/theming/sap_fiori_3.scss b/packages/styles/src/theming/sap_fiori_3.scss index 8b1cdd403d..d142ebad2e 100644 --- a/packages/styles/src/theming/sap_fiori_3.scss +++ b/packages/styles/src/theming/sap_fiori_3.scss @@ -16,7 +16,6 @@ @import "./common/panel/sap_fiori"; @import "./common/carousel/sap_fiori"; @import "./common/feed-list-item/sap_fiori"; -@import "./common/message-box/sap_fiori"; @import "./common/busy-indicator/sap_fiori"; @import "./common/menu/sap_fiori"; @import "./common/checkbox/sap_foiri"; diff --git a/packages/styles/src/theming/sap_fiori_3_dark.scss b/packages/styles/src/theming/sap_fiori_3_dark.scss index d36266efbe..5f74f5105b 100644 --- a/packages/styles/src/theming/sap_fiori_3_dark.scss +++ b/packages/styles/src/theming/sap_fiori_3_dark.scss @@ -16,7 +16,6 @@ @import "./common/panel/sap_fiori"; @import "./common/carousel/sap_fiori"; @import "./common/feed-list-item/sap_fiori"; -@import "./common/message-box/sap_fiori"; @import "./common/busy-indicator/sap_fiori"; @import "./common/menu/sap_fiori"; @import "./common/checkbox/sap_foiri"; diff --git a/packages/styles/src/theming/sap_fiori_3_hcb.scss b/packages/styles/src/theming/sap_fiori_3_hcb.scss index c87cc381ab..90b33fe1ad 100644 --- a/packages/styles/src/theming/sap_fiori_3_hcb.scss +++ b/packages/styles/src/theming/sap_fiori_3_hcb.scss @@ -23,7 +23,6 @@ @import "./common/carousel/sap_fiori"; @import "./common/carousel/sap_fiori_hc"; @import "./common/feed-list-item/sap_fiori"; -@import "./common/message-box/sap_fiori_hc"; @import "./common/busy-indicator/sap_fiori_hc"; @import "./common/menu/sap_fiori"; @import "./common/checkbox/sap_fiori_hc"; diff --git a/packages/styles/src/theming/sap_fiori_3_hcw.scss b/packages/styles/src/theming/sap_fiori_3_hcw.scss index 8588ecf7ca..441eaec9cb 100644 --- a/packages/styles/src/theming/sap_fiori_3_hcw.scss +++ b/packages/styles/src/theming/sap_fiori_3_hcw.scss @@ -17,7 +17,6 @@ @import "./common/panel/sap_fiori"; @import "./common/carousel/sap_fiori_hc"; @import "./common/feed-list-item/sap_fiori"; -@import "./common/message-box/sap_fiori_hc"; @import "./common/busy-indicator/sap_fiori_hc"; @import "./common/menu/sap_fiori"; @import "./common/checkbox/sap_fiori_hc"; 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 5832211b1d..63ba7f9a1e 100644 --- a/packages/styles/src/theming/sap_fiori_3_light_dark.scss +++ b/packages/styles/src/theming/sap_fiori_3_light_dark.scss @@ -16,7 +16,6 @@ @import "./common/panel/sap_fiori"; @import "./common/carousel/sap_fiori"; @import "./common/feed-list-item/sap_fiori"; -@import "./common/message-box/sap_fiori"; @import "./common/busy-indicator/sap_fiori"; @import "./common/menu/sap_fiori"; @import "./common/checkbox/sap_foiri"; diff --git a/packages/styles/src/theming/sap_horizon.scss b/packages/styles/src/theming/sap_horizon.scss index 552ad4d63c..6c852ea5c4 100644 --- a/packages/styles/src/theming/sap_horizon.scss +++ b/packages/styles/src/theming/sap_horizon.scss @@ -17,7 +17,6 @@ @import "./common/panel/sap_horizon"; @import "./common/carousel/sap_horizon"; @import "./common/feed-list-item/sap_horizon"; -@import "./common/message-box/sap_horizon"; @import "./common/busy-indicator/sap_horizon"; @import "./common/menu/sap_horizon"; @import "./common/checkbox/sap_horizon"; diff --git a/packages/styles/src/theming/sap_horizon_dark.scss b/packages/styles/src/theming/sap_horizon_dark.scss index 951b2adc09..5412cc59e1 100644 --- a/packages/styles/src/theming/sap_horizon_dark.scss +++ b/packages/styles/src/theming/sap_horizon_dark.scss @@ -17,7 +17,6 @@ @import "./common/panel/sap_horizon"; @import "./common/carousel/sap_horizon"; @import "./common/feed-list-item/sap_horizon"; -@import "./common/message-box/sap_horizon"; @import "./common/busy-indicator/sap_horizon"; @import "./common/menu/sap_horizon"; @import "./common/checkbox/sap_horizon"; diff --git a/packages/styles/src/theming/sap_horizon_hcb.scss b/packages/styles/src/theming/sap_horizon_hcb.scss index d4e8e384c3..8a914cdd2c 100644 --- a/packages/styles/src/theming/sap_horizon_hcb.scss +++ b/packages/styles/src/theming/sap_horizon_hcb.scss @@ -17,7 +17,6 @@ @import "./common/panel/sap_horizon"; @import "./common/carousel/sap_horizon_hc"; @import "./common/feed-list-item/sap_horizon"; -@import "./common/message-box/sap_horizon_hc"; @import "./common/busy-indicator/sap_horizon_hc"; @import "./common/menu/sap_horizon"; @import "./common/checkbox/sap_horizon_hc"; diff --git a/packages/styles/src/theming/sap_horizon_hcw.scss b/packages/styles/src/theming/sap_horizon_hcw.scss index cd6245ddbb..020802ee74 100644 --- a/packages/styles/src/theming/sap_horizon_hcw.scss +++ b/packages/styles/src/theming/sap_horizon_hcw.scss @@ -18,7 +18,6 @@ @import "./common/panel/sap_horizon"; @import "./common/carousel/sap_horizon_hc"; @import "./common/feed-list-item/sap_horizon"; -@import "./common/message-box/sap_horizon_hc"; @import "./common/busy-indicator/sap_horizon_hc"; @import "./common/menu/sap_horizon"; @import "./common/checkbox/sap_horizon_hc"; diff --git a/packages/styles/stories/Components/feed-input/placeholder-image.example.html b/packages/styles/stories/Components/feed-input/placeholder-image.example.html index 0526d05982..789db1d58e 100644 --- a/packages/styles/stories/Components/feed-input/placeholder-image.example.html +++ b/packages/styles/stories/Components/feed-input/placeholder-image.example.html @@ -1,10 +1,12 @@
- + title="John Doe"> + +