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

package/docs/components/InlineEdit/examples/InlineEdit.md

@@ -30,7 +30,9 @@ Inline edit **toggle** can be placed anywhere within `.pf-v6-c-inline-edit`. It
       aria-label="Edit"
       aria-labelledby="inline-edit-toggle-example-edit-button inline-edit-toggle-example-label"
     >
-      <i class="fas fa-pencil-alt" aria-hidden="true"></i>
+      <span class="pf-v6-c-button__icon">
+        <i class="fas fa-pencil-alt" aria-hidden="true"></i>
+      </span>
     </button>
   </div>
 </div>
@@ -59,10 +61,14 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
 >
   <div class="pf-v6-c-inline-edit__group pf-m-action-group">
     <div class="pf-v6-c-inline-edit__action">
-      <button class="pf-v6-c-button pf-m-primary" type="button">Save</button>
+      <button class="pf-v6-c-button pf-m-primary" type="button">
+        <span class="pf-v6-c-button__text">Save</span>
+      </button>
     </div>
     <div class="pf-v6-c-inline-edit__action">
-      <button class="pf-v6-c-button pf-m-secondary" type="button">Cancel</button>
+      <button class="pf-v6-c-button pf-m-secondary" type="button">
+        <span class="pf-v6-c-button__text">Cancel</span>
+      </button>
     </div>
   </div>
 </div>
@@ -83,7 +89,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
         type="button"
         aria-label="Save edits"
       >
-        <i class="fas fa-check" aria-hidden="true"></i>
+        <span class="pf-v6-c-button__icon">
+          <i class="fas fa-check" aria-hidden="true"></i>
+        </span>
       </button>
     </div>
     <div class="pf-v6-c-inline-edit__action">
@@ -92,7 +100,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
         type="button"
         aria-label="Cancel edits"
       >
-        <i class="fas fa-times" aria-hidden="true"></i>
+        <span class="pf-v6-c-button__icon">
+          <i class="fas fa-times" aria-hidden="true"></i>
+        </span>
       </button>
     </div>
   </div>
@@ -117,7 +127,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
         aria-label="Edit"
         aria-labelledby="single-inline-edit-example-edit-button single-inline-edit-example-label"
       >
-        <i class="fas fa-pencil-alt" aria-hidden="true"></i>
+        <span class="pf-v6-c-button__icon">
+          <i class="fas fa-pencil-alt" aria-hidden="true"></i>
+        </span>
       </button>
     </div>
   </div>
@@ -138,7 +150,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
           type="button"
           aria-label="Save edits"
         >
-          <i class="fas fa-check" aria-hidden="true"></i>
+          <span class="pf-v6-c-button__icon">
+            <i class="fas fa-check" aria-hidden="true"></i>
+          </span>
         </button>
       </div>
       <div class="pf-v6-c-inline-edit__action">
@@ -147,7 +161,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
           type="button"
           aria-label="Cancel edits"
         >
-          <i class="fas fa-times" aria-hidden="true"></i>
+          <span class="pf-v6-c-button__icon">
+            <i class="fas fa-times" aria-hidden="true"></i>
+          </span>
         </button>
       </div>
     </div>
@@ -176,7 +192,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
         aria-label="Edit"
         aria-labelledby="single-editable-example-edit-button single-editable-example-label"
       >
-        <i class="fas fa-pencil-alt" aria-hidden="true"></i>
+        <span class="pf-v6-c-button__icon">
+          <i class="fas fa-pencil-alt" aria-hidden="true"></i>
+        </span>
       </button>
     </div>
   </div>
@@ -197,7 +215,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
           type="button"
           aria-label="Save edits"
         >
-          <i class="fas fa-check" aria-hidden="true"></i>
+          <span class="pf-v6-c-button__icon">
+            <i class="fas fa-check" aria-hidden="true"></i>
+          </span>
         </button>
       </div>
       <div class="pf-v6-c-inline-edit__action">
@@ -206,7 +226,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
           type="button"
           aria-label="Cancel edits"
         >
-          <i class="fas fa-times" aria-hidden="true"></i>
+          <span class="pf-v6-c-button__icon">
+            <i class="fas fa-times" aria-hidden="true"></i>
+          </span>
         </button>
       </div>
     </div>
@@ -247,7 +269,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
         aria-label="Edit"
         aria-labelledby="single-inline-edit-with-label-example-label single-inline-edit-with-label-example-edit-button"
       >
-        <i class="fas fa-pencil-alt" aria-hidden="true"></i>
+        <span class="pf-v6-c-button__icon">
+          <i class="fas fa-pencil-alt" aria-hidden="true"></i>
+        </span>
       </button>
     </div>
   </div>
@@ -270,7 +294,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
           type="button"
           aria-label="Save edits"
         >
-          <i class="fas fa-check" aria-hidden="true"></i>
+          <span class="pf-v6-c-button__icon">
+            <i class="fas fa-check" aria-hidden="true"></i>
+          </span>
         </button>
       </div>
       <div class="pf-v6-c-inline-edit__action">
@@ -279,7 +305,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
           type="button"
           aria-label="Cancel edits"
         >
-          <i class="fas fa-times" aria-hidden="true"></i>
+          <span class="pf-v6-c-button__icon">
+            <i class="fas fa-times" aria-hidden="true"></i>
+          </span>
         </button>
       </div>
     </div>
@@ -309,7 +337,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
         aria-label="Edit"
         aria-labelledby="inline-edit-state-valid-label inline-edit-state-valid-edit-button"
       >
-        <i class="fas fa-pencil-alt" aria-hidden="true"></i>
+        <span class="pf-v6-c-button__icon">
+          <i class="fas fa-pencil-alt" aria-hidden="true"></i>
+        </span>
       </button>
     </div>
   </div>
@@ -331,7 +361,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
           type="button"
           aria-label="Save edits"
         >
-          <i class="fas fa-check" aria-hidden="true"></i>
+          <span class="pf-v6-c-button__icon">
+            <i class="fas fa-check" aria-hidden="true"></i>
+          </span>
         </button>
       </div>
       <div class="pf-v6-c-inline-edit__action">
@@ -340,7 +372,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
           type="button"
           aria-label="Cancel edits"
         >
-          <i class="fas fa-times" aria-hidden="true"></i>
+          <span class="pf-v6-c-button__icon">
+            <i class="fas fa-times" aria-hidden="true"></i>
+          </span>
         </button>
       </div>
     </div>
@@ -370,7 +404,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
         aria-label="Edit"
         aria-labelledby="inline-edit-state-invalid-label inline-edit-state-invalid-edit-button"
       >
-        <i class="fas fa-pencil-alt" aria-hidden="true"></i>
+        <span class="pf-v6-c-button__icon">
+          <i class="fas fa-pencil-alt" aria-hidden="true"></i>
+        </span>
       </button>
     </div>
   </div>
@@ -399,7 +435,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
           disabled
           aria-label="Save edits"
         >
-          <i class="fas fa-check" aria-hidden="true"></i>
+          <span class="pf-v6-c-button__icon">
+            <i class="fas fa-check" aria-hidden="true"></i>
+          </span>
         </button>
       </div>
       <div class="pf-v6-c-inline-edit__action">
@@ -408,7 +446,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
           type="button"
           aria-label="Cancel edits"
         >
-          <i class="fas fa-times" aria-hidden="true"></i>
+          <span class="pf-v6-c-button__icon">
+            <i class="fas fa-times" aria-hidden="true"></i>
+          </span>
         </button>
       </div>
     </div>
@@ -430,7 +470,12 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
     <caption class="pf-v6-c-table__caption">This is the table caption</caption>
 
     <thead class="pf-v6-c-table__thead">
-      <tr class="pf-v6-c-table__tr" role="row">
+      <tr
+        class="pf-v6-c-table__tr"
+        role&#x26;#x3D;&#x26;quot;row&#x26;quot;
+        [object
+        Object]
+      >
         <th class="pf-v6-c-table__th" role="columnheader">Text input</th>
 
         <th class="pf-v6-c-table__th" role="columnheader">Disabled text input</th>
@@ -441,14 +486,31 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
 
         <th class="pf-v6-c-table__th" role="columnheader">Number</th>
 
-        <td class="pf-v6-c-table__td"></td>
+        <th
+          class="pf-v6-c-table__th pf-v6-c-table__cell-empty"
+          role="columnheader"
+          scope="col"
+        >
+          <span class="pf-v6-screen-reader">Actions</span>
+        </th>
 
-        <td class="pf-v6-c-table__td"></td>
+        <th
+          class="pf-v6-c-table__th pf-v6-c-table__cell-empty"
+          role="columnheader"
+          scope="col"
+        >
+          <span class="pf-v6-screen-reader">Actions</span>
+        </th>
       </tr>
     </thead>
 
     <tbody class="pf-v6-c-table__tbody" role="rowgroup">
-      <tr class="pf-v6-c-table__tr pf-m-inline-editable" role="row">
+      <tr
+        class="pf-v6-c-table__tr pf-m-inline-editable"
+        role&#x26;#x3D;&#x26;quot;row&#x26;quot;
+        [object
+        Object]
+      >
         <th
           class="pf-v6-c-table__th"
           role="columnheader"
@@ -461,7 +523,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
                 type="text"
                 value="Text input description content"
                 id="bulk-edit-table-example-row-1-text-input"
-                aria-label="Text input"
+                aria-label="Text input for row 1"
               />
             </span>
           </div>
@@ -482,14 +544,18 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
                 type="text"
                 value="Text input disabled, description content"
                 id="bulk-edit-table-example-row-1-text-input-disabled"
-                aria-label="Disabled text input"
+                aria-label="Disabled text input for row 1"
               />
             </span>
           </div>
         </td>
         <td class="pf-v6-c-table__td" role="cell" data-label="Checkboxes">
           <div class="pf-v6-c-inline-edit__value">Check 1, Check 2</div>
-          <div class="pf-v6-c-inline-edit__group pf-m-column">
+          <div
+            class="pf-v6-c-inline-edit__group pf-m-column"
+            role="group"
+            aria-label="Checkbox group for row 1"
+          >
             <div class="pf-v6-c-inline-edit__input">
               <div class="pf-v6-c-check">
                 <input
@@ -527,7 +593,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
           <div
             class="pf-v6-c-inline-edit__group pf-m-column"
             role="radiogroup"
-            aria-label="Radio group example"
+            aria-label="Radio group for row 1"
           >
             <div class="pf-v6-c-inline-edit__input">
               <div class="pf-v6-c-radio">
@@ -569,7 +635,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
                 type="number"
                 value="2"
                 id="bulk-edit-table-example-row-1-number-input"
-                aria-label="Number input"
+                aria-label="Number input for row 1"
               />
             </span>
           </div>
@@ -587,7 +653,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
                 type="button"
                 aria-label="Save edits"
               >
-                <i class="fas fa-check" aria-hidden="true"></i>
+                <span class="pf-v6-c-button__icon">
+                  <i class="fas fa-check" aria-hidden="true"></i>
+                </span>
               </button>
             </div>
             <div class="pf-v6-c-inline-edit__action">
@@ -596,7 +664,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
                 type="button"
                 aria-label="Cancel edits"
               >
-                <i class="fas fa-times" aria-hidden="true"></i>
+                <span class="pf-v6-c-button__icon">
+                  <i class="fas fa-times" aria-hidden="true"></i>
+                </span>
               </button>
             </div>
           </div>
@@ -608,17 +678,19 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
               aria-label="Edit"
               aria-labelledby="bulk-edit-table-example-label bulk-edit-table-example-row-1-edit-button"
             >
-              <i class="fas fa-pencil-alt" aria-hidden="true"></i>
+              <span class="pf-v6-c-button__icon">
+                <i class="fas fa-pencil-alt" aria-hidden="true"></i>
+              </span>
             </button>
           </div>
         </td>
 
-        <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
+        <td class="pf-v6-c-table__td pf-v6-c-table__action">
           <button
             class="pf-v6-c-menu-toggle pf-m-plain"
             type="button"
             aria-expanded="false"
-            aria-label="Table actions"
+            aria-label="Menu toggle"
           >
             <span class="pf-v6-c-menu-toggle__icon">
               <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -627,7 +699,12 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
         </td>
       </tr>
 
-      <tr class="pf-v6-c-table__tr" role="row">
+      <tr
+        class="pf-v6-c-table__tr"
+        role&#x26;#x3D;&#x26;quot;row&#x26;quot;
+        [object
+        Object]
+      >
         <th
           class="pf-v6-c-table__th"
           role="columnheader"
@@ -640,7 +717,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
                 type="text"
                 value="Text input description content"
                 id="bulk-edit-table-example-row-2-text-input"
-                aria-label="Text input"
+                aria-label="Text input for row 2"
               />
             </span>
           </div>
@@ -661,14 +738,18 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
                 type="text"
                 value="Text input disabled, description content"
                 id="bulk-edit-table-example-row-2-text-input-disabled"
-                aria-label="Disabled text input"
+                aria-label="Disabled text input for row 2"
               />
             </span>
           </div>
         </td>
         <td class="pf-v6-c-table__td" role="cell" data-label="Checkboxes">
           <div class="pf-v6-c-inline-edit__value">Check 1, Check 2</div>
-          <div class="pf-v6-c-inline-edit__group pf-m-column">
+          <div
+            class="pf-v6-c-inline-edit__group pf-m-column"
+            role="group"
+            aria-label="Checkbox group for row 2"
+          >
             <div class="pf-v6-c-inline-edit__input">
               <div class="pf-v6-c-check">
                 <input
@@ -706,7 +787,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
           <div
             class="pf-v6-c-inline-edit__group pf-m-column"
             role="radiogroup"
-            aria-label="Radio group example"
+            aria-label="Radio group for row 2"
           >
             <div class="pf-v6-c-inline-edit__input">
               <div class="pf-v6-c-radio">
@@ -748,7 +829,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
                 type="number"
                 value="2"
                 id="bulk-edit-table-example-row-2-number-input"
-                aria-label="Number input"
+                aria-label="Number input for row 2"
               />
             </span>
           </div>
@@ -766,7 +847,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
                 type="button"
                 aria-label="Save edits"
               >
-                <i class="fas fa-check" aria-hidden="true"></i>
+                <span class="pf-v6-c-button__icon">
+                  <i class="fas fa-check" aria-hidden="true"></i>
+                </span>
               </button>
             </div>
             <div class="pf-v6-c-inline-edit__action">
@@ -775,7 +858,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
                 type="button"
                 aria-label="Cancel edits"
               >
-                <i class="fas fa-times" aria-hidden="true"></i>
+                <span class="pf-v6-c-button__icon">
+                  <i class="fas fa-times" aria-hidden="true"></i>
+                </span>
               </button>
             </div>
           </div>
@@ -787,17 +872,19 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
               aria-label="Edit"
               aria-labelledby="bulk-edit-table-example-label bulk-edit-table-example-row-2-edit-button"
             >
-              <i class="fas fa-pencil-alt" aria-hidden="true"></i>
+              <span class="pf-v6-c-button__icon">
+                <i class="fas fa-pencil-alt" aria-hidden="true"></i>
+              </span>
             </button>
           </div>
         </td>
 
-        <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
+        <td class="pf-v6-c-table__td pf-v6-c-table__action">
           <button
             class="pf-v6-c-menu-toggle pf-m-plain"
             type="button"
             aria-expanded="false"
-            aria-label="Table actions"
+            aria-label="Menu toggle"
           >
             <span class="pf-v6-c-menu-toggle__icon">
               <i class="fas fa-ellipsis-v" aria-hidden="true"></i>

package/docs/components/InputGroup/examples/InputGroup.md

@@ -17,7 +17,9 @@ Use the input group to extend form controls by adding text, buttons, selects, et
       class="pf-v6-c-button pf-m-control"
       type="button"
       id="textAreaButton1"
-    >Button</button>
+    >
+      <span class="pf-v6-c-button__text">Button</span>
+    </button>
   </div>
   <div class="pf-v6-c-input-group__item pf-m-fill">
     <span class="pf-v6-c-form-control pf-m-resize-both">
@@ -30,7 +32,9 @@ Use the input group to extend form controls by adding text, buttons, selects, et
     </span>
   </div>
   <div class="pf-v6-c-input-group__item">
-    <button class="pf-v6-c-button pf-m-control" type="button">Button</button>
+    <button class="pf-v6-c-button pf-m-control" type="button">
+      <span class="pf-v6-c-button__text">Button</span>
+    </button>
   </div>
 </div>
 <br />
@@ -50,7 +54,9 @@ Use the input group to extend form controls by adding text, buttons, selects, et
       class="pf-v6-c-button pf-m-control"
       type="button"
       id="textAreaButton2"
-    >Button</button>
+    >
+      <span class="pf-v6-c-button__text">Button</span>
+    </button>
   </div>
 </div>
 <br />
@@ -60,10 +66,14 @@ Use the input group to extend form controls by adding text, buttons, selects, et
       class="pf-v6-c-button pf-m-control"
       type="button"
       id="textAreaButton3"
-    >Button</button>
+    >
+      <span class="pf-v6-c-button__text">Button</span>
+    </button>
   </div>
   <div class="pf-v6-c-input-group__item">
-    <button class="pf-v6-c-button pf-m-control" type="button">Button</button>
+    <button class="pf-v6-c-button pf-m-control" type="button">
+      <span class="pf-v6-c-button__text">Button</span>
+    </button>
   </div>
   <div class="pf-v6-c-input-group__item pf-m-fill">
     <span class="pf-v6-c-form-control pf-m-resize-both">
@@ -76,67 +86,27 @@ Use the input group to extend form controls by adding text, buttons, selects, et
     </span>
   </div>
   <div class="pf-v6-c-input-group__item">
-    <button class="pf-v6-c-button pf-m-control" type="button">Button</button>
+    <button class="pf-v6-c-button pf-m-control" type="button">
+      <span class="pf-v6-c-button__text">Button</span>
+    </button>
   </div>
 </div>
 <br />
 <div class="pf-v6-c-input-group">
   <div class="pf-v6-c-input-group__item">
-    <div class="pf-v6-c-select" style="width: 100px;">
-      <span id="select-example-collapsed1-label" hidden>Choose one</span>
-
-      <button
-        class="pf-v6-c-select__toggle"
-        type="button"
-        id="select-example-collapsed1-toggle"
-        aria-haspopup="true"
-        aria-expanded="false"
-        aria-labelledby="select-example-collapsed1-label select-example-collapsed1-toggle"
-      >
-        <div class="pf-v6-c-select__toggle-wrapper">
-          <span class="pf-v6-c-select__toggle-text">Select</span>
-        </div>
-        <span class="pf-v6-c-select__toggle-arrow">
+    <button
+      class="pf-v6-c-menu-toggle"
+      type="button"
+      aria-expanded="false"
+      id="select-example-collapsed1"
+    >
+      <span class="pf-v6-c-menu-toggle__text">Select</span>
+      <span class="pf-v6-c-menu-toggle__controls">
+        <span class="pf-v6-c-menu-toggle__toggle-icon">
           <i class="fas fa-caret-down" aria-hidden="true"></i>
         </span>
-      </button>
-
-      <ul
-        class="pf-v6-c-select__menu"
-        role="listbox"
-        aria-labelledby="select-example-collapsed1-label"
-        hidden
-        style="width: 100px;"
-      >
-        <li role="presentation">
-          <button class="pf-v6-c-select__menu-item" role="option">Running</button>
-        </li>
-        <li role="presentation">
-          <button
-            class="pf-v6-c-select__menu-item pf-m-selected"
-            role="option"
-            aria-selected="true"
-          >
-            Stopped
-            <span class="pf-v6-c-select__menu-item-icon">
-              <i class="fas fa-check" aria-hidden="true"></i>
-            </span>
-          </button>
-        </li>
-        <li role="presentation">
-          <button class="pf-v6-c-select__menu-item" role="option">Down</button>
-        </li>
-        <li role="presentation">
-          <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
-        </li>
-        <li role="presentation">
-          <button
-            class="pf-v6-c-select__menu-item"
-            role="option"
-          >Needs maintenance</button>
-        </li>
-      </ul>
-    </div>
+      </span>
+    </button>
   </div>
   <div class="pf-v6-c-input-group__item pf-m-fill">
     <span class="pf-v6-c-form-control">
@@ -154,7 +124,9 @@ Use the input group to extend form controls by adding text, buttons, selects, et
       class="pf-v6-c-button pf-m-control"
       type="button"
       id="inputSelectButton1"
-    >Button</button>
+    >
+      <span class="pf-v6-c-button__text">Button</span>
+    </button>
   </div>
 </div>
 <br />
@@ -238,7 +210,9 @@ Use the input group to extend form controls by adding text, buttons, selects, et
       type="button"
       aria-label="Popover for input"
     >
-      <i class="fas fa-question-circle" aria-hidden="true"></i>
+      <span class="pf-v6-c-button__icon">
+        <i class="fas fa-question-circle" aria-hidden="true"></i>
+      </span>
     </button>
   </div>
 </div>
@@ -260,7 +234,9 @@ Use the input group to extend form controls by adding text, buttons, selects, et
       type="button"
       aria-label="Popover for input"
     >
-      <i class="fas fa-question-circle" aria-hidden="true"></i>
+      <span class="pf-v6-c-button__icon">
+        <i class="fas fa-question-circle" aria-hidden="true"></i>
+      </span>
     </button>
   </div>
 </div>