npm - @patternfly/patternfly - Versions diffs - 4.159.1 → 4.159.2 - Mend

@patternfly/patternfly 4.159.1 → 4.159.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/components/Table/table.css +2 -2
package/components/Table/table.scss +2 -2
package/docs/components/Table/examples/Table.md +500 -0
package/docs/demos/Button/examples/Button.md +176 -0
package/package.json +1 -1
package/patternfly-no-reset.css +2 -2
package/patternfly.css +2 -2
package/patternfly.min.css +1 -1
package/patternfly.min.css.map +1 -1

package/components/Table/table.css CHANGED Viewed

@@ -227,8 +227,8 @@
   --pf-c-table--m-compact__expandable-row-content--PaddingRight: var(--pf-global--spacer--lg);
   --pf-c-table--m-compact__expandable-row-content--PaddingBottom: var(--pf-global--spacer--lg);
   --pf-c-table--m-compact__expandable-row-content--PaddingLeft: var(--pf-global--spacer--lg);
-  --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-global--spacer--3xl);
-  --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-global--spacer--3xl);
+  --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--PaddingLeft);
+  --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-c-table--m-compact--cell--first-last-child--PaddingRight);
   --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100);
   --pf-c-table--tr--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
   --pf-c-table--tr--m-hoverable--BackgroundColor: transparent;

package/components/Table/table.scss CHANGED Viewed

@@ -240,8 +240,8 @@
   --pf-c-table--m-compact__expandable-row-content--PaddingLeft: var(--pf-global--spacer--lg);
   // Nested table
-  --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-global--spacer--3xl);
-  --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-global--spacer--3xl);
+  --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--PaddingLeft);
+  --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-c-table--m-compact--cell--first-last-child--PaddingRight);
   // Modifier - expandable row expanded
   --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100);

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

@@ -1251,6 +1251,506 @@ When header cells are empty or they contain interactive elements, `<th>` should
 ```
+### Expandable with nested table example
+```html
+<table
+  class="pf-c-table pf-m-expandable pf-m-grid-lg"
+  role="grid"
+  aria-label="Expandable with nested table example"
+  id="table-expandable-nested-table"
+>
+  <thead>
+    <tr role="row">
+      <td></td>
+      <td class="pf-c-table__check" role="cell">
+        <input
+          type="checkbox"
+          name="table-expandable-nested-table-check-all"
+          aria-label="Select all rows"
+        />
+      </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-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-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>
+      <td></td>
+      <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="table-expandable-nested-table-node1 table-expandable-nested-table-expandable-toggle1"
+          id="table-expandable-nested-table-expandable-toggle1"
+          aria-label="Details"
+          aria-controls="table-expandable-nested-table-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">
+        <input
+          type="checkbox"
+          name="table-expandable-nested-table-checkrow1"
+          aria-labelledby="table-expandable-nested-table-node1"
+        />
+      </td>
+      <th role="columnheader" data-label="Repository name">
+        <div>
+          <div id="table-expandable-nested-table-node1">Node 1</div>
+          <a href="#">siemur/test-space</a>
+        </div>
+      </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="table-expandable-nested-table-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="table-expandable-nested-table-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">
+      <td
+        class
+        role="cell"
+        colspan="7"
+        id="table-expandable-nested-table-content1"
+      >
+        <div class="pf-c-table__expandable-row-content">
+          <table
+            class="pf-c-table pf-m-compact pf-m-grid-md"
+            role="grid"
+            aria-label="This is a simple table"
+            id="table-expandable-nested-table-table-basic"
+          >
+            <thead>
+              <tr role="row">
+                <th role="columnheader" scope="col">Repositories</th>
+                <th role="columnheader" scope="col">Branches</th>
+                <th role="columnheader" scope="col">Pull requests</th>
+                <th role="columnheader" scope="col">Workspaces</th>
+                <th role="columnheader" scope="col">Last commit</th>
+              </tr>
+            </thead>
+            <tbody role="rowgroup">
+              <tr role="row">
+                <td role="cell" data-label="Repository name">Repository 1</td>
+                <td role="cell" data-label="Branches">10</td>
+                <td role="cell" data-label="Pull requests">25</td>
+                <td role="cell" data-label="Workspaces">5</td>
+                <td role="cell" data-label="Last commit">2 days ago</td>
+              </tr>
+              <tr role="row">
+                <td role="cell" data-label="Repository name">Repository 2</td>
+                <td role="cell" data-label="Branches">10</td>
+                <td role="cell" data-label="Pull requests">25</td>
+                <td role="cell" data-label="Workspaces">5</td>
+                <td role="cell" data-label="Last commit">2 days ago</td>
+              </tr>
+              <tr role="row">
+                <td role="cell" data-label="Repository name">Repository 3</td>
+                <td role="cell" data-label="Branches">10</td>
+                <td role="cell" data-label="Pull requests">25</td>
+                <td role="cell" data-label="Workspaces">5</td>
+                <td role="cell" data-label="Last commit">2 days ago</td>
+              </tr>
+              <tr role="row">
+                <td role="cell" data-label="Repository name">Repository 4</td>
+                <td role="cell" data-label="Branches">10</td>
+                <td role="cell" data-label="Pull requests">25</td>
+                <td role="cell" data-label="Workspaces">5</td>
+                <td role="cell" data-label="Last commit">2 days ago</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+  <tbody role="rowgroup">
+    <tr role="row">
+      <td class="pf-c-table__toggle" role="cell">
+        <button
+          class="pf-c-button pf-m-plain"
+          aria-labelledby="table-expandable-nested-table-node2 table-expandable-nested-table-expandable-toggle2"
+          id="table-expandable-nested-table-expandable-toggle2"
+          aria-label="Details"
+          aria-controls="table-expandable-nested-table-content2"
+        >
+          <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">
+        <input
+          type="checkbox"
+          name="table-expandable-nested-table-checkrow2"
+          aria-labelledby="table-expandable-nested-table-node2"
+        />
+      </td>
+      <th role="columnheader" data-label="Repository name">
+        <div>
+          <div id="table-expandable-nested-table-node2">Node 2</div>
+          <a href="#">siemur/test-space</a>
+        </div>
+      </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="table-expandable-nested-table-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="table-expandable-nested-table-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" role="row">
+      <td
+        class
+        role="cell"
+        colspan="7"
+        id="table-expandable-nested-table-content2"
+      >
+        <div
+          class="pf-c-table__expandable-row-content"
+        >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="table-expandable-nested-table-node3 table-expandable-nested-table-expandable-toggle3"
+          id="table-expandable-nested-table-expandable-toggle3"
+          aria-label="Details"
+          aria-controls="table-expandable-nested-table-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">
+        <input
+          type="checkbox"
+          name="table-expandable-nested-table-checkrow3"
+          aria-labelledby="table-expandable-nested-table-node3"
+        />
+      </td>
+      <th role="columnheader" data-label="Repository name">
+        <div>
+          <div id="table-expandable-nested-table-node3">Node 3</div>
+          <a href="#">siemur/test-space</a>
+        </div>
+      </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="table-expandable-nested-table-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="table-expandable-nested-table-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">
+      <td
+        class
+        role="cell"
+        colspan="7"
+        id="table-expandable-nested-table-content3"
+      >
+        <div
+          class="pf-c-table__expandable-row-content"
+        >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="table-expandable-nested-table-node4 table-expandable-nested-table-expandable-toggle4"
+          id="table-expandable-nested-table-expandable-toggle4"
+          aria-label="Details"
+          aria-controls="table-expandable-nested-table-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">
+        <input
+          type="checkbox"
+          name="table-expandable-nested-table-checkrow4"
+          aria-labelledby="table-expandable-nested-table-node4"
+        />
+      </td>
+      <th role="columnheader" data-label="Repository name">
+        <div>
+          <div id="table-expandable-nested-table-node4">Node 4</div>
+          <a href="#">siemur/test-space</a>
+        </div>
+      </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="table-expandable-nested-table-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="table-expandable-nested-table-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">
+      <td
+        class="pf-m-no-padding"
+        role="cell"
+        colspan="7"
+        id="table-expandable-nested-table-content4"
+      >
+        <div
+          class="pf-c-table__expandable-row-content"
+        >Expandable row content has no padding.</div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+```
 Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.pf-c-table__expandable-row-content`. For no padding add `.pf-m-no-padding` to `.pf-c-table__expandable-row` > `<td>`
 ### Expandable accessibility