@patternfly/patternfly 6.0.0-alpha.5 → 6.0.0-alpha.50

package/docs/components/MenuToggle/examples/MenuToggle.md

@@ -274,15 +274,19 @@ cssPrefix: pf-v5-c-menu-toggle
 ### Split button (checkbox)
 
 ```html
-<div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled">
-  <label class="pf-v5-c-check pf-m-standalone">
+<div
+  class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled"
+  id="split-button-checkbox-disabled-example"
+>
+  <label
+    class="pf-v5-c-check pf-m-standalone"
+    for="split-button-checkbox-disabled-example-input"
+  >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
+      aria-label="Standalone check"
       disabled
-      id="split-button-checkbox-disabled-example-input"
-      name="split-button-checkbox-disabled-example-input"
-      aria-label="Standalone input"
     />
   </label>
   <button
@@ -301,14 +305,18 @@ cssPrefix: pf-v5-c-menu-toggle
   </button>
 </div>
 &nbsp;
-<div class="pf-v5-c-menu-toggle pf-m-split-button">
-  <label class="pf-v5-c-check pf-m-standalone">
+<div
+  class="pf-v5-c-menu-toggle pf-m-split-button"
+  id="split-button-checkbox-example"
+>
+  <label
+    class="pf-v5-c-check pf-m-standalone"
+    for="split-button-checkbox-example-input"
+  >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
-      id="split-button-checkbox-example-input"
-      name="split-button-checkbox-example-input"
-      aria-label="Standalone input"
+      aria-label="Standalone check"
     />
   </label>
   <button
@@ -326,14 +334,18 @@ cssPrefix: pf-v5-c-menu-toggle
   </button>
 </div>
 &nbsp;
-<div class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button">
-  <label class="pf-v5-c-check pf-m-standalone">
+<div
+  class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button"
+  id="split-button-checkbox-expanded-example"
+>
+  <label
+    class="pf-v5-c-check pf-m-standalone"
+    for="split-button-checkbox-expanded-example-input"
+  >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
-      id="split-button-checkbox-expanded-example-input"
-      name="split-button-checkbox-expanded-example-input"
-      aria-label="Standalone input"
+      aria-label="Standalone check"
     />
   </label>
   <button
@@ -356,19 +368,16 @@ cssPrefix: pf-v5-c-menu-toggle
 ### Split button (checkbox with toggle text)
 
 ```html
-<div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled">
+<div
+  class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled"
+  id="split-button-checkbox-with-toggle-text-disabled-example"
+>
   <label
     class="pf-v5-c-check"
     for="split-button-checkbox-with-toggle-text-disabled-example-input"
   >
-    <input
-      class="pf-v5-c-check__input"
-      type="checkbox"
-      disabled
-      id="split-button-checkbox-with-toggle-text-disabled-example-input"
-      name="split-button-checkbox-with-toggle-text-disabled-example-input"
-    />
-    <span class="pf-v5-c-check__label pf-m-disabled">10 selected</span>
+    <input class="pf-v5-c-check__input" type="checkbox" disabled />
+    <label class="pf-v5-c-check__label pf-m-disabled" for="-input">10 selected</label>
   </label>
   <button
     class="pf-v5-c-menu-toggle__button"
@@ -386,18 +395,16 @@ cssPrefix: pf-v5-c-menu-toggle
   </button>
 </div>
 &nbsp;
-<div class="pf-v5-c-menu-toggle pf-m-split-button">
+<div
+  class="pf-v5-c-menu-toggle pf-m-split-button"
+  id="split-button-checkbox-with-toggle-text-example"
+>
   <label
     class="pf-v5-c-check"
     for="split-button-checkbox-with-toggle-text-example-input"
   >
-    <input
-      class="pf-v5-c-check__input"
-      type="checkbox"
-      id="split-button-checkbox-with-toggle-text-example-input"
-      name="split-button-checkbox-with-toggle-text-example-input"
-    />
-    <span class="pf-v5-c-check__label">10 selected</span>
+    <input class="pf-v5-c-check__input" type="checkbox" />
+    <label class="pf-v5-c-check__label" for="-input">10 selected</label>
   </label>
   <button
     class="pf-v5-c-menu-toggle__button"
@@ -414,18 +421,16 @@ cssPrefix: pf-v5-c-menu-toggle
   </button>
 </div>
 &nbsp;
-<div class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button">
+<div
+  class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button"
+  id="split-button-checkbox-with-toggle-text-expanded-example"
+>
   <label
     class="pf-v5-c-check"
     for="split-button-checkbox-with-toggle-text-expanded-example-input"
   >
-    <input
-      class="pf-v5-c-check__input"
-      type="checkbox"
-      id="split-button-checkbox-with-toggle-text-expanded-example-input"
-      name="split-button-checkbox-with-toggle-text-expanded-example-input"
-    />
-    <span class="pf-v5-c-check__label">10 selected</span>
+    <input class="pf-v5-c-check__input" type="checkbox" />
+    <label class="pf-v5-c-check__label" for="-input">10 selected</label>
   </label>
   <button
     class="pf-v5-c-menu-toggle__button"
@@ -447,19 +452,16 @@ cssPrefix: pf-v5-c-menu-toggle
 ### Split button, primary
 
 ```html
-<div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-primary">
+<div
+  class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-primary"
+  id="split-button-checkbox-primary-disabled-example"
+>
   <label
     class="pf-v5-c-check"
     for="split-button-checkbox-primary-disabled-example-input"
   >
-    <input
-      class="pf-v5-c-check__input"
-      type="checkbox"
-      disabled
-      id="split-button-checkbox-primary-disabled-example-input"
-      name="split-button-checkbox-primary-disabled-example-input"
-    />
-    <span class="pf-v5-c-check__label pf-m-disabled">10 selected</span>
+    <input class="pf-v5-c-check__input" type="checkbox" disabled />
+    <label class="pf-v5-c-check__label pf-m-disabled" for="-input">10 selected</label>
   </label>
   <button
     class="pf-v5-c-menu-toggle__button"
@@ -477,18 +479,16 @@ cssPrefix: pf-v5-c-menu-toggle
   </button>
 </div>
 &nbsp;
-<div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-primary">
+<div
+  class="pf-v5-c-menu-toggle pf-m-split-button pf-m-primary"
+  id="split-button-checkbox-primary-example"
+>
   <label
     class="pf-v5-c-check"
     for="split-button-checkbox-primary-example-input"
   >
-    <input
-      class="pf-v5-c-check__input"
-      type="checkbox"
-      id="split-button-checkbox-primary-example-input"
-      name="split-button-checkbox-primary-example-input"
-    />
-    <span class="pf-v5-c-check__label">10 selected</span>
+    <input class="pf-v5-c-check__input" type="checkbox" />
+    <label class="pf-v5-c-check__label" for="-input">10 selected</label>
   </label>
   <button
     class="pf-v5-c-menu-toggle__button"
@@ -505,18 +505,16 @@ cssPrefix: pf-v5-c-menu-toggle
   </button>
 </div>
 &nbsp;
-<div class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-primary">
+<div
+  class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-primary"
+  id="split-button-checkbox-primary-expanded-example"
+>
   <label
     class="pf-v5-c-check"
     for="split-button-checkbox-primary-expanded-example-input"
   >
-    <input
-      class="pf-v5-c-check__input"
-      type="checkbox"
-      id="split-button-checkbox-primary-expanded-example-input"
-      name="split-button-checkbox-primary-expanded-example-input"
-    />
-    <span class="pf-v5-c-check__label">10 selected</span>
+    <input class="pf-v5-c-check__input" type="checkbox" />
+    <label class="pf-v5-c-check__label" for="-input">10 selected</label>
   </label>
   <button
     class="pf-v5-c-menu-toggle__button"
@@ -538,19 +536,16 @@ cssPrefix: pf-v5-c-menu-toggle
 ### Split button, secondary
 
 ```html
-<div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-secondary">
+<div
+  class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-secondary"
+  id="split-button-checkbox-secondary-disabled-example"
+>
   <label
     class="pf-v5-c-check"
     for="split-button-checkbox-secondary-disabled-example-input"
   >
-    <input
-      class="pf-v5-c-check__input"
-      type="checkbox"
-      disabled
-      id="split-button-checkbox-secondary-disabled-example-input"
-      name="split-button-checkbox-secondary-disabled-example-input"
-    />
-    <span class="pf-v5-c-check__label pf-m-disabled">10 selected</span>
+    <input class="pf-v5-c-check__input" type="checkbox" disabled />
+    <label class="pf-v5-c-check__label pf-m-disabled" for="-input">10 selected</label>
   </label>
   <button
     class="pf-v5-c-menu-toggle__button"
@@ -568,18 +563,16 @@ cssPrefix: pf-v5-c-menu-toggle
   </button>
 </div>
 &nbsp;
-<div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-secondary">
+<div
+  class="pf-v5-c-menu-toggle pf-m-split-button pf-m-secondary"
+  id="split-button-checkbox-secondary-example"
+>
   <label
     class="pf-v5-c-check"
     for="split-button-checkbox-secondary-example-input"
   >
-    <input
-      class="pf-v5-c-check__input"
-      type="checkbox"
-      id="split-button-checkbox-secondary-example-input"
-      name="split-button-checkbox-secondary-example-input"
-    />
-    <span class="pf-v5-c-check__label">10 selected</span>
+    <input class="pf-v5-c-check__input" type="checkbox" />
+    <label class="pf-v5-c-check__label" for="-input">10 selected</label>
   </label>
   <button
     class="pf-v5-c-menu-toggle__button"
@@ -596,18 +589,16 @@ cssPrefix: pf-v5-c-menu-toggle
   </button>
 </div>
 &nbsp;
-<div class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-secondary">
+<div
+  class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-secondary"
+  id="split-button-checkbox-secondary-expanded-example"
+>
   <label
     class="pf-v5-c-check"
     for="split-button-checkbox-secondary-expanded-example-input"
   >
-    <input
-      class="pf-v5-c-check__input"
-      type="checkbox"
-      id="split-button-checkbox-secondary-expanded-example-input"
-      name="split-button-checkbox-secondary-expanded-example-input"
-    />
-    <span class="pf-v5-c-check__label">10 selected</span>
+    <input class="pf-v5-c-check__input" type="checkbox" />
+    <label class="pf-v5-c-check__label" for="-input">10 selected</label>
   </label>
   <button
     class="pf-v5-c-menu-toggle__button"
@@ -629,7 +620,10 @@ cssPrefix: pf-v5-c-menu-toggle
 ### Split button (action)
 
 ```html
-<div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled">
+<div
+  class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled"
+  id="split-button-checkbox-with-toggle-action-disabled-example"
+>
   <button class="pf-v5-c-menu-toggle__button" type="button" disabled>Action</button>
   <button
     class="pf-v5-c-menu-toggle__button"
@@ -647,7 +641,10 @@ cssPrefix: pf-v5-c-menu-toggle
   </button>
 </div>
 &nbsp;
-<div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action">
+<div
+  class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action"
+  id="split-button-checkbox-with-toggle-action-example"
+>
   <button class="pf-v5-c-menu-toggle__button" type="button">Action</button>
   <button
     class="pf-v5-c-menu-toggle__button"
@@ -664,7 +661,10 @@ cssPrefix: pf-v5-c-menu-toggle
   </button>
 </div>
 &nbsp;
-<div class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-action">
+<div
+  class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-action"
+  id="split-button-checkbox-with-toggle-action-expanded-example"
+>
   <button class="pf-v5-c-menu-toggle__button" type="button">Action</button>
   <button
     class="pf-v5-c-menu-toggle__button"
@@ -688,6 +688,7 @@ cssPrefix: pf-v5-c-menu-toggle
 ```html
 <div
   class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled pf-m-primary"
+  id="split-button-checkbox-with-toggle-action-primary-disabled-example"
 >
   <button class="pf-v5-c-menu-toggle__button" type="button" disabled>Action</button>
   <button
@@ -706,7 +707,10 @@ cssPrefix: pf-v5-c-menu-toggle
   </button>
 </div>
 &nbsp;
-<div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action pf-m-primary">
+<div
+  class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action pf-m-primary"
+  id="split-button-checkbox-with-toggle-action-primary-example"
+>
   <button class="pf-v5-c-menu-toggle__button" type="button">Action</button>
   <button
     class="pf-v5-c-menu-toggle__button"
@@ -725,6 +729,7 @@ cssPrefix: pf-v5-c-menu-toggle
 &nbsp;
 <div
   class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-action pf-m-primary"
+  id="split-button-checkbox-with-toggle-action-primary-expanded-example"
 >
   <button class="pf-v5-c-menu-toggle__button" type="button">Action</button>
   <button
@@ -749,6 +754,7 @@ cssPrefix: pf-v5-c-menu-toggle
 ```html
 <div
   class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled pf-m-secondary"
+  id="split-button-checkbox-with-toggle-action-secondary-disabled-example"
 >
   <button class="pf-v5-c-menu-toggle__button" type="button" disabled>Action</button>
   <button
@@ -767,7 +773,10 @@ cssPrefix: pf-v5-c-menu-toggle
   </button>
 </div>
 &nbsp;
-<div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action pf-m-secondary">
+<div
+  class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action pf-m-secondary"
+  id="split-button-checkbox-with-toggle-action-secondary-example"
+>
   <button class="pf-v5-c-menu-toggle__button" type="button">Action</button>
   <button
     class="pf-v5-c-menu-toggle__button"
@@ -786,6 +795,7 @@ cssPrefix: pf-v5-c-menu-toggle
 &nbsp;
 <div
   class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-action pf-m-secondary"
+  id="split-button-checkbox-with-toggle-action-secondary-expanded-example"
 >
   <button class="pf-v5-c-menu-toggle__button" type="button">Action</button>
   <button
@@ -929,7 +939,10 @@ cssPrefix: pf-v5-c-menu-toggle
 ### Typeahead
 
 ```html
-<div class="pf-v5-c-menu-toggle pf-m-typeahead pf-m-full-width">
+<div
+  class="pf-v5-c-menu-toggle pf-m-typeahead pf-m-full-width"
+  id="typeahead-example"
+>
   <div class="pf-v5-c-text-input-group pf-m-plain">
     <div class="pf-v5-c-text-input-group__main">
       <span class="pf-v5-c-text-input-group__text">

package/docs/components/ModalBox/examples/ModalBox.css

@@ -1,10 +1,5 @@
 .ws-core-c-modal .ws-preview-html {
-  position: relative;
-}
-
-.ws-core-c-modal .pf-v5-c-modal-box {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }

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

@@ -1,47 +1,3 @@
-#ws-core-c-navigation-default,
-#ws-core-c-navigation-basic,
-#ws-core-c-navigation-grouped,
-#ws-core-c-navigation-grouped-nav,
-#ws-core-c-navigation-grouped-nav-no-titles,
-#ws-core-c-navigation-expanded,
-#ws-core-c-navigation-expanded-with-subnav-titles,
-#ws-core-c-navigation-mixed,
-#ws-core-c-navigation-horizontal,
-#ws-core-c-navigation-horizontal-overflow,
-#ws-core-c-navigation-horizontal-subnav,
-#ws-core-c-navigation-horizontal-subnav-overflow,
-#ws-core-c-navigation-drilldown,
-#ws-core-c-navigation-nav-with-drilldown-menu .pf-v5-c-nav,
-#ws-core-c-navigation-level-2-drilldown,
-#ws-core-c-navigation-level-3-drilldown,
-#ws-core-c-navigation-nav-with-flyout .pf-v5-c-nav,
-#ws-core-c-navigation-grouped-nav-no-titles-no-margin-top {
-  padding: 0;
-  background-color: var(--pf-v5-global--BackgroundColor--dark-300);
-}
-
-#ws-core-c-navigation-expandable-third-level .pf-v5-c-nav {
-  background-color: var(--pf-v5-global--BackgroundColor--dark-300);
-}
-
-#ws-core-c-navigation-horizontal-in-masthead,
-#ws-core-c-navigation-horizontal-in-masthead-overflow {
-  padding: 0;
-  grid-template-rows: auto;
-}
-
-#ws-core-c-navigation-horizontal-in-masthead .pf-v5-c-page__header,
-#ws-core-c-navigation-horizontal-in-masthead-overflow .pf-v5-c-page__header {
-  min-height: 0;
-}
-
-@media screen and (min-width: 1200px) {
-  #ws-core-c-navigation-horizontal-in-masthead .pf-v5-c-page__header,
-  #ws-core-c-navigation-horizontal-in-masthead-overflow .pf-v5-c-page__header {
-    min-height: var(--pf-v5-c-page__header--MinHeight);
-  }
-}
-
 #ws-core-c-navigation-horizontal-in-masthead .pf-v5-c-page__header-nav,
 #ws-core-c-navigation-horizontal-in-masthead-overflow .pf-v5-c-page__header-nav {
   grid-row: 1;
@@ -49,7 +5,7 @@
 
 #ws-core-c-navigation-nav-with-flyout .ws-preview-html,
 [id^="ws-core-c-navigation-nav-with-drilldown-menu"] .ws-preview-html {
-  width: 260px;
+  width: 280px;
 }
 
 #ws-core-c-navigation-nav-with-flyout .ws-preview-html {
@@ -58,6 +14,6 @@
 
 #ws-core-c-navigation-nav-with-flyout .pf-v5-c-menu.pf-m-flyout.pf-m-nav {
   position: absolute;
-  top: 168px;
-  left: 256px;
+  inset-block-start: 168px;
+  inset-inline-start: 256px;
 }