Skip to content

Commit 2de9679

Browse files
Lukas742Lukas742
authored
feat(ObjectStatus): add large prop & update design to latest specs (#4935)
Fixes #4934 FIxes #5079 Closes #5035 Need to wait for `theming-base-content` version to be updated.
1 parent 944b86d commit 2de9679

File tree

4 files changed

+173
-20
lines changed

4 files changed

+173
-20
lines changed

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

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@ const statesWithCSSVars: {
3737
color: ThemingParameters.sapNeutralTextColor,
3838
iconColor: ThemingParameters.sapNeutralElementColor,
3939
inverted: {
40-
color: ThemingParameters.sapButton_Neutral_TextColor,
41-
backgroundColor: ThemingParameters.sapButton_Neutral_Background,
40+
color: ThemingParameters.sapTextColor,
41+
backgroundColor: ThemingParameters.sapNeutralBackground,
4242
iconColor: ThemingParameters.sapButton_Neutral_TextColor
4343
},
4444
hiddenText: undefined
@@ -264,5 +264,25 @@ describe('ObjectStatus', () => {
264264
cy.findByText('Custom Text').should('exist').and('not.be.visible');
265265
});
266266

267+
it('large', () => {
268+
cy.mount(
269+
<ObjectStatus large data-testid="os" state={ValueState.Error} showDefaultIcon>
270+
Content
271+
</ObjectStatus>
272+
);
273+
cy.findByTestId('os').should('have.css', 'font-size', '24px');
274+
cy.get('[ui5-icon]').should('have.css', 'height', '24px');
275+
cy.mount(
276+
<ObjectStatus large data-testid="os" state={ValueState.Error} showDefaultIcon inverted>
277+
Content
278+
</ObjectStatus>
279+
);
280+
cy.findByTestId('os').should('have.css', 'font-size', '20px');
281+
cy.get('[ui5-icon]').should('have.css', 'height', '20px');
282+
cy.mount(<ObjectStatus large data-testid="os" state={ValueState.Error} showDefaultIcon inverted />);
283+
cy.findByTestId('os').should('have.css', 'font-size', '20px');
284+
cy.get('[ui5-icon]').should('have.css', 'height', '24px');
285+
});
286+
267287
cypressPassThroughTestsFactory(ObjectStatus);
268288
});

‎packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts

Lines changed: 118 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,47 @@
11
import { ThemingParameters } from '@ui5/webcomponents-react-base';
22

3-
const createInvertedValueStateStyles = (baseColor: string) => ({
4-
textShadow: ThemingParameters.sapContent_ContrastTextShadow,
3+
const createInvertedValueStateStyles = (baseColor: string, lightColor = false) => ({
4+
textShadow: lightColor ? ThemingParameters.sapContent_TextShadow : ThemingParameters.sapContent_ContrastTextShadow,
55
background: ThemingParameters[`${baseColor}_Background`],
66
color: ThemingParameters[`${baseColor}_TextColor`],
7+
border: `0.0625rem solid ${ThemingParameters[`${baseColor}_BorderColor`]}`,
78
'& [ui5-icon]': {
89
color: ThemingParameters[`${baseColor}_TextColor`]
910
},
1011
'&$active:hover': {
1112
background: ThemingParameters[`${baseColor}_Hover_Background`],
1213
color: ThemingParameters[`${baseColor}_Hover_TextColor`],
14+
border: `0.0625rem solid ${ThemingParameters[`${baseColor}_Hover_BorderColor`]}`,
1315
'& [ui5-icon]': {
1416
color: ThemingParameters[`${baseColor}_Hover_TextColor`]
1517
}
1618
},
1719
'&$active:active': {
20+
textShadow: ThemingParameters.sapContent_TextShadow,
1821
background: ThemingParameters[`${baseColor}_Active_Background`],
19-
color: ThemingParameters[`${baseColor}_Active_TextColor`],
20-
'& [ui5-icon]': {
21-
color: ThemingParameters[`${baseColor}_Active_TextColor`]
22-
}
22+
border: `0.0625rem solid ${ThemingParameters[`${baseColor}_Active_BorderColor`]}`
2323
}
2424
});
2525

2626
const createInvertedIndicationStyles = (baseColor: string) => ({
2727
textShadow: ThemingParameters.sapContent_ContrastTextShadow,
2828
color: ThemingParameters[`${baseColor}_TextColor`],
29-
backgroundColor: ThemingParameters[`${baseColor}`],
29+
backgroundColor: ThemingParameters[`${baseColor}_Background`],
30+
border: `0.0625rem solid ${ThemingParameters[`${baseColor}_BorderColor`]}`,
3031
'& [ui5-icon]': {
3132
color: ThemingParameters[`${baseColor}_TextColor`]
3233
},
3334
'&$active:hover': {
3435
background: ThemingParameters[`${baseColor}_Hover_Background`]
3536
},
3637
'&$active:active': {
37-
background: ThemingParameters[`${baseColor}_Active_Background`]
38+
textShadow: ThemingParameters.sapContent_TextShadow,
39+
background: ThemingParameters[`${baseColor}_Active_Background`],
40+
border: `0.0625rem solid ${ThemingParameters[`${baseColor}_Active_BorderColor`]}`,
41+
color: ThemingParameters[`${baseColor}_Active_TextColor`],
42+
'& [ui5-icon]': {
43+
color: ThemingParameters[`${baseColor}_Active_TextColor`]
44+
}
3845
}
3946
});
4047

@@ -82,10 +89,10 @@ const styles = {
8289
lineHeight: '1rem',
8390
verticalAlign: 'top',
8491
paddingInlineEnd: '0.25rem',
85-
8692
'&[data-icon-only="true"]': {
8793
paddingInlineEnd: 0
88-
}
94+
},
95+
textShadow: ThemingParameters.sapContent_TextShadow
8996
},
9097

9198
text: {
@@ -195,25 +202,81 @@ const styles = {
195202
borderRadius: ThemingParameters.sapButton_BorderCornerRadius,
196203
fontFamily: ThemingParameters.sapFontBoldFamily,
197204
fontSize: ThemingParameters.sapFontSmallSize,
198-
'& [ui5-icon]': {
199-
paddingBlockStart: '0.125rem',
205+
'& $icon': {
206+
verticalAlign: 'text-bottom'
207+
},
208+
'& [ui5-icon], $icon:not([data-icon-only="true"])': {
200209
width: ThemingParameters.sapFontSmallSize,
201210
height: ThemingParameters.sapFontSmallSize
202211
},
203212
'&[data-icon-only="true"]': {
204213
display: 'flex',
205214
alignItems: 'center',
206215
justifyContent: 'center',
207-
padding: '0.1875rem 0.313rem'
216+
padding: '0.1875rem 0.313rem',
217+
width: '1rem',
218+
height: '1rem',
219+
'& [ui5-icon]': {
220+
width: '1rem',
221+
height: '1rem'
222+
}
208223
},
209224
'$active&:focus': {
210225
outline: `${ThemingParameters.sapContent_FocusColor} ${ThemingParameters.sapContent_FocusStyle} ${ThemingParameters.sapContent_FocusWidth}`
211226
},
212-
'&$error': createInvertedValueStateStyles('sapButton_Negative'),
213-
'&$warning': createInvertedValueStateStyles('sapButton_Critical'),
214-
'&$success': createInvertedValueStateStyles('sapButton_Success'),
215-
'&$information': createInvertedValueStateStyles('sapButton_Information'),
216-
'&$none': createInvertedValueStateStyles('sapButton_Neutral'),
227+
'&$error': {
228+
...createInvertedValueStateStyles('sapButton_Negative'),
229+
'&$active:active': {
230+
...createInvertedValueStateStyles('sapButton_Negative', true)['&$active:active'],
231+
color: ThemingParameters.sapButton_Reject_Selected_TextColor,
232+
'& [ui5-icon]': {
233+
color: ThemingParameters.sapButton_Reject_Selected_TextColor
234+
}
235+
}
236+
},
237+
'&$warning': {
238+
...createInvertedValueStateStyles('sapButton_Critical'),
239+
'&$active:active': {
240+
...createInvertedValueStateStyles('sapButton_Critical', true)['&$active:active'],
241+
color: ThemingParameters.sapButton_Attention_Selected_TextColor,
242+
'& [ui5-icon]': {
243+
color: ThemingParameters.sapButton_Attention_Selected_TextColor
244+
}
245+
}
246+
},
247+
'&$success': {
248+
...createInvertedValueStateStyles('sapButton_Success'),
249+
'&$active:active': {
250+
...createInvertedValueStateStyles('sapButton_Success', true)['&$active:active'],
251+
color: ThemingParameters.sapButton_Accept_Selected_TextColor,
252+
'& [ui5-icon]': {
253+
color: ThemingParameters.sapButton_Accept_Selected_TextColor
254+
}
255+
}
256+
},
257+
'&$information': {
258+
...createInvertedValueStateStyles('sapButton_Information', true),
259+
'&$active:active': {
260+
...createInvertedValueStateStyles('sapButton_Information', true)['&$active:active'],
261+
color: ThemingParameters.sapButton_Selected_TextColor,
262+
'& [ui5-icon]': {
263+
color: ThemingParameters.sapButton_Selected_TextColor
264+
}
265+
}
266+
},
267+
'&$none': {
268+
...createInvertedValueStateStyles('sapButton_Neutral', true),
269+
background: ThemingParameters.sapNeutralBackground,
270+
color: ThemingParameters.sapTextColor,
271+
border: ThemingParameters.sapNeutralBorderColor,
272+
'&$active:active': {
273+
...createInvertedValueStateStyles('sapButton_Neutral', true)['&$active:active'],
274+
color: ThemingParameters.sapButton_Active_TextColor,
275+
'& [ui5-icon]': {
276+
color: ThemingParameters.sapButton_Active_TextColor
277+
}
278+
}
279+
},
217280
'&$indication01': createInvertedIndicationStyles('sapIndicationColor_1'),
218281
'&$indication02': createInvertedIndicationStyles('sapIndicationColor_2'),
219282
'&$indication03': createInvertedIndicationStyles('sapIndicationColor_3'),
@@ -222,6 +285,43 @@ const styles = {
222285
'&$indication06': createInvertedIndicationStyles('sapIndicationColor_6'),
223286
'&$indication07': createInvertedIndicationStyles('sapIndicationColor_7'),
224287
'&$indication08': createInvertedIndicationStyles('sapIndicationColor_8')
288+
},
289+
large: {
290+
fontSize: '1.5rem',
291+
fontFamily: ThemingParameters.sapFontLightFamily,
292+
'& [ui5-icon], $icon': {
293+
height: '1.5rem',
294+
width: '1.5rem'
295+
},
296+
'& $icon': {
297+
verticalAlign: 'middle'
298+
},
299+
'& $text': {
300+
lineHeight: 'normal',
301+
verticalAlign: 'middle'
302+
},
303+
'&$inverted': {
304+
fontSize: '1.25rem',
305+
fontFamily: ThemingParameters.sapFontSemiboldDuplexFamily,
306+
padding: '0.125rem 0.25rem',
307+
'& [ui5-icon], $icon': {
308+
height: '1.25rem',
309+
width: '1.25rem'
310+
},
311+
'&[data-icon-only="true"]': {
312+
padding: '0 0.25rem',
313+
minWidth: '1.75rem',
314+
height: 'auto'
315+
},
316+
'& [data-icon-only="true"]': {
317+
height: '1.5rem',
318+
width: '1.5rem',
319+
'& [ui5-icon]': {
320+
height: '1.5rem',
321+
width: '1.5rem'
322+
}
323+
}
324+
}
225325
}
226326
};
227327

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,13 @@ export interface ObjectStatusPropTypes extends CommonProps {
4545
*/
4646
inverted?: boolean;
4747

48+
/**
49+
* Defines if the component should be rendered in large design.
50+
*
51+
* @since 1.21.0
52+
*/
53+
large?: boolean;
54+
4855
/**
4956
* Defines the text of the `ObjectStatus`.<br />
5057
* __Note:__ Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
@@ -152,6 +159,7 @@ const ObjectStatus = forwardRef<HTMLDivElement, ObjectStatusPropTypes>((props, r
152159
onClick,
153160
emptyIndicator,
154161
stateAnnouncementText,
162+
large,
155163
...rest
156164
} = props;
157165
const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
@@ -190,6 +198,7 @@ const ObjectStatus = forwardRef<HTMLDivElement, ObjectStatusPropTypes>((props, r
190198
classes[`${state as string}`.toLowerCase()],
191199
active && classes.active,
192200
inverted && !showEmptyIndicator && classes.inverted,
201+
large && classes.large,
193202
className
194203
);
195204

‎packages/main/src/enums/IndicationColor.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,36 @@
44
* In contrast to the `ValueState`, the semantic meaning must be defined by the application.
55
*/
66
export enum IndicationColor {
7+
/**
8+
* Dark Red
9+
*/
710
Indication01 = 'Indication01',
11+
/**
12+
* Red
13+
*/
814
Indication02 = 'Indication02',
15+
/**
16+
* Yellow
17+
*/
918
Indication03 = 'Indication03',
19+
/**
20+
* Green
21+
*/
1022
Indication04 = 'Indication04',
23+
/**
24+
* Blue
25+
*/
1126
Indication05 = 'Indication05',
27+
/**
28+
* Teal
29+
*/
1230
Indication06 = 'Indication06',
31+
/**
32+
* Purple
33+
*/
1334
Indication07 = 'Indication07',
35+
/**
36+
* Pink
37+
*/
1438
Indication08 = 'Indication08'
1539
}

0 commit comments

Comments
 (0)