@patternfly/patternfly 5.0.0-alpha.53 → 5.0.0-alpha.55

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

@@ -123,12 +123,13 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
   </div>
   <div class="pf-v5-c-inline-edit__group">
     <div class="pf-v5-c-inline-edit__input">
-      <input
-        class="pf-v5-c-form-control"
-        type="text"
-        value="Static value"
-        aria-label="Editable text input"
-      />
+      <div class="pf-v5-c-form-control">
+        <input
+          type="text"
+          value="Static value"
+          aria-label="Editable text input"
+        />
+      </div>
     </div>
     <div class="pf-v5-c-inline-edit__group pf-m-action-group pf-m-icon-group">
       <div class="pf-v5-c-inline-edit__action pf-m-valid">
@@ -181,12 +182,13 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
   </div>
   <div class="pf-v5-c-inline-edit__group">
     <div class="pf-v5-c-inline-edit__input">
-      <input
-        class="pf-v5-c-form-control"
-        type="text"
-        value="Static value"
-        aria-label="Editable text input"
-      />
+      <div class="pf-v5-c-form-control">
+        <input
+          type="text"
+          value="Static value"
+          aria-label="Editable text input"
+        />
+      </div>
     </div>
     <div class="pf-v5-c-inline-edit__group pf-m-action-group pf-m-icon-group">
       <div class="pf-v5-c-inline-edit__action pf-m-valid">
@@ -252,13 +254,14 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
   <div class="pf-v5-c-inline-edit__value">Static value</div>
   <div class="pf-v5-c-inline-edit__group">
     <div class="pf-v5-c-inline-edit__input">
-      <input
-        class="pf-v5-c-form-control"
-        type="text"
-        id="single-inline-edit-with-label-example-input"
-        value="Static value"
-        aria-label="Editable text input"
-      />
+      <div class="pf-v5-c-form-control">
+        <input
+          type="text"
+          id="single-inline-edit-with-label-example-input"
+          value="Static value"
+          aria-label="Editable text input"
+        />
+      </div>
     </div>
     <div class="pf-v5-c-inline-edit__group pf-m-action-group pf-m-icon-group">
       <div class="pf-v5-c-inline-edit__action pf-m-valid">
@@ -313,12 +316,13 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
   <div class="pf-v5-c-inline-edit__value">Static value</div>
   <div class="pf-v5-c-inline-edit__group">
     <div class="pf-v5-c-inline-edit__input">
-      <input
-        class="pf-v5-c-form-control"
-        type="text"
-        value="Static value"
-        aria-label="Editable text input"
-      />
+      <div class="pf-v5-c-form-control">
+        <input
+          type="text"
+          value="Static value"
+          aria-label="Editable text input"
+        />
+      </div>
     </div>
     <div class="pf-v5-c-inline-edit__group pf-m-action-group pf-m-icon-group">
       <div class="pf-v5-c-inline-edit__action pf-m-valid">
@@ -373,13 +377,14 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
   <div class="pf-v5-c-inline-edit__value">Static value</div>
   <div class="pf-v5-c-inline-edit__group">
     <div class="pf-v5-c-inline-edit__input">
-      <input
-        class="pf-v5-c-form-control"
-        required
-        value="Invalid state"
-        aria-invalid="true"
-        aria-label="Error state input example"
-      />
+      <div class="pf-v5-c-form-control">
+        <input
+          required
+          value="Invalid state"
+          aria-invalid="true"
+          aria-label="Error state input example"
+        />
+      </div>
     </div>
     <div class="pf-v5-c-inline-edit__group pf-m-action-group pf-m-icon-group">
       <div class="pf-v5-c-inline-edit__action">
@@ -417,50 +422,60 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
     aria-label="Inline edit table row example"
     id="inline-edit-table-row-example"
   >
-    <caption>This is the table caption</caption>
-    <thead>
-      <tr role="row">
-        <th role="columnheader">Text input</th>
-        <th role="columnheader">Disabled text input</th>
-        <th role="columnheader">Checkboxes</th>
-        <th role="columnheader">Radios</th>
-        <th role="columnheader">Number</th>
-        <td></td>
-
-        <td></td>
+    <caption class="pf-v5-c-table__caption">This is the table caption</caption>
+    <thead class="pf-v5-c-table__thead">
+      <tr class="pf-v5-c-table__tr" role="row">
+        <th class="pf-v5-c-table__th" role="columnheader">Text input</th>
+        <th class="pf-v5-c-table__th" role="columnheader">Disabled text input</th>
+        <th class="pf-v5-c-table__th" role="columnheader">Checkboxes</th>
+        <th class="pf-v5-c-table__th" role="columnheader">Radios</th>
+        <th class="pf-v5-c-table__th" role="columnheader">Number</th>
+        <td class="pf-v5-c-table__td"></td>
+
+        <td class="pf-v5-c-table__td"></td>
       </tr>
     </thead>
 
-    <tbody role="rowgroup">
-      <tr class="pf-m-inline-editable" role="row">
-        <th role="columnheader" data-label="Text input">
+    <tbody class="pf-v5-c-table__tbody" role="rowgroup">
+      <tr class="pf-v5-c-table__tr pf-m-inline-editable" role="row">
+        <th
+          class="pf-v5-c-table__th"
+          role="columnheader"
+          data-label="Text input"
+        >
           <div class="pf-v5-c-inline-edit__value">Text input description content</div>
           <div class="pf-v5-c-inline-edit__input">
-            <input
-              class="pf-v5-c-form-control"
-              type="text"
-              value="Text input description content"
-              id="bulk-edit-table-example-row-1-text-input"
-              aria-label="Text input"
-            />
+            <div class="pf-v5-c-form-control">
+              <input
+                type="text"
+                value="Text input description content"
+                id="bulk-edit-table-example-row-1-text-input"
+                aria-label="Text input"
+              />
+            </div>
           </div>
         </th>
-        <td role="cell" data-label="Disabled text input">
+        <td
+          class="pf-v5-c-table__td"
+          role="cell"
+          data-label="Disabled text input"
+        >
           <div
             class="pf-v5-c-inline-edit__value"
           >Text input disabled, description content</div>
           <div class="pf-v5-c-inline-edit__input">
-            <input
-              class="pf-v5-c-form-control"
-              type="text"
-              value="Text input disabled, description content"
-              id="bulk-edit-table-example-row-1-text-input-disabled"
-              aria-label="Disabled text input"
-              disabled
-            />
+            <div class="pf-v5-c-form-control">
+              <input
+                type="text"
+                value="Text input disabled, description content"
+                id="bulk-edit-table-example-row-1-text-input-disabled"
+                aria-label="Disabled text input"
+                disabled
+              />
+            </div>
           </div>
         </td>
-        <td role="cell" data-label="Checkboxes">
+        <td class="pf-v5-c-table__td" role="cell" data-label="Checkboxes">
           <div class="pf-v5-c-inline-edit__value">Check 1, Check 2</div>
           <div class="pf-v5-c-inline-edit__group pf-m-column">
             <div class="pf-v5-c-inline-edit__input">
@@ -495,7 +510,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
             </div>
           </div>
         </td>
-        <td role="cell" data-label="Radios">
+        <td class="pf-v5-c-table__td" role="cell" data-label="Radios">
           <div class="pf-v5-c-inline-edit__value">Radio 1, Radio 2</div>
           <div
             class="pf-v5-c-inline-edit__group pf-m-column"
@@ -534,19 +549,23 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
             </div>
           </div>
         </td>
-        <td role="cell" data-label="Number">
+        <td class="pf-v5-c-table__td" role="cell" data-label="Number">
           <div class="pf-v5-c-inline-edit__value">2</div>
           <div class="pf-v5-c-inline-edit__input">
-            <input
-              class="pf-v5-c-form-control"
-              type="number"
-              value="2"
-              id="bulk-edit-table-example-row-1-number-input"
-              aria-label="Number input"
-            />
+            <div class="pf-v5-c-form-control">
+              <input
+                type="number"
+                value="2"
+                id="bulk-edit-table-example-row-1-number-input"
+                aria-label="Number input"
+              />
+            </div>
           </div>
         </td>
-        <td class="pf-v5-c-table__inline-edit-action" role="cell">
+        <td
+          class="pf-v5-c-table__td pf-v5-c-table__inline-edit-action"
+          role="cell"
+        >
           <div
             class="pf-v5-c-inline-edit__group pf-m-action-group pf-m-icon-group"
           >
@@ -581,7 +600,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
             </button>
           </div>
         </td>
-        <td class="pf-v5-c-table__action" role="cell">
+        <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell">
           <div class="pf-v5-c-dropdown">
             <button
               class="pf-v5-c-dropdown__toggle pf-m-plain"
@@ -627,35 +646,45 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
         </td>
       </tr>
 
-      <tr role="row">
-        <th role="columnheader" data-label="Text input">
+      <tr class="pf-v5-c-table__tr" role="row">
+        <th
+          class="pf-v5-c-table__th"
+          role="columnheader"
+          data-label="Text input"
+        >
           <div class="pf-v5-c-inline-edit__value">Text input description content</div>
           <div class="pf-v5-c-inline-edit__input">
-            <input
-              class="pf-v5-c-form-control"
-              type="text"
-              value="Text input description content"
-              id="bulk-edit-table-example-row-2-text-input"
-              aria-label="Text input"
-            />
+            <div class="pf-v5-c-form-control">
+              <input
+                type="text"
+                value="Text input description content"
+                id="bulk-edit-table-example-row-2-text-input"
+                aria-label="Text input"
+              />
+            </div>
           </div>
         </th>
-        <td role="cell" data-label="Disabled text input">
+        <td
+          class="pf-v5-c-table__td"
+          role="cell"
+          data-label="Disabled text input"
+        >
           <div
             class="pf-v5-c-inline-edit__value"
           >Text input disabled, description content</div>
           <div class="pf-v5-c-inline-edit__input">
-            <input
-              class="pf-v5-c-form-control"
-              type="text"
-              value="Text input disabled, description content"
-              id="bulk-edit-table-example-row-2-text-input-disabled"
-              aria-label="Disabled text input"
-              disabled
-            />
+            <div class="pf-v5-c-form-control">
+              <input
+                type="text"
+                value="Text input disabled, description content"
+                id="bulk-edit-table-example-row-2-text-input-disabled"
+                aria-label="Disabled text input"
+                disabled
+              />
+            </div>
           </div>
         </td>
-        <td role="cell" data-label="Checkboxes">
+        <td class="pf-v5-c-table__td" role="cell" data-label="Checkboxes">
           <div class="pf-v5-c-inline-edit__value">Check 1, Check 2</div>
           <div class="pf-v5-c-inline-edit__group pf-m-column">
             <div class="pf-v5-c-inline-edit__input">
@@ -690,7 +719,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
             </div>
           </div>
         </td>
-        <td role="cell" data-label="Radios">
+        <td class="pf-v5-c-table__td" role="cell" data-label="Radios">
           <div class="pf-v5-c-inline-edit__value">Radio 1, Radio 2</div>
           <div
             class="pf-v5-c-inline-edit__group pf-m-column"
@@ -729,19 +758,23 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
             </div>
           </div>
         </td>
-        <td role="cell" data-label="Number">
+        <td class="pf-v5-c-table__td" role="cell" data-label="Number">
           <div class="pf-v5-c-inline-edit__value">2</div>
           <div class="pf-v5-c-inline-edit__input">
-            <input
-              class="pf-v5-c-form-control"
-              type="number"
-              value="2"
-              id="bulk-edit-table-example-row-2-number-input"
-              aria-label="Number input"
-            />
+            <div class="pf-v5-c-form-control">
+              <input
+                type="number"
+                value="2"
+                id="bulk-edit-table-example-row-2-number-input"
+                aria-label="Number input"
+              />
+            </div>
           </div>
         </td>
-        <td class="pf-v5-c-table__inline-edit-action" role="cell">
+        <td
+          class="pf-v5-c-table__td pf-v5-c-table__inline-edit-action"
+          role="cell"
+        >
           <div
             class="pf-v5-c-inline-edit__group pf-m-action-group pf-m-icon-group"
           >
@@ -776,7 +809,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
             </button>
           </div>
         </td>
-        <td class="pf-v5-c-table__action" role="cell">
+        <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell">
           <div class="pf-v5-c-dropdown">
             <button
               class="pf-v5-c-dropdown__toggle pf-m-plain"

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

@@ -20,13 +20,14 @@ Use the input group to extend form controls by adding text, buttons, selects, et
     >Button</button>
   </div>
   <div class="pf-v5-c-input-group__item pf-m-fill">
-    <textarea
-      class="pf-v5-c-form-control"
-      name="textarea1"
-      id="textarea1"
-      aria-label="Textarea with buttons"
-      aria-describedby="textAreaButton1"
-    ></textarea>
+    <div class="pf-v5-c-form-control">
+      <textarea
+        name="textarea1"
+        id="textarea1"
+        aria-label="Textarea with buttons"
+        aria-describedby="textAreaButton1"
+      ></textarea>
+    </div>
   </div>
   <div class="pf-v5-c-input-group__item">
     <button class="pf-v5-c-button pf-m-control" type="button">Button</button>
@@ -35,13 +36,14 @@ Use the input group to extend form controls by adding text, buttons, selects, et
 <br />
 <div class="pf-v5-c-input-group">
   <div class="pf-v5-c-input-group__item pf-m-fill">
-    <textarea
-      class="pf-v5-c-form-control"
-      name="textarea2"
-      id="textarea2"
-      aria-label="Textarea with button"
-      aria-describedby="textAreaButton2"
-    ></textarea>
+    <div class="pf-v5-c-form-control">
+      <textarea
+        name="textarea2"
+        id="textarea2"
+        aria-label="Textarea with button"
+        aria-describedby="textAreaButton2"
+      ></textarea>
+    </div>
   </div>
   <div class="pf-v5-c-input-group__item">
     <button
@@ -64,13 +66,14 @@ Use the input group to extend form controls by adding text, buttons, selects, et
     <button class="pf-v5-c-button pf-m-control" type="button">Button</button>
   </div>
   <div class="pf-v5-c-input-group__item pf-m-fill">
-    <textarea
-      class="pf-v5-c-form-control"
-      name="textarea3"
-      id="textarea3"
-      aria-label="Textarea with buttons"
-      aria-describedby="textAreaButton3"
-    ></textarea>
+    <div class="pf-v5-c-form-control">
+      <textarea
+        name="textarea3"
+        id="textarea3"
+        aria-label="Textarea with buttons"
+        aria-describedby="textAreaButton3"
+      ></textarea>
+    </div>
   </div>
   <div class="pf-v5-c-input-group__item">
     <button class="pf-v5-c-button pf-m-control" type="button">Button</button>
@@ -136,14 +139,15 @@ Use the input group to extend form controls by adding text, buttons, selects, et
     </div>
   </div>
   <div class="pf-v5-c-input-group__item pf-m-fill">
-    <input
-      class="pf-v5-c-form-control"
-      type="text"
-      id="textInput4"
-      name="textInput4"
-      aria-label="Input with select and button"
-      aria-describedby="inputSelectButton1"
-    />
+    <div class="pf-v5-c-form-control">
+      <input
+        type="text"
+        id="textInput4"
+        name="textInput4"
+        aria-label="Input with select and button"
+        aria-describedby="inputSelectButton1"
+      />
+    </div>
   </div>
   <div class="pf-v5-c-input-group__item">
     <button
@@ -161,13 +165,14 @@ Use the input group to extend form controls by adding text, buttons, selects, et
     </span>
   </div>
   <div class="pf-v5-c-input-group__item pf-m-fill">
-    <input
-      class="pf-v5-c-form-control"
-      type="number"
-      id="textInput5"
-      name="textInput5"
-      aria-label=" Dollar amount input example"
-    />
+    <div class="pf-v5-c-form-control">
+      <input
+        type="number"
+        id="textInput5"
+        name="textInput5"
+        aria-label=" Dollar amount input example"
+      />
+    </div>
   </div>
   <div class="pf-v5-c-input-group__item pf-m-box">
     <span class="pf-v5-c-input-group__text">.00</span>
@@ -176,14 +181,15 @@ Use the input group to extend form controls by adding text, buttons, selects, et
 <br />
 <div class="pf-v5-c-input-group">
   <div class="pf-v5-c-input-group__item pf-m-fill">
-    <input
-      class="pf-v5-c-form-control"
-      type="email"
-      id="textInput6"
-      name="textInput6"
-      aria-label="Email input field"
-      aria-describedby="email-example"
-    />
+    <div class="pf-v5-c-form-control">
+      <input
+        type="email"
+        id="textInput6"
+        name="textInput6"
+        aria-label="Email input field"
+        aria-describedby="email-example"
+      />
+    </div>
   </div>
   <div class="pf-v5-c-input-group__item pf-m-box">
     <span class="pf-v5-c-input-group__text" id="email-example">@example.com</span>
@@ -197,27 +203,29 @@ Use the input group to extend form controls by adding text, buttons, selects, et
     </span>
   </div>
   <div class="pf-v5-c-input-group__item pf-m-fill">
-    <input
-      class="pf-v5-c-form-control"
-      required
-      type="email"
-      id="textInput7"
-      name="textInput7"
-      aria-invalid="true"
-      aria-label="Error state username example"
-    />
+    <div class="pf-v5-c-form-control">
+      <input
+        required
+        type="email"
+        id="textInput7"
+        name="textInput7"
+        aria-invalid="true"
+        aria-label="Error state username example"
+      />
+    </div>
   </div>
 </div>
 <br />
 <div class="pf-v5-c-input-group">
   <div class="pf-v5-c-input-group__item pf-m-fill">
-    <input
-      class="pf-v5-c-form-control"
-      type="text"
-      id="textInput13"
-      name="textInput13"
-      aria-label="Input example with popover"
-    />
+    <div class="pf-v5-c-form-control">
+      <input
+        type="text"
+        id="textInput13"
+        name="textInput13"
+        aria-label="Input example with popover"
+      />
+    </div>
   </div>
   <div class="pf-v5-c-input-group__item">
     <button
@@ -232,13 +240,14 @@ Use the input group to extend form controls by adding text, buttons, selects, et
 <br />
 <div class="pf-v5-c-input-group">
   <div class="pf-v5-c-input-group__item pf-m-fill">
-    <input
-      class="pf-v5-c-form-control"
-      type="text"
-      id="textInput12"
-      name="textInput12"
-      aria-label="Input example with popover"
-    />
+    <div class="pf-v5-c-form-control">
+      <input
+        type="text"
+        id="textInput12"
+        name="textInput12"
+        aria-label="Input example with popover"
+      />
+    </div>
   </div>
   <div class="pf-v5-c-input-group__item pf-m-plain">
     <button
@@ -253,13 +262,14 @@ Use the input group to extend form controls by adding text, buttons, selects, et
 <br />
 <div class="pf-v5-c-input-group">
   <div class="pf-v5-c-input-group__item pf-m-fill">
-    <input
-      class="pf-v5-c-form-control"
-      type="number"
-      id="textInput14"
-      name="textInput14"
-      aria-label="Input example with plain unit"
-    />
+    <div class="pf-v5-c-form-control">
+      <input
+        type="number"
+        id="textInput14"
+        name="textInput14"
+        aria-label="Input example with plain unit"
+      />
+    </div>
   </div>
   <div class="pf-v5-c-input-group__item pf-m-box pf-m-plain">
     <span class="pf-v5-c-input-group__text">%</span>