@patternfly/patternfly 5.0.0-prerelease.9 → 5.0.0

package/{docs → dist/docs}/components/FormControl/examples/FormControl.md

@@ -10,25 +10,25 @@ cssPrefix: pf-v5-c-form-control
 **Note:** In webkit browsers, inputs with status icons that are autocompleted will have their icons removed by the user agent stylesheet. If the field does not need to use autocomplete, turn it off with `autocomplete="off"` to avoid the problem. Otherwise, use [helper text](/components/helper-text/html-demos)  instead to ensure that the status will remain visible if the field is autocompleted.
 
 ```html
-<div class="pf-v5-c-form-control">
+<span class="pf-v5-c-form-control">
   <input
     type="text"
     value="Standard"
     id="input-standard"
     aria-label="Standard input example"
   />
-</div>
+</span>
 <br />
-<div class="pf-v5-c-form-control">
+<span class="pf-v5-c-form-control">
   <input
     type="text"
     placeholder="Placeholder"
     id="input-placeholder"
     aria-label="Placeholder input example"
   />
-</div>
+</span>
 <br />
-<div class="pf-v5-c-form-control pf-m-readonly">
+<span class="pf-v5-c-form-control pf-m-readonly">
   <input
     readonly
     type="text"
@@ -36,9 +36,9 @@ cssPrefix: pf-v5-c-form-control
     id="input-readonly"
     aria-label="Readonly input example"
   />
-</div>
+</span>
 <br />
-<div class="pf-v5-c-form-control pf-m-readonly pf-m-plain">
+<span class="pf-v5-c-form-control pf-m-readonly pf-m-plain">
   <input
     readonly
     type="text"
@@ -46,9 +46,9 @@ cssPrefix: pf-v5-c-form-control
     id="input-readonly-plain"
     aria-label="Readonly plain input example"
   />
-</div>
+</span>
 <br />
-<div class="pf-v5-c-form-control pf-m-disabled">
+<span class="pf-v5-c-form-control pf-m-disabled">
   <input
     disabled
     type="text"
@@ -56,37 +56,37 @@ cssPrefix: pf-v5-c-form-control
     id="input-disabled"
     aria-label="Disabled input example"
   />
-</div>
+</span>
 <br />
-<div class="pf-v5-c-form-control pf-m-success">
+<span class="pf-v5-c-form-control pf-m-success">
   <input
     type="text"
     value="Success"
     id="input-success"
     aria-label="Success state input example"
   />
-  <div class="pf-v5-c-form-control__utilities">
-    <div class="pf-v5-c-form-control__icon pf-m-status">
+  <span class="pf-v5-c-form-control__utilities">
+    <span class="pf-v5-c-form-control__icon pf-m-status">
       <i class="fas fa-check-circle" aria-hidden="true"></i>
-    </div>
-  </div>
-</div>
+    </span>
+  </span>
+</span>
 <br />
-<div class="pf-v5-c-form-control pf-m-warning">
+<span class="pf-v5-c-form-control pf-m-warning">
   <input
     type="text"
     value="Warning"
     id="input-warning"
     aria-label="Warning state input example"
   />
-  <div class="pf-v5-c-form-control__utilities">
-    <div class="pf-v5-c-form-control__icon pf-m-status">
+  <span class="pf-v5-c-form-control__utilities">
+    <span class="pf-v5-c-form-control__icon pf-m-status">
       <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
-    </div>
-  </div>
-</div>
+    </span>
+  </span>
+</span>
 <br />
-<div class="pf-v5-c-form-control pf-m-error">
+<span class="pf-v5-c-form-control pf-m-error">
   <input
     required
     type="text"
@@ -95,23 +95,23 @@ cssPrefix: pf-v5-c-form-control
     aria-invalid="true"
     aria-label="Error state input example"
   />
-  <div class="pf-v5-c-form-control__utilities">
-    <div class="pf-v5-c-form-control__icon pf-m-status">
+  <span class="pf-v5-c-form-control__utilities">
+    <span class="pf-v5-c-form-control__icon pf-m-status">
       <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
-    </div>
-  </div>
-</div>
+    </span>
+  </span>
+</span>
 <br />
-<div class="pf-v5-c-form-control pf-m-expanded">
+<span class="pf-v5-c-form-control pf-m-expanded">
   <input
     type="text"
     value="Expanded"
     id="input-expanded"
     aria-label="Expanded input example"
   />
-</div>
+</span>
 <br />
-<div class="pf-v5-c-form-control pf-m-icon">
+<span class="pf-v5-c-form-control pf-m-icon">
   <input
     type="text"
     value="Calendar"
@@ -119,14 +119,14 @@ cssPrefix: pf-v5-c-form-control
     name="input-calendar"
     aria-label="Calendar input example"
   />
-  <div class="pf-v5-c-form-control__utilities">
-    <div class="pf-v5-c-form-control__icon">
+  <span class="pf-v5-c-form-control__utilities">
+    <span class="pf-v5-c-form-control__icon">
       <i class="fas fa-calendar" aria-hidden="true"></i>
-    </div>
-  </div>
-</div>
+    </span>
+  </span>
+</span>
 <br />
-<div class="pf-v5-c-form-control pf-m-warning pf-m-icon">
+<span class="pf-v5-c-form-control pf-m-warning pf-m-icon">
   <input
     type="text"
     value="Clock (invalid)"
@@ -134,17 +134,17 @@ cssPrefix: pf-v5-c-form-control
     name="input-clock"
     aria-label="Clock input example"
   />
-  <div class="pf-v5-c-form-control__utilities">
-    <div class="pf-v5-c-form-control__icon">
+  <span class="pf-v5-c-form-control__utilities">
+    <span class="pf-v5-c-form-control__icon">
       <i class="fas fa-clock" aria-hidden="true"></i>
-    </div>
-    <div class="pf-v5-c-form-control__icon pf-m-status">
+    </span>
+    <span class="pf-v5-c-form-control__icon pf-m-status">
       <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
-    </div>
-  </div>
-</div>
+    </span>
+  </span>
+</span>
 <br />
-<div class="pf-v5-c-form-control pf-m-icon">
+<span class="pf-v5-c-form-control pf-m-icon">
   <input
     type="text"
     value="Custom icon"
@@ -152,19 +152,19 @@ cssPrefix: pf-v5-c-form-control
     name="custom-icon"
     aria-label="Custom icon input example"
   />
-  <div class="pf-v5-c-form-control__utilities">
-    <div class="pf-v5-c-form-control__icon">
+  <span class="pf-v5-c-form-control__utilities">
+    <span class="pf-v5-c-form-control__icon">
       <i class="fas fa-bell" aria-hidden="true"></i>
-    </div>
-  </div>
-</div>
+    </span>
+  </span>
+</span>
 
 ```
 
 ### Select
 
 ```html
-<div class="pf-v5-c-form-control pf-m-placeholder">
+<span class="pf-v5-c-form-control pf-m-placeholder">
   <select
     class
     id="select-selectable-placeholder"
@@ -179,14 +179,14 @@ cssPrefix: pf-v5-c-form-control
     <option value="Dr">Dr</option>
     <option value="Other">Other</option>
   </select>
-  <div class="pf-v5-c-form-control__utilities">
-    <div class="pf-v5-c-form-control__toggle-icon">
+  <span class="pf-v5-c-form-control__utilities">
+    <span class="pf-v5-c-form-control__toggle-icon">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </div>
-  </div>
-</div>
+    </span>
+  </span>
+</span>
 <br />
-<div class="pf-v5-c-form-control pf-m-placeholder">
+<span class="pf-v5-c-form-control pf-m-placeholder">
   <select
     class
     id="select-non-selectable-placeholder"
@@ -201,14 +201,14 @@ cssPrefix: pf-v5-c-form-control
     <option value="Dr">Dr</option>
     <option value="Other">Other</option>
   </select>
-  <div class="pf-v5-c-form-control__utilities">
-    <div class="pf-v5-c-form-control__toggle-icon">
+  <span class="pf-v5-c-form-control__utilities">
+    <span class="pf-v5-c-form-control__toggle-icon">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </div>
-  </div>
-</div>
+    </span>
+  </span>
+</span>
 <br />
-<div class="pf-v5-c-form-control">
+<span class="pf-v5-c-form-control">
   <select
     class
     id="select-group"
@@ -224,14 +224,14 @@ cssPrefix: pf-v5-c-form-control
       <option value="Option 4">The fourth option</option>
     </optgroup>
   </select>
-  <div class="pf-v5-c-form-control__utilities">
-    <div class="pf-v5-c-form-control__toggle-icon">
+  <span class="pf-v5-c-form-control__utilities">
+    <span class="pf-v5-c-form-control__toggle-icon">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </div>
-  </div>
-</div>
+    </span>
+  </span>
+</span>
 <br />
-<div class="pf-v5-c-form-control pf-m-success">
+<span class="pf-v5-c-form-control pf-m-success">
   <select
     class
     id="select-group-success"
@@ -248,17 +248,17 @@ cssPrefix: pf-v5-c-form-control
       <option value="Option 4">The fourth option</option>
     </optgroup>
   </select>
-  <div class="pf-v5-c-form-control__utilities">
-    <div class="pf-v5-c-form-control__icon pf-m-status">
+  <span class="pf-v5-c-form-control__utilities">
+    <span class="pf-v5-c-form-control__icon pf-m-status">
       <i class="fas fa-check-circle" aria-hidden="true"></i>
-    </div>
-    <div class="pf-v5-c-form-control__toggle-icon">
+    </span>
+    <span class="pf-v5-c-form-control__toggle-icon">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </div>
-  </div>
-</div>
+    </span>
+  </span>
+</span>
 <br />
-<div class="pf-v5-c-form-control pf-m-warning">
+<span class="pf-v5-c-form-control pf-m-warning">
   <select
     class
     id="select-group-warning"
@@ -275,17 +275,17 @@ cssPrefix: pf-v5-c-form-control
       <option value="Option 4">The fourth option</option>
     </optgroup>
   </select>
-  <div class="pf-v5-c-form-control__utilities">
-    <div class="pf-v5-c-form-control__icon pf-m-status">
+  <span class="pf-v5-c-form-control__utilities">
+    <span class="pf-v5-c-form-control__icon pf-m-status">
       <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
-    </div>
-    <div class="pf-v5-c-form-control__toggle-icon">
+    </span>
+    <span class="pf-v5-c-form-control__toggle-icon">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </div>
-  </div>
-</div>
+    </span>
+  </span>
+</span>
 <br />
-<div class="pf-v5-c-form-control pf-m-error">
+<span class="pf-v5-c-form-control pf-m-error">
   <select
     class
     required
@@ -304,17 +304,17 @@ cssPrefix: pf-v5-c-form-control
       <option value="Option 4">The fourth option</option>
     </optgroup>
   </select>
-  <div class="pf-v5-c-form-control__utilities">
-    <div class="pf-v5-c-form-control__icon pf-m-status">
+  <span class="pf-v5-c-form-control__utilities">
+    <span class="pf-v5-c-form-control__icon pf-m-status">
       <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
-    </div>
-    <div class="pf-v5-c-form-control__toggle-icon">
+    </span>
+    <span class="pf-v5-c-form-control__toggle-icon">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </div>
-  </div>
-</div>
+    </span>
+  </span>
+</span>
 <br />
-<div class="pf-v5-c-form-control pf-m-disabled pf-m-placeholder">
+<span class="pf-v5-c-form-control pf-m-disabled pf-m-placeholder">
   <select
     class
     disabled
@@ -330,28 +330,28 @@ cssPrefix: pf-v5-c-form-control
     <option value="Dr">Dr</option>
     <option value="Other">Other</option>
   </select>
-  <div class="pf-v5-c-form-control__utilities">
-    <div class="pf-v5-c-form-control__toggle-icon">
+  <span class="pf-v5-c-form-control__utilities">
+    <span class="pf-v5-c-form-control__toggle-icon">
       <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </div>
-  </div>
-</div>
+    </span>
+  </span>
+</span>
 
 ```
 
 ### Textarea
 
 ```html
-<div class="pf-v5-c-form-control">
+<span class="pf-v5-c-form-control">
   <textarea
     name="textarea-standard"
     id="textarea-standard"
     aria-label="Standard textarea example"
   >Standard
 </textarea>
-</div>
+</span>
 <br />
-<div class="pf-v5-c-form-control pf-m-readonly">
+<span class="pf-v5-c-form-control pf-m-readonly">
   <textarea
     readonly
     name="textarea-readonly"
@@ -359,9 +359,9 @@ cssPrefix: pf-v5-c-form-control
     aria-label="Readonly textarea example"
   >Readonly
 </textarea>
-</div>
+</span>
 <br />
-<div class="pf-v5-c-form-control pf-m-readonly pf-m-plain">
+<span class="pf-v5-c-form-control pf-m-readonly pf-m-plain">
   <textarea
     readonly
     name="textarea-readonly-plain"
@@ -369,9 +369,9 @@ cssPrefix: pf-v5-c-form-control
     aria-label="Readonly plain textarea example"
   >Readonly plain
 </textarea>
-</div>
+</span>
 <br />
-<div class="pf-v5-c-form-control pf-m-disabled">
+<span class="pf-v5-c-form-control pf-m-disabled">
   <textarea
     disabled
     name="textarea-disabled"
@@ -379,37 +379,37 @@ cssPrefix: pf-v5-c-form-control
     aria-label="Disabled textarea example"
   >Disabled
 </textarea>
-</div>
+</span>
 <br />
-<div class="pf-v5-c-form-control pf-m-success">
+<span class="pf-v5-c-form-control pf-m-success">
   <textarea
     name="textarea-success"
     id="textarea-success"
     aria-label="Success state textarea example"
   >Success
 </textarea>
-  <div class="pf-v5-c-form-control__utilities">
-    <div class="pf-v5-c-form-control__icon pf-m-status">
+  <span class="pf-v5-c-form-control__utilities">
+    <span class="pf-v5-c-form-control__icon pf-m-status">
       <i class="fas fa-check-circle" aria-hidden="true"></i>
-    </div>
-  </div>
-</div>
+    </span>
+  </span>
+</span>
 <br />
-<div class="pf-v5-c-form-control pf-m-warning">
+<span class="pf-v5-c-form-control pf-m-warning">
   <textarea
     name="textarea-warning"
     id="textarea-warning"
     aria-label="Warning state textarea example"
   >Warning
 </textarea>
-  <div class="pf-v5-c-form-control__utilities">
-    <div class="pf-v5-c-form-control__icon pf-m-status">
+  <span class="pf-v5-c-form-control__utilities">
+    <span class="pf-v5-c-form-control__icon pf-m-status">
       <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
-    </div>
-  </div>
-</div>
+    </span>
+  </span>
+</span>
 <br />
-<div class="pf-v5-c-form-control pf-m-error">
+<span class="pf-v5-c-form-control pf-m-error">
   <textarea
     required
     name="textarea-error"
@@ -418,39 +418,39 @@ cssPrefix: pf-v5-c-form-control
     aria-invalid="true"
   >Error
 </textarea>
-  <div class="pf-v5-c-form-control__utilities">
-    <div class="pf-v5-c-form-control__icon pf-m-status">
+  <span class="pf-v5-c-form-control__utilities">
+    <span class="pf-v5-c-form-control__icon pf-m-status">
       <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
-    </div>
-  </div>
-</div>
+    </span>
+  </span>
+</span>
 <br />
-<div class="pf-v5-c-form-control pf-m-resize-vertical">
+<span class="pf-v5-c-form-control pf-m-resize-vertical">
   <textarea
     name="textarea-resize-vertical"
     id="textarea-resize-vertical"
     aria-label="Resize vertical textarea example"
   >Resizes vertically
 </textarea>
-</div>
+</span>
 <br />
-<div class="pf-v5-c-form-control pf-m-resize-horizontal">
+<span class="pf-v5-c-form-control pf-m-resize-horizontal">
   <textarea
     name="textarea-resize-horizontal"
     id="textarea-resize-horizontal"
     aria-label="Resize horizontal textarea example"
   >Resizes horizontally
 </textarea>
-</div>
+</span>
 <br />
-<div class="pf-v5-c-form-control pf-m-resize-both">
+<span class="pf-v5-c-form-control pf-m-resize-both">
   <textarea
     name="textarea-resize-both"
     id="textarea-resize-both"
     aria-label="Resize both textarea example"
   >Resizes in both directions
 </textarea>
-</div>
+</span>
 
 ```
 
@@ -469,10 +469,10 @@ cssPrefix: pf-v5-c-form-control
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-form-control` | `<div>` |  Initiates a container for an input, text area or select. For styling of checkboxes or radios see the [checkbox component](/components/checkbox) or [radio component](/components/radio). **Required**  |
-| `.pf-v5-c-form-control__utilities` | `<div>` |  Initiates a container for elements like icons to be associated with the form control.  |
-| `.pf-v5-c-form-control__icon` | `<div>` |  Creates a container for an icon associated with a form control.  |
-| `.pf-v5-c-form-control__toggle-icon` | `<div>` |  Initiates a toggle icon for a form select.  |
+| `.pf-v5-c-form-control` | `<span>` |  Initiates a container for an input, text area or select. For styling of checkboxes or radios see the [checkbox component](/components/forms/checkbox) or [radio component](/components/forms/radio). **Required**  |
+| `.pf-v5-c-form-control__utilities` | `<span>` |  Initiates a container for elements like icons to be associated with the form control.  |
+| `.pf-v5-c-form-control__icon` | `<span>` |  Creates a container for an icon associated with a form control.  |
+| `.pf-v5-c-form-control__toggle-icon` | `<span>` |  Initiates a toggle icon for a form select.  |
 | `.pf-m-resize-vertical` | `.pf-v5-c-form-control` | Modifies a form control element containing a text area so it can only be resized vertically. |
 | `.pf-m-resize-horizontal` | `.pf-v5-c-form-control` | Modifies a form control element containing a text area so it can only be resized horizontally. |
 | `.pf-m-resize-both` | `.pf-v5-c-form-control` | Modifies a `.pf-v5-c-form-control` element containing a text area so it resizes in both directions. |

package/{docs → dist/docs}/components/Icon/examples/Icon.md

@@ -238,7 +238,7 @@ extra large
 
 The icon element is a container used to maintain a stable space for an icon or spinner, regardless of size or aspect ratio of the contents.
 
-Refer to the [icons](/guidelines/icons) page for information about the PatternFly icon set and guidelines for use.
+Refer to the [icons](/design-foundations/icons) page for information about the PatternFly icon set and guidelines for use.
 
 ### Usage