@patternfly/patternfly 4.160.1 → 4.162.2

package/components/Table/table.scss

@@ -453,10 +453,16 @@
       }
 
       th,
-      td {
+      td,
+      input {
         vertical-align: middle;
       }
 
+      .pf-c-table__check label {
+        display: flex;
+        align-items: center;
+      }
+
       tr:not(:first-child) {
         th,
         td {
@@ -515,7 +521,7 @@
 
     // Check table cell
     .pf-c-table__check {
-      > input {
+      input {
         margin-top: var(--pf-c-table__check--input--MarginTop);
         vertical-align: top;
       }
@@ -902,9 +908,16 @@
 .pf-c-table__check {
   --pf-c-table--cell--FontSize: var(--pf-c-table__check--input--FontSize);
 
-  > input:not([disabled]) {
+  label:not([disabled]),
+  input:not([disabled]) {
     cursor: pointer;
   }
+
+  label {
+    display: block;
+    padding: inherit;
+    margin: calc(var(--pf-c-table--cell--PaddingTop) * -1) calc(var(--pf-c-table--cell--PaddingRight) * -1) calc(var(--pf-c-table--cell--PaddingBottom) * -1) calc(var(--pf-c-table--cell--PaddingLeft) * -1);
+  }
 }
 
 // Favorite body cell

package/components/_all.scss

@@ -1,88 +1,88 @@
-@import "./AboutModalBox/about-modal-box.scss";
-@import "./Accordion/accordion.scss";
-@import "./ActionList/action-list.scss";
-@import "./Alert/alert.scss";
-@import "./AlertGroup/alert-group.scss";
-@import "./AppLauncher/app-launcher.scss";
-@import "./Avatar/avatar.scss";
-@import "./Backdrop/backdrop.scss";
-@import "./BackgroundImage/background-image.scss";
-@import "./BackToTop/back-to-top.scss";
-@import "./Badge/badge.scss";
-@import "./Banner/banner.scss";
-@import "./Brand/brand.scss";
-@import "./Breadcrumb/breadcrumb.scss";
-@import "./Button/button.scss";
-@import "./CalendarMonth/calendar-month.scss";
-@import "./Card/card.scss";
-@import "./Check/check.scss";
-@import "./Chip/chip.scss";
-@import "./ChipGroup/chip-group.scss";
-@import "./ClipboardCopy/clipboard-copy.scss";
-@import "./CodeBlock/code-block.scss";
-@import "./CodeEditor/code-editor.scss";
-@import "./Content/content.scss";
-@import "./ContextSelector/context-selector.scss";
-@import "./DataList/data-list.scss";
-@import "./DescriptionList/description-list.scss";
-@import "./DragDrop/drag-drop.scss";
-@import "./DualListSelector/dual-list-selector.scss";
-@import "./Toolbar/toolbar.scss";
-@import "./DatePicker/date-picker.scss";
-@import "./Divider/divider.scss";
-@import "./Drawer/drawer.scss";
-@import "./Dropdown/dropdown.scss";
-@import "./EmptyState/empty-state.scss";
-@import "./ExpandableSection/expandable-section.scss";
-@import "./FileUpload/file-upload.scss";
-@import "./Form/form.scss";
-@import "./FormControl/form-control.scss";
-@import "./Hint/hint.scss";
-@import "./HelperText/helper-text.scss";
-@import "./InlineEdit/inline-edit.scss";
-@import "./InputGroup/input-group.scss";
-@import "./JumpLinks/jump-links.scss";
-@import "./Label/label.scss";
-@import "./LabelGroup/label-group.scss";
-@import "./List/list.scss";
-@import "./LogViewer/log-viewer.scss";
-@import "./Login/login.scss";
-@import "./Masthead/masthead.scss";
-@import "./Menu/menu.scss";
-@import "./MenuToggle/menu-toggle.scss";
-@import "./ModalBox/modal-box.scss";
-@import "./Nav/nav.scss";
-@import "./NotificationBadge/notification-badge.scss";
-@import "./NotificationDrawer/notification-drawer.scss";
-@import "./OptionsMenu/options-menu.scss";
-@import "./OverflowMenu/overflow-menu.scss";
-@import "./Page/page.scss";
-@import "./Pagination/pagination.scss";
-@import "./Panel/panel.scss";
-@import "./Popover/popover.scss";
-@import "./Progress/progress.scss";
-@import "./ProgressStepper/progress-stepper.scss";
-@import "./Radio/radio.scss";
-@import "./SearchInput/search-input.scss";
-@import "./Select/select.scss";
-@import "./Sidebar/sidebar.scss";
-@import "./SimpleList/simple-list.scss";
-@import "./Skeleton/skeleton.scss";
-@import "./SkipToContent/skip-to-content.scss";
-@import "./Slider/slider.scss";
-@import "./Spinner/spinner.scss";
-@import "./Switch/switch.scss";
-@import "./TabContent/tab-content.scss";
-@import "./Table/table-grid.scss";
-@import "./Table/table.scss";
-@import "./Table/table-scrollable.scss";
-@import "./Table/table-tree-view.scss";
-@import "./Tabs/tabs.scss";
-@import "./TextInputGroup/text-input-group.scss";
-@import "./Tile/tile.scss";
-@import "./Title/title.scss";
-@import "./ToggleGroup/toggle-group.scss";
-@import "./Tooltip/tooltip.scss";
-@import "./NumberInput/number-input.scss";
-@import "./TreeView/tree-view.scss";
-@import "./Wizard/wizard.scss";
+@import "./AboutModalBox/about-modal-box";
+@import "./Accordion/accordion";
+@import "./ActionList/action-list";
+@import "./Alert/alert";
+@import "./AlertGroup/alert-group";
+@import "./AppLauncher/app-launcher";
+@import "./Avatar/avatar";
+@import "./Backdrop/backdrop";
+@import "./BackgroundImage/background-image";
+@import "./BackToTop/back-to-top";
+@import "./Badge/badge";
+@import "./Banner/banner";
+@import "./Brand/brand";
+@import "./Breadcrumb/breadcrumb";
+@import "./Button/button";
+@import "./CalendarMonth/calendar-month";
+@import "./Card/card";
+@import "./Check/check";
+@import "./Chip/chip";
+@import "./ChipGroup/chip-group";
+@import "./ClipboardCopy/clipboard-copy";
+@import "./CodeBlock/code-block";
+@import "./CodeEditor/code-editor";
+@import "./Content/content";
+@import "./ContextSelector/context-selector";
+@import "./DataList/data-list";
+@import "./DescriptionList/description-list";
+@import "./DragDrop/drag-drop";
+@import "./DualListSelector/dual-list-selector";
+@import "./Toolbar/toolbar";
+@import "./DatePicker/date-picker";
+@import "./Divider/divider";
+@import "./Drawer/drawer";
+@import "./Dropdown/dropdown";
+@import "./EmptyState/empty-state";
+@import "./ExpandableSection/expandable-section";
+@import "./FileUpload/file-upload";
+@import "./Form/form";
+@import "./FormControl/form-control";
+@import "./Hint/hint";
+@import "./HelperText/helper-text";
+@import "./InlineEdit/inline-edit";
+@import "./InputGroup/input-group";
+@import "./JumpLinks/jump-links";
+@import "./Label/label";
+@import "./LabelGroup/label-group";
+@import "./List/list";
+@import "./LogViewer/log-viewer";
+@import "./Login/login";
+@import "./Masthead/masthead";
+@import "./Menu/menu";
+@import "./MenuToggle/menu-toggle";
+@import "./ModalBox/modal-box";
+@import "./Nav/nav";
+@import "./NotificationBadge/notification-badge";
+@import "./NotificationDrawer/notification-drawer";
+@import "./OptionsMenu/options-menu";
+@import "./OverflowMenu/overflow-menu";
+@import "./Page/page";
+@import "./Pagination/pagination";
+@import "./Panel/panel";
+@import "./Popover/popover";
+@import "./Progress/progress";
+@import "./ProgressStepper/progress-stepper";
+@import "./Radio/radio";
+@import "./SearchInput/search-input";
+@import "./Select/select";
+@import "./Sidebar/sidebar";
+@import "./SimpleList/simple-list";
+@import "./Skeleton/skeleton";
+@import "./SkipToContent/skip-to-content";
+@import "./Slider/slider";
+@import "./Spinner/spinner";
+@import "./Switch/switch";
+@import "./TabContent/tab-content";
+@import "./Table/table-grid";
+@import "./Table/table";
+@import "./Table/table-scrollable";
+@import "./Table/table-tree-view";
+@import "./Tabs/tabs";
+@import "./TextInputGroup/text-input-group";
+@import "./Tile/tile";
+@import "./Title/title";
+@import "./ToggleGroup/toggle-group";
+@import "./Tooltip/tooltip";
+@import "./NumberInput/number-input";
+@import "./TreeView/tree-view";
+@import "./Wizard/wizard";

package/docs/components/DescriptionList/examples/DescriptionList.md

@@ -599,6 +599,179 @@ cssPrefix: pf-c-description-list
 
 ```
 
+### Column fill
+
+```html
+<dl class="pf-c-description-list pf-m-fill-columns">
+  <div class="pf-c-description-list__group">
+    <dt class="pf-c-description-list__term">
+      <span class="pf-c-description-list__text">Name</span>
+    </dt>
+    <dd class="pf-c-description-list__description">
+      <div class="pf-c-description-list__text">example</div>
+    </dd>
+  </div>
+  <div class="pf-c-description-list__group">
+    <dt class="pf-c-description-list__term">
+      <span class="pf-c-description-list__text">Namespace</span>
+    </dt>
+    <dd class="pf-c-description-list__description">
+      <div class="pf-c-description-list__text">
+        <a href="#">mary-test</a>
+      </div>
+    </dd>
+  </div>
+  <div class="pf-c-description-list__group">
+    <dt class="pf-c-description-list__term">
+      <span class="pf-c-description-list__text">Labels</span>
+    </dt>
+    <dd class="pf-c-description-list__description">
+      <div class="pf-c-description-list__text">example</div>
+    </dd>
+  </div>
+  <div class="pf-c-description-list__group">
+    <dt class="pf-c-description-list__term">
+      <span class="pf-c-description-list__text">Pod selector</span>
+    </dt>
+    <dd class="pf-c-description-list__description">
+      <div class="pf-c-description-list__text">
+        <button class="pf-c-button pf-m-link pf-m-inline" type="button">
+          <span class="pf-c-button__icon pf-m-start">
+            <i class="fas fa-plus-circle" aria-hidden="true"></i>
+          </span>
+          app=MyApp
+        </button>
+      </div>
+    </dd>
+  </div>
+  <div class="pf-c-description-list__group">
+    <dt class="pf-c-description-list__term">
+      <span class="pf-c-description-list__text">Annotation</span>
+    </dt>
+    <dd class="pf-c-description-list__description">
+      <div class="pf-c-description-list__text">2 Annotations</div>
+    </dd>
+  </div>
+</dl>
+
+```
+
+### Column fill, horizontal
+
+```html
+<dl class="pf-c-description-list pf-m-fill-columns pf-m-horizontal">
+  <div class="pf-c-description-list__group">
+    <dt class="pf-c-description-list__term">
+      <span class="pf-c-description-list__text">Name</span>
+    </dt>
+    <dd class="pf-c-description-list__description">
+      <div class="pf-c-description-list__text">example</div>
+    </dd>
+  </div>
+  <div class="pf-c-description-list__group">
+    <dt class="pf-c-description-list__term">
+      <span class="pf-c-description-list__text">Namespace</span>
+    </dt>
+    <dd class="pf-c-description-list__description">
+      <div class="pf-c-description-list__text">
+        <a href="#">mary-test</a>
+      </div>
+    </dd>
+  </div>
+  <div class="pf-c-description-list__group">
+    <dt class="pf-c-description-list__term">
+      <span class="pf-c-description-list__text">Labels</span>
+    </dt>
+    <dd class="pf-c-description-list__description">
+      <div class="pf-c-description-list__text">example</div>
+    </dd>
+  </div>
+  <div class="pf-c-description-list__group">
+    <dt class="pf-c-description-list__term">
+      <span class="pf-c-description-list__text">Pod selector</span>
+    </dt>
+    <dd class="pf-c-description-list__description">
+      <div class="pf-c-description-list__text">
+        <button class="pf-c-button pf-m-link pf-m-inline" type="button">
+          <span class="pf-c-button__icon pf-m-start">
+            <i class="fas fa-plus-circle" aria-hidden="true"></i>
+          </span>
+          app=MyApp
+        </button>
+      </div>
+    </dd>
+  </div>
+  <div class="pf-c-description-list__group">
+    <dt class="pf-c-description-list__term">
+      <span class="pf-c-description-list__text">Annotation</span>
+    </dt>
+    <dd class="pf-c-description-list__description">
+      <div class="pf-c-description-list__text">2 Annotations</div>
+    </dd>
+  </div>
+</dl>
+
+```
+
+### Column fill, horizontal, multi-column
+
+```html
+<dl
+  class="pf-c-description-list pf-m-fill-columns pf-m-horizontal pf-m-2-col pf-m-3-col-on-lg"
+>
+  <div class="pf-c-description-list__group">
+    <dt class="pf-c-description-list__term">
+      <span class="pf-c-description-list__text">Name</span>
+    </dt>
+    <dd class="pf-c-description-list__description">
+      <div class="pf-c-description-list__text">example</div>
+    </dd>
+  </div>
+  <div class="pf-c-description-list__group">
+    <dt class="pf-c-description-list__term">
+      <span class="pf-c-description-list__text">Namespace</span>
+    </dt>
+    <dd class="pf-c-description-list__description">
+      <div class="pf-c-description-list__text">
+        <a href="#">mary-test</a>
+      </div>
+    </dd>
+  </div>
+  <div class="pf-c-description-list__group">
+    <dt class="pf-c-description-list__term">
+      <span class="pf-c-description-list__text">Labels</span>
+    </dt>
+    <dd class="pf-c-description-list__description">
+      <div class="pf-c-description-list__text">example</div>
+    </dd>
+  </div>
+  <div class="pf-c-description-list__group">
+    <dt class="pf-c-description-list__term">
+      <span class="pf-c-description-list__text">Pod selector</span>
+    </dt>
+    <dd class="pf-c-description-list__description">
+      <div class="pf-c-description-list__text">
+        <button class="pf-c-button pf-m-link pf-m-inline" type="button">
+          <span class="pf-c-button__icon pf-m-start">
+            <i class="fas fa-plus-circle" aria-hidden="true"></i>
+          </span>
+          app=MyApp
+        </button>
+      </div>
+    </dd>
+  </div>
+  <div class="pf-c-description-list__group">
+    <dt class="pf-c-description-list__term">
+      <span class="pf-c-description-list__text">Annotation</span>
+    </dt>
+    <dd class="pf-c-description-list__description">
+      <div class="pf-c-description-list__text">2 Annotations</div>
+    </dd>
+  </div>
+</dl>
+
+```
+
 ## Auto fit
 
 ### Auto-fit basic
@@ -1162,6 +1335,7 @@ cssPrefix: pf-c-description-list
 | `.pf-m-help-text`                                                               | `.pf-c-description-list__text`           | Indicates there is more information available for the description list component term text.                                      |
 | `.pf-m-horizontal{-on-[sm, md, lg, xl, 2xl]}`                                   | `.pf-c-description-list`                 | Modifies the description list component term and description pair to a horizontal layout.                                        |
 | `.pf-m-vertical{-on-[sm, md, lg, xl, 2xl]}`                                     | `.pf-c-description-list`                 | Modifies the description list component term and description pair to a vertical layout.                                          |
+| `.pf-m-fill-columns`                                                            | `.pf-c-description-list`                 | Modifies the description list groups to fill columns .                                                                           |
 | `.pf-m-auto-column-widths`                                                      | `.pf-c-description-list`                 | Modifies the description list to format automatically.                                                                           |
 | `.pf-m-inline-grid`                                                             | `.pf-c-description-list`                 | Modifies the description list display to inline-grid.                                                                            |
 | `.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}`                                  | `.pf-c-description-list`                 | Modifies the description list number of columns.                                                                                 |

package/docs/components/Dropdown/examples/Dropdown.md

@@ -1434,6 +1434,51 @@ The dropdown panel is provided for flexibility in allowing various content withi
     </li>
   </ul>
 </div>
+<div class="pf-c-dropdown">
+  <button
+    class="pf-c-dropdown__toggle pf-m-primary"
+    id="dropdown-primary-toggle-disabled-button"
+    aria-expanded="false"
+    type="button"
+    disabled
+  >
+    <span class="pf-c-dropdown__toggle-text">Disabled</span>
+    <span class="pf-c-dropdown__toggle-icon">
+      <i class="fas fa-caret-down" aria-hidden="true"></i>
+    </span>
+  </button>
+  <ul
+    class="pf-c-dropdown__menu"
+    aria-labelledby="dropdown-primary-toggle-disabled-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>
 
 ```
 
@@ -1527,6 +1572,51 @@ The dropdown panel is provided for flexibility in allowing various content withi
     </li>
   </ul>
 </div>
+<div class="pf-c-dropdown">
+  <button
+    class="pf-c-dropdown__toggle pf-m-secondary"
+    id="dropdown-secondary-toggle-disabled-button"
+    aria-expanded="false"
+    type="button"
+    disabled
+  >
+    <span class="pf-c-dropdown__toggle-text">Disabled</span>
+    <span class="pf-c-dropdown__toggle-icon">
+      <i class="fas fa-caret-down" aria-hidden="true"></i>
+    </span>
+  </button>
+  <ul
+    class="pf-c-dropdown__menu"
+    aria-labelledby="dropdown-secondary-toggle-disabled-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>
 
 ```