@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.41

package/docs/components/HelperText/examples/HelperText.md

@@ -12,25 +12,21 @@ cssPrefix: pf-c-helper-text
     <span class="pf-c-helper-text__item-text">This is default helper text</span>
   </div>
 </div>
-
 <div class="pf-c-helper-text">
   <div class="pf-c-helper-text__item pf-m-indeterminate">
     <span class="pf-c-helper-text__item-text">This is indeterminate helper text</span>
   </div>
 </div>
-
 <div class="pf-c-helper-text">
   <div class="pf-c-helper-text__item pf-m-warning">
     <span class="pf-c-helper-text__item-text">This is warning helper text</span>
   </div>
 </div>
-
 <div class="pf-c-helper-text">
   <div class="pf-c-helper-text__item pf-m-success">
     <span class="pf-c-helper-text__item-text">This is success helper text</span>
   </div>
 </div>
-
 <div class="pf-c-helper-text">
   <div class="pf-c-helper-text__item pf-m-error">
     <span class="pf-c-helper-text__item-text">This is error helper text</span>
@@ -50,7 +46,6 @@ cssPrefix: pf-c-helper-text
     <span class="pf-c-helper-text__item-text">This is default helper text</span>
   </div>
 </div>
-
 <div class="pf-c-helper-text">
   <div class="pf-c-helper-text__item pf-m-indeterminate">
     <span class="pf-c-helper-text__item-icon">
@@ -59,7 +54,6 @@ cssPrefix: pf-c-helper-text
     <span class="pf-c-helper-text__item-text">This is indeterminate helper text</span>
   </div>
 </div>
-
 <div class="pf-c-helper-text">
   <div class="pf-c-helper-text__item pf-m-warning">
     <span class="pf-c-helper-text__item-icon">
@@ -68,7 +62,6 @@ cssPrefix: pf-c-helper-text
     <span class="pf-c-helper-text__item-text">This is warning helper text</span>
   </div>
 </div>
-
 <div class="pf-c-helper-text">
   <div class="pf-c-helper-text__item pf-m-success">
     <span class="pf-c-helper-text__item-icon">
@@ -77,7 +70,6 @@ cssPrefix: pf-c-helper-text
     <span class="pf-c-helper-text__item-text">This is success helper text</span>
   </div>
 </div>
-
 <div class="pf-c-helper-text">
   <div class="pf-c-helper-text__item pf-m-error">
     <span class="pf-c-helper-text__item-icon">
@@ -121,36 +113,32 @@ cssPrefix: pf-c-helper-text
     <span class="pf-c-helper-text__item-text">This is default helper text</span>
   </div>
 </div>
-
 <div class="pf-c-helper-text">
-  <div class="pf-c-helper-text__item pf-m-dynamic pf-m-indeterminate">
+  <div class="pf-c-helper-text__item pf-m-indeterminate pf-m-dynamic">
     <span class="pf-c-helper-text__item-icon">
       <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
     </span>
     <span class="pf-c-helper-text__item-text">This is indeterminate helper text</span>
   </div>
 </div>
-
 <div class="pf-c-helper-text">
-  <div class="pf-c-helper-text__item pf-m-dynamic pf-m-warning">
+  <div class="pf-c-helper-text__item pf-m-warning pf-m-dynamic">
     <span class="pf-c-helper-text__item-icon">
       <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
     </span>
     <span class="pf-c-helper-text__item-text">This is warning helper text</span>
   </div>
 </div>
-
 <div class="pf-c-helper-text">
-  <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
+  <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
     <span class="pf-c-helper-text__item-icon">
       <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
     </span>
     <span class="pf-c-helper-text__item-text">This is success helper text</span>
   </div>
 </div>
-
 <div class="pf-c-helper-text">
-  <div class="pf-c-helper-text__item pf-m-dynamic pf-m-error">
+  <div class="pf-c-helper-text__item pf-m-error pf-m-dynamic">
     <span class="pf-c-helper-text__item-icon">
       <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
     </span>
@@ -163,43 +151,44 @@ cssPrefix: pf-c-helper-text
 ### Dynamic list
 
 ```html
-<ul class="pf-c-helper-text">
-  <li class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
+<div class="pf-c-helper-text">
+  <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
     <span class="pf-c-helper-text__item-icon">
       <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
     </span>
     <span class="pf-c-helper-text__item-text">Must be at least 14 characters</span>
-  </li>
-  <li class="pf-c-helper-text__item pf-m-dynamic pf-m-error">
+  </div>
+  <div class="pf-c-helper-text__item pf-m-error pf-m-dynamic">
     <span class="pf-c-helper-text__item-icon">
       <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
     </span>
     <span
       class="pf-c-helper-text__item-text"
     >Cannot contain any variation of the word "redhat"</span>
-  </li>
-  <li class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
+  </div>
+  <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
     <span class="pf-c-helper-text__item-icon">
       <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
     </span>
     <span
       class="pf-c-helper-text__item-text"
     >Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols</span>
-  </li>
-</ul>
+  </div>
+</div>
 
 ```
 
 ### Usage
 
-| Class                          | Applied to                | Outcome                                                                                                                                  |
-| ------------------------------ | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-helper-text`            | `<div>`, `<ul>`           | Initiates the helper text component. **Required**                                                                                        |
-| `.pf-c-helper-text__item`      | `<div>`, `<li>`           | Initiates a helper text item. **Required**                                                                                               |
-| `.pf-c-helper-text__item-icon` | `<span>`                  | Initiates a helper text item icon. **Required when used in `.pf-c-helper-text__item.pf-m-dynamic`**                                      |
-| `.pf-c-helper-text__item-text` | `<span>`                  | Initiates a helper text item text. **Required**                                                                                          |
-| `.pf-m-dynamic`                | `.pf-c-helper-text__item` | Modifies a helper text item to be dynamic. For use when the item changes state as the form field the text is associated with is updated. |
-| `.pf-m-indeterminate`          | `.pf-c-helper-text__item` | Modifies a helper text item for indeterminate state styles.                                                                              |
-| `.pf-m-warning`                | `.pf-c-helper-text__item` | Modifies a helper text item for warning state styles.                                                                                    |
-| `.pf-m-success`                | `.pf-c-helper-text__item` | Modifies a helper text item for success state styles.                                                                                    |
-| `.pf-m-error`                  | `.pf-c-helper-text__item` | Modifies a helper text item for error state styles.                                                                                      |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-helper-text` | `<div>`, `<ul>` |  Initiates the helper text component. **Required** |
+| `.pf-c-helper-text__item` | `<div>`, `<li>` |  Initiates a helper text item. **Required** |
+| `.pf-c-helper-text__item-icon` | `<span>` |  Initiates a helper text item icon. **Required when used in `.pf-c-helper-text__item.pf-m-dynamic`** |
+| `.pf-c-helper-text__item-text` | `<span>` |  Initiates a helper text item text. **Required** |
+| `.pf-m-dynamic` | `.pf-c-helper-text__item` |  Modifies a helper text item to be dynamic. For use when the item changes state as the form field the text is associated with is updated. |
+| `.pf-m-indeterminate` | `.pf-c-helper-text__item` |  Modifies a helper text item for indeterminate state styles. |
+| `.pf-m-warning` | `.pf-c-helper-text__item` |  Modifies a helper text item for warning state styles. |
+| `.pf-m-success` | `.pf-c-helper-text__item` |  Modifies a helper text item for success state styles. |
+| `.pf-m-error` | `.pf-c-helper-text__item` |  Modifies a helper text item for error state styles. |
+| `.pf-m-hidden` | `.pf-c-helper-text` | Hides helper text. |

package/docs/components/Hint/examples/Hint.md

@@ -193,10 +193,10 @@ cssPrefix: pf-c-hint
 
 ### Usage
 
-| Class                 | Applied to | Outcome                                    |
-| --------------------- | ---------- | ------------------------------------------ |
-| `.pf-c-hint`          | `<div>`    | Initiates the hint component. **Required** |
-| `.pf-c-hint__title`   | `<div>`    | Initiates the hint title element.          |
-| `.pf-c-hint__body`    | `<div>`    | Initiates the hint body element.           |
-| `.pf-c-hint__footer`  | `<div>`    | Initiates the hint footer element.         |
-| `.pf-c-hint__actions` | `<div>`    | Initiates the hint actions element.        |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-hint` | `<div>` | Initiates the hint component. **Required** |
+| `.pf-c-hint__title` | `<div>` | Initiates the hint title element. |
+| `.pf-c-hint__body` | `<div>` | Initiates the hint body element. |
+| `.pf-c-hint__footer` | `<div>` | Initiates the hint footer element. |
+| `.pf-c-hint__actions` | `<div>` | Initiates the hint actions element. |

package/docs/components/Icon/examples/Icon.md

@@ -1,6 +1,5 @@
 ---
 id: 'Icon'
-beta: true
 section: components
 cssPrefix: pf-c-icon
 ---## Examples
@@ -84,7 +83,7 @@ cssPrefix: pf-c-icon
   </span>
 </span>
 <span class="pf-c-icon">
-  <span class="pf-c-icon__content pf-m-default">
+  <span class="pf-c-icon__content pf-m-custom">
     <i class="fas fa-bell" aria-hidden="true"></i>
   </span>
 </span>
@@ -243,13 +242,13 @@ Refer to the [icons](/guidelines/icons) page for information about the PatternFl
 
 ### Usage
 
-| Class                                                                           | Applied to                                   | Outcome                                                                                              |
-| ------------------------------------------------------------------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
-| `.pf-c-icon`                                                                    | `<span>`, `<div>`                            | Initiates an icon component. **Required**                                                            |
-| `.pf-c-icon__content`                                                           | `<span>`, `<div>`                            | Initiates the icon content. **Required**                                                             |
-| `.pf-c-icon__progress`                                                          | `<span>`, `<div>`                            | Initiates a container for a progress spinner.                                                        |
-| `.pf-m-inline`                                                                  | `.pf-c-icon`                                 | Displays the icon inline with text, and allows the icon to inherit the size and color of the parent. |
-| `.pf-m-[sm,md,lg,xl]`                                                           | `.pf-c-icon`                                 | Modifies the icon container to be small, medium, large, or extra large.                              |
-| `.pf-m-[sm,md,lg,xl]`                                                           | `.pf-c-icon__content`, `pf-c-icon__progress` | Modifies the icon content or progress element to be small, medium, large, or extra large.            |
-| `.pf-m-in-progress`                                                             | `.pf-c-icon`                                 | Shows the progress element in place of the icon content.                                             |
-| `.pf-m-danger`, `.pf-m-warning`, `.pf-m-success`, `.pf-m-info`, `.pf-m-default` | `.pf-c-icon__content`                        | Modifies the icon content to use a status color.                                                     |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-icon` | `<span>`, `<div>` | Initiates an icon component. **Required**  |
+| `.pf-c-icon__content` | `<span>`, `<div>` | Initiates the icon content. **Required**  |
+| `.pf-c-icon__progress` | `<span>`, `<div>` | Initiates a container for a progress spinner.  |
+| `.pf-m-inline` | `.pf-c-icon` | Displays the icon inline with text, and allows the icon to inherit the size and color of the parent. |
+| `.pf-m-[sm,md,lg,xl]` | `.pf-c-icon` | Modifies the icon container to be small, medium, large, or extra large. |
+| `.pf-m-[sm,md,lg,xl]` | `.pf-c-icon__content`, `pf-c-icon__progress` | Modifies the icon content or progress element to be small, medium, large, or extra large. |
+| `.pf-m-in-progress` | `.pf-c-icon` | Shows the progress element in place of the icon content.  |
+| `.pf-m-danger`, `.pf-m-warning`, `.pf-m-success`, `.pf-m-info`, `.pf-m-custom`  | `.pf-c-icon__content` | Modifies the icon content to use a status color.  |

package/docs/components/InlineEdit/examples/InlineEdit.md

@@ -830,34 +830,34 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
 
 All accessibility requirements for inputs apply to elements within inline edit.
 
-| Attribute                                                  | Applied to                           | Outcome                                                            |
-| ---------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------------------ |
-| `id`                                                       | `[labelling element]`                | Provides a reference for toggle button and/or editable content.    |
-| `aria-label="descriptive text"`                            | `.pf-c-inline-edit__toggle > button` | Provides an accessible description for toggle button. **Required** |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `id` | `[labelling element]` | Provides a reference for toggle button and/or editable content. |
+| `aria-label="descriptive text"` | `.pf-c-inline-edit__toggle > button` | Provides an accessible description for toggle button. **Required** |
 | `aria-labelledby="[labelling element] [toggle button id]"` | `.pf-c-inline-edit__toggle > button` | Provides an accessible description for toggle button. **Required** |
-| `aria-label="descriptive text"`                            | `[radio button group]`               | Provides an accessible description for radio groups. **Required**  |
-| `contenteditable="true"`                                   | `.pf-c-inline-edit__editable-text`   | Ensures the text node is editable.                                 |
-| `role="textbox"`                                           | `.pf-c-inline-edit__editable-text`   | Identifies an element that allows the input of free-form text.     |
-| `role="radiogroup"`                                        | `[radio button group]`               | Provides an accessible role for radio buttons groups. **Required** |
+| `aria-label="descriptive text"` | `[radio button group]` | Provides an accessible description for radio groups. **Required** |
+| `contenteditable="true"` | `.pf-c-inline-edit__editable-text` | Ensures the text node is editable. |
+| `role="textbox"` | `.pf-c-inline-edit__editable-text` | Identifies an element that allows the input of free-form text. |
+| `role="radiogroup"` | `[radio button group]` | Provides an accessible role for radio buttons groups. **Required** |
 
 ### Usage
 
-| Class                              | Applied to                                                     | Outcome                                                                                   |
-| ---------------------------------- | -------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
-| `.pf-c-inline-edit`                | `<form>`, `<div>`                                              | Initiates the inline edit component. **Required**                                         |
-| `.pf-c-inline-edit__value`         | `*`                                                            | Initiates an inline edit value. **Required**                                              |
-| `.pf-c-inline-edit__input`         | `*`                                                            | Initiates an inline edit input. **Required**                                              |
-| `.pf-c-inline-edit__editable-text` | `*`                                                            | Initiates an inline editable text element.                                                |
-| `.pf-c-inline-edit__label`         | `*`                                                            | Initiates an inline edit label.                                                           |
-| `.pf-c-inline-edit__action`        | `*`                                                            | Initiates an inline edit action (visible when inline edit region is active). **Required** |
-| `.pf-m-inline-editable`            | `.pf-c-inline-edit`, `.pf-c-inline-edit [block level element]` | Modifies an inline edit region for editable state.                                        |
-| `.pf-m-action-group`               | `.pf-c-inline-edit__group`                                     | Modifies group for action group.                                                          |
-| `.pf-m-icon-group`                 | `.pf-c-inline-edit__group`                                     | Modifies an action group item spacing.                                                    |
-| `.pf-m-column`                     | `.pf-c-inline-edit__group`                                     | Modifies an action group flex direction.                                                  |
-| `.pf-m-footer`                     | `.pf-c-inline-edit__group`                                     | Modifies an inline edit group margin-top.                                                 |
-| `.pf-m-bold`                       | `.pf-c-inline-edit__label`                                     | Modifies an inline edit label's `font-weight`.                                            |
-| `.pf-m-valid`                      | `.pf-c-inline-edit__action`                                    | Modifies the action button state.                                                         |
-| `.pf-m-enable-editable`            | `.pf-c-inline-edit__action`                                    | Exposes an inline edit action by default.                                                 |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-inline-edit` | `<form>`, `<div>` | Initiates the inline edit component. **Required** |
+| `.pf-c-inline-edit__value` | `*` | Initiates an inline edit value. **Required** |
+| `.pf-c-inline-edit__input` | `*` | Initiates an inline edit input. **Required** |
+| `.pf-c-inline-edit__editable-text` | `*` | Initiates an inline editable text element. |
+| `.pf-c-inline-edit__label` | `*` | Initiates an inline edit label. |
+| `.pf-c-inline-edit__action` | `*` | Initiates an inline edit action (visible when inline edit region is active). **Required** |
+| `.pf-m-inline-editable` | `.pf-c-inline-edit`, `.pf-c-inline-edit [block level element]` | Modifies an inline edit region for editable state. |
+| `.pf-m-action-group` | `.pf-c-inline-edit__group` | Modifies group for action group. |
+| `.pf-m-icon-group` | `.pf-c-inline-edit__group` | Modifies an action group item spacing. |
+| `.pf-m-column` | `.pf-c-inline-edit__group` | Modifies an action group flex direction. |
+| `.pf-m-footer` | `.pf-c-inline-edit__group` | Modifies an inline edit group margin-top. |
+| `.pf-m-bold` | `.pf-c-inline-edit__label` | Modifies an inline edit label's `font-weight`. |
+| `.pf-m-valid` | `.pf-c-inline-edit__action` | Modifies the action button state. |
+| `.pf-m-enable-editable` | `.pf-c-inline-edit__action` | Exposes an inline edit action by default. |
 
 <!--
 ### Bulk edit dl (default)
@@ -931,9 +931,11 @@ All accessibility requirements for inputs apply to elements within inline edit.
     <dt>Tags</dt>
     <dd>
       {{#> chip chip--type="div" chip--modifier="pf-m-read-only"}}
-        {{#> chip-text}}
-          alertmanager=main
-        {{/chip-text}}
+        {{#> chip-content}}
+          {{#> chip-text}}
+            alertmanager=main
+          {{/chip-text}}
+        {{/chip-content}}
       {{/chip}}
     </dd>
   </div>