@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2

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

@@ -11,48 +11,19 @@ cssPrefix: pf-v6-c-switch
   <input
     class="pf-v6-c-switch__input"
     type="checkbox"
+    role="switch"
     id="switch-with-label-1"
-    aria-labelledby="switch-with-label-1-on"
+    aria-labelledby="switch-with-label-1-text"
     checked
   />
 
   <span class="pf-v6-c-switch__toggle"></span>
 
   <span
-    class="pf-v6-c-switch__label pf-m-on"
-    id="switch-with-label-1-on"
-    aria-hidden="true"
-  >Message when on</span>
-
-  <span
-    class="pf-v6-c-switch__label pf-m-off"
-    id="switch-with-label-1-off"
+    class="pf-v6-c-switch__label"
+    id="switch-with-label-1-text"
     aria-hidden="true"
-  >Message when off</span>
-</label>
-
-<br />
-<br />
-<label class="pf-v6-c-switch" for="switch-with-label-2">
-  <input
-    class="pf-v6-c-switch__input"
-    type="checkbox"
-    id="switch-with-label-2"
-    aria-labelledby="switch-with-label-2-on"
-  />
-  <span class="pf-v6-c-switch__toggle"></span>
-
-  <span
-    class="pf-v6-c-switch__label pf-m-on"
-    id="switch-with-label-2-on"
-    aria-hidden="true"
-  >Message when on</span>
-
-  <span
-    class="pf-v6-c-switch__label pf-m-off"
-    id="switch-with-label-2-off"
-    aria-hidden="true"
-  >Message when off</span>
+  >Togglable option in basic example</span>
 </label>
 
 ```
@@ -64,8 +35,9 @@ cssPrefix: pf-v6-c-switch
   <input
     class="pf-v6-c-switch__input"
     type="checkbox"
+    role="switch"
     id="switch-reverse-1"
-    aria-labelledby="switch-reverse-1-on"
+    aria-labelledby="switch-reverse-1-text"
     checked
   />
 
@@ -73,52 +45,23 @@ cssPrefix: pf-v6-c-switch
 
   <span
     class="pf-v6-c-switch__label pf-m-on"
-    id="switch-reverse-1-on"
-    aria-hidden="true"
-  >Message when on</span>
-
-  <span
-    class="pf-v6-c-switch__label pf-m-off"
-    id="switch-reverse-1-off"
-    aria-hidden="true"
-  >Message when off</span>
-</label>
-
-<br />
-<br />
-<label class="pf-v6-c-switch pf-m-reverse" for="switch-reverse-2">
-  <input
-    class="pf-v6-c-switch__input"
-    type="checkbox"
-    id="switch-reverse-2"
-    aria-labelledby="switch-reverse-2-on"
-  />
-  <span class="pf-v6-c-switch__toggle"></span>
-
-  <span
-    class="pf-v6-c-switch__label pf-m-on"
-    id="switch-reverse-2-on"
-    aria-hidden="true"
-  >Message when on</span>
-
-  <span
-    class="pf-v6-c-switch__label pf-m-off"
-    id="switch-reverse-2-off"
+    id="switch-reverse-1-text"
     aria-hidden="true"
-  >Message when off</span>
+  >Togglable option in reverse example</span>
 </label>
 
 ```
 
-### Label and check
+### Label and check icon
 
 ```html
 <label class="pf-v6-c-switch" for="switch-label-check-1">
   <input
     class="pf-v6-c-switch__input"
     type="checkbox"
+    role="switch"
     id="switch-label-check-1"
-    aria-labelledby="switch-label-check-1-on"
+    aria-labelledby="switch-label-check-1-text"
     checked
   />
 
@@ -129,56 +72,23 @@ cssPrefix: pf-v6-c-switch
   </span>
   <span
     class="pf-v6-c-switch__label pf-m-on"
-    id="switch-label-check-1-on"
-    aria-hidden="true"
-  >Message when on</span>
-
-  <span
-    class="pf-v6-c-switch__label pf-m-off"
-    id="switch-label-check-1-off"
+    id="switch-label-check-1-text"
     aria-hidden="true"
-  >Message when off</span>
-</label>
-
-<br />
-<br />
-<label class="pf-v6-c-switch" for="switch-label-check-2">
-  <input
-    class="pf-v6-c-switch__input"
-    type="checkbox"
-    id="switch-label-check-2"
-    aria-labelledby="switch-label-check-2-off"
-  />
-
-  <span class="pf-v6-c-switch__toggle">
-    <span class="pf-v6-c-switch__toggle-icon">
-      <i class="fas fa-check" aria-hidden="true"></i>
-    </span>
-  </span>
-  <span
-    class="pf-v6-c-switch__label pf-m-on"
-    id="switch-label-check-2-on"
-    aria-hidden="true"
-  >Message when on</span>
-
-  <span
-    class="pf-v6-c-switch__label pf-m-off"
-    id="switch-label-check-2-off"
-    aria-hidden="true"
-  >Message when off</span>
+  >Togglable option in check icon example</span>
 </label>
 
 ```
 
-### Without label
+### Without visible text label
 
 ```html
 <label class="pf-v6-c-switch" for="switch-with-icon-1">
   <input
     class="pf-v6-c-switch__input"
     type="checkbox"
+    role="switch"
     id="switch-with-icon-1"
-    aria-label="switch is off"
+    aria-label="Togglable option in no text label example"
     checked
   />
 
@@ -189,22 +99,6 @@ cssPrefix: pf-v6-c-switch
   </span>
 </label>
 
-<br />
-<br />
-<label class="pf-v6-c-switch" for="switch-with-icon-2">
-  <input
-    class="pf-v6-c-switch__input"
-    type="checkbox"
-    id="switch-with-icon-2"
-    aria-label="switch is off"
-  />
-  <span class="pf-v6-c-switch__toggle">
-    <span class="pf-v6-c-switch__toggle-icon">
-      <i class="fas fa-check" aria-hidden="true"></i>
-    </span>
-  </span>
-</label>
-
 ```
 
 ### Disabled
@@ -214,8 +108,9 @@ cssPrefix: pf-v6-c-switch
   <input
     class="pf-v6-c-switch__input"
     type="checkbox"
+    role="switch"
     id="switch-disabled-1"
-    aria-labelledby="switch-disabled-1-on"
+    aria-labelledby="switch-disabled-1-text"
     disabled
     checked
   />
@@ -223,16 +118,10 @@ cssPrefix: pf-v6-c-switch
   <span class="pf-v6-c-switch__toggle"></span>
 
   <span
-    class="pf-v6-c-switch__label pf-m-on"
-    id="switch-disabled-1-on"
-    aria-hidden="true"
-  >Message when on</span>
-
-  <span
-    class="pf-v6-c-switch__label pf-m-off"
-    id="switch-disabled-1-off"
+    class="pf-v6-c-switch__label"
+    id="switch-disabled-1-text"
     aria-hidden="true"
-  >Message when off</span>
+  >Togglable option in disabled example</span>
 </label>
 
 <br />
@@ -241,24 +130,19 @@ cssPrefix: pf-v6-c-switch
   <input
     class="pf-v6-c-switch__input"
     type="checkbox"
+    role="switch"
     id="switch-disabled-2"
-    aria-labelledby="switch-disabled-2-on"
+    aria-labelledby="switch-disabled-2-text"
     disabled
   />
 
   <span class="pf-v6-c-switch__toggle"></span>
 
   <span
-    class="pf-v6-c-switch__label pf-m-on"
-    id="switch-disabled-2-on"
-    aria-hidden="true"
-  >Message when on</span>
-
-  <span
-    class="pf-v6-c-switch__label pf-m-off"
-    id="switch-disabled-2-off"
+    class="pf-v6-c-switch__label"
+    id="switch-disabled-2-text"
     aria-hidden="true"
-  >Message when off</span>
+  >Togglable option in basic example</span>
 </label>
 
 <br />
@@ -267,8 +151,9 @@ cssPrefix: pf-v6-c-switch
   <input
     class="pf-v6-c-switch__input"
     type="checkbox"
+    role="switch"
     id="switch-with-icon-disabled-1"
-    aria-label="switch is off"
+    aria-label="Togglable option in disabled icon example"
     disabled
     checked
   />
@@ -286,8 +171,9 @@ cssPrefix: pf-v6-c-switch
   <input
     class="pf-v6-c-switch__input"
     type="checkbox"
+    role="switch"
     id="switch-with-icon-disabled-2"
-    aria-label="switch is off"
+    aria-label="Togglable option in disabled icon example"
     disabled
   />
   <span class="pf-v6-c-switch__toggle">
@@ -313,9 +199,10 @@ Use checkbox if your user has to perform additional steps for changes to become
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `aria-labelledby="..."` or `aria-label="..."` | `.pf-v6-c-switch__input` | Indicates the action triggered by the switch. If an additional text label is included with the switch besides `.pf-v6-c-switch__label.pf-m-on`, then `aria-labelledby` can reference the `id` of this text, or this text can be used as the value for `aria-label`. If the text included for `.pf-v6-c-switch__label.pf-m-on` provides additional meaning to the primary label that's referenced, then it can also be represented as part of the `aria-labelledby` or `aria-label` attribute. **Required** |
+| `aria-labelledby="..."` or `aria-label="..."` | `.pf-v6-c-switch__input` | Indicates the behavior of the switch. This label should never dynamically change, and should always describe the behavior of the switch when its checked state is true. If an additional text label is included with the switch besides `.pf-v6-c-switch__label`, then `aria-labelledby` can reference the `id` of this text, but it must be in addition to the text of `.pf-v6-c-switch__label`. If there is no visible text label provided, then an `aria-label` must be provided. **Required** |
 | `for` | `<label>` | Each `<label>` must have a `for` attribute that matches its input id. **Required** |
 | `id` | `<input type="checkbox">` | Each `<input>` must have an `id` attribute that matches its label's `for` value. **Required** |
+| `role="switch"` | `<input type="checkbox">` | Exposes the element as a switch for assistive technologies. **Required** |
 | `id` | `.pf-v6-c-switch__label` | Each `.pf-v6-c-switch__label` must have an `id` attribute that matches the `aria-labelledby` on `.pf-v6-c-switch__input`. |
 | `checked` | `.pf-v6-c-switch__input` |  Indicates that the input is checked |
 | `disabled` | `.pf-v6-c-switch__input` |  Indicates that the input is disabled |
@@ -330,6 +217,4 @@ Use checkbox if your user has to perform additional steps for changes to become
 | `.pf-v6-c-switch__toggle` | `<span>` |  Initiates the toggle inside the switch. **Required**  |
 | `.pf-v6-c-switch__toggle-icon` | `<span>` | Initiates the switch toggle icon wrapper. **Required when the switch is used without a label** |
 | `.pf-v6-c-switch__label` | `<span>` |  Initiates a label inside the switch. |
-| `.pf-m-on` | `.pf-v6-c-switch__label` | Modifies the switch label to display the on message. |
-| `.pf-m-off` | `.pf-v6-c-switch__label` | Modifies the switch label to display the off message. |
 | `.pf-m-reverse` | `.pf-v6-c-switch` | Positions the switch toggle to the right of the label. |

package/docs/components/Table/examples/Table.css

@@ -3,16 +3,21 @@
   width: 800px;
 }
 
-#ws-core-c-table-th-truncation .pf-v5-c-tooltip {
+#ws-core-c-table-th-truncation .pf-v6-c-tooltip {
   position: absolute;
- inset-inline-start: 440px;
- inset-block-start: -18px;
+  inset-inline-start: 440px;
+  inset-block-start: -18px;
 }
 
+#ws-core-c-table-sticky-columns-and-header .ws-preview-html,
+#ws-core-c-table-nested-column-headers-sticky-header .ws-preview-html,
 #ws-core-c-table-sticky-header .ws-preview-html {
-  height: 300px;
+  height: 400px;
 }
 
-#ws-core-c-table-sticky-columns-and-header .ws-preview-html {
-  height: 600px;
+.pf-v6-c-overflow-menu .pf-v6-c-menu {
+  position: absolute;
+  inset-inline-end: 0;
+  z-index: 999;
+  min-width: max-content;
 }