@patternfly/react-core 4.202.26 → 4.202.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/package.json +5 -5
- package/src/components/DataList/examples/DataList.md +10 -1193
- package/src/components/DataList/examples/DataListActions.tsx +100 -0
- package/src/components/DataList/examples/DataListBasic.tsx +33 -0
- package/src/components/DataList/examples/DataListCheckboxes.tsx +200 -0
- package/src/components/DataList/examples/DataListCompact.tsx +33 -0
- package/src/components/DataList/examples/DataListControllingText.tsx +29 -0
- package/src/components/DataList/examples/DataListDraggable.tsx +98 -0
- package/src/components/DataList/examples/DataListExpandable.tsx +261 -0
- package/src/components/DataList/examples/DataListSelectableRows.tsx +120 -0
- package/src/components/DataList/examples/DataListSmGridBreakpoint.tsx +22 -0
- package/src/components/DataList/examples/DataListWidthModifiers.tsx +204 -0
|
@@ -0,0 +1,261 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Button,
|
|
4
|
+
DataList,
|
|
5
|
+
DataListItem,
|
|
6
|
+
DataListItemRow,
|
|
7
|
+
DataListCell,
|
|
8
|
+
DataListAction,
|
|
9
|
+
DataListToggle,
|
|
10
|
+
DataListContent,
|
|
11
|
+
DataListItemCells,
|
|
12
|
+
Dropdown,
|
|
13
|
+
DropdownItem,
|
|
14
|
+
DropdownPosition,
|
|
15
|
+
KebabToggle
|
|
16
|
+
} from '@patternfly/react-core';
|
|
17
|
+
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
|
|
18
|
+
import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
|
|
19
|
+
import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
|
|
20
|
+
|
|
21
|
+
export const DataListExpandable: React.FunctionComponent = () => {
|
|
22
|
+
const [isOpen1, setIsOpen1] = React.useState(false);
|
|
23
|
+
const [isOpen2, setIsOpen2] = React.useState(false);
|
|
24
|
+
const [isOpen3, setIsOpen3] = React.useState(false);
|
|
25
|
+
const [allExpanded, setAllExpanded] = React.useState(false);
|
|
26
|
+
const [expanded, setExpanded] = React.useState(['ex-toggle1', 'ex-toggle3']);
|
|
27
|
+
|
|
28
|
+
const onToggleAll = () => {
|
|
29
|
+
setAllExpanded(!allExpanded);
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
React.useEffect(() => {
|
|
33
|
+
if (allExpanded) {
|
|
34
|
+
setExpanded(['ex-toggle1', 'ex-toggle2', 'ex-toggle3']);
|
|
35
|
+
} else {
|
|
36
|
+
setExpanded([]);
|
|
37
|
+
}
|
|
38
|
+
}, [allExpanded]);
|
|
39
|
+
|
|
40
|
+
const onToggle1 = isOpen1 => {
|
|
41
|
+
setIsOpen1(isOpen1);
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
const onSelect1 = () => {
|
|
45
|
+
setIsOpen1(!isOpen1);
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
const onToggle2 = isOpen2 => {
|
|
49
|
+
setIsOpen2(isOpen2);
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
const onSelect2 = () => {
|
|
53
|
+
setIsOpen2(!isOpen2);
|
|
54
|
+
};
|
|
55
|
+
const onToggle3 = isOpen3 => {
|
|
56
|
+
setIsOpen3(isOpen3);
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
const onSelect3 = () => {
|
|
60
|
+
setIsOpen3(!isOpen3);
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
const toggle = id => {
|
|
64
|
+
const index = expanded.indexOf(id);
|
|
65
|
+
const newExpanded =
|
|
66
|
+
index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];
|
|
67
|
+
setExpanded(newExpanded);
|
|
68
|
+
};
|
|
69
|
+
return (
|
|
70
|
+
<React.Fragment>
|
|
71
|
+
<Button onClick={onToggleAll}>
|
|
72
|
+
{allExpanded && <AngleDownIcon />}
|
|
73
|
+
{!allExpanded && <AngleRightIcon />}
|
|
74
|
+
Expand/Collapse All
|
|
75
|
+
</Button>
|
|
76
|
+
<br />
|
|
77
|
+
<br />
|
|
78
|
+
<DataList aria-label="Expandable data list example">
|
|
79
|
+
<DataListItem aria-labelledby="ex-item1" isExpanded={expanded.includes('ex-toggle1')}>
|
|
80
|
+
<DataListItemRow>
|
|
81
|
+
<DataListToggle
|
|
82
|
+
onClick={() => toggle('ex-toggle1')}
|
|
83
|
+
isExpanded={expanded.includes('ex-toggle1')}
|
|
84
|
+
id="ex-toggle1"
|
|
85
|
+
aria-controls="ex-expand1"
|
|
86
|
+
/>
|
|
87
|
+
<DataListItemCells
|
|
88
|
+
dataListCells={[
|
|
89
|
+
<DataListCell isIcon key="icon">
|
|
90
|
+
<CodeBranchIcon />
|
|
91
|
+
</DataListCell>,
|
|
92
|
+
<DataListCell key="primary content">
|
|
93
|
+
<div id="ex-item1">Primary content</div>
|
|
94
|
+
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
95
|
+
<a href="#">link</a>
|
|
96
|
+
</DataListCell>,
|
|
97
|
+
<DataListCell key="secondary content">
|
|
98
|
+
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
99
|
+
</DataListCell>,
|
|
100
|
+
<DataListCell key="secondary content 2">
|
|
101
|
+
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
102
|
+
</DataListCell>
|
|
103
|
+
]}
|
|
104
|
+
/>
|
|
105
|
+
<DataListAction
|
|
106
|
+
aria-labelledby="ex-item1 ex-action1"
|
|
107
|
+
id="ex-action1"
|
|
108
|
+
aria-label="Actions"
|
|
109
|
+
isPlainButtonAction
|
|
110
|
+
>
|
|
111
|
+
<Dropdown
|
|
112
|
+
isPlain
|
|
113
|
+
position={DropdownPosition.right}
|
|
114
|
+
isOpen={isOpen1}
|
|
115
|
+
onSelect={onSelect1}
|
|
116
|
+
toggle={<KebabToggle onToggle={onToggle1} />}
|
|
117
|
+
dropdownItems={[
|
|
118
|
+
<DropdownItem key="link">Link</DropdownItem>,
|
|
119
|
+
<DropdownItem key="action" component="button">
|
|
120
|
+
Action
|
|
121
|
+
</DropdownItem>,
|
|
122
|
+
<DropdownItem key="disabled link" isDisabled>
|
|
123
|
+
Disabled Link
|
|
124
|
+
</DropdownItem>
|
|
125
|
+
]}
|
|
126
|
+
/>
|
|
127
|
+
</DataListAction>
|
|
128
|
+
</DataListItemRow>
|
|
129
|
+
<DataListContent
|
|
130
|
+
aria-label="Primary Content Details"
|
|
131
|
+
id="ex-expand1"
|
|
132
|
+
isHidden={!expanded.includes('ex-toggle1')}
|
|
133
|
+
>
|
|
134
|
+
<p>
|
|
135
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
|
|
136
|
+
dolore magna aliqua.
|
|
137
|
+
</p>
|
|
138
|
+
</DataListContent>
|
|
139
|
+
</DataListItem>
|
|
140
|
+
<DataListItem aria-labelledby="ex-item2" isExpanded={expanded.includes('ex-toggle2')}>
|
|
141
|
+
<DataListItemRow>
|
|
142
|
+
<DataListToggle
|
|
143
|
+
onClick={() => toggle('ex-toggle2')}
|
|
144
|
+
isExpanded={expanded.includes('ex-toggle2')}
|
|
145
|
+
id="ex-toggle2"
|
|
146
|
+
aria-controls="ex-expand2"
|
|
147
|
+
/>
|
|
148
|
+
<DataListItemCells
|
|
149
|
+
dataListCells={[
|
|
150
|
+
<DataListCell isIcon key="icon">
|
|
151
|
+
<CodeBranchIcon />
|
|
152
|
+
</DataListCell>,
|
|
153
|
+
<DataListCell key="secondary content">
|
|
154
|
+
<div id="ex-item2">Secondary content</div>
|
|
155
|
+
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
156
|
+
</DataListCell>,
|
|
157
|
+
<DataListCell key="secondary content 2">
|
|
158
|
+
<span>Lorem ipsum dolor sit amet.</span>
|
|
159
|
+
</DataListCell>,
|
|
160
|
+
<DataListCell key="secondary content3">
|
|
161
|
+
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
162
|
+
</DataListCell>
|
|
163
|
+
]}
|
|
164
|
+
/>
|
|
165
|
+
<DataListAction
|
|
166
|
+
aria-labelledby="ex-item2 ex-action2"
|
|
167
|
+
id="ex-action2"
|
|
168
|
+
aria-label="Actions"
|
|
169
|
+
isPlainButtonAction
|
|
170
|
+
>
|
|
171
|
+
<Dropdown
|
|
172
|
+
isPlain
|
|
173
|
+
position={DropdownPosition.right}
|
|
174
|
+
isOpen={isOpen2}
|
|
175
|
+
onSelect={onSelect2}
|
|
176
|
+
toggle={<KebabToggle onToggle={onToggle2} />}
|
|
177
|
+
dropdownItems={[
|
|
178
|
+
<DropdownItem key="link">Link</DropdownItem>,
|
|
179
|
+
<DropdownItem key="action" component="button">
|
|
180
|
+
Action
|
|
181
|
+
</DropdownItem>,
|
|
182
|
+
<DropdownItem key="disabled link" isDisabled>
|
|
183
|
+
Disabled Link
|
|
184
|
+
</DropdownItem>
|
|
185
|
+
]}
|
|
186
|
+
/>
|
|
187
|
+
</DataListAction>
|
|
188
|
+
</DataListItemRow>
|
|
189
|
+
<DataListContent
|
|
190
|
+
aria-label="Primary Content Details"
|
|
191
|
+
id="ex-expand2"
|
|
192
|
+
isHidden={!expanded.includes('ex-toggle2')}
|
|
193
|
+
>
|
|
194
|
+
<p>
|
|
195
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
|
|
196
|
+
dolore magna aliqua.
|
|
197
|
+
</p>
|
|
198
|
+
</DataListContent>
|
|
199
|
+
</DataListItem>
|
|
200
|
+
<DataListItem aria-labelledby="ex-item3" isExpanded={expanded.includes('ex-toggle3')}>
|
|
201
|
+
<DataListItemRow>
|
|
202
|
+
<DataListToggle
|
|
203
|
+
onClick={() => toggle('ex-toggle3')}
|
|
204
|
+
isExpanded={expanded.includes('ex-toggle3')}
|
|
205
|
+
id="ex-toggle3"
|
|
206
|
+
aria-controls="ex-expand3"
|
|
207
|
+
/>
|
|
208
|
+
<DataListItemCells
|
|
209
|
+
dataListCells={[
|
|
210
|
+
<DataListCell isIcon key="icon">
|
|
211
|
+
<CodeBranchIcon />
|
|
212
|
+
</DataListCell>,
|
|
213
|
+
<DataListCell key="tertiary content">
|
|
214
|
+
<div id="ex-item3">Tertiary content</div>
|
|
215
|
+
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
216
|
+
</DataListCell>,
|
|
217
|
+
<DataListCell key="secondary content">
|
|
218
|
+
<span>Lorem ipsum dolor sit amet.</span>
|
|
219
|
+
</DataListCell>,
|
|
220
|
+
<DataListCell key="secondary content 2">
|
|
221
|
+
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
222
|
+
</DataListCell>
|
|
223
|
+
]}
|
|
224
|
+
/>
|
|
225
|
+
<DataListAction
|
|
226
|
+
aria-labelledby="ex-item3 ex-action3"
|
|
227
|
+
id="ex-action3"
|
|
228
|
+
aria-label="Actions"
|
|
229
|
+
isPlainButtonAction
|
|
230
|
+
>
|
|
231
|
+
<Dropdown
|
|
232
|
+
isPlain
|
|
233
|
+
position={DropdownPosition.right}
|
|
234
|
+
isOpen={isOpen3}
|
|
235
|
+
onSelect={onSelect3}
|
|
236
|
+
toggle={<KebabToggle onToggle={onToggle3} />}
|
|
237
|
+
dropdownItems={[
|
|
238
|
+
<DropdownItem key="link">Link</DropdownItem>,
|
|
239
|
+
<DropdownItem key="action" component="button">
|
|
240
|
+
Action
|
|
241
|
+
</DropdownItem>,
|
|
242
|
+
<DropdownItem key="disabled link" isDisabled>
|
|
243
|
+
Disabled Link
|
|
244
|
+
</DropdownItem>
|
|
245
|
+
]}
|
|
246
|
+
/>
|
|
247
|
+
</DataListAction>
|
|
248
|
+
</DataListItemRow>
|
|
249
|
+
<DataListContent
|
|
250
|
+
aria-label="Primary Content Details"
|
|
251
|
+
id="ex-expand3"
|
|
252
|
+
isHidden={!expanded.includes('ex-toggle3')}
|
|
253
|
+
hasNoPadding
|
|
254
|
+
>
|
|
255
|
+
This expanded section has no padding.
|
|
256
|
+
</DataListContent>
|
|
257
|
+
</DataListItem>
|
|
258
|
+
</DataList>
|
|
259
|
+
</React.Fragment>
|
|
260
|
+
);
|
|
261
|
+
};
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Dropdown,
|
|
4
|
+
DropdownItem,
|
|
5
|
+
DropdownPosition,
|
|
6
|
+
KebabToggle,
|
|
7
|
+
DataList,
|
|
8
|
+
DataListItem,
|
|
9
|
+
DataListCell,
|
|
10
|
+
DataListItemRow,
|
|
11
|
+
DataListItemCells,
|
|
12
|
+
DataListAction
|
|
13
|
+
} from '@patternfly/react-core';
|
|
14
|
+
|
|
15
|
+
export const DataListSelectableRows: React.FunctionComponent = () => {
|
|
16
|
+
const [isOpen1, setIsOpen1] = React.useState(false);
|
|
17
|
+
const [isOpen2, setIsOpen2] = React.useState(false);
|
|
18
|
+
const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('');
|
|
19
|
+
|
|
20
|
+
const onToggle1 = isOpen1 => {
|
|
21
|
+
setIsOpen1(isOpen1);
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
const onSelect1 = () => {
|
|
25
|
+
setIsOpen1(!isOpen1);
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
const onToggle2 = isOpen2 => {
|
|
29
|
+
setIsOpen2(isOpen2);
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
const onSelect2 = () => {
|
|
33
|
+
setIsOpen2(!isOpen2);
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
const onSelectDataListItem = id => {
|
|
37
|
+
setSelectedDataListItemId(id);
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
return (
|
|
41
|
+
<React.Fragment>
|
|
42
|
+
<DataList
|
|
43
|
+
aria-label="selectable data list example"
|
|
44
|
+
selectedDataListItemId={selectedDataListItemId}
|
|
45
|
+
onSelectDataListItem={onSelectDataListItem}
|
|
46
|
+
>
|
|
47
|
+
<DataListItem aria-labelledby="selectable-action-item1" id="item1">
|
|
48
|
+
<DataListItemRow>
|
|
49
|
+
<DataListItemCells
|
|
50
|
+
dataListCells={[
|
|
51
|
+
<DataListCell key="primary content">
|
|
52
|
+
<span id="selectable-action-item1">Single actionable Primary content</span>
|
|
53
|
+
</DataListCell>,
|
|
54
|
+
<DataListCell key="secondary content">Single actionable Secondary content</DataListCell>
|
|
55
|
+
]}
|
|
56
|
+
/>
|
|
57
|
+
<DataListAction
|
|
58
|
+
aria-labelledby="selectable-action-item1 selectable-action-action1"
|
|
59
|
+
id="selectable-action-action1"
|
|
60
|
+
aria-label="Actions"
|
|
61
|
+
isPlainButtonAction
|
|
62
|
+
>
|
|
63
|
+
<Dropdown
|
|
64
|
+
isPlain
|
|
65
|
+
position={DropdownPosition.right}
|
|
66
|
+
isOpen={isOpen1}
|
|
67
|
+
onSelect={onSelect1}
|
|
68
|
+
toggle={<KebabToggle onToggle={onToggle1} />}
|
|
69
|
+
dropdownItems={[
|
|
70
|
+
<DropdownItem key="link">Link</DropdownItem>,
|
|
71
|
+
<DropdownItem key="action" component="button">
|
|
72
|
+
Action
|
|
73
|
+
</DropdownItem>,
|
|
74
|
+
<DropdownItem key="disabled link" isDisabled>
|
|
75
|
+
Disabled Link
|
|
76
|
+
</DropdownItem>
|
|
77
|
+
]}
|
|
78
|
+
/>
|
|
79
|
+
</DataListAction>
|
|
80
|
+
</DataListItemRow>
|
|
81
|
+
</DataListItem>
|
|
82
|
+
<DataListItem aria-labelledby="selectable-actions-item2" id="item2">
|
|
83
|
+
<DataListItemRow>
|
|
84
|
+
<DataListItemCells
|
|
85
|
+
dataListCells={[
|
|
86
|
+
<DataListCell key="primary content">
|
|
87
|
+
<span id="selectable-actions-item2">Selectable actions Primary content</span>
|
|
88
|
+
</DataListCell>,
|
|
89
|
+
<DataListCell key="secondary content">Selectable actions Secondary content</DataListCell>
|
|
90
|
+
]}
|
|
91
|
+
/>
|
|
92
|
+
<DataListAction
|
|
93
|
+
aria-labelledby="selectable-actions-item2 selectable-actions-action2"
|
|
94
|
+
id="selectable-actions-action2"
|
|
95
|
+
aria-label="Actions"
|
|
96
|
+
isPlainButtonAction
|
|
97
|
+
>
|
|
98
|
+
<Dropdown
|
|
99
|
+
isPlain
|
|
100
|
+
position={DropdownPosition.right}
|
|
101
|
+
isOpen={isOpen2}
|
|
102
|
+
onSelect={onSelect2}
|
|
103
|
+
toggle={<KebabToggle onToggle={onToggle2} />}
|
|
104
|
+
dropdownItems={[
|
|
105
|
+
<DropdownItem key="link">Link</DropdownItem>,
|
|
106
|
+
<DropdownItem key="action" component="button">
|
|
107
|
+
Action
|
|
108
|
+
</DropdownItem>,
|
|
109
|
+
<DropdownItem key="disabled link" isDisabled>
|
|
110
|
+
Disabled Link
|
|
111
|
+
</DropdownItem>
|
|
112
|
+
]}
|
|
113
|
+
/>
|
|
114
|
+
</DataListAction>
|
|
115
|
+
</DataListItemRow>
|
|
116
|
+
</DataListItem>
|
|
117
|
+
</DataList>
|
|
118
|
+
</React.Fragment>
|
|
119
|
+
);
|
|
120
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell } from '@patternfly/react-core';
|
|
3
|
+
|
|
4
|
+
export const DataListSmGridBreakpoint: React.FunctionComponent = () => (
|
|
5
|
+
<DataList aria-label="Simple data list example" gridBreakpoint="sm">
|
|
6
|
+
<DataListItem aria-labelledby="simple-item1">
|
|
7
|
+
<DataListItemRow>
|
|
8
|
+
<DataListItemCells
|
|
9
|
+
dataListCells={[
|
|
10
|
+
<DataListCell key="primary content">
|
|
11
|
+
<span id="simple-item1">Primary content</span>
|
|
12
|
+
</DataListCell>,
|
|
13
|
+
<DataListCell key="secondary content">
|
|
14
|
+
Really really really really really really really really really really really really really really long
|
|
15
|
+
description that should be truncated before it ends
|
|
16
|
+
</DataListCell>
|
|
17
|
+
]}
|
|
18
|
+
/>
|
|
19
|
+
</DataListItemRow>
|
|
20
|
+
</DataListItem>
|
|
21
|
+
</DataList>
|
|
22
|
+
);
|
|
@@ -0,0 +1,204 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
DataList,
|
|
4
|
+
DataListItem,
|
|
5
|
+
DataListCell,
|
|
6
|
+
DataListCheck,
|
|
7
|
+
DataListAction,
|
|
8
|
+
DataListToggle,
|
|
9
|
+
DataListContent,
|
|
10
|
+
DataListItemCells,
|
|
11
|
+
DataListItemRow,
|
|
12
|
+
Dropdown,
|
|
13
|
+
DropdownItem,
|
|
14
|
+
KebabToggle,
|
|
15
|
+
DropdownPosition,
|
|
16
|
+
Text,
|
|
17
|
+
TextVariants,
|
|
18
|
+
TextContent
|
|
19
|
+
} from '@patternfly/react-core';
|
|
20
|
+
|
|
21
|
+
export const DataListWidthModifiers: React.FunctionComponent = () => {
|
|
22
|
+
const [show, setShow] = React.useState(true);
|
|
23
|
+
const [isOpen1, setIsOpen1] = React.useState(false);
|
|
24
|
+
const [isOpen2, setIsOpen2] = React.useState(false);
|
|
25
|
+
|
|
26
|
+
const onToggle1 = isOpen1 => {
|
|
27
|
+
setIsOpen1(isOpen1);
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
const onSelect1 = () => {
|
|
31
|
+
setIsOpen1(!isOpen1);
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
const onToggle2 = isOpen2 => {
|
|
35
|
+
setIsOpen2(isOpen2);
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
const onSelect2 = () => {
|
|
39
|
+
setIsOpen2(!isOpen2);
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
const previewPlaceholder = {
|
|
43
|
+
display: 'block',
|
|
44
|
+
width: '100%',
|
|
45
|
+
padding: '.25rem .5rem',
|
|
46
|
+
color: '#004e8a',
|
|
47
|
+
backgroundColor: '#def3ff',
|
|
48
|
+
border: '1px solid rgba(0,0,0,.1)',
|
|
49
|
+
borderRadius: '4px'
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
return (
|
|
53
|
+
<>
|
|
54
|
+
<div key="example-1">
|
|
55
|
+
<TextContent>
|
|
56
|
+
<Text component={TextVariants.h4}>Default fitting - example 1</Text>
|
|
57
|
+
</TextContent>
|
|
58
|
+
<DataList aria-label="Width modifier data list example 1">
|
|
59
|
+
<DataListItem aria-labelledby="width-ex1-item1">
|
|
60
|
+
<DataListItemRow>
|
|
61
|
+
<DataListCheck aria-labelledby="width-ex1-item1" name="width-ex1-item1" />
|
|
62
|
+
<DataListItemCells
|
|
63
|
+
dataListCells={[
|
|
64
|
+
<DataListCell key="default">
|
|
65
|
+
<div style={previewPlaceholder}>
|
|
66
|
+
<b id="width-ex1-item1">default</b>
|
|
67
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
|
|
68
|
+
</div>
|
|
69
|
+
</DataListCell>,
|
|
70
|
+
<DataListCell key="default2">
|
|
71
|
+
<div style={previewPlaceholder}>
|
|
72
|
+
<b>default</b>
|
|
73
|
+
<p>
|
|
74
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
|
|
75
|
+
labore et dolore magna aliqua.
|
|
76
|
+
</p>
|
|
77
|
+
</div>
|
|
78
|
+
</DataListCell>
|
|
79
|
+
]}
|
|
80
|
+
/>
|
|
81
|
+
</DataListItemRow>
|
|
82
|
+
</DataListItem>
|
|
83
|
+
</DataList>
|
|
84
|
+
</div>
|
|
85
|
+
<div key="example-2">
|
|
86
|
+
<TextContent>
|
|
87
|
+
<Text component={TextVariants.h4}>Flex modifiers - example 2</Text>
|
|
88
|
+
</TextContent>
|
|
89
|
+
<DataList aria-label="Width modifier data list example 2">
|
|
90
|
+
<DataListItem aria-labelledby="width-ex2-item1">
|
|
91
|
+
<DataListItemRow>
|
|
92
|
+
<DataListCheck aria-labelledby="width-ex2-item1" name="width-ex2-item1" />
|
|
93
|
+
<DataListItemCells
|
|
94
|
+
dataListCells={[
|
|
95
|
+
<DataListCell width={2} key="width 2">
|
|
96
|
+
<div style={previewPlaceholder}>
|
|
97
|
+
<b id="width-ex2-item1">width 2</b>
|
|
98
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
|
|
99
|
+
</div>
|
|
100
|
+
</DataListCell>,
|
|
101
|
+
<DataListCell width={4} key="width 4">
|
|
102
|
+
<div style={previewPlaceholder}>
|
|
103
|
+
<b>width 4</b>
|
|
104
|
+
<p>Lorem ipsum dolor sit amet.</p>
|
|
105
|
+
</div>
|
|
106
|
+
</DataListCell>
|
|
107
|
+
]}
|
|
108
|
+
/>
|
|
109
|
+
<DataListAction
|
|
110
|
+
aria-labelledby="width-ex2-item1 width-ex2-action1"
|
|
111
|
+
id="width-ex2-action1"
|
|
112
|
+
aria-label="Actions"
|
|
113
|
+
isPlainButtonAction
|
|
114
|
+
>
|
|
115
|
+
<Dropdown
|
|
116
|
+
isPlain
|
|
117
|
+
position={DropdownPosition.right}
|
|
118
|
+
isOpen={isOpen1}
|
|
119
|
+
onSelect={onSelect1}
|
|
120
|
+
toggle={<KebabToggle onToggle={onToggle1} />}
|
|
121
|
+
dropdownItems={[
|
|
122
|
+
<DropdownItem key="link">Link</DropdownItem>,
|
|
123
|
+
<DropdownItem key="action" component="button">
|
|
124
|
+
Action
|
|
125
|
+
</DropdownItem>,
|
|
126
|
+
<DropdownItem key="disabled link" isDisabled>
|
|
127
|
+
Disabled Link
|
|
128
|
+
</DropdownItem>
|
|
129
|
+
]}
|
|
130
|
+
/>
|
|
131
|
+
</DataListAction>
|
|
132
|
+
</DataListItemRow>
|
|
133
|
+
</DataListItem>
|
|
134
|
+
</DataList>
|
|
135
|
+
</div>
|
|
136
|
+
<div key="example-3">
|
|
137
|
+
<TextContent>
|
|
138
|
+
<Text component={TextVariants.h4}>Flex modifiers - example 3</Text>
|
|
139
|
+
</TextContent>
|
|
140
|
+
<DataList aria-label="Width modifier data list example 3">
|
|
141
|
+
<DataListItem aria-labelledby="width-ex3-item1" isExpanded={show}>
|
|
142
|
+
<DataListItemRow>
|
|
143
|
+
<DataListToggle
|
|
144
|
+
isExpanded={show}
|
|
145
|
+
id="width-ex3-toggle1"
|
|
146
|
+
aria-controls="width-ex3-expand1"
|
|
147
|
+
onClick={() => setShow(!show)}
|
|
148
|
+
/>
|
|
149
|
+
<DataListCheck aria-labelledby="width-ex3-item1" name="width-ex3-item1" />
|
|
150
|
+
<DataListItemCells
|
|
151
|
+
dataListCells={[
|
|
152
|
+
<DataListCell width={5} key="width 5">
|
|
153
|
+
<div style={previewPlaceholder}>
|
|
154
|
+
<b id="width-ex3-item1">width 5</b>
|
|
155
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
|
|
156
|
+
</div>
|
|
157
|
+
</DataListCell>,
|
|
158
|
+
<DataListCell width={2} key="width 2">
|
|
159
|
+
<div style={previewPlaceholder}>
|
|
160
|
+
<b>width 2</b>
|
|
161
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
|
|
162
|
+
</div>
|
|
163
|
+
</DataListCell>,
|
|
164
|
+
<DataListCell key="default">
|
|
165
|
+
<div style={previewPlaceholder}>default</div>
|
|
166
|
+
</DataListCell>
|
|
167
|
+
]}
|
|
168
|
+
/>
|
|
169
|
+
<DataListAction
|
|
170
|
+
aria-labelledby="width-ex3-item1 width-ex3-action1"
|
|
171
|
+
id="width-ex3-action1"
|
|
172
|
+
aria-label="Actions"
|
|
173
|
+
isPlainButtonAction
|
|
174
|
+
>
|
|
175
|
+
<Dropdown
|
|
176
|
+
isPlain
|
|
177
|
+
position={DropdownPosition.right}
|
|
178
|
+
isOpen={isOpen2}
|
|
179
|
+
onSelect={onSelect2}
|
|
180
|
+
toggle={<KebabToggle onToggle={onToggle2} />}
|
|
181
|
+
dropdownItems={[
|
|
182
|
+
<DropdownItem key="link">Link</DropdownItem>,
|
|
183
|
+
<DropdownItem key="action" component="button">
|
|
184
|
+
Action
|
|
185
|
+
</DropdownItem>,
|
|
186
|
+
<DropdownItem key="disabled link" isDisabled>
|
|
187
|
+
Disabled Link
|
|
188
|
+
</DropdownItem>
|
|
189
|
+
]}
|
|
190
|
+
/>
|
|
191
|
+
</DataListAction>
|
|
192
|
+
</DataListItemRow>
|
|
193
|
+
<DataListContent aria-label="Primary Content Details" id="width-ex3-expand1" isHidden={!show}>
|
|
194
|
+
<p>
|
|
195
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
|
|
196
|
+
dolore magna aliqua.
|
|
197
|
+
</p>
|
|
198
|
+
</DataListContent>
|
|
199
|
+
</DataListItem>
|
|
200
|
+
</DataList>
|
|
201
|
+
</div>
|
|
202
|
+
</>
|
|
203
|
+
);
|
|
204
|
+
};
|