Skip to content

Commit 8852495

Browse files
thatblindgeyethatblindgeye
committed
chore(DataList): provided context for demo icons
1 parent 26e9f0e commit 8852495

File tree

3 files changed

+95
-24
lines changed

3 files changed

+95
-24
lines changed

‎packages/react-core/src/demos/DataList/examples/DataListBasic.tsx‎

Lines changed: 74 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
DataListItemCells,
1010
Flex,
1111
FlexItem,
12+
Icon,
1213
MenuToggle,
1314
MenuToggleCheckbox,
1415
OverflowMenu,
@@ -28,7 +29,7 @@ import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
2829
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
2930
import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
3031
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
31-
import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
32+
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
3233

3334
export const DataListBasic: React.FunctionComponent = () => {
3435
const renderPagination = () => <Pagination itemCount={5} page={1} variant="top" isCompact />;
@@ -98,13 +99,22 @@ export const DataListBasic: React.FunctionComponent = () => {
9899
<FlexItem>
99100
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
100101
<FlexItem>
101-
<CodeBranchIcon /> 10
102+
<Icon>
103+
<CodeBranchIcon />
104+
</Icon>
105+
10 <span className="pf-v6-screen-reader">Branches</span>
102106
</FlexItem>
103107
<FlexItem>
104-
<CodeIcon /> 4
108+
<Icon>
109+
<CodeIcon />
110+
</Icon>
111+
4 <span className="pf-v6-screen-reader">Code blocks</span>
105112
</FlexItem>
106113
<FlexItem>
107-
<CubeIcon /> 5
114+
<Icon>
115+
<CubeIcon />
116+
</Icon>
117+
5 <span className="pf-v6-screen-reader">Workspaces</span>
108118
</FlexItem>
109119
<FlexItem> Updated 2 days ago</FlexItem>
110120
</Flex>
@@ -140,23 +150,41 @@ export const DataListBasic: React.FunctionComponent = () => {
140150
<FlexItem>
141151
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
142152
<FlexItem>
143-
<CodeBranchIcon /> 5
153+
<Icon>
154+
<CodeBranchIcon />
155+
</Icon>
156+
5 <span className="pf-v6-screen-reader">Branches</span>
144157
</FlexItem>
145158
<FlexItem>
146-
<CodeIcon /> 9
159+
<Icon>
160+
<CodeIcon />
161+
</Icon>
162+
9 <span className="pf-v6-screen-reader">Code blocks</span>
147163
</FlexItem>
148164
<FlexItem>
149-
<CubeIcon /> 2
165+
<Icon>
166+
<CubeIcon />
167+
</Icon>
168+
2 <span className="pf-v6-screen-reader">Workspaces</span>
150169
</FlexItem>
151170
<FlexItem>
152-
<CheckCircleIcon />
171+
<Icon status="success">
172+
<CheckCircleIcon />
173+
</Icon>
153174
11
175+
<span className="pf-v6-screen-reader">Completed</span>
154176
</FlexItem>
155177
<FlexItem>
156-
<ExclamationTriangleIcon /> 4
178+
<Icon status="warning">
179+
<ExclamationTriangleIcon />
180+
</Icon>
181+
4<span className="pf-v6-screen-reader">Warnings</span>
157182
</FlexItem>
158183
<FlexItem>
159-
<TimesCircleIcon /> 1
184+
<Icon status="danger">
185+
<ExclamationCircleIcon />
186+
</Icon>
187+
1<span className="pf-v6-screen-reader">Errors</span>
160188
</FlexItem>
161189
<FlexItem> Updated 2 days ago</FlexItem>
162190
</Flex>
@@ -220,14 +248,23 @@ export const DataListBasic: React.FunctionComponent = () => {
220248
<FlexItem>
221249
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
222250
<FlexItem>
223-
<CodeBranchIcon />
251+
<Icon>
252+
<CodeBranchIcon />
253+
</Icon>
224254
10
255+
<span className="pf-v6-screen-reader">Branches</span>
225256
</FlexItem>
226257
<FlexItem>
227-
<CodeIcon /> 4
258+
<Icon>
259+
<CodeIcon />
260+
</Icon>
261+
4 <span className="pf-v6-screen-reader">Code blocks</span>
228262
</FlexItem>
229263
<FlexItem>
230-
<CubeIcon /> 5
264+
<Icon>
265+
<CubeIcon />
266+
</Icon>
267+
5 <span className="pf-v6-screen-reader">Workspaces</span>
231268
</FlexItem>
232269
<FlexItem> Updated 2 days ago</FlexItem>
233270
</Flex>
@@ -263,22 +300,40 @@ export const DataListBasic: React.FunctionComponent = () => {
263300
<FlexItem>
264301
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
265302
<FlexItem>
266-
<CodeBranchIcon /> 5
303+
<Icon>
304+
<CodeBranchIcon />
305+
</Icon>
306+
5 <span className="pf-v6-screen-reader">Branches</span>
267307
</FlexItem>
268308
<FlexItem>
269-
<CodeIcon /> 9
309+
<Icon>
310+
<CodeIcon />
311+
</Icon>
312+
9 <span className="pf-v6-screen-reader">Code blocks</span>
270313
</FlexItem>
271314
<FlexItem>
272-
<CubeIcon /> 2
315+
<Icon>
316+
<CubeIcon />
317+
</Icon>
318+
2 <span className="pf-v6-screen-reader">Workspaces</span>
273319
</FlexItem>
274320
<FlexItem>
275-
<CheckCircleIcon /> 11
321+
<Icon status="success">
322+
<CheckCircleIcon />
323+
</Icon>
324+
11 <span className="pf-v6-screen-reader">Completed</span>
276325
</FlexItem>
277326
<FlexItem>
278-
<ExclamationTriangleIcon /> 4
327+
<Icon status="warning">
328+
<ExclamationTriangleIcon />
329+
</Icon>
330+
4 <span className="pf-v6-screen-reader">Warnings</span>
279331
</FlexItem>
280332
<FlexItem>
281-
<TimesCircleIcon /> 1
333+
<Icon status="danger">
334+
<ExclamationCircleIcon />
335+
</Icon>
336+
1 <span className="pf-v6-screen-reader">Errors</span>
282337
</FlexItem>
283338
<FlexItem> Updated 2 days ago</FlexItem>
284339
</Flex>

‎packages/react-core/src/demos/DataList/examples/DataListStaticBottomPagination.tsx‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
DataListItemCells,
1111
Flex,
1212
FlexItem,
13+
Icon,
1314
MenuToggle,
1415
MenuToggleCheckbox,
1516
OverflowMenu,
@@ -151,17 +152,29 @@ export const DataListStaticBottomPagination: React.FunctionComponent = () => {
151152
<Flex flexWrap={{ default: 'wrap' }}>
152153
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
153154
<FlexItem>
154-
<CodeBranchIcon /> {threads}
155+
<Icon>
156+
<CodeBranchIcon />
157+
</Icon>{' '}
158+
{threads}
159+
<span className="pf-v6-screen-reader">Branches</span>
155160
</FlexItem>
156161
</Flex>
157162
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
158163
<FlexItem>
159-
<CodeIcon /> {applications}
164+
<Icon>
165+
<CodeIcon />
166+
</Icon>{' '}
167+
{applications}
168+
<span className="pf-v6-screen-reader">Code blocks</span>
160169
</FlexItem>
161170
</Flex>
162171
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
163172
<FlexItem>
164-
<CubeIcon /> {workspaces}
173+
<Icon>
174+
<CubeIcon />
175+
</Icon>{' '}
176+
{workspaces}
177+
<span className="pf-v6-screen-reader">Workspaces</span>
165178
</FlexItem>
166179
</Flex>
167180
<FlexItem> Updated {lastModified}</FlexItem>

‎packages/react-core/src/demos/DataListDemo.md‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
1515
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
1616
import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
1717
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
18-
import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
18+
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
1919
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
2020
import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData';
2121

@@ -30,14 +30,17 @@ import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData';
3030
### Expandable control in toolbar
3131

3232
```js file="./DataList/examples/DataListExpandableControlInToolbar.tsx" isFullscreen
33+
3334
```
3435

3536
### Actionable
3637

3738
```js file="./DataList/examples/DataListActionable.tsx" isFullscreen
39+
3840
```
3941

4042
### Static bottom pagination
4143

4244
```js file="./DataList/examples/DataListStaticBottomPagination.tsx" isFullscreen
43-
```
45+
46+
```

0 commit comments

Comments
 (0)