@patternfly/patternfly 5.0.0-alpha.50 → 5.0.0-alpha.51
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/UPGRADE-GUIDE.md +1 -1
- package/assets/icons/iconUnicodes.json +129 -128
- package/assets/pficon/pf-v5-pficon.woff2 +0 -0
- package/assets/pficon/pficon.scss +402 -267
- package/base/_icons.scss +1 -1
- package/base/patternfly-icons.css +136 -132
- package/base/patternfly-pf-icons.css +136 -132
- package/base/patternfly-pf-icons.scss +1 -1
- package/components/NotificationBadge/notification-badge.css +2 -2
- package/components/NotificationBadge/notification-badge.scss +2 -2
- package/components/ProgressStepper/progress-stepper.css +1 -1
- package/components/ProgressStepper/progress-stepper.scss +1 -1
- package/components/_all.scss +1 -1
- package/docs/components/Avatar/examples/Avatar.css +1 -1
- package/docs/components/CodeEditor/examples/CodeEditor.md +1 -1
- package/docs/components/Form/examples/Form.md +11 -11
- package/docs/components/Label/examples/Label.md +1220 -1
- package/docs/components/ModalBox/examples/ModalBox.md +1 -1
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +3 -3
- package/docs/components/NotificationBadge/examples/NotificationBadge.css +1 -1
- package/docs/components/NotificationBadge/examples/NotificationBadge.md +18 -18
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
- package/docs/components/Table/examples/Table.md +2 -2
- package/docs/components/Tabs/examples/Tabs.md +102 -102
- package/docs/demos/AboutModal/examples/AboutModal.md +2 -2
- package/docs/demos/Alert/examples/Alert.md +6 -6
- package/docs/demos/BackToTop/examples/BackToTop.md +2 -2
- package/docs/demos/Banner/examples/Banner.md +4 -4
- package/docs/demos/CardView/examples/CardView.md +2 -2
- package/docs/demos/ContextSelector/examples/ContextSelector.md +6 -6
- package/docs/demos/Dashboard/examples/Dashboard.md +7 -7
- package/docs/demos/DataList/examples/DataList.md +8 -8
- package/docs/demos/DescriptionList/examples/DescriptionList.md +6 -6
- package/docs/demos/Drawer/examples/Drawer.md +10 -10
- package/docs/demos/Form/examples/BasicForms.md +10 -10
- package/docs/demos/JumpLinks/examples/JumpLinks.md +12 -12
- package/docs/demos/Masthead/examples/Masthead.md +4 -4
- package/docs/demos/Modal/examples/Modal.md +15 -15
- package/docs/demos/Nav/examples/Nav.md +16 -16
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +15 -15
- package/docs/demos/Page/examples/Page.md +18 -18
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +1 -1
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +14 -14
- package/docs/demos/Skeleton/examples/Skeleton.md +2 -2
- package/docs/demos/Table/examples/Table.md +32 -32
- package/docs/demos/Tabs/examples/Tabs.md +12 -12
- package/docs/demos/Toolbar/examples/Toolbar.md +4 -4
- package/docs/demos/Wizard/examples/Wizard.md +18 -18
- package/icons/{pf-icons.mjs → pficons.mjs} +1 -0
- package/package.json +1 -1
- package/patternfly-base-no-globals.css +136 -132
- package/patternfly-base.css +136 -132
- package/patternfly-no-globals.css +139 -135
- package/patternfly.css +139 -135
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/assets/pficon/pficon.woff2 +0 -0
- package/docs/components/LabelGroup/examples/LabelGroup.md +0 -1222
- /package/base/{_pf-icons.scss → _pficons.scss} +0 -0
- /package/components/{LabelGroup → Label}/label-group.css +0 -0
- /package/components/{LabelGroup → Label}/label-group.scss +0 -0
|
@@ -1,1222 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
id: 'Label group'
|
|
3
|
-
section: components
|
|
4
|
-
cssPrefix: pf-v5-c-label-group
|
|
5
|
-
---## Examples
|
|
6
|
-
|
|
7
|
-
### Basic
|
|
8
|
-
|
|
9
|
-
```html
|
|
10
|
-
<div class="pf-v5-c-label-group">
|
|
11
|
-
<div class="pf-v5-c-label-group__main">
|
|
12
|
-
<ul
|
|
13
|
-
class="pf-v5-c-label-group__list"
|
|
14
|
-
role="list"
|
|
15
|
-
aria-label="Group of labels"
|
|
16
|
-
>
|
|
17
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
18
|
-
<span class="pf-v5-c-label">
|
|
19
|
-
<span class="pf-v5-c-label__content">
|
|
20
|
-
<span class="pf-v5-c-label__icon">
|
|
21
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
22
|
-
</span>
|
|
23
|
-
<span class="pf-v5-c-label__text">Label 1</span>
|
|
24
|
-
</span>
|
|
25
|
-
</span>
|
|
26
|
-
</li>
|
|
27
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
28
|
-
<span class="pf-v5-c-label pf-m-blue">
|
|
29
|
-
<span class="pf-v5-c-label__content">
|
|
30
|
-
<span class="pf-v5-c-label__icon">
|
|
31
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
32
|
-
</span>
|
|
33
|
-
<span class="pf-v5-c-label__text">Label 2</span>
|
|
34
|
-
</span>
|
|
35
|
-
</span>
|
|
36
|
-
</li>
|
|
37
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
38
|
-
<span class="pf-v5-c-label pf-m-green">
|
|
39
|
-
<span class="pf-v5-c-label__content">
|
|
40
|
-
<span class="pf-v5-c-label__icon">
|
|
41
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
42
|
-
</span>
|
|
43
|
-
<span class="pf-v5-c-label__text">Label 3</span>
|
|
44
|
-
</span>
|
|
45
|
-
</span>
|
|
46
|
-
</li>
|
|
47
|
-
</ul>
|
|
48
|
-
</div>
|
|
49
|
-
</div>
|
|
50
|
-
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
### Overflow
|
|
54
|
-
|
|
55
|
-
```html
|
|
56
|
-
<div class="pf-v5-c-label-group">
|
|
57
|
-
<div class="pf-v5-c-label-group__main">
|
|
58
|
-
<ul
|
|
59
|
-
class="pf-v5-c-label-group__list"
|
|
60
|
-
role="list"
|
|
61
|
-
aria-label="Group of labels"
|
|
62
|
-
>
|
|
63
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
64
|
-
<span class="pf-v5-c-label">
|
|
65
|
-
<span class="pf-v5-c-label__content">
|
|
66
|
-
<span class="pf-v5-c-label__icon">
|
|
67
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
68
|
-
</span>
|
|
69
|
-
<span class="pf-v5-c-label__text">Label 1</span>
|
|
70
|
-
</span>
|
|
71
|
-
</span>
|
|
72
|
-
</li>
|
|
73
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
74
|
-
<span class="pf-v5-c-label pf-m-blue">
|
|
75
|
-
<span class="pf-v5-c-label__content">
|
|
76
|
-
<span class="pf-v5-c-label__icon">
|
|
77
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
78
|
-
</span>
|
|
79
|
-
<span class="pf-v5-c-label__text">Label 2</span>
|
|
80
|
-
</span>
|
|
81
|
-
</span>
|
|
82
|
-
</li>
|
|
83
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
84
|
-
<span class="pf-v5-c-label pf-m-green">
|
|
85
|
-
<span class="pf-v5-c-label__content">
|
|
86
|
-
<span class="pf-v5-c-label__icon">
|
|
87
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
88
|
-
</span>
|
|
89
|
-
<span class="pf-v5-c-label__text">Label 3</span>
|
|
90
|
-
</span>
|
|
91
|
-
</span>
|
|
92
|
-
</li>
|
|
93
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
94
|
-
<button class="pf-v5-c-label pf-m-overflow pf-m-blue" type="button">
|
|
95
|
-
<span class="pf-v5-c-label__content">
|
|
96
|
-
<span class="pf-v5-c-label__text">3 more</span>
|
|
97
|
-
</span>
|
|
98
|
-
</button>
|
|
99
|
-
</li>
|
|
100
|
-
</ul>
|
|
101
|
-
</div>
|
|
102
|
-
</div>
|
|
103
|
-
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
### Overflow expanded
|
|
107
|
-
|
|
108
|
-
```html
|
|
109
|
-
<div class="pf-v5-c-label-group">
|
|
110
|
-
<div class="pf-v5-c-label-group__main">
|
|
111
|
-
<ul
|
|
112
|
-
class="pf-v5-c-label-group__list"
|
|
113
|
-
role="list"
|
|
114
|
-
aria-label="Group of labels"
|
|
115
|
-
>
|
|
116
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
117
|
-
<span class="pf-v5-c-label">
|
|
118
|
-
<span class="pf-v5-c-label__content">
|
|
119
|
-
<span class="pf-v5-c-label__icon">
|
|
120
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
121
|
-
</span>
|
|
122
|
-
<span class="pf-v5-c-label__text">Label 1</span>
|
|
123
|
-
</span>
|
|
124
|
-
</span>
|
|
125
|
-
</li>
|
|
126
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
127
|
-
<span class="pf-v5-c-label pf-m-blue">
|
|
128
|
-
<span class="pf-v5-c-label__content">
|
|
129
|
-
<span class="pf-v5-c-label__icon">
|
|
130
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
131
|
-
</span>
|
|
132
|
-
<span class="pf-v5-c-label__text">Label 2</span>
|
|
133
|
-
</span>
|
|
134
|
-
</span>
|
|
135
|
-
</li>
|
|
136
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
137
|
-
<span class="pf-v5-c-label pf-m-green">
|
|
138
|
-
<span class="pf-v5-c-label__content">
|
|
139
|
-
<span class="pf-v5-c-label__icon">
|
|
140
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
141
|
-
</span>
|
|
142
|
-
<span class="pf-v5-c-label__text">Label 3</span>
|
|
143
|
-
</span>
|
|
144
|
-
</span>
|
|
145
|
-
</li>
|
|
146
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
147
|
-
<span class="pf-v5-c-label pf-m-cyan">
|
|
148
|
-
<span class="pf-v5-c-label__content">
|
|
149
|
-
<span class="pf-v5-c-label__icon">
|
|
150
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
151
|
-
</span>
|
|
152
|
-
<span class="pf-v5-c-label__text">Label 4</span>
|
|
153
|
-
</span>
|
|
154
|
-
</span>
|
|
155
|
-
</li>
|
|
156
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
157
|
-
<span class="pf-v5-c-label pf-m-purple">
|
|
158
|
-
<span class="pf-v5-c-label__content">
|
|
159
|
-
<span class="pf-v5-c-label__icon">
|
|
160
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
161
|
-
</span>
|
|
162
|
-
<span class="pf-v5-c-label__text">Label 5</span>
|
|
163
|
-
</span>
|
|
164
|
-
</span>
|
|
165
|
-
</li>
|
|
166
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
167
|
-
<button class="pf-v5-c-label pf-m-overflow" type="button">
|
|
168
|
-
<span class="pf-v5-c-label__content">
|
|
169
|
-
<span class="pf-v5-c-label__text">3 less</span>
|
|
170
|
-
</span>
|
|
171
|
-
</button>
|
|
172
|
-
</li>
|
|
173
|
-
</ul>
|
|
174
|
-
</div>
|
|
175
|
-
</div>
|
|
176
|
-
|
|
177
|
-
```
|
|
178
|
-
|
|
179
|
-
### Add label
|
|
180
|
-
|
|
181
|
-
```html
|
|
182
|
-
<div class="pf-v5-c-label-group">
|
|
183
|
-
<div class="pf-v5-c-label-group__main">
|
|
184
|
-
<ul
|
|
185
|
-
class="pf-v5-c-label-group__list"
|
|
186
|
-
role="list"
|
|
187
|
-
aria-label="Group of labels"
|
|
188
|
-
>
|
|
189
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
190
|
-
<span class="pf-v5-c-label">
|
|
191
|
-
<span class="pf-v5-c-label__content">
|
|
192
|
-
<span class="pf-v5-c-label__icon">
|
|
193
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
194
|
-
</span>
|
|
195
|
-
<span class="pf-v5-c-label__text">Label 1</span>
|
|
196
|
-
</span>
|
|
197
|
-
</span>
|
|
198
|
-
</li>
|
|
199
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
200
|
-
<span class="pf-v5-c-label pf-m-blue">
|
|
201
|
-
<span class="pf-v5-c-label__content">
|
|
202
|
-
<span class="pf-v5-c-label__icon">
|
|
203
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
204
|
-
</span>
|
|
205
|
-
<span class="pf-v5-c-label__text">Label 2</span>
|
|
206
|
-
</span>
|
|
207
|
-
</span>
|
|
208
|
-
</li>
|
|
209
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
210
|
-
<span class="pf-v5-c-label pf-m-green">
|
|
211
|
-
<span class="pf-v5-c-label__content">
|
|
212
|
-
<span class="pf-v5-c-label__icon">
|
|
213
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
214
|
-
</span>
|
|
215
|
-
<span class="pf-v5-c-label__text">Label 3</span>
|
|
216
|
-
</span>
|
|
217
|
-
</span>
|
|
218
|
-
</li>
|
|
219
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
220
|
-
<button class="pf-v5-c-label pf-m-add" type="button">
|
|
221
|
-
<span class="pf-v5-c-label__content">
|
|
222
|
-
<span class="pf-v5-c-label__text">Add label</span>
|
|
223
|
-
</span>
|
|
224
|
-
</button>
|
|
225
|
-
</li>
|
|
226
|
-
</ul>
|
|
227
|
-
</div>
|
|
228
|
-
</div>
|
|
229
|
-
|
|
230
|
-
```
|
|
231
|
-
|
|
232
|
-
### Category
|
|
233
|
-
|
|
234
|
-
```html
|
|
235
|
-
<div class="pf-v5-c-label-group pf-m-category">
|
|
236
|
-
<div class="pf-v5-c-label-group__main">
|
|
237
|
-
<span
|
|
238
|
-
class="pf-v5-c-label-group__label"
|
|
239
|
-
aria-hidden="true"
|
|
240
|
-
id="label-group-category-label"
|
|
241
|
-
>Group label</span>
|
|
242
|
-
<ul
|
|
243
|
-
class="pf-v5-c-label-group__list"
|
|
244
|
-
role="list"
|
|
245
|
-
aria-labelledby="label-group-category-label"
|
|
246
|
-
>
|
|
247
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
248
|
-
<span class="pf-v5-c-label">
|
|
249
|
-
<span class="pf-v5-c-label__content">
|
|
250
|
-
<span class="pf-v5-c-label__icon">
|
|
251
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
252
|
-
</span>
|
|
253
|
-
<span class="pf-v5-c-label__text">Label 1</span>
|
|
254
|
-
</span>
|
|
255
|
-
</span>
|
|
256
|
-
</li>
|
|
257
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
258
|
-
<span class="pf-v5-c-label pf-m-blue">
|
|
259
|
-
<span class="pf-v5-c-label__content">
|
|
260
|
-
<span class="pf-v5-c-label__icon">
|
|
261
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
262
|
-
</span>
|
|
263
|
-
<span class="pf-v5-c-label__text">Label 2</span>
|
|
264
|
-
</span>
|
|
265
|
-
</span>
|
|
266
|
-
</li>
|
|
267
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
268
|
-
<span class="pf-v5-c-label pf-m-green">
|
|
269
|
-
<span class="pf-v5-c-label__content">
|
|
270
|
-
<span class="pf-v5-c-label__icon">
|
|
271
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
272
|
-
</span>
|
|
273
|
-
<span class="pf-v5-c-label__text">Label 3</span>
|
|
274
|
-
</span>
|
|
275
|
-
</span>
|
|
276
|
-
</li>
|
|
277
|
-
</ul>
|
|
278
|
-
</div>
|
|
279
|
-
</div>
|
|
280
|
-
|
|
281
|
-
```
|
|
282
|
-
|
|
283
|
-
### Category removable
|
|
284
|
-
|
|
285
|
-
```html
|
|
286
|
-
<div class="pf-v5-c-label-group pf-m-category">
|
|
287
|
-
<div class="pf-v5-c-label-group__main">
|
|
288
|
-
<span
|
|
289
|
-
class="pf-v5-c-label-group__label"
|
|
290
|
-
aria-hidden="true"
|
|
291
|
-
id="label-group-category-removable-label"
|
|
292
|
-
>Group label</span>
|
|
293
|
-
<ul
|
|
294
|
-
class="pf-v5-c-label-group__list"
|
|
295
|
-
role="list"
|
|
296
|
-
aria-labelledby="label-group-category-removable-label"
|
|
297
|
-
>
|
|
298
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
299
|
-
<span class="pf-v5-c-label">
|
|
300
|
-
<span class="pf-v5-c-label__content">
|
|
301
|
-
<span class="pf-v5-c-label__icon">
|
|
302
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
303
|
-
</span>
|
|
304
|
-
<span class="pf-v5-c-label__text">Label 1</span>
|
|
305
|
-
</span>
|
|
306
|
-
</span>
|
|
307
|
-
</li>
|
|
308
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
309
|
-
<span class="pf-v5-c-label pf-m-blue">
|
|
310
|
-
<span class="pf-v5-c-label__content">
|
|
311
|
-
<span class="pf-v5-c-label__icon">
|
|
312
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
313
|
-
</span>
|
|
314
|
-
<span class="pf-v5-c-label__text">Label 2</span>
|
|
315
|
-
</span>
|
|
316
|
-
</span>
|
|
317
|
-
</li>
|
|
318
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
319
|
-
<span class="pf-v5-c-label pf-m-green">
|
|
320
|
-
<span class="pf-v5-c-label__content">
|
|
321
|
-
<span class="pf-v5-c-label__icon">
|
|
322
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
323
|
-
</span>
|
|
324
|
-
<span class="pf-v5-c-label__text">Label 3</span>
|
|
325
|
-
</span>
|
|
326
|
-
</span>
|
|
327
|
-
</li>
|
|
328
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
329
|
-
<span class="pf-v5-c-label pf-m-cyan">
|
|
330
|
-
<span class="pf-v5-c-label__content">
|
|
331
|
-
<span class="pf-v5-c-label__icon">
|
|
332
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
333
|
-
</span>
|
|
334
|
-
<span class="pf-v5-c-label__text">Label 4</span>
|
|
335
|
-
</span>
|
|
336
|
-
</span>
|
|
337
|
-
</li>
|
|
338
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
339
|
-
<span class="pf-v5-c-label pf-m-orange">
|
|
340
|
-
<span class="pf-v5-c-label__content">
|
|
341
|
-
<span class="pf-v5-c-label__icon">
|
|
342
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
343
|
-
</span>
|
|
344
|
-
<span class="pf-v5-c-label__text">Label 5</span>
|
|
345
|
-
</span>
|
|
346
|
-
</span>
|
|
347
|
-
</li>
|
|
348
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
349
|
-
<span class="pf-v5-c-label pf-m-red">
|
|
350
|
-
<span class="pf-v5-c-label__content">
|
|
351
|
-
<span class="pf-v5-c-label__icon">
|
|
352
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
353
|
-
</span>
|
|
354
|
-
<span class="pf-v5-c-label__text">Label 6</span>
|
|
355
|
-
</span>
|
|
356
|
-
</span>
|
|
357
|
-
</li>
|
|
358
|
-
</ul>
|
|
359
|
-
</div>
|
|
360
|
-
<div class="pf-v5-c-label-group__close">
|
|
361
|
-
<button
|
|
362
|
-
class="pf-v5-c-button pf-m-plain"
|
|
363
|
-
type="button"
|
|
364
|
-
aria-labelledby="label-group-category-removable-button label-group-category-removable-label"
|
|
365
|
-
aria-label="Close label group"
|
|
366
|
-
id="label-group-category-removable-button"
|
|
367
|
-
>
|
|
368
|
-
<i class="fas fa-times-circle" aria-hidden="true"></i>
|
|
369
|
-
</button>
|
|
370
|
-
</div>
|
|
371
|
-
</div>
|
|
372
|
-
|
|
373
|
-
```
|
|
374
|
-
|
|
375
|
-
### Vertical
|
|
376
|
-
|
|
377
|
-
```html
|
|
378
|
-
<div class="pf-v5-c-label-group pf-m-vertical">
|
|
379
|
-
<div class="pf-v5-c-label-group__main">
|
|
380
|
-
<ul
|
|
381
|
-
class="pf-v5-c-label-group__list"
|
|
382
|
-
role="list"
|
|
383
|
-
aria-label="Group of labels"
|
|
384
|
-
>
|
|
385
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
386
|
-
<span class="pf-v5-c-label">
|
|
387
|
-
<span class="pf-v5-c-label__content">
|
|
388
|
-
<span class="pf-v5-c-label__icon">
|
|
389
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
390
|
-
</span>
|
|
391
|
-
<span class="pf-v5-c-label__text">Label 1</span>
|
|
392
|
-
</span>
|
|
393
|
-
</span>
|
|
394
|
-
</li>
|
|
395
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
396
|
-
<span class="pf-v5-c-label pf-m-blue">
|
|
397
|
-
<span class="pf-v5-c-label__content">
|
|
398
|
-
<span class="pf-v5-c-label__icon">
|
|
399
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
400
|
-
</span>
|
|
401
|
-
<span class="pf-v5-c-label__text">Label 2</span>
|
|
402
|
-
</span>
|
|
403
|
-
</span>
|
|
404
|
-
</li>
|
|
405
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
406
|
-
<span class="pf-v5-c-label pf-m-green">
|
|
407
|
-
<span class="pf-v5-c-label__content">
|
|
408
|
-
<span class="pf-v5-c-label__icon">
|
|
409
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
410
|
-
</span>
|
|
411
|
-
<span class="pf-v5-c-label__text">Label 3</span>
|
|
412
|
-
</span>
|
|
413
|
-
</span>
|
|
414
|
-
</li>
|
|
415
|
-
</ul>
|
|
416
|
-
</div>
|
|
417
|
-
</div>
|
|
418
|
-
|
|
419
|
-
```
|
|
420
|
-
|
|
421
|
-
### Vertical overflow
|
|
422
|
-
|
|
423
|
-
```html
|
|
424
|
-
<div class="pf-v5-c-label-group pf-m-vertical">
|
|
425
|
-
<div class="pf-v5-c-label-group__main">
|
|
426
|
-
<ul
|
|
427
|
-
class="pf-v5-c-label-group__list"
|
|
428
|
-
role="list"
|
|
429
|
-
aria-label="Group of labels"
|
|
430
|
-
>
|
|
431
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
432
|
-
<span class="pf-v5-c-label">
|
|
433
|
-
<span class="pf-v5-c-label__content">
|
|
434
|
-
<span class="pf-v5-c-label__icon">
|
|
435
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
436
|
-
</span>
|
|
437
|
-
<span class="pf-v5-c-label__text">Label 1</span>
|
|
438
|
-
</span>
|
|
439
|
-
</span>
|
|
440
|
-
</li>
|
|
441
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
442
|
-
<span class="pf-v5-c-label pf-m-blue">
|
|
443
|
-
<span class="pf-v5-c-label__content">
|
|
444
|
-
<span class="pf-v5-c-label__icon">
|
|
445
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
446
|
-
</span>
|
|
447
|
-
<span class="pf-v5-c-label__text">Label 2</span>
|
|
448
|
-
</span>
|
|
449
|
-
</span>
|
|
450
|
-
</li>
|
|
451
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
452
|
-
<span class="pf-v5-c-label pf-m-green">
|
|
453
|
-
<span class="pf-v5-c-label__content">
|
|
454
|
-
<span class="pf-v5-c-label__icon">
|
|
455
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
456
|
-
</span>
|
|
457
|
-
<span class="pf-v5-c-label__text">Label 3</span>
|
|
458
|
-
</span>
|
|
459
|
-
</span>
|
|
460
|
-
</li>
|
|
461
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
462
|
-
<button class="pf-v5-c-label pf-m-overflow" type="button">
|
|
463
|
-
<span class="pf-v5-c-label__content">
|
|
464
|
-
<span class="pf-v5-c-label__text">3 more</span>
|
|
465
|
-
</span>
|
|
466
|
-
</button>
|
|
467
|
-
</li>
|
|
468
|
-
</ul>
|
|
469
|
-
</div>
|
|
470
|
-
</div>
|
|
471
|
-
|
|
472
|
-
```
|
|
473
|
-
|
|
474
|
-
### Vertical overflow expanded
|
|
475
|
-
|
|
476
|
-
```html
|
|
477
|
-
<div class="pf-v5-c-label-group pf-m-vertical">
|
|
478
|
-
<div class="pf-v5-c-label-group__main">
|
|
479
|
-
<ul
|
|
480
|
-
class="pf-v5-c-label-group__list"
|
|
481
|
-
role="list"
|
|
482
|
-
aria-label="Group of labels"
|
|
483
|
-
>
|
|
484
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
485
|
-
<span class="pf-v5-c-label">
|
|
486
|
-
<span class="pf-v5-c-label__content">
|
|
487
|
-
<span class="pf-v5-c-label__icon">
|
|
488
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
489
|
-
</span>
|
|
490
|
-
<span class="pf-v5-c-label__text">Label 1</span>
|
|
491
|
-
</span>
|
|
492
|
-
</span>
|
|
493
|
-
</li>
|
|
494
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
495
|
-
<span class="pf-v5-c-label pf-m-blue">
|
|
496
|
-
<span class="pf-v5-c-label__content">
|
|
497
|
-
<span class="pf-v5-c-label__icon">
|
|
498
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
499
|
-
</span>
|
|
500
|
-
<span class="pf-v5-c-label__text">Label 2</span>
|
|
501
|
-
</span>
|
|
502
|
-
</span>
|
|
503
|
-
</li>
|
|
504
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
505
|
-
<span class="pf-v5-c-label pf-m-green">
|
|
506
|
-
<span class="pf-v5-c-label__content">
|
|
507
|
-
<span class="pf-v5-c-label__icon">
|
|
508
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
509
|
-
</span>
|
|
510
|
-
<span class="pf-v5-c-label__text">Label 3</span>
|
|
511
|
-
</span>
|
|
512
|
-
</span>
|
|
513
|
-
</li>
|
|
514
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
515
|
-
<span class="pf-v5-c-label pf-m-cyan">
|
|
516
|
-
<span class="pf-v5-c-label__content">
|
|
517
|
-
<span class="pf-v5-c-label__icon">
|
|
518
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
519
|
-
</span>
|
|
520
|
-
<span class="pf-v5-c-label__text">Label 4</span>
|
|
521
|
-
</span>
|
|
522
|
-
</span>
|
|
523
|
-
</li>
|
|
524
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
525
|
-
<span class="pf-v5-c-label pf-m-purple">
|
|
526
|
-
<span class="pf-v5-c-label__content">
|
|
527
|
-
<span class="pf-v5-c-label__icon">
|
|
528
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
529
|
-
</span>
|
|
530
|
-
<span class="pf-v5-c-label__text">Label 5</span>
|
|
531
|
-
</span>
|
|
532
|
-
</span>
|
|
533
|
-
</li>
|
|
534
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
535
|
-
<button class="pf-v5-c-label pf-m-overflow" type="button">
|
|
536
|
-
<span class="pf-v5-c-label__content">
|
|
537
|
-
<span class="pf-v5-c-label__text">3 less</span>
|
|
538
|
-
</span>
|
|
539
|
-
</button>
|
|
540
|
-
</li>
|
|
541
|
-
</ul>
|
|
542
|
-
</div>
|
|
543
|
-
</div>
|
|
544
|
-
|
|
545
|
-
```
|
|
546
|
-
|
|
547
|
-
### Vertical category
|
|
548
|
-
|
|
549
|
-
```html
|
|
550
|
-
<div class="pf-v5-c-label-group pf-m-vertical pf-m-category">
|
|
551
|
-
<div class="pf-v5-c-label-group__main">
|
|
552
|
-
<span
|
|
553
|
-
class="pf-v5-c-label-group__label"
|
|
554
|
-
aria-hidden="true"
|
|
555
|
-
id="label-group-vertical-category-label"
|
|
556
|
-
>Group label</span>
|
|
557
|
-
<ul
|
|
558
|
-
class="pf-v5-c-label-group__list"
|
|
559
|
-
role="list"
|
|
560
|
-
aria-labelledby="label-group-vertical-category-label"
|
|
561
|
-
>
|
|
562
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
563
|
-
<span class="pf-v5-c-label">
|
|
564
|
-
<span class="pf-v5-c-label__content">
|
|
565
|
-
<span class="pf-v5-c-label__icon">
|
|
566
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
567
|
-
</span>
|
|
568
|
-
<span class="pf-v5-c-label__text">Label 1</span>
|
|
569
|
-
</span>
|
|
570
|
-
</span>
|
|
571
|
-
</li>
|
|
572
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
573
|
-
<span class="pf-v5-c-label pf-m-blue">
|
|
574
|
-
<span class="pf-v5-c-label__content">
|
|
575
|
-
<span class="pf-v5-c-label__icon">
|
|
576
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
577
|
-
</span>
|
|
578
|
-
<span class="pf-v5-c-label__text">Label 2</span>
|
|
579
|
-
</span>
|
|
580
|
-
</span>
|
|
581
|
-
</li>
|
|
582
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
583
|
-
<span class="pf-v5-c-label pf-m-green">
|
|
584
|
-
<span class="pf-v5-c-label__content">
|
|
585
|
-
<span class="pf-v5-c-label__icon">
|
|
586
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
587
|
-
</span>
|
|
588
|
-
<span class="pf-v5-c-label__text">Label 3</span>
|
|
589
|
-
</span>
|
|
590
|
-
</span>
|
|
591
|
-
</li>
|
|
592
|
-
</ul>
|
|
593
|
-
</div>
|
|
594
|
-
</div>
|
|
595
|
-
|
|
596
|
-
```
|
|
597
|
-
|
|
598
|
-
### Vertical category removable
|
|
599
|
-
|
|
600
|
-
```html
|
|
601
|
-
<div class="pf-v5-c-label-group pf-m-vertical pf-m-category">
|
|
602
|
-
<div class="pf-v5-c-label-group__main">
|
|
603
|
-
<span
|
|
604
|
-
class="pf-v5-c-label-group__label"
|
|
605
|
-
aria-hidden="true"
|
|
606
|
-
id="label-group-vertical-category-removable-label"
|
|
607
|
-
>Group label</span>
|
|
608
|
-
<ul
|
|
609
|
-
class="pf-v5-c-label-group__list"
|
|
610
|
-
role="list"
|
|
611
|
-
aria-labelledby="label-group-vertical-category-removable-label"
|
|
612
|
-
>
|
|
613
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
614
|
-
<span class="pf-v5-c-label">
|
|
615
|
-
<span class="pf-v5-c-label__content">
|
|
616
|
-
<span class="pf-v5-c-label__text">Label 1</span>
|
|
617
|
-
</span>
|
|
618
|
-
</span>
|
|
619
|
-
</li>
|
|
620
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
621
|
-
<span class="pf-v5-c-label pf-m-blue">
|
|
622
|
-
<span class="pf-v5-c-label__content">
|
|
623
|
-
<span class="pf-v5-c-label__text">Label 2</span>
|
|
624
|
-
</span>
|
|
625
|
-
</span>
|
|
626
|
-
</li>
|
|
627
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
628
|
-
<span class="pf-v5-c-label pf-m-green">
|
|
629
|
-
<span class="pf-v5-c-label__content">
|
|
630
|
-
<span class="pf-v5-c-label__text">Label 3</span>
|
|
631
|
-
</span>
|
|
632
|
-
</span>
|
|
633
|
-
</li>
|
|
634
|
-
</ul>
|
|
635
|
-
</div>
|
|
636
|
-
<div class="pf-v5-c-label-group__close">
|
|
637
|
-
<button
|
|
638
|
-
class="pf-v5-c-button pf-m-plain"
|
|
639
|
-
type="button"
|
|
640
|
-
aria-labelledby="label-group-vertical-category-removable-button label-group-vertical-category-removable-label"
|
|
641
|
-
aria-label="Close label group"
|
|
642
|
-
id="label-group-vertical-category-removable-button"
|
|
643
|
-
>
|
|
644
|
-
<i class="fas fa-times-circle" aria-hidden="true"></i>
|
|
645
|
-
</button>
|
|
646
|
-
</div>
|
|
647
|
-
</div>
|
|
648
|
-
|
|
649
|
-
```
|
|
650
|
-
|
|
651
|
-
In addition to the JavaScript management of [editable labels](/components/label#editable), dynamic label groups also need:
|
|
652
|
-
|
|
653
|
-
* `.pf-v5-c-label-group.pf-m-editable` onClick event should (excluding labels within) set focus on `.pf-v5-c-label-group__textarea`
|
|
654
|
-
|
|
655
|
-
### Editable labels, dynamic label group
|
|
656
|
-
|
|
657
|
-
```html isBeta
|
|
658
|
-
<div class="pf-v5-c-label-group pf-m-editable">
|
|
659
|
-
<div class="pf-v5-c-label-group__main">
|
|
660
|
-
<ul
|
|
661
|
-
class="pf-v5-c-label-group__list"
|
|
662
|
-
role="list"
|
|
663
|
-
aria-label="Group of labels"
|
|
664
|
-
>
|
|
665
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
666
|
-
<span class="pf-v5-c-label pf-m-editable pf-m-blue">
|
|
667
|
-
<button
|
|
668
|
-
class="pf-v5-c-label__content"
|
|
669
|
-
id="editable-labels-editable-group-example-editable-label-editable-1-editable-content"
|
|
670
|
-
aria-label="Editable text"
|
|
671
|
-
>
|
|
672
|
-
<span class="pf-v5-c-label__text">Editable label 1</span>
|
|
673
|
-
</button>
|
|
674
|
-
|
|
675
|
-
<span class="pf-v5-c-label__actions">
|
|
676
|
-
<button
|
|
677
|
-
class="pf-v5-c-button pf-m-plain"
|
|
678
|
-
type="button"
|
|
679
|
-
id="editable-labels-editable-group-example-editable-label-editable-1-button"
|
|
680
|
-
aria-label="Remove"
|
|
681
|
-
aria-labelledby="editable-labels-editable-group-example-editable-label-editable-1-button editable-labels-editable-group-example-editable-label-editable-1-text"
|
|
682
|
-
>
|
|
683
|
-
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
684
|
-
</button>
|
|
685
|
-
</span>
|
|
686
|
-
</span>
|
|
687
|
-
</li>
|
|
688
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
689
|
-
<span class="pf-v5-c-label pf-m-editable pf-m-blue">
|
|
690
|
-
<button
|
|
691
|
-
class="pf-v5-c-label__content"
|
|
692
|
-
id="editable-labels-editable-group-example-editable-label-editable-2-editable-content"
|
|
693
|
-
aria-label="Editable text"
|
|
694
|
-
>
|
|
695
|
-
<span class="pf-v5-c-label__text">Editable label 2</span>
|
|
696
|
-
</button>
|
|
697
|
-
|
|
698
|
-
<span class="pf-v5-c-label__actions">
|
|
699
|
-
<button
|
|
700
|
-
class="pf-v5-c-button pf-m-plain"
|
|
701
|
-
type="button"
|
|
702
|
-
id="editable-labels-editable-group-example-editable-label-editable-2-button"
|
|
703
|
-
aria-label="Remove"
|
|
704
|
-
aria-labelledby="editable-labels-editable-group-example-editable-label-editable-2-button editable-labels-editable-group-example-editable-label-editable-2-text"
|
|
705
|
-
>
|
|
706
|
-
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
707
|
-
</button>
|
|
708
|
-
</span>
|
|
709
|
-
</span>
|
|
710
|
-
</li>
|
|
711
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
712
|
-
<span class="pf-v5-c-label pf-m-editable pf-m-blue">
|
|
713
|
-
<button
|
|
714
|
-
class="pf-v5-c-label__content"
|
|
715
|
-
id="editable-labels-editable-group-example-editable-label-editable-3-editable-content"
|
|
716
|
-
aria-label="Editable text"
|
|
717
|
-
>
|
|
718
|
-
<span class="pf-v5-c-label__text">Editable label 3</span>
|
|
719
|
-
</button>
|
|
720
|
-
|
|
721
|
-
<span class="pf-v5-c-label__actions">
|
|
722
|
-
<button
|
|
723
|
-
class="pf-v5-c-button pf-m-plain"
|
|
724
|
-
type="button"
|
|
725
|
-
id="editable-labels-editable-group-example-editable-label-editable-3-button"
|
|
726
|
-
aria-label="Remove"
|
|
727
|
-
aria-labelledby="editable-labels-editable-group-example-editable-label-editable-3-button editable-labels-editable-group-example-editable-label-editable-3-text"
|
|
728
|
-
>
|
|
729
|
-
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
730
|
-
</button>
|
|
731
|
-
</span>
|
|
732
|
-
</span>
|
|
733
|
-
</li>
|
|
734
|
-
<li class="pf-v5-c-label-group__list-item pf-m-textarea">
|
|
735
|
-
<textarea
|
|
736
|
-
class="pf-v5-c-label-group__textarea"
|
|
737
|
-
rows="1"
|
|
738
|
-
tabindex="0"
|
|
739
|
-
aria-label="New label"
|
|
740
|
-
></textarea>
|
|
741
|
-
</li>
|
|
742
|
-
</ul>
|
|
743
|
-
</div>
|
|
744
|
-
</div>
|
|
745
|
-
|
|
746
|
-
```
|
|
747
|
-
|
|
748
|
-
### Editable labels, label active, dynamic label group
|
|
749
|
-
|
|
750
|
-
```html isBeta
|
|
751
|
-
<div class="pf-v5-c-label-group pf-m-editable">
|
|
752
|
-
<div class="pf-v5-c-label-group__main">
|
|
753
|
-
<ul
|
|
754
|
-
class="pf-v5-c-label-group__list"
|
|
755
|
-
role="list"
|
|
756
|
-
aria-label="Group of labels"
|
|
757
|
-
>
|
|
758
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
759
|
-
<span class="pf-v5-c-label pf-m-editable pf-m-blue">
|
|
760
|
-
<button
|
|
761
|
-
class="pf-v5-c-label__content"
|
|
762
|
-
id="editable-labels-label-active-editable-group-example-editable-label-editable-1-editable-content"
|
|
763
|
-
aria-label="Editable text"
|
|
764
|
-
>
|
|
765
|
-
<span class="pf-v5-c-label__text">Editable label 1</span>
|
|
766
|
-
</button>
|
|
767
|
-
|
|
768
|
-
<span class="pf-v5-c-label__actions">
|
|
769
|
-
<button
|
|
770
|
-
class="pf-v5-c-button pf-m-plain"
|
|
771
|
-
type="button"
|
|
772
|
-
id="editable-labels-label-active-editable-group-example-editable-label-editable-1-button"
|
|
773
|
-
aria-label="Remove"
|
|
774
|
-
aria-labelledby="editable-labels-label-active-editable-group-example-editable-label-editable-1-button editable-labels-label-active-editable-group-example-editable-label-editable-1-text"
|
|
775
|
-
>
|
|
776
|
-
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
777
|
-
</button>
|
|
778
|
-
</span>
|
|
779
|
-
</span>
|
|
780
|
-
</li>
|
|
781
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
782
|
-
<span class="pf-v5-c-label pf-m-editable pf-m-blue">
|
|
783
|
-
<button
|
|
784
|
-
class="pf-v5-c-label__content"
|
|
785
|
-
id="editable-labels-label-active-editable-group-example-editable-label-editable-2-editable-content"
|
|
786
|
-
aria-label="Editable text"
|
|
787
|
-
>
|
|
788
|
-
<span class="pf-v5-c-label__text">Editable label 2</span>
|
|
789
|
-
</button>
|
|
790
|
-
|
|
791
|
-
<span class="pf-v5-c-label__actions">
|
|
792
|
-
<button
|
|
793
|
-
class="pf-v5-c-button pf-m-plain"
|
|
794
|
-
type="button"
|
|
795
|
-
id="editable-labels-label-active-editable-group-example-editable-label-editable-2-button"
|
|
796
|
-
aria-label="Remove"
|
|
797
|
-
aria-labelledby="editable-labels-label-active-editable-group-example-editable-label-editable-2-button editable-labels-label-active-editable-group-example-editable-label-editable-2-text"
|
|
798
|
-
>
|
|
799
|
-
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
800
|
-
</button>
|
|
801
|
-
</span>
|
|
802
|
-
</span>
|
|
803
|
-
</li>
|
|
804
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
805
|
-
<span
|
|
806
|
-
class="pf-v5-c-label pf-m-editable pf-m-editable-active pf-m-blue"
|
|
807
|
-
>
|
|
808
|
-
<input
|
|
809
|
-
class="pf-v5-c-label__content"
|
|
810
|
-
id="editable-labels-label-active-editable-group-example-editable-label-editable-3-editable-content"
|
|
811
|
-
type="text"
|
|
812
|
-
value="Editable label 3, active"
|
|
813
|
-
aria-label="Editable text"
|
|
814
|
-
/>
|
|
815
|
-
|
|
816
|
-
<span class="pf-v5-c-label__actions">
|
|
817
|
-
<button
|
|
818
|
-
class="pf-v5-c-button pf-m-plain"
|
|
819
|
-
type="button"
|
|
820
|
-
id="editable-labels-label-active-editable-group-example-editable-label-editable-3-button"
|
|
821
|
-
aria-label="Remove"
|
|
822
|
-
aria-labelledby="editable-labels-label-active-editable-group-example-editable-label-editable-3-button editable-labels-label-active-editable-group-example-editable-label-editable-3-text"
|
|
823
|
-
>
|
|
824
|
-
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
825
|
-
</button>
|
|
826
|
-
</span>
|
|
827
|
-
</span>
|
|
828
|
-
</li>
|
|
829
|
-
<li class="pf-v5-c-label-group__list-item pf-m-textarea">
|
|
830
|
-
<textarea
|
|
831
|
-
class="pf-v5-c-label-group__textarea"
|
|
832
|
-
rows="1"
|
|
833
|
-
tabindex="0"
|
|
834
|
-
aria-label="New label"
|
|
835
|
-
></textarea>
|
|
836
|
-
</li>
|
|
837
|
-
</ul>
|
|
838
|
-
</div>
|
|
839
|
-
</div>
|
|
840
|
-
|
|
841
|
-
```
|
|
842
|
-
|
|
843
|
-
### Static labels, dynamic label group
|
|
844
|
-
|
|
845
|
-
```html
|
|
846
|
-
<div class="pf-v5-c-label-group pf-m-editable">
|
|
847
|
-
<div class="pf-v5-c-label-group__main">
|
|
848
|
-
<ul
|
|
849
|
-
class="pf-v5-c-label-group__list"
|
|
850
|
-
role="list"
|
|
851
|
-
aria-label="Group of labels"
|
|
852
|
-
>
|
|
853
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
854
|
-
<span class="pf-v5-c-label pf-m-green">
|
|
855
|
-
<span class="pf-v5-c-label__content">
|
|
856
|
-
<span class="pf-v5-c-label__text">Static label 1</span>
|
|
857
|
-
</span>
|
|
858
|
-
<span class="pf-v5-c-label__actions">
|
|
859
|
-
<button
|
|
860
|
-
class="pf-v5-c-button pf-m-plain"
|
|
861
|
-
type="button"
|
|
862
|
-
id="static-labels-dynamic-label-group-example-editable-label-static-1-button"
|
|
863
|
-
aria-label="Remove"
|
|
864
|
-
aria-labelledby="static-labels-dynamic-label-group-example-editable-label-static-1-button static-labels-dynamic-label-group-example-editable-label-static-1-text"
|
|
865
|
-
>
|
|
866
|
-
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
867
|
-
</button>
|
|
868
|
-
</span>
|
|
869
|
-
</span>
|
|
870
|
-
</li>
|
|
871
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
872
|
-
<span class="pf-v5-c-label pf-m-green">
|
|
873
|
-
<span class="pf-v5-c-label__content">
|
|
874
|
-
<span class="pf-v5-c-label__text">Static label 2</span>
|
|
875
|
-
</span>
|
|
876
|
-
<span class="pf-v5-c-label__actions">
|
|
877
|
-
<button
|
|
878
|
-
class="pf-v5-c-button pf-m-plain"
|
|
879
|
-
type="button"
|
|
880
|
-
id="static-labels-dynamic-label-group-example-editable-label-static-2-button"
|
|
881
|
-
aria-label="Remove"
|
|
882
|
-
aria-labelledby="static-labels-dynamic-label-group-example-editable-label-static-2-button static-labels-dynamic-label-group-example-editable-label-static-2-text"
|
|
883
|
-
>
|
|
884
|
-
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
885
|
-
</button>
|
|
886
|
-
</span>
|
|
887
|
-
</span>
|
|
888
|
-
</li>
|
|
889
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
890
|
-
<span class="pf-v5-c-label pf-m-green">
|
|
891
|
-
<span class="pf-v5-c-label__content">
|
|
892
|
-
<span class="pf-v5-c-label__text">Static label 3</span>
|
|
893
|
-
</span>
|
|
894
|
-
<span class="pf-v5-c-label__actions">
|
|
895
|
-
<button
|
|
896
|
-
class="pf-v5-c-button pf-m-plain"
|
|
897
|
-
type="button"
|
|
898
|
-
id="static-labels-dynamic-label-group-example-editable-label-static-3-button"
|
|
899
|
-
aria-label="Remove"
|
|
900
|
-
aria-labelledby="static-labels-dynamic-label-group-example-editable-label-static-3-button static-labels-dynamic-label-group-example-editable-label-static-3-text"
|
|
901
|
-
>
|
|
902
|
-
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
903
|
-
</button>
|
|
904
|
-
</span>
|
|
905
|
-
</span>
|
|
906
|
-
</li>
|
|
907
|
-
<li class="pf-v5-c-label-group__list-item pf-m-textarea">
|
|
908
|
-
<textarea
|
|
909
|
-
class="pf-v5-c-label-group__textarea"
|
|
910
|
-
rows="1"
|
|
911
|
-
tabindex="0"
|
|
912
|
-
aria-label="New label"
|
|
913
|
-
></textarea>
|
|
914
|
-
</li>
|
|
915
|
-
</ul>
|
|
916
|
-
</div>
|
|
917
|
-
</div>
|
|
918
|
-
|
|
919
|
-
```
|
|
920
|
-
|
|
921
|
-
### Mixed labels (static / editable), dynamic label group
|
|
922
|
-
|
|
923
|
-
```html isBeta
|
|
924
|
-
<div class="pf-v5-c-label-group pf-m-editable">
|
|
925
|
-
<div class="pf-v5-c-label-group__main">
|
|
926
|
-
<ul
|
|
927
|
-
class="pf-v5-c-label-group__list"
|
|
928
|
-
role="list"
|
|
929
|
-
aria-label="Group of labels"
|
|
930
|
-
>
|
|
931
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
932
|
-
<span class="pf-v5-c-label pf-m-green">
|
|
933
|
-
<span class="pf-v5-c-label__content">
|
|
934
|
-
<span class="pf-v5-c-label__text">Static label 1</span>
|
|
935
|
-
</span>
|
|
936
|
-
<span class="pf-v5-c-label__actions">
|
|
937
|
-
<button
|
|
938
|
-
class="pf-v5-c-button pf-m-plain"
|
|
939
|
-
type="button"
|
|
940
|
-
id="mixed-labels-dynamic-label-group-example-editable-label-static-1-button"
|
|
941
|
-
aria-label="Remove"
|
|
942
|
-
aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-static-1-button mixed-labels-dynamic-label-group-example-editable-label-static-1-text"
|
|
943
|
-
>
|
|
944
|
-
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
945
|
-
</button>
|
|
946
|
-
</span>
|
|
947
|
-
</span>
|
|
948
|
-
</li>
|
|
949
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
950
|
-
<span class="pf-v5-c-label pf-m-green">
|
|
951
|
-
<span class="pf-v5-c-label__content">
|
|
952
|
-
<span class="pf-v5-c-label__text">Static label 2</span>
|
|
953
|
-
</span>
|
|
954
|
-
<span class="pf-v5-c-label__actions">
|
|
955
|
-
<button
|
|
956
|
-
class="pf-v5-c-button pf-m-plain"
|
|
957
|
-
type="button"
|
|
958
|
-
id="mixed-labels-dynamic-label-group-example-editable-label-static-2-button"
|
|
959
|
-
aria-label="Remove"
|
|
960
|
-
aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-static-2-button mixed-labels-dynamic-label-group-example-editable-label-static-2-text"
|
|
961
|
-
>
|
|
962
|
-
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
963
|
-
</button>
|
|
964
|
-
</span>
|
|
965
|
-
</span>
|
|
966
|
-
</li>
|
|
967
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
968
|
-
<span class="pf-v5-c-label pf-m-editable pf-m-blue">
|
|
969
|
-
<button
|
|
970
|
-
class="pf-v5-c-label__content"
|
|
971
|
-
id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-editable-content"
|
|
972
|
-
aria-label="Editable text"
|
|
973
|
-
>
|
|
974
|
-
<span class="pf-v5-c-label__text">Dynamic, editable label 1</span>
|
|
975
|
-
</button>
|
|
976
|
-
|
|
977
|
-
<span class="pf-v5-c-label__actions">
|
|
978
|
-
<button
|
|
979
|
-
class="pf-v5-c-button pf-m-plain"
|
|
980
|
-
type="button"
|
|
981
|
-
id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-button"
|
|
982
|
-
aria-label="Remove"
|
|
983
|
-
aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-button mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-text"
|
|
984
|
-
>
|
|
985
|
-
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
986
|
-
</button>
|
|
987
|
-
</span>
|
|
988
|
-
</span>
|
|
989
|
-
</li>
|
|
990
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
991
|
-
<span class="pf-v5-c-label pf-m-editable pf-m-blue">
|
|
992
|
-
<button
|
|
993
|
-
class="pf-v5-c-label__content"
|
|
994
|
-
id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-editable-content"
|
|
995
|
-
aria-label="Editable text"
|
|
996
|
-
>
|
|
997
|
-
<span class="pf-v5-c-label__text">Dynamic, editable label 2</span>
|
|
998
|
-
</button>
|
|
999
|
-
|
|
1000
|
-
<span class="pf-v5-c-label__actions">
|
|
1001
|
-
<button
|
|
1002
|
-
class="pf-v5-c-button pf-m-plain"
|
|
1003
|
-
type="button"
|
|
1004
|
-
id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-button"
|
|
1005
|
-
aria-label="Remove"
|
|
1006
|
-
aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-button mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-text"
|
|
1007
|
-
>
|
|
1008
|
-
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1009
|
-
</button>
|
|
1010
|
-
</span>
|
|
1011
|
-
</span>
|
|
1012
|
-
</li>
|
|
1013
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
1014
|
-
<span class="pf-v5-c-label pf-m-editable pf-m-blue">
|
|
1015
|
-
<button
|
|
1016
|
-
class="pf-v5-c-label__content"
|
|
1017
|
-
id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-editable-content"
|
|
1018
|
-
aria-label="Editable text"
|
|
1019
|
-
>
|
|
1020
|
-
<span class="pf-v5-c-label__text">Dynamic, editable label 3</span>
|
|
1021
|
-
</button>
|
|
1022
|
-
|
|
1023
|
-
<span class="pf-v5-c-label__actions">
|
|
1024
|
-
<button
|
|
1025
|
-
class="pf-v5-c-button pf-m-plain"
|
|
1026
|
-
type="button"
|
|
1027
|
-
id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-button"
|
|
1028
|
-
aria-label="Remove"
|
|
1029
|
-
aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-button mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-text"
|
|
1030
|
-
>
|
|
1031
|
-
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1032
|
-
</button>
|
|
1033
|
-
</span>
|
|
1034
|
-
</span>
|
|
1035
|
-
</li>
|
|
1036
|
-
<li class="pf-v5-c-label-group__list-item pf-m-textarea">
|
|
1037
|
-
<textarea
|
|
1038
|
-
class="pf-v5-c-label-group__textarea"
|
|
1039
|
-
rows="1"
|
|
1040
|
-
tabindex="0"
|
|
1041
|
-
aria-label="New label"
|
|
1042
|
-
></textarea>
|
|
1043
|
-
</li>
|
|
1044
|
-
</ul>
|
|
1045
|
-
</div>
|
|
1046
|
-
</div>
|
|
1047
|
-
|
|
1048
|
-
```
|
|
1049
|
-
|
|
1050
|
-
### Compact labels
|
|
1051
|
-
|
|
1052
|
-
```html
|
|
1053
|
-
<div class="pf-v5-c-label-group">
|
|
1054
|
-
<div class="pf-v5-c-label-group__main">
|
|
1055
|
-
<ul
|
|
1056
|
-
class="pf-v5-c-label-group__list"
|
|
1057
|
-
role="list"
|
|
1058
|
-
aria-label="Group of labels"
|
|
1059
|
-
>
|
|
1060
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
1061
|
-
<span class="pf-v5-c-label pf-m-compact">
|
|
1062
|
-
<span class="pf-v5-c-label__content">
|
|
1063
|
-
<span class="pf-v5-c-label__icon">
|
|
1064
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1065
|
-
</span>
|
|
1066
|
-
<span class="pf-v5-c-label__text">Label 1</span>
|
|
1067
|
-
</span>
|
|
1068
|
-
</span>
|
|
1069
|
-
</li>
|
|
1070
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
1071
|
-
<span class="pf-v5-c-label pf-m-compact pf-m-blue">
|
|
1072
|
-
<span class="pf-v5-c-label__content">
|
|
1073
|
-
<span class="pf-v5-c-label__icon">
|
|
1074
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1075
|
-
</span>
|
|
1076
|
-
<span class="pf-v5-c-label__text">Label 2</span>
|
|
1077
|
-
</span>
|
|
1078
|
-
</span>
|
|
1079
|
-
</li>
|
|
1080
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
1081
|
-
<span class="pf-v5-c-label pf-m-compact pf-m-green">
|
|
1082
|
-
<span class="pf-v5-c-label__content">
|
|
1083
|
-
<span class="pf-v5-c-label__icon">
|
|
1084
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1085
|
-
</span>
|
|
1086
|
-
<span class="pf-v5-c-label__text">Label 3</span>
|
|
1087
|
-
</span>
|
|
1088
|
-
</span>
|
|
1089
|
-
</li>
|
|
1090
|
-
</ul>
|
|
1091
|
-
</div>
|
|
1092
|
-
</div>
|
|
1093
|
-
|
|
1094
|
-
```
|
|
1095
|
-
|
|
1096
|
-
### Compact labels, overflow
|
|
1097
|
-
|
|
1098
|
-
```html
|
|
1099
|
-
<div class="pf-v5-c-label-group">
|
|
1100
|
-
<div class="pf-v5-c-label-group__main">
|
|
1101
|
-
<ul
|
|
1102
|
-
class="pf-v5-c-label-group__list"
|
|
1103
|
-
role="list"
|
|
1104
|
-
aria-label="Group of labels"
|
|
1105
|
-
>
|
|
1106
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
1107
|
-
<span class="pf-v5-c-label pf-m-compact">
|
|
1108
|
-
<span class="pf-v5-c-label__content">
|
|
1109
|
-
<span class="pf-v5-c-label__icon">
|
|
1110
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1111
|
-
</span>
|
|
1112
|
-
<span class="pf-v5-c-label__text">Label 1</span>
|
|
1113
|
-
</span>
|
|
1114
|
-
</span>
|
|
1115
|
-
</li>
|
|
1116
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
1117
|
-
<span class="pf-v5-c-label pf-m-compact pf-m-blue">
|
|
1118
|
-
<span class="pf-v5-c-label__content">
|
|
1119
|
-
<span class="pf-v5-c-label__icon">
|
|
1120
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1121
|
-
</span>
|
|
1122
|
-
<span class="pf-v5-c-label__text">Label 2</span>
|
|
1123
|
-
</span>
|
|
1124
|
-
</span>
|
|
1125
|
-
</li>
|
|
1126
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
1127
|
-
<span class="pf-v5-c-label pf-m-compact pf-m-green">
|
|
1128
|
-
<span class="pf-v5-c-label__content">
|
|
1129
|
-
<span class="pf-v5-c-label__icon">
|
|
1130
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1131
|
-
</span>
|
|
1132
|
-
<span class="pf-v5-c-label__text">Label 3</span>
|
|
1133
|
-
</span>
|
|
1134
|
-
</span>
|
|
1135
|
-
</li>
|
|
1136
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
1137
|
-
<button class="pf-v5-c-label pf-m-compact pf-m-overflow" type="button">
|
|
1138
|
-
<span class="pf-v5-c-label__content">
|
|
1139
|
-
<span class="pf-v5-c-label__text">3 more</span>
|
|
1140
|
-
</span>
|
|
1141
|
-
</button>
|
|
1142
|
-
</li>
|
|
1143
|
-
</ul>
|
|
1144
|
-
</div>
|
|
1145
|
-
</div>
|
|
1146
|
-
|
|
1147
|
-
```
|
|
1148
|
-
|
|
1149
|
-
### Compact labels, vertical
|
|
1150
|
-
|
|
1151
|
-
```html
|
|
1152
|
-
<div class="pf-v5-c-label-group pf-m-vertical">
|
|
1153
|
-
<div class="pf-v5-c-label-group__main">
|
|
1154
|
-
<ul
|
|
1155
|
-
class="pf-v5-c-label-group__list"
|
|
1156
|
-
role="list"
|
|
1157
|
-
aria-label="Group of labels"
|
|
1158
|
-
>
|
|
1159
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
1160
|
-
<span class="pf-v5-c-label pf-m-compact">
|
|
1161
|
-
<span class="pf-v5-c-label__content">
|
|
1162
|
-
<span class="pf-v5-c-label__icon">
|
|
1163
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1164
|
-
</span>
|
|
1165
|
-
<span class="pf-v5-c-label__text">Label 1</span>
|
|
1166
|
-
</span>
|
|
1167
|
-
</span>
|
|
1168
|
-
</li>
|
|
1169
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
1170
|
-
<span class="pf-v5-c-label pf-m-compact pf-m-blue">
|
|
1171
|
-
<span class="pf-v5-c-label__content">
|
|
1172
|
-
<span class="pf-v5-c-label__icon">
|
|
1173
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1174
|
-
</span>
|
|
1175
|
-
<span class="pf-v5-c-label__text">Label 2</span>
|
|
1176
|
-
</span>
|
|
1177
|
-
</span>
|
|
1178
|
-
</li>
|
|
1179
|
-
<li class="pf-v5-c-label-group__list-item">
|
|
1180
|
-
<span class="pf-v5-c-label pf-m-compact pf-m-green">
|
|
1181
|
-
<span class="pf-v5-c-label__content">
|
|
1182
|
-
<span class="pf-v5-c-label__icon">
|
|
1183
|
-
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1184
|
-
</span>
|
|
1185
|
-
<span class="pf-v5-c-label__text">Label 3</span>
|
|
1186
|
-
</span>
|
|
1187
|
-
</span>
|
|
1188
|
-
</li>
|
|
1189
|
-
</ul>
|
|
1190
|
-
</div>
|
|
1191
|
-
</div>
|
|
1192
|
-
|
|
1193
|
-
```
|
|
1194
|
-
|
|
1195
|
-
## Documentation
|
|
1196
|
-
|
|
1197
|
-
### Accessibility
|
|
1198
|
-
|
|
1199
|
-
| Attribute | Applied to | Outcome |
|
|
1200
|
-
| -- | -- | -- |
|
|
1201
|
-
| `role="list"` | `.pf-v5-c-label-group__list` | Indicates that the label group list is a list element. This role is redundant since `.pf-v5-c-label-group__list` is a `<ul>` but is required for screen readers to announce the list propertly. **Required** |
|
|
1202
|
-
| `aria-label="[button label text]"` | `.pf-v5-c-label-group__close > button` | Provides an accessible name for a label group close button when an icon is used instead of text. Required when an icon is used with no supporting text. **Required** |
|
|
1203
|
-
| `aria-labelledby="[id value of .pf-v5-c-label-group__close > button] [id value of .pf-v5-c-label-group__label]"` | `.pf-v5-c-label-group__close > button` | Provides an accessible name for the button. **Required** |
|
|
1204
|
-
| `aria-label="[label text]"` | `.pf-v5-c-label-group__textarea` | Provides an accessible name for the textarea. **Required** |
|
|
1205
|
-
| `row="1"` | `.pf-v5-c-label-group__textarea` | Indicates that the label group textarea is one row. **Required** |
|
|
1206
|
-
| `tabindex="0"` | `.pf-v5-c-label-group__textarea` | Inserts the label group textarea into the tab order of the page so that it is focusable. **Required** |
|
|
1207
|
-
|
|
1208
|
-
### Usage
|
|
1209
|
-
|
|
1210
|
-
| Class | Applied to | Outcome |
|
|
1211
|
-
| -- | -- | -- |
|
|
1212
|
-
| `.pf-v5-c-label-group` | `<div>` | Initiates the label group component. **Required.** |
|
|
1213
|
-
| `.pf-v5-c-label-group__list` | `<ul>` | Initiates the container for a list of labels. **Required.** |
|
|
1214
|
-
| `.pf-v5-c-label-group__list-item` | `<li>` | Initiates the list item inside of the label group. **Required.** |
|
|
1215
|
-
| `.pf-v5-c-label-group__main` | `<div>` | Initiates the main element in the label group. **Required when label and list are present** |
|
|
1216
|
-
| `.pf-v5-c-label-group__textarea` | `<textarea>` | Initiates the textarea element in the label group. **Required when label group is editable** |
|
|
1217
|
-
| `.pf-v5-c-label-group__label` | `<span>` | Initiates the label to be used in the label group. |
|
|
1218
|
-
| `.pf-v5-c-label-group__close` | `<div>` | Initiates the container used for the button to remove the label group. |
|
|
1219
|
-
| `.pf-v5-c-button` | `.pf-v5-c-label-group__close <button>` | Initiates the button used to remove the label group. |
|
|
1220
|
-
| `.pf-m-editable` | `.pf-v5-c-label-group` | Modifies the label group to support editable styling. |
|
|
1221
|
-
| `.pf-m-category` | `.pf-v5-c-label-group` | Modifies the label group to support category styling. |
|
|
1222
|
-
| `.pf-m-textarea` | `.pf-v5-c-label-group__list-item` | Modifies the label group list item to support textarea. |
|