@patternfly/patternfly 4.195.0 → 4.196.2

package/docs/components/Label/examples/Label.md

@@ -580,6 +580,88 @@ cssPrefix: pf-c-label
   </button>
 </span>
 
+<br />
+<br />
+
+<span class="pf-c-label pf-m-gold">
+  <span class="pf-c-label__content">Gold</span>
+</span>
+
+<span class="pf-c-label pf-m-gold">
+  <span class="pf-c-label__content">
+    <span class="pf-c-label__icon">
+      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+    </span>
+    Gold icon
+  </span>
+</span>
+
+<span class="pf-c-label pf-m-gold">
+  <span class="pf-c-label__content">Gold removable</span>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    id="gold-removable-button"
+    aria-label="Remove"
+    aria-labelledby="gold-removable-button gold-removable-text"
+  >
+    <i class="fas fa-times" aria-hidden="true"></i>
+  </button>
+</span>
+
+<span class="pf-c-label pf-m-gold">
+  <span class="pf-c-label__content">
+    <span class="pf-c-label__icon">
+      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+    </span>
+    Gold icon removable
+  </span>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    id="gold-icon-removable-button"
+    aria-label="Remove"
+    aria-labelledby="gold-icon-removable-button gold-icon-removable-text"
+  >
+    <i class="fas fa-times" aria-hidden="true"></i>
+  </button>
+</span>
+
+<span class="pf-c-label pf-m-gold">
+  <a class="pf-c-label__content" href="#">Gold link</a>
+</span>
+
+<span class="pf-c-label pf-m-gold">
+  <a class="pf-c-label__content" href="#">Gold link removable</a>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    id="gold-link-removable-button"
+    aria-label="Remove"
+    aria-labelledby="gold-link-removable-button gold-link-removable-text"
+  >
+    <i class="fas fa-times" aria-hidden="true"></i>
+  </button>
+</span>
+
+<span class="pf-c-label pf-m-gold">
+  <span class="pf-c-label__content">
+    <span class="pf-c-label__icon">
+      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+    </span>
+    <span class="pf-c-label__text">Gold label with icon that truncates</span>
+  </span>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    id="gold-truncate-button"
+    aria-label="Remove"
+    aria-labelledby="gold-truncate-button gold-truncate-text"
+  >
+    <i class="fas fa-times" aria-hidden="true"></i>
+  </button>
+</span>
+
 ```
 
 ### Outline
@@ -1030,6 +1112,70 @@ cssPrefix: pf-c-label
   </button>
 </span>
 
+<br />
+<br />
+
+<span class="pf-c-label pf-m-gold pf-m-outline">
+  <span class="pf-c-label__content">Gold</span>
+</span>
+
+<span class="pf-c-label pf-m-gold pf-m-outline">
+  <span class="pf-c-label__content">
+    <span class="pf-c-label__icon">
+      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+    </span>
+    Gold icon
+  </span>
+</span>
+
+<span class="pf-c-label pf-m-gold pf-m-outline">
+  <span class="pf-c-label__content">Gold removable</span>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    id="gold-outline-removable-button"
+    aria-label="Remove"
+    aria-labelledby="gold-outline-removable-button gold-outline-removable-text"
+  >
+    <i class="fas fa-times" aria-hidden="true"></i>
+  </button>
+</span>
+
+<span class="pf-c-label pf-m-gold pf-m-outline">
+  <span class="pf-c-label__content">
+    <span class="pf-c-label__icon">
+      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+    </span>
+    Gold icon removable
+  </span>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    id="gold-outline-icon-removable-button"
+    aria-label="Remove"
+    aria-labelledby="gold-outline-icon-removable-button gold-outline-icon-removable-text"
+  >
+    <i class="fas fa-times" aria-hidden="true"></i>
+  </button>
+</span>
+
+<span class="pf-c-label pf-m-gold pf-m-outline">
+  <a class="pf-c-label__content" href="#">Gold link</a>
+</span>
+
+<span class="pf-c-label pf-m-gold pf-m-outline">
+  <a class="pf-c-label__content" href="#">Gold link removable</a>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    id="gold-outline-link-removable-button"
+    aria-label="Remove"
+    aria-labelledby="gold-outline-link-removable-button gold-outline-link-removable-text"
+  >
+    <i class="fas fa-times" aria-hidden="true"></i>
+  </button>
+</span>
+
 ```
 
 ### Compact
@@ -1238,5 +1384,6 @@ This style of label is used to add new labels to a label group.
 | `.pf-m-red`                  | `.pf-c-label`               | Modifies the label to have red colored styling.                                                                                                                                                                          |
 | `.pf-m-purple`               | `.pf-c-label`               | Modifies the label to have purple colored styling.                                                                                                                                                                       |
 | `.pf-m-cyan`                 | `.pf-c-label`               | Modifies the label to have cyan colored styling.                                                                                                                                                                         |
+| `.pf-m-gold`                 | `.pf-c-label`               | Modifies the label to have gold colored styling.                                                                                                                                                                         |
 | `.pf-m-editable`             | `.pf-c-label`               | Modifies label for editable styles.                                                                                                                                                                                      |
 | `.pf-m-editable-active`      | `.pf-c-label.pf-m-editable` | Modifies editable label for active styles.                                                                                                                                                                               |

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

package/docs/demos/Table/examples/Table.css

@@ -0,0 +1,3 @@
+.table-demo-icon {
+  width: 36px;
+}