@patternfly/patternfly 4.183.1 → 4.184.1
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/components/Accordion/accordion.css +1 -0
- package/components/Accordion/accordion.scss +1 -0
- 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 +18 -1
- package/components/MenuToggle/menu-toggle.scss +28 -1
- package/components/TextInputGroup/text-input-group.css +6 -0
- package/components/TextInputGroup/text-input-group.scss +11 -0
- package/docs/components/Accordion/examples/Accordion.md +16 -3
- 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 -4
- package/patternfly.css +28 -4
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -121,6 +121,7 @@
|
|
|
121
121
|
right: 0;
|
|
122
122
|
bottom: 0;
|
|
123
123
|
left: 0;
|
|
124
|
+
pointer-events: none;
|
|
124
125
|
content: "";
|
|
125
126
|
border-bottom: var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth) solid var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor);
|
|
126
127
|
}
|
|
@@ -140,6 +140,7 @@
|
|
|
140
140
|
right: 0;
|
|
141
141
|
bottom: 0;
|
|
142
142
|
left: 0;
|
|
143
|
+
pointer-events: none;
|
|
143
144
|
content: "";
|
|
144
145
|
border-bottom: var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth) solid var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor);
|
|
145
146
|
}
|
|
@@ -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;
|
|
@@ -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
|
|
|
@@ -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 {
|
|
@@ -275,9 +275,9 @@ cssPrefix: pf-c-accordion
|
|
|
275
275
|
</button>
|
|
276
276
|
</h3>
|
|
277
277
|
<div class="pf-c-accordion__expanded-content pf-m-expanded">
|
|
278
|
-
<div
|
|
279
|
-
|
|
280
|
-
|
|
278
|
+
<div class="pf-c-accordion__expanded-content-body">
|
|
279
|
+
<a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
280
|
+
</div>
|
|
281
281
|
</div>
|
|
282
282
|
|
|
283
283
|
<h3>
|
|
@@ -293,6 +293,19 @@ cssPrefix: pf-c-accordion
|
|
|
293
293
|
<div class="pf-c-accordion__expanded-content-body">This text is hidden</div>
|
|
294
294
|
</div>
|
|
295
295
|
|
|
296
|
+
<h3>
|
|
297
|
+
<button class="pf-c-accordion__toggle" type="button" aria-expanded="false">
|
|
298
|
+
<span class="pf-c-accordion__toggle-text">Item four</span>
|
|
299
|
+
|
|
300
|
+
<span class="pf-c-accordion__toggle-icon">
|
|
301
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
302
|
+
</span>
|
|
303
|
+
</button>
|
|
304
|
+
</h3>
|
|
305
|
+
<div class="pf-c-accordion__expanded-content" hidden>
|
|
306
|
+
<div class="pf-c-accordion__expanded-content-body">This text is hidden</div>
|
|
307
|
+
</div>
|
|
308
|
+
|
|
296
309
|
<h3>
|
|
297
310
|
<button class="pf-c-accordion__toggle" type="button" aria-expanded="false">
|
|
298
311
|
<span class="pf-c-accordion__toggle-text">Item five</span>
|
|
@@ -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
|
@@ -5702,6 +5702,7 @@ html {
|
|
|
5702
5702
|
right: 0;
|
|
5703
5703
|
bottom: 0;
|
|
5704
5704
|
left: 0;
|
|
5705
|
+
pointer-events: none;
|
|
5705
5706
|
content: "";
|
|
5706
5707
|
border-bottom: var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth) solid var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor);
|
|
5707
5708
|
}
|
|
@@ -14056,7 +14057,7 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
14056
14057
|
--pf-c-form-control--textarea--invalid--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
|
|
14057
14058
|
--pf-c-form-control--m-icon-sprite--success--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#success");
|
|
14058
14059
|
--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--
|
|
14060
|
+
--pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#invalid");
|
|
14060
14061
|
--pf-c-form-control--m-icon-sprite__select--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#select");
|
|
14061
14062
|
--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#search");
|
|
14062
14063
|
--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#calendar");
|
|
@@ -14182,7 +14183,7 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
14182
14183
|
.pf-c-form-control.pf-m-icon-sprite {
|
|
14183
14184
|
--pf-c-form-control--success--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--success--BackgroundUrl);
|
|
14184
14185
|
--pf-c-form-control--m-warning--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl);
|
|
14185
|
-
--pf-c-form-control--
|
|
14186
|
+
--pf-c-form-control--invalid--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl);
|
|
14186
14187
|
--pf-c-form-control__select--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite__select--BackgroundUrl);
|
|
14187
14188
|
--pf-c-form-control--m-search--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl);
|
|
14188
14189
|
--pf-c-form-control--m-calendar--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl);
|
|
@@ -16850,7 +16851,7 @@ ul.pf-c-list {
|
|
|
16850
16851
|
--pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--hover--BackgroundColor);
|
|
16851
16852
|
--pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--hover--Color, inherit);
|
|
16852
16853
|
}
|
|
16853
|
-
.pf-c-menu__list-item:focus-within {
|
|
16854
|
+
.pf-c-menu__list-item:focus-within, .pf-c-menu__list-item.pf-m-focus {
|
|
16854
16855
|
--pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--focus-within--BackgroundColor);
|
|
16855
16856
|
--pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--focus-within--Color, inherit);
|
|
16856
16857
|
}
|
|
@@ -17128,6 +17129,11 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
|
|
|
17128
17129
|
--pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-global--primary-color--100);
|
|
17129
17130
|
--pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
|
|
17130
17131
|
--pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
|
|
17132
|
+
--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop: calc(var(--pf-c-menu-toggle--PaddingTop) * -1);
|
|
17133
|
+
--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight: calc(var(--pf-c-menu-toggle--PaddingRight) * -1);
|
|
17134
|
+
--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom: calc(var(--pf-c-menu-toggle--PaddingBottom) * -1);
|
|
17135
|
+
--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft: calc(var(--pf-c-menu-toggle--PaddingLeft) * -1);
|
|
17136
|
+
--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--sm);
|
|
17131
17137
|
position: relative;
|
|
17132
17138
|
display: inline-flex;
|
|
17133
17139
|
align-items: center;
|
|
@@ -17136,6 +17142,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
|
|
|
17136
17142
|
font-size: var(--pf-c-menu-toggle--FontSize);
|
|
17137
17143
|
line-height: var(--pf-c-menu-toggle--LineHeight);
|
|
17138
17144
|
color: var(--pf-c-menu-toggle--Color);
|
|
17145
|
+
cursor: pointer;
|
|
17139
17146
|
background-color: var(--pf-c-menu-toggle--BackgroundColor);
|
|
17140
17147
|
border: 0;
|
|
17141
17148
|
border-radius: var(--pf-c-menu-toggle--BorderRadius);
|
|
@@ -17217,7 +17224,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
|
|
|
17217
17224
|
--pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--hover__toggle-icon--Color);
|
|
17218
17225
|
--pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
|
|
17219
17226
|
}
|
|
17220
|
-
.pf-c-menu-toggle:focus {
|
|
17227
|
+
.pf-c-menu-toggle:focus, .pf-c-menu-toggle:focus-within {
|
|
17221
17228
|
--pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--focus--BackgroundColor);
|
|
17222
17229
|
--pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--focus--after--BorderBottomWidth);
|
|
17223
17230
|
--pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--focus--after--BorderBottomColor);
|
|
@@ -17258,6 +17265,11 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
|
|
|
17258
17265
|
--pf-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
|
|
17259
17266
|
height: 100%;
|
|
17260
17267
|
}
|
|
17268
|
+
.pf-c-menu-toggle.pf-m-typeahead .pf-c-text-input-group {
|
|
17269
|
+
--pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight);
|
|
17270
|
+
flex: 1;
|
|
17271
|
+
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);
|
|
17272
|
+
}
|
|
17261
17273
|
.pf-c-menu-toggle.pf-m-split-button {
|
|
17262
17274
|
--pf-c-menu-toggle__toggle-icon--MarginRight: 0;
|
|
17263
17275
|
padding: 0;
|
|
@@ -17355,6 +17367,12 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
|
|
|
17355
17367
|
color: var(--pf-c-menu-toggle--m-split-button--child--disabled--Color);
|
|
17356
17368
|
background-color: var(--pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
|
|
17357
17369
|
}
|
|
17370
|
+
.pf-c-menu-toggle.pf-m-typeahead, .pf-c-menu-toggle.pf-m-split-button {
|
|
17371
|
+
--pf-c-menu-toggle__toggle-icon--MarginRight: 0;
|
|
17372
|
+
}
|
|
17373
|
+
.pf-c-menu-toggle.pf-m-full-width {
|
|
17374
|
+
width: 100%;
|
|
17375
|
+
}
|
|
17358
17376
|
|
|
17359
17377
|
.pf-c-menu-toggle__button {
|
|
17360
17378
|
color: inherit;
|
|
@@ -27257,6 +27275,12 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
27257
27275
|
--pf-c-text-input-group--BackgroundColor: var(--pf-c-text-input-group--m-disabled--BackgroundColor);
|
|
27258
27276
|
pointer-events: none;
|
|
27259
27277
|
}
|
|
27278
|
+
.pf-c-text-input-group.pf-m-plain {
|
|
27279
|
+
--pf-c-text-input-group--BackgroundColor: transparent;
|
|
27280
|
+
}
|
|
27281
|
+
.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 {
|
|
27282
|
+
border: 0;
|
|
27283
|
+
}
|
|
27260
27284
|
|
|
27261
27285
|
.pf-c-text-input-group__main {
|
|
27262
27286
|
display: flex;
|