npm - @patternfly/patternfly - Versions diffs - 4.176.3 → 4.179.0 - Mend

@patternfly/patternfly 4.176.3 → 4.179.0

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 (168) hide show

package/components/ToggleGroup/themes/dark/toggle-group.scss ADDED Viewed

@@ -0,0 +1,9 @@
+@mixin toggle-group() {
+  .pf-c-toggle-group {
+    --pf-c-toggle-group__button--hover--BackgroundColor: var(--pf-global--palette--black-700);
+    --pf-c-toggle-group__button--focus--BackgroundColor: var(--pf-global--palette--black-700);
+    --pf-c-toggle-group__button--disabled--BackgroundColor: var(--pf-global--palette--black-600);
+    --pf-c-toggle-group__button--disabled--Color: var(--pf-global--palette--black-100);
+    --pf-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-global--primary-color--300);
+  }
+}

package/components/Tooltip/themes/dark/tooltip.css ADDED Viewed

File without changes

package/components/Tooltip/themes/dark/tooltip.scss ADDED Viewed

@@ -0,0 +1,6 @@
+@mixin tooltip() {
+  .pf-c-tooltip {
+    --pf-c-tooltip--BoxShadow: none;
+    --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  }
+}

package/components/TreeView/themes/dark/tree-view.css ADDED Viewed

File without changes

package/components/TreeView/themes/dark/tree-view.scss ADDED Viewed

@@ -0,0 +1,6 @@
+@mixin tree-view() {
+  .pf-c-tree-view {
+    --pf-c-tree-view__node--hover--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-tree-view__node--focus--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  }
+}

package/components/Wizard/themes/dark/wizard.css ADDED Viewed

File without changes

package/components/Wizard/themes/dark/wizard.scss ADDED Viewed

@@ -0,0 +1,12 @@
+@mixin wizard() {
+  .pf-c-wizard {
+    --pf-c-wizard__nav-link--m-disabled--Color: var(--pf-global--disabled-color--300);
+    --pf-c-wizard__nav-link--m-disabled--before--Color: var(--pf-global--disabled-color--300);
+    --pf-c-wizard__nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-wizard__outer-wrap--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  }
+  .pf-c-wizard__header {
+    @include pf-t-dark;
+  }
+}

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

@@ -39,6 +39,50 @@ cssPrefix: pf-c-avatar
 ```
+### Small
+```html
+<img
+  class="pf-c-avatar pf-m-sm"
+  src="/assets/images/img_avatar-light.svg"
+  alt="Avatar image small"
+/>
+```
+### Medium
+```html
+<img
+  class="pf-c-avatar pf-m-md"
+  src="/assets/images/img_avatar-light.svg"
+  alt="Avatar image medium"
+/>
+```
+### Large
+```html
+<img
+  class="pf-c-avatar pf-m-lg"
+  src="/assets/images/img_avatar-light.svg"
+  alt="Avatar image large"
+/>
+```
+### Extra large
+```html
+<img
+  class="pf-c-avatar pf-m-xl"
+  src="/assets/images/img_avatar-light.svg"
+  alt="Avatar image extra large"
+/>
+```
 ## Documentation
 ### Overview
@@ -53,8 +97,12 @@ The avatar component provides a default SVG icon. If an image is used it should
 ### Usage
-| Class          | Applied to     | Outcome                                                |
-| -------------- | -------------- | ------------------------------------------------------ |
-| `.pf-c-avatar` | `<img>`        | Initiates an avatar image. **Required**                |
-| `.pf-m-light`  | `.pf-c-avatar` | Modifies an avatar for use against a light background. |
-| `.pf-m-dark`   | `.pf-c-avatar` | Modifies an avatar for use against a dark background.  |
+| Class                        | Applied to     | Outcome                                                                                                                                                                             |
+| ---------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.pf-c-avatar`               | `<img>`        | Initiates an avatar image. **Required**                                                                                                                                             |
+| `.pf-m-light`                | `.pf-c-avatar` | Modifies an avatar for use against a light background.                                                                                                                              |
+| `.pf-m-dark`                 | `.pf-c-avatar` | Modifies an avatar for use against a dark background.                                                                                                                               |
+| `.pf-m-sm{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be small on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                      |
+| `.pf-m-md{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be medium on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** This is the default size. |
+| `.pf-m-lg{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                      |
+| `.pf-m-xl{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be extra large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                |

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

@@ -56,9 +56,9 @@ Simple brand component.
 ### Usage
-| Class                                              | Applied to         | Outcome                                 |
-| -------------------------------------------------- | ------------------ | --------------------------------------- |
-| `.pf-c-brand`                                      | `<img>, <picture>` | Initiates a brand image. **Required**   |
-| `.pf-m-picture`                                    | `.pf-c-brand`      | Modifies a brand image to a picture.    |
-| `--pf-c-brand--Width{-on-[breakpoint]}: {width}`   | `.pf-c-brand`      | Modifies the width value of a picture.  |
-| `--pf-c-brand--Height{-on-[breakpoint]}: {height}` | `.pf-c-brand`      | Modifies the height value of a picture. |
+| Class                                              | Applied to         | Outcome                                                                                                                                             |
+| -------------------------------------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.pf-c-brand`                                      | `<img>, <picture>` | Initiates a brand image. **Required**                                                                                                               |
+| `.pf-m-picture`                                    | `.pf-c-brand`      | Modifies a brand image to a picture.                                                                                                                |
+| `--pf-c-brand--Width{-on-[breakpoint]}: {width}`   | `.pf-c-brand`      | Modifies the width value of a picture on optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).  |
+| `--pf-c-brand--Height{-on-[breakpoint]}: {height}` | `.pf-c-brand`      | Modifies the height value of a picture on optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |

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

@@ -744,7 +744,7 @@ cssPrefix: pf-c-calendar-month
           >28</button>
         </td>
         <td
-          class="pf-c-calendar-month__dates-cell pf-m-in-range pf-m-end-range"
+          class="pf-c-calendar-month__dates-cell pf-m-selected pf-m-in-range pf-m-end-range"
         >
           <button
             class="pf-c-calendar-month__date pf-m-hover"
@@ -1001,7 +1001,7 @@ cssPrefix: pf-c-calendar-month
           >10</button>
         </td>
         <td
-          class="pf-c-calendar-month__dates-cell pf-m-start-range pf-m-in-range"
+          class="pf-c-calendar-month__dates-cell pf-m-selected pf-m-start-range pf-m-in-range"
         >
           <button
             class="pf-c-calendar-month__date pf-m-focus"

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

@@ -33,6 +33,7 @@ cssPrefix: pf-c-code-editor
         <i class="fas fa-upload"></i>
       </button>
     </div>
+    <div class="pf-c-code-editor__header-main"></div>
     <div class="pf-c-code-editor__tab">
       <span class="pf-c-code-editor__tab-icon">
         <i class="fas fa-code"></i>
@@ -80,6 +81,7 @@ cssPrefix: pf-c-code-editor
         <i class="fas fa-upload"></i>
       </button>
     </div>
+    <div class="pf-c-code-editor__header-main"></div>
     <div class="pf-c-code-editor__tab">
       <span class="pf-c-code-editor__tab-icon">
         <i class="fas fa-code"></i>
@@ -103,6 +105,7 @@ cssPrefix: pf-c-code-editor
 ```html
 <div class="pf-c-code-editor">
   <div class="pf-c-code-editor__header">
+    <div class="pf-c-code-editor__header-main"></div>
     <div class="pf-c-code-editor__tab">
       <span class="pf-c-code-editor__tab-icon">
         <i class="fas fa-code"></i>
@@ -136,6 +139,7 @@ cssPrefix: pf-c-code-editor
 ```html
 <div class="pf-c-code-editor">
   <div class="pf-c-code-editor__header">
+    <div class="pf-c-code-editor__header-main"></div>
     <div class="pf-c-code-editor__tab">
       <span class="pf-c-code-editor__tab-icon">
         <i class="fas fa-code"></i>
@@ -164,6 +168,61 @@ cssPrefix: pf-c-code-editor
 ```
+### With optional header content and keyboard shortcuts
+```html
+<div class="pf-c-code-editor">
+  <div class="pf-c-code-editor__header">
+    <div class="pf-c-code-editor__controls">
+      <button
+        class="pf-c-button pf-m-control"
+        type="button"
+        aria-label="Copy to clipboard"
+      >
+        <i class="fas fa-copy" aria-hidden="true"></i>
+      </button>
+      <button
+        class="pf-c-button pf-m-control"
+        type="button"
+        aria-label="Download code"
+      >
+        <i class="fas fa-download"></i>
+      </button>
+      <button
+        class="pf-c-button pf-m-control"
+        type="button"
+        aria-label="Upload code"
+      >
+        <i class="fas fa-upload"></i>
+      </button>
+    </div>
+    <div class="pf-c-code-editor__header-main">Header main content</div>
+    <div class="pf-c-code-editor__keyboard-shortcuts">
+      <button class="pf-c-button pf-m-link" type="button">
+        <span class="pf-c-button__icon pf-m-start">
+          <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
+        </span>
+        View shortcuts
+      </button>
+    </div>
+    <div class="pf-c-code-editor__tab">
+      <span class="pf-c-code-editor__tab-icon">
+        <i class="fas fa-code"></i>
+      </span>
+      <span class="pf-c-code-editor__tab-text">HTML</span>
+    </div>
+  </div>
+  <div class="pf-c-code-editor__main">
+    <code class="pf-c-code-editor__code">
+      <pre class="pf-c-code-editor__code-pre">
+                code goes here
+      </pre>
+    </code>
+  </div>
+</div>
+```
 ## Documentation
 ### Overview
@@ -175,13 +234,15 @@ cssPrefix: pf-c-code-editor
 ### Usage
-| Class                         | Applied to | Outcome                                                                                   |
-| ----------------------------- | ---------- | ----------------------------------------------------------------------------------------- |
-| `.pf-c-code-editor`           | `<div>`    | Initiates the code editor component. **Required**                                         |
-| `.pf-c-code-editor__header`   | `<div>`    | Initiates the code editor header used for the controls and tab elements. **Required**     |
-| `.pf-c-code-editor__main`     | `<div>`    | Initiates the main container for a code editor e.g. Monaco **Required**                   |
-| `.pf-c-code-editor__code`     | `<div>`    | Initiates the container for code without a JS code editor. Comes with PatternFly styling. |
-| `.pf-c-code-editor__controls` | `<div>`    | Initiates the code editor controls.                                                       |
-| `.pf-c-code-editor__tab`      | `<div>`    | Initiates the code editor tab.                                                            |
-| `.pf-c-code-editor__tab-text` | `<span>`   | Initiates the code editor tab text.                                                       |
-| `.pf-c-code-editor__tab-icon` | `<span>`   | Initiates the code editor tab icon.                                                       |
+| Class                                   | Applied to | Outcome                                                                                   |
+| --------------------------------------- | ---------- | ----------------------------------------------------------------------------------------- |
+| `.pf-c-code-editor`                     | `<div>`    | Initiates the code editor component. **Required**                                         |
+| `.pf-c-code-editor__header`             | `<div>`    | Initiates the code editor header used for the controls and tab elements. **Required**     |
+| `.pf-c-code-editor__main`               | `<div>`    | Initiates the main container for a code editor e.g. Monaco **Required**                   |
+| `.pf-c-code-editor__code`               | `<div>`    | Initiates the container for code without a JS code editor. Comes with PatternFly styling. |
+| `.pf-c-code-editor__controls`           | `<div>`    | Initiates the code editor controls.                                                       |
+| `.pf-c-code-editor__header-main`        | `<div>`    | Initiates the code editor header content area.                                            |
+| `.pf-c-code-editor__keyboard-shortcuts` | `<div>`    | Initiates the code editor header keyboard shortcuts area.                                 |
+| `.pf-c-code-editor__tab`                | `<div>`    | Initiates the code editor tab.                                                            |
+| `.pf-c-code-editor__tab-text`           | `<span>`   | Initiates the code editor tab text.                                                       |
+| `.pf-c-code-editor__tab-icon`           | `<span>`   | Initiates the code editor tab icon.                                                       |

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

@@ -372,14 +372,14 @@ When a list item includes more than one block of content, it can be difficult fo
 ### Usage
-| Class                             | Applied to                     | Outcome                                                                                                        |
-| --------------------------------- | ------------------------------ | -------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-data-list__item-control`   | `<div>`                        | Initiates a container for data list controls. For example, add `.pf-c-data-list__check` here. **Required**     |
-| `.pf-c-data-list__item-action`    | `<div>`                        | Initiates a container for the data list actions. For example, add `.pf-c-data-list__action` here. **Required** |
-| `.pf-c-data-list__check`          | `<div>`                        | Initiates a data list check cell. **Required**                                                                 |
-| `.pf-c-data-list__action`         | `<div>`                        | Initiates a data list action button cell. **Required**                                                         |
-| `.pf-m-hidden{-on-[breakpoint]}`  | `.pf-c-data-list__item-action` | Hides an actions container at a given breakpoint, or hides it at all breakpoints with `.pf-m-hidden`.          |
-| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-data-list__item-action` | Shows an actions container at a given breakpoint.                                                              |
+| Class                             | Applied to                     | Outcome                                                                                                                                                                                     |
+| --------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.pf-c-data-list__item-control`   | `<div>`                        | Initiates a container for data list controls. For example, add `.pf-c-data-list__check` here. **Required**                                                                                  |
+| `.pf-c-data-list__item-action`    | `<div>`                        | Initiates a container for the data list actions. For example, add `.pf-c-data-list__action` here. **Required**                                                                              |
+| `.pf-c-data-list__check`          | `<div>`                        | Initiates a data list check cell. **Required**                                                                                                                                              |
+| `.pf-c-data-list__action`         | `<div>`                        | Initiates a data list action button cell. **Required**                                                                                                                                      |
+| `.pf-m-hidden{-on-[breakpoint]}`  | `.pf-c-data-list__item-action` | Hides an actions container at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes), or hides it at all breakpoints with `.pf-m-hidden`. |
+| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-data-list__item-action` | Shows an actions container at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                     |
 ### Expandable
@@ -2622,6 +2622,6 @@ The DataList component provides a flexible alternative to the Table component, w
 ### Usage
-| Class                                      | Applied to        | Outcome                                                                                                                                                                                                                                                                                                                                                            |
-| ------------------------------------------ | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `.pf-m-grid{-[none, sm, md, lg, xl, 2xl]}` | `.pf-c-data-list` | Modifies the data list to switch to a grid layout at a specified breakpoint. `.pf-m-grid` will display the grid layout at all breakpoints. `.pf-m-grid-none` will display the desktop layout at all breakpoints. **Note:** Without a grid modifier, the data list will display the grid layout by default and switch to the desktop layout at a medium breakpoint. |
+| Class                                      | Applied to        | Outcome                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| ------------------------------------------ | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.pf-m-grid{-[none, sm, md, lg, xl, 2xl]}` | `.pf-c-data-list` | Modifies the data list to switch to a grid layout at a specified [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). `.pf-m-grid` will display the grid layout at all breakpoints. `.pf-m-grid-none` will display the desktop layout at all breakpoints. **Note:** Without a grid modifier, the data list will display the grid layout by default and switch to the desktop layout at a medium breakpoint. |

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

@@ -1264,25 +1264,25 @@ Column fill will modify the default placement of description list groups to fill
 ### Usage
-| Class                                                                           | Applied to                               | Outcome                                                                                                                          |
-| ------------------------------------------------------------------------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-description-list`                                                        | `<dl>`                                   | Initiates the description list component. **Required**                                                                           |
-| `.pf-c-description-list__group`                                                 | `<div>`                                  | Initiates a description list component group. **Required**                                                                       |
-| `.pf-c-description-list__term`                                                  | `<dt>`                                   | Initiates a description list component term. **Required**                                                                        |
-| `.pf-c-description-list__description`                                           | `<dd>`                                   | Initiates a description list component description. **Required**                                                                 |
-| `.pf-c-description-list__text`                                                  | `<span>`, `<div>`                        | Initiates a description list component text element. Use a `<span>` when a child of `.pf-c-description-list__term`. **Required** |
-| `.pf-c-description-list__term-icon`                                             | `<span>`                                 | Initiates a description list component term icon element.                                                                        |
-| `.pf-m-compact`                                                                 | `.pf-c-description-list`                 | Modifies the description list for compact horizontal and vertical spacing.                                                       |
-| `.pf-m-fluid`                                                                   | `.pf-c-description-list.pf-m-horizontal` | Modifies the description list term width to be fluid.                                                                            |
-| `.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 from top to bottom, instead of rows from left to right.                     |
-| `.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.                                                                                 |
-| `--pf-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}`  | `.pf-c-description-list`                 | Modifies the min value of the `grid-template-columns` declaration.                                                               |
-| `--pf-c-description-list__term--m-horizontal--width{-on-[breakpoint]}: {width}` | `.pf-c-description-list.pf-m-horizontal` | Modifies the value for `--pf-c-description-list--m-horizontal__term--width` declaration.                                         |
+| Class                                                                           | Applied to                               | Outcome                                                                                                                                                                                              |
+| ------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.pf-c-description-list`                                                        | `<dl>`                                   | Initiates the description list component. **Required**                                                                                                                                               |
+| `.pf-c-description-list__group`                                                 | `<div>`                                  | Initiates a description list component group. **Required**                                                                                                                                           |
+| `.pf-c-description-list__term`                                                  | `<dt>`                                   | Initiates a description list component term. **Required**                                                                                                                                            |
+| `.pf-c-description-list__description`                                           | `<dd>`                                   | Initiates a description list component description. **Required**                                                                                                                                     |
+| `.pf-c-description-list__text`                                                  | `<span>`, `<div>`                        | Initiates a description list component text element. Use a `<span>` when a child of `.pf-c-description-list__term`. **Required**                                                                     |
+| `.pf-c-description-list__term-icon`                                             | `<span>`                                 | Initiates a description list component term icon element.                                                                                                                                            |
+| `.pf-m-compact`                                                                 | `.pf-c-description-list`                 | Modifies the description list for compact horizontal and vertical spacing.                                                                                                                           |
+| `.pf-m-fluid`                                                                   | `.pf-c-description-list.pf-m-horizontal` | Modifies the description list term width to be fluid.                                                                                                                                                |
+| `.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 from top to bottom, instead of rows from left to right.                                                                                         |
+| `.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.                                                                                                                                                     |
+| `--pf-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}`  | `.pf-c-description-list`                 | Modifies the min value of the `grid-template-columns` declaration at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                       |
+| `--pf-c-description-list__term--m-horizontal--width{-on-[breakpoint]}: {width}` | `.pf-c-description-list.pf-m-horizontal` | Modifies the value for `--pf-c-description-list--m-horizontal__term--width` declaration at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
 <!-- | `.pf-m-order[0-12]{-on-[breakpoint]}` | `.pf-c-description-list__group` | Modifies the order of the flex layout element. |
 | `.pf-m-order-first{-on-[breakpoint]}` | `.pf-c-description-list__group` | Modifies the order of the flex layout element to -1. |

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

@@ -89,5 +89,5 @@ The divider renders as an `<hr>` by default. It is possible to make the divider
 | `.pf-c-divider`                                                           | `<hr>`, `<li>`, `<div>` | Defines the divider component.                                                                                                                                                    |
 | `.pf-m-vertical`                                                          | `.pf-c-divider`         | Modifies the divider component from horizontal to vertical. This modifier requires that the parent has an explicit or implicit height, or has a flex or grid based layout parent. |
 | `.pf-m-inset-{none, sm, md, lg, xl, 2xl, 3xl}{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-divider`         | Modifies divider padding/inset to visually match padding of other adjacent components.                                                                                            |
-| `.pf-m-hidden{-on-[breakpoint]}`                                          | `.pf-c-divider`         | Modifies a divider to be hidden, at optional breakpoint.                                                                                                                          |
-| `.pf-m-visible{-on-[breakpoint]}`                                         | `.pf-c-divider`         | Modifies a divider to be shown, at optional breakpoint.                                                                                                                           |
+| `.pf-m-hidden{-on-[breakpoint]}`                                          | `.pf-c-divider`         | Modifies a divider to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                     |
+| `.pf-m-visible{-on-[breakpoint]}`                                         | `.pf-c-divider`         | Modifies a divider to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                      |

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

@@ -717,30 +717,30 @@ cssPrefix: pf-c-drawer
 ### Usage
-| Class                                                     | Applied to                                                              | Outcome                                                                                                                                                                        |
-| --------------------------------------------------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `.pf-c-drawer`                                            | `<div>`                                                                 | Initiates the drawer container. **Required**                                                                                                                                   |
-| `.pf-c-drawer__section`                                   | `<div>`                                                                 | Initiates a drawer section area. This element can be used above or below `.pf-c-drawer__main` for titles, toolbars, footers, etc.                                              |
-| `.pf-c-drawer__main`                                      | `<div>`                                                                 | Initiates the drawer main area. **Required**                                                                                                                                   |
-| `.pf-c-drawer__content`                                   | `<div>`                                                                 | Initiates the drawer content container. **Required**                                                                                                                           |
-| `.pf-c-drawer__panel`                                     | `<aside>`                                                               | Initiates the drawer panel container. **Required**                                                                                                                             |
-| `.pf-c-drawer__panel-main`                                | `<div>`                                                                 | Initiates the drawer panel main container for resizable drawers only.                                                                                                          |
-| `.pf-c-drawer__body`                                      | `<div>`                                                                 | Initiates a drawer body container and is the child of `.pf-c-drawer__content`, `.pf-c-drawer__panel` and `.pf-c-drawer__panel-main`. **Required**                              |
-| `.pf-c-drawer__head`                                      | `<div>`                                                                 | Initiates a drawer head container. This container positions `.pf-c-drawer__actions`, if present.                                                                               |
-| `.pf-c-drawer__actions`                                   | `<div>`                                                                 | Identifies the drawer close button.                                                                                                                                            |
-| `.pf-c-drawer__close`                                     | `<div>`                                                                 | Identifies the drawer close button.                                                                                                                                            |
-| `.pf-m-panel-left`                                        | `.pf-c-drawer`                                                          | Modifies the drawer panel to expand from the left.                                                                                                                             |
-| `.pf-m-panel-bottom`                                      | `.pf-c-drawer`                                                          | Modifies the drawer panel to expand from the bottom. **Note:** percentage based panel sizes require the drawer component's parent element have an implicit or explicit height. |
-| `.pf-m-expanded`                                          | `.pf-c-drawer`                                                          | Modifies the drawer panel for the expanded state.                                                                                                                              |
-| `.pf-m-static{-on-[lg, xl, 2xl]}`                         | `.pf-c-drawer`                                                          | Modifies the drawer panel state to always show both content and panel.                                                                                                         |
-| `.pf-m-inline{-on-[lg, xl, 2xl]}`                         | `.pf-c-drawer`                                                          | Modifies the drawer so the content element and panel element are displayed side by side. `.pf-m-inline` used without a breakpoint will default to the `md` breakpoint.         |
-| `.pf-m-no-border`                                         | `.pf-c-drawer__panel`                                                   | Modifies the drawer panel border treatment to disable all border treatment.                                                                                                    |
-| `.pf-m-padding`                                           | `.pf-c-drawer__body`                                                    | Modifies the element to add padding.                                                                                                                                           |
-| `.pf-m-no-padding`                                        | `.pf-c-drawer__body`                                                    | Modifies the element to remove padding.                                                                                                                                        |
-| `.pf-m-no-background`                                     | `.pf-c-drawer__section`, `.pf-c-drawer__content`, `.pf-c-drawer__panel` | Modifies the drawer body/panel background color to transparent.                                                                                                                |
-| `.pf-m-light-200`                                         | `.pf-c-drawer__section`, `.pf-c-drawer__content`, `.pf-c-drawer__panel` | Modifies the drawer body/panel background color to light grey.                                                                                                                 |
-| `.pf-m-width-{25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-c-drawer__panel`                                                   | Modifies the drawer panel width.                                                                                                                                               |
-| `.pf-m-resizable`                                         | `.pf-c-drawer__panel`                                                   | Modifies the drawer panel to be resizable. Intended for use with the `.pf-c-drawer__splitter` element.                                                                         |
-| `--pf-c-drawer__panel--md--FlexBasis--min`                | `.pf-c-drawer__panel`                                                   | Defines the drawer panel minimum size.                                                                                                                                         |
-| `--pf-c-drawer__panel--md--FlexBasis`                     | `.pf-c-drawer__panel`                                                   | Defines the drawer panel size.                                                                                                                                                 |
-| `--pf-c-drawer__panel--md--FlexBasis--max`                | `.pf-c-drawer__panel`                                                   | Defines the drawer panel maximum size.                                                                                                                                         |
+| Class                                                     | Applied to                                                              | Outcome                                                                                                                                                                                                                                                     |
+| --------------------------------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.pf-c-drawer`                                            | `<div>`                                                                 | Initiates the drawer container. **Required**                                                                                                                                                                                                                |
+| `.pf-c-drawer__section`                                   | `<div>`                                                                 | Initiates a drawer section area. This element can be used above or below `.pf-c-drawer__main` for titles, toolbars, footers, etc.                                                                                                                           |
+| `.pf-c-drawer__main`                                      | `<div>`                                                                 | Initiates the drawer main area. **Required**                                                                                                                                                                                                                |
+| `.pf-c-drawer__content`                                   | `<div>`                                                                 | Initiates the drawer content container. **Required**                                                                                                                                                                                                        |
+| `.pf-c-drawer__panel`                                     | `<aside>`                                                               | Initiates the drawer panel container. **Required**                                                                                                                                                                                                          |
+| `.pf-c-drawer__panel-main`                                | `<div>`                                                                 | Initiates the drawer panel main container for resizable drawers only.                                                                                                                                                                                       |
+| `.pf-c-drawer__body`                                      | `<div>`                                                                 | Initiates a drawer body container and is the child of `.pf-c-drawer__content`, `.pf-c-drawer__panel` and `.pf-c-drawer__panel-main`. **Required**                                                                                                           |
+| `.pf-c-drawer__head`                                      | `<div>`                                                                 | Initiates a drawer head container. This container positions `.pf-c-drawer__actions`, if present.                                                                                                                                                            |
+| `.pf-c-drawer__actions`                                   | `<div>`                                                                 | Identifies the drawer close button.                                                                                                                                                                                                                         |
+| `.pf-c-drawer__close`                                     | `<div>`                                                                 | Identifies the drawer close button.                                                                                                                                                                                                                         |
+| `.pf-m-panel-left`                                        | `.pf-c-drawer`                                                          | Modifies the drawer panel to expand from the left.                                                                                                                                                                                                          |
+| `.pf-m-panel-bottom`                                      | `.pf-c-drawer`                                                          | Modifies the drawer panel to expand from the bottom. **Note:** percentage based panel sizes require the drawer component's parent element have an implicit or explicit height.                                                                              |
+| `.pf-m-expanded`                                          | `.pf-c-drawer`                                                          | Modifies the drawer panel for the expanded state.                                                                                                                                                                                                           |
+| `.pf-m-static{-on-[lg, xl, 2xl]}`                         | `.pf-c-drawer`                                                          | Modifies the drawer panel state to always show both content and panel at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                          |
+| `.pf-m-inline{-on-[lg, xl, 2xl]}`                         | `.pf-c-drawer`                                                          | Modifies the drawer so the content element and panel element are displayed side by side. `.pf-m-inline` used without a [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) will default to the `md` breakpoint. |
+| `.pf-m-no-border`                                         | `.pf-c-drawer__panel`                                                   | Modifies the drawer panel border treatment to disable all border treatment.                                                                                                                                                                                 |
+| `.pf-m-padding`                                           | `.pf-c-drawer__body`                                                    | Modifies the element to add padding.                                                                                                                                                                                                                        |
+| `.pf-m-no-padding`                                        | `.pf-c-drawer__body`                                                    | Modifies the element to remove padding.                                                                                                                                                                                                                     |
+| `.pf-m-no-background`                                     | `.pf-c-drawer__section`, `.pf-c-drawer__content`, `.pf-c-drawer__panel` | Modifies the drawer body/panel background color to transparent.                                                                                                                                                                                             |
+| `.pf-m-light-200`                                         | `.pf-c-drawer__section`, `.pf-c-drawer__content`, `.pf-c-drawer__panel` | Modifies the drawer body/panel background color to light grey.                                                                                                                                                                                              |
+| `.pf-m-width-{25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-c-drawer__panel`                                                   | Modifies the drawer panel width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                                                                |
+| `.pf-m-resizable`                                         | `.pf-c-drawer__panel`                                                   | Modifies the drawer panel to be resizable. Intended for use with the `.pf-c-drawer__splitter` element.                                                                                                                                                      |
+| `--pf-c-drawer__panel--md--FlexBasis--min`                | `.pf-c-drawer__panel`                                                   | Defines the drawer panel minimum size.                                                                                                                                                                                                                      |
+| `--pf-c-drawer__panel--md--FlexBasis`                     | `.pf-c-drawer__panel`                                                   | Defines the drawer panel size.                                                                                                                                                                                                                              |
+| `--pf-c-drawer__panel--md--FlexBasis--max`                | `.pf-c-drawer__panel`                                                   | Defines the drawer panel maximum size.                                                                                                                                                                                                                      |

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

@@ -1926,8 +1926,8 @@ The dropdown menu can contain either links or buttons, depending on the expected
 | `.pf-c-dropdown__group-title`           | `<h1>`                                     | Defines the title for a group of items in the dropdown menu.                                                                                                                                                                                                                                           |
 | `.pf-m-expanded`                        | `.pf-c-dropdown`                           | Modifies for the expanded state.                                                                                                                                                                                                                                                                       |
 | `.pf-m-top`                             | `.pf-c-dropdown`                           | Modifies to display the menu above the toggle.                                                                                                                                                                                                                                                         |
-| `.pf-m-align-left{-on-[breakpoint]}`    | `.pf-c-dropdown__menu`                     | Modifies to display the menu aligned to the left edge of the toggle.                                                                                                                                                                                                                                   |
-| `.pf-m-align-right{-on-[breakpoint]}`   | `.pf-c-dropdown__menu`                     | Modifies to display the menu aligned to the right edge of the toggle.                                                                                                                                                                                                                                  |
+| `.pf-m-align-left{-on-[breakpoint]}`    | `.pf-c-dropdown__menu`                     | Modifies to display the menu aligned to the left edge of the toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                                                                       |
+| `.pf-m-align-right{-on-[breakpoint]}`   | `.pf-c-dropdown__menu`                     | Modifies to display the menu aligned to the right edge of the toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                                                                      |
 | `.pf-m-split-button`                    | `.pf-c-dropdown__toggle`                   | Modifies the dropdown toggle area to allow for interactive elements.                                                                                                                                                                                                                                   |
 | `.pf-m-action`                          | `.pf-c-dropdown__toggle.pf-m-split-button` | Modifies the dropdown toggle for when an action is placed beside a toggle button in a split button dropdown.                                                                                                                                                                                           |
 | `.pf-m-text`                            | `.pf-c-dropdown__menu-item`                | Modifies a menu item to be non-interactive text.                                                                                                                                                                                                                                                       |

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

@@ -508,22 +508,22 @@ cssPrefix: pf-c-jump-links
 ### Usage
-| Class                                    | Applied to               | Outcome                                                                                                         |
-| ---------------------------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-jump-links`                       | `<div>`                  | Initiates the jump links container.                                                                             |
-| `.pf-c-jump-links__header`               | `<div>`                  | Initiates the jump links header.                                                                                |
-| `.pf-c-jump-links__toggle`               | `<div>`                  | Initiates the jump links expandable toggle.                                                                     |
-| `.pf-c-jump-links__toggle-text`          | `<span>`                 | Initiates the jump links expandable toggle text.                                                                |
-| `.pf-c-jump-links__toggle-icon`          | `<span>`                 | Initiates the jump links expandable toggle icon.                                                                |
-| `.pf-c-jump-links__label`                | `<div>`                  | Initiates the jump links label.                                                                                 |
-| `.pf-c-jump-links__main`                 | `<div>`                  | Initiates the jump links main container for when a label and list is used in the horizontal variation.          |
-| `.pf-c-jump-links__list`                 | `<ul>`                   | Initiates the jump links list.                                                                                  |
-| `.pf-c-jump-links__item`                 | `<li>`                   | Initiates the jump links list item.                                                                             |
-| `.pf-c-jump-links__link`                 | `<button>`               | Initiates the jump links link.                                                                                  |
-| `.pf-c-jump-links__link-text`            | `<div>`                  | Initiates the jump links link text.                                                                             |
-| `.pf-m-vertical`                         | `.pf-c-jump-links`       | Modifies the jump links component to be vertical.                                                               |
-| `.pf-m-center`                           | `.pf-c-jump-links`       | Modifies the jump links component to center its list and label.                                                 |
-| `.pf-m-expandable{-on-[breakpoint]}`     | `.pf-c-jump-links`       | Modifies the jump links component to be expandable via a toggle. **Note:** works with vertical jump links only. |
-| `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-c-jump-links`       | Modifies the jump links component to be non-expandable.                                                         |
-| `.pf-m-expanded`                         | `.pf-c-jump-links`       | Modifies the expandable jump links component for the expanded state.                                            |
-| `.pf-m-current`                          | `.pf-c-jump-links__item` | Modifies the jump links item to be current.                                                                     |
+| Class                                    | Applied to               | Outcome                                                                                                                                                                                                                     |
+| ---------------------------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.pf-c-jump-links`                       | `<div>`                  | Initiates the jump links container.                                                                                                                                                                                         |
+| `.pf-c-jump-links__header`               | `<div>`                  | Initiates the jump links header.                                                                                                                                                                                            |
+| `.pf-c-jump-links__toggle`               | `<div>`                  | Initiates the jump links expandable toggle.                                                                                                                                                                                 |
+| `.pf-c-jump-links__toggle-text`          | `<span>`                 | Initiates the jump links expandable toggle text.                                                                                                                                                                            |
+| `.pf-c-jump-links__toggle-icon`          | `<span>`                 | Initiates the jump links expandable toggle icon.                                                                                                                                                                            |
+| `.pf-c-jump-links__label`                | `<div>`                  | Initiates the jump links label.                                                                                                                                                                                             |
+| `.pf-c-jump-links__main`                 | `<div>`                  | Initiates the jump links main container for when a label and list is used in the horizontal variation.                                                                                                                      |
+| `.pf-c-jump-links__list`                 | `<ul>`                   | Initiates the jump links list.                                                                                                                                                                                              |
+| `.pf-c-jump-links__item`                 | `<li>`                   | Initiates the jump links list item.                                                                                                                                                                                         |
+| `.pf-c-jump-links__link`                 | `<button>`               | Initiates the jump links link.                                                                                                                                                                                              |
+| `.pf-c-jump-links__link-text`            | `<div>`                  | Initiates the jump links link text.                                                                                                                                                                                         |
+| `.pf-m-vertical`                         | `.pf-c-jump-links`       | Modifies the jump links component to be vertical.                                                                                                                                                                           |
+| `.pf-m-center`                           | `.pf-c-jump-links`       | Modifies the jump links component to center its list and label.                                                                                                                                                             |
+| `.pf-m-expandable{-on-[breakpoint]}`     | `.pf-c-jump-links`       | Modifies the jump links component to be expandable via a toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** works with vertical jump links only. |
+| `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-c-jump-links`       | Modifies the jump links component to be non-expandable at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                         |
+| `.pf-m-expanded`                         | `.pf-c-jump-links`       | Modifies the expandable jump links component for the expanded state.                                                                                                                                                        |
+| `.pf-m-current`                          | `.pf-c-jump-links__item` | Modifies the jump links item to be current.                                                                                                                                                                                 |