Skip to content

Commit 16b347c

Browse files
Lukas742Lukas742
committed
feat(ObjectStatus): simplify active state styling in lists & tables
1 parent 4d8bfb3 commit 16b347c

File tree

4 files changed

+199
-62
lines changed

4 files changed

+199
-62
lines changed

‎.storybook/preview-head.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,14 @@
181181
min-height: 20px;
182182
height: auto;
183183
}
184+
185+
.interactive-table-row:active .object-status,
186+
.interactive-analytical-table [role='row']:active .object-status,
187+
.interactive-li[active] .object-status {
188+
--ui5wcr-object-status-icon-color: var(--sapList_Active_TextColor);
189+
color: var(--sapList_Active_TextColor);
190+
text-shadow: none;
191+
}
184192
</style>
185193
<script data-ui5-config type="application/json">
186194
{

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

Lines changed: 99 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,22 +22,117 @@ import * as ComponentStories from './ObjectStatus.stories';
2222

2323
<br />
2424

25-
## ObjectStatus with default icons
25+
## ObjectStatus With Default Icons
2626

2727
<Canvas of={ComponentStories.WithDefaultIcons} />
2828

29-
## ObjectStatus with custom Icon
29+
## ObjectStatus With Custom Icon
3030

3131
<Canvas of={ComponentStories.WithCustomIcon} />
3232

33-
## ObjectStatus with Icon only
33+
## ObjectStatus With Icon Only
3434

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

37-
## All ObjectStatus states
37+
## All ObjectStatus States
3838

3939
**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

43+
## ObjectStatus in Interactive Lists or Tables
44+
45+
**Applicable since v2.17.0**
46+
47+
When used in interactive lists or tables, you can override the text and icon `color` and `text-shadow` to comply with design specs.
48+
49+
```css
50+
.object-status {
51+
--ui5wcr-object-status-icon-color: var(--sapList_Active_TextColor);
52+
color: var(--sapList_Active_TextColor);
53+
text-shadow: none;
54+
}
55+
```
56+
57+
<Canvas of={ComponentStories.InListOrTable} />
58+
59+
<details>
60+
61+
<summary>Show Static Code</summary>
62+
63+
```css
64+
.interactive-table-row:active .object-status,
65+
.interactive-analytical-table [role='row']:active .object-status,
66+
.interactive-li[active] .object-status {
67+
--ui5wcr-object-status-icon-color: var(--sapList_Active_TextColor);
68+
color: var(--sapList_Active_TextColor);
69+
text-shadow: none;
70+
}
71+
```
72+
73+
```tsx
74+
function ObjectStatusInListOrTable(objectStatusProps: ObjectStatusPropTypes) {
75+
const atCols: AnalyticalTableColumnDefinition[] = useMemo(
76+
() => [
77+
{
78+
accessor: 'os1',
79+
Header: 'ObjectStatus (controllable)',
80+
Cell: () => <ObjectStatus {...objectStatusProps} className={'object-status'} />,
81+
},
82+
{
83+
accessor: 'os2',
84+
Header: 'ObjectStatus ("Negative")',
85+
Cell: () => <ObjectStatus {...objectStatusProps} className={'object-status'} state={'Negative'} />,
86+
},
87+
],
88+
[objectStatusProps],
89+
);
90+
return (
91+
<>
92+
Table
93+
<Table
94+
headerRow={
95+
<TableHeaderRow>
96+
<TableHeaderCell>ObjectStatus (controllable)</TableHeaderCell>
97+
<TableHeaderCell>ObjectStatus (&#34;Negative&#34;)</TableHeaderCell>
98+
</TableHeaderRow>
99+
}
100+
features={<TableSelectionSingle behavior={'RowOnly'} />}
101+
>
102+
<TableRow rowKey={'0'} className={'interactive-table-row'}>
103+
<TableCell>
104+
<ObjectStatus {...objectStatusProps} className={'object-status'} />
105+
</TableCell>
106+
<TableCell>
107+
<ObjectStatus {...objectStatusProps} className={'object-status'} state={'Negative'} />
108+
</TableCell>
109+
</TableRow>
110+
</Table>
111+
<hr />
112+
List
113+
<List selectionMode="Single">
114+
<ListItemCustom className={'interactive-li'}>
115+
<ObjectStatus {...objectStatusProps} className={'object-status'} />
116+
</ListItemCustom>
117+
</List>
118+
<hr />
119+
AnalyticalTable
120+
<AnalyticalTable
121+
data={atData}
122+
columns={atCols}
123+
minRows={1}
124+
selectionMode={'Single'}
125+
selectionBehavior={'RowOnly'}
126+
className="interactive-analytical-table"
127+
/>
128+
</>
129+
);
130+
}
131+
```
132+
133+
</details>
134+
135+
<br />
136+
<br />
137+
43138
<Footer />

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

Lines changed: 16 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
}
44

55
.objectStatus {
6+
--ui5wcr-object-status-icon-color: var(--sapNeutralElementColor);
67
--_ui5wcr-ObjectStatus-focs-outline: 0.125rem var(--sapContent_FocusColor);
78
--_ui5wcr-ObjectStatus-focs-background: var(--sapContent_FocusColor);
89

@@ -18,7 +19,7 @@
1819
color: var(--sapNeutralTextColor);
1920

2021
[ui5-icon] {
21-
color: var(--sapNeutralElementColor);
22+
color: var(--ui5wcr-object-status-icon-color);
2223
}
2324
}
2425

@@ -38,7 +39,6 @@
3839
line-height: 1rem;
3940
vertical-align: top;
4041
padding-inline-end: 0.25rem;
41-
text-shadow: var(--sapContent_TextShadow);
4242

4343
&[data-icon-only='true'] {
4444
padding-inline-end: 0;
@@ -66,115 +66,73 @@
6666
}
6767

6868
.positive {
69+
--ui5wcr-object-status-icon-color: var(--sapPositiveElementColor);
6970
color: var(--sapPositiveTextColor);
70-
71-
[ui5-icon] {
72-
color: var(--sapPositiveElementColor);
73-
}
7471
}
7572

7673
.critical {
74+
--ui5wcr-object-status-icon-color: var(--sapCriticalElementColor);
7775
color: var(--sapCriticalTextColor);
78-
79-
[ui5-icon] {
80-
color: var(--sapCriticalElementColor);
81-
}
8276
}
8377

8478
.negative {
79+
--ui5wcr-object-status-icon-color: var(--sapNegativeElementColor);
8580
color: var(--sapNegativeTextColor);
86-
87-
[ui5-icon] {
88-
color: var(--sapNegativeElementColor);
89-
}
9081
}
9182

9283
.information {
84+
--ui5wcr-object-status-icon-color: var(--sapInformativeElementColor);
9385
color: var(--sapInformativeTextColor);
94-
95-
[ui5-icon] {
96-
color: var(--sapInformativeElementColor);
97-
}
9886
}
9987

10088
.indication01 {
89+
--ui5wcr-object-status-icon-color: var(--sapIndicationColor_1);
10190
color: var(--sapIndicationColor_1);
102-
103-
[ui5-icon] {
104-
color: var(--sapIndicationColor_1);
105-
}
10691
}
10792

10893
.indication02 {
94+
--ui5wcr-object-status-icon-color: var(--sapIndicationColor_2);
10995
color: var(--sapIndicationColor_2);
110-
111-
[ui5-icon] {
112-
color: var(--sapIndicationColor_2);
113-
}
11496
}
11597

11698
.indication03 {
99+
--ui5wcr-object-status-icon-color: var(--sapIndicationColor_3);
117100
color: var(--sapIndicationColor_3);
118-
119-
[ui5-icon] {
120-
color: var(--sapIndicationColor_3);
121-
}
122101
}
123102

124103
.indication04 {
104+
--ui5wcr-object-status-icon-color: var(--sapIndicationColor_4);
125105
color: var(--sapIndicationColor_4);
126-
127-
[ui5-icon] {
128-
color: var(--sapIndicationColor_4);
129-
}
130106
}
131107

132108
.indication05 {
109+
--ui5wcr-object-status-icon-color: var(--sapIndicationColor_5);
133110
color: var(--sapIndicationColor_5);
134-
135-
[ui5-icon] {
136-
color: var(--sapIndicationColor_5);
137-
}
138111
}
139112

140113
.indication06 {
114+
--ui5wcr-object-status-icon-color: var(--sapIndicationColor_6);
141115
color: var(--sapIndicationColor_6);
142-
143-
[ui5-icon] {
144-
color: var(--sapIndicationColor_6);
145-
}
146116
}
147117

148118
.indication07 {
119+
--ui5wcr-object-status-icon-color: var(--sapIndicationColor_7);
149120
color: var(--sapIndicationColor_7);
150-
151-
[ui5-icon] {
152-
color: var(--sapIndicationColor_7);
153-
}
154121
}
155122

156123
.indication08 {
124+
--ui5wcr-object-status-icon-color: var(--sapIndicationColor_8);
157125
color: var(--sapIndicationColor_8);
158-
159-
[ui5-icon] {
160-
color: var(--sapIndicationColor_8);
161-
}
162126
}
163127

164128
.indication09 {
129+
--ui5wcr-object-status-icon-color: var(--sapIndicationColor_9);
165130
color: var(--sapIndicationColor_9);
166-
167-
[ui5-icon] {
168-
color: var(--sapIndicationColor_9);
169-
}
170131
}
171132

172133
.indication10 {
134+
--ui5wcr-object-status-icon-color: var(--sapIndicationColor_10);
173135
color: var(--sapIndicationColor_10);
174-
175-
[ui5-icon] {
176-
color: var(--sapIndicationColor_10);
177-
}
178136
}
179137

180138
.active {

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

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,23 @@ import IconMode from '@ui5/webcomponents/dist/types/IconMode.js';
33
import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
44
import cancelIcon from '@ui5/webcomponents-icons/dist/sys-cancel.js';
55
import { ThemingParameters } from '@ui5/webcomponents-react-base';
6+
import { useMemo } from 'react';
67
import { IndicationColor } from '../../enums/IndicationColor.js';
78
import { Icon } from '../../webComponents/Icon/index.js';
89
import { Label } from '../../webComponents/Label/index.js';
10+
import { List } from '../../webComponents/List/index.js';
11+
import { ListItemCustom } from '../../webComponents/ListItemCustom/index.js';
12+
import { Table } from '../../webComponents/Table/index.js';
13+
import { TableCell } from '../../webComponents/TableCell/index.js';
14+
import { TableHeaderCell } from '../../webComponents/TableHeaderCell/index.js';
15+
import { TableHeaderRow } from '../../webComponents/TableHeaderRow/index.js';
16+
import { TableRow } from '../../webComponents/TableRow/index.js';
17+
import { TableSelectionSingle } from '../../webComponents/TableSelectionSingle/index.js';
918
import { Text } from '../../webComponents/Text/index.js';
19+
import { Tree } from '../../webComponents/Tree/index.js';
20+
import { TreeItemCustom } from '../../webComponents/TreeItemCustom/index.js';
21+
import type { AnalyticalTableColumnDefinition } from '../AnalyticalTable/index.js';
22+
import { AnalyticalTable } from '../AnalyticalTable/index.js';
1023
import type { ObjectStatusPropTypes } from './index.js';
1124
import { ObjectStatus } from './index.js';
1225

@@ -135,3 +148,66 @@ export const InvertedObjectStatus: Story = {
135148
);
136149
},
137150
};
151+
152+
const atData = [{ os1: 'ObjectStatus', os2: 'ObjectStatus' }];
153+
154+
export const InListOrTable: Story = {
155+
args: { state: 'Positive' },
156+
render(args) {
157+
const atCols: AnalyticalTableColumnDefinition[] = useMemo(
158+
() => [
159+
{
160+
accessor: 'os1',
161+
Header: 'ObjectStatus (controllable)',
162+
Cell: () => <ObjectStatus {...args} className={'object-status'} />,
163+
},
164+
{
165+
accessor: 'os2',
166+
Header: 'ObjectStatus ("Negative")',
167+
Cell: () => <ObjectStatus {...args} className={'object-status'} state={'Negative'} />,
168+
},
169+
],
170+
[args],
171+
);
172+
return (
173+
<>
174+
Table
175+
<Table
176+
headerRow={
177+
<TableHeaderRow>
178+
<TableHeaderCell>ObjectStatus (controllable)</TableHeaderCell>
179+
<TableHeaderCell>ObjectStatus ("Negative")</TableHeaderCell>
180+
</TableHeaderRow>
181+
}
182+
features={<TableSelectionSingle behavior={'RowOnly'} />}
183+
>
184+
<TableRow rowKey={'0'} className={'interactive-table-row'}>
185+
<TableCell>
186+
<ObjectStatus {...args} className={'object-status'} />
187+
</TableCell>
188+
<TableCell>
189+
<ObjectStatus {...args} className={'object-status'} state={'Negative'} />
190+
</TableCell>
191+
</TableRow>
192+
</Table>
193+
<hr />
194+
List
195+
<List selectionMode="Single">
196+
<ListItemCustom className={'interactive-li'}>
197+
<ObjectStatus {...args} className={'object-status'} />
198+
</ListItemCustom>
199+
</List>
200+
<hr />
201+
AnalyticalTable
202+
<AnalyticalTable
203+
data={atData}
204+
columns={atCols}
205+
minRows={1}
206+
selectionMode={'Single'}
207+
selectionBehavior={'RowOnly'}
208+
className="interactive-analytical-table"
209+
/>
210+
</>
211+
);
212+
},
213+
};

0 commit comments

Comments
 (0)