Skip to content

feat(ObjectStatus): add latest Indication states #7120

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 7, 2025
+335 −93
Merged

feat(ObjectStatus): add latest Indication states #7120

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx
View file
Original file line number Diff line number Diff line change
@@ -166,6 +166,40 @@ const statesWithCSSVars: {
iconColor: ThemingParameters.sapIndicationColor_8_TextColor
},
hiddenText: `${INDICATION_COLOR.defaultText} 8`
},
{
state: 'Indication09',
color: ThemingParameters.sapIndicationColor_9,
iconColor: ThemingParameters.sapIndicationColor_9,
inverted: {
color: ThemingParameters.sapIndicationColor_9_TextColor,
backgroundColor: ThemingParameters.sapIndicationColor_9_Background,
iconColor: ThemingParameters.sapIndicationColor_9_TextColor
},
hiddenText: `${INDICATION_COLOR.defaultText} 9`
},
{
state: 'Indication10',
color: ThemingParameters.sapIndicationColor_10,
iconColor: ThemingParameters.sapIndicationColor_10,
inverted: {
color: ThemingParameters.sapIndicationColor_10_TextColor,
backgroundColor: ThemingParameters.sapIndicationColor_10_Background,
iconColor: ThemingParameters.sapIndicationColor_10_TextColor
},
hiddenText: `${INDICATION_COLOR.defaultText} 10`
},
{
state: 'Indication11',
// fallback to "None" colors for non-inverted indication colors > 10
color: ThemingParameters.sapNeutralTextColor,
iconColor: ThemingParameters.sapNeutralElementColor,
inverted: {
color: ThemingParameters.sapIndicationColor_1b_TextColor,
backgroundColor: ThemingParameters.sapIndicationColor_1b_Background,
iconColor: ThemingParameters.sapIndicationColor_1b_TextColor
},
hiddenText: `${INDICATION_COLOR.defaultText} 11`
}
];

4 changes: 2 additions & 2 deletions packages/main/src/components/ObjectStatus/ObjectStatus.mdx
View file
Original file line number Diff line number Diff line change
@@ -34,9 +34,9 @@ import * as ComponentStories from './ObjectStatus.stories';

<Canvas of={ComponentStories.WithIconOnly} />

## Inverted Object Status
## All ObjectStatus states

The Object Status has an inverted visualisation, which is used in cases when the information is crucial for the user’s actions and needs to stand out visually.
**Note:** Only the `inverted` `ObjectStatus` supports `IndicationColor`s 11-20. For non-inverted `ObjectStatus`, these colors default to the `"None"` `state` color and should **not** be used.

<Canvas of={ComponentStories.InvertedObjectStatus} />

203 changes: 194 additions & 9 deletions packages/main/src/components/ObjectStatus/ObjectStatus.module.css
View file
Original file line number Diff line number Diff line change
@@ -11,6 +11,12 @@
vertical-align: top;
width: fit-content;
text-shadow: var(--sapContent_TextShadow);

color: var(--sapNeutralTextColor);

[ui5-icon] {
color: var(--sapNeutralElementColor);
}
}

.icon {
@@ -80,14 +86,6 @@
}
}

.none {
color: var(--sapNeutralTextColor);

[ui5-icon] {
color: var(--sapNeutralElementColor);
}
}

.indication01 {
color: var(--sapIndicationColor_1);

@@ -152,6 +150,22 @@
}
}

.indication09 {
color: var(--sapIndicationColor_9);

[ui5-icon] {
color: var(--sapIndicationColor_9);
}
}

.indication10 {
color: var(--sapIndicationColor_10);

[ui5-icon] {
color: var(--sapIndicationColor_10);
}
}

.active {
cursor: pointer;

@@ -476,6 +490,149 @@
--_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_8_Active_BorderColor);
}

.objectStatus:is(.inverted.indication09) {
--_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_9_TextColor);
--_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_9_Background);
--_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_9_BorderColor);

--_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_9_Hover_Background);

--_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_9_Active_TextColor);
--_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_9_Active_Background);
--_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_9_Active_BorderColor);
}

.objectStatus:is(.inverted.indication10) {
--_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_10_TextColor);
--_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_10_Background);
--_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_10_BorderColor);

--_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_10_Hover_Background);

--_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_10_Active_TextColor);
--_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_10_Active_Background);
--_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_10_Active_BorderColor);
}
.objectStatus:is(.inverted.indication11) {
--_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_1b_TextColor);
--_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_1b_Background);
--_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_1b_BorderColor);

--_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_1b_Hover_Background);

--_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_1_Active_TextColor);
--_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_1_Active_Background);
--_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_1_Active_BorderColor);
}

.objectStatus:is(.inverted.indication12) {
--_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_2b_TextColor);
--_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_2b_Background);
--_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_2b_BorderColor);

--_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_2b_Hover_Background);

--_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_2_Active_TextColor);
--_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_2_Active_Background);
--_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_2_Active_BorderColor);
}

.objectStatus:is(.inverted.indication13) {
--_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_3b_TextColor);
--_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_3b_Background);
--_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_3b_BorderColor);

--_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_3b_Hover_Background);

--_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_3_Active_TextColor);
--_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_3_Active_Background);
--_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_3_Active_BorderColor);
}

.objectStatus:is(.inverted.indication14) {
--_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_4b_TextColor);
--_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_4b_Background);
--_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_4b_BorderColor);

--_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_4b_Hover_Background);

--_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_4_Active_TextColor);
--_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_4_Active_Background);
--_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_4_Active_BorderColor);
}

.objectStatus:is(.inverted.indication15) {
--_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_5b_TextColor);
--_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_5b_Background);
--_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_5b_BorderColor);

--_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_5b_Hover_Background);

--_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_5_Active_TextColor);
--_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_5_Active_Background);
--_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_5_Active_BorderColor);
}

.objectStatus:is(.inverted.indication16) {
--_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_6b_TextColor);
--_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_6b_Background);
--_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_6b_BorderColor);

--_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_6b_Hover_Background);

--_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_6_Active_TextColor);
--_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_6_Active_Background);
--_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_6_Active_BorderColor);
}

.objectStatus:is(.inverted.indication17) {
--_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_7b_TextColor);
--_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_7b_Background);
--_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_7b_BorderColor);

--_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_7b_Hover_Background);

--_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_7_Active_TextColor);
--_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_7_Active_Background);
--_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_7_Active_BorderColor);
}

.objectStatus:is(.inverted.indication18) {
--_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_8b_TextColor);
--_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_8b_Background);
--_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_8b_BorderColor);

--_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_8b_Hover_Background);

--_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_8_Active_TextColor);
--_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_8_Active_Background);
--_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_8_Active_BorderColor);
}

.objectStatus:is(.inverted.indication19) {
--_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_9b_TextColor);
--_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_9b_Background);
--_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_9b_BorderColor);

--_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_9b_Hover_Background);

--_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_9_Active_TextColor);
--_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_9_Active_Background);
--_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_9_Active_BorderColor);
}

.objectStatus:is(.inverted.indication20) {
--_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_10b_TextColor);
--_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_10b_Background);
--_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_10b_BorderColor);

--_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_10b_Hover_Background);

--_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_10_Active_TextColor);
--_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_10_Active_Background);
--_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_10_Active_BorderColor);
}

.objectStatus:is(.inverted):is(
.indication01,
.indication02,
@@ -484,7 +641,19 @@
.indication05,
.indication06,
.indication07,
.indication08
.indication08,
.indication09,
.indication10,
.indication11,
.indication12,
.indication13,
.indication14,
.indication15,
.indication16,
.indication17,
.indication18,
.indication19,
.indication20
) {
text-shadow: var(--sapContent_ContrastTextShadow);
color: var(--_ui5wcr-ObjectStatus-inverted-indication-text-color);
@@ -510,3 +679,19 @@
}
}
}

.objectStatus:is(.inverted):is(
.indication11,
.indication12,
.indication13,
.indication14,
.indication15,
.indication16,
.indication17,
.indication18,
.indication19,
.indication20
/* increase specificity */
):not(#noop) {
text-shadow: var(--sapContent_TextShadow);
}
Loading
Loading