@patternfly/patternfly 5.3.0-prerelease.3 → 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 (9) hide show
  1. package/components/MenuToggle/menu-toggle.css +31 -0
  2. package/components/MenuToggle/menu-toggle.scss +42 -0
  3. package/docs/components/MenuToggle/examples/MenuToggle.md +64 -0
  4. package/package.json +5 -5
  5. package/patternfly-no-globals.css +31 -0
  6. package/patternfly-theme-dark-unversioned.css +31 -0
  7. package/patternfly.css +31 -0
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
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.3",
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
@@ -18475,6 +18475,16 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18475
18475
  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
18476
18476
  --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
18477
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);
18478
18488
  position: relative;
18479
18489
  display: inline-flex;
18480
18490
  align-items: center;
@@ -18736,6 +18746,21 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18736
18746
  .pf-v5-c-menu-toggle.pf-m-full-width {
18737
18747
  width: 100%;
18738
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
+ }
18739
18764
 
18740
18765
  .pf-v5-c-menu-toggle__button {
18741
18766
  --pf-v5-c-menu-toggle__controls--PaddingLeft: 0;
@@ -18770,6 +18795,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18770
18795
  }
18771
18796
 
18772
18797
  .pf-v5-c-menu-toggle__controls {
18798
+ display: flex;
18773
18799
  padding-inline-start: var(--pf-v5-c-menu-toggle__controls--PaddingLeft);
18774
18800
  margin-inline-start: var(--pf-v5-c-menu-toggle__controls--MarginLeft);
18775
18801
  margin-inline-end: var(--pf-v5-c-menu-toggle__controls--MarginRight);
@@ -18780,6 +18806,11 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18780
18806
  color: var(--pf-v5-c-menu-toggle__toggle-icon--Color, inherit);
18781
18807
  }
18782
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
+
18783
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,
18784
18815
  :where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button,
18785
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
@@ -18592,6 +18592,16 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18592
18592
  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
18593
18593
  --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
18594
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);
18595
18605
  position: relative;
18596
18606
  display: inline-flex;
18597
18607
  align-items: center;
@@ -18853,6 +18863,21 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18853
18863
  .pf-v5-c-menu-toggle.pf-m-full-width {
18854
18864
  width: 100%;
18855
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
+ }
18856
18881
 
18857
18882
  .pf-v5-c-menu-toggle__button {
18858
18883
  --pf-v5-c-menu-toggle__controls--PaddingLeft: 0;
@@ -18887,6 +18912,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18887
18912
  }
18888
18913
 
18889
18914
  .pf-v5-c-menu-toggle__controls {
18915
+ display: flex;
18890
18916
  padding-inline-start: var(--pf-v5-c-menu-toggle__controls--PaddingLeft);
18891
18917
  margin-inline-start: var(--pf-v5-c-menu-toggle__controls--MarginLeft);
18892
18918
  margin-inline-end: var(--pf-v5-c-menu-toggle__controls--MarginRight);
@@ -18897,6 +18923,11 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18897
18923
  color: var(--pf-v5-c-menu-toggle__toggle-icon--Color, inherit);
18898
18924
  }
18899
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
+
18900
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,
18901
18932
  :where(.pf-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button,
18902
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
@@ -18592,6 +18592,16 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18592
18592
  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
18593
18593
  --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
18594
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);
18595
18605
  position: relative;
18596
18606
  display: inline-flex;
18597
18607
  align-items: center;
@@ -18853,6 +18863,21 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18853
18863
  .pf-v5-c-menu-toggle.pf-m-full-width {
18854
18864
  width: 100%;
18855
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
+ }
18856
18881
 
18857
18882
  .pf-v5-c-menu-toggle__button {
18858
18883
  --pf-v5-c-menu-toggle__controls--PaddingLeft: 0;
@@ -18887,6 +18912,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18887
18912
  }
18888
18913
 
18889
18914
  .pf-v5-c-menu-toggle__controls {
18915
+ display: flex;
18890
18916
  padding-inline-start: var(--pf-v5-c-menu-toggle__controls--PaddingLeft);
18891
18917
  margin-inline-start: var(--pf-v5-c-menu-toggle__controls--MarginLeft);
18892
18918
  margin-inline-end: var(--pf-v5-c-menu-toggle__controls--MarginRight);
@@ -18897,6 +18923,11 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18897
18923
  color: var(--pf-v5-c-menu-toggle__toggle-icon--Color, inherit);
18898
18924
  }
18899
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
+
18900
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,
18901
18932
  :where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button,
18902
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,