@patternfly/patternfly 5.3.0-prerelease.2 → 5.3.0-prerelease.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/components/FormControl/form-control.css +2 -1
  2. package/components/FormControl/form-control.scss +8 -4
  3. package/components/MenuToggle/menu-toggle.css +31 -0
  4. package/components/MenuToggle/menu-toggle.scss +42 -0
  5. package/docs/components/MenuToggle/examples/MenuToggle.md +64 -0
  6. package/package.json +5 -5
  7. package/patternfly-no-globals.css +33 -1
  8. package/patternfly-theme-dark-unversioned.css +33 -1
  9. package/patternfly.css +33 -1
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
package/components/FormControl/form-control.css CHANGED
@@ -211,6 +211,7 @@
211
211
  .pf-v5-c-form-control > select {
212
212
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control__select--PaddingRight);
213
213
  --pf-v5-c-form-control--PaddingLeft: var(--pf-v5-c-form-control__select--PaddingLeft);
214
+ background-color: var(--pf-v5-c-form-control--BackgroundColor);
214
215
  }
215
216
  @-moz-document url-prefix() {
216
217
  .pf-v5-c-form-control > select {
@@ -222,7 +223,7 @@
222
223
  --pf-v5-c-form-control--Color: var(--pf-v5-c-form-control--m-placeholder--Color);
223
224
  }
224
225
  .pf-v5-c-form-control.pf-m-placeholder > select * {
225
- --pf-v5-c-form-control--Color: var(--pf-v5-c-form-control--m-placeholder--child--Color);
226
+ color: var(--pf-v5-c-form-control--m-placeholder--child--Color);
226
227
  }
227
228
  .pf-v5-c-form-control.pf-m-placeholder > select *:disabled {
228
229
  color: revert;
package/components/FormControl/form-control.scss CHANGED
@@ -93,7 +93,7 @@
93
93
  --#{$form-control}--textarea--Width: var(--#{$form-control}--Width);
94
94
  --#{$form-control}--textarea--Height: auto;
95
95
 
96
- // Form control icon
96
+ // Form control icon
97
97
  --#{$form-control}__icon--PaddingTop: var(--#{$pf-global}--spacer--form-element);
98
98
  --#{$form-control}__icon--Color: var(--#{$pf-global}--icon--Color--light);
99
99
  --#{$form-control}__icon--m-status--Color: var(--#{$pf-global}--icon--Color--light);
@@ -174,7 +174,7 @@
174
174
  > ::placeholder {
175
175
  color: var(--#{$form-control}--m-placeholder--Color); // TODO update to set --#{$form-control}--Color in breaking change - also look for any other place to do that in this component
176
176
  }
177
-
177
+
178
178
  > :is(input, select) {
179
179
  text-overflow: ellipsis;
180
180
  }
@@ -273,13 +273,18 @@
273
273
  --#{$form-control}--PaddingRight: calc(var(--#{$form-control}__select--PaddingRight) - 1px);
274
274
  --#{$form-control}--PaddingLeft: calc(var(--#{$form-control}__select--PaddingLeft) - 4px);
275
275
  }
276
+
277
+ // We need this property for certain Linux distros/non-Mac OS where dark theme styles aren't applied properly.
278
+ background-color: var(--#{$form-control}--BackgroundColor);
276
279
  }
277
280
 
278
281
  &.pf-m-placeholder > select {
279
282
  --#{$form-control}--Color: var(--#{$form-control}--m-placeholder--Color);
280
283
 
281
284
  * {
282
- --#{$form-control}--Color: var(--#{$form-control}--m-placeholder--child--Color);
285
+ // We need to use the color property instead of redefining a var
286
+ // for certain Linux distros/non-Mac OS
287
+ color: var(--#{$form-control}--m-placeholder--child--Color);
283
288
 
284
289
  // stylelint-disable max-nesting-depth
285
290
  &:disabled {
@@ -313,7 +318,6 @@
313
318
 
314
319
  overflow: auto;
315
320
  }
316
-
317
321
  }
318
322
 
319
323
  .#{$form-control}__icon {
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -117,6 +117,16 @@
117
117
  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
118
118
  --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
119
119
  --pf-v5-c-menu-toggle--m-typeahead__button--AlignSelf: center;
120
+ --pf-v5-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-v5-global--spacer--md);
121
+ --pf-v5-c-menu-toggle--m-success--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
122
+ --pf-v5-c-menu-toggle--m-success--after--BorderBottomColor: var(--pf-v5-global--success-color--100);
123
+ --pf-v5-c-menu-toggle--m-success__status-icon--Color: var(--pf-v5-global--success-color--100);
124
+ --pf-v5-c-menu-toggle--m-warning--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
125
+ --pf-v5-c-menu-toggle--m-warning--after--BorderBottomColor: var(--pf-v5-global--warning-color--100);
126
+ --pf-v5-c-menu-toggle--m-warning__status-icon--Color: var(--pf-v5-global--warning-color--100);
127
+ --pf-v5-c-menu-toggle--m-danger--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
128
+ --pf-v5-c-menu-toggle--m-danger--after--BorderBottomColor: var(--pf-v5-global--danger-color--100);
129
+ --pf-v5-c-menu-toggle--m-danger__status-icon--Color: var(--pf-v5-global--danger-color--100);
120
130
  position: relative;
121
131
  display: inline-flex;
122
132
  align-items: center;
@@ -378,6 +388,21 @@
378
388
  .pf-v5-c-menu-toggle.pf-m-full-width {
379
389
  width: 100%;
380
390
  }
391
+ .pf-v5-c-menu-toggle.pf-m-success {
392
+ --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-success--after--BorderBottomWidth);
393
+ --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-c-menu-toggle--m-success--after--BorderBottomColor);
394
+ --pf-v5-c-menu-toggle__status-icon--Color: var(--pf-v5-c-menu-toggle--m-success__status-icon--Color);
395
+ }
396
+ .pf-v5-c-menu-toggle.pf-m-warning {
397
+ --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-warning--after--BorderBottomWidth);
398
+ --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-c-menu-toggle--m-warning--after--BorderBottomColor);
399
+ --pf-v5-c-menu-toggle__status-icon--Color: var(--pf-v5-c-menu-toggle--m-warning__status-icon--Color);
400
+ }
401
+ .pf-v5-c-menu-toggle.pf-m-danger {
402
+ --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-danger--after--BorderBottomWidth);
403
+ --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-c-menu-toggle--m-danger--after--BorderBottomColor);
404
+ --pf-v5-c-menu-toggle__status-icon--Color: var(--pf-v5-c-menu-toggle--m-danger__status-icon--Color);
405
+ }
381
406
 
382
407
  .pf-v5-c-menu-toggle__button {
383
408
  --pf-v5-c-menu-toggle__controls--PaddingLeft: 0;
@@ -412,6 +437,7 @@
412
437
  }
413
438
 
414
439
  .pf-v5-c-menu-toggle__controls {
440
+ display: flex;
415
441
  padding-inline-start: var(--pf-v5-c-menu-toggle__controls--PaddingLeft);
416
442
  margin-inline-start: var(--pf-v5-c-menu-toggle__controls--MarginLeft);
417
443
  margin-inline-end: var(--pf-v5-c-menu-toggle__controls--MarginRight);
@@ -422,6 +448,11 @@
422
448
  color: var(--pf-v5-c-menu-toggle__toggle-icon--Color, inherit);
423
449
  }
424
450
 
451
+ .pf-v5-c-menu-toggle__status-icon {
452
+ margin-inline-end: var(--pf-v5-c-menu-toggle__status-icon--MarginInlineEnd);
453
+ color: var(--pf-v5-c-menu-toggle__status-icon--Color, inherit);
454
+ }
455
+
425
456
  :where(.pf-v5-theme-dark) .pf-v5-c-menu-toggle {
426
457
  --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
427
458
  --pf-v5-c-menu-toggle--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -165,6 +165,24 @@
165
165
  --#{$menu-toggle}--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--#{$pf-global}--spacer--sm);
166
166
  --#{$menu-toggle}--m-typeahead__button--AlignSelf: center;
167
167
 
168
+ // Status icon
169
+ --#{$menu-toggle}__status-icon--MarginInlineEnd: var(--#{$pf-global}--spacer--md);
170
+
171
+ // Success
172
+ --#{$menu-toggle}--m-success--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
173
+ --#{$menu-toggle}--m-success--after--BorderBottomColor: var(--#{$pf-global}--success-color--100);
174
+ --#{$menu-toggle}--m-success__status-icon--Color: var(--#{$pf-global}--success-color--100);
175
+
176
+ // Warning
177
+ --#{$menu-toggle}--m-warning--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
178
+ --#{$menu-toggle}--m-warning--after--BorderBottomColor: var(--#{$pf-global}--warning-color--100);
179
+ --#{$menu-toggle}--m-warning__status-icon--Color: var(--#{$pf-global}--warning-color--100);
180
+
181
+ // Danger
182
+ --#{$menu-toggle}--m-danger--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
183
+ --#{$menu-toggle}--m-danger--after--BorderBottomColor: var(--#{$pf-global}--danger-color--100);
184
+ --#{$menu-toggle}--m-danger__status-icon--Color: var(--#{$pf-global}--danger-color--100);
185
+
168
186
  position: relative;
169
187
  display: inline-flex;
170
188
  align-items: center;
@@ -521,6 +539,24 @@
521
539
  &.pf-m-full-width {
522
540
  width: 100%;
523
541
  }
542
+
543
+ &.pf-m-success {
544
+ --#{$menu-toggle}--after--BorderBottomWidth: var(--#{$menu-toggle}--m-success--after--BorderBottomWidth);
545
+ --#{$menu-toggle}--after--BorderBottomColor: var(--#{$menu-toggle}--m-success--after--BorderBottomColor);
546
+ --#{$menu-toggle}__status-icon--Color: var(--#{$menu-toggle}--m-success__status-icon--Color);
547
+ }
548
+
549
+ &.pf-m-warning {
550
+ --#{$menu-toggle}--after--BorderBottomWidth: var(--#{$menu-toggle}--m-warning--after--BorderBottomWidth);
551
+ --#{$menu-toggle}--after--BorderBottomColor: var(--#{$menu-toggle}--m-warning--after--BorderBottomColor);
552
+ --#{$menu-toggle}__status-icon--Color: var(--#{$menu-toggle}--m-warning__status-icon--Color);
553
+ }
554
+
555
+ &.pf-m-danger {
556
+ --#{$menu-toggle}--after--BorderBottomWidth: var(--#{$menu-toggle}--m-danger--after--BorderBottomWidth);
557
+ --#{$menu-toggle}--after--BorderBottomColor: var(--#{$menu-toggle}--m-danger--after--BorderBottomColor);
558
+ --#{$menu-toggle}__status-icon--Color: var(--#{$menu-toggle}--m-danger__status-icon--Color);
559
+ }
524
560
  }
525
561
 
526
562
  .#{$menu-toggle}__button {
@@ -556,6 +592,7 @@
556
592
  }
557
593
 
558
594
  .#{$menu-toggle}__controls {
595
+ display: flex;
559
596
  padding-inline-start: var(--#{$menu-toggle}__controls--PaddingLeft);
560
597
  margin-inline-start: var(--#{$menu-toggle}__controls--MarginLeft);
561
598
  margin-inline-end: var(--#{$menu-toggle}__controls--MarginRight);
@@ -566,6 +603,11 @@
566
603
  color: var(--#{$menu-toggle}__toggle-icon--Color, inherit);
567
604
  }
568
605
 
606
+ .#{$menu-toggle}__status-icon {
607
+ margin-inline-end: var(--#{$menu-toggle}__status-icon--MarginInlineEnd);
608
+ color: var(--#{$menu-toggle}__status-icon--Color, inherit);
609
+ }
610
+
569
611
  // stylelint-disable no-invalid-position-at-import-rule
570
612
  @import "themes/dark/menu-toggle";
571
613
 
package/docs/components/MenuToggle/examples/MenuToggle.md CHANGED
@@ -981,6 +981,67 @@ cssPrefix: pf-v5-c-menu-toggle
981
981
 
982
982
  ```
983
983
 
984
+ ### Status
985
+
986
+ ```html isBeta
987
+ <button
988
+ class="pf-v5-c-menu-toggle pf-m-success"
989
+ type="button"
990
+ aria-expanded="false"
991
+ >
992
+ <span class="pf-v5-c-menu-toggle__text">Success</span>
993
+ <span class="pf-v5-c-menu-toggle__controls">
994
+ <span class="pf-v5-c-menu-toggle__status-icon">
995
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
996
+ </span>
997
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
998
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
999
+ </span>
1000
+ </span>
1001
+ </button>
1002
+
1003
+ <br />
1004
+ <br />
1005
+
1006
+ <button
1007
+ class="pf-v5-c-menu-toggle pf-m-warning"
1008
+ type="button"
1009
+ aria-expanded="false"
1010
+ >
1011
+ <span class="pf-v5-c-menu-toggle__text">Warning</span>
1012
+ <span class="pf-v5-c-menu-toggle__controls">
1013
+ <span class="pf-v5-c-menu-toggle__status-icon">
1014
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1015
+ </span>
1016
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1017
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1018
+ </span>
1019
+ </span>
1020
+ </button>
1021
+
1022
+ <br />
1023
+ <br />
1024
+
1025
+ <button
1026
+ class="pf-v5-c-menu-toggle pf-m-danger"
1027
+ type="button"
1028
+ aria-expanded="false"
1029
+ >
1030
+ <span class="pf-v5-c-menu-toggle__text">Danger</span>
1031
+ <span class="pf-v5-c-menu-toggle__controls">
1032
+ <span class="pf-v5-c-menu-toggle__status-icon">
1033
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1034
+ </span>
1035
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1036
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1037
+ </span>
1038
+ </span>
1039
+ </button>
1040
+
1041
+ ```
1042
+
1043
+ ## Documentation
1044
+
984
1045
  ### Accessibility
985
1046
 
986
1047
  | Class | Applied to | Outcome |
@@ -1010,3 +1071,6 @@ cssPrefix: pf-v5-c-menu-toggle
1010
1071
  | `.pf-m-plain` | `.pf-v5-c-menu-toggle` | Modifies the menu toggle component for the plain variation. |
1011
1072
  | `.pf-m-expanded` | `.pf-v5-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
1012
1073
  | `.pf-m-full-height` | `.pf-v5-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |
1074
+ | `.pf-m-success` | `.pf-v5-c-menu-toggle` | Modifies the menu toggle component for the success state. |
1075
+ | `.pf-m-warning` | `.pf-v5-c-menu-toggle` | Modifies the menu toggle component for the warning state. |
1076
+ | `.pf-m-danger` | `.pf-v5-c-menu-toggle` | Modifies the menu toggle component for the danger state. |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "5.3.0-prerelease.2",
4
+ "version": "5.3.0-prerelease.4",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -46,11 +46,11 @@
46
46
  "@commitlint/config-conventional": "^18.4.3",
47
47
  "@fortawesome/fontawesome": "^1.1.8",
48
48
  "@octokit/rest": "^20.0.2",
49
- "@patternfly/documentation-framework": "5.4.3",
49
+ "@patternfly/documentation-framework": "5.6.0",
50
50
  "@patternfly/patternfly-a11y": "4.3.1",
51
- "@patternfly/react-code-editor": "5.2.1",
52
- "@patternfly/react-core": "5.2.1",
53
- "@patternfly/react-table": "5.2.1",
51
+ "@patternfly/react-code-editor": "5.2.3",
52
+ "@patternfly/react-core": "5.2.3",
53
+ "@patternfly/react-table": "5.2.3",
54
54
  "@starptech/prettyhtml": "^0.10.0",
55
55
  "backstopjs": "^6.2.2",
56
56
  "cheerio": "^1.0.0-rc.12",
package/patternfly-no-globals.css CHANGED
@@ -15147,6 +15147,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15147
15147
  .pf-v5-c-form-control > select {
15148
15148
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control__select--PaddingRight);
15149
15149
  --pf-v5-c-form-control--PaddingLeft: var(--pf-v5-c-form-control__select--PaddingLeft);
15150
+ background-color: var(--pf-v5-c-form-control--BackgroundColor);
15150
15151
  }
15151
15152
  @-moz-document url-prefix() {
15152
15153
  .pf-v5-c-form-control > select {
@@ -15158,7 +15159,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15158
15159
  --pf-v5-c-form-control--Color: var(--pf-v5-c-form-control--m-placeholder--Color);
15159
15160
  }
15160
15161
  .pf-v5-c-form-control.pf-m-placeholder > select * {
15161
- --pf-v5-c-form-control--Color: var(--pf-v5-c-form-control--m-placeholder--child--Color);
15162
+ color: var(--pf-v5-c-form-control--m-placeholder--child--Color);
15162
15163
  }
15163
15164
  .pf-v5-c-form-control.pf-m-placeholder > select *:disabled {
15164
15165
  color: revert;
@@ -18474,6 +18475,16 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18474
18475
  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
18475
18476
  --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
18476
18477
  --pf-v5-c-menu-toggle--m-typeahead__button--AlignSelf: center;
18478
+ --pf-v5-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-v5-global--spacer--md);
18479
+ --pf-v5-c-menu-toggle--m-success--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
18480
+ --pf-v5-c-menu-toggle--m-success--after--BorderBottomColor: var(--pf-v5-global--success-color--100);
18481
+ --pf-v5-c-menu-toggle--m-success__status-icon--Color: var(--pf-v5-global--success-color--100);
18482
+ --pf-v5-c-menu-toggle--m-warning--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
18483
+ --pf-v5-c-menu-toggle--m-warning--after--BorderBottomColor: var(--pf-v5-global--warning-color--100);
18484
+ --pf-v5-c-menu-toggle--m-warning__status-icon--Color: var(--pf-v5-global--warning-color--100);
18485
+ --pf-v5-c-menu-toggle--m-danger--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
18486
+ --pf-v5-c-menu-toggle--m-danger--after--BorderBottomColor: var(--pf-v5-global--danger-color--100);
18487
+ --pf-v5-c-menu-toggle--m-danger__status-icon--Color: var(--pf-v5-global--danger-color--100);
18477
18488
  position: relative;
18478
18489
  display: inline-flex;
18479
18490
  align-items: center;
@@ -18735,6 +18746,21 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18735
18746
  .pf-v5-c-menu-toggle.pf-m-full-width {
18736
18747
  width: 100%;
18737
18748
  }
18749
+ .pf-v5-c-menu-toggle.pf-m-success {
18750
+ --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-success--after--BorderBottomWidth);
18751
+ --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-c-menu-toggle--m-success--after--BorderBottomColor);
18752
+ --pf-v5-c-menu-toggle__status-icon--Color: var(--pf-v5-c-menu-toggle--m-success__status-icon--Color);
18753
+ }
18754
+ .pf-v5-c-menu-toggle.pf-m-warning {
18755
+ --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-warning--after--BorderBottomWidth);
18756
+ --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-c-menu-toggle--m-warning--after--BorderBottomColor);
18757
+ --pf-v5-c-menu-toggle__status-icon--Color: var(--pf-v5-c-menu-toggle--m-warning__status-icon--Color);
18758
+ }
18759
+ .pf-v5-c-menu-toggle.pf-m-danger {
18760
+ --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-danger--after--BorderBottomWidth);
18761
+ --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-c-menu-toggle--m-danger--after--BorderBottomColor);
18762
+ --pf-v5-c-menu-toggle__status-icon--Color: var(--pf-v5-c-menu-toggle--m-danger__status-icon--Color);
18763
+ }
18738
18764
 
18739
18765
  .pf-v5-c-menu-toggle__button {
18740
18766
  --pf-v5-c-menu-toggle__controls--PaddingLeft: 0;
@@ -18769,6 +18795,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18769
18795
  }
18770
18796
 
18771
18797
  .pf-v5-c-menu-toggle__controls {
18798
+ display: flex;
18772
18799
  padding-inline-start: var(--pf-v5-c-menu-toggle__controls--PaddingLeft);
18773
18800
  margin-inline-start: var(--pf-v5-c-menu-toggle__controls--MarginLeft);
18774
18801
  margin-inline-end: var(--pf-v5-c-menu-toggle__controls--MarginRight);
@@ -18779,6 +18806,11 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18779
18806
  color: var(--pf-v5-c-menu-toggle__toggle-icon--Color, inherit);
18780
18807
  }
18781
18808
 
18809
+ .pf-v5-c-menu-toggle__status-icon {
18810
+ margin-inline-end: var(--pf-v5-c-menu-toggle__status-icon--MarginInlineEnd);
18811
+ color: var(--pf-v5-c-menu-toggle__status-icon--Color, inherit);
18812
+ }
18813
+
18782
18814
  :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button,
18783
18815
  :where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button,
18784
18816
  :where(.pf-v5-theme-dark) .pf-v5-c-page__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-banner .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-login__header .pf-v5-c-button,
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -15264,6 +15264,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15264
15264
  .pf-v5-c-form-control > select {
15265
15265
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control__select--PaddingRight);
15266
15266
  --pf-v5-c-form-control--PaddingLeft: var(--pf-v5-c-form-control__select--PaddingLeft);
15267
+ background-color: var(--pf-v5-c-form-control--BackgroundColor);
15267
15268
  }
15268
15269
  @-moz-document url-prefix() {
15269
15270
  .pf-v5-c-form-control > select {
@@ -15275,7 +15276,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15275
15276
  --pf-v5-c-form-control--Color: var(--pf-v5-c-form-control--m-placeholder--Color);
15276
15277
  }
15277
15278
  .pf-v5-c-form-control.pf-m-placeholder > select * {
15278
- --pf-v5-c-form-control--Color: var(--pf-v5-c-form-control--m-placeholder--child--Color);
15279
+ color: var(--pf-v5-c-form-control--m-placeholder--child--Color);
15279
15280
  }
15280
15281
  .pf-v5-c-form-control.pf-m-placeholder > select *:disabled {
15281
15282
  color: revert;
@@ -18591,6 +18592,16 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18591
18592
  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
18592
18593
  --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
18593
18594
  --pf-v5-c-menu-toggle--m-typeahead__button--AlignSelf: center;
18595
+ --pf-v5-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-v5-global--spacer--md);
18596
+ --pf-v5-c-menu-toggle--m-success--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
18597
+ --pf-v5-c-menu-toggle--m-success--after--BorderBottomColor: var(--pf-v5-global--success-color--100);
18598
+ --pf-v5-c-menu-toggle--m-success__status-icon--Color: var(--pf-v5-global--success-color--100);
18599
+ --pf-v5-c-menu-toggle--m-warning--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
18600
+ --pf-v5-c-menu-toggle--m-warning--after--BorderBottomColor: var(--pf-v5-global--warning-color--100);
18601
+ --pf-v5-c-menu-toggle--m-warning__status-icon--Color: var(--pf-v5-global--warning-color--100);
18602
+ --pf-v5-c-menu-toggle--m-danger--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
18603
+ --pf-v5-c-menu-toggle--m-danger--after--BorderBottomColor: var(--pf-v5-global--danger-color--100);
18604
+ --pf-v5-c-menu-toggle--m-danger__status-icon--Color: var(--pf-v5-global--danger-color--100);
18594
18605
  position: relative;
18595
18606
  display: inline-flex;
18596
18607
  align-items: center;
@@ -18852,6 +18863,21 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18852
18863
  .pf-v5-c-menu-toggle.pf-m-full-width {
18853
18864
  width: 100%;
18854
18865
  }
18866
+ .pf-v5-c-menu-toggle.pf-m-success {
18867
+ --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-success--after--BorderBottomWidth);
18868
+ --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-c-menu-toggle--m-success--after--BorderBottomColor);
18869
+ --pf-v5-c-menu-toggle__status-icon--Color: var(--pf-v5-c-menu-toggle--m-success__status-icon--Color);
18870
+ }
18871
+ .pf-v5-c-menu-toggle.pf-m-warning {
18872
+ --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-warning--after--BorderBottomWidth);
18873
+ --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-c-menu-toggle--m-warning--after--BorderBottomColor);
18874
+ --pf-v5-c-menu-toggle__status-icon--Color: var(--pf-v5-c-menu-toggle--m-warning__status-icon--Color);
18875
+ }
18876
+ .pf-v5-c-menu-toggle.pf-m-danger {
18877
+ --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-danger--after--BorderBottomWidth);
18878
+ --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-c-menu-toggle--m-danger--after--BorderBottomColor);
18879
+ --pf-v5-c-menu-toggle__status-icon--Color: var(--pf-v5-c-menu-toggle--m-danger__status-icon--Color);
18880
+ }
18855
18881
 
18856
18882
  .pf-v5-c-menu-toggle__button {
18857
18883
  --pf-v5-c-menu-toggle__controls--PaddingLeft: 0;
@@ -18886,6 +18912,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18886
18912
  }
18887
18913
 
18888
18914
  .pf-v5-c-menu-toggle__controls {
18915
+ display: flex;
18889
18916
  padding-inline-start: var(--pf-v5-c-menu-toggle__controls--PaddingLeft);
18890
18917
  margin-inline-start: var(--pf-v5-c-menu-toggle__controls--MarginLeft);
18891
18918
  margin-inline-end: var(--pf-v5-c-menu-toggle__controls--MarginRight);
@@ -18896,6 +18923,11 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18896
18923
  color: var(--pf-v5-c-menu-toggle__toggle-icon--Color, inherit);
18897
18924
  }
18898
18925
 
18926
+ .pf-v5-c-menu-toggle__status-icon {
18927
+ margin-inline-end: var(--pf-v5-c-menu-toggle__status-icon--MarginInlineEnd);
18928
+ color: var(--pf-v5-c-menu-toggle__status-icon--Color, inherit);
18929
+ }
18930
+
18899
18931
  :where(.pf-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button,
18900
18932
  :where(.pf-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button,
18901
18933
  :where(.pf-theme-dark) .pf-v5-c-page__header .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-about-modal-box .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-banner .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-login__header .pf-v5-c-button,
package/patternfly.css CHANGED
@@ -15264,6 +15264,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15264
15264
  .pf-v5-c-form-control > select {
15265
15265
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control__select--PaddingRight);
15266
15266
  --pf-v5-c-form-control--PaddingLeft: var(--pf-v5-c-form-control__select--PaddingLeft);
15267
+ background-color: var(--pf-v5-c-form-control--BackgroundColor);
15267
15268
  }
15268
15269
  @-moz-document url-prefix() {
15269
15270
  .pf-v5-c-form-control > select {
@@ -15275,7 +15276,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15275
15276
  --pf-v5-c-form-control--Color: var(--pf-v5-c-form-control--m-placeholder--Color);
15276
15277
  }
15277
15278
  .pf-v5-c-form-control.pf-m-placeholder > select * {
15278
- --pf-v5-c-form-control--Color: var(--pf-v5-c-form-control--m-placeholder--child--Color);
15279
+ color: var(--pf-v5-c-form-control--m-placeholder--child--Color);
15279
15280
  }
15280
15281
  .pf-v5-c-form-control.pf-m-placeholder > select *:disabled {
15281
15282
  color: revert;
@@ -18591,6 +18592,16 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18591
18592
  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
18592
18593
  --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
18593
18594
  --pf-v5-c-menu-toggle--m-typeahead__button--AlignSelf: center;
18595
+ --pf-v5-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-v5-global--spacer--md);
18596
+ --pf-v5-c-menu-toggle--m-success--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
18597
+ --pf-v5-c-menu-toggle--m-success--after--BorderBottomColor: var(--pf-v5-global--success-color--100);
18598
+ --pf-v5-c-menu-toggle--m-success__status-icon--Color: var(--pf-v5-global--success-color--100);
18599
+ --pf-v5-c-menu-toggle--m-warning--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
18600
+ --pf-v5-c-menu-toggle--m-warning--after--BorderBottomColor: var(--pf-v5-global--warning-color--100);
18601
+ --pf-v5-c-menu-toggle--m-warning__status-icon--Color: var(--pf-v5-global--warning-color--100);
18602
+ --pf-v5-c-menu-toggle--m-danger--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
18603
+ --pf-v5-c-menu-toggle--m-danger--after--BorderBottomColor: var(--pf-v5-global--danger-color--100);
18604
+ --pf-v5-c-menu-toggle--m-danger__status-icon--Color: var(--pf-v5-global--danger-color--100);
18594
18605
  position: relative;
18595
18606
  display: inline-flex;
18596
18607
  align-items: center;
@@ -18852,6 +18863,21 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18852
18863
  .pf-v5-c-menu-toggle.pf-m-full-width {
18853
18864
  width: 100%;
18854
18865
  }
18866
+ .pf-v5-c-menu-toggle.pf-m-success {
18867
+ --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-success--after--BorderBottomWidth);
18868
+ --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-c-menu-toggle--m-success--after--BorderBottomColor);
18869
+ --pf-v5-c-menu-toggle__status-icon--Color: var(--pf-v5-c-menu-toggle--m-success__status-icon--Color);
18870
+ }
18871
+ .pf-v5-c-menu-toggle.pf-m-warning {
18872
+ --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-warning--after--BorderBottomWidth);
18873
+ --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-c-menu-toggle--m-warning--after--BorderBottomColor);
18874
+ --pf-v5-c-menu-toggle__status-icon--Color: var(--pf-v5-c-menu-toggle--m-warning__status-icon--Color);
18875
+ }
18876
+ .pf-v5-c-menu-toggle.pf-m-danger {
18877
+ --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-danger--after--BorderBottomWidth);
18878
+ --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-c-menu-toggle--m-danger--after--BorderBottomColor);
18879
+ --pf-v5-c-menu-toggle__status-icon--Color: var(--pf-v5-c-menu-toggle--m-danger__status-icon--Color);
18880
+ }
18855
18881
 
18856
18882
  .pf-v5-c-menu-toggle__button {
18857
18883
  --pf-v5-c-menu-toggle__controls--PaddingLeft: 0;
@@ -18886,6 +18912,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18886
18912
  }
18887
18913
 
18888
18914
  .pf-v5-c-menu-toggle__controls {
18915
+ display: flex;
18889
18916
  padding-inline-start: var(--pf-v5-c-menu-toggle__controls--PaddingLeft);
18890
18917
  margin-inline-start: var(--pf-v5-c-menu-toggle__controls--MarginLeft);
18891
18918
  margin-inline-end: var(--pf-v5-c-menu-toggle__controls--MarginRight);
@@ -18896,6 +18923,11 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18896
18923
  color: var(--pf-v5-c-menu-toggle__toggle-icon--Color, inherit);
18897
18924
  }
18898
18925
 
18926
+ .pf-v5-c-menu-toggle__status-icon {
18927
+ margin-inline-end: var(--pf-v5-c-menu-toggle__status-icon--MarginInlineEnd);
18928
+ color: var(--pf-v5-c-menu-toggle__status-icon--Color, inherit);
18929
+ }
18930
+
18899
18931
  :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button,
18900
18932
  :where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button,
18901
18933
  :where(.pf-v5-theme-dark) .pf-v5-c-page__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-banner .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-login__header .pf-v5-c-button,