Skip to content

Commit

Permalink
fix(styles): update Message Value State Button [ci visual] (#4555)
Browse files Browse the repository at this point in the history
  • Loading branch information
@InnaAtanasova
InnaAtanasova committed May 25, 2023
1 parent b989ad7 commit 0e96d75
Show file tree
Hide file tree
Showing 17 changed files with 439 additions and 26 deletions.
75 changes: 54 additions & 21 deletions packages/styles/src/message-popover.scss
View file
@@ -1,10 +1,11 @@
@import "./mixins";
@import "./message-view.scss";
@import "./message-view";

@mixin _fd-message-popover-trigger($colors, $state) {
--fdButtonColor: #{map-get(map-get($colors, $state), "color")};
--fdButtonBackgroundColor: #{map-get(map-get($colors, $state), "backgroundColor")};
--fdButtonBorderColor: #{map-get(map-get($colors, $state), "borderColor")};
--fdButtonTextShadow: #{map-get(map-get($colors, $state), "textShadow")};
}

$block: #{$fd-namespace}-message-popover;
Expand All @@ -14,80 +15,99 @@ $fd-trigger-states: (
"regular": (
"color": var(--sapButton_Critical_TextColor),
"backgroundColor": var(--sapButton_Critical_Background),
"borderColor": var(--sapButton_Critical_BorderColor)
"borderColor": var(--sapButton_Critical_BorderColor),
"textShadow": var(--fdMessagePopover_Critical_Regular_Text_Shadow)
),
"hover": (
"color": var(--sapButton_Critical_Hover_TextColor),
"backgroundColor": var(--sapButton_Critical_Hover_Background),
"borderColor": var(--sapButton_Critical_Hover_BorderColor)
"borderColor": var(--sapButton_Critical_Hover_BorderColor),
"textShadow": var(--fdMessagePopover_Critical_Hover_Text_Shadow)
),
"active": (
"color": var(--sapButton_Critical_Active_TextColor),
"backgroundColor": var(--sapButton_Critical_Active_Background),
"borderColor": var(--sapButton_Critical_Active_BorderColor)
"borderColor": var(--sapButton_Critical_Active_BorderColor),
"textShadow": var(--fdMessagePopover_Critical_Active_Text_Shadow)
)
),
"negative": (
"regular": (
"color": var(--sapButton_Negative_TextColor),
"backgroundColor": var(--sapButton_Negative_Background),
"borderColor": var(--sapButton_Negative_BorderColor)
"borderColor": var(--sapButton_Negative_BorderColor),
"textShadow": var(--fdMessagePopover_Negative_Regular_Text_Shadow)
),
"hover": (
"color": var(--sapButton_Negative_Hover_TextColor),
"backgroundColor": var(--sapButton_Negative_Hover_Background),
"borderColor": var(--sapButton_Negative_Hover_BorderColor)
"borderColor": var(--sapButton_Negative_Hover_BorderColor),
"textShadow": var(--fdMessagePopover_Negative_Hover_Text_Shadow)
),
"active": (
"color": var(--sapButton_Negative_Active_TextColor),
"backgroundColor": var(--sapButton_Negative_Active_Background),
"borderColor": var(--sapButton_Negative_Active_BorderColor)
"borderColor": var(--sapButton_Negative_Active_BorderColor),
"textShadow": var(--fdMessagePopover_Negative_Active_Text_Shadow)
)
),
"success": (
"regular": (
"color": var(--sapButton_Success_TextColor),
"backgroundColor": var(--sapButton_Success_Background),
"borderColor": var(--sapButton_Success_BorderColor)
"borderColor": var(--sapButton_Success_BorderColor),
"textShadow": var(--fdMessagePopover_Success_Regular_Text_Shadow)
),
"hover": (
"color": var(--sapButton_Success_Hover_TextColor),
"backgroundColor": var(--sapButton_Success_Hover_Background),
"borderColor": var(--sapButton_Success_Hover_BorderColor)
"borderColor": var(--sapButton_Success_Hover_BorderColor),
"textShadow": var(--fdMessagePopover_Success_Hover_Text_Shadow)
),
"active": (
"color": var(--sapButton_Success_Active_TextColor),
"backgroundColor": var(--sapButton_Success_Active_Background),
"borderColor": var(--sapButton_Success_Active_BorderColor)
"borderColor": var(--sapButton_Success_Active_BorderColor),
"textShadow": var(--fdMessagePopover_Success_Active_Text_Shadow)
)
),
"information": (
"regular": (
"color": var(--sapButton_Neutral_TextColor),
"backgroundColor": var(--sapButton_Neutral_Background),
"borderColor": var(--sapButton_Neutral_BorderColor)
"color": var(--fdMessagePopover_Information_Regular_Color),
"backgroundColor": var(--fdMessagePopover_Information_Regular_Background_Color),
"borderColor": var(--fdMessagePopover_Information_Regular_Border_Color),
"textShadow": var(--fdMessagePopover_Information_Regular_Text_Shadow)
),
"hover": (
"color": var(--sapButton_Neutral_Hover_TextColor),
"backgroundColor": var(--sapButton_Neutral_Hover_Background),
"borderColor": var(--sapButton_Neutral_Hover_BorderColor)
"color": var(--fdMessagePopover_Information_Hover_Color),
"backgroundColor": var(--fdMessagePopover_Information_Hover_Background_Color),
"borderColor": var(--fdMessagePopover_Information_Hover_Border_Color),
"textShadow": var(--fdMessagePopover_Information_Hover_Text_Shadow)
),
"active": (
"color": var(--sapButton_Neutral_Active_TextColor),
"backgroundColor": var(--sapButton_Neutral_Active_Background),
"borderColor": var(--sapButton_Neutral_Active_BorderColor)
"color": var(--fdMessagePopover_Information_Active_Color),
"backgroundColor": var(--fdMessagePopover_Information_Active_Background_Color),
"borderColor": var(--fdMessagePopover_Information_Active_Border_Color),
"textShadow": var(--fdMessagePopover_Information_Active_Text_Shadow)
)
),
);

.#{$block} {
&__trigger {
--fdButtonFocusColor: var(--sapContent_ContrastFocusColor);

text-shadow: var(--fdButtonTextShadow);
border-width: var(--fdMessagePopover_Trigger_Border_Width);

@include fd-focus() {
outline-color: var(--sapContent_ContrastFocusColor);
&::after {
border-color: var(--fdButtonFocusColor);
}
}

@each $state, $colors in $fd-trigger-states {
&--#{$state} {
&.#{$block}__trigger--#{$state} {
@include _fd-message-popover-trigger($colors, "regular");

@include fd-hover() {
Expand All @@ -96,6 +116,19 @@ $fd-trigger-states: (

@include fd-active() {
@include _fd-message-popover-trigger($colors, "active");

--fdButtonFocusColor: var(--fdMessagePopover_Active_Focus_Outline_Color);
}

@include fd-disabled() {
@include _fd-message-popover-trigger($colors, "regular");

pointer-events: none;
opacity: var(--sapContent_DisabledOpacity);
}

@if $state == "information" {
--fdButtonFocusColor: var(--fdMessagePopover_Information_Focus_Outline_Color);
}
}
}
Expand Down
35 changes: 35 additions & 0 deletions packages/styles/src/theming/common/message-popover/_sap_fiori.scss
View file
@@ -0,0 +1,35 @@
:root {
--fdMessagePopover_Trigger_Font_Weight: var(--sapFontBoldFamily);
--fdMessagePopover_Trigger_Border_Width: 0.0625rem;
--fdMessagePopover_Active_Focus_Outline_Color: var(--sapContent_ContrastFocusColor);

// Critical
--fdMessagePopover_Critical_Regular_Text_Shadow: var(--sapContent_ContrastTextShadow);
--fdMessagePopover_Critical_Hover_Text_Shadow: var(--sapContent_ContrastTextShadow);
--fdMessagePopover_Critical_Active_Text_Shadow: novar(--sapContent_ContrastTextShadow) ne;

// Success
--fdMessagePopover_Success_Regular_Text_Shadow: var(--sapContent_ContrastTextShadow);
--fdMessagePopover_Success_Hover_Text_Shadow: var(--sapContent_ContrastTextShadow);
--fdMessagePopover_Success_Active_Text_Shadow: var(--sapContent_ContrastTextShadow);

// Negative
--fdMessagePopover_Negative_Regular_Text_Shadow: var(--sapContent_ContrastTextShadow);
--fdMessagePopover_Negative_Hover_Text_Shadow: var(--sapContent_ContrastTextShadow);
--fdMessagePopover_Negative_Active_Text_Shadow: var(--sapContent_ContrastTextShadow);

// Information
--fdMessagePopover_Information_Focus_Outline_Color: var(--sapContent_ContrastFocusColor);
--fdMessagePopover_Information_Regular_Text_Shadow: var(--sapContent_ContrastTextShadow);
--fdMessagePopover_Information_Regular_Background_Color: var(--sapButton_Neutral_Background);
--fdMessagePopover_Information_Regular_Color: var(--sapButton_Neutral_TextColor);
--fdMessagePopover_Information_Regular_Border_Color: var(--sapButton_Neutral_BorderColor);
--fdMessagePopover_Information_Hover_Text_Shadow: var(--sapContent_ContrastTextShadow);
--fdMessagePopover_Information_Hover_Background_Color: var(--sapButton_Neutral_Hover_Background);
--fdMessagePopover_Information_Hover_Color: var(--sapButton_Neutral_Hover_TextColor);
--fdMessagePopover_Information_Hover_Border_Color: var(--sapButton_Neutral_Hover_BorderColor);
--fdMessagePopover_Information_Active_Text_Shadow: var(--sapContent_ContrastTextShadow);
--fdMessagePopover_Information_Active_Background_Color: var(--sapButton_Neutral_Active_Background);
--fdMessagePopover_Information_Active_Color: var(--sapButton_Neutral_Active_TextColor);
--fdMessagePopover_Information_Active_Border_Color: var(--sapButton_Neutral_Active_BorderColor);
}
35 changes: 35 additions & 0 deletions packages/styles/src/theming/common/message-popover/_sap_horizon.scss
View file
@@ -0,0 +1,35 @@
:root {
--fdMessagePopover_Trigger_Font_Weight: var(--sapButton_Emphasized_FontWeight);
--fdMessagePopover_Trigger_Border_Width: var(--sapButton_BorderWidth);
--fdMessagePopover_Active_Focus_Outline_Color: var(--sapContent_FocusColor);

// Critical
--fdMessagePopover_Critical_Regular_Text_Shadow: var(--sapContent_ContrastTextShadow);
--fdMessagePopover_Critical_Hover_Text_Shadow: none;
--fdMessagePopover_Critical_Active_Text_Shadow: none;

// Success
--fdMessagePopover_Success_Regular_Text_Shadow: var(--sapContent_ContrastTextShadow);
--fdMessagePopover_Success_Hover_Text_Shadow: none;
--fdMessagePopover_Success_Active_Text_Shadow: none;

// Negative
--fdMessagePopover_Negative_Regular_Text_Shadow: var(--sapContent_ContrastTextShadow);
--fdMessagePopover_Negative_Hover_Text_Shadow: none;
--fdMessagePopover_Negative_Active_Text_Shadow: none;

// Information
--fdMessagePopover_Information_Focus_Outline_Color: var(--sapContent_FocusColor);
--fdMessagePopover_Information_Regular_Text_Shadow: var(--sapContent_TextShadow);
--fdMessagePopover_Information_Regular_Background_Color: var(--sapButton_Information_Background);
--fdMessagePopover_Information_Regular_Color: var(--sapButton_Information_TextColor);
--fdMessagePopover_Information_Regular_Border_Color: var(--sapButton_Information_BorderColor);
--fdMessagePopover_Information_Hover_Text_Shadow: var(--sapContent_TextShadow);
--fdMessagePopover_Information_Hover_Background_Color: var(--sapButton_Information_Hover_Background);
--fdMessagePopover_Information_Hover_Color: var(--sapButton_Information_Hover_TextColor);
--fdMessagePopover_Information_Hover_Border_Color: var(--sapButton_Information_Hover_BorderColor);
--fdMessagePopover_Information_Active_Text_Shadow: var(--sapContent_TextShadow);
--fdMessagePopover_Information_Active_Background_Color: var(--sapButton_Information_Active_Background);
--fdMessagePopover_Information_Active_Color: var(--sapButton_Information_Active_TextColor);
--fdMessagePopover_Information_Active_Border_Color: var(--sapButton_Information_Active_BorderColor);
}
35 changes: 35 additions & 0 deletions packages/styles/src/theming/common/message-popover/_sap_horizon_hc.scss
View file
@@ -0,0 +1,35 @@
:root {
--fdMessagePopover_Trigger_Font_Weight: var(--sapButton_Emphasized_FontWeight);
--fdMessagePopover_Trigger_Border_Width: 0.125rem;
--fdMessagePopover_Active_Focus_Outline_Color: var(--sapContent_FocusColor);

// Critical
--fdMessagePopover_Critical_Regular_Text_Shadow: var(--sapContent_ContrastTextShadow);
--fdMessagePopover_Critical_Hover_Text_Shadow: none;
--fdMessagePopover_Critical_Active_Text_Shadow: none;

// Success
--fdMessagePopover_Success_Regular_Text_Shadow: var(--sapContent_ContrastTextShadow);
--fdMessagePopover_Success_Hover_Text_Shadow: none;
--fdMessagePopover_Success_Active_Text_Shadow: none;

// Negative
--fdMessagePopover_Negative_Regular_Text_Shadow: var(--sapContent_ContrastTextShadow);
--fdMessagePopover_Negative_Hover_Text_Shadow: none;
--fdMessagePopover_Negative_Active_Text_Shadow: none;

// Information
--fdMessagePopover_Information_Focus_Outline_Color: var(--sapContent_FocusColor);
--fdMessagePopover_Information_Regular_Text_Shadow: var(--sapContent_TextShadow);
--fdMessagePopover_Information_Regular_Background_Color: var(--sapButton_Information_Background);
--fdMessagePopover_Information_Regular_Color: var(--sapButton_Information_TextColor);
--fdMessagePopover_Information_Regular_Border_Color: var(--sapButton_Information_BorderColor);
--fdMessagePopover_Information_Hover_Text_Shadow: var(--sapContent_TextShadow);
--fdMessagePopover_Information_Hover_Background_Color: var(--sapButton_Information_Hover_Background);
--fdMessagePopover_Information_Hover_Color: var(--sapButton_Information_Hover_TextColor);
--fdMessagePopover_Information_Hover_Border_Color: var(--sapButton_Information_Hover_BorderColor);
--fdMessagePopover_Information_Active_Text_Shadow: var(--sapContent_TextShadow);
--fdMessagePopover_Information_Active_Background_Color: var(--sapButton_Information_Active_Background);
--fdMessagePopover_Information_Active_Color: var(--sapButton_Information_Active_TextColor);
--fdMessagePopover_Information_Active_Border_Color: var(--sapButton_Information_Active_BorderColor);
}
1 change: 1 addition & 0 deletions packages/styles/src/theming/sap_fiori_3.scss
View file
Expand Up @@ -34,6 +34,7 @@
@import "./common/flexible-column-layout/sap_fiori";
@import "./common/avatar/sap_fiori";
@import "./common/avatar-group/sap_fiori";
@import "./common/message-popover/sap_fiori";
@import "./sap_fiori_3/css_variables";

:root {
Expand Down
1 change: 1 addition & 0 deletions packages/styles/src/theming/sap_fiori_3_dark.scss
View file
Expand Up @@ -34,6 +34,7 @@
@import "./common/flexible-column-layout/sap_fiori";
@import "./common/avatar/sap_fiori";
@import "./common/avatar-group/sap_fiori";
@import "./common/message-popover/sap_fiori";
@import "./sap_fiori_3_dark/css_variables";

:root {
Expand Down
1 change: 1 addition & 0 deletions packages/styles/src/theming/sap_fiori_3_hcb.scss
View file
Expand Up @@ -41,6 +41,7 @@
@import "./common/flexible-column-layout/sap_fiori_hc";
@import "./common/avatar/sap_fiori_hc";
@import "./common/avatar-group/sap_fiori";
@import "./common/message-popover/sap_fiori";
@import "./sap_fiori_3_hcb/css_variables";

:root {
Expand Down
1 change: 1 addition & 0 deletions packages/styles/src/theming/sap_fiori_3_hcw.scss
View file
Expand Up @@ -35,6 +35,7 @@
@import "./common/flexible-column-layout/sap_fiori_hc";
@import "./common/avatar/sap_fiori_hc";
@import "./common/avatar-group/sap_fiori";
@import "./common/message-popover/sap_fiori";
@import "./sap_fiori_3_hcw/css_variables";

:root {
Expand Down
1 change: 1 addition & 0 deletions packages/styles/src/theming/sap_fiori_3_light_dark.scss
View file
Expand Up @@ -33,6 +33,7 @@
@import "./common/flexible-column-layout/sap_fiori";
@import "./common/avatar/sap_fiori";
@import "./common/avatar-group/sap_fiori";
@import "./common/message-popover/sap_fiori";
@import "./sap_fiori_3_light_dark/css_variables";

:root {
Expand Down
1 change: 1 addition & 0 deletions packages/styles/src/theming/sap_horizon.scss
View file
Expand Up @@ -36,6 +36,7 @@
@import "./common/flexible-column-layout/sap_horizon";
@import "./common/avatar/sap_horizon";
@import "./common/avatar-group/sap_horizon";
@import "./common/message-popover/sap_horizon";
@import "./sap_horizon/css_variables";

:root {
Expand Down
1 change: 1 addition & 0 deletions packages/styles/src/theming/sap_horizon_dark.scss
View file
Expand Up @@ -36,6 +36,7 @@
@import "./common/flexible-column-layout/sap_horizon";
@import "./common/avatar/sap_horizon";
@import "./common/avatar-group/sap_horizon";
@import "./common/message-popover/sap_horizon";
@import "./sap_horizon_dark/css_variables";

:root {
Expand Down
1 change: 1 addition & 0 deletions packages/styles/src/theming/sap_horizon_hcb.scss
View file
Expand Up @@ -36,6 +36,7 @@
@import "./common/flexible-column-layout/sap_horizon_hc";
@import "./common/avatar/sap_horizon_hc";
@import "./common/avatar-group/sap_horizon";
@import "./common/message-popover/sap_horizon_hc";
@import "./sap_horizon_hcb/css_variables";

:root {
Expand Down
1 change: 1 addition & 0 deletions packages/styles/src/theming/sap_horizon_hcw.scss
View file
Expand Up @@ -37,6 +37,7 @@
@import "./common/flexible-column-layout/sap_horizon_hc";
@import "./common/avatar/sap_horizon_hc";
@import "./common/avatar-group/sap_horizon";
@import "./common/message-popover/sap_horizon_hc";
@import "./sap_horizon_hcw/css_variables";

:root {
Expand Down
4 changes: 2 additions & 2 deletions packages/styles/stories/Components/message-popover/details-view.example.html
View file
Expand Up @@ -2,8 +2,8 @@
<div style="height: 500px">
<div class="fd-popover" style="margin-top: 300px;">
<div class="fd-popover__control">
<button aria-controls="popoverHSF5" aria-expanded="true" aria-haspopup="dialog" class="fd-button fd-message-popover__trigger fd-message-popover__trigger--negative" onclick="onPopoverClick('popoverHSF5');" role="button">
<i class="sap-icon--message-error" aria-label="Negative"></i>
<button aria-controls="popoverHSF5" aria-expanded="true" aria-haspopup="dialog" class="fd-button fd-message-popover__trigger fd-message-popover__trigger--information" onclick="onPopoverClick('popoverHSF5');" role="button">
<i class="sap-icon--message-information" aria-label="Information"></i>
<span class="fd-button__text">5</span>
</button>
</div>
Expand Down
4 changes: 3 additions & 1 deletion packages/styles/stories/Components/message-popover/message-popover.stories.js
View file
@@ -1,5 +1,6 @@
import detailsViewExampleHtml from "./details-view.example.html?raw";
import cozyMessagePopoverExampleHtml from "./cozy-message-popover.example.html?raw";
import messageTriggerExampleHtml from "./message-trigger.example.html?raw";
import '../../../src/list.scss';
import '../../../src/icon.scss';
import '../../../src/button.scss';
Expand Down Expand Up @@ -28,4 +29,5 @@ It provides a handy and systematized way to navigate and explore details for eve
}
};
export const CozyMessagePopover = () => cozyMessagePopoverExampleHtml;
export const DetailsView = () => detailsViewExampleHtml;
export const DetailsView = () => detailsViewExampleHtml;
export const MessageTrigger = () => messageTriggerExampleHtml;

0 comments on commit 0e96d75

Please sign in to comment.