@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.70

package/docs/components/Check/examples/Check.md

@@ -8,15 +8,14 @@ cssPrefix: pf-v5-c-check
 ### Basic
 
 ```html
-<div class="pf-v5-c-check">
+<div class="pf-v5-c-check" id="basic-example-example">
   <input
     class="pf-v5-c-check__input"
     type="checkbox"
-    id="check-basic"
-    name="check-basic"
+    id="basic-example-example-input"
+    name="basic-example-example-input"
   />
-
-  <label class="pf-v5-c-check__label" for="check-basic">Check</label>
+  <label class="pf-v5-c-check__label" for="basic-example-example-input">Check</label>
 </div>
 
 ```
@@ -24,15 +23,14 @@ cssPrefix: pf-v5-c-check
 ### Required
 
 ```html
-<div class="pf-v5-c-check">
+<div class="pf-v5-c-check" id="check-required-example">
   <input
     class="pf-v5-c-check__input"
     type="checkbox"
-    id="check-required"
-    name="check-required"
+    id="check-required-example-input"
+    name="check-required-example-input"
   />
-
-  <label class="pf-v5-c-check__label" for="check-required">
+  <label class="pf-v5-c-check__label" for="check-required-example-input">
     Check
     <span class="pf-v5-c-check__label-required" aria-hidden="true">&#42;</span>
   </label>
@@ -43,16 +41,18 @@ cssPrefix: pf-v5-c-check
 ### Checked
 
 ```html
-<div class="pf-v5-c-check">
+<div class="pf-v5-c-check" id="check-checked-example">
   <input
     class="pf-v5-c-check__input"
     type="checkbox"
-    id="check-checked"
-    name="check-checked"
+    id="check-checked-example-input"
+    name="check-checked-example-input"
     checked
   />
-
-  <label class="pf-v5-c-check__label" for="check-checked">Check checked</label>
+  <label
+    class="pf-v5-c-check__label"
+    for="check-checked-example-input"
+  >Check checked</label>
 </div>
 
 ```
@@ -60,14 +60,17 @@ cssPrefix: pf-v5-c-check
 ### Label wrapping input
 
 ```html
-<label class="pf-v5-c-check" for="check-label-wrapping-input">
+<label
+  class="pf-v5-c-check"
+  id="check-label-wrapping-input-example"
+  for="check-label-wrapping-input-example-input"
+>
   <input
     class="pf-v5-c-check__input"
     type="checkbox"
-    id="check-label-wrapping-input"
-    name="check-label-wrapping-input"
+    id="check-label-wrapping-input-example-input"
+    name="check-label-wrapping-input-example-input"
   />
-
   <span class="pf-v5-c-check__label">Check label wraps input</span>
 </label>
 
@@ -76,14 +79,16 @@ cssPrefix: pf-v5-c-check
 ### Reversed
 
 ```html
-<div class="pf-v5-c-check">
-  <label class="pf-v5-c-check__label" for="check-reversed">Check reversed</label>
-
+<div class="pf-v5-c-check" id="check-reversed-example">
+  <label
+    class="pf-v5-c-check__label"
+    for="check-reversed-example-input"
+  >Check reversed</label>
   <input
     class="pf-v5-c-check__input"
     type="checkbox"
-    id="check-reversed"
-    name="check-reversed"
+    id="check-reversed-example-input"
+    name="check-reversed-example-input"
   />
 </div>
 
@@ -92,29 +97,31 @@ cssPrefix: pf-v5-c-check
 ### Disabled
 
 ```html
-<div class="pf-v5-c-check">
+<div class="pf-v5-c-check" id="check-disabled-example">
   <input
     class="pf-v5-c-check__input"
     type="checkbox"
-    id="check-disabled"
-    name="check-disabled"
+    id="check-disabled-example-input"
+    name="check-disabled-example-input"
+    disabled
   />
-
-  <label class="pf-v5-c-check__label" for="check-disabled">Check disabled</label>
+  <label
+    class="pf-v5-c-check__label pf-m-disabled"
+    for="check-disabled-example-input"
+  >Check disabled</label>
 </div>
-<div class="pf-v5-c-check">
+<div class="pf-v5-c-check" id="check-disabled-checked-example">
   <input
     class="pf-v5-c-check__input"
     type="checkbox"
-    disabled
-    id="check-disabled-2"
-    name="check-disabled-2"
+    id="check-disabled-checked-example-input"
+    name="check-disabled-checked-example-input"
     checked
+    disabled
   />
-
   <label
     class="pf-v5-c-check__label pf-m-disabled"
-    for="check-disabled-2"
+    for="check-disabled-checked-example-input"
   >Check disabled checked</label>
 </div>
 
@@ -123,21 +130,21 @@ cssPrefix: pf-v5-c-check
 ### With description
 
 ```html
-<div class="pf-v5-c-check">
+<div class="pf-v5-c-check" id="check-with-example-description-example">
   <input
     class="pf-v5-c-check__input"
     type="checkbox"
-    id="check-with-description"
-    name="check-with-description"
+    aria-describedby="check-with-example-description-example-description"
+    id="check-with-example-description-example-input"
+    name="check-with-example-description-example-input"
   />
-
   <label
     class="pf-v5-c-check__label"
-    for="check-with-description"
+    for="check-with-example-description-example-input"
   >Check with description</label>
-
   <span
     class="pf-v5-c-check__description"
+    id="check-with-example-description-example-description"
   >Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS od GCP.</span>
 </div>
 
@@ -146,16 +153,17 @@ cssPrefix: pf-v5-c-check
 ### With body
 
 ```html
-<div class="pf-v5-c-check">
+<div class="pf-v5-c-check" id="check-with-example-body-example">
   <input
     class="pf-v5-c-check__input"
     type="checkbox"
-    id="check-with-body"
-    name="check-with-body"
+    id="check-with-example-body-example-input"
+    name="check-with-example-body-example-input"
   />
-
-  <label class="pf-v5-c-check__label" for="check-with-body">Check with body</label>
-
+  <label
+    class="pf-v5-c-check__label"
+    for="check-with-example-body-example-input"
+  >Check with body</label>
   <span class="pf-v5-c-check__body">This is where custom content goes.</span>
 </div>
 
@@ -164,21 +172,21 @@ cssPrefix: pf-v5-c-check
 ### With description and body
 
 ```html
-<div class="pf-v5-c-check">
+<div class="pf-v5-c-check" id="check-with-example-description-body-example">
   <input
     class="pf-v5-c-check__input"
     type="checkbox"
-    id="check-with-description-body"
-    name="check-with-description-body"
+    aria-describedby="check-with-example-description-body-example-description"
+    id="check-with-example-description-body-example-input"
+    name="check-with-example-description-body-example-input"
   />
-
   <label
     class="pf-v5-c-check__label"
-    for="check-with-description-body"
+    for="check-with-example-description-body-example-input"
   >Check with description and body</label>
-
   <span
     class="pf-v5-c-check__description"
+    id="check-with-example-description-body-example-description"
   >Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS od GCP.</span>
   <span class="pf-v5-c-check__body">This is where custom content goes.</span>
 </div>
@@ -188,15 +196,19 @@ cssPrefix: pf-v5-c-check
 ### Standalone input
 
 ```html
-<div class="pf-v5-c-check pf-m-standalone">
+<label
+  class="pf-v5-c-check pf-m-standalone"
+  id="standalone-input-example"
+  for="standalone-input-example-input"
+>
   <input
     class="pf-v5-c-check__input"
     type="checkbox"
-    id="check-standalone-input"
-    name="check-standalone-input"
-    aria-label="Standalone input"
+    id="standalone-input-example-input"
+    name="standalone-input-example-input"
+    aria-label="Standalone check"
   />
-</div>
+</label>
 
 ```
 
@@ -214,6 +226,7 @@ If you extend this component or modify the styles of this component, then make s
 | -- | -- | -- |
 | `disabled` | `.pf-v5-c-check__input` | Indicates that the element is unavailable and removes it from keyboard focus. **Required when input is disabled** |
 | `required` | `.pf-v5-c-check__input` | Indicates that the element is required. |
+| `aria-describedby` | `.pf-v5-c-check__input` |  When using `.pf-v5-c-check__description` make use of this on the input. |
 
 ### Usage
 

package/docs/components/Chip/examples/Chip.md

@@ -828,7 +828,7 @@ The chip group requires the [chip component](#chip-overview). **All single chip
 
 | Attributes for closable chip group button | Applied to | Outcome |
 | -- | -- | -- |
-| `role="list"` | `.pf-v5-c-chip-group__list` | Indicates that the chip group list is a list element. This role is redundant since `.pf-v5-c-chip-group__list` is a `<ul>` but is required for screen readers to announce the list propertly. **Required** |
+| `role="list"` | `.pf-v5-c-chip-group__list` | Indicates that the chip group list is a list element. This role is redundant since `.pf-v5-c-chip-group__list` is a `<ul>` but is required for screen readers to announce the list properly. **Required** |
 | `aria-label="[button label text]"` | `.pf-v5-c-chip-group__close > button` |  Provides an accessible name for a chip group close when an icon is used instead of text. Required when an icon is used with no supporting text. **Required** |
 | `aria-labelledby="[id value of .pf-v5-c-chip-group__close > button] [id value of .pf-v5-c-chip-group__label]"` | `.pf-v5-c-chip-group__close > button` | Provides an accessible name for the button. **Required** |
 

package/docs/components/ClipboardCopy/examples/ClipboardCopy.md

@@ -212,6 +212,112 @@ cssPrefix: pf-v5-c-clipboard-copy
     id="expandable-expanded-readonly-content"
   >This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.</div>
 </div>
+<br />
+<h4>Code</h4>
+<div class="pf-v5-c-clipboard-copy">
+  <div class="pf-v5-c-clipboard-copy__group">
+    <button
+      class="pf-v5-c-button pf-m-control"
+      type="button"
+      id="expandable-not-expanded-code-toggle"
+      aria-labelledby="expandable-not-expanded-code-toggle expandable-not-expanded-code-text-input"
+      aria-controls="expandable-not-expanded-code-content"
+    >
+      <div class="pf-v5-c-clipboard-copy__toggle-icon">
+        <i class="fas fa-angle-right" aria-hidden="true"></i>
+      </div>
+    </button>
+    <span class="pf-v5-c-form-control">
+      <input
+        dir="ltr"
+        type="text"
+        value="{ &quot;menu&quot;: {     &quot;id&quot;: &quot;file&quot;,     &quot;value&quot;: &quot;File&quot;,     &quot;popup&quot;: {       &quot;menuitem&quot;: [         {&quot;value&quot;: &quot;New&quot;, &quot;onclick&quot;: &quot;CreateNewDoc()&quot;},         {&quot;value&quot;: &quot;Open&quot;, &quot;onclick&quot;: &quot;OpenDoc()&quot;},         {&quot;value&quot;: &quot;Close&quot;, &quot;onclick&quot;: &quot;CloseDoc()&quot;}       ]     }   }} "
+        id="expandable-not-expanded-code-text-input"
+        aria-label="Copyable input"
+      />
+    </span>
+    <button
+      class="pf-v5-c-button pf-m-control"
+      type="button"
+      aria-label="Copy to clipboard"
+      id="expandable-not-expanded-code-copy-button"
+      aria-labelledby="expandable-not-expanded-code-copy-button expandable-not-expanded-code-text-input"
+    >
+      <i class="fas fa-copy" aria-hidden="true"></i>
+    </button>
+  </div>
+  <div
+    class="pf-v5-c-clipboard-copy__expandable-content"
+    hidden
+    id="expandable-not-expanded-code-content"
+  >
+    <pre dir="ltr">{ "menu": {
+    "id": "file",
+    "value": "File",
+    "popup": {
+      "menuitem": [
+        {"value": "New", "onclick": "CreateNewDoc()"},
+        {"value": "Open", "onclick": "OpenDoc()"},
+        {"value": "Close", "onclick": "CloseDoc()"}
+      ]
+    }
+  }} 
+  </pre>
+  </div>
+</div>
+<br />
+<div class="pf-v5-c-clipboard-copy pf-m-expanded">
+  <div class="pf-v5-c-clipboard-copy__group">
+    <button
+      class="pf-v5-c-button pf-m-control pf-m-expanded"
+      type="button"
+      id="expandable-expanded-code-toggle"
+      aria-labelledby="expandable-expanded-code-toggle expandable-expanded-code-text-input"
+      aria-controls="expandable-expanded-code-content"
+    >
+      <div class="pf-v5-c-clipboard-copy__toggle-icon">
+        <i class="fas fa-angle-right" aria-hidden="true"></i>
+      </div>
+    </button>
+    <span class="pf-v5-c-form-control pf-m-readonly">
+      <input
+        readonly
+        dir="ltr"
+        type="text"
+        value="{ &quot;menu&quot;: {     &quot;id&quot;: &quot;file&quot;,     &quot;value&quot;: &quot;File&quot;,     &quot;popup&quot;: {       &quot;menuitem&quot;: [         {&quot;value&quot;: &quot;New&quot;, &quot;onclick&quot;: &quot;CreateNewDoc()&quot;},         {&quot;value&quot;: &quot;Open&quot;, &quot;onclick&quot;: &quot;OpenDoc()&quot;},         {&quot;value&quot;: &quot;Close&quot;, &quot;onclick&quot;: &quot;CloseDoc()&quot;}       ]     }   }} "
+        id="expandable-expanded-code-text-input"
+        aria-label="Copyable input"
+      />
+    </span>
+    <button
+      class="pf-v5-c-button pf-m-control"
+      type="button"
+      aria-label="Copy to clipboard"
+      id="expandable-expanded-code-copy-button"
+      aria-labelledby="expandable-expanded-code-copy-button expandable-expanded-code-text-input"
+    >
+      <i class="fas fa-copy" aria-hidden="true"></i>
+    </button>
+  </div>
+  <div
+    class="pf-v5-c-clipboard-copy__expandable-content"
+    contenteditable="true"
+    id="expandable-expanded-code-content"
+  >
+    <pre dir="ltr">{ "menu": {
+    "id": "file",
+    "value": "File",
+    "popup": {
+      "menuitem": [
+        {"value": "New", "onclick": "CreateNewDoc()"},
+        {"value": "Open", "onclick": "OpenDoc()"},
+        {"value": "Close", "onclick": "CloseDoc()"}
+      ]
+    }
+  }}
+  </pre>
+  </div>
+</div>
 
 ```
 

package/docs/components/CodeBlock/examples/CodeBlock.md

@@ -75,7 +75,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</co
 kind: HelmChartRepository
 metadata:
 name: azure-sample-repo<div
-  class="pf-v5-c-expandable-section pf-m-detached"
+  class="pf-v5-c-expandable-section"
 ><div
   class="pf-v5-c-expandable-section__content"
   hidden
@@ -87,7 +87,7 @@ name: azure-sample-repo<div
 </div>
 </code>
 </pre>
-    <div class="pf-v5-c-expandable-section pf-m-detached">
+    <div class="pf-v5-c-expandable-section">
       <button
         type="button"
         class="pf-v5-c-expandable-section__toggle"
@@ -136,7 +136,7 @@ name: azure-sample-repo<div
 kind: HelmChartRepository
 metadata:
 name: azure-sample-repo<div
-  class="pf-v5-c-expandable-section pf-m-expanded pf-m-detached"
+  class="pf-v5-c-expandable-section pf-m-expanded"
 ><div
   class="pf-v5-c-expandable-section__content"
   id="code-block-expandable-expanded-content"
@@ -147,7 +147,7 @@ name: azure-sample-repo<div
 </div>
 </code>
 </pre>
-    <div class="pf-v5-c-expandable-section pf-m-expanded pf-m-detached">
+    <div class="pf-v5-c-expandable-section pf-m-expanded">
       <button
         type="button"
         class="pf-v5-c-expandable-section__toggle"

package/docs/components/CodeEditor/examples/CodeEditor.md

@@ -41,7 +41,7 @@ cssPrefix: pf-v5-c-code-editor
     </div>
   </div>
   <div class="pf-v5-c-code-editor__main">
-    <code class="pf-v5-c-code-editor__code">
+    <code dir="ltr" class="pf-v5-c-code-editor__code">
       <pre class="pf-v5-c-code-editor__code-pre">
                 code goes here
       </pre>
@@ -89,7 +89,7 @@ cssPrefix: pf-v5-c-code-editor
     </div>
   </div>
   <div class="pf-v5-c-code-editor__main">
-    <code class="pf-v5-c-code-editor__code">
+    <code dir="ltr" class="pf-v5-c-code-editor__code">
       <pre class="pf-v5-c-code-editor__code-pre">
                 code goes here
       </pre>
@@ -238,7 +238,7 @@ cssPrefix: pf-v5-c-code-editor
     </div>
   </div>
   <div class="pf-v5-c-code-editor__main">
-    <code class="pf-v5-c-code-editor__code">
+    <code dir="ltr" class="pf-v5-c-code-editor__code">
       <pre class="pf-v5-c-code-editor__code-pre">
                 code goes here
       </pre>

package/docs/components/Content/examples/Content.md

@@ -163,11 +163,11 @@ cssPrefix: pf-v5-c-content
 
 When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use `pf-v5-c-content` as container. It can handle almost any HTML tag:
 
-*   `<p>` paragraphs
-*   `<ul>` `<ol>` `<dl>` lists
-*   `<h1>` to `<h6>` headings
-*   `<blockquote>` quotes
-*   `<em>` and `<strong>`
+* `<p>` paragraphs
+* `<ul>` `<ol>` `<dl>` lists
+* `<h1>` to `<h6>` headings
+* `<blockquote>` quotes
+* `<em>` and `<strong>`
 
 This `pf-v5-c-content` class can be used in any context where you just want to (or can only) write some text.
 

package/docs/components/Divider/examples/Divider.css

@@ -3,11 +3,13 @@
   align-items: center;
 }
 
+[id*="divider-vertical"],
 [id*="ws-core-c-divider-vertical"],
 #ws-core-c-divider-horizontal-on-lg {
-  height: 4rem;
+  height: 6rem;
 }
 
 [id*="ws-core-c-divider"] .ws-preview-html {
   height: 100%;
 }
+

package/docs/components/Divider/examples/Divider.md

@@ -34,24 +34,23 @@ cssPrefix: pf-v5-c-divider
 ### Inset medium
 
 ```html
-<div class="pf-v5-c-divider pf-m-inset-md" role="separator"></div>
+<hr class="pf-v5-c-divider pf-m-inset-md" />
 
 ```
 
 ### Md inset, no inset on md, 3xl inset on lg, lg inset on xl
 
 ```html
-<div
+<hr
   class="pf-v5-c-divider pf-m-inset-md pf-m-inset-none-on-md pf-m-inset-3xl-on-lg pf-m-inset-lg-on-xl"
-  role="separator"
-></div>
+/>
 
 ```
 
 ### Vertical
 
 ```html
-<div class="pf-v5-c-divider pf-m-vertical pf-m-inset-md" role="separator"></div>
+<div class="pf-v5-c-divider pf-m-vertical" role="separator"></div>
 
 ```
 

package/docs/components/DragDrop/examples/DragDrop.css

@@ -3,11 +3,11 @@
 }
 
 .pf-v5-c-draggable.pf-m-dragging {
-  --pf-v5-c-draggable--m-dragging--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+  --pf-v5-c-draggable--m-dragging--BackgroundColor: var(--pf-t--global--background--color--primary--default);
 
   position: absolute;
-  top: 23%;
-  left: .5em;
+  inset-block-start: 23%;
+  inset-inline-start: .5em;
   z-index: 9999;
   width: 100%;
 }