@patternfly/patternfly 4.183.2 → 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/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/DescriptionList/examples/DescriptionList.md +19 -19
- package/docs/components/MenuToggle/examples/MenuToggle.md +51 -9
- package/package.json +1 -1
- package/patternfly-no-reset.css +25 -2
- package/patternfly.css +25 -2
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
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 {
|
|
@@ -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. |
|
|
@@ -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
|
@@ -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;
|
|
@@ -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;
|
package/patternfly.css
CHANGED
|
@@ -16972,7 +16972,7 @@ ul.pf-c-list {
|
|
|
16972
16972
|
--pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--hover--BackgroundColor);
|
|
16973
16973
|
--pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--hover--Color, inherit);
|
|
16974
16974
|
}
|
|
16975
|
-
.pf-c-menu__list-item:focus-within {
|
|
16975
|
+
.pf-c-menu__list-item:focus-within, .pf-c-menu__list-item.pf-m-focus {
|
|
16976
16976
|
--pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--focus-within--BackgroundColor);
|
|
16977
16977
|
--pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--focus-within--Color, inherit);
|
|
16978
16978
|
}
|
|
@@ -17250,6 +17250,11 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
|
|
|
17250
17250
|
--pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-global--primary-color--100);
|
|
17251
17251
|
--pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
|
|
17252
17252
|
--pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
|
|
17253
|
+
--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop: calc(var(--pf-c-menu-toggle--PaddingTop) * -1);
|
|
17254
|
+
--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight: calc(var(--pf-c-menu-toggle--PaddingRight) * -1);
|
|
17255
|
+
--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom: calc(var(--pf-c-menu-toggle--PaddingBottom) * -1);
|
|
17256
|
+
--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft: calc(var(--pf-c-menu-toggle--PaddingLeft) * -1);
|
|
17257
|
+
--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--sm);
|
|
17253
17258
|
position: relative;
|
|
17254
17259
|
display: inline-flex;
|
|
17255
17260
|
align-items: center;
|
|
@@ -17258,6 +17263,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
|
|
|
17258
17263
|
font-size: var(--pf-c-menu-toggle--FontSize);
|
|
17259
17264
|
line-height: var(--pf-c-menu-toggle--LineHeight);
|
|
17260
17265
|
color: var(--pf-c-menu-toggle--Color);
|
|
17266
|
+
cursor: pointer;
|
|
17261
17267
|
background-color: var(--pf-c-menu-toggle--BackgroundColor);
|
|
17262
17268
|
border: 0;
|
|
17263
17269
|
border-radius: var(--pf-c-menu-toggle--BorderRadius);
|
|
@@ -17339,7 +17345,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
|
|
|
17339
17345
|
--pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--hover__toggle-icon--Color);
|
|
17340
17346
|
--pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
|
|
17341
17347
|
}
|
|
17342
|
-
.pf-c-menu-toggle:focus {
|
|
17348
|
+
.pf-c-menu-toggle:focus, .pf-c-menu-toggle:focus-within {
|
|
17343
17349
|
--pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--focus--BackgroundColor);
|
|
17344
17350
|
--pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--focus--after--BorderBottomWidth);
|
|
17345
17351
|
--pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--focus--after--BorderBottomColor);
|
|
@@ -17380,6 +17386,11 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
|
|
|
17380
17386
|
--pf-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
|
|
17381
17387
|
height: 100%;
|
|
17382
17388
|
}
|
|
17389
|
+
.pf-c-menu-toggle.pf-m-typeahead .pf-c-text-input-group {
|
|
17390
|
+
--pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight);
|
|
17391
|
+
flex: 1;
|
|
17392
|
+
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);
|
|
17393
|
+
}
|
|
17383
17394
|
.pf-c-menu-toggle.pf-m-split-button {
|
|
17384
17395
|
--pf-c-menu-toggle__toggle-icon--MarginRight: 0;
|
|
17385
17396
|
padding: 0;
|
|
@@ -17477,6 +17488,12 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
|
|
|
17477
17488
|
color: var(--pf-c-menu-toggle--m-split-button--child--disabled--Color);
|
|
17478
17489
|
background-color: var(--pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
|
|
17479
17490
|
}
|
|
17491
|
+
.pf-c-menu-toggle.pf-m-typeahead, .pf-c-menu-toggle.pf-m-split-button {
|
|
17492
|
+
--pf-c-menu-toggle__toggle-icon--MarginRight: 0;
|
|
17493
|
+
}
|
|
17494
|
+
.pf-c-menu-toggle.pf-m-full-width {
|
|
17495
|
+
width: 100%;
|
|
17496
|
+
}
|
|
17480
17497
|
|
|
17481
17498
|
.pf-c-menu-toggle__button {
|
|
17482
17499
|
color: inherit;
|
|
@@ -27379,6 +27396,12 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
27379
27396
|
--pf-c-text-input-group--BackgroundColor: var(--pf-c-text-input-group--m-disabled--BackgroundColor);
|
|
27380
27397
|
pointer-events: none;
|
|
27381
27398
|
}
|
|
27399
|
+
.pf-c-text-input-group.pf-m-plain {
|
|
27400
|
+
--pf-c-text-input-group--BackgroundColor: transparent;
|
|
27401
|
+
}
|
|
27402
|
+
.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 {
|
|
27403
|
+
border: 0;
|
|
27404
|
+
}
|
|
27382
27405
|
|
|
27383
27406
|
.pf-c-text-input-group__main {
|
|
27384
27407
|
display: flex;
|