Skip to content

Commit

Permalink
fix(styles): refactor object status component [ci visual] (#4271)
Browse files Browse the repository at this point in the history
  • Loading branch information
@N1XUS
N1XUS committed Feb 22, 2023
1 parent 4d9a6ba commit c16b9b9
Show file tree
Hide file tree
Showing 2 changed files with 114 additions and 112 deletions.
177 changes: 69 additions & 108 deletions packages/styles/src/object-status.scss
View file
Expand Up @@ -41,7 +41,7 @@ $inverted-color-states: (
),
"critical": (
"regular": ("color": var(--sapButton_Critical_TextColor), "background": var(--sapButton_Critical_Background), "borderColor": var(--sapButton_Critical_BorderColor)),
"hover": ("color": var(sapButton_Critical_Hover_TextColor), "background": var(--sapButton_Critical_Hover_Background)),
"hover": ("color": var(--sapButton_Critical_Hover_TextColor), "background": var(--sapButton_Critical_Hover_Background)),
"active": ("color": var(--sapButton_Active_TextColor), "background": var(--sapButton_Critical_Active_Background)),
"visited": ("color": var(--sapButton_Critical_TextColor), "background": var(--sapButton_Critical_Background)),
),
Expand Down Expand Up @@ -120,56 +120,42 @@ $inverted-color-accents: (

// STATES FOR INVERTED OBJECT STATUS
@mixin inverted-object-states($variablesSet) {
color: map_deep_get($variablesSet, "regular", "color");
background-color: map_deep_get($variablesSet, "regular", "background");

@include fd-object-status-icon-selector() {
color: map_deep_get($variablesSet, "regular", "color");
}
--fdObjectStatus_Text_Color: #{map_deep_get($variablesSet, "regular", "color")};
--fdObjectStatus_Icon_Color: #{map_deep_get($variablesSet, "regular", "color")};
--fdObjectStatus_Background_Color: #{map_deep_get($variablesSet, "regular", "background")};

&:hover,
&:active,
&:visited {
color: map_deep_get($variablesSet, "regular", "color");
background-color: map_deep_get($variablesSet, "regular", "background");

@include fd-object-status-icon-selector() {
color: map_deep_get($variablesSet, "regular", "color");
}
--fdObjectStatus_Text_Color: #{map_deep_get($variablesSet, "regular", "color")};
--fdObjectStatus_Icon_Color: #{map_deep_get($variablesSet, "regular", "color")};
--fdObjectStatus_Background_Color: #{map_deep_get($variablesSet, "regular", "background")};
}
}

// INTERACTION STATES FOR INVERTED OBJECT STATUS
@mixin inverted-object-interaction-states($variablesSet) {
color: map_deep_get($variablesSet, "regular", "color");
background-color: map_deep_get($variablesSet, "regular", "background");
border-color: map_deep_get($variablesSet, "regular", "borderColor");
--fdObjectStatus_Text_Color: #{map_deep_get($variablesSet, "regular", "color")};
--fdObjectStatus_Icon_Color: #{map_deep_get($variablesSet, "regular", "color")};
--fdObjectStatus_Background_Color: #{map_deep_get($variablesSet, "regular", "background")};
--fdObjectStatus_Border_Color: #{map_deep_get($variablesSet, "regular", "borderColor")};

&:visited {
color: map_deep_get($variablesSet, "visited", "color");
background-color: map_deep_get($variablesSet, "visited", "background");

@include fd-object-status-icon-selector() {
color: map_deep_get($variablesSet, "visited", "color");
}
--fdObjectStatus_Text_Color: #{map_deep_get($variablesSet, "visited", "color")};
--fdObjectStatus_Icon_Color: #{map_deep_get($variablesSet, "visited", "color")};
--fdObjectStatus_Background_Color: #{map_deep_get($variablesSet, "visited", "background")};
}

@include fd-hover() {
color: map_deep_get($variablesSet, "hover", "color");
background-color: map_deep_get($variablesSet, "hover", "background");

@include fd-object-status-icon-selector() {
color: map_deep_get($variablesSet, "hover", "color");
}
--fdObjectStatus_Text_Color: #{map_deep_get($variablesSet, "hover", "color")};
--fdObjectStatus_Icon_Color: #{map_deep_get($variablesSet, "hover", "color")};
--fdObjectStatus_Background_Color: #{map_deep_get($variablesSet, "hover", "background")};
}

@include fd-active() {
color: map_deep_get($variablesSet, "active", "color");
background-color: map_deep_get($variablesSet, "active", "background");

@include fd-object-status-icon-selector() {
color: map_deep_get($variablesSet, "active", "color");
}
--fdObjectStatus_Text_Color: #{map_deep_get($variablesSet, "active", "color")};
--fdObjectStatus_Icon_Color: #{map_deep_get($variablesSet, "active", "color")};
--fdObjectStatus_Background_Color: #{map_deep_get($variablesSet, "active", "background")};
}
}

Expand All @@ -185,15 +171,16 @@ $inverted-color-accents: (
}

// ICON VARIABLES
$fd-object-status-icon-font-size: 1rem;
$fd-object-status-icon-padding: 0.25rem !default;
$fd-object-status-icon-neutral: var(--sapNeutralElementColor);
--fdObjectStatus_Icon_Font_Size: 1rem;
--fdObjectStatus_Icon_Padding: 0.25rem;
--fdObjectStatus_Icon_Color: var(--sapNeutralElementColor);

// TEXT VARIABLES
$fd-object-status-text-font-family: var(--sapFontFamily) !default;
$fd-object-status-text-font-size: var(--sapFontSize) !default;
$fd-object-status-text-neutral: var(--sapNeutralTextColor) !default;
$fd-object-status-height: 1rem !default;
--fdObjectStatus_Text_Font_Family: var(--sapFontFamily);
--fdObjectStatus_Text_Font_Size: var(--sapFontSize);
--fdObjectStatus_Text_Color: var(--sapNeutralTextColor);
--fdObjectStatus_Height: 1rem;
--fdObjectStatus_Text_Shadow: var(--sapContent_TextShadow);

// INVERTED OBJECT STATUS VARIABLES
$fd-object-status-inverted-border-radius: 0.25rem !default;
Expand All @@ -216,17 +203,17 @@ $inverted-color-accents: (

@include fd-reset();

font-family: $fd-object-status-text-font-family;
font-size: $fd-object-status-text-font-size;
color: $fd-object-status-text-neutral;
text-shadow: var(--sapContent_TextShadow);
font-family: var(--fdObjectStatus_Text_Font_Family);
font-size: var(--fdObjectStatus_Text_Font_Size);
color: var(--fdObjectStatus_Text_Color);
text-shadow: var(--fdObjectStatus_Text_Shadow);
max-width: 100%;
word-break: break-word;
display: inline-flex;
align-items: start;
height: $fd-object-status-height;
max-height: $fd-object-status-height;
line-height: $fd-object-status-height;
align-items: center;
height: var(--fdObjectStatus_Height);
max-height: var(--fdObjectStatus_Height);
line-height: var(--fdObjectStatus_Height);

@include fd-focus() {
outline: none;
Expand All @@ -236,17 +223,17 @@ $inverted-color-accents: (
@include fd-reset();
@include fd-object-status-text-inherit();

line-height: $fd-object-status-height;
line-height: var(--fdObjectStatus_Height);
}

&__icon {
@include fd-icon-element-base() {
@include fd-flex-center();

font-size: $fd-object-status-icon-font-size;
padding-right: $fd-object-status-icon-padding;
color: $fd-object-status-icon-neutral;
line-height: $fd-object-status-height;
font-size: var(--fdObjectStatus_Icon_Font_Size);
padding-right: var(--fdObjectStatus_Icon_Padding);
color: var(--fdObjectStatus_Icon_Color);
line-height: var(--fdObjectStatus_Height);

// ICON ONLY MODE
@include fd-only-child() {
Expand All @@ -260,42 +247,30 @@ $inverted-color-accents: (
@include fd-rtl() {
@include fd-object-status-icon-selector() {
padding-right: 0;
padding-left: $fd-object-status-icon-padding;
padding-left: var(--fdObjectStatus_Icon_Padding);
}
}

@each $set-name, $color-set in $color-states {
&--#{$set-name} {
color: var(--fdElementTextColor, map_get($color-set, "color"));

@include fd-object-status-icon-selector() {
color: var(--fdElementIconColor, map_get($color-set, "iconColor"));
}
--fdObjectStatus_Text_Color: var(--fdElementTextColor, #{map_get($color-set, "color")});
--fdObjectStatus_Icon_Color: var(--fdElementIconColor, #{map_get($color-set, "iconColor")});

&:visited {
color: map_get($color-set, "visited");

@include fd-object-status-icon-selector() {
color: map_get($color-set, "visited");
}
--fdObjectStatus_Text_Color: #{map_get($color-set, "visited")};
--fdObjectStatus_Icon_Color: #{map_get($color-set, "visited")};
}
}
}

@each $set-name, $color-set in $color-accents {
&--indication-#{$set-name} {
color: map_get($color-set, "color");

@include fd-object-status-icon-selector() {
color: map_get($color-set, "iconColor");
}
--fdObjectStatus_Text_Color: #{map_get($color-set, "color")};
--fdObjectStatus_Icon_Color: #{map_get($color-set, "color")};

&:visited {
color: map_get($color-set, "visited");

@include fd-object-status-icon-selector() {
color: map_get($color-set, "visited");
}
--fdObjectStatus_Text_Color: #{map_get($color-set, "visited")};
--fdObjectStatus_Icon_Color: #{map_get($color-set, "visited")};
}
}
}
Expand All @@ -320,55 +295,38 @@ $inverted-color-accents: (

// LARGE DESIGN
&--large {
font-size: $fd-object-status-icon-text-font-size-large;
height: $fd-object-status-height-large;
max-height: $fd-object-status-height-large;
line-height: $fd-object-status-height-large;

.#{$block}__text {
font-family: var(--sapFontLightFamily);
line-height: $fd-object-status-height-large;
}

.#{$block}__icon {
line-height: $fd-object-status-height-large;
}

@include fd-object-status-icon-selector() {
font-size: $fd-object-status-icon-text-font-size-large;
}
--fdObjectStatus_Text_Font_Size: #{$fd-object-status-icon-text-font-size-large};
--fdObjectStatus_Height: #{$fd-object-status-height-large};
--fdObjectStatus_Icon_Font_Size: #{ $fd-object-status-icon-text-font-size-large};
--fdObjectStatus_Text_Font_Family: var(--sapFontLightFamily);
}

// INVERTED OBJECT STATUS
&--inverted {
--fdObjectStatus_Text_Font_Size: var(--sapFontSmallSize);
--fdObjectStatus_Text_Shadow: var(--sapContent_ContrastTextShadow);
--fdObjectStatus_Icon_Font_Size: #{$fd-object-status-inverted-icon-font-size};

height: auto;
min-height: $fd-object-status-inverted-min-height;
width: auto;
max-width: 100%;
min-width: $fd-object-status-inverted-min-width;
padding: $fd-object-status-inverted-padding;
border-radius: $fd-object-status-inverted-border-radius;
font-size: var(--sapFontSmallSize);
font-weight: $fd-object-status-inverted-text-font-weight;
border-width: var(--fdInverted_Object_Border_Width);
border-style: solid;
line-height: $fd-object-status-height;
text-shadow: var(--sapContent_ContrastTextShadow);
background-color: var(--fdObjectStatus_Background_Color, transparent);
border-color: var(--fdObjectStatus_Border_Color, initial);

.#{$block}__icon,
.#{$block}__text {
line-height: 0.875rem;
font-size: var(--sapFontSmallSize);
}

@include fd-object-status-icon-selector() {
font-size: $fd-object-status-inverted-icon-font-size;
padding-right: $fd-object-status-inverted-icon-spacing;

// ICON ONLY MODE
@include fd-only-child() {
padding: $fd-object-status-inverted-padding-empty;
}
}

@include fd-rtl() {
Expand Down Expand Up @@ -398,17 +356,20 @@ $inverted-color-accents: (

// LARGE DESIGN FOR INVERTED OBJECT STATUS
&.#{$block}--large {
font-size: $fd-object-status-icon-text-font-size-large-inverted;
--fdObjectStatus_Text_Font_Size: #{$fd-object-status-icon-text-font-size-large-inverted};
--fdObjectStatus_Icon_Font_Size: #{$fd-object-status-icon-text-font-size-large-inverted};
--fdObjectStatus_Height: #{$fd-object-status-height-large};

padding: $fd-object-status-padding-large-inverted;
line-height: $fd-object-status-height-large;
height: auto;
max-height: none;

.#{$block}__icon {
line-height: $fd-object-status-height-large;
.#{$block}__icon,
.#{$block}__text {
line-height: var(--fdObjectStatus_Height);
}

@include fd-object-status-icon-selector() {
font-size: $fd-object-status-icon-text-font-size-large-inverted;

// ICON ONLY MODE
@include fd-only-child() {
height: $fd-object-status-min-height-large-inverted-empty;
Expand Down
49 changes: 45 additions & 4 deletions packages/styles/stories/Components/object-status/object-status.stories.js
View file
Expand Up @@ -3,8 +3,8 @@ import '../../../src/icon.scss';
export default {
title: 'Components/Object Status',
parameters: {
description: `Object Status is a short text that represents the semantic status of an object. It has a semantic
color and an optional icon. Typically, the object status is used in the dynamic page header and as a status
description: `Object Status is a short text that represents the semantic status of an object. It has a semantic
color and an optional icon. Typically, the object status is used in the dynamic page header and as a status
attribute of a line item in a table. `,
tags: ['f3', 'a11y', 'theme']
}
Expand Down Expand Up @@ -207,7 +207,7 @@ export const ClickableObjectStatus = () => `<div class="fddocs-container">
ClickableObjectStatus.parameters = {
docs: {
description: {
story: `
story: `
If the object status is used as a link, a hover effect is shown on non-touch devices.
If the object status is shown using a combination of icon and text, there is no hover effect for the icon.
If Object Status has to be clicked/tabbed by the user add the \`fd-object-status--link\` modifier class.
Expand Down Expand Up @@ -301,6 +301,47 @@ export const Inverted = () => `<div class="fddocs-container">
<span class="fd-object-status__text">Inverted Neutral</span>
</a>
</div>
<h4>Large Inverted Object Status</h4>
<div class="fddocs-container" style="align-items: baseline;">
<span class="fd-object-status fd-object-status--negative fd-object-status--inverted fd-object-status--large">
<span class="fd-object-status__text">Inverted Negative</span>
</span>
<span class="fd-object-status fd-object-status--critical fd-object-status--inverted fd-object-status--large">
<span class="fd-object-status__text">Inverted Warning</span>
</span>
<span class="fd-object-status fd-object-status--positive fd-object-status--inverted fd-object-status--large">
<span class="fd-object-status__text">Inverted Success</span>
</span>
<span class="fd-object-status fd-object-status--informative fd-object-status--inverted fd-object-status--large">
<span class="fd-object-status__text">Inverted informative</span>
</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--large">
<span class="fd-object-status__text">Inverted Neutral</span>
</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--negative fd-object-status--large">
<i class="fd-object-status__icon sap-icon--message-error" role="presentation"></i>
</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--negative fd-object-status--large">
<i class="fd-object-status__icon sap-icon--message-error" role="presentation"></i>
<span class="fd-object-status__text">Negative</span>
</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--critical fd-object-status--large">
<i class="fd-object-status__icon sap-icon--message-warning" role="presentation"></i>
<span class="fd-object-status__text">Critical</span>
</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--positive fd-object-status--large">
<i class="fd-object-status__icon sap-icon--message-success" role="presentation"></i>
<span class="fd-object-status__text">Positive</span>
</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--informative fd-object-status--large">
<i class="fd-object-status__icon sap-icon--message-information" role="presentation"></i>
<span class="fd-object-status__text">Informative</span>
</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--large">
<span class="fd-object-status__text">Neutral</span>
</span>
</div>
`;
Inverted.parameters = {
docs: {
Expand Down Expand Up @@ -408,4 +449,4 @@ TruncateExample.parameters = {
`
}
}
};
};

0 comments on commit c16b9b9

Please sign in to comment.