@patternfly/patternfly 4.164.0 → 4.164.4
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/RELEASE-NOTES.md +31 -0
- package/components/Label/label.css +37 -0
- package/components/Label/label.scss +43 -0
- package/components/Truncate/truncate.css +1 -1
- package/components/Truncate/truncate.scss +1 -1
- package/docs/components/Label/examples/Label.md +102 -41
- package/docs/components/LabelGroup/examples/LabelGroup.md +98 -73
- package/docs/demos/Card/examples/Card.md +22 -0
- package/docs/demos/Tabs/examples/Tabs.md +2 -0
- package/docs/pages/contribution.md +1 -1
- package/package.json +1 -1
- package/patternfly-no-reset.css +38 -1
- package/patternfly.css +38 -1
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/RELEASE-NOTES.md
CHANGED
|
@@ -4,6 +4,37 @@ section: developer-resources
|
|
|
4
4
|
releaseNoteTOC: true
|
|
5
5
|
---
|
|
6
6
|
|
|
7
|
+
## 2021.16 release notes (2021-12-07)
|
|
8
|
+
Packages released:
|
|
9
|
+
- [@patternfly/patternfly@v4.164.2](https://www.npmjs.com/package/@patternfly/patternfly/v/4.164.2)
|
|
10
|
+
|
|
11
|
+
### Components
|
|
12
|
+
- **Button:** Added demo for progress button completion state ([#4528](https://github.com/patternfly/patternfly/pull/4528))
|
|
13
|
+
- **Card:** Replaced dropdowns with selects in demos ([#4520](https://github.com/patternfly/patternfly/pull/4520))
|
|
14
|
+
- **Description list:** Added columnar layout ([#4544](https://github.com/patternfly/patternfly/pull/4544))
|
|
15
|
+
- **Dropdown:**
|
|
16
|
+
- Added plain text variant ([#4542](https://github.com/patternfly/patternfly/pull/4542))
|
|
17
|
+
- Added disabled styles ([#4543](https://github.com/patternfly/patternfly/pull/4543))
|
|
18
|
+
- **Form:** Added support for horizontal layout at various breakpoints ([#4536](https://github.com/patternfly/patternfly/pull/4536))
|
|
19
|
+
- **Multiple file upload:** Added component ([#4548](https://github.com/patternfly/patternfly/pull/4548))
|
|
20
|
+
- **Table:**
|
|
21
|
+
- Removed cursor pointer on disabled checkboxes ([#4527](https://github.com/patternfly/patternfly/pull/4527))
|
|
22
|
+
- Removed extra padding from nested table cells ([#4529](https://github.com/patternfly/patternfly/pull/4529))
|
|
23
|
+
- Reorganized documentation ([#4539](https://github.com/patternfly/patternfly/pull/4539))
|
|
24
|
+
- Increased target area of checkboxes/radios ([#4546](https://github.com/patternfly/patternfly/pull/4546))
|
|
25
|
+
- **Toolbar:** Set labels to show in collapsed state ([#4451](https://github.com/patternfly/patternfly/pull/4451))
|
|
26
|
+
- **Truncate:**
|
|
27
|
+
- Added truncate component ([#4502](https://github.com/patternfly/patternfly/pull/4502))
|
|
28
|
+
- Fixed font size var value ([#4560](https://github.com/patternfly/patternfly/pull/4560))
|
|
29
|
+
|
|
30
|
+
### Other
|
|
31
|
+
- **Build:**
|
|
32
|
+
- Added a11y coverage report action ([#4530](https://github.com/patternfly/patternfly/pull/4530))
|
|
33
|
+
- Updated stylelint, deps ([#4537](https://github.com/patternfly/patternfly/pull/4537))
|
|
34
|
+
- **Demos:** Added a password generator demo ([#4531](https://github.com/patternfly/patternfly/pull/4531))
|
|
35
|
+
- **Fonts:** Added opt-ins for new red hat font ([#4476](https://github.com/patternfly/patternfly/pull/4476))
|
|
36
|
+
- **Global:** Removed custom firefox focus styles ([#4533](https://github.com/patternfly/patternfly/pull/4533))
|
|
37
|
+
|
|
7
38
|
## 2021.15 release notes (2021-11-16)
|
|
8
39
|
Packages released:
|
|
9
40
|
- [@patternfly/patternfly@v4.159.1](https://www.npmjs.com/package/@patternfly/patternfly/v/4.159.1)
|
|
@@ -93,6 +93,7 @@
|
|
|
93
93
|
--pf-c-label--m-compact--PaddingBottom: 0;
|
|
94
94
|
--pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
|
|
95
95
|
--pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
|
|
96
|
+
--pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
|
|
96
97
|
--pf-c-label__content--Color: var(--pf-global--Color--100);
|
|
97
98
|
--pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
|
|
98
99
|
--pf-c-label__text--MaxWidth: 16ch;
|
|
@@ -107,6 +108,18 @@
|
|
|
107
108
|
--pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
|
|
108
109
|
--pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
|
|
109
110
|
--pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
|
|
111
|
+
--pf-c-label__editable-text--MaxWidth: 16ch;
|
|
112
|
+
--pf-c-label__editable-text--BorderWidth: 0;
|
|
113
|
+
--pf-c-label--m-editable--Cursor: pointer;
|
|
114
|
+
--pf-c-label--m-editable--TextDecoration: underline;
|
|
115
|
+
--pf-c-label--m-editable--TextDecorationStyle: dashed;
|
|
116
|
+
--pf-c-label--m-editable--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
|
|
117
|
+
--pf-c-label--m-editable--TextDecorationOffset: 0.25rem;
|
|
118
|
+
--pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
|
|
119
|
+
--pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
|
|
120
|
+
--pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
|
|
121
|
+
--pf-c-label--m-editable--m-editable-active--Cursor: auto;
|
|
122
|
+
--pf-c-label--m-editable--m-editable-active--TextDecoration: none;
|
|
110
123
|
--pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
|
|
111
124
|
--pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
|
|
112
125
|
--pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
|
|
@@ -125,6 +138,7 @@
|
|
|
125
138
|
--pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
|
|
126
139
|
--pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
|
|
127
140
|
--pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
|
|
141
|
+
--pf-c-label--m-editable--TextDecorationOffset: var(--pf-c-label--m-compact--m-editable--TextDecorationOffset);
|
|
128
142
|
}
|
|
129
143
|
.pf-c-label.pf-m-blue {
|
|
130
144
|
--pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor);
|
|
@@ -215,7 +229,23 @@
|
|
|
215
229
|
--pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
|
|
216
230
|
}
|
|
217
231
|
|
|
232
|
+
.pf-c-label.pf-m-editable {
|
|
233
|
+
text-decoration: var(--pf-c-label--m-editable--TextDecoration);
|
|
234
|
+
cursor: var(--pf-c-label--m-editable--Cursor);
|
|
235
|
+
text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
|
|
236
|
+
text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
|
|
237
|
+
text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
|
|
238
|
+
text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
|
|
239
|
+
}
|
|
240
|
+
.pf-c-label.pf-m-editable:hover {
|
|
241
|
+
--pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
|
|
242
|
+
}
|
|
243
|
+
.pf-c-label.pf-m-editable:focus {
|
|
244
|
+
--pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
|
|
245
|
+
}
|
|
218
246
|
.pf-c-label.pf-m-editable-active {
|
|
247
|
+
--pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
|
|
248
|
+
--pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
|
|
219
249
|
--pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
|
|
220
250
|
--pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderWidth);
|
|
221
251
|
--pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderColor);
|
|
@@ -223,6 +253,13 @@
|
|
|
223
253
|
.pf-c-label.pf-m-editable-active .pf-c-button {
|
|
224
254
|
visibility: hidden;
|
|
225
255
|
}
|
|
256
|
+
.pf-c-label .pf-c-label__editable-text {
|
|
257
|
+
overflow: hidden;
|
|
258
|
+
text-overflow: ellipsis;
|
|
259
|
+
white-space: nowrap;
|
|
260
|
+
max-width: var(--pf-c-label__editable-text--MaxWidth);
|
|
261
|
+
border-width: var(--pf-c-label__editable-text--BorderWidth);
|
|
262
|
+
}
|
|
226
263
|
.pf-c-label .pf-c-button {
|
|
227
264
|
--pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
|
|
228
265
|
--pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
|
|
@@ -118,6 +118,7 @@
|
|
|
118
118
|
--pf-c-label--m-compact--PaddingBottom: 0;
|
|
119
119
|
--pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
|
|
120
120
|
--pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
|
|
121
|
+
--pf-c-label--m-compact--m-editable--TextDecorationOffset: #{pf-size-prem(1px)};
|
|
121
122
|
|
|
122
123
|
// Content
|
|
123
124
|
--pf-c-label__content--Color: var(--pf-global--Color--100);
|
|
@@ -142,6 +143,21 @@
|
|
|
142
143
|
--pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
|
|
143
144
|
|
|
144
145
|
// Editable
|
|
146
|
+
--pf-c-label__editable-text--MaxWidth: 16ch;
|
|
147
|
+
--pf-c-label__editable-text--BorderWidth: 0;
|
|
148
|
+
--pf-c-label--m-editable--Cursor: pointer;
|
|
149
|
+
--pf-c-label--m-editable--TextDecoration: underline;
|
|
150
|
+
--pf-c-label--m-editable--TextDecorationStyle: dashed;
|
|
151
|
+
--pf-c-label--m-editable--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
|
|
152
|
+
--pf-c-label--m-editable--TextDecorationOffset: #{pf-size-prem(4px)};
|
|
153
|
+
--pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
|
|
154
|
+
--pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
|
|
155
|
+
--pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
// Editable active
|
|
159
|
+
--pf-c-label--m-editable--m-editable-active--Cursor: auto;
|
|
160
|
+
--pf-c-label--m-editable--m-editable-active--TextDecoration: none;
|
|
145
161
|
--pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
|
|
146
162
|
--pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
|
|
147
163
|
--pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
|
|
@@ -161,6 +177,7 @@
|
|
|
161
177
|
--pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
|
|
162
178
|
--pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
|
|
163
179
|
--pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
|
|
180
|
+
--pf-c-label--m-editable--TextDecorationOffset: var(--pf-c-label--m-compact--m-editable--TextDecorationOffset);
|
|
164
181
|
}
|
|
165
182
|
|
|
166
183
|
&.pf-m-blue {
|
|
@@ -267,7 +284,26 @@
|
|
|
267
284
|
}
|
|
268
285
|
}
|
|
269
286
|
|
|
287
|
+
&.pf-m-editable {
|
|
288
|
+
text-decoration: var(--pf-c-label--m-editable--TextDecoration);
|
|
289
|
+
cursor: var(--pf-c-label--m-editable--Cursor);
|
|
290
|
+
text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
|
|
291
|
+
text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
|
|
292
|
+
text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
|
|
293
|
+
text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
|
|
294
|
+
|
|
295
|
+
&:hover {
|
|
296
|
+
--pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
&:focus {
|
|
300
|
+
--pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
|
|
301
|
+
}
|
|
302
|
+
}
|
|
303
|
+
|
|
270
304
|
&.pf-m-editable-active {
|
|
305
|
+
--pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
|
|
306
|
+
--pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
|
|
271
307
|
--pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
|
|
272
308
|
--pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderWidth);
|
|
273
309
|
--pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderColor);
|
|
@@ -277,6 +313,13 @@
|
|
|
277
313
|
}
|
|
278
314
|
}
|
|
279
315
|
|
|
316
|
+
.pf-c-label__editable-text {
|
|
317
|
+
@include pf-text-overflow;
|
|
318
|
+
|
|
319
|
+
max-width: var(--pf-c-label__editable-text--MaxWidth);
|
|
320
|
+
border-width: var(--pf-c-label__editable-text--BorderWidth);
|
|
321
|
+
}
|
|
322
|
+
|
|
280
323
|
.pf-c-button {
|
|
281
324
|
--pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
|
|
282
325
|
--pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
|
|
@@ -18,6 +18,7 @@ cssPrefix: pf-c-label
|
|
|
18
18
|
<span class="pf-c-label__icon">
|
|
19
19
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
20
20
|
</span>
|
|
21
|
+
|
|
21
22
|
Grey icon
|
|
22
23
|
</span>
|
|
23
24
|
</span>
|
|
@@ -40,6 +41,7 @@ cssPrefix: pf-c-label
|
|
|
40
41
|
<span class="pf-c-label__icon">
|
|
41
42
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
42
43
|
</span>
|
|
44
|
+
|
|
43
45
|
Grey icon removable
|
|
44
46
|
</span>
|
|
45
47
|
<button
|
|
@@ -100,6 +102,7 @@ cssPrefix: pf-c-label
|
|
|
100
102
|
<span class="pf-c-label__icon">
|
|
101
103
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
102
104
|
</span>
|
|
105
|
+
|
|
103
106
|
Blue icon
|
|
104
107
|
</span>
|
|
105
108
|
</span>
|
|
@@ -122,6 +125,7 @@ cssPrefix: pf-c-label
|
|
|
122
125
|
<span class="pf-c-label__icon">
|
|
123
126
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
124
127
|
</span>
|
|
128
|
+
|
|
125
129
|
Blue icon removable
|
|
126
130
|
</span>
|
|
127
131
|
<button
|
|
@@ -182,6 +186,7 @@ cssPrefix: pf-c-label
|
|
|
182
186
|
<span class="pf-c-label__icon">
|
|
183
187
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
184
188
|
</span>
|
|
189
|
+
|
|
185
190
|
Green icon
|
|
186
191
|
</span>
|
|
187
192
|
</span>
|
|
@@ -204,6 +209,7 @@ cssPrefix: pf-c-label
|
|
|
204
209
|
<span class="pf-c-label__icon">
|
|
205
210
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
206
211
|
</span>
|
|
212
|
+
|
|
207
213
|
Green icon removable
|
|
208
214
|
</span>
|
|
209
215
|
<button
|
|
@@ -264,6 +270,7 @@ cssPrefix: pf-c-label
|
|
|
264
270
|
<span class="pf-c-label__icon">
|
|
265
271
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
266
272
|
</span>
|
|
273
|
+
|
|
267
274
|
Orange icon
|
|
268
275
|
</span>
|
|
269
276
|
</span>
|
|
@@ -286,6 +293,7 @@ cssPrefix: pf-c-label
|
|
|
286
293
|
<span class="pf-c-label__icon">
|
|
287
294
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
288
295
|
</span>
|
|
296
|
+
|
|
289
297
|
Orange icon removable
|
|
290
298
|
</span>
|
|
291
299
|
<button
|
|
@@ -346,6 +354,7 @@ cssPrefix: pf-c-label
|
|
|
346
354
|
<span class="pf-c-label__icon">
|
|
347
355
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
348
356
|
</span>
|
|
357
|
+
|
|
349
358
|
Red icon
|
|
350
359
|
</span>
|
|
351
360
|
</span>
|
|
@@ -368,6 +377,7 @@ cssPrefix: pf-c-label
|
|
|
368
377
|
<span class="pf-c-label__icon">
|
|
369
378
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
370
379
|
</span>
|
|
380
|
+
|
|
371
381
|
Red icon removable
|
|
372
382
|
</span>
|
|
373
383
|
<button
|
|
@@ -428,6 +438,7 @@ cssPrefix: pf-c-label
|
|
|
428
438
|
<span class="pf-c-label__icon">
|
|
429
439
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
430
440
|
</span>
|
|
441
|
+
|
|
431
442
|
Purple icon
|
|
432
443
|
</span>
|
|
433
444
|
</span>
|
|
@@ -450,6 +461,7 @@ cssPrefix: pf-c-label
|
|
|
450
461
|
<span class="pf-c-label__icon">
|
|
451
462
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
452
463
|
</span>
|
|
464
|
+
|
|
453
465
|
Purple icon removable
|
|
454
466
|
</span>
|
|
455
467
|
<button
|
|
@@ -510,6 +522,7 @@ cssPrefix: pf-c-label
|
|
|
510
522
|
<span class="pf-c-label__icon">
|
|
511
523
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
512
524
|
</span>
|
|
525
|
+
|
|
513
526
|
Cyan icon
|
|
514
527
|
</span>
|
|
515
528
|
</span>
|
|
@@ -532,6 +545,7 @@ cssPrefix: pf-c-label
|
|
|
532
545
|
<span class="pf-c-label__icon">
|
|
533
546
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
534
547
|
</span>
|
|
548
|
+
|
|
535
549
|
Cyan icon removable
|
|
536
550
|
</span>
|
|
537
551
|
<button
|
|
@@ -594,6 +608,7 @@ cssPrefix: pf-c-label
|
|
|
594
608
|
<span class="pf-c-label__icon">
|
|
595
609
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
596
610
|
</span>
|
|
611
|
+
|
|
597
612
|
Grey icon
|
|
598
613
|
</span>
|
|
599
614
|
</span>
|
|
@@ -616,6 +631,7 @@ cssPrefix: pf-c-label
|
|
|
616
631
|
<span class="pf-c-label__icon">
|
|
617
632
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
618
633
|
</span>
|
|
634
|
+
|
|
619
635
|
Grey icon removable
|
|
620
636
|
</span>
|
|
621
637
|
<button
|
|
@@ -658,6 +674,7 @@ cssPrefix: pf-c-label
|
|
|
658
674
|
<span class="pf-c-label__icon">
|
|
659
675
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
660
676
|
</span>
|
|
677
|
+
|
|
661
678
|
Blue icon
|
|
662
679
|
</span>
|
|
663
680
|
</span>
|
|
@@ -680,6 +697,7 @@ cssPrefix: pf-c-label
|
|
|
680
697
|
<span class="pf-c-label__icon">
|
|
681
698
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
682
699
|
</span>
|
|
700
|
+
|
|
683
701
|
Blue icon removable
|
|
684
702
|
</span>
|
|
685
703
|
<button
|
|
@@ -722,6 +740,7 @@ cssPrefix: pf-c-label
|
|
|
722
740
|
<span class="pf-c-label__icon">
|
|
723
741
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
724
742
|
</span>
|
|
743
|
+
|
|
725
744
|
Green icon
|
|
726
745
|
</span>
|
|
727
746
|
</span>
|
|
@@ -744,6 +763,7 @@ cssPrefix: pf-c-label
|
|
|
744
763
|
<span class="pf-c-label__icon">
|
|
745
764
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
746
765
|
</span>
|
|
766
|
+
|
|
747
767
|
Green icon removable
|
|
748
768
|
</span>
|
|
749
769
|
<button
|
|
@@ -786,6 +806,7 @@ cssPrefix: pf-c-label
|
|
|
786
806
|
<span class="pf-c-label__icon">
|
|
787
807
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
788
808
|
</span>
|
|
809
|
+
|
|
789
810
|
Orange icon
|
|
790
811
|
</span>
|
|
791
812
|
</span>
|
|
@@ -808,6 +829,7 @@ cssPrefix: pf-c-label
|
|
|
808
829
|
<span class="pf-c-label__icon">
|
|
809
830
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
810
831
|
</span>
|
|
832
|
+
|
|
811
833
|
Orange icon removable
|
|
812
834
|
</span>
|
|
813
835
|
<button
|
|
@@ -850,6 +872,7 @@ cssPrefix: pf-c-label
|
|
|
850
872
|
<span class="pf-c-label__icon">
|
|
851
873
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
852
874
|
</span>
|
|
875
|
+
|
|
853
876
|
Red icon
|
|
854
877
|
</span>
|
|
855
878
|
</span>
|
|
@@ -872,6 +895,7 @@ cssPrefix: pf-c-label
|
|
|
872
895
|
<span class="pf-c-label__icon">
|
|
873
896
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
874
897
|
</span>
|
|
898
|
+
|
|
875
899
|
Red icon removable
|
|
876
900
|
</span>
|
|
877
901
|
<button
|
|
@@ -914,6 +938,7 @@ cssPrefix: pf-c-label
|
|
|
914
938
|
<span class="pf-c-label__icon">
|
|
915
939
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
916
940
|
</span>
|
|
941
|
+
|
|
917
942
|
Purple icon
|
|
918
943
|
</span>
|
|
919
944
|
</span>
|
|
@@ -936,6 +961,7 @@ cssPrefix: pf-c-label
|
|
|
936
961
|
<span class="pf-c-label__icon">
|
|
937
962
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
938
963
|
</span>
|
|
964
|
+
|
|
939
965
|
Purple icon removable
|
|
940
966
|
</span>
|
|
941
967
|
<button
|
|
@@ -978,6 +1004,7 @@ cssPrefix: pf-c-label
|
|
|
978
1004
|
<span class="pf-c-label__icon">
|
|
979
1005
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
980
1006
|
</span>
|
|
1007
|
+
|
|
981
1008
|
Cyan icon
|
|
982
1009
|
</span>
|
|
983
1010
|
</span>
|
|
@@ -1000,6 +1027,7 @@ cssPrefix: pf-c-label
|
|
|
1000
1027
|
<span class="pf-c-label__icon">
|
|
1001
1028
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1002
1029
|
</span>
|
|
1030
|
+
|
|
1003
1031
|
Cyan icon removable
|
|
1004
1032
|
</span>
|
|
1005
1033
|
<button
|
|
@@ -1044,6 +1072,7 @@ cssPrefix: pf-c-label
|
|
|
1044
1072
|
<span class="pf-c-label__icon">
|
|
1045
1073
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1046
1074
|
</span>
|
|
1075
|
+
|
|
1047
1076
|
Compact icon
|
|
1048
1077
|
</span>
|
|
1049
1078
|
</span>
|
|
@@ -1066,6 +1095,7 @@ cssPrefix: pf-c-label
|
|
|
1066
1095
|
<span class="pf-c-label__icon">
|
|
1067
1096
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1068
1097
|
</span>
|
|
1098
|
+
|
|
1069
1099
|
Compact icon removable
|
|
1070
1100
|
</span>
|
|
1071
1101
|
<button
|
|
@@ -1118,6 +1148,8 @@ cssPrefix: pf-c-label
|
|
|
1118
1148
|
|
|
1119
1149
|
### Overflow
|
|
1120
1150
|
|
|
1151
|
+
This style of label is used to indicate overflow within a label group.
|
|
1152
|
+
|
|
1121
1153
|
```html
|
|
1122
1154
|
<button class="pf-c-label pf-m-overflow">
|
|
1123
1155
|
<span class="pf-c-label__content">Overflow</span>
|
|
@@ -1125,33 +1157,31 @@ cssPrefix: pf-c-label
|
|
|
1125
1157
|
|
|
1126
1158
|
```
|
|
1127
1159
|
|
|
1128
|
-
### Editable
|
|
1160
|
+
### Editable
|
|
1129
1161
|
|
|
1130
|
-
|
|
1162
|
+
**Note: Editable label behavior must be handled with JavaScript.**
|
|
1163
|
+
|
|
1164
|
+
- `.pf-c-label__editable-text` onClick event should:
|
|
1131
1165
|
- Set `.pf-m-editable-active` on `.pf-c-label`
|
|
1132
|
-
-
|
|
1166
|
+
- Change `.pf-c-label__editable-text`from a button to an input
|
|
1133
1167
|
- Return keypress, when content is editable, should:
|
|
1134
1168
|
- Be captured to prevent line wrapping and save updates to label text
|
|
1135
1169
|
- Remove `.pf-m-editable-active` from `.pf-c-label`
|
|
1136
|
-
-
|
|
1170
|
+
- Change `.pf-c-label__editable-text` back from an input to a button and set the `currvalue` of the button to the contents of the input
|
|
1137
1171
|
- Esc keypress, when content is editable, should:
|
|
1138
1172
|
- Undo any update to label text
|
|
1139
1173
|
- Remove `.pf-m-editable-active` from `.pf-c-label`
|
|
1140
|
-
-
|
|
1141
|
-
|
|
1142
|
-
### Editable
|
|
1174
|
+
- Change `.pf-c-label__editable-text` back to a button
|
|
1143
1175
|
|
|
1144
1176
|
```html
|
|
1145
1177
|
<span class="pf-c-label pf-m-blue pf-m-editable">
|
|
1146
1178
|
<span class="pf-c-label__content">
|
|
1147
|
-
<
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
>Editable label</div>
|
|
1154
|
-
</div>
|
|
1179
|
+
<button
|
|
1180
|
+
class="pf-c-label__editable-text"
|
|
1181
|
+
id="editable-label-editable-text"
|
|
1182
|
+
currvalue="Editable label"
|
|
1183
|
+
aria-label="Editable text"
|
|
1184
|
+
>Editable label</button>
|
|
1155
1185
|
</span>
|
|
1156
1186
|
<button
|
|
1157
1187
|
class="pf-c-button pf-m-plain"
|
|
@@ -1166,15 +1196,45 @@ cssPrefix: pf-c-label
|
|
|
1166
1196
|
|
|
1167
1197
|
<span class="pf-c-label pf-m-blue pf-m-editable pf-m-editable-active">
|
|
1168
1198
|
<span class="pf-c-label__content">
|
|
1169
|
-
<
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1199
|
+
<input
|
|
1200
|
+
class="pf-c-label__editable-text"
|
|
1201
|
+
id="editable-label-active-editable-text"
|
|
1202
|
+
type="text"
|
|
1203
|
+
value="Editable active"
|
|
1204
|
+
aria-label="Editable text"
|
|
1205
|
+
/>
|
|
1206
|
+
</span>
|
|
1207
|
+
</span>
|
|
1208
|
+
|
|
1209
|
+
<span class="pf-c-label pf-m-compact pf-m-editable">
|
|
1210
|
+
<span class="pf-c-label__content">
|
|
1211
|
+
<button
|
|
1212
|
+
class="pf-c-label__editable-text"
|
|
1213
|
+
id="compact-editable-label-editable-text"
|
|
1214
|
+
currvalue="Compact editable label"
|
|
1215
|
+
aria-label="Editable text"
|
|
1216
|
+
>Compact editable label</button>
|
|
1217
|
+
</span>
|
|
1218
|
+
<button
|
|
1219
|
+
class="pf-c-button pf-m-plain"
|
|
1220
|
+
type="button"
|
|
1221
|
+
id="compact-editable-label-button"
|
|
1222
|
+
aria-label="Remove"
|
|
1223
|
+
aria-labelledby="compact-editable-label-button compact-editable-label-text"
|
|
1224
|
+
>
|
|
1225
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1226
|
+
</button>
|
|
1227
|
+
</span>
|
|
1228
|
+
|
|
1229
|
+
<span class="pf-c-label pf-m-compact pf-m-editable pf-m-editable-active">
|
|
1230
|
+
<span class="pf-c-label__content">
|
|
1231
|
+
<input
|
|
1232
|
+
class="pf-c-label__editable-text"
|
|
1233
|
+
id="compact-editable-label-active-editable-text"
|
|
1234
|
+
type="text"
|
|
1235
|
+
value="Compact editable active"
|
|
1236
|
+
aria-label="Editable text"
|
|
1237
|
+
/>
|
|
1178
1238
|
</span>
|
|
1179
1239
|
</span>
|
|
1180
1240
|
|
|
@@ -1184,20 +1244,21 @@ cssPrefix: pf-c-label
|
|
|
1184
1244
|
|
|
1185
1245
|
### Usage
|
|
1186
1246
|
|
|
1187
|
-
| Class
|
|
1188
|
-
|
|
|
1189
|
-
| `.pf-c-label`
|
|
1190
|
-
| `.pf-c-label__content`
|
|
1191
|
-
| `.pf-c-label__icon`
|
|
1192
|
-
| `.pf-c-label__text`
|
|
1193
|
-
| `.pf-
|
|
1194
|
-
| `.pf-m-
|
|
1195
|
-
| `.pf-m-
|
|
1196
|
-
| `.pf-m-
|
|
1197
|
-
| `.pf-m-
|
|
1198
|
-
| `.pf-m-
|
|
1199
|
-
| `.pf-m-
|
|
1200
|
-
| `.pf-m-
|
|
1201
|
-
| `.pf-m-
|
|
1202
|
-
| `.pf-m-
|
|
1203
|
-
| `.pf-m-editable
|
|
1247
|
+
| Class | Applied to | Outcome |
|
|
1248
|
+
| ---------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
1249
|
+
| `.pf-c-label` | `<span>`, `<button>` | Initiates a label. Without a color modifier, the label's default style is grey. Use a color modifier to change the label color. Use a `<button>` if the label is an overflow label used in the label group. **Required** |
|
|
1250
|
+
| `.pf-c-label__content` | `<span>`, `<a>`, `<button>` | Iniates a label content. Use as an `<a>` element if the label serves as a link. Use a `<button>` if the label serves as an action. **Required** |
|
|
1251
|
+
| `.pf-c-label__icon` | `<span>` | Initiates a label icon. |
|
|
1252
|
+
| `.pf-c-label__text` | `<span>` | Initiates label text. |
|
|
1253
|
+
| `.pf-c-label__editable-text` | `<button>`, `<input>` | Initiates editable label text. See the [editable](#editable) example for details about handling behavior in Javascript. |
|
|
1254
|
+
| `.pf-m-outline` | `.pf-c-label` | Modifies label for outline styles. |
|
|
1255
|
+
| `.pf-m-compact` | `.pf-c-label` | Modifies label for compact styles. |
|
|
1256
|
+
| `.pf-m-overflow` | `.pf-c-label` | Modifies label for overflow styles for use in a label group. |
|
|
1257
|
+
| `.pf-m-blue` | `.pf-c-label` | Modifies the label to have blue colored styling. |
|
|
1258
|
+
| `.pf-m-green` | `.pf-c-label` | Modifies the label to have green colored styling. |
|
|
1259
|
+
| `.pf-m-orange` | `.pf-c-label` | Modifies the label to have orange colored styling. |
|
|
1260
|
+
| `.pf-m-red` | `.pf-c-label` | Modifies the label to have red colored styling. |
|
|
1261
|
+
| `.pf-m-purple` | `.pf-c-label` | Modifies the label to have purple colored styling. |
|
|
1262
|
+
| `.pf-m-cyan` | `.pf-c-label` | Modifies the label to have cyan colored styling. |
|
|
1263
|
+
| `.pf-m-editable` | `.pf-c-label` | Modifies label for editable styles. |
|
|
1264
|
+
| `.pf-m-editable-active` | `.pf-c-label.pf-m-editable` | Modifies editable label for active styles. |
|