@patternfly/patternfly 5.0.0-alpha.2 → 5.0.0-alpha.21

package/docs/components/Slider/examples/Slider.md

@@ -267,7 +267,7 @@ cssPrefix: pf-c-slider
         value="50"
         aria-label="Slider value input"
       />
-      <span class="pf-c-input-group__text pf-m-plain">%</span>
+      <span class="pf-c-input-group__text">%</span>
     </div>
   </div>
 </div>
@@ -297,7 +297,7 @@ cssPrefix: pf-c-slider
         value="50"
         aria-label="Slider value input"
       />
-      <span class="pf-c-input-group__text pf-m-plain">%</span>
+      <span class="pf-c-input-group__text">%</span>
     </div>
   </div>
 </div>
@@ -329,7 +329,7 @@ cssPrefix: pf-c-slider
           value="50"
           aria-label="Slider value input"
         />
-        <span class="pf-c-input-group__text pf-m-plain">%</span>
+        <span class="pf-c-input-group__text">%</span>
       </div>
     </div>
   </div>
@@ -393,7 +393,7 @@ cssPrefix: pf-c-slider
           value="50"
           aria-label="Slider value input"
         />
-        <span class="pf-c-input-group__text pf-m-plain">%</span>
+        <span class="pf-c-input-group__text pf-m-disabled">%</span>
       </div>
     </div>
   </div>
@@ -429,7 +429,7 @@ cssPrefix: pf-c-slider
           value="50"
           aria-label="Slider value input"
         />
-        <span class="pf-c-input-group__text pf-m-plain">%</span>
+        <span class="pf-c-input-group__text">%</span>
       </div>
     </div>
   </div>
@@ -570,7 +570,7 @@ cssPrefix: pf-c-slider
         value="50"
         aria-label="Slider value input"
       />
-      <span class="pf-c-input-group__text pf-m-plain">%</span>
+      <span class="pf-c-input-group__text pf-m-disabled">%</span>
     </div>
   </div>
 </div>
@@ -581,30 +581,30 @@ cssPrefix: pf-c-slider
 
 ### Accessibility
 
-| Attribute                 | Applied to                                       | Outcome                                                                                                           |
-| ------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------- |
-| `role="slider"`           | `.pf-c-slider__thumb`                            | Identifies the element as a slider. **Required**                                                                  |
-| `tabindex="0"`            | `.pf-c-slider__thumb`                            | Includes the slider thumb in the page tab sequence. **Note:** only for use with non-disabled slider. **Required** |
-| `aria-disabled="true"`    | `.pf-c-slider.pf-m-disabled .pf-c-slider__thumb` | Indicates that the slider thumb is disabled. **Required**                                                         |
-| `aria-valuemin="[value]"` | `.pf-c-slider__thumb`                            | Specifies the minimum value of the slider. **Required**                                                           |
-| `aria-valuemax="[value]"` | `.pf-c-slider__thumb`                            | Specifies the maximum value of the slider. **Required**                                                           |
-| `aria-valuenow="[value]"` | `.pf-c-slider__thumb`                            | Specifies the current value of the slider. **Required**                                                           |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `role="slider"` | `.pf-c-slider__thumb` | Identifies the element as a slider. **Required** |
+| `tabindex="0"` | `.pf-c-slider__thumb` | Includes the slider thumb in the page tab sequence. **Note:** only for use with non-disabled slider. **Required** |
+| `aria-disabled="true"` | `.pf-c-slider.pf-m-disabled .pf-c-slider__thumb` | Indicates that the slider thumb is disabled. **Required** |
+| `aria-valuemin="[value]"` | `.pf-c-slider__thumb` | Specifies the minimum value of the slider. **Required** |
+| `aria-valuemax="[value]"` | `.pf-c-slider__thumb` | Specifies the maximum value of the slider. **Required** |
+| `aria-valuenow="[value]"` | `.pf-c-slider__thumb` | Specifies the current value of the slider. **Required** |
 
 ### Usage
 
-| Class                      | Applied to            | Outcome                                                                    |
-| -------------------------- | --------------------- | -------------------------------------------------------------------------- |
-| `.pf-c-slider`             | `<div>`               | Initiates the slider component. **Required**                               |
-| `.pf-c-slider__main`       | `<div>`               | Initiates the slider main element. **Required**                            |
-| `.pf-c-slider__rail`       | `<div>`               | Initiates the slider rail. **Required**                                    |
-| `.pf-c-slider__rail-track` | `<div>`               | Initiates the slider rail track. **Required**                              |
-| `.pf-c-slider__steps`      | `<div>`               | Initiates the slider steps.                                                |
-| `.pf-c-slider__step`       | `<div>`               | Initiates a slider step.                                                   |
-| `.pf-c-slider__step-tick`  | `<div>`               | Initiates a slider step tick.                                              |
-| `.pf-c-slider__step-label` | `<div>`               | Initiates a slider step label.                                             |
-| `.pf-c-slider__thumb`      | `<div>`               | Initiates the slider thumb. **Required**                                   |
-| `.pf-c-slider__value`      | `<div>`               | Initiates the slider value.                                                |
-| `.pf-c-slider__actions`    | `<div>`               | Initiates the slider actions.                                              |
-| `.pf-m-disabled`           | `.pf-c-slider`        | Modifies the slider for the disabled state.                                |
-| `.pf-m-floating`           | `.pf-c-slider__thumb` | Modifies the slider value to float above the thumb.                        |
-| `--pf-c-slider--value`     | `.pf-c-slider`        | Applies appropriate slider styles based on the current value. **Required** |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-slider` | `<div>` | Initiates the slider component. **Required** |
+| `.pf-c-slider__main` | `<div>` | Initiates the slider main element. **Required** |
+| `.pf-c-slider__rail` | `<div>` | Initiates the slider rail. **Required** |
+| `.pf-c-slider__rail-track` | `<div>` | Initiates the slider rail track. **Required** |
+| `.pf-c-slider__steps` | `<div>` | Initiates the slider steps. |
+| `.pf-c-slider__step` | `<div>` | Initiates a slider step. |
+| `.pf-c-slider__step-tick` | `<div>` | Initiates a slider step tick. |
+| `.pf-c-slider__step-label` | `<div>` | Initiates a slider step label. |
+| `.pf-c-slider__thumb` | `<div>` | Initiates the slider thumb. **Required** |
+| `.pf-c-slider__value` | `<div>` | Initiates the slider value. |
+| `.pf-c-slider__actions` | `<div>` | Initiates the slider actions. |
+| `.pf-m-disabled` | `.pf-c-slider` | Modifies the slider for the disabled state. |
+| `.pf-m-floating` | `.pf-c-slider__thumb` | Modifies the slider value to float above the thumb. |
+| `--pf-c-slider--value` | `.pf-c-slider` | Applies appropriate slider styles based on the current value. **Required** |

package/docs/components/Spinner/examples/Spinner.md

@@ -134,12 +134,12 @@ An inline spinner inherits its font-size, so its size will match the content aro
 
 ### Accessibility
 
-| Attribute                                        | Applied to      | Outcome                                                                                                      |
-| ------------------------------------------------ | --------------- | ------------------------------------------------------------------------------------------------------------ |
-| `role="progressbar"`                             | `.pf-c-spinner` | Indicates to assistive technologies that this is an indeterminate progress indicator.                        |
-| `aria-label="Loading..."`                        | `.pf-c-spinner` | Provides an accessible name for the spinner. **Note: one of `aria-label` or `aria-labelledby` is required.** |
-| `aria-labelledby="[id of spinner label]"`        | `.pf-c-spinner` | Gives the spinner an accessible name by referring to the element that labels the spinner.                    |
-| `aria-describedby="[id of spinner description]"` | `.pf-c-spinner` | Gives the spinner an accessible description by referring to the element that describes the spinner.          |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `role="progressbar"` | `.pf-c-spinner` | Indicates to assistive technologies that this is an indeterminate progress indicator. |
+| `aria-label="Loading..."` | `.pf-c-spinner` | Provides an accessible name for the spinner. **Note: one of `aria-label` or `aria-labelledby` is required.** |
+| `aria-labelledby="[id of spinner label]"` | `.pf-c-spinner` | Gives the spinner an accessible name by referring to the element that labels the spinner. |
+| `aria-describedby="[id of spinner description]"` | `.pf-c-spinner` | Gives the spinner an accessible description by referring to the element that describes the spinner. |
 
 Note: If the spinner is showing that loading of a particular region of a page is in process, the author should use `aria-describedby` to point to the status, and set the `aria-busy` attribute to `true` on the region until it is finished loading.
 
@@ -147,27 +147,27 @@ Note: A [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility
 
 ### Usage
 
-| Class                      | Applied to      | Outcome                                                                          |
-| -------------------------- | --------------- | -------------------------------------------------------------------------------- |
-| `.pf-c-spinner`            | `<svg>`         | Creates a spinner component. The default is an extra large spinner. **Required** |
-| `.pf-c-spinner__path`      | `<circle>`      | Creates a spinner circle component. **Required**                                 |
-| `--pf-c-spinner--diameter` | `.pf-c-spinner` | Modifies the value for `--pf-c-spinner--diameter` declaration.                   |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-spinner` | `<svg>` |  Creates a spinner component. The default is an extra large spinner. **Required**|
+| `.pf-c-spinner__path` | `<circle>` |  Creates a spinner circle component. **Required**|
+| `--pf-c-spinner--diameter` | `.pf-c-spinner` | Modifies the value for `--pf-c-spinner--diameter` declaration. |
 
 ### Usage (legacy)
 
-| Class                      | Applied to | Outcome                                                                          |
-| -------------------------- | ---------- | -------------------------------------------------------------------------------- |
-| `.pf-c-spinner`            | `<span>`   | Creates a spinner component. The default is an extra large spinner. **Required** |
-| `.pf-c-spinner__clipper`   | `<span>`   | Creates the spinning line. **Required**                                          |
-| `.pf-c-spinner__lead-ball` | `<span>`   | Rounds out the beginning of the spinning line. **Required**                      |
-| `.pf-c-spinner__tail-ball` | `<span>`   | Rounds out the end of the spinning line. **Required**                            |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-spinner` | `<span>` |  Creates a spinner component. The default is an extra large spinner. **Required**|
+| `.pf-c-spinner__clipper` | `<span>` |  Creates the spinning line. **Required**|
+| `.pf-c-spinner__lead-ball` | `<span>` |  Rounds out the beginning of the spinning line. **Required**|
+| `.pf-c-spinner__tail-ball` | `<span>` |  Rounds out the end of the spinning line. **Required**|
 
 ### Modifiers
 
-| Class          | Applied to      | Outcome                         |
-| -------------- | --------------- | ------------------------------- |
-| `.pf-m-sm`     | `.pf-c-spinner` | Creates a small spinner.        |
-| `.pf-m-md`     | `.pf-c-spinner` | Creates a medium spinner.       |
-| `.pf-m-lg`     | `.pf-c-spinner` | Creates a large spinner.        |
-| `.pf-m-xl`     | `.pf-c-spinner` | Creates an extra-large spinner. |
-| `.pf-m-inline` | `.pf-c-spinner` | Creates an inline spinner.      |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-sm` | `.pf-c-spinner` |  Creates a small spinner. |
+| `.pf-m-md` | `.pf-c-spinner` |  Creates a medium spinner. |
+| `.pf-m-lg` | `.pf-c-spinner` |  Creates a large spinner. |
+| `.pf-m-xl` | `.pf-c-spinner` |  Creates an extra-large spinner. |
+| `.pf-m-inline` | `.pf-c-spinner` |  Creates an inline spinner. |

package/docs/components/Switch/examples/Switch.md

@@ -275,25 +275,25 @@ Use checkbox if your user has to perform additional steps for changes to become
 
 ### Accessibility
 
-| Attribute                                     | Applied to                | Outcome                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| --------------------------------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `aria-labelledby="..."` or `aria-label="..."` | `.pf-c-switch__input`     | Indicates the action triggered by the switch. If an additional text label is included with the switch besides `.pf-c-switch__label.pf-m-on`, then `aria-labelledby` can reference the `id` of this text, or this text can be used as the value for `aria-label`. If the text included for `.pf-c-switch__label.pf-m-on` provides additional meaning to the primary label that's referenced, then it can also be represented as part of the `aria-labelledby` or `aria-label` attribute. **Required** |
-| `for`                                         | `<label>`                 | Each `<label>` must have a `for` attribute that matches its input id. **Required**                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| `id`                                          | `<input type="checkbox">` | Each `<input>` must have an `id` attribute that matches its label's `for` value. **Required**                                                                                                                                                                                                                                                                                                                                                                                                        |
-| `id`                                          | `.pf-c-switch__label`     | Each `.pf-c-switch__label` must have an `id` attribute that matches the `aria-labelledby` on `.pf-c-switch__input`.                                                                                                                                                                                                                                                                                                                                                                                  |
-| `checked`                                     | `.pf-c-switch__input`     | Indicates that the input is checked                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| `disabled`                                    | `.pf-c-switch__input`     | Indicates that the input is disabled                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `aria-hidden="true"`                          | `.pf-c-switch__label`     | Hides the text from the screen reader.                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-labelledby="..."` or `aria-label="..."` | `.pf-c-switch__input` | Indicates the action triggered by the switch. If an additional text label is included with the switch besides `.pf-c-switch__label.pf-m-on`, then `aria-labelledby` can reference the `id` of this text, or this text can be used as the value for `aria-label`. If the text included for `.pf-c-switch__label.pf-m-on` provides additional meaning to the primary label that's referenced, then it can also be represented as part of the `aria-labelledby` or `aria-label` attribute. **Required** |
+| `for` | `<label>` | Each `<label>` must have a `for` attribute that matches its input id. **Required** |
+| `id` | `<input type="checkbox">` | Each `<input>` must have an `id` attribute that matches its label's `for` value. **Required** |
+| `id` | `.pf-c-switch__label` | Each `.pf-c-switch__label` must have an `id` attribute that matches the `aria-labelledby` on `.pf-c-switch__input`. |
+| `checked` | `.pf-c-switch__input` |  Indicates that the input is checked |
+| `disabled` | `.pf-c-switch__input` |  Indicates that the input is disabled |
+| `aria-hidden="true"` | `.pf-c-switch__label` | Hides the text from the screen reader. |
 
 ### Usage
 
-| Class                       | Applied to                | Outcome                                                                                        |
-| --------------------------- | ------------------------- | ---------------------------------------------------------------------------------------------- |
-| `.pf-c-switch`              | `<label>`                 | Initiates a switch. **Required**                                                               |
-| `.pf-c-switch__input`       | `<input type="checkbox">` | Hide the checkbox inside the switch. **Required**                                              |
-| `.pf-c-switch__toggle`      | `<span>`                  | Initiates the toggle inside the switch. **Required**                                           |
-| `.pf-c-switch__toggle-icon` | `<span>`                  | Initiates the switch toggle icon wrapper. **Required when the switch is used without a label** |
-| `.pf-c-switch__label`       | `<span>`                  | Initiates a label inside the switch.                                                           |
-| `.pf-m-on`                  | `.pf-c-switch__label`     | Modifies the switch label to display the on message.                                           |
-| `.pf-m-off`                 | `.pf-c-switch__label`     | Modifies the switch label to display the off message.                                          |
-| `.pf-m-reverse`             | `.pf-c-switch`            | Positions the switch toggle to the right of the label.                                         |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-switch` | `<label>` |  Initiates a switch. **Required**  |
+| `.pf-c-switch__input` | `<input type="checkbox">` |  Hide the checkbox inside the switch. **Required**  |
+| `.pf-c-switch__toggle` | `<span>` |  Initiates the toggle inside the switch. **Required**  |
+| `.pf-c-switch__toggle-icon` | `<span>` | Initiates the switch toggle icon wrapper. **Required when the switch is used without a label** |
+| `.pf-c-switch__label` | `<span>` |  Initiates a label inside the switch. |
+| `.pf-m-on` | `.pf-c-switch__label` | Modifies the switch label to display the on message. |
+| `.pf-m-off` | `.pf-c-switch__label` | Modifies the switch label to display the off message. |
+| `.pf-m-reverse` | `.pf-c-switch` | Positions the switch toggle to the right of the label. |

package/docs/components/TabContent/examples/TabContent.md

@@ -135,19 +135,19 @@ Tab content should be used with the [tabs component](/components/tabs).
 
 ### Accessibility
 
-| Attribute                             | Applied to          | Outcome                                                                                                                                        |
-| ------------------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
-| `role="tabpanel"`                     | `.pf-c-tab-content` | Indicates that the element serves as a container for a set of tabs. **Required**                                                               |
-| `aria-labelledby=[ID of tab element]` | `.pf-c-tab-content` | Provides an accessible name for the tab panel by referring to the tab element that controls it. **Required**                                   |
-| `id=[ID of tab panel]`                | `.pf-c-tab-content` | Provides an ID for the tab panel, and should be used as the value of `aria-controls` on the tab element that controls the panel.  **Required** |
-| `hidden`                              | `.pf-c-tab-content` | Indicates that the tab panel is not visible. **Required on all but the active tab panel**                                                      |
-| `tabindex="0"`                        | `.pf-c-tab-content` | Puts the tab panel in the page tab sequence and facilitates movement to panel content for assistive technology users. **Required**             |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `role="tabpanel"` | `.pf-c-tab-content` | Indicates that the element serves as a container for a set of tabs. **Required** |
+| `aria-labelledby=[ID of tab element]` | `.pf-c-tab-content` | Provides an accessible name for the tab panel by referring to the tab element that controls it. **Required**
+| `id=[ID of tab panel]` | `.pf-c-tab-content` | Provides an ID for the tab panel, and should be used as the value of `aria-controls` on the tab element that controls the panel.  **Required**
+| `hidden` | `.pf-c-tab-content` | Indicates that the tab panel is not visible. **Required on all but the active tab panel**
+| `tabindex="0"` | `.pf-c-tab-content` | Puts the tab panel in the page tab sequence and facilitates movement to panel content for assistive technology users. **Required**
 
 ### Usage
 
-| Class                     | Applied to                | Outcome                                              |
-| ------------------------- | ------------------------- | ---------------------------------------------------- |
-| `.pf-c-tab-content`       | `<section>`               | Initiates the tab content component. **Required**    |
-| `.pf-c-tab-content__body` | `<div>`                   | Initiates the tab content body component.            |
-| `.pf-m-padding`           | `.pf-c-tab-content__body` | Modifies the tab content body component padding.     |
-| `.pf-m-light-300`         | `.pf-c-tab-content`       | Modifies the tab content component background color. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-tab-content` | `<section>` |  Initiates the tab content component. **Required** |
+| `.pf-c-tab-content__body` | `<div>` |  Initiates the tab content body component. |
+| `.pf-m-padding` | `.pf-c-tab-content__body` | Modifies the tab content body component padding. |
+| `.pf-m-light-300` | `.pf-c-tab-content` |  Modifies the tab content component background color. |