@patternfly/patternfly 5.3.0-prerelease.3 → 5.3.0-prerelease.5

package/components/Label/label.css

@@ -141,6 +141,10 @@
   --pf-v5-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
   --pf-v5-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
   --pf-v5-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
+  --pf-v5-c-label--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
+  --pf-v5-c-label--m-disabled__content--Color: var(--pf-v5-global--disabled-color--100);
+  --pf-v5-c-label--m-disabled__icon--Color: var(--pf-v5-global--disabled-color--100);
+  --pf-v5-c-label--c-button--m-disabled--Color: var(--pf-v5-global--disabled-color--100);
   position: relative;
   max-width: var(--pf-v5-c-label--MaxWidth);
   padding-block-start: var(--pf-v5-c-label--PaddingTop);
@@ -327,6 +331,16 @@
   --pf-v5-c-label__content--link--focus--before--BorderWidth: var(--pf-v5-c-label--m-overflow__content--link--focus--before--BorderWidth);
   --pf-v5-c-label__content--link--focus--before--BorderColor: var(--pf-v5-c-label--m-overflow__content--link--focus--before--BorderColor);
 }
+.pf-v5-c-label.pf-m-disabled {
+  --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-disabled--BackgroundColor);
+  --pf-v5-c-label__content--Color: var(--pf-v5-c-label--m-disabled__content--Color);
+  --pf-v5-c-label__icon--Color: var(--pf-v5-c-label--m-disabled__icon--Color);
+  --pf-v5-c-label__content--before--BorderWidth: 0;
+  pointer-events: none;
+}
+.pf-v5-c-label.pf-m-disabled .pf-v5-c-button {
+  --pf-v5-c-button--m-plain--disabled--Color: var(--pf-v5-c-label--c-button--m-disabled--Color);
+}
 
 .pf-v5-c-label,
 .pf-v5-c-label__content {

package/components/Label/label.scss

@@ -185,6 +185,12 @@
   --#{$label}--m-editable--m-editable-active__content--before--BorderWidth: 0;
   --#{$label}--m-editable--m-editable-active__content--before--BorderColor: transparent;
 
+  // Disabled
+  --#{$label}--m-disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
+  --#{$label}--m-disabled__content--Color: var(--#{$pf-global}--disabled-color--100);
+  --#{$label}--m-disabled__icon--Color: var(--#{$pf-global}--disabled-color--100);
+  --#{$label}--c-button--m-disabled--Color: var(--#{$pf-global}--disabled-color--100);
+
   position: relative;
   max-width: var(--#{$label}--MaxWidth);
   padding-block-start: var(--#{$label}--PaddingTop);
@@ -395,6 +401,19 @@
     --#{$label}__content--link--focus--before--BorderWidth: var(--#{$label}--m-overflow__content--link--focus--before--BorderWidth);
     --#{$label}__content--link--focus--before--BorderColor: var(--#{$label}--m-overflow__content--link--focus--before--BorderColor);
   }
+
+  &.pf-m-disabled {
+    --#{$label}--BackgroundColor: var(--#{$label}--m-disabled--BackgroundColor);
+    --#{$label}__content--Color: var(--#{$label}--m-disabled__content--Color);
+    --#{$label}__icon--Color: var(--#{$label}--m-disabled__icon--Color);
+    --#{$label}__content--before--BorderWidth: 0;
+
+    pointer-events: none;
+
+    .#{$button} {
+      --#{$button}--m-plain--disabled--Color: var(--#{$label}--c-button--m-disabled--Color);
+    }
+  }
 }
 
 .#{$label},

package/components/MenuToggle/menu-toggle.css

@@ -117,6 +117,16 @@
   --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-menu-toggle--m-typeahead__button--AlignSelf: center;
+  --pf-v5-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-menu-toggle--m-success--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
+  --pf-v5-c-menu-toggle--m-success--after--BorderBottomColor: var(--pf-v5-global--success-color--100);
+  --pf-v5-c-menu-toggle--m-success__status-icon--Color: var(--pf-v5-global--success-color--100);
+  --pf-v5-c-menu-toggle--m-warning--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
+  --pf-v5-c-menu-toggle--m-warning--after--BorderBottomColor: var(--pf-v5-global--warning-color--100);
+  --pf-v5-c-menu-toggle--m-warning__status-icon--Color: var(--pf-v5-global--warning-color--100);
+  --pf-v5-c-menu-toggle--m-danger--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
+  --pf-v5-c-menu-toggle--m-danger--after--BorderBottomColor: var(--pf-v5-global--danger-color--100);
+  --pf-v5-c-menu-toggle--m-danger__status-icon--Color: var(--pf-v5-global--danger-color--100);
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -378,6 +388,21 @@
 .pf-v5-c-menu-toggle.pf-m-full-width {
   width: 100%;
 }
+.pf-v5-c-menu-toggle.pf-m-success {
+  --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-success--after--BorderBottomWidth);
+  --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-c-menu-toggle--m-success--after--BorderBottomColor);
+  --pf-v5-c-menu-toggle__status-icon--Color: var(--pf-v5-c-menu-toggle--m-success__status-icon--Color);
+}
+.pf-v5-c-menu-toggle.pf-m-warning {
+  --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-warning--after--BorderBottomWidth);
+  --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-c-menu-toggle--m-warning--after--BorderBottomColor);
+  --pf-v5-c-menu-toggle__status-icon--Color: var(--pf-v5-c-menu-toggle--m-warning__status-icon--Color);
+}
+.pf-v5-c-menu-toggle.pf-m-danger {
+  --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-danger--after--BorderBottomWidth);
+  --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-c-menu-toggle--m-danger--after--BorderBottomColor);
+  --pf-v5-c-menu-toggle__status-icon--Color: var(--pf-v5-c-menu-toggle--m-danger__status-icon--Color);
+}
 
 .pf-v5-c-menu-toggle__button {
   --pf-v5-c-menu-toggle__controls--PaddingLeft: 0;
@@ -412,6 +437,7 @@
 }
 
 .pf-v5-c-menu-toggle__controls {
+  display: flex;
   padding-inline-start: var(--pf-v5-c-menu-toggle__controls--PaddingLeft);
   margin-inline-start: var(--pf-v5-c-menu-toggle__controls--MarginLeft);
   margin-inline-end: var(--pf-v5-c-menu-toggle__controls--MarginRight);
@@ -422,6 +448,11 @@
   color: var(--pf-v5-c-menu-toggle__toggle-icon--Color, inherit);
 }
 
+.pf-v5-c-menu-toggle__status-icon {
+  margin-inline-end: var(--pf-v5-c-menu-toggle__status-icon--MarginInlineEnd);
+  color: var(--pf-v5-c-menu-toggle__status-icon--Color, inherit);
+}
+
 :where(.pf-v5-theme-dark) .pf-v5-c-menu-toggle {
   --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
   --pf-v5-c-menu-toggle--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);

package/components/MenuToggle/menu-toggle.scss

@@ -165,6 +165,24 @@
   --#{$menu-toggle}--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--#{$pf-global}--spacer--sm);
   --#{$menu-toggle}--m-typeahead__button--AlignSelf: center;
 
+  // Status icon
+  --#{$menu-toggle}__status-icon--MarginInlineEnd: var(--#{$pf-global}--spacer--md);
+
+  // Success
+  --#{$menu-toggle}--m-success--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
+  --#{$menu-toggle}--m-success--after--BorderBottomColor: var(--#{$pf-global}--success-color--100);
+  --#{$menu-toggle}--m-success__status-icon--Color: var(--#{$pf-global}--success-color--100);
+
+  // Warning
+  --#{$menu-toggle}--m-warning--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
+  --#{$menu-toggle}--m-warning--after--BorderBottomColor: var(--#{$pf-global}--warning-color--100);
+  --#{$menu-toggle}--m-warning__status-icon--Color: var(--#{$pf-global}--warning-color--100);
+
+  // Danger
+  --#{$menu-toggle}--m-danger--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
+  --#{$menu-toggle}--m-danger--after--BorderBottomColor: var(--#{$pf-global}--danger-color--100);
+  --#{$menu-toggle}--m-danger__status-icon--Color: var(--#{$pf-global}--danger-color--100);
+
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -521,6 +539,24 @@
   &.pf-m-full-width {
     width: 100%;
   }
+
+  &.pf-m-success {
+    --#{$menu-toggle}--after--BorderBottomWidth: var(--#{$menu-toggle}--m-success--after--BorderBottomWidth);
+    --#{$menu-toggle}--after--BorderBottomColor: var(--#{$menu-toggle}--m-success--after--BorderBottomColor);
+    --#{$menu-toggle}__status-icon--Color: var(--#{$menu-toggle}--m-success__status-icon--Color);
+  }
+
+  &.pf-m-warning {
+    --#{$menu-toggle}--after--BorderBottomWidth: var(--#{$menu-toggle}--m-warning--after--BorderBottomWidth);
+    --#{$menu-toggle}--after--BorderBottomColor: var(--#{$menu-toggle}--m-warning--after--BorderBottomColor);
+    --#{$menu-toggle}__status-icon--Color: var(--#{$menu-toggle}--m-warning__status-icon--Color);
+  }
+
+  &.pf-m-danger {
+    --#{$menu-toggle}--after--BorderBottomWidth: var(--#{$menu-toggle}--m-danger--after--BorderBottomWidth);
+    --#{$menu-toggle}--after--BorderBottomColor: var(--#{$menu-toggle}--m-danger--after--BorderBottomColor);
+    --#{$menu-toggle}__status-icon--Color: var(--#{$menu-toggle}--m-danger__status-icon--Color);
+  }
 }
 
 .#{$menu-toggle}__button {
@@ -556,6 +592,7 @@
 }
 
 .#{$menu-toggle}__controls {
+  display: flex;
   padding-inline-start: var(--#{$menu-toggle}__controls--PaddingLeft);
   margin-inline-start: var(--#{$menu-toggle}__controls--MarginLeft);
   margin-inline-end: var(--#{$menu-toggle}__controls--MarginRight);
@@ -566,6 +603,11 @@
   color: var(--#{$menu-toggle}__toggle-icon--Color, inherit);
 }
 
+.#{$menu-toggle}__status-icon {
+  margin-inline-end: var(--#{$menu-toggle}__status-icon--MarginInlineEnd);
+  color: var(--#{$menu-toggle}__status-icon--Color, inherit);
+}
+
 // stylelint-disable no-invalid-position-at-import-rule
 @import "themes/dark/menu-toggle";