diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx b/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx index 8e517c983e0..23ee617ee6a 100644 --- a/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx +++ b/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx @@ -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` } ]; diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.mdx b/packages/main/src/components/ObjectStatus/ObjectStatus.mdx index f667cc715f6..e8b6e582aab 100644 --- a/packages/main/src/components/ObjectStatus/ObjectStatus.mdx +++ b/packages/main/src/components/ObjectStatus/ObjectStatus.mdx @@ -34,9 +34,9 @@ import * as ComponentStories from './ObjectStatus.stories'; -## 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. diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.module.css b/packages/main/src/components/ObjectStatus/ObjectStatus.module.css index 744e4538ba2..80302e3f907 100644 --- a/packages/main/src/components/ObjectStatus/ObjectStatus.module.css +++ b/packages/main/src/components/ObjectStatus/ObjectStatus.module.css @@ -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); +} diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx b/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx index 224145f0baa..13bc62e0749 100644 --- a/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx +++ b/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx @@ -2,7 +2,12 @@ import type { Meta, StoryObj } from '@storybook/react'; import IconMode from '@ui5/webcomponents/dist/types/IconMode.js'; import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; import cancelIcon from '@ui5/webcomponents-icons/dist/sys-cancel.js'; -import { Icon, IndicationColor, Label } from '../..'; +import { ThemingParameters } from '@ui5/webcomponents-react-base'; +import { IndicationColor } from '../../enums/IndicationColor.js'; +import { Icon } from '../../webComponents/Icon/index.js'; +import { Label } from '../../webComponents/Label/index.js'; +import { Text } from '../../webComponents/Text/index.js'; +import type { ObjectStatusPropTypes } from './index.js'; import { ObjectStatus } from './index.js'; const meta = { @@ -63,9 +68,28 @@ export const WithIconOnly: Story = { args: { icon: , children: null, title: 'Cancel' } }; +const States = { ...ValueState, ...IndicationColor }; export const InvertedObjectStatus: Story = { - name: 'Inverted ObjectStatus', + name: 'All States', render() { + const renderStatuses = (interactive = false, inverted = false) => { + return Object.values(States).map((state: ObjectStatusPropTypes['state']) => { + const indicationNumber = parseInt(state.replace('Indication', ''), 10); + if (!inverted && !isNaN(indicationNumber) && indicationNumber > 10) { + return null; + } + return ( + + {state} + + ); + }); + }; return (
- - ValueState.None - - - ValueState.Positive - - - ValueState.Critical - - - ValueState.Negative - - - ValueState.Information - - - IndicationColor.Indication01 - - - IndicationColor.Indication02 - - - IndicationColor.Indication03 - - - IndicationColor.Indication04 - - - IndicationColor.Indication05 - - - IndicationColor.Indication06 - - - IndicationColor.Indication07 - - - IndicationColor.Indication08 - + {renderStatuses()} - - ValueState.None - - - ValueState.Positive - - - ValueState.Critical - - - ValueState.Negative - - - ValueState.Information - - - IndicationColor.Indication01 - - - IndicationColor.Indication02 - - - IndicationColor.Indication03 - - - IndicationColor.Indication04 - - - IndicationColor.Indication05 - - - IndicationColor.Indication06 - - - IndicationColor.Indication07 - - - IndicationColor.Indication08 - + {renderStatuses(true)} +
+ + Inverted + + + + {renderStatuses(false, true)} + + {renderStatuses(true, true)}
); } diff --git a/packages/main/src/components/ObjectStatus/index.tsx b/packages/main/src/components/ObjectStatus/index.tsx index ed081132e0b..1905e4d4033 100644 --- a/packages/main/src/components/ObjectStatus/index.tsx +++ b/packages/main/src/components/ObjectStatus/index.tsx @@ -71,6 +71,8 @@ export interface ObjectStatusPropTypes extends CommonProps { * * Since version 0.17.0 the state property also accepts values from enum `IndicationColor`. * + * __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. + * * @default `"None"` */ state?: ValueState | keyof typeof ValueState | IndicationColor | keyof typeof IndicationColor; @@ -112,7 +114,8 @@ const getStateSpecifics = (state, showDefaultIcon, userIcon, stateAnnouncementTe const renderDefaultIcon = showDefaultIcon && !icon; let invisibleText = stateAnnouncementText; if (!invisibleText && state.startsWith('Indication')) { - invisibleText = `${indicationColorText} ${state.substring(state.indexOf('0') + 1)}`; + const indicationNumber = parseInt(state.replace('Indication', ''), 10); + invisibleText = `${indicationColorText} ${indicationNumber}`; } if (!invisibleText || renderDefaultIcon) { switch (state) { diff --git a/packages/main/src/enums/IndicationColor.ts b/packages/main/src/enums/IndicationColor.ts index 74ea387a0e4..8c8740008fe 100644 --- a/packages/main/src/enums/IndicationColor.ts +++ b/packages/main/src/enums/IndicationColor.ts @@ -35,5 +35,53 @@ export enum IndicationColor { /** * Pink */ - Indication08 = 'Indication08' + Indication08 = 'Indication08', + /** + * Black/White + */ + Indication09 = 'Indication09', + /** + * Grey + */ + Indication10 = 'Indication10', + /** + * Dark Red (second color set) + */ + Indication11 = 'Indication11', + /** + * Red (second color set) + */ + Indication12 = 'Indication12', + /** + * Yellow (second color set) + */ + Indication13 = 'Indication13', + /** + * Green (second color set) + */ + Indication14 = 'Indication14', + /** + * Blue (second color set) + */ + Indication15 = 'Indication15', + /** + * Teal (second color set) + */ + Indication16 = 'Indication16', + /** + * Purple (second color set) + */ + Indication17 = 'Indication17', + /** + * Pink (second color set) + */ + Indication18 = 'Indication18', + /** + * Black/White (second color set) + */ + Indication19 = 'Indication19', + /** + * Grey (second color set) + */ + Indication20 = 'Indication20' }