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

package/docs/components/Check/examples/Check.md

@@ -1,6 +1,7 @@
 ---
 id: Checkbox
 section: components
+subsection: forms
 cssPrefix: pf-c-check
 ---## Examples
 
@@ -97,22 +98,18 @@ cssPrefix: pf-c-check
     type="checkbox"
     id="check-disabled"
     name="check-disabled"
-    disabled
   />
 
-  <label
-    class="pf-c-check__label pf-m-disabled"
-    for="check-disabled"
-  >Check disabled</label>
+  <label class="pf-c-check__label" for="check-disabled">Check disabled</label>
 </div>
 <div class="pf-c-check">
   <input
     class="pf-c-check__input"
     type="checkbox"
+    disabled
     id="check-disabled-2"
     name="check-disabled-2"
     checked
-    disabled
   />
 
   <label
@@ -213,20 +210,20 @@ If you extend this component or modify the styles of this component, then make s
 
 ### Accessibility
 
-| Attribute  | Applied to           | Outcome                                                                                                           |
-| ---------- | -------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
 | `disabled` | `.pf-c-check__input` | Indicates that the element is unavailable and removes it from keyboard focus. **Required when input is disabled** |
-| `required` | `.pf-c-check__input` | Indicates that the element is required.                                                                           |
+| `required` | `.pf-c-check__input` | Indicates that the element is required. |
 
 ### Usage
 
-| Class                         | Applied to                | Outcome                                                                                                               |
-| ----------------------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-check`                 | `<div>`, `<label>`        | Initiates the check component. **Required**                                                                           |
-| `.pf-c-check__input`          | `<input type="checkbox">` | Initiates a check input. **Required**                                                                                 |
-| `.pf-c-check__label`          | `<label>`, `<span>`       | Initiates a label. **Required**                                                                                       |
-| `.pf-c-check__label-required` | `<span>`                  | Initiates a required indicator.                                                                                       |
-| `.pf-c-check__description`    | `<span>`                  | Initiates a check description.                                                                                        |
-| `.pf-c-check__body`           | `<span>`                  | Initiates a check body.                                                                                               |
-| `.pf-m-standalone`            | `.pf-c-check`             | Modifies the check component for use with a standalone `<input type="checkbox">`. **Required when there is no label** |
-| `.pf-m-disabled`              | `.pf-c-check__label`      | Modifies the check component for the disabled state. **Required when input is disabled**                              |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-check` | `<div>`, `<label>` |  Initiates the check component. **Required**  |
+| `.pf-c-check__input` | `<input type="checkbox">` |  Initiates a check input. **Required**  |
+| `.pf-c-check__label` | `<label>`, `<span>` |  Initiates a label. **Required**  |
+| `.pf-c-check__label-required` | `<span>` |  Initiates a required indicator. |
+| `.pf-c-check__description` | `<span>` |  Initiates a check description. |
+| `.pf-c-check__body` | `<span>` |  Initiates a check body. |
+| `.pf-m-standalone` | `.pf-c-check` |  Modifies the check component for use with a standalone `<input type="checkbox">`. **Required when there is no label** |
+| `.pf-m-disabled` | `.pf-c-check__label` |  Modifies the check component for the disabled state. **Required when input is disabled** |

package/docs/components/Chip/examples/Chip.md

@@ -8,66 +8,84 @@ cssPrefix: pf-c-chip
 
 ```html
 <div class="pf-c-chip">
-  <span class="pf-c-chip__text" id="chip_one">Chip</span>
-  <button
-    class="pf-c-button pf-m-plain"
-    type="button"
-    aria-labelledby="remove_chip_one chip_one"
-    aria-label="Remove"
-    id="remove_chip_one"
-  >
-    <i class="fas fa-times" aria-hidden="true"></i>
-  </button>
+  <span class="pf-c-chip__content">
+    <span class="pf-c-chip__text" id="chip_one">Chip</span>
+  </span>
+  <span class="pf-c-chip__actions">
+    <button
+      class="pf-c-button pf-m-plain"
+      type="button"
+      aria-labelledby="remove_chip_one chip_one"
+      aria-label="Remove"
+      id="remove_chip_one"
+    >
+      <i class="fas fa-times" aria-hidden="true"></i>
+    </button>
+  </span>
 </div>
 <br />
 <br />
 <div class="pf-c-chip">
-  <span
-    class="pf-c-chip__text"
-    id="chip_two"
-  >Really long chip that goes on and on</span>
-  <button
-    class="pf-c-button pf-m-plain"
-    type="button"
-    aria-labelledby="remove_chip_two chip_two"
-    aria-label="Remove"
-    id="remove_chip_two"
-  >
-    <i class="fas fa-times" aria-hidden="true"></i>
-  </button>
+  <span class="pf-c-chip__content">
+    <span
+      class="pf-c-chip__text"
+      id="chip_two"
+    >Really long chip that goes on and on</span>
+  </span>
+  <span class="pf-c-chip__actions">
+    <button
+      class="pf-c-button pf-m-plain"
+      type="button"
+      aria-labelledby="remove_chip_two chip_two"
+      aria-label="Remove"
+      id="remove_chip_two"
+    >
+      <i class="fas fa-times" aria-hidden="true"></i>
+    </button>
+  </span>
 </div>
 <br />
 <br />
 <div class="pf-c-chip">
-  <span class="pf-c-chip__text" id="chip_three">Chip</span>
-  <span class="pf-c-badge pf-m-read">00</span>
-  <button
-    class="pf-c-button pf-m-plain"
-    type="button"
-    aria-labelledby="remove_chip_three chip_three"
-    aria-label="Remove"
-    id="remove_chip_three"
-  >
-    <i class="fas fa-times" aria-hidden="true"></i>
-  </button>
+  <span class="pf-c-chip__content">
+    <span class="pf-c-chip__text" id="chip_three">Chip</span>
+    <span class="pf-c-badge pf-m-read">00</span>
+  </span>
+  <span class="pf-c-chip__actions">
+    <button
+      class="pf-c-button pf-m-plain"
+      type="button"
+      aria-labelledby="remove_chip_three chip_three"
+      aria-label="Remove"
+      id="remove_chip_three"
+    >
+      <i class="fas fa-times" aria-hidden="true"></i>
+    </button>
+  </span>
 </div>
 <br />
 <br />
 <div class="pf-c-chip">
-  <span class="pf-c-chip__text">Read-only chip</span>
+  <span class="pf-c-chip__content">
+    <span class="pf-c-chip__text">Read-only chip</span>
+  </span>
 </div>
 <br />
 <br />
 <button class="pf-c-chip pf-m-overflow">
-  <span class="pf-c-chip__text">Overflow chip</span>
+  <span class="pf-c-chip__content">
+    <span class="pf-c-chip__text">Overflow chip</span>
+  </span>
 </button>
 <br />
 <br />
 <div class="pf-c-chip pf-m-draggable">
-  <span class="pf-c-chip__icon">
-    <i class="fas fa-grip-vertical" role="img" aria-label="Drag"></i>
+  <span class="pf-c-chip__content">
+    <span class="pf-c-chip__icon">
+      <i class="fas fa-grip-vertical" role="img" aria-label="Drag"></i>
+    </span>
+    <span class="pf-c-chip__text">Draggable chip</span>
   </span>
-  <span class="pf-c-chip__text">Draggable chip</span>
 </div>
 
 ```
@@ -80,20 +98,20 @@ A Chip is used to display items that have been filtered or selected from a large
 
 ## Accessibility
 
-| Attribute                                      | Applied to     | Outcome                                                                                                                                                            |
-| ---------------------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `aria-label="[button label text]"`             | `.pf-c-button` | Provides an accessible name for the button when an icon is used instead of text. Required when an icon is used with no supporting text.                            |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-label="[button label text]"` | `.pf-c-button` |  Provides an accessible name for the button when an icon is used instead of text. Required when an icon is used with no supporting text. |
 | `aria-labelledby="[id value of .pf-c-button]"` | `.pf-c-button` | Gives the button an accessible name by referring to the element that provides the position of the button within a list. Required when the button is being removed. |
-| `aria-hidden="true"`                           | `<i>`          | Hides the icon from assistive technologies.                                                                                                                        |
+| `aria-hidden="true"` | `<i>` |  Hides the icon from assistive technologies. |
 
 ## Usage
 
-| Class              | Applied to            | Outcome                                                                         |
-| ------------------ | --------------------- | ------------------------------------------------------------------------------- |
-| `.pf-c-chip`       | `<div>`, `<button>`,  | Initiates the chip component. Use a `<button>` with overflow chips **Required** |
-| `.pf-c-chip__text` | `<span>`              | Initiates the text inside of the chip. **Required**                             |
-| `.pf-c-chip__icon` | `<span>`              | Initiates the icon inside of the chip.                                          |
-| `.pf-c-button`     | `.pf-c-chip <button>` | Initiates the button used to remove the chip.                                   |
-| `.pf-c-badge`      | `<span>`              | Initiates the badge inside the chip.                                            |
-| `.pf-m-overflow`   | `button.pf-c-chip`    | Applies styling of the overflow chip.                                           |
-| `.pf-m-draggable`  | `.pf-c-chip`          | Modifies the chip to be in the draggable state.                                 |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-chip` | `<div>`, `<button>`, | Initiates the chip component. Use a `<button>` with overflow chips **Required** |
+| `.pf-c-chip__content` | `<span>` | Creates a content wrapper for the chip. **Required** |
+| `.pf-c-chip__text` | `<span>` | Initiates the text inside the chip. **Required** |
+| `.pf-c-chip__icon` | `<span>` | Initiates the icon inside the chip. |
+| `.pf-c-chip__actions` | `<span>` | Creates a wrapper for chip actions. **Required for removable chips** |
+| `.pf-m-overflow` | `button.pf-c-chip` | Applies styling of the overflow chip. |
+| `.pf-m-draggable` | `.pf-c-chip` | Modifies the chip to be in the draggable state. |