@patternfly/patternfly 4.194.4 → 4.196.1

package/docs/components/Table/examples/Table.md

@@ -1093,6 +1093,8 @@ When header cells are empty or they contain interactive elements, `<th>` should
 
 ## Expandable
 
+Note: Table column widths will respond automatically when toggling expanded rows. To retain column widths between expanded and collapsed states, column header and/or data cell widths must be set.
+
 ### Expandable example
 
 ```html
@@ -1106,10 +1108,9 @@ When header cells are empty or they contain interactive elements, `<th>` should
     <tr role="row">
       <td class="pf-c-table__toggle" role="cell">
         <button
-          class="pf-c-button pf-m-plain pf-m-expanded"
+          class="pf-c-button pf-m-plain"
           id="table-expandable-expandable-toggle-thead"
-          aria-label="Collapse all"
-          aria-expanded="true"
+          aria-label="Expand all"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -1546,6 +1547,479 @@ When header cells are empty or they contain interactive elements, `<th>` should
 
 ```
 
+### Expandable with set width columns example
+
+```html
+<table
+  class="pf-c-table pf-m-expandable pf-m-grid-lg"
+  role="grid"
+  aria-label="Expandable table, set column widths example"
+  id="expandable-set-width-columns-example"
+>
+  <thead>
+    <tr role="row">
+      <td class="pf-c-table__toggle" role="cell">
+        <button
+          class="pf-c-button pf-m-plain pf-m-expanded"
+          id="expandable-set-width-columns-example-expandable-toggle-thead"
+          aria-label="Collapse all"
+          aria-expanded="true"
+        >
+          <div class="pf-c-table__toggle-icon">
+            <i class="fas fa-angle-down" aria-hidden="true"></i>
+          </div>
+        </button>
+      </td>
+
+      <td class="pf-c-table__check" role="cell">
+        <label>
+          <input
+            type="checkbox"
+            name="expandable-set-width-columns-example-checkrowthead"
+            aria-label="Select all rows"
+          />
+        </label>
+      </td>
+      <th
+        class="pf-m-width-30 pf-c-table__sort pf-m-selected"
+        role="columnheader"
+        aria-sort="ascending"
+        scope="col"
+      >
+        <button class="pf-c-table__button">
+          <div class="pf-c-table__button-content">
+            <span class="pf-c-table__text">Repositories</span>
+            <span class="pf-c-table__sort-indicator">
+              <i class="fas fa-long-arrow-alt-up"></i>
+            </span>
+          </div>
+        </button>
+      </th>
+      <th
+        class="pf-m-width-20 pf-c-table__sort"
+        role="columnheader"
+        aria-sort="none"
+        scope="col"
+      >
+        <button class="pf-c-table__button">
+          <div class="pf-c-table__button-content">
+            <span class="pf-c-table__text">Branches</span>
+            <span class="pf-c-table__sort-indicator">
+              <i class="fas fa-arrows-alt-v"></i>
+            </span>
+          </div>
+        </button>
+      </th>
+      <th
+        class="pf-m-width-20 pf-c-table__sort"
+        role="columnheader"
+        aria-sort="none"
+        scope="col"
+      >
+        <button class="pf-c-table__button">
+          <div class="pf-c-table__button-content">
+            <span class="pf-c-table__text">Pull requests</span>
+            <span class="pf-c-table__sort-indicator">
+              <i class="fas fa-arrows-alt-v"></i>
+            </span>
+          </div>
+        </button>
+      </th>
+      <th class="pf-m-width-10" role="columnheader" scope="col">Links</th>
+      <td></td>
+    </tr>
+  </thead>
+
+  <tbody class="pf-m-expanded" role="rowgroup">
+    <tr role="row">
+      <td class="pf-c-table__toggle" role="cell">
+        <button
+          class="pf-c-button pf-m-plain pf-m-expanded"
+          aria-labelledby="expandable-set-width-columns-example-node1 expandable-set-width-columns-example-expandable-toggle1"
+          id="expandable-set-width-columns-example-expandable-toggle1"
+          aria-label="Details"
+          aria-controls="expandable-set-width-columns-example-content1"
+          aria-expanded="true"
+        >
+          <div class="pf-c-table__toggle-icon">
+            <i class="fas fa-angle-down" aria-hidden="true"></i>
+          </div>
+        </button>
+      </td>
+
+      <td class="pf-c-table__check" role="cell">
+        <label>
+          <input
+            type="checkbox"
+            name="expandable-set-width-columns-example-checkrow1"
+            aria-labelledby="expandable-set-width-columns-example-node1"
+          />
+        </label>
+      </td>
+      <th role="columnheader" data-label="Data label name">
+        <div id="expandable-set-width-columns-example-node1">Node 1</div>
+        <a href="#">siemur/test-space</a>
+      </th>
+      <td role="cell" data-label="Branches">10</td>
+      <td role="cell" data-label="Pull requests">25</td>
+      <td role="cell" data-label="Action">
+        <a href="#">Link 1</a>
+      </td>
+      <td class="pf-c-table__action" role="cell">
+        <div class="pf-c-dropdown">
+          <button
+            class="pf-c-dropdown__toggle pf-m-plain"
+            id="expandable-set-width-columns-example-dropdown-kebab-1-button"
+            aria-expanded="false"
+            type="button"
+            aria-label="Actions"
+          >
+            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+          </button>
+          <ul
+            class="pf-c-dropdown__menu pf-m-align-right"
+            aria-labelledby="expandable-set-width-columns-example-dropdown-kebab-1-button"
+            hidden
+          >
+            <li>
+              <a class="pf-c-dropdown__menu-item" href="#">Link</a>
+            </li>
+            <li>
+              <button class="pf-c-dropdown__menu-item" type="button">Action</button>
+            </li>
+            <li>
+              <a
+                class="pf-c-dropdown__menu-item pf-m-disabled"
+                href="#"
+                aria-disabled="true"
+                tabindex="-1"
+              >Disabled link</a>
+            </li>
+            <li>
+              <button
+                class="pf-c-dropdown__menu-item"
+                type="button"
+                disabled
+              >Disabled action</button>
+            </li>
+            <li class="pf-c-divider" role="separator"></li>
+            <li>
+              <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
+            </li>
+          </ul>
+        </div>
+      </td>
+    </tr>
+
+    <tr
+      class="pf-c-table__expandable-row pf-m-expanded"
+      role="row"
+      id="expandable-set-width-columns-example-content1"
+    >
+      <td></td>
+      <td></td>
+      <td role="cell" colspan="4">
+        <div class="pf-c-table__expandable-row-content">
+          <b>Span four</b>&nbsp;lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </div>
+      </td>
+      <td></td>
+    </tr>
+  </tbody>
+
+  <tbody role="rowgroup">
+    <tr class="pf-m-expanded" role="row">
+      <td class="pf-c-table__toggle" role="cell">
+        <button
+          class="pf-c-button pf-m-plain pf-m-expanded"
+          aria-labelledby="expandable-set-width-columns-example-node2 expandable-set-width-columns-example-expandable-toggle2"
+          id="expandable-set-width-columns-example-expandable-toggle2"
+          aria-label="Details"
+          aria-controls="expandable-set-width-columns-example-content2"
+          aria-expanded="true"
+        >
+          <div class="pf-c-table__toggle-icon">
+            <i class="fas fa-angle-down" aria-hidden="true"></i>
+          </div>
+        </button>
+      </td>
+
+      <td class="pf-c-table__check" role="cell">
+        <label>
+          <input
+            type="checkbox"
+            name="expandable-set-width-columns-example-checkrow2"
+            aria-labelledby="expandable-set-width-columns-example-node2"
+          />
+        </label>
+      </td>
+      <th role="columnheader" data-label="Data label name">
+        <div id="expandable-set-width-columns-example-node2">Node 2</div>
+        <a href="#">siemur/test-space</a>
+      </th>
+      <td role="cell" data-label="Branches">10</td>
+      <td role="cell" data-label="Pull requests">25</td>
+      <td role="cell" data-label="Action">
+        <a href="#">Link 2</a>
+      </td>
+      <td class="pf-c-table__action" role="cell">
+        <div class="pf-c-dropdown">
+          <button
+            class="pf-c-dropdown__toggle pf-m-plain"
+            id="expandable-set-width-columns-example-dropdown-kebab-2-button"
+            aria-expanded="false"
+            type="button"
+            aria-label="Actions"
+          >
+            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+          </button>
+          <ul
+            class="pf-c-dropdown__menu pf-m-align-right"
+            aria-labelledby="expandable-set-width-columns-example-dropdown-kebab-2-button"
+            hidden
+          >
+            <li>
+              <a class="pf-c-dropdown__menu-item" href="#">Link</a>
+            </li>
+            <li>
+              <button class="pf-c-dropdown__menu-item" type="button">Action</button>
+            </li>
+            <li>
+              <a
+                class="pf-c-dropdown__menu-item pf-m-disabled"
+                href="#"
+                aria-disabled="true"
+                tabindex="-1"
+              >Disabled link</a>
+            </li>
+            <li>
+              <button
+                class="pf-c-dropdown__menu-item"
+                type="button"
+                disabled
+              >Disabled action</button>
+            </li>
+            <li class="pf-c-divider" role="separator"></li>
+            <li>
+              <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
+            </li>
+          </ul>
+        </div>
+      </td>
+    </tr>
+
+    <tr
+      class="pf-c-table__expandable-row pf-m-expanded"
+      role="row"
+      id="expandable-set-width-columns-example-content2"
+    >
+      <td></td>
+      <td></td>
+      <td role="cell" colspan="2">
+        <div class="pf-c-table__expandable-row-content">Span three and four</div>
+      </td>
+      <td role="cell" colspan="2">
+        <div class="pf-c-table__expandable-row-content">Span five and six</div>
+      </td>
+      <td></td>
+    </tr>
+  </tbody>
+
+  <tbody class="pf-m-expanded" role="rowgroup">
+    <tr role="row">
+      <td class="pf-c-table__toggle" role="cell">
+        <button
+          class="pf-c-button pf-m-plain pf-m-expanded"
+          aria-labelledby="expandable-set-width-columns-example-node3 expandable-set-width-columns-example-expandable-toggle3"
+          id="expandable-set-width-columns-example-expandable-toggle3"
+          aria-label="Details"
+          aria-controls="expandable-set-width-columns-example-content3"
+          aria-expanded="true"
+        >
+          <div class="pf-c-table__toggle-icon">
+            <i class="fas fa-angle-down" aria-hidden="true"></i>
+          </div>
+        </button>
+      </td>
+
+      <td class="pf-c-table__check" role="cell">
+        <label>
+          <input
+            type="checkbox"
+            name="expandable-set-width-columns-example-checkrow3"
+            aria-labelledby="expandable-set-width-columns-example-node3"
+          />
+        </label>
+      </td>
+      <th role="columnheader" data-label="Data label name">
+        <div id="expandable-set-width-columns-example-node3">Node 3</div>
+        <a href="#">siemur/test-space</a>
+      </th>
+      <td role="cell" data-label="Branches">10</td>
+      <td role="cell" data-label="Pull requests">25</td>
+      <td role="cell" data-label="Action">
+        <a href="#">Link 3</a>
+      </td>
+      <td class="pf-c-table__action" role="cell">
+        <div class="pf-c-dropdown">
+          <button
+            class="pf-c-dropdown__toggle pf-m-plain"
+            id="expandable-set-width-columns-example-dropdown-kebab-3-button"
+            aria-expanded="false"
+            type="button"
+            aria-label="Actions"
+          >
+            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+          </button>
+          <ul
+            class="pf-c-dropdown__menu pf-m-align-right"
+            aria-labelledby="expandable-set-width-columns-example-dropdown-kebab-3-button"
+            hidden
+          >
+            <li>
+              <a class="pf-c-dropdown__menu-item" href="#">Link</a>
+            </li>
+            <li>
+              <button class="pf-c-dropdown__menu-item" type="button">Action</button>
+            </li>
+            <li>
+              <a
+                class="pf-c-dropdown__menu-item pf-m-disabled"
+                href="#"
+                aria-disabled="true"
+                tabindex="-1"
+              >Disabled link</a>
+            </li>
+            <li>
+              <button
+                class="pf-c-dropdown__menu-item"
+                type="button"
+                disabled
+              >Disabled action</button>
+            </li>
+            <li class="pf-c-divider" role="separator"></li>
+            <li>
+              <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
+            </li>
+          </ul>
+        </div>
+      </td>
+    </tr>
+
+    <tr
+      class="pf-c-table__expandable-row pf-m-expanded"
+      role="row"
+      id="expandable-set-width-columns-example-content3"
+    >
+      <td role="cell" colspan="7">
+        <div class="pf-c-table__expandable-row-content">
+          <b>Span all</b>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </div>
+      </td>
+    </tr>
+  </tbody>
+
+  <tbody class="pf-m-expanded" role="rowgroup">
+    <tr role="row">
+      <td class="pf-c-table__toggle" role="cell">
+        <button
+          class="pf-c-button pf-m-plain pf-m-expanded"
+          aria-labelledby="expandable-set-width-columns-example-node4 expandable-set-width-columns-example-expandable-toggle4"
+          id="expandable-set-width-columns-example-expandable-toggle4"
+          aria-label="Details"
+          aria-controls="expandable-set-width-columns-example-content4"
+          aria-expanded="true"
+        >
+          <div class="pf-c-table__toggle-icon">
+            <i class="fas fa-angle-down" aria-hidden="true"></i>
+          </div>
+        </button>
+      </td>
+
+      <td class="pf-c-table__check" role="cell">
+        <label>
+          <input
+            type="checkbox"
+            name="expandable-set-width-columns-example-checkrow4"
+            aria-labelledby="expandable-set-width-columns-example-node4"
+          />
+        </label>
+      </td>
+      <th role="columnheader" data-label="Data label name">
+        <div id="expandable-set-width-columns-example-node4">Node 4</div>
+        <a href="#">siemur/test-space</a>
+      </th>
+      <td role="cell" data-label="Branches">10</td>
+      <td role="cell" data-label="Pull requests">25</td>
+      <td role="cell" data-label="Action">
+        <a href="#">Link 4</a>
+      </td>
+      <td class="pf-c-table__action" role="cell">
+        <div class="pf-c-dropdown">
+          <button
+            class="pf-c-dropdown__toggle pf-m-plain"
+            id="expandable-set-width-columns-example-dropdown-kebab-4-button"
+            aria-expanded="false"
+            type="button"
+            aria-label="Actions"
+          >
+            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+          </button>
+          <ul
+            class="pf-c-dropdown__menu pf-m-align-right"
+            aria-labelledby="expandable-set-width-columns-example-dropdown-kebab-4-button"
+            hidden
+          >
+            <li>
+              <a class="pf-c-dropdown__menu-item" href="#">Link</a>
+            </li>
+            <li>
+              <button class="pf-c-dropdown__menu-item" type="button">Action</button>
+            </li>
+            <li>
+              <a
+                class="pf-c-dropdown__menu-item pf-m-disabled"
+                href="#"
+                aria-disabled="true"
+                tabindex="-1"
+              >Disabled link</a>
+            </li>
+            <li>
+              <button
+                class="pf-c-dropdown__menu-item"
+                type="button"
+                disabled
+              >Disabled action</button>
+            </li>
+            <li class="pf-c-divider" role="separator"></li>
+            <li>
+              <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
+            </li>
+          </ul>
+        </div>
+      </td>
+    </tr>
+
+    <tr
+      class="pf-c-table__expandable-row pf-m-expanded"
+      role="row"
+      id="expandable-set-width-columns-example-content4"
+    >
+      <td role="cell" colspan="3">
+        <div class="pf-c-table__expandable-row-content">Span one, two, and three</div>
+      </td>
+      <td role="cell" colspan="2">
+        <div class="pf-c-table__expandable-row-content">Span four and five</div>
+      </td>
+      <td role="cell" colspan="2">
+        <div class="pf-c-table__expandable-row-content">Span six and seven</div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+```
+
 ### Expandable with nested table example
 
 ```html