@patternfly/patternfly 4.183.0 → 4.184.0
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 +5 -3
- package/components/FormControl/form-control.css +2 -2
- package/components/FormControl/form-control.scss +3 -3
- package/components/Menu/menu.css +1 -1
- package/components/Menu/menu.scss +2 -1
- package/components/MenuToggle/menu-toggle.css +19 -2
- package/components/MenuToggle/menu-toggle.scss +29 -2
- package/components/TextInputGroup/text-input-group.css +6 -0
- package/components/TextInputGroup/text-input-group.scss +11 -0
- package/docs/components/DescriptionList/examples/DescriptionList.md +19 -19
- package/docs/components/FormControl/examples/FormControl.md +2 -2
- package/docs/components/MenuToggle/examples/MenuToggle.md +51 -9
- package/package.json +1 -1
- package/patternfly-no-reset.css +28 -5
- package/patternfly.css +28 -5
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/RELEASE-NOTES.md
CHANGED
|
@@ -3,10 +3,9 @@ id: Release notes
|
|
|
3
3
|
section: developer-resources
|
|
4
4
|
releaseNoteTOC: true
|
|
5
5
|
---
|
|
6
|
-
|
|
7
6
|
## 2022.03 release notes (2022-03-08)
|
|
8
7
|
Packages released:
|
|
9
|
-
- [@patternfly/patternfly@v4.
|
|
8
|
+
- [@patternfly/patternfly@v4.183.1](https://www.npmjs.com/package/@patternfly/patternfly/v/4.183.1)
|
|
10
9
|
|
|
11
10
|
### Components
|
|
12
11
|
- **Description list:** Added description list demo ([#4715](https://github.com/patternfly/patternfly/pull/4715))
|
|
@@ -21,6 +20,7 @@ Packages released:
|
|
|
21
20
|
- **Menu toggle:**
|
|
22
21
|
- Fixed plain menu toggle state ([#4710](https://github.com/patternfly/patternfly/pull/4710))
|
|
23
22
|
- Added split button ([#4713](https://github.com/patternfly/patternfly/pull/4713))
|
|
23
|
+
- Fixed self referencing var ([#4727](https://github.com/patternfly/patternfly/pull/4727))
|
|
24
24
|
- **Page:** Updated wording in centered examples ([#4698](https://github.com/patternfly/patternfly/pull/4698))
|
|
25
25
|
- **Select:** Fixed active focus states bottom border ([#4702](https://github.com/patternfly/patternfly/pull/4702))
|
|
26
26
|
- **Spinner:** Renamed examples so SVG is default, non-SVG is legacy ([#4697](https://github.com/patternfly/patternfly/pull/4697))
|
|
@@ -31,7 +31,9 @@ Packages released:
|
|
|
31
31
|
- **Wizard:** Updated docs/hbs for description to allow div ([#4708](https://github.com/patternfly/patternfly/pull/4708))
|
|
32
32
|
|
|
33
33
|
### Other
|
|
34
|
-
- **Demos:**
|
|
34
|
+
- **Demos:**
|
|
35
|
+
- Used search inputs in demos ([#4691](https://github.com/patternfly/patternfly/pull/4691))
|
|
36
|
+
- Added dashboard demo ([#4721](https://github.com/patternfly/patternfly/pull/4721))
|
|
35
37
|
|
|
36
38
|
|
|
37
39
|
## 2022.02 release notes (2022-02-17)
|
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
--pf-c-form-control--textarea--invalid--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
|
|
121
121
|
--pf-c-form-control--m-icon-sprite--success--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#success");
|
|
122
122
|
--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#warning");
|
|
123
|
-
--pf-c-form-control--m-icon-sprite--
|
|
123
|
+
--pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#invalid");
|
|
124
124
|
--pf-c-form-control--m-icon-sprite__select--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#select");
|
|
125
125
|
--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#search");
|
|
126
126
|
--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#calendar");
|
|
@@ -246,7 +246,7 @@
|
|
|
246
246
|
.pf-c-form-control.pf-m-icon-sprite {
|
|
247
247
|
--pf-c-form-control--success--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--success--BackgroundUrl);
|
|
248
248
|
--pf-c-form-control--m-warning--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl);
|
|
249
|
-
--pf-c-form-control--
|
|
249
|
+
--pf-c-form-control--invalid--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl);
|
|
250
250
|
--pf-c-form-control__select--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite__select--BackgroundUrl);
|
|
251
251
|
--pf-c-form-control--m-search--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl);
|
|
252
252
|
--pf-c-form-control--m-calendar--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl);
|
|
@@ -101,7 +101,7 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
|
|
|
101
101
|
--pf-c-form-control--m-warning--BackgroundSize: var(--pf-c-form-control--m-warning--BackgroundSizeX) var(--pf-c-form-control--m-warning--BackgroundSizeY);
|
|
102
102
|
--pf-c-form-control--m-warning--BackgroundUrl: #{pf-bg-svg($pf-c-form-control--m-warning--Coordinates, $svg-color: $pf-c-form-control--m-warning--Color)};
|
|
103
103
|
|
|
104
|
-
// Input
|
|
104
|
+
// Input invalid
|
|
105
105
|
--pf-c-form-control--invalid--BorderBottomWidth: var(--pf-global--BorderWidth--md);
|
|
106
106
|
--pf-c-form-control--invalid--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--invalid--BorderBottomWidth));
|
|
107
107
|
--pf-c-form-control--invalid--BorderBottomColor: var(--pf-global--danger-color--100);
|
|
@@ -186,7 +186,7 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
|
|
|
186
186
|
// Icon sprite
|
|
187
187
|
--pf-c-form-control--m-icon-sprite--success--BackgroundUrl: url("#{$pf-global--image-path}/status-icon-sprite.svg#success");
|
|
188
188
|
--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl: url("#{$pf-global--image-path}/status-icon-sprite.svg#warning");
|
|
189
|
-
--pf-c-form-control--m-icon-sprite--
|
|
189
|
+
--pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl: url("#{$pf-global--image-path}/status-icon-sprite.svg#invalid");
|
|
190
190
|
--pf-c-form-control--m-icon-sprite__select--BackgroundUrl: url("#{$pf-global--image-path}/status-icon-sprite.svg#select");
|
|
191
191
|
--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl: url("#{$pf-global--image-path}/status-icon-sprite.svg#search");
|
|
192
192
|
--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl: url("#{$pf-global--image-path}/status-icon-sprite.svg#calendar");
|
|
@@ -352,7 +352,7 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
|
|
|
352
352
|
&.pf-m-icon-sprite {
|
|
353
353
|
--pf-c-form-control--success--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--success--BackgroundUrl);
|
|
354
354
|
--pf-c-form-control--m-warning--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl);
|
|
355
|
-
--pf-c-form-control--
|
|
355
|
+
--pf-c-form-control--invalid--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl);
|
|
356
356
|
--pf-c-form-control__select--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite__select--BackgroundUrl);
|
|
357
357
|
--pf-c-form-control--m-search--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl);
|
|
358
358
|
--pf-c-form-control--m-calendar--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl);
|
package/components/Menu/menu.css
CHANGED
|
@@ -459,7 +459,7 @@
|
|
|
459
459
|
--pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--hover--BackgroundColor);
|
|
460
460
|
--pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--hover--Color, inherit);
|
|
461
461
|
}
|
|
462
|
-
.pf-c-menu__list-item:focus-within {
|
|
462
|
+
.pf-c-menu__list-item:focus-within, .pf-c-menu__list-item.pf-m-focus {
|
|
463
463
|
--pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--focus-within--BackgroundColor);
|
|
464
464
|
--pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--focus-within--Color, inherit);
|
|
465
465
|
}
|
|
@@ -540,7 +540,8 @@
|
|
|
540
540
|
--pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--hover--Color, inherit);
|
|
541
541
|
}
|
|
542
542
|
|
|
543
|
-
&:focus-within
|
|
543
|
+
&:focus-within,
|
|
544
|
+
&.pf-m-focus {
|
|
544
545
|
--pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--focus-within--BackgroundColor);
|
|
545
546
|
--pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--focus-within--Color, inherit);
|
|
546
547
|
}
|
|
@@ -106,6 +106,11 @@
|
|
|
106
106
|
--pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-global--primary-color--100);
|
|
107
107
|
--pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
|
|
108
108
|
--pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
|
|
109
|
+
--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop: calc(var(--pf-c-menu-toggle--PaddingTop) * -1);
|
|
110
|
+
--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight: calc(var(--pf-c-menu-toggle--PaddingRight) * -1);
|
|
111
|
+
--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom: calc(var(--pf-c-menu-toggle--PaddingBottom) * -1);
|
|
112
|
+
--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft: calc(var(--pf-c-menu-toggle--PaddingLeft) * -1);
|
|
113
|
+
--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--sm);
|
|
109
114
|
position: relative;
|
|
110
115
|
display: inline-flex;
|
|
111
116
|
align-items: center;
|
|
@@ -114,6 +119,7 @@
|
|
|
114
119
|
font-size: var(--pf-c-menu-toggle--FontSize);
|
|
115
120
|
line-height: var(--pf-c-menu-toggle--LineHeight);
|
|
116
121
|
color: var(--pf-c-menu-toggle--Color);
|
|
122
|
+
cursor: pointer;
|
|
117
123
|
background-color: var(--pf-c-menu-toggle--BackgroundColor);
|
|
118
124
|
border: 0;
|
|
119
125
|
border-radius: var(--pf-c-menu-toggle--BorderRadius);
|
|
@@ -195,7 +201,7 @@
|
|
|
195
201
|
--pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--hover__toggle-icon--Color);
|
|
196
202
|
--pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
|
|
197
203
|
}
|
|
198
|
-
.pf-c-menu-toggle:focus {
|
|
204
|
+
.pf-c-menu-toggle:focus, .pf-c-menu-toggle:focus-within {
|
|
199
205
|
--pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--focus--BackgroundColor);
|
|
200
206
|
--pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--focus--after--BorderBottomWidth);
|
|
201
207
|
--pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--focus--after--BorderBottomColor);
|
|
@@ -236,6 +242,11 @@
|
|
|
236
242
|
--pf-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
|
|
237
243
|
height: 100%;
|
|
238
244
|
}
|
|
245
|
+
.pf-c-menu-toggle.pf-m-typeahead .pf-c-text-input-group {
|
|
246
|
+
--pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight);
|
|
247
|
+
flex: 1;
|
|
248
|
+
margin: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft);
|
|
249
|
+
}
|
|
239
250
|
.pf-c-menu-toggle.pf-m-split-button {
|
|
240
251
|
--pf-c-menu-toggle__toggle-icon--MarginRight: 0;
|
|
241
252
|
padding: 0;
|
|
@@ -253,7 +264,7 @@
|
|
|
253
264
|
.pf-c-menu-toggle.pf-m-split-button > .pf-c-check {
|
|
254
265
|
--pf-c-menu-toggle--PaddingRight: 0;
|
|
255
266
|
--pf-c-check__input--MarginTop: 0;
|
|
256
|
-
--pf-c-check__label--Color:
|
|
267
|
+
--pf-c-check__label--Color: currentColor;
|
|
257
268
|
align-items: center;
|
|
258
269
|
align-self: stretch;
|
|
259
270
|
}
|
|
@@ -333,6 +344,12 @@
|
|
|
333
344
|
color: var(--pf-c-menu-toggle--m-split-button--child--disabled--Color);
|
|
334
345
|
background-color: var(--pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
|
|
335
346
|
}
|
|
347
|
+
.pf-c-menu-toggle.pf-m-typeahead, .pf-c-menu-toggle.pf-m-split-button {
|
|
348
|
+
--pf-c-menu-toggle__toggle-icon--MarginRight: 0;
|
|
349
|
+
}
|
|
350
|
+
.pf-c-menu-toggle.pf-m-full-width {
|
|
351
|
+
width: 100%;
|
|
352
|
+
}
|
|
336
353
|
|
|
337
354
|
.pf-c-menu-toggle__button {
|
|
338
355
|
color: inherit;
|
|
@@ -150,6 +150,13 @@
|
|
|
150
150
|
--pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
|
|
151
151
|
--pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
|
|
152
152
|
|
|
153
|
+
// Typeahead
|
|
154
|
+
--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop: calc(var(--pf-c-menu-toggle--PaddingTop) * -1);
|
|
155
|
+
--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight: calc(var(--pf-c-menu-toggle--PaddingRight) * -1);
|
|
156
|
+
--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom: calc(var(--pf-c-menu-toggle--PaddingBottom) * -1);
|
|
157
|
+
--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft: calc(var(--pf-c-menu-toggle--PaddingLeft) * -1);
|
|
158
|
+
--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--sm);
|
|
159
|
+
|
|
153
160
|
position: relative;
|
|
154
161
|
display: inline-flex;
|
|
155
162
|
align-items: center;
|
|
@@ -158,6 +165,7 @@
|
|
|
158
165
|
font-size: var(--pf-c-menu-toggle--FontSize);
|
|
159
166
|
line-height: var(--pf-c-menu-toggle--LineHeight);
|
|
160
167
|
color: var(--pf-c-menu-toggle--Color);
|
|
168
|
+
cursor: pointer;
|
|
161
169
|
background-color: var(--pf-c-menu-toggle--BackgroundColor);
|
|
162
170
|
border: 0;
|
|
163
171
|
border-radius: var(--pf-c-menu-toggle--BorderRadius);
|
|
@@ -259,7 +267,8 @@
|
|
|
259
267
|
--pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
|
|
260
268
|
}
|
|
261
269
|
|
|
262
|
-
&:focus
|
|
270
|
+
&:focus,
|
|
271
|
+
&:focus-within {
|
|
263
272
|
--pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--focus--BackgroundColor);
|
|
264
273
|
--pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--focus--after--BorderBottomWidth);
|
|
265
274
|
--pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--focus--after--BorderBottomColor);
|
|
@@ -314,6 +323,15 @@
|
|
|
314
323
|
height: 100%;
|
|
315
324
|
}
|
|
316
325
|
|
|
326
|
+
&.pf-m-typeahead {
|
|
327
|
+
.pf-c-text-input-group {
|
|
328
|
+
--pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight);
|
|
329
|
+
|
|
330
|
+
flex: 1;
|
|
331
|
+
margin: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft);
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
|
|
317
335
|
&.pf-m-split-button {
|
|
318
336
|
--pf-c-menu-toggle__toggle-icon--MarginRight: 0;
|
|
319
337
|
|
|
@@ -337,7 +355,7 @@
|
|
|
337
355
|
> .pf-c-check {
|
|
338
356
|
--pf-c-menu-toggle--PaddingRight: 0;
|
|
339
357
|
--pf-c-check__input--MarginTop: 0;
|
|
340
|
-
--pf-c-check__label--Color:
|
|
358
|
+
--pf-c-check__label--Color: currentColor;
|
|
341
359
|
|
|
342
360
|
align-items: center;
|
|
343
361
|
align-self: stretch;
|
|
@@ -462,6 +480,15 @@
|
|
|
462
480
|
background-color: var(--pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
|
|
463
481
|
}
|
|
464
482
|
}
|
|
483
|
+
|
|
484
|
+
&.pf-m-typeahead,
|
|
485
|
+
&.pf-m-split-button {
|
|
486
|
+
--pf-c-menu-toggle__toggle-icon--MarginRight: 0;
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
&.pf-m-full-width {
|
|
490
|
+
width: 100%;
|
|
491
|
+
}
|
|
465
492
|
}
|
|
466
493
|
|
|
467
494
|
.pf-c-menu-toggle__button {
|
|
@@ -43,6 +43,12 @@
|
|
|
43
43
|
--pf-c-text-input-group--BackgroundColor: var(--pf-c-text-input-group--m-disabled--BackgroundColor);
|
|
44
44
|
pointer-events: none;
|
|
45
45
|
}
|
|
46
|
+
.pf-c-text-input-group.pf-m-plain {
|
|
47
|
+
--pf-c-text-input-group--BackgroundColor: transparent;
|
|
48
|
+
}
|
|
49
|
+
.pf-c-text-input-group.pf-m-plain .pf-c-text-input-group__text::before, .pf-c-text-input-group.pf-m-plain .pf-c-text-input-group__text::after {
|
|
50
|
+
border: 0;
|
|
51
|
+
}
|
|
46
52
|
|
|
47
53
|
.pf-c-text-input-group__main {
|
|
48
54
|
display: flex;
|
|
@@ -61,6 +61,17 @@
|
|
|
61
61
|
|
|
62
62
|
pointer-events: none;
|
|
63
63
|
}
|
|
64
|
+
|
|
65
|
+
&.pf-m-plain {
|
|
66
|
+
--pf-c-text-input-group--BackgroundColor: transparent;
|
|
67
|
+
|
|
68
|
+
.pf-c-text-input-group__text {
|
|
69
|
+
&::before,
|
|
70
|
+
&::after {
|
|
71
|
+
border: 0;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
64
75
|
}
|
|
65
76
|
|
|
66
77
|
.pf-c-text-input-group__main {
|
|
@@ -1264,25 +1264,25 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
1264
1264
|
|
|
1265
1265
|
### Usage
|
|
1266
1266
|
|
|
1267
|
-
| Class | Applied to | Outcome
|
|
1268
|
-
| ------------------------------------------------------------------------------- | ---------------------------------------- |
|
|
1269
|
-
| `.pf-c-description-list` | `<dl>` | Initiates the description list component. **Required**
|
|
1270
|
-
| `.pf-c-description-list__group` | `<div>` | Initiates a description list component group. **Required**
|
|
1271
|
-
| `.pf-c-description-list__term` | `<dt>` | Initiates a description list component term. **Required**
|
|
1272
|
-
| `.pf-c-description-list__description` | `<dd>` | Initiates a description list component description. **Required**
|
|
1273
|
-
| `.pf-c-description-list__text` | `<span>`, `<div>` | Initiates a description list component text element. Use a `<span>` when a child of `.pf-c-description-list__term`. **Required**
|
|
1274
|
-
| `.pf-c-description-list__term-icon` | `<span>` | Initiates a description list component term icon element.
|
|
1275
|
-
| `.pf-m-compact` | `.pf-c-description-list` | Modifies the description list for compact horizontal and vertical spacing.
|
|
1276
|
-
| `.pf-m-fluid` | `.pf-c-description-list.pf-m-horizontal` | Modifies the description list term width to be fluid.
|
|
1277
|
-
| `.pf-m-help-text` | `.pf-c-description-list__text` | Indicates there is more information available for the description list component term text.
|
|
1278
|
-
| `.pf-m-horizontal{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a horizontal layout.
|
|
1279
|
-
| `.pf-m-vertical{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a vertical layout.
|
|
1280
|
-
| `.pf-m-fill-columns` | `.pf-c-description-list` | Modifies the description list groups to fill columns from top to bottom, instead of rows from left to right.
|
|
1281
|
-
| `.pf-m-auto-column-widths` | `.pf-c-description-list` | Modifies the description list to format automatically.
|
|
1282
|
-
| `.pf-m-inline-grid` | `.pf-c-description-list` | Modifies the description list display to inline-grid.
|
|
1283
|
-
| `.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list number of columns.
|
|
1284
|
-
| `--pf-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-c-description-list` | Modifies the min value of the `grid-template-columns` declaration at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).
|
|
1285
|
-
| `--pf-c-description-
|
|
1267
|
+
| Class | Applied to | Outcome |
|
|
1268
|
+
| ------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
1269
|
+
| `.pf-c-description-list` | `<dl>` | Initiates the description list component. **Required** |
|
|
1270
|
+
| `.pf-c-description-list__group` | `<div>` | Initiates a description list component group. **Required** |
|
|
1271
|
+
| `.pf-c-description-list__term` | `<dt>` | Initiates a description list component term. **Required** |
|
|
1272
|
+
| `.pf-c-description-list__description` | `<dd>` | Initiates a description list component description. **Required** |
|
|
1273
|
+
| `.pf-c-description-list__text` | `<span>`, `<div>` | Initiates a description list component text element. Use a `<span>` when a child of `.pf-c-description-list__term`. **Required** |
|
|
1274
|
+
| `.pf-c-description-list__term-icon` | `<span>` | Initiates a description list component term icon element. |
|
|
1275
|
+
| `.pf-m-compact` | `.pf-c-description-list` | Modifies the description list for compact horizontal and vertical spacing. |
|
|
1276
|
+
| `.pf-m-fluid` | `.pf-c-description-list.pf-m-horizontal` | Modifies the description list term width to be fluid. |
|
|
1277
|
+
| `.pf-m-help-text` | `.pf-c-description-list__text` | Indicates there is more information available for the description list component term text. |
|
|
1278
|
+
| `.pf-m-horizontal{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a horizontal layout. |
|
|
1279
|
+
| `.pf-m-vertical{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a vertical layout. |
|
|
1280
|
+
| `.pf-m-fill-columns` | `.pf-c-description-list` | Modifies the description list groups to fill columns from top to bottom, instead of rows from left to right. |
|
|
1281
|
+
| `.pf-m-auto-column-widths` | `.pf-c-description-list` | Modifies the description list to format automatically. |
|
|
1282
|
+
| `.pf-m-inline-grid` | `.pf-c-description-list` | Modifies the description list display to inline-grid. |
|
|
1283
|
+
| `.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list number of columns. |
|
|
1284
|
+
| `--pf-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-c-description-list` | Modifies the min value of the `grid-template-columns` declaration at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
1285
|
+
| `--pf-c-description-list--m-horizontal__term--width{-on-[breakpoint]}: {width}` | `.pf-c-description-list.pf-m-horizontal` | Modifies the description list term width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
1286
1286
|
|
|
1287
1287
|
<!-- | `.pf-m-order[0-12]{-on-[breakpoint]}` | `.pf-c-description-list__group` | Modifies the order of the flex layout element. |
|
|
1288
1288
|
| `.pf-m-order-first{-on-[breakpoint]}` | `.pf-c-description-list__group` | Modifies the order of the flex layout element to -1. |
|
|
@@ -382,7 +382,7 @@ cssPrefix: pf-c-form-control
|
|
|
382
382
|
<br />
|
|
383
383
|
<br />
|
|
384
384
|
<select
|
|
385
|
-
class="pf-c-form-control"
|
|
385
|
+
class="pf-c-form-control pf-m-icon-sprite"
|
|
386
386
|
required
|
|
387
387
|
aria-invalid="true"
|
|
388
388
|
id="select-group-error"
|
|
@@ -420,7 +420,7 @@ cssPrefix: pf-c-form-control
|
|
|
420
420
|
<br />
|
|
421
421
|
<br />
|
|
422
422
|
<textarea
|
|
423
|
-
class="pf-c-form-control"
|
|
423
|
+
class="pf-c-form-control pf-m-icon-sprite"
|
|
424
424
|
required
|
|
425
425
|
name="textarea-error"
|
|
426
426
|
id="textarea-error"
|
|
@@ -601,7 +601,7 @@ cssPrefix: pf-c-menu-toggle
|
|
|
601
601
|
### Split button (action)
|
|
602
602
|
|
|
603
603
|
```html
|
|
604
|
-
<div class="pf-c-menu-toggle pf-m-
|
|
604
|
+
<div class="pf-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled">
|
|
605
605
|
<button class="pf-c-menu-toggle__button" type="button" disabled>Action</button>
|
|
606
606
|
<button
|
|
607
607
|
class="pf-c-menu-toggle__button"
|
|
@@ -619,7 +619,7 @@ cssPrefix: pf-c-menu-toggle
|
|
|
619
619
|
</button>
|
|
620
620
|
</div>
|
|
621
621
|
|
|
622
|
-
<div class="pf-c-menu-toggle pf-m-
|
|
622
|
+
<div class="pf-c-menu-toggle pf-m-split-button pf-m-action">
|
|
623
623
|
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
624
624
|
<button
|
|
625
625
|
class="pf-c-menu-toggle__button"
|
|
@@ -636,7 +636,7 @@ cssPrefix: pf-c-menu-toggle
|
|
|
636
636
|
</button>
|
|
637
637
|
</div>
|
|
638
638
|
|
|
639
|
-
<div class="pf-c-menu-toggle pf-m-expanded pf-m-
|
|
639
|
+
<div class="pf-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-action">
|
|
640
640
|
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
641
641
|
<button
|
|
642
642
|
class="pf-c-menu-toggle__button"
|
|
@@ -659,7 +659,7 @@ cssPrefix: pf-c-menu-toggle
|
|
|
659
659
|
|
|
660
660
|
```html
|
|
661
661
|
<div
|
|
662
|
-
class="pf-c-menu-toggle pf-m-
|
|
662
|
+
class="pf-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled pf-m-primary"
|
|
663
663
|
>
|
|
664
664
|
<button class="pf-c-menu-toggle__button" type="button" disabled>Action</button>
|
|
665
665
|
<button
|
|
@@ -678,7 +678,7 @@ cssPrefix: pf-c-menu-toggle
|
|
|
678
678
|
</button>
|
|
679
679
|
</div>
|
|
680
680
|
|
|
681
|
-
<div class="pf-c-menu-toggle pf-m-
|
|
681
|
+
<div class="pf-c-menu-toggle pf-m-split-button pf-m-action pf-m-primary">
|
|
682
682
|
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
683
683
|
<button
|
|
684
684
|
class="pf-c-menu-toggle__button"
|
|
@@ -696,7 +696,7 @@ cssPrefix: pf-c-menu-toggle
|
|
|
696
696
|
</div>
|
|
697
697
|
|
|
698
698
|
<div
|
|
699
|
-
class="pf-c-menu-toggle pf-m-expanded pf-m-
|
|
699
|
+
class="pf-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-action pf-m-primary"
|
|
700
700
|
>
|
|
701
701
|
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
702
702
|
<button
|
|
@@ -720,7 +720,7 @@ cssPrefix: pf-c-menu-toggle
|
|
|
720
720
|
|
|
721
721
|
```html
|
|
722
722
|
<div
|
|
723
|
-
class="pf-c-menu-toggle pf-m-
|
|
723
|
+
class="pf-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled pf-m-secondary"
|
|
724
724
|
>
|
|
725
725
|
<button class="pf-c-menu-toggle__button" type="button" disabled>Action</button>
|
|
726
726
|
<button
|
|
@@ -739,7 +739,7 @@ cssPrefix: pf-c-menu-toggle
|
|
|
739
739
|
</button>
|
|
740
740
|
</div>
|
|
741
741
|
|
|
742
|
-
<div class="pf-c-menu-toggle pf-m-
|
|
742
|
+
<div class="pf-c-menu-toggle pf-m-split-button pf-m-action pf-m-secondary">
|
|
743
743
|
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
744
744
|
<button
|
|
745
745
|
class="pf-c-menu-toggle__button"
|
|
@@ -757,7 +757,7 @@ cssPrefix: pf-c-menu-toggle
|
|
|
757
757
|
</div>
|
|
758
758
|
|
|
759
759
|
<div
|
|
760
|
-
class="pf-c-menu-toggle pf-m-expanded pf-m-
|
|
760
|
+
class="pf-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-action pf-m-secondary"
|
|
761
761
|
>
|
|
762
762
|
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
763
763
|
<button
|
|
@@ -898,6 +898,48 @@ cssPrefix: pf-c-menu-toggle
|
|
|
898
898
|
|
|
899
899
|
```
|
|
900
900
|
|
|
901
|
+
### Typeahead
|
|
902
|
+
|
|
903
|
+
```html
|
|
904
|
+
<div class="pf-c-menu-toggle pf-m-typeahead pf-m-full-width">
|
|
905
|
+
<div class="pf-c-text-input-group pf-m-plain">
|
|
906
|
+
<div class="pf-c-text-input-group__main">
|
|
907
|
+
<span class="pf-c-text-input-group__text">
|
|
908
|
+
<input
|
|
909
|
+
class="pf-c-text-input-group__text-input"
|
|
910
|
+
type="text"
|
|
911
|
+
value
|
|
912
|
+
aria-label="Type to filter"
|
|
913
|
+
/>
|
|
914
|
+
</span>
|
|
915
|
+
</div>
|
|
916
|
+
<div class="pf-c-text-input-group__utilities">
|
|
917
|
+
<button
|
|
918
|
+
class="pf-c-button pf-m-plain"
|
|
919
|
+
type="button"
|
|
920
|
+
aria-label="Clear input"
|
|
921
|
+
>
|
|
922
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
923
|
+
</button>
|
|
924
|
+
</div>
|
|
925
|
+
</div>
|
|
926
|
+
<button
|
|
927
|
+
class="pf-c-menu-toggle__button"
|
|
928
|
+
type="button"
|
|
929
|
+
aria-expanded="false"
|
|
930
|
+
id="typeahead-example-toggle-button"
|
|
931
|
+
aria-label="Menu toggle"
|
|
932
|
+
>
|
|
933
|
+
<span class="pf-c-menu-toggle__controls">
|
|
934
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
935
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
936
|
+
</span>
|
|
937
|
+
</span>
|
|
938
|
+
</button>
|
|
939
|
+
</div>
|
|
940
|
+
|
|
941
|
+
```
|
|
942
|
+
|
|
901
943
|
### Accessibility
|
|
902
944
|
|
|
903
945
|
| Class | Applied to | Outcome |
|
package/package.json
CHANGED
package/patternfly-no-reset.css
CHANGED
|
@@ -14056,7 +14056,7 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
14056
14056
|
--pf-c-form-control--textarea--invalid--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
|
|
14057
14057
|
--pf-c-form-control--m-icon-sprite--success--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#success");
|
|
14058
14058
|
--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#warning");
|
|
14059
|
-
--pf-c-form-control--m-icon-sprite--
|
|
14059
|
+
--pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#invalid");
|
|
14060
14060
|
--pf-c-form-control--m-icon-sprite__select--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#select");
|
|
14061
14061
|
--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#search");
|
|
14062
14062
|
--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#calendar");
|
|
@@ -14182,7 +14182,7 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
14182
14182
|
.pf-c-form-control.pf-m-icon-sprite {
|
|
14183
14183
|
--pf-c-form-control--success--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--success--BackgroundUrl);
|
|
14184
14184
|
--pf-c-form-control--m-warning--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl);
|
|
14185
|
-
--pf-c-form-control--
|
|
14185
|
+
--pf-c-form-control--invalid--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl);
|
|
14186
14186
|
--pf-c-form-control__select--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite__select--BackgroundUrl);
|
|
14187
14187
|
--pf-c-form-control--m-search--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl);
|
|
14188
14188
|
--pf-c-form-control--m-calendar--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl);
|
|
@@ -16850,7 +16850,7 @@ ul.pf-c-list {
|
|
|
16850
16850
|
--pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--hover--BackgroundColor);
|
|
16851
16851
|
--pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--hover--Color, inherit);
|
|
16852
16852
|
}
|
|
16853
|
-
.pf-c-menu__list-item:focus-within {
|
|
16853
|
+
.pf-c-menu__list-item:focus-within, .pf-c-menu__list-item.pf-m-focus {
|
|
16854
16854
|
--pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--focus-within--BackgroundColor);
|
|
16855
16855
|
--pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--focus-within--Color, inherit);
|
|
16856
16856
|
}
|
|
@@ -17128,6 +17128,11 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
|
|
|
17128
17128
|
--pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-global--primary-color--100);
|
|
17129
17129
|
--pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
|
|
17130
17130
|
--pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
|
|
17131
|
+
--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop: calc(var(--pf-c-menu-toggle--PaddingTop) * -1);
|
|
17132
|
+
--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight: calc(var(--pf-c-menu-toggle--PaddingRight) * -1);
|
|
17133
|
+
--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom: calc(var(--pf-c-menu-toggle--PaddingBottom) * -1);
|
|
17134
|
+
--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft: calc(var(--pf-c-menu-toggle--PaddingLeft) * -1);
|
|
17135
|
+
--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--sm);
|
|
17131
17136
|
position: relative;
|
|
17132
17137
|
display: inline-flex;
|
|
17133
17138
|
align-items: center;
|
|
@@ -17136,6 +17141,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
|
|
|
17136
17141
|
font-size: var(--pf-c-menu-toggle--FontSize);
|
|
17137
17142
|
line-height: var(--pf-c-menu-toggle--LineHeight);
|
|
17138
17143
|
color: var(--pf-c-menu-toggle--Color);
|
|
17144
|
+
cursor: pointer;
|
|
17139
17145
|
background-color: var(--pf-c-menu-toggle--BackgroundColor);
|
|
17140
17146
|
border: 0;
|
|
17141
17147
|
border-radius: var(--pf-c-menu-toggle--BorderRadius);
|
|
@@ -17217,7 +17223,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
|
|
|
17217
17223
|
--pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--hover__toggle-icon--Color);
|
|
17218
17224
|
--pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
|
|
17219
17225
|
}
|
|
17220
|
-
.pf-c-menu-toggle:focus {
|
|
17226
|
+
.pf-c-menu-toggle:focus, .pf-c-menu-toggle:focus-within {
|
|
17221
17227
|
--pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--focus--BackgroundColor);
|
|
17222
17228
|
--pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--focus--after--BorderBottomWidth);
|
|
17223
17229
|
--pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--focus--after--BorderBottomColor);
|
|
@@ -17258,6 +17264,11 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
|
|
|
17258
17264
|
--pf-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
|
|
17259
17265
|
height: 100%;
|
|
17260
17266
|
}
|
|
17267
|
+
.pf-c-menu-toggle.pf-m-typeahead .pf-c-text-input-group {
|
|
17268
|
+
--pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight);
|
|
17269
|
+
flex: 1;
|
|
17270
|
+
margin: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft);
|
|
17271
|
+
}
|
|
17261
17272
|
.pf-c-menu-toggle.pf-m-split-button {
|
|
17262
17273
|
--pf-c-menu-toggle__toggle-icon--MarginRight: 0;
|
|
17263
17274
|
padding: 0;
|
|
@@ -17275,7 +17286,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
|
|
|
17275
17286
|
.pf-c-menu-toggle.pf-m-split-button > .pf-c-check {
|
|
17276
17287
|
--pf-c-menu-toggle--PaddingRight: 0;
|
|
17277
17288
|
--pf-c-check__input--MarginTop: 0;
|
|
17278
|
-
--pf-c-check__label--Color:
|
|
17289
|
+
--pf-c-check__label--Color: currentColor;
|
|
17279
17290
|
align-items: center;
|
|
17280
17291
|
align-self: stretch;
|
|
17281
17292
|
}
|
|
@@ -17355,6 +17366,12 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
|
|
|
17355
17366
|
color: var(--pf-c-menu-toggle--m-split-button--child--disabled--Color);
|
|
17356
17367
|
background-color: var(--pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
|
|
17357
17368
|
}
|
|
17369
|
+
.pf-c-menu-toggle.pf-m-typeahead, .pf-c-menu-toggle.pf-m-split-button {
|
|
17370
|
+
--pf-c-menu-toggle__toggle-icon--MarginRight: 0;
|
|
17371
|
+
}
|
|
17372
|
+
.pf-c-menu-toggle.pf-m-full-width {
|
|
17373
|
+
width: 100%;
|
|
17374
|
+
}
|
|
17358
17375
|
|
|
17359
17376
|
.pf-c-menu-toggle__button {
|
|
17360
17377
|
color: inherit;
|
|
@@ -27257,6 +27274,12 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
27257
27274
|
--pf-c-text-input-group--BackgroundColor: var(--pf-c-text-input-group--m-disabled--BackgroundColor);
|
|
27258
27275
|
pointer-events: none;
|
|
27259
27276
|
}
|
|
27277
|
+
.pf-c-text-input-group.pf-m-plain {
|
|
27278
|
+
--pf-c-text-input-group--BackgroundColor: transparent;
|
|
27279
|
+
}
|
|
27280
|
+
.pf-c-text-input-group.pf-m-plain .pf-c-text-input-group__text::before, .pf-c-text-input-group.pf-m-plain .pf-c-text-input-group__text::after {
|
|
27281
|
+
border: 0;
|
|
27282
|
+
}
|
|
27260
27283
|
|
|
27261
27284
|
.pf-c-text-input-group__main {
|
|
27262
27285
|
display: flex;
|