@patternfly/patternfly 5.0.0-prerelease.1 → 5.0.0-prerelease.10

package/components/MenuToggle/menu-toggle.scss

@@ -110,6 +110,7 @@
   --#{$menu-toggle}--m-full-height--PaddingRight: var(--#{$pf-global}--spacer--lg);
   --#{$menu-toggle}--m-full-height--PaddingLeft: var(--#{$pf-global}--spacer--lg);
   --#{$menu-toggle}--m-full-height__toggle--before--BorderTopWidth: 0;
+  --#{$menu-toggle}--m-full-height__toggle--after--BorderBottomWidth:  var(--#{$pf-global}--BorderWidth--sm);
   --#{$menu-toggle}--m-full-height--m-expanded--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--xl);
   --#{$menu-toggle}--m-full-height--hover--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--xl);
   --#{$menu-toggle}--m-full-height--focus--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--xl);
@@ -264,6 +265,19 @@
     }
   }
 
+  &.pf-m-full-height {
+    --#{$menu-toggle}--PaddingRight: var(--#{$menu-toggle}--m-full-height--PaddingRight);
+    --#{$menu-toggle}--PaddingLeft: var(--#{$menu-toggle}--m-full-height--PaddingLeft);
+    --#{$menu-toggle}--before--BorderTopWidth: var(--#{$menu-toggle}--m-full-height__toggle--before--BorderTopWidth);
+    --#{$menu-toggle}--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height__toggle--after--BorderBottomWidth);
+    --#{$menu-toggle}--m-expanded--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--m-expanded--after--BorderBottomWidth);
+    --#{$menu-toggle}--hover--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--hover--after--BorderBottomWidth);
+    --#{$menu-toggle}--focus--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--focus--after--BorderBottomWidth);
+    --#{$menu-toggle}--active--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--active--after--BorderBottomWidth);
+
+    height: 100%;
+  }
+
   &:hover {
     --#{$menu-toggle}--BackgroundColor: var(--#{$menu-toggle}--hover--BackgroundColor);
     --#{$menu-toggle}--after--BorderBottomWidth: var(--#{$menu-toggle}--hover--after--BorderBottomWidth);
@@ -316,18 +330,6 @@
     }
   }
 
-  &.pf-m-full-height {
-    --#{$menu-toggle}--PaddingRight: var(--#{$menu-toggle}--m-full-height--PaddingRight);
-    --#{$menu-toggle}--PaddingLeft: var(--#{$menu-toggle}--m-full-height--PaddingLeft);
-    --#{$menu-toggle}--before--BorderTopWidth: var(--#{$menu-toggle}--m-full-height__toggle--before--BorderTopWidth);
-    --#{$menu-toggle}--m-expanded--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--m-expanded--after--BorderBottomWidth);
-    --#{$menu-toggle}--hover--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--hover--after--BorderBottomWidth);
-    --#{$menu-toggle}--focus--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--focus--after--BorderBottomWidth);
-    --#{$menu-toggle}--active--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--active--after--BorderBottomWidth);
-
-    height: 100%;
-  }
-
   &.pf-m-typeahead {
     --#{$menu-toggle}__button__controls--MarginRight: var(--#{$menu-toggle}--m-typeahead__controls--MarginRight);
     --#{$menu-toggle}__button__controls--MarginLeft: var(--#{$menu-toggle}--m-typeahead__controls--MarginLeft);

package/components/MenuToggle/themes/dark/menu-toggle.scss

@@ -19,7 +19,8 @@
     --#{$menu-toggle}--m-split-button--child--disabled--Color: var(--#{$pf-global}--disabled-color--300);
     --#{$menu-toggle}--m-split-button--child--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
 
-    &.pf-m-plain {
+    &.pf-m-plain,
+    &.pf-m-full-height {
       background: transparent;
     }
   }

package/components/Page/page.css

@@ -6,6 +6,8 @@
   --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
+  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
+  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
 }
 
 .pf-v5-c-page__main-section[class*=pf-m-dark-], .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector, .pf-v5-c-page__sidebar, .pf-v5-c-page__header {
@@ -16,6 +18,11 @@
   --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
+  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
+  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
+}
+.pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button, .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button, .pf-v5-c-page__sidebar .pf-v5-c-button, .pf-v5-c-page__header .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
 }
 
 .pf-v5-c-page__header-tools-item, .pf-v5-c-page__header-tools-group {
@@ -952,16 +959,10 @@
   flex: 1 0 auto;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector,
-:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-],
-:where(.pf-v5-theme-dark) .pf-v5-c-page__header {
-  --pf-v5-global--Color--100: #e0e0e0;
-  --pf-v5-global--Color--200: #aaabac;
-  --pf-v5-global--BorderColor--100: #444548;
-  --pf-v5-global--primary-color--100: #1fa7f8;
-  --pf-v5-global--link--Color: #1fa7f8;
-  --pf-v5-global--link--Color--hover: #73bcf7;
-  --pf-v5-global--BackgroundColor--100: #1b1d21;
+:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button,
+:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button,
+:where(.pf-v5-theme-dark) .pf-v5-c-page__header .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
 }
 
 :where(.pf-v5-theme-dark):root {

package/components/Select/select.css

@@ -6,6 +6,8 @@
   --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
+  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
+  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
 }
 
 .pf-v5-c-select {

package/components/Switch/switch.css

@@ -6,6 +6,7 @@
   --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--Color--light-100);
   --pf-v5-c-switch__toggle-icon--Left: calc(var(--pf-v5-c-switch--FontSize) * .4);
   --pf-v5-c-switch__toggle-icon--Offset: 0.125rem;
+  --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--palette--black-150);
   --pf-v5-c-switch--LineHeight: var(--pf-v5-global--LineHeight--md);
   --pf-v5-c-switch--Height: auto;
   --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--pf-v5-global--primary-color--100);
@@ -88,6 +89,7 @@
   cursor: not-allowed;
 }
 .pf-v5-c-switch__input:disabled ~ .pf-v5-c-switch__toggle {
+  --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-c-switch__input--disabled__toggle-icon--Color);
   cursor: not-allowed;
   background-color: var(--pf-v5-c-switch__input--disabled__toggle--BackgroundColor);
 }
@@ -140,4 +142,5 @@
   --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
   --pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--disabled-color--100);
   --pf-v5-c-switch__toggle--before--BoxShadow: none;
+  --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
 }

package/components/Switch/switch.scss

@@ -11,6 +11,7 @@
   --#{$switch}__toggle-icon--Color: var(--#{$pf-global}--Color--light-100);
   --#{$switch}__toggle-icon--Left: calc(var(--#{$switch}--FontSize) * .4);
   --#{$switch}__toggle-icon--Offset: #{pf-size-prem(2px)}; // this value is created to handle sizing of the toggle and therefore the width of the toggle and its transform value.
+  --#{$switch}__input--disabled__toggle-icon--Color: var(--#{$pf-global}--palette--black-150);
 
   // Switch
   --#{$switch}--LineHeight: var(--#{$pf-global}--LineHeight--md);
@@ -121,6 +122,8 @@
     }
 
     ~ .#{$switch}__toggle {
+      --#{$switch}__toggle-icon--Color: var(--#{$switch}__input--disabled__toggle-icon--Color);
+
       cursor: not-allowed;
       background-color: var(--#{$switch}__input--disabled__toggle--BackgroundColor);
 

package/components/Switch/themes/dark/switch.scss

@@ -6,5 +6,6 @@
     --#{$switch}__input--not-checked__label--Color: var(--#{$pf-global}--Color--100);
     --#{$switch}__input--disabled__toggle--before--BackgroundColor: var(--#{$pf-global}--disabled-color--100);
     --#{$switch}__toggle--before--BoxShadow: none;
+    --#{$switch}__input--disabled__toggle-icon--Color: var(--#{$pf-global}--disabled-color--100);
   }
 }

package/components/Table/table.css

@@ -6,6 +6,8 @@
   --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
+  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
+  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
 }
 
 .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > * {

package/components/TextInputGroup/text-input-group.css

@@ -19,8 +19,8 @@
   --pf-v5-c-text-input-group__text-input--PaddingBottom: var(--pf-v5-global--spacer--form-element);
   --pf-v5-c-text-input-group__text-input--PaddingLeft: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-text-input-group__text-input--MinWidth: 12ch;
-  --pf-v5-c-text-input-group__text-input--m-hint--Color: var(--pf-v5-global--Color--dark-200);
-  --pf-v5-c-text-input-group__text-input--placeholder--Color: var(--pf-v5-global--Color--dark-200);
+  --pf-v5-c-text-input-group__text-input--m-hint--Color: var(--pf-v5-global--Color--200);
+  --pf-v5-c-text-input-group__text-input--placeholder--Color: var(--pf-v5-global--Color--200);
   --pf-v5-c-text-input-group__text-input--BackgroundColor: transparent;
   --pf-v5-c-text-input-group__icon--Left: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-text-input-group__icon--Color: var(--pf-v5-global--icon--Color--dark);

package/components/TextInputGroup/text-input-group.scss

@@ -31,8 +31,8 @@
   --#{$text-input-group}__text-input--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
   --#{$text-input-group}__text-input--PaddingLeft: var(--#{$pf-global}--spacer--sm);
   --#{$text-input-group}__text-input--MinWidth: 12ch;
-  --#{$text-input-group}__text-input--m-hint--Color: var(--#{$pf-global}--Color--dark-200); // matches placeholder text color
-  --#{$text-input-group}__text-input--placeholder--Color: var(--#{$pf-global}--Color--dark-200);
+  --#{$text-input-group}__text-input--m-hint--Color: var(--#{$pf-global}--Color--200); // matches placeholder text color
+  --#{$text-input-group}__text-input--placeholder--Color: var(--#{$pf-global}--Color--200);
   --#{$text-input-group}__text-input--BackgroundColor: transparent;
 
   // Icon

package/components/Wizard/wizard.css

@@ -6,6 +6,11 @@
   --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
+  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
+  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
+}
+.pf-v5-c-wizard__header .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
 }
 
 .pf-v5-c-wizard {
@@ -497,14 +502,8 @@
   margin-left: var(--pf-v5-c-wizard__footer-cancel--MarginLeft);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-wizard__header {
-  --pf-v5-global--Color--100: #e0e0e0;
-  --pf-v5-global--Color--200: #aaabac;
-  --pf-v5-global--BorderColor--100: #444548;
-  --pf-v5-global--primary-color--100: #1fa7f8;
-  --pf-v5-global--link--Color: #1fa7f8;
-  --pf-v5-global--link--Color--hover: #73bcf7;
-  --pf-v5-global--BackgroundColor--100: #1b1d21;
+:where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-wizard {

package/docs/components/Drawer/examples/Drawer.md

@@ -655,7 +655,7 @@ cssPrefix: pf-v5-c-drawer
 
 ```
 
-### Panel with light-200 background
+### Panel with secondary background
 
 ```html
 <div class="pf-v5-c-drawer pf-m-expanded">
@@ -738,7 +738,7 @@ cssPrefix: pf-v5-c-drawer
 | `.pf-m-padding` | `.pf-v5-c-drawer__body` | Modifies the element to add padding. |
 | `.pf-m-no-padding` | `.pf-v5-c-drawer__body` | Modifies the element to remove padding. |
 | `.pf-m-no-background` | `.pf-v5-c-drawer__section`, `.pf-v5-c-drawer__content`, `.pf-v5-c-drawer__panel` | Modifies the drawer body/panel background color to transparent. |
-| `.pf-m-light-200` | `.pf-v5-c-drawer__section`, `.pf-v5-c-drawer__content`, `.pf-v5-c-drawer__panel` | Modifies the drawer body/panel background color to light grey. |
+| `.pf-m-light-200` | `.pf-v5-c-drawer__section`, `.pf-v5-c-drawer__content`, `.pf-v5-c-drawer__panel` | Modifies the body/panel to use the secondary background color. |
 | `.pf-m-width-{25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-v5-c-drawer__panel` | Modifies the drawer panel width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
 | `.pf-m-resizable` | `.pf-v5-c-drawer__panel` | Modifies the drawer panel to be resizable. Intended for use with the `.pf-v5-c-drawer__splitter` element. |
 | `--pf-v5-c-drawer__panel--md--FlexBasis--min` | `.pf-v5-c-drawer__panel` | Defines the drawer panel minimum size. |

package/docs/components/Dropdown/deprecated/Dropdown.css

@@ -0,0 +1,64 @@
+#ws-html-deprecated-c-dropdown-badge-toggle,
+#ws-html-deprecated-c-dropdown-badge-drillup-toggle,
+#ws-html-deprecated-c-dropdown-expanded,
+#ws-html-deprecated-c-dropdown-kebab,
+#ws-html-deprecated-c-dropdown-kebab-align-right,
+#ws-html-deprecated-c-dropdown-align-right,
+#ws-html-deprecated-c-dropdown-align-on-different-breakpoint,
+#ws-html-deprecated-c-dropdown-align-top,
+#ws-html-deprecated-c-dropdown-primary-toggle,
+#ws-html-deprecated-c-dropdown-secondary-toggle,
+#ws-html-deprecated-c-dropdown-menu-item-icons,
+#ws-html-deprecated-c-dropdown-aria-disabled-items,
+#ws-html-deprecated-c-dropdown-plain-with-text {
+  min-height: 310px;
+}
+
+#ws-html-deprecated-c-dropdown-kebab-align-right,
+#ws-html-deprecated-c-dropdown-align-right {
+  display: flex;
+  justify-content: flex-end;
+}
+
+#ws-html-deprecated-c-dropdown-align-on-different-breakpoint {
+  display: flex;
+  justify-content: center;
+}
+
+#ws-html-deprecated-c-dropdown-align-top {
+  display: flex;
+  align-items: flex-end;
+}
+
+#ws-html-deprecated-c-dropdown-with-groups,
+#ws-html-deprecated-c-dropdown-with-groups-and-dividers-between-groups {
+  min-height: 440px;
+}
+
+#ws-html-deprecated-c-dropdown-with-groups-and-dividers-between-items {
+  min-height: 460px;
+}
+
+#ws-html-deprecated-c-dropdown-dropdown-with-image-and-text .ws-preview-html {
+  min-height: 19rem;
+}
+
+#ws-html-deprecated-c-dropdown-split-button-checkbox,
+#ws-html-deprecated-c-dropdown-split-button-action,
+#ws-html-deprecated-c-dropdown-split-button-primary-checkbox,
+#ws-html-deprecated-c-dropdown-split-button-primary-action,
+#ws-html-deprecated-c-dropdown-split-button-secondary-action {
+  min-height: 210px;
+}
+
+[id^="ws-html-deprecated-c-dropdown-split-button"] .pf-v5-c-dropdown:not(:last-child) {
+  margin-right: 4px;
+}
+
+#ws-html-deprecated-c-dropdown-panel {
+  min-height: 130px;
+}
+
+#ws-html-deprecated-c-dropdown-dropdown-with-description {
+  min-height: 400px;
+}

package/docs/components/Dropdown/{examples → deprecated}/Dropdown.md

@@ -3,6 +3,7 @@ id: Dropdown
 section: components
 subsection: menus
 cssPrefix: pf-v5-c-dropdown
+deprecated: true
 ---import './Dropdown.css'
 
 ## Examples

package/docs/components/Nav/examples/Navigation.md

@@ -658,7 +658,7 @@ cssPrefix: pf-v5-c-nav
 
 ### Default in light mode
 
-```html
+```html isDeprecated
 <nav class="pf-v5-c-nav pf-m-light" aria-label="Global">
   <ul class="pf-v5-c-nav__list" role="list">
     <li class="pf-v5-c-nav__item">
@@ -684,7 +684,7 @@ cssPrefix: pf-v5-c-nav
 
 ### Expanded in light mode
 
-```html
+```html isDeprecated
 <nav class="pf-v5-c-nav pf-m-light" aria-label="Global">
   <ul class="pf-v5-c-nav__list" role="list">
     <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">

package/docs/components/Select/deprecated/Select.css

@@ -0,0 +1,56 @@
+#ws-html-deprecated-c-select-single-with-top-expanded,
+#ws-html-deprecated-c-select-single-expanded,
+#ws-html-deprecated-c-select-single-expanded-and-selected,
+#ws-html-deprecated-c-select-single-with-typeahead-expanded-and-selected,
+#ws-html-deprecated-c-select-plain-toggle-expanded,
+#ws-html-deprecated-c-select-view-more-menu-item,
+#ws-html-deprecated-c-select-loading-menu-item,
+#ws-html-deprecated-c-select-placeholder-expanded,
+#ws-html-deprecated-c-select-placeholder-item-disabled,
+#ws-html-deprecated-c-select-placeholder-item-enabled,
+#ws-html-deprecated-c-select-multi-with-typeahead-invalid {
+  min-height: 330px;
+}
+
+#ws-html-deprecated-c-select-single-with-top-expanded {
+  display: flex;
+  align-items: flex-end;
+  width: 100%;
+}
+
+#ws-html-deprecated-c-select-single-with-typeahead-expanded,
+#ws-html-deprecated-c-select-multi-with-typeahead-chip-group-collapsed {
+  min-height: 210px;
+}
+
+#ws-html-deprecated-c-select-checkbox-expanded,
+#ws-html-deprecated-c-select-checkbox-expanded-without-badge,
+#ws-html-deprecated-c-select-checkbox-with-counts {
+  min-height: 270px;
+}
+
+#ws-html-deprecated-c-select-multi-with-typeahead-chip-group-expanded,
+#ws-html-deprecated-c-select-menu-footer {
+  min-height: 365px;
+}
+
+#ws-html-deprecated-c-select-checkbox-expanded-and-selected-with-groups {
+  min-height: 460px;
+}
+
+#ws-html-deprecated-c-select-checkbox-expanded-and-selected-with-groups-and-filter {
+  min-height: 530px;
+}
+
+#ws-html-deprecated-c-select-panel-menu {
+  min-height: 120px;
+}
+
+#ws-html-deprecated-c-select-item-description,
+#ws-html-deprecated-c-select-checkbox-item-description {
+  min-height: 400px;
+}
+
+#ws-html-deprecated-c-select-menu-item-favorites {
+  min-height: 650px;
+}

package/docs/components/Select/{examples → deprecated}/Select.md

@@ -3,6 +3,7 @@ id: Select
 section: components
 subsection: menus
 cssPrefix: pf-v5-c-select
+deprecated: true
 ---import './Select.css'
 
 ## Single

package/docs/components/Switch/examples/Switch.md

@@ -261,6 +261,42 @@ cssPrefix: pf-v5-c-switch
   >Message when off</span>
 </label>
 
+<br />
+<br />
+<label class="pf-v5-c-switch" for="switch-with-icon-disabled-1">
+  <input
+    class="pf-v5-c-switch__input"
+    type="checkbox"
+    id="switch-with-icon-disabled-1"
+    aria-label="switch is off"
+    disabled
+    checked
+  />
+
+  <span class="pf-v5-c-switch__toggle">
+    <span class="pf-v5-c-switch__toggle-icon">
+      <i class="fas fa-check" aria-hidden="true"></i>
+    </span>
+  </span>
+</label>
+
+<br />
+<br />
+<label class="pf-v5-c-switch" for="switch-with-icon-disabled-2">
+  <input
+    class="pf-v5-c-switch__input"
+    type="checkbox"
+    id="switch-with-icon-disabled-2"
+    aria-label="switch is off"
+    disabled
+  />
+  <span class="pf-v5-c-switch__toggle">
+    <span class="pf-v5-c-switch__toggle-icon">
+      <i class="fas fa-check" aria-hidden="true"></i>
+    </span>
+  </span>
+</label>
+
 ```
 
 ## Documentation