Skip to content

Commit 5fc96da

Browse files
Lukas742Lukas742
authored
feat(ObjectStatus): add latest Indication states (#7120)
1 parent 8d652b4 commit 5fc96da

File tree

6 files changed

+335
-93
lines changed

6 files changed

+335
-93
lines changed

‎packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,40 @@ const statesWithCSSVars: {
166166
iconColor: ThemingParameters.sapIndicationColor_8_TextColor
167167
},
168168
hiddenText: `${INDICATION_COLOR.defaultText} 8`
169+
},
170+
{
171+
state: 'Indication09',
172+
color: ThemingParameters.sapIndicationColor_9,
173+
iconColor: ThemingParameters.sapIndicationColor_9,
174+
inverted: {
175+
color: ThemingParameters.sapIndicationColor_9_TextColor,
176+
backgroundColor: ThemingParameters.sapIndicationColor_9_Background,
177+
iconColor: ThemingParameters.sapIndicationColor_9_TextColor
178+
},
179+
hiddenText: `${INDICATION_COLOR.defaultText} 9`
180+
},
181+
{
182+
state: 'Indication10',
183+
color: ThemingParameters.sapIndicationColor_10,
184+
iconColor: ThemingParameters.sapIndicationColor_10,
185+
inverted: {
186+
color: ThemingParameters.sapIndicationColor_10_TextColor,
187+
backgroundColor: ThemingParameters.sapIndicationColor_10_Background,
188+
iconColor: ThemingParameters.sapIndicationColor_10_TextColor
189+
},
190+
hiddenText: `${INDICATION_COLOR.defaultText} 10`
191+
},
192+
{
193+
state: 'Indication11',
194+
// fallback to "None" colors for non-inverted indication colors > 10
195+
color: ThemingParameters.sapNeutralTextColor,
196+
iconColor: ThemingParameters.sapNeutralElementColor,
197+
inverted: {
198+
color: ThemingParameters.sapIndicationColor_1b_TextColor,
199+
backgroundColor: ThemingParameters.sapIndicationColor_1b_Background,
200+
iconColor: ThemingParameters.sapIndicationColor_1b_TextColor
201+
},
202+
hiddenText: `${INDICATION_COLOR.defaultText} 11`
169203
}
170204
];
171205

‎packages/main/src/components/ObjectStatus/ObjectStatus.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ import * as ComponentStories from './ObjectStatus.stories';
3434

3535
<Canvas of={ComponentStories.WithIconOnly} />
3636

37-
## Inverted Object Status
37+
## All ObjectStatus states
3838

39-
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.
39+
**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.
4040

4141
<Canvas of={ComponentStories.InvertedObjectStatus} />
4242

‎packages/main/src/components/ObjectStatus/ObjectStatus.module.css

Lines changed: 194 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,12 @@
1111
vertical-align: top;
1212
width: fit-content;
1313
text-shadow: var(--sapContent_TextShadow);
14+
15+
color: var(--sapNeutralTextColor);
16+
17+
[ui5-icon] {
18+
color: var(--sapNeutralElementColor);
19+
}
1420
}
1521

1622
.icon {
@@ -80,14 +86,6 @@
8086
}
8187
}
8288

83-
.none {
84-
color: var(--sapNeutralTextColor);
85-
86-
[ui5-icon] {
87-
color: var(--sapNeutralElementColor);
88-
}
89-
}
90-
9189
.indication01 {
9290
color: var(--sapIndicationColor_1);
9391

@@ -152,6 +150,22 @@
152150
}
153151
}
154152

153+
.indication09 {
154+
color: var(--sapIndicationColor_9);
155+
156+
[ui5-icon] {
157+
color: var(--sapIndicationColor_9);
158+
}
159+
}
160+
161+
.indication10 {
162+
color: var(--sapIndicationColor_10);
163+
164+
[ui5-icon] {
165+
color: var(--sapIndicationColor_10);
166+
}
167+
}
168+
155169
.active {
156170
cursor: pointer;
157171

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

493+
.objectStatus:is(.inverted.indication09) {
494+
--_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_9_TextColor);
495+
--_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_9_Background);
496+
--_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_9_BorderColor);
497+
498+
--_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_9_Hover_Background);
499+
500+
--_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_9_Active_TextColor);
501+
--_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_9_Active_Background);
502+
--_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_9_Active_BorderColor);
503+
}
504+
505+
.objectStatus:is(.inverted.indication10) {
506+
--_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_10_TextColor);
507+
--_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_10_Background);
508+
--_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_10_BorderColor);
509+
510+
--_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_10_Hover_Background);
511+
512+
--_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_10_Active_TextColor);
513+
--_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_10_Active_Background);
514+
--_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_10_Active_BorderColor);
515+
}
516+
.objectStatus:is(.inverted.indication11) {
517+
--_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_1b_TextColor);
518+
--_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_1b_Background);
519+
--_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_1b_BorderColor);
520+
521+
--_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_1b_Hover_Background);
522+
523+
--_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_1_Active_TextColor);
524+
--_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_1_Active_Background);
525+
--_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_1_Active_BorderColor);
526+
}
527+
528+
.objectStatus:is(.inverted.indication12) {
529+
--_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_2b_TextColor);
530+
--_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_2b_Background);
531+
--_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_2b_BorderColor);
532+
533+
--_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_2b_Hover_Background);
534+
535+
--_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_2_Active_TextColor);
536+
--_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_2_Active_Background);
537+
--_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_2_Active_BorderColor);
538+
}
539+
540+
.objectStatus:is(.inverted.indication13) {
541+
--_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_3b_TextColor);
542+
--_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_3b_Background);
543+
--_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_3b_BorderColor);
544+
545+
--_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_3b_Hover_Background);
546+
547+
--_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_3_Active_TextColor);
548+
--_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_3_Active_Background);
549+
--_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_3_Active_BorderColor);
550+
}
551+
552+
.objectStatus:is(.inverted.indication14) {
553+
--_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_4b_TextColor);
554+
--_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_4b_Background);
555+
--_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_4b_BorderColor);
556+
557+
--_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_4b_Hover_Background);
558+
559+
--_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_4_Active_TextColor);
560+
--_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_4_Active_Background);
561+
--_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_4_Active_BorderColor);
562+
}
563+
564+
.objectStatus:is(.inverted.indication15) {
565+
--_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_5b_TextColor);
566+
--_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_5b_Background);
567+
--_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_5b_BorderColor);
568+
569+
--_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_5b_Hover_Background);
570+
571+
--_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_5_Active_TextColor);
572+
--_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_5_Active_Background);
573+
--_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_5_Active_BorderColor);
574+
}
575+
576+
.objectStatus:is(.inverted.indication16) {
577+
--_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_6b_TextColor);
578+
--_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_6b_Background);
579+
--_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_6b_BorderColor);
580+
581+
--_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_6b_Hover_Background);
582+
583+
--_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_6_Active_TextColor);
584+
--_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_6_Active_Background);
585+
--_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_6_Active_BorderColor);
586+
}
587+
588+
.objectStatus:is(.inverted.indication17) {
589+
--_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_7b_TextColor);
590+
--_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_7b_Background);
591+
--_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_7b_BorderColor);
592+
593+
--_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_7b_Hover_Background);
594+
595+
--_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_7_Active_TextColor);
596+
--_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_7_Active_Background);
597+
--_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_7_Active_BorderColor);
598+
}
599+
600+
.objectStatus:is(.inverted.indication18) {
601+
--_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_8b_TextColor);
602+
--_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_8b_Background);
603+
--_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_8b_BorderColor);
604+
605+
--_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_8b_Hover_Background);
606+
607+
--_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_8_Active_TextColor);
608+
--_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_8_Active_Background);
609+
--_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_8_Active_BorderColor);
610+
}
611+
612+
.objectStatus:is(.inverted.indication19) {
613+
--_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_9b_TextColor);
614+
--_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_9b_Background);
615+
--_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_9b_BorderColor);
616+
617+
--_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_9b_Hover_Background);
618+
619+
--_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_9_Active_TextColor);
620+
--_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_9_Active_Background);
621+
--_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_9_Active_BorderColor);
622+
}
623+
624+
.objectStatus:is(.inverted.indication20) {
625+
--_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_10b_TextColor);
626+
--_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_10b_Background);
627+
--_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_10b_BorderColor);
628+
629+
--_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_10b_Hover_Background);
630+
631+
--_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_10_Active_TextColor);
632+
--_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_10_Active_Background);
633+
--_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_10_Active_BorderColor);
634+
}
635+
479636
.objectStatus:is(.inverted):is(
480637
.indication01,
481638
.indication02,
@@ -484,7 +641,19 @@
484641
.indication05,
485642
.indication06,
486643
.indication07,
487-
.indication08
644+
.indication08,
645+
.indication09,
646+
.indication10,
647+
.indication11,
648+
.indication12,
649+
.indication13,
650+
.indication14,
651+
.indication15,
652+
.indication16,
653+
.indication17,
654+
.indication18,
655+
.indication19,
656+
.indication20
488657
) {
489658
text-shadow: var(--sapContent_ContrastTextShadow);
490659
color: var(--_ui5wcr-ObjectStatus-inverted-indication-text-color);
@@ -510,3 +679,19 @@
510679
}
511680
}
512681
}
682+
683+
.objectStatus:is(.inverted):is(
684+
.indication11,
685+
.indication12,
686+
.indication13,
687+
.indication14,
688+
.indication15,
689+
.indication16,
690+
.indication17,
691+
.indication18,
692+
.indication19,
693+
.indication20
694+
/* increase specificity */
695+
):not(#noop) {
696+
text-shadow: var(--sapContent_TextShadow);
697+
}

0 commit comments

Comments
 (0)