@patternfly/patternfly 5.0.0-alpha.14 → 5.0.0-alpha.18

package/docs/utilities/Flex/examples/Flex.md

@@ -339,37 +339,37 @@ For these utilities to have effect, the parent element must be set to `display:
 
 ### Usage
 
-| Class                                                   | Applied to | Outcome                             |
-| ------------------------------------------------------- | ---------- | ----------------------------------- |
-| `.pf-u-flex-direction-row{-on-[breakpoint]}`            | `*`        | Sets flex-direction: row            |
-| `.pf-u-flex-direction-row-reverse{-on-[breakpoint]}`    | `*`        | Sets flex-direction: row-reverse    |
-| `.pf-u-flex-direction-column{-on-[breakpoint]}`         | `*`        | Sets flex-direction: column         |
-| `.pf-u-flex-direction-column-reverse{-on-[breakpoint]}` | `*`        | Sets flex-direction: column-reverse |
-| `.pf-u-justify-content-flex-start{-on-[breakpoint]}`    | `*`        | Sets justify-content: flex-start    |
-| `.pf-u-justify-content-flex-end{-on-[breakpoint]}`      | `*`        | Sets justify-content: flex-end      |
-| `.pf-u-justify-content-center{-on-[breakpoint]}`        | `*`        | Sets justify-content: center        |
-| `.pf-u-justify-content-space-around{-on-[breakpoint]}`  | `*`        | Sets justify-content: space-around  |
-| `.pf-u-justify-content-space-between{-on-[breakpoint]}` | `*`        | Sets justify-content: space-between |
-| `.pf-u-align-items-flex-start{-on-[breakpoint]}`        | `*`        | Sets align-items: flex-start        |
-| `.pf-u-align-items-flex-end{-on-[breakpoint]}`          | `*`        | Sets align-items: flex-start        |
-| `.pf-u-align-items-center{-on-[breakpoint]}`            | `*`        | Sets align-items: center            |
-| `.pf-u-align-items-baseline{-on-[breakpoint]}`          | `*`        | Sets align-items: baseline          |
-| `.pf-u-align-items-stretch{-on-[breakpoint]}`           | `*`        | Sets align-items: stretch           |
-| `.pf-u-align-self-flex-start{-on-[breakpoint]}`         | `*`        | Sets align-self: flex-start         |
-| `.pf-u-align-self-flex-end{-on-[breakpoint]}`           | `*`        | Sets align-self: flex-end           |
-| `.pf-u-align-self-center{-on-[breakpoint]}`             | `*`        | Sets align-self: center             |
-| `.pf-u-align-self-baseline{-on-[breakpoint]}`           | `*`        | Sets align-self: baseline           |
-| `.pf-u-align-self-stretch{-on-[breakpoint]}`            | `*`        | Sets align-self: stretch            |
-| `.pf-u-align-content-flex-start{-on-[breakpoint]}`      | `*`        | Sets align-content: flex-start      |
-| `.pf-u-align-content-flex-end{-on-[breakpoint]}`        | `*`        | Sets align-content: flex-end        |
-| `.pf-u-align-content-center{-on-[breakpoint]}`          | `*`        | Sets align-content: center          |
-| `.pf-u-align-content-space-between{-on-[breakpoint]}`   | `*`        | Sets align-content: space-between   |
-| `.pf-u-align-content-space-around{-on-[breakpoint]}`    | `*`        | Sets align-content: space-around    |
-| `.pf-u-align-content-stretch{-on-[breakpoint]}`         | `*`        | Sets align-content: stretch         |
-| `.pf-u-flex-shrink{1 or 0}{-on-[breakpoint]}`           | `*`        | Sets flex-shrink to 1 or 0          |
-| `.pf-u-flex-grow{1 or 0}{-on-[breakpoint]}`             | `*`        | Sets flex-grow to 1 or 0            |
-| `.pf-u-flex-basis{0 or auto}{-on-[breakpoint]}`         | `*`        | Sets flex-basis to 0 auto           |
-| `.pf-u-flex-fill{-on-[breakpoint]}`                     | `*`        | Sets flex to 1 1 auto               |
-| `.pf-u-flex-wrap{-on-[breakpoint]}`                     | `*`        | sets flex-wrap: wrap                |
-| `.pf-u-flex-nowrap{-on-[breakpoint]}`                   | `*`        | sets flex-wrap: nowrap              |
-| `.pf-u-flex-wrap-reverse{-on-[breakpoint]}`             | `*`        | sets flex-wrap: wrap-reverse        |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-u-flex-direction-row{-on-[breakpoint]}`            | `*` |  Sets flex-direction: row |
+| `.pf-u-flex-direction-row-reverse{-on-[breakpoint]}`    | `*` |  Sets flex-direction: row-reverse |
+| `.pf-u-flex-direction-column{-on-[breakpoint]}`         | `*` |  Sets flex-direction: column |
+| `.pf-u-flex-direction-column-reverse{-on-[breakpoint]}` | `*` |  Sets flex-direction: column-reverse |
+| `.pf-u-justify-content-flex-start{-on-[breakpoint]}`    | `*` |  Sets justify-content: flex-start |
+| `.pf-u-justify-content-flex-end{-on-[breakpoint]}`      | `*` |  Sets justify-content: flex-end |
+| `.pf-u-justify-content-center{-on-[breakpoint]}`        | `*` |  Sets justify-content: center |
+| `.pf-u-justify-content-space-around{-on-[breakpoint]}`  | `*` |  Sets justify-content: space-around |
+| `.pf-u-justify-content-space-between{-on-[breakpoint]}` | `*` |  Sets justify-content: space-between |
+| `.pf-u-align-items-flex-start{-on-[breakpoint]}`        | `*` |  Sets align-items: flex-start |
+| `.pf-u-align-items-flex-end{-on-[breakpoint]}`          | `*` |  Sets align-items: flex-start |
+| `.pf-u-align-items-center{-on-[breakpoint]}`            | `*` |  Sets align-items: center |
+| `.pf-u-align-items-baseline{-on-[breakpoint]}`          | `*` |  Sets align-items: baseline |
+| `.pf-u-align-items-stretch{-on-[breakpoint]}`           | `*` |  Sets align-items: stretch |
+| `.pf-u-align-self-flex-start{-on-[breakpoint]}`         | `*` |  Sets align-self: flex-start |
+| `.pf-u-align-self-flex-end{-on-[breakpoint]}`           | `*` |  Sets align-self: flex-end |
+| `.pf-u-align-self-center{-on-[breakpoint]}`             | `*` |  Sets align-self: center |
+| `.pf-u-align-self-baseline{-on-[breakpoint]}`           | `*` |  Sets align-self: baseline |
+| `.pf-u-align-self-stretch{-on-[breakpoint]}`            | `*` |  Sets align-self: stretch |
+| `.pf-u-align-content-flex-start{-on-[breakpoint]}`      | `*` |  Sets align-content: flex-start |
+| `.pf-u-align-content-flex-end{-on-[breakpoint]}`        | `*` |  Sets align-content: flex-end |
+| `.pf-u-align-content-center{-on-[breakpoint]}`          | `*` |  Sets align-content: center |
+| `.pf-u-align-content-space-between{-on-[breakpoint]}`   | `*` |  Sets align-content: space-between |
+| `.pf-u-align-content-space-around{-on-[breakpoint]}`    | `*` |  Sets align-content: space-around |
+| `.pf-u-align-content-stretch{-on-[breakpoint]}`         | `*` |  Sets align-content: stretch |
+| `.pf-u-flex-shrink{1 or 0}{-on-[breakpoint]}`           | `*` |  Sets flex-shrink to 1 or 0 |
+| `.pf-u-flex-grow{1 or 0}{-on-[breakpoint]}`             | `*` |  Sets flex-grow to 1 or 0 |
+| `.pf-u-flex-basis{0 or auto}{-on-[breakpoint]}`         | `*` |  Sets flex-basis to 0 auto |
+| `.pf-u-flex-fill{-on-[breakpoint]}`                     | `*` |  Sets flex to 1 1 auto |
+| `.pf-u-flex-wrap{-on-[breakpoint]}`                     | `*` |  sets flex-wrap: wrap |
+| `.pf-u-flex-nowrap{-on-[breakpoint]}`                   | `*` |  sets flex-wrap: nowrap |
+| `.pf-u-flex-wrap-reverse{-on-[breakpoint]}`             | `*` |  sets flex-wrap: wrap-reverse |

package/docs/utilities/Float/examples/Float.md

@@ -22,7 +22,7 @@ section: utilities
 
 ### Usage
 
-| Class                                 | Applied to | Outcome             |
-| ------------------------------------- | ---------- | ------------------- |
-| `.pf-u-float-left{-on-[breakpoint]}`  | `*`        | Float element left  |
-| `.pf-u-float-right{-on-[breakpoint]}` | `*`        | Float element right |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-u-float-left{-on-[breakpoint]}` | `*` |  Float element left |
+| `.pf-u-float-right{-on-[breakpoint]}` | `*` |  Float element right |

package/docs/utilities/Sizing/examples/Sizing.md

@@ -22,17 +22,17 @@ section: utilities
 
 [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-u-w-initial-on-lg**
 
-| Class                               | Applied to | Outcome                         |
-| ----------------------------------- | ---------- | ------------------------------- |
-| `.pf-u-w-initial{-on-[breakpoint]}` | `*`        | Sets width: initial (auto)      |
-| `.pf-u-w-inherit{-on-[breakpoint]}` | `*`        | Sets width: inherit             |
-| `.pf-u-w-0{-on-[breakpoint]}`       | `*`        | Sets width: 0%                  |
-| `.pf-u-w-25{-on-[breakpoint]}`      | `*`        | Sets width: 25%                 |
-| `.pf-u-w-33{-on-[breakpoint]}`      | `*`        | Sets width: calc(100% / 3)      |
-| `.pf-u-w-50{-on-[breakpoint]}`      | `*`        | Sets width: 50%                 |
-| `.pf-u-w-66{-on-[breakpoint]}`      | `*`        | Sets width: calc(100% / 3 \* 2) |
-| `.pf-u-w-75{-on-[breakpoint]}`      | `*`        | Sets width: 75%                 |
-| `.pf-u-w-100{-on-[breakpoint]}`     | `*`        | Sets width: 100%                |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-u-w-initial{-on-[breakpoint]}` | `*` | Sets width: initial (auto) |
+| `.pf-u-w-inherit{-on-[breakpoint]}` | `*` | Sets width: inherit |
+| `.pf-u-w-0{-on-[breakpoint]}`  | `*` | Sets width: 0% |
+| `.pf-u-w-25{-on-[breakpoint]}` | `*` | Sets width: 25% |
+| `.pf-u-w-33{-on-[breakpoint]}` | `*` | Sets width: calc(100% / 3) |
+| `.pf-u-w-50{-on-[breakpoint]}` | `*` | Sets width: 50% |
+| `.pf-u-w-66{-on-[breakpoint]}` | `*` | Sets width: calc(100% / 3 \* 2) |
+| `.pf-u-w-75{-on-[breakpoint]}` | `*` | Sets width: 75% |
+| `.pf-u-w-100{-on-[breakpoint]}` | `*` | Sets width: 100% |
 
 ### Width viewport units
 
@@ -50,14 +50,14 @@ section: utilities
 
 [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-u-w-25vw-on-lg**
 
-| Class                             | Applied to | Outcome                          |
-| --------------------------------- | ---------- | -------------------------------- |
-| `.pf-u-w-25vw{-on-[breakpoint]}`  | `*`        | Sets width: 25vw                 |
-| `.pf-u-w-33vw{-on-[breakpoint]}`  | `*`        | Sets width: calc(100vw / 3)      |
-| `.pf-u-w-50vw{-on-[breakpoint]}`  | `*`        | Sets width: 50vw                 |
-| `.pf-u-w-66vw{-on-[breakpoint]}`  | `*`        | Sets width: calc(100vw / 3 \* 2) |
-| `.pf-u-w-75vw{-on-[breakpoint]}`  | `*`        | Sets width: 75vw                 |
-| `.pf-u-w-100vw{-on-[breakpoint]}` | `*`        | Sets width: 100vw                |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-u-w-25vw{-on-[breakpoint]}` | `*` | Sets width: 25vw |
+| `.pf-u-w-33vw{-on-[breakpoint]}` | `*` | Sets width: calc(100vw / 3) |
+| `.pf-u-w-50vw{-on-[breakpoint]}` | `*` | Sets width: 50vw |
+| `.pf-u-w-66vw{-on-[breakpoint]}` | `*` | Sets width: calc(100vw / 3 \* 2) |
+| `.pf-u-w-75vw{-on-[breakpoint]}` | `*` | Sets width: 75vw |
+| `.pf-u-w-100vw{-on-[breakpoint]}` | `*` | Sets width: 100vw |
 
 ### Height base and percentage units
 
@@ -90,17 +90,17 @@ section: utilities
 
 [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-u-h-initial-on-lg**
 
-| Class                               | Applied to | Outcome                          |
-| ----------------------------------- | ---------- | -------------------------------- |
-| `.pf-u-h-initial{-on-[breakpoint]}` | `*`        | Sets height: initial (auto)      |
-| `.pf-u-h-inherit{-on-[breakpoint]}` | `*`        | Sets height: inherit             |
-| `.pf-u-h-0{-on-[breakpoint]}`       | `*`        | Sets height: 0%                  |
-| `.pf-u-h-25{-on-[breakpoint]}`      | `*`        | Sets height: 25%                 |
-| `.pf-u-h-33{-on-[breakpoint]}`      | `*`        | Sets height: calc(100% / 3)      |
-| `.pf-u-h-50{-on-[breakpoint]}`      | `*`        | Sets height: 50%                 |
-| `.pf-u-h-66{-on-[breakpoint]}`      | `*`        | Sets height: calc(100% / 3 \* 2) |
-| `.pf-u-h-75{-on-[breakpoint]}`      | `*`        | Sets height: 75%                 |
-| `.pf-u-h-100{-on-[breakpoint]}`     | `*`        | Sets height: 100%                |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-u-h-initial{-on-[breakpoint]}` | `*` | Sets height: initial (auto) |
+| `.pf-u-h-inherit{-on-[breakpoint]}` | `*` | Sets height: inherit |
+| `.pf-u-h-0{-on-[breakpoint]}` | `*` | Sets height: 0% |
+| `.pf-u-h-25{-on-[breakpoint]}`| `*` | Sets height: 25% |
+| `.pf-u-h-33{-on-[breakpoint]}`| `*` | Sets height: calc(100% / 3) |
+| `.pf-u-h-50{-on-[breakpoint]}`| `*` | Sets height: 50% |
+| `.pf-u-h-66{-on-[breakpoint]}`| `*` | Sets height: calc(100% / 3 \* 2) |
+| `.pf-u-h-75{-on-[breakpoint]}`| `*` | Sets height: 75% |
+| `.pf-u-h-100{-on-[breakpoint]}` | `*` | Sets height: 100% |
 
 ### Height viewport units
 
@@ -130,14 +130,14 @@ section: utilities
 
 [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-u-h-25vh-on-lg**
 
-| Class                             | Applied to | Outcome                           |
-| --------------------------------- | ---------- | --------------------------------- |
-| `.pf-u-h-25vh{-on-[breakpoint]}`  | `*`        | Sets height: 25vh                 |
-| `.pf-u-h-33vh{-on-[breakpoint]}`  | `*`        | Sets height: calc(100vh / 3)      |
-| `.pf-u-h-50vh{-on-[breakpoint]}`  | `*`        | Sets height: 50vh                 |
-| `.pf-u-h-66vh{-on-[breakpoint]}`  | `*`        | Sets height: calc(100vh / 3 \* 2) |
-| `.pf-u-h-75vh{-on-[breakpoint]}`  | `*`        | Sets height: 75vh                 |
-| `.pf-u-h-100vh{-on-[breakpoint]}` | `*`        | Sets height: 100vh                |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-u-h-25vh{-on-[breakpoint]}` | `*` | Sets height: 25vh |
+| `.pf-u-h-33vh{-on-[breakpoint]}` | `*` | Sets height: calc(100vh / 3) |
+| `.pf-u-h-50vh{-on-[breakpoint]}` | `*` | Sets height: 50vh |
+| `.pf-u-h-66vh{-on-[breakpoint]}` | `*` | Sets height: calc(100vh / 3 \* 2) |
+| `.pf-u-h-75vh{-on-[breakpoint]}` | `*` | Sets height: 75vh |
+| `.pf-u-h-100vh{-on-[breakpoint]}` | `*` | Sets height: 100vh |
 
 ### Min width
 
@@ -181,15 +181,15 @@ section: utilities
 
 ### Usage
 
-| Class             | Applied to | Outcome                                                              |
-| ----------------- | ---------- | -------------------------------------------------------------------- |
-| `.pf-u-min-width` | `*`        | Sets min-width: `var(--pf-u-min-width--MinWidth{-on-[breakpoint]})`. |
-| `.pf-u-max-width` | `*`        | Sets min-width: `var(--pf-u-max-width--MaxWidth{-on-[breakpoint]})`. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-u-min-width` | `*` | Sets min-width: `var(--pf-u-min-width--MinWidth{-on-[breakpoint]})`. |
+| `.pf-u-max-width` | `*` | Sets min-width: `var(--pf-u-max-width--MaxWidth{-on-[breakpoint]})`. |
 
 [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example --pf-u-min-width--MinWidth-on-lg**
 
-| Custom property                                         | Applied to        | Outcome                                 |
-| ------------------------------------------------------- | ----------------- | --------------------------------------- |
+| Custom property | Applied to | Outcome |
+| -- | -- | -- |
 | `--pf-u-min-width--MinWidth{-on-[breakpoint]}: {width}` | `.pf-u-min-width` | Modifies the min width custom property. |
 | `--pf-u-max-width--MaxWidth{-on-[breakpoint]}: {width}` | `.pf-u-max-width` | Modifies the max width custom property. |
 
@@ -235,14 +235,14 @@ section: utilities
 
 ### Usage
 
-| Class              | Applied to | Outcome                                                                 |
-| ------------------ | ---------- | ----------------------------------------------------------------------- |
-| `.pf-u-min-height` | `*`        | Sets min-height: `var(--pf-u-min-height--MinHeight{-on-[breakpoint]})`. |
-| `.pf-u-max-height` | `*`        | Sets max-height: `var(--pf-u-max-height--MaxHeight{-on-[breakpoint]})`. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-u-min-height` | `*` | Sets min-height: `var(--pf-u-min-height--MinHeight{-on-[breakpoint]})`. |
+| `.pf-u-max-height` | `*` | Sets max-height: `var(--pf-u-max-height--MaxHeight{-on-[breakpoint]})`. |
 
 [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example --pf-u-min-height--MinHeight-on-lg**
 
-| Custom property                                            | Applied to         | Outcome                                  |
-| ---------------------------------------------------------- | ------------------ | ---------------------------------------- |
+| Custom property | Applied to | Outcome |
+| -- | -- | -- |
 | `--pf-u-min-height--MinHeight{-on-[breakpoint]}: {height}` | `.pf-u-min-height` | Modifies the min height custom property. |
 | `--pf-u-max-height--MaxHeight{-on-[breakpoint]}: {height}` | `.pf-u-max-height` | Modifies the max height custom property. |

package/docs/utilities/Spacing/examples/Spacing.md

@@ -101,46 +101,46 @@ section: utilities
 
 ### Margin properties
 
-| Abbreviation | Property                   |
-| ------------ | -------------------------- |
-| `m`          | margin                     |
-| `mt`         | margin-top                 |
-| `mr`         | margin-right               |
-| `mb`         | margin-bottom              |
-| `ml`         | margin-left                |
-| `mx`         | margin-left & margin-right |
-| `my`         | margin-top & margin-bottom |
+| Abbreviation | Property |
+| -- | -- |
+| `m` |  margin |
+| `mt` | margin-top |
+| `mr` | margin-right |
+| `mb` | margin-bottom |
+| `ml` | margin-left |
+| `mx` | margin-left & margin-right |
+| `my` | margin-top & margin-bottom |
 
 ### Padding properties
 
-| Abbreviation | Property                     |
-| ------------ | ---------------------------- |
-| `p`          | padding                      |
-| `pt`         | padding-top                  |
-| `pr`         | padding-right                |
-| `pb`         | padding-bottom               |
-| `pl`         | padding-left                 |
-| `px`         | padding-left & padding-right |
-| `py`         | padding-top & padding-bottom |
+| Abbreviation | Property |
+| -- | -- |
+| `p` |  padding |
+| `pt` | padding-top |
+| `pr` | padding-right |
+| `pb` | padding-bottom |
+| `pl` | padding-left |
+| `px` | padding-left & padding-right |
+| `py` | padding-top & padding-bottom |
 
 ### Size values
 
-| Abbreviation | Property                      |
-| ------------ | ----------------------------- |
-| `auto`       | auto                          |
-| `0`          | 0                             |
-| `xs`         | var(--pf-global--spacer--xs)  |
-| `sm`         | var(--pf-global--spacer--sm)  |
-| `md`         | var(--pf-global--spacer--md)  |
-| `lg`         | var(--pf-global--spacer--lg)  |
-| `xl`         | var(--pf-global--spacer--xl)  |
-| `2xl`        | var(--pf-global--spacer--2xl) |
-| `3xl`        | var(--pf-global--spacer--3xl) |
-| `4xl`        | var(--pf-global--spacer--4xl) |
+| Abbreviation | Property |
+| -- | -- |
+| `auto` |  auto |
+| `0` | 0 |
+| `xs` | var(--pf-global--spacer--xs) |
+| `sm` | var(--pf-global--spacer--sm) |
+| `md` | var(--pf-global--spacer--md) |
+| `lg` | var(--pf-global--spacer--lg) |
+| `xl` | var(--pf-global--spacer--xl) |
+| `2xl` | var(--pf-global--spacer--2xl) |
+| `3xl` | var(--pf-global--spacer--3xl) |
+| `4xl` | var(--pf-global--spacer--4xl) |
 
 ### Usage
 
-| Class                                                        | Applied to | Outcome                                                                                           |
-| ------------------------------------------------------------ | ---------- | ------------------------------------------------------------------------------------------------- |
-| `.pf-u-{m, mt, mr, mb, ml, mx, my}-{size}{-on-[breakpoint]}` | `*`        | Sets margin top, right, bottom, left, margin-left & right, margin-top & bottom to spacer value    |
-| `.pf-u-{p, pt, pr, pb, pl, px, py}-{size}{-on-[breakpoint]}` | `*`        | Sets padding top, right, bottom, left, padding-left & right, padding-top & bottom to spacer value |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-u-{m, mt, mr, mb, ml, mx, my}-{size}{-on-[breakpoint]}`  | `*` |  Sets margin top, right, bottom, left, margin-left & right, margin-top & bottom to spacer value |
+| `.pf-u-{p, pt, pr, pb, pl, px, py}-{size}{-on-[breakpoint]}`  | `*` |  Sets padding top, right, bottom, left, padding-left & right, padding-top & bottom to spacer value |

package/docs/utilities/Text/examples/Text.md

@@ -169,30 +169,30 @@ Care should be taken especially when applying text colors, as this can have a ne
 
 ### Usage
 
-| Class                                                                                                                                 | Applied to | Outcome                                                                                                                                |
-| ------------------------------------------------------------------------------------------------------------------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-u-font-size-{xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}`                                                               | `*`        | Sets font-size to xs, sm, md, lg, xl, 2xl, 3xl, or 4xl                                                                                 |
-| `.pf-u-font-family-{sans-serif, heading-sans-serif, monospace, redhatVF-sans-serif, redhatVF-heading-sans-serif, redhatVF-monospace}` | `*`        | Sets font-family to sans-serif, heading-sans-serif, or monospace; or Red Hat virtual font sans-serif, heading sans-serif, or monospace |
-| `.pf-u-font-weight-{light, normal, bold}{-on-[breakpoint]}`                                                                           | `*`        | Sets font-size to light, normal, or bold                                                                                               |
-| `.pf-u-color-{100, 200, 300, 400}{-on-[breakpoint]}`                                                                                  | `*`        | Sets font-color to color 100, 200, 300, or 400                                                                                         |
-| `.pf-u-active-color-{100, 400}{-on-[breakpoint]}`                                                                                     | `*`        | Sets font-color to active color 100 or 400                                                                                             |
-| `.pf-u-primary-color-100{-on-[breakpoint]}`                                                                                           | `*`        | Sets font-color to primary color 100                                                                                                   |
-| `.pf-u-color-light-{100, 200}{-on-[breakpoint]}`                                                                                      | `*`        | Sets font-color to light color 100 or 200                                                                                              |
-| `.pf-u-link-color{-on-[breakpoint]}`                                                                                                  | `*`        | Sets font-color to link color                                                                                                          |
-| `.pf-u-link-color-hover{-on-[breakpoint]}`                                                                                            | `*`        | Sets font-color to hover link color                                                                                                    |
-| `.pf-u-link-color-light{-on-[breakpoint]}`                                                                                            | `*`        | Sets font-color to light link color                                                                                                    |
-| `.pf-u-link-color-light-hover{-on-[breakpoint]}`                                                                                      | `*`        | Sets font-color to light hover link color                                                                                              |
-| `.pf-u-link-color-dark{-on-[breakpoint]}`                                                                                             | `*`        | Sets font-color to dark link color                                                                                                     |
-| `.pf-u-link-color-dark-hover{-on-[breakpoint]}`                                                                                       | `*`        | Sets font-color to dark hover link color                                                                                               |
-| `.pf-u-link-color-visited{-on-[breakpoint]}`                                                                                          | `*`        | Sets font-color to visited link color                                                                                                  |
-| `.pf-u-default-color-{100, 200, 300}{-on-[breakpoint]}`                                                                               | `*`        | Sets font-color to default color 100, 200, or 300                                                                                      |
-| `.pf-u-success-color-{100, 200}{-on-[breakpoint]}`                                                                                    | `*`        | Sets font-color to success color 100 or 200                                                                                            |
-| `.pf-u-info-color-{100, 200}{-on-[breakpoint]}`                                                                                       | `*`        | Sets font-color to info color 100 or 200                                                                                               |
-| `.pf-u-warning-color-{100, 200}{-on-[breakpoint]}`                                                                                    | `*`        | Sets font-color to warning color 100 or 200                                                                                            |
-| `.pf-u-danger-color-{100, 200, 300}{-on-[breakpoint]}`                                                                                | `*`        | Sets font-color to danger color 100, 200, or 300                                                                                       |
-| `.pf-u-disabled-color-{100, 200}{-on-[breakpoint]}`                                                                                   | `*`        | Sets font-color to disabled color 100 or 200                                                                                           |
-| `.pf-u-icon-color-{light, dark}{-on-[breakpoint]}`                                                                                    | `*`        | Sets font-color to light or dark icon color                                                                                            |
-| `.pf-u-text-break-word{-on-[breakpoint]}`                                                                                             | `*`        | Sets word-break to break-word                                                                                                          |
-| `.pf-u-text-nowrap{-on-[breakpoint]}`                                                                                                 | `*`        | Sets white-space to nowrap                                                                                                             |
-| `.pf-u-text-wrap{-on-[breakpoint]}`                                                                                                   | `*`        | Sets white-space to normal                                                                                                             |
-| `.pf-u-text-truncate`                                                                                                                 | `*`        | Truncates text field                                                                                                                   |
+| Class                                                                  | Applied to | Outcome                                             |
+| ---------------------------------------------------------------------- | ---------- | --------------------------------------------------- |
+| `.pf-u-font-size-{xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}`| `*`        | Sets font-size to xs, sm, md, lg, xl, 2xl, 3xl, or 4xl |
+| `.pf-u-font-family-{sans-serif, heading-sans-serif, monospace, redhatVF-sans-serif, redhatVF-heading-sans-serif, redhatVF-monospace}`            | `*`        | Sets font-family to sans-serif, heading-sans-serif, or monospace; or Red Hat virtual font sans-serif, heading sans-serif, or monospace            |
+| `.pf-u-font-weight-{light, normal, bold}{-on-[breakpoint]}`            | `*`        | Sets font-size to light, normal, or bold            |
+| `.pf-u-color-{100, 200, 300, 400}{-on-[breakpoint]}`                   | `*`        | Sets font-color to color 100, 200, 300, or 400      |
+| `.pf-u-active-color-{100, 400}{-on-[breakpoint]}`                      | `*`        | Sets font-color to active color 100 or 400          |
+| `.pf-u-primary-color-100{-on-[breakpoint]}`                            | `*`        | Sets font-color to primary color 100                |
+| `.pf-u-color-light-{100, 200}{-on-[breakpoint]}`                       | `*`        | Sets font-color to light color 100 or 200           |
+| `.pf-u-link-color{-on-[breakpoint]}`                                   | `*`        | Sets font-color to link color                       |
+| `.pf-u-link-color-hover{-on-[breakpoint]}`                             | `*`        | Sets font-color to hover link color                 |
+| `.pf-u-link-color-light{-on-[breakpoint]}`                             | `*`        | Sets font-color to light link color                 |
+| `.pf-u-link-color-light-hover{-on-[breakpoint]}`                       | `*`        | Sets font-color to light hover link color           |
+| `.pf-u-link-color-dark{-on-[breakpoint]}`                              | `*`        | Sets font-color to dark link color                  |
+| `.pf-u-link-color-dark-hover{-on-[breakpoint]}`                        | `*`        | Sets font-color to dark hover link color            |
+| `.pf-u-link-color-visited{-on-[breakpoint]}`                           | `*`        | Sets font-color to visited link color               |
+| `.pf-u-default-color-{100, 200, 300}{-on-[breakpoint]}`                | `*`        | Sets font-color to default color 100, 200, or 300   |
+| `.pf-u-success-color-{100, 200}{-on-[breakpoint]}`                     | `*`        | Sets font-color to success color 100 or 200         |
+| `.pf-u-info-color-{100, 200}{-on-[breakpoint]}`                        | `*`        | Sets font-color to info color 100 or 200            |
+| `.pf-u-warning-color-{100, 200}{-on-[breakpoint]}`                     | `*`        | Sets font-color to warning color 100 or 200         |
+| `.pf-u-danger-color-{100, 200, 300}{-on-[breakpoint]}`                 | `*`        | Sets font-color to danger color 100, 200, or 300    |
+| `.pf-u-disabled-color-{100, 200}{-on-[breakpoint]}`                    | `*`        | Sets font-color to disabled color 100 or 200        |
+| `.pf-u-icon-color-{light, dark}{-on-[breakpoint]}`                     | `*`        | Sets font-color to light or dark icon color         |
+| `.pf-u-text-break-word{-on-[breakpoint]}`                              | `*`        | Sets word-break to break-word                       |
+| `.pf-u-text-nowrap{-on-[breakpoint]}`                                  | `*`        | Sets white-space to nowrap                          |
+| `.pf-u-text-wrap{-on-[breakpoint]}`                                    | `*`        | Sets white-space to normal                          |
+| `.pf-u-text-truncate`                                                  | `*`        | Truncates text field                                |

package/icons/{pf-icons.json → pf-icons.mjs}

@@ -1,4 +1,4 @@
-{
+export const pfIcons = {
   "add-circle-o": { "width": 1024, "height": 1024, "svgPathData": "M576,303 C576,294.715729 569.284271,288 561,288 L463,288 C454.715729,288 448,294.715729 448,303 L448,448 L303,448 C294.715729,448 288,454.715729 288,463 L288,561 C288,569.284271 294.715729,576 303,576 L448,576 L448,720.9 C447.983373,729.207373 454.6927,735.961429 463,736 L561,736 C569.3073,735.961429 576.016627,729.207373 576,720.9 L576,576 L721,576 C724.969024,576.026638 728.784638,574.468589 731.600595,571.671405 C734.416553,568.87422 736.000031,565.069113 736.000031,561.1 L736.000031,463.1 C736.016627,454.792627 729.3073,448.038571 721,448 L576,448 L576,303 Z M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 Z M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0 Z" },
   "ansible-tower": { "width": 1024, "height": 1024, "svgPathData": "M512,0 C229.26,0 0,229.26 0,512 C0,794.74 229.26,1024 512,1024 C794.74,1024 1024,794.74 1024,512 C1024,229.26 794.74,0 512,0 Z M759.09,730.29 C759.09,751.77 741.71,766.86 721.83,766.86 C711.54,766.86 704,762.97 693.49,754.29 L429,541 L340.57,762.74 L264.23,762.74 L487.77,224.74 C493.49,210.79 506.06,203.25 520.23,203.25 C534.4,203.25 546.06,210.56 551.77,224.74 L755.89,715.2 C758.4,721.14 759.31,726.63 759.09,730.29 Z M520.69,312.69 L653.26,640 L453.26,482.51 L520.69,312.69 Z" },
   "applications": { "width": 1024, "height": 1024, "svgPathData": "M951.9,320 L832,320 L832,135 C832,94.9 800.7,64 760.5,64 L71.1,64 C30.9,64.1 0,94.9 0,135 L0,696.9 C0,737.1 30.9,768 71.1,768 L192,768 L192,952.2 C192,992.5 223.4,1024 263.7,1024 L952,1024 C992.3,1024 1024,992.5 1024,952.2 L1024,391 C1023.9,350.9 992.1,320 951.9,320 Z M832,384 L896,384 L896,448 L832,448 L832,384 Z M640,128 L704,128 L704,192 L640,192 L640,128 Z M64,704 L64,256 L768,256 L768,704 L64,704 Z M960,960 L256,960 L256,768 L760.5,768 C800.8,768 832,736.5 832,696.3 L832,576 L960,576 L960,960 Z" },

package/layouts/Grid/grid.css

@@ -16,31 +16,31 @@
 }
 @media (min-width: 576px) {
   .pf-l-grid > *,
-.pf-l-grid .pf-l-grid__item {
+  .pf-l-grid .pf-l-grid__item {
     order: var(--pf-l-grid--item--Order-on-sm, var(--pf-l-grid--item--Order));
   }
 }
 @media (min-width: 768px) {
   .pf-l-grid > *,
-.pf-l-grid .pf-l-grid__item {
+  .pf-l-grid .pf-l-grid__item {
     order: var(--pf-l-grid--item--Order-on-md, var(--pf-l-grid--item--Order-on-sm, var(--pf-l-grid--item--Order)));
   }
 }
 @media (min-width: 992px) {
   .pf-l-grid > *,
-.pf-l-grid .pf-l-grid__item {
+  .pf-l-grid .pf-l-grid__item {
     order: var(--pf-l-grid--item--Order-on-lg, var(--pf-l-grid--item--Order-on-md, var(--pf-l-grid--item--Order-on-sm, var(--pf-l-grid--item--Order))));
   }
 }
 @media (min-width: 1200px) {
   .pf-l-grid > *,
-.pf-l-grid .pf-l-grid__item {
+  .pf-l-grid .pf-l-grid__item {
     order: var(--pf-l-grid--item--Order-on-xl, var(--pf-l-grid--item--Order-on-lg, var(--pf-l-grid--item--Order-on-md, var(--pf-l-grid--item--Order-on-sm, var(--pf-l-grid--item--Order)))));
   }
 }
 @media (min-width: 1450px) {
   .pf-l-grid > *,
-.pf-l-grid .pf-l-grid__item {
+  .pf-l-grid .pf-l-grid__item {
     order: var(--pf-l-grid--item--Order-on-2xl, var(--pf-l-grid--item--Order-on-xl, var(--pf-l-grid--item--Order-on-lg, var(--pf-l-grid--item--Order-on-md, var(--pf-l-grid--item--Order-on-sm, var(--pf-l-grid--item--Order))))));
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "5.0.0-alpha.14",
+  "version": "5.0.0-alpha.18",
   "keywords": [],
   "license": "MIT",
   "scripts": {
@@ -21,70 +21,80 @@
     "lint:fix": "npm run lint:js -- --fix && npm run lint:sass -- --fix",
     "lint:sass": "stylelint 'src/**/*.scss'",
     "lint:js": "eslint .",
-    "precommit": "lint-staged",
     "screenshots": "rimraf patternfly-docs/generated/**/*.png && pf-docs-framework screenshots --urlPrefix http://localhost:5000",
     "serve": "pf-docs-framework serve public",
     "start": "gulp develop",
     "test": "npm run a11y",
-    "workflows": "node .github/generate-workflows"
+    "workflows": "node .github/generate-workflows",
+    "prepare": "husky install"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.1.2",
-    "@commitlint/config-conventional": "^17.1.0",
+    "@babel/core": "^7.20.12",
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.20.7",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.20.5",
+    "@babel/plugin-transform-react-jsx": "^7.20.13",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@commitlint/cli": "^17.4.2",
+    "@commitlint/config-conventional": "^17.4.2",
     "@fortawesome/fontawesome": "^1.1.8",
-    "@octokit/rest": "^16.40.1",
+    "@octokit/rest": "^19.0.7",
+    "@patternfly/documentation-framework": "1.8.0",
     "@patternfly/patternfly-a11y": "4.3.1",
     "@patternfly/react-code-editor": "4.82.113",
     "@patternfly/react-core": "4.276.6",
     "@patternfly/react-table": "4.112.39",
     "@starptech/prettyhtml": "^0.10.0",
-    "babel-eslint": "^8.2.3",
-    "cheerio": "^1.0.0-rc.3",
-    "commander": "^5.1.0",
-    "cssnano": "^4.0.0",
-    "eslint": "^7.0.0",
-    "eslint-config-standard": "^16.0.0",
-    "eslint-config-standard-jsx": "^10.0.0",
-    "eslint-config-standard-react": "^11.0.0",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-node": "^11.0.0",
-    "eslint-plugin-promise": "^5.0.0",
-    "eslint-plugin-react": "^7.0.0",
-    "glob": "^7.1.2",
+    "cheerio": "^1.0.0-rc.12",
+    "commander": "^10.0.0",
+    "cssnano": "^5.1.14",
+    "eslint": "^8.33.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-config-standard-jsx": "^11.0.0",
+    "eslint-config-standard-react": "^13.0.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-n": "^15.6.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "glob": "^8.1.0",
     "gulp": "^4.0.2",
-    "gulp-cli": "^2.2.0",
-    "gulp-iconfont": "^10.0.3",
+    "gulp-cli": "^2.3.0",
+    "gulp-iconfont": "^11.0.1",
     "gulp-iconfont-css": "^3.0.0",
-    "gulp-postcss": "^8.0.0",
-    "gulp-rename": "^1.4.0",
-    "gulp-sourcemaps": "^2.6.5",
-    "husky": "^1.3.1",
-    "lint-staged": "^9.2.5",
-    "node-plop": "^0.18.0",
-    "postcss": "^8.3.11",
-    "postcss-css-variables": "^0.13.0",
-    "postcss-preset-env": "^6.7.0",
-    "prettier": "^2.7.1",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "remark-parse": "^8.0.3",
-    "remark-stringify": "^8.1.0",
+    "gulp-postcss": "^9.0.1",
+    "gulp-rename": "^2.0.0",
+    "gulp-sourcemaps": "^3.0.0",
+    "lint-staged": "^13.1.1",
+    "node-plop": "^0.31.1",
+    "postcss": "^8.4.21",
+    "postcss-css-variables": "^0.18.0",
+    "postcss-preset-env": "^8.0.1",
+    "prettier": "^2.8.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "remark-parse": "^10.0.1",
+    "remark-stringify": "^10.0.2",
     "rimraf": "*",
-    "sass": "^1.34.0",
-    "sass-graph": "^3.0.4",
-    "stylelint": "^14.12.1",
-    "stylelint-config-recommended-scss": "^7.0.0",
-    "stylelint-config-standard": "^28.0.0",
-    "stylelint-order": "^5.0.0",
+    "sass": "^1.58.0",
+    "sass-graph": "^4.0.1",
+    "stylelint": "^15.0.0",
+    "stylelint-config-recommended-scss": "^8.0.0",
+    "stylelint-config-standard": "^30.0.1",
+    "stylelint-order": "^6.0.2",
     "stylelint-scss": "^4.3.0",
     "stylelint-value-no-unknown-custom-properties": "^4.0.0",
-    "surge": "^0.21.3",
-    "@patternfly/documentation-framework": "1.4.16",
-    "unified": "^9.2.0",
-    "webpack": "^4.43.0"
+    "surge": "^0.23.1",
+    "unified": "^10.1.2",
+    "webpack": "^5.75.0",
+    "husky": "^8.0.3"
   },
   "resolutions": {
-    "@babel/preset-env": "7.6.3",
+    "@babel/preset-env": "7.18.2",
     "monaco-editor": "0.21.3"
   },
   "repository": {
@@ -95,20 +105,5 @@
     "registry": "https://registry.npmjs.org/",
     "tag": "alpha",
     "access": "public"
-  },
-  "husky": {
-    "hooks": {
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-    }
-  },
-  "lint-staged": {
-    "*.js": [
-      "eslint --fix",
-      "git add"
-    ],
-    "*.scss": [
-      "stylelint --fix",
-      "git add"
-    ]
   }
 }