@patternfly/patternfly 5.0.0-alpha.3 → 5.0.0-alpha.30

package/docs/components/List/examples/List.md

@@ -7,17 +7,17 @@ cssPrefix: pf-c-list
 ### Unordered
 
 ```html
-<ul class="pf-c-list">
+<ul class="pf-c-list" role="list">
   <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
   <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
   <li>
     Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
-    <ul class="pf-c-list">
+    <ul class="pf-c-list" role="list">
       <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
       <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
       <li>
         Ut venenatis, nisl scelerisque.
-        <ol class="pf-c-list">
+        <ol class="pf-c-list" role="list">
           <li>Donec blandit a lorem id convallis.</li>
           <li>Cras gravida arcu at diam gravida gravida.</li>
           <li>Integer in volutpat libero.</li>
@@ -33,19 +33,19 @@ cssPrefix: pf-c-list
 ### Ordered
 
 ```html
-<ol class="pf-c-list">
+<ol class="pf-c-list" role="list">
   <li>Donec blandit a lorem id convallis.</li>
   <li>Cras gravida arcu at diam gravida gravida.</li>
   <li>Integer in volutpat libero.</li>
   <li>Donec a diam tellus.</li>
   <li>
     Etiam auctor nisl et.
-    <ul class="pf-c-list">
+    <ul class="pf-c-list" role="list">
       <li>Donec blandit a lorem id convallis.</li>
       <li>Cras gravida arcu at diam gravida gravida.</li>
       <li>
         Integer in volutpat libero.
-        <ol class="pf-c-list">
+        <ol class="pf-c-list" role="list">
           <li>Donec blandit a lorem id convallis.</li>
           <li>Cras gravida arcu at diam gravida gravida.</li>
         </ol>
@@ -62,7 +62,7 @@ cssPrefix: pf-c-list
 ### Inline
 
 ```html
-<ul class="pf-c-list pf-m-inline">
+<ul class="pf-c-list pf-m-inline" role="list">
   <li>Inline list item 1</li>
   <li>Inline list item 2</li>
   <li>Inline list item 3</li>
@@ -73,12 +73,12 @@ cssPrefix: pf-c-list
 ### Plain
 
 ```html
-<ul class="pf-c-list pf-m-plain">
+<ul class="pf-c-list pf-m-plain" role="list">
   <li>Donec blandit a lorem id convallis.</li>
   <li>Integer in volutpat libero.</li>
   <li>
     Donec a diam tellus.
-    <ul class="pf-c-list">
+    <ul class="pf-c-list" role="list">
       <li>Donec blandit a lorem id convallis.</li>
       <li>Cras gravida arcu at diam gravida gravida.</li>
       <li>Integer in volutpat libero.</li>
@@ -93,7 +93,7 @@ cssPrefix: pf-c-list
 ### With horizontal rules
 
 ```html
-<ul class="pf-c-list pf-m-plain pf-m-bordered">
+<ul class="pf-c-list pf-m-plain pf-m-bordered" role="list">
   <li>Donec blandit a lorem id convallis.</li>
   <li>Integer in volutpat libero.</li>
   <li>Donec a diam tellus.</li>
@@ -106,7 +106,7 @@ cssPrefix: pf-c-list
 ### With small icons
 
 ```html
-<ul class="pf-c-list pf-m-plain">
+<ul class="pf-c-list pf-m-plain" role="list">
   <li class="pf-c-list__item">
     <span class="pf-c-list__item-icon">
       <i class="fas fa-book-open fa-fw" aria-hidden="true"></i>
@@ -132,7 +132,7 @@ cssPrefix: pf-c-list
 ### With large icons
 
 ```html
-<ul class="pf-c-list pf-m-plain pf-m-icon-lg">
+<ul class="pf-c-list pf-m-plain pf-m-icon-lg" role="list">
   <li class="pf-c-list__item">
     <span class="pf-c-list__item-icon">
       <i class="fas fa-book-open fa-fw" aria-hidden="true"></i>
@@ -163,10 +163,10 @@ Non-inline lists can be nested up to any level.
 
 ### Usage
 
-| Class            | Applied to   | Outcome                                         |
-| ---------------- | ------------ | ----------------------------------------------- |
-| `.pf-c-list`     | `<ul>, <ol>` | Initiates a list. **Required**                  |
-| `.pf-m-inline`   | `.pf-c-list` | Displays list items inline.                     |
-| `.pf-m-plain`    | `.pf-c-list` | Removes the list marker and base indentation.   |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-list` | `<ul>, <ol>` | Initiates a list. **Required**  |
+| `.pf-m-inline` | `.pf-c-list` | Displays list items inline. |
+| `.pf-m-plain` | `.pf-c-list` |  Removes the list marker and base indentation. |
 | `.pf-m-bordered` | `.pf-c-list` | Add horizontal divider between items in a list. |
-| `.pf-m-icon-lg`  | `.pf-c-list` | Show all the icons or logos in the list large.  |
+| `.pf-m-icon-lg` | `.pf-c-list` | Show all the icons or logos in the list large. |

package/docs/components/LogViewer/examples/LogViewer.md

@@ -98,9 +98,9 @@ cssPrefix: pf-c-log-viewer
                     </span>
                     <input
                       class="pf-c-text-input-group__text-input"
-                      type="text"
-                      value
+                      type="search"
                       placeholder="Find"
+                      value
                       aria-label="Type to filter"
                     />
                   </span>
@@ -446,9 +446,9 @@ cssPrefix: pf-c-log-viewer
                   </span>
                   <input
                     class="pf-c-text-input-group__text-input"
-                    type="text"
-                    value
+                    type="search"
                     placeholder="Find"
+                    value
                     aria-label="Type to filter"
                   />
                 </span>
@@ -650,9 +650,9 @@ cssPrefix: pf-c-log-viewer
                     </span>
                     <input
                       class="pf-c-text-input-group__text-input"
-                      type="text"
-                      value
+                      type="search"
                       placeholder="Find"
+                      value
                       aria-label="Type to filter"
                     />
                   </span>
@@ -998,9 +998,9 @@ cssPrefix: pf-c-log-viewer
                   </span>
                   <input
                     class="pf-c-text-input-group__text-input"
-                    type="text"
-                    value
+                    type="search"
                     placeholder="Find"
+                    value
                     aria-label="Type to filter"
                   />
                 </span>
@@ -1202,9 +1202,9 @@ cssPrefix: pf-c-log-viewer
                     </span>
                     <input
                       class="pf-c-text-input-group__text-input"
-                      type="text"
-                      value
+                      type="search"
                       placeholder="Find"
+                      value
                       aria-label="Type to filter"
                     />
                   </span>
@@ -1550,9 +1550,9 @@ cssPrefix: pf-c-log-viewer
                   </span>
                   <input
                     class="pf-c-text-input-group__text-input"
-                    type="text"
-                    value
+                    type="search"
                     placeholder="Find"
+                    value
                     aria-label="Type to filter"
                   />
                 </span>
@@ -1754,9 +1754,9 @@ cssPrefix: pf-c-log-viewer
                     </span>
                     <input
                       class="pf-c-text-input-group__text-input"
-                      type="text"
-                      value
+                      type="search"
                       placeholder="Find"
+                      value
                       aria-label="Type to filter"
                     />
                   </span>
@@ -2102,9 +2102,9 @@ cssPrefix: pf-c-log-viewer
                   </span>
                   <input
                     class="pf-c-text-input-group__text-input"
-                    type="text"
-                    value
+                    type="search"
                     placeholder="Find"
+                    value
                     aria-label="Type to filter"
                   />
                 </span>
@@ -2306,9 +2306,9 @@ cssPrefix: pf-c-log-viewer
                     </span>
                     <input
                       class="pf-c-text-input-group__text-input"
-                      type="text"
-                      value
+                      type="search"
                       placeholder="Find"
+                      value
                       aria-label="Type to filter"
                     />
                   </span>
@@ -2654,9 +2654,9 @@ cssPrefix: pf-c-log-viewer
                   </span>
                   <input
                     class="pf-c-text-input-group__text-input"
-                    type="text"
-                    value
+                    type="search"
                     placeholder="Find"
+                    value
                     aria-label="Type to filter"
                   />
                 </span>
@@ -2858,9 +2858,9 @@ cssPrefix: pf-c-log-viewer
                     </span>
                     <input
                       class="pf-c-text-input-group__text-input"
-                      type="text"
-                      value="openshift"
+                      type="search"
                       placeholder="Find"
+                      value="openshift"
                       aria-label="Type to filter"
                     />
                   </span>
@@ -3233,9 +3233,9 @@ cssPrefix: pf-c-log-viewer
                   </span>
                   <input
                     class="pf-c-text-input-group__text-input"
-                    type="text"
-                    value="openshift"
+                    type="search"
                     placeholder="Find"
+                    value="openshift"
                     aria-label="Type to filter"
                   />
                 </span>
@@ -3480,9 +3480,9 @@ cssPrefix: pf-c-log-viewer
                     </span>
                     <input
                       class="pf-c-text-input-group__text-input"
-                      type="text"
-                      value
+                      type="search"
                       placeholder="Find"
+                      value
                       aria-label="Type to filter"
                     />
                   </span>
@@ -3828,9 +3828,9 @@ cssPrefix: pf-c-log-viewer
                   </span>
                   <input
                     class="pf-c-text-input-group__text-input"
-                    type="text"
-                    value
+                    type="search"
                     placeholder="Find"
+                    value
                     aria-label="Type to filter"
                   />
                 </span>
@@ -4032,9 +4032,9 @@ cssPrefix: pf-c-log-viewer
                     </span>
                     <input
                       class="pf-c-text-input-group__text-input"
-                      type="text"
-                      value
+                      type="search"
                       placeholder="Find"
+                      value
                       aria-label="Type to filter"
                     />
                   </span>
@@ -4378,9 +4378,9 @@ cssPrefix: pf-c-log-viewer
                   </span>
                   <input
                     class="pf-c-text-input-group__text-input"
-                    type="text"
-                    value
+                    type="search"
                     placeholder="Find"
+                    value
                     aria-label="Type to filter"
                   />
                 </span>
@@ -4582,9 +4582,9 @@ cssPrefix: pf-c-log-viewer
                     </span>
                     <input
                       class="pf-c-text-input-group__text-input"
-                      type="text"
-                      value
+                      type="search"
                       placeholder="Find"
+                      value
                       aria-label="Type to filter"
                     />
                   </span>
@@ -4930,9 +4930,9 @@ cssPrefix: pf-c-log-viewer
                   </span>
                   <input
                     class="pf-c-text-input-group__text-input"
-                    type="text"
-                    value
+                    type="search"
                     placeholder="Find"
+                    value
                     aria-label="Type to filter"
                   />
                 </span>
@@ -5049,10 +5049,16 @@ cssPrefix: pf-c-log-viewer
 >
   <div class="pf-c-popover__arrow"></div>
   <div class="pf-c-popover__content">
-    <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
-      <i class="fas fa-times" aria-hidden="true"></i>
-    </button>
-    <h1 class="pf-c-title pf-m-md" id="popover-bottom-header">Clear this log?</h1>
+    <div class="pf-c-popover__close">
+      <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </button>
+    </div>
+    <header class="pf-c-popover__header">
+      <div class="pf-c-popover__title" id="popover-bottom-header">
+        <h1 class="pf-c-popover__title-text">Clear this log?</h1>
+      </div>
+    </header>
     <div
       class="pf-c-popover__body"
       id="popover-bottom-body"
@@ -5157,9 +5163,9 @@ cssPrefix: pf-c-log-viewer
                     </span>
                     <input
                       class="pf-c-text-input-group__text-input"
-                      type="text"
-                      value="openshift"
+                      type="search"
                       placeholder="Find"
+                      value="openshift"
                       aria-label="Type to filter"
                     />
                   </span>
@@ -5532,9 +5538,9 @@ cssPrefix: pf-c-log-viewer
                   </span>
                   <input
                     class="pf-c-text-input-group__text-input"
-                    type="text"
-                    value="openshift"
+                    type="search"
                     placeholder="Find"
+                    value="openshift"
                     aria-label="Type to filter"
                   />
                 </span>
@@ -5693,35 +5699,35 @@ cssPrefix: pf-c-log-viewer
 
 ### Accessibility
 
-| Attribute                 | Applied                                      | Outcome                                                                                                                                               |
-| ------------------------- | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `aria-label="Log viewer"` | `.pf-c-log-viewer`                           | Provides an accessible label for the log viewer.                                                                                                      |
-| `role="log"`              | `.pf-c-log-viewer__main`                     | Identifies an element that creates a live region where new information is added in a meaningful order and old information may disappear. **Required** |
-| `aria-live="polite"`      | `.pf-c-log-viewer__list`                     | Allows assistive technologies to automatically read new content within the aria-live region on the place where the text is displayed.                 |
-| `aria-atomic="true"`      | `.pf-c-log-viewer__list`                     | Allows assistive technologies to notify a user when log messages are added.                                                                           |
-| `tabindex="0"`            | `.pf-c-log-viewer`, `.pf-c-log-viewer__list` | Inserts the element into the tab order of the page so that it is focusable. **Required**                                                              |
-| `aria-hidden="true"`      | `.pf-c-log-viewer__index`                    | Hides an index from assistive technologies.                                                                                                           |
+| Attribute | Applied | Outcome |
+| -- | -- | -- |
+| `aria-label="Log viewer"` | `.pf-c-log-viewer` | Provides an accessible label for the log viewer. |
+| `role="log"` | `.pf-c-log-viewer__main` | Identifies an element that creates a live region where new information is added in a meaningful order and old information may disappear. **Required** |
+| `aria-live="polite"` | `.pf-c-log-viewer__list` | Allows assistive technologies to automatically read new content within the aria-live region on the place where the text is displayed. |
+| `aria-atomic="true"` | `.pf-c-log-viewer__list` | Allows assistive technologies to notify a user when log messages are added. |
+| `tabindex="0"` | `.pf-c-log-viewer`, `.pf-c-log-viewer__list` | Inserts the element into the tab order of the page so that it is focusable. **Required** |
+| `aria-hidden="true"` | `.pf-c-log-viewer__index` | Hides an index from assistive technologies. |
 
 ### Usage
 
-| Class                                                      | Applied to                 | Outcome                                                                                                                                                |
-| ---------------------------------------------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `.pf-c-log-viewer`                                         | `<div>`                    | Initiates a log viewer. **Required**                                                                                                                   |
-| `.pf-c-log-viewer__header`                                 | `<div>`                    | Initiates the header container for a log viewer. **Required**                                                                                          |
-| `.pf-c-log-viewer__main`                                   | `<div>`                    | Initiates the main container for a log viewer. **Required**                                                                                            |
-| `.pf-c-log-viewer__scroll-container`                       | `<div>`                    | Initiates the scroll container for a log viewer. **Required**                                                                                          |
-| `.pf-c-log-viewer__list`                                   | `<ul>`                     | Initiates the log viewer list. **Required**                                                                                                            |
-| `.pf-c-log-viewer__list-item`                              | `<li>`                     | Initiates a log viewer list item. **Required**                                                                                                         |
-| `.pf-c-log-viewer__index`                                  | `<span>`                   | Initiates a log viewer index element. **Required for numbered list**                                                                                   |
-| `.pf-c-log-viewer__text`                                   | `<div>`                    | Initiates a log viewer text element. **Required**                                                                                                      |
-| `.pf-c-log-viewer__string`                                 | `<span>`                   | Initiates a log viewer string element.                                                                                                                 |
-| `.pf-c-log-viewer__timestamp`                              | `<div>`                    | Initiates a log viewer text element. **Required**                                                                                                      |
-| `.pf-m-wrap-text`                                          | `.pf-c-log-viewer`         | Modifies the log viewer text to wrap.                                                                                                                  |
-| `.pf-m-nowrap`                                             | `.pf-c-log-viewer`         | Modifies the log viewer text to not wrap.                                                                                                              |
-| `.pf-m-line-numbers`                                       | `.pf-c-log-viewer`         | Modifies the log viewer to display line numbers.                                                                                                       |
-| `.pf-m-line-number-chars`                                  | `.pf-c-log-viewer`         | Modifies the log viewer allow for a custom line number column size. Use with `--pf-c-log-viewer--line-number-chars`.                                   |
-| `.pf-m-dark`                                               | `.pf-c-log-viewer`         | Modifies the log viewer content for dark theme.                                                                                                        |
-| `.pf-m-match`                                              | `.pf-c-log-viewer__string` | Indicates a string is a search result.                                                                                                                 |
-| `.pf-m-current`                                            | `.pf-c-log-viewer__string` | Indicates a string is the current search result.                                                                                                       |
-| `--pf-c-log-viewer--line-number-chars`                     | `.pf-c-log-viewer`         | With a number passed as the value, modifies the width of the line number column to show the specified number of characters.                            |
-| `--pf-c-log-viewer--MaxHeight{-on-[breakpoint]}: {height}` | `.pf-c-log-viewer`         | Modifies the height value of a log viewer at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-log-viewer` | `<div>` | Initiates a log viewer. **Required** |
+| `.pf-c-log-viewer__header` | `<div>` | Initiates the header container for a log viewer. **Required** |
+| `.pf-c-log-viewer__main` | `<div>` | Initiates the main container for a log viewer. **Required** |
+| `.pf-c-log-viewer__scroll-container` | `<div>` | Initiates the scroll container for a log viewer. **Required** |
+| `.pf-c-log-viewer__list` | `<ul>` | Initiates the log viewer list. **Required** |
+| `.pf-c-log-viewer__list-item` | `<li>` | Initiates a log viewer list item. **Required** |
+| `.pf-c-log-viewer__index` | `<span>` | Initiates a log viewer index element. **Required for numbered list** |
+| `.pf-c-log-viewer__text` | `<div>` | Initiates a log viewer text element. **Required** |
+| `.pf-c-log-viewer__string` | `<span>` | Initiates a log viewer string element. |
+| `.pf-c-log-viewer__timestamp` | `<div>` | Initiates a log viewer text element. **Required** |
+| `.pf-m-wrap-text` | `.pf-c-log-viewer` | Modifies the log viewer text to wrap. |
+| `.pf-m-nowrap` | `.pf-c-log-viewer` | Modifies the log viewer text to not wrap. |
+| `.pf-m-line-numbers` | `.pf-c-log-viewer` | Modifies the log viewer to display line numbers. |
+| `.pf-m-line-number-chars` | `.pf-c-log-viewer` | Modifies the log viewer allow for a custom line number column size. Use with `--pf-c-log-viewer--line-number-chars`. |
+| `.pf-m-dark` | `.pf-c-log-viewer` | Modifies the log viewer content for dark theme. |
+| `.pf-m-match` | `.pf-c-log-viewer__string` | Indicates a string is a search result. |
+| `.pf-m-current` | `.pf-c-log-viewer__string` | Indicates a string is the current search result. |
+| `--pf-c-log-viewer--line-number-chars` | `.pf-c-log-viewer` | With a number passed as the value, modifies the width of the line number column to show the specified number of characters. |
+| `--pf-c-log-viewer--MaxHeight{-on-[breakpoint]}: {height}` | `.pf-c-log-viewer` |  Modifies the height value of a log viewer at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |

package/docs/components/Login/examples/Login.md

@@ -104,7 +104,7 @@ wrapperTag: div
         </form>
       </div>
       <footer class="pf-c-login__main-footer">
-        <ul class="pf-c-login__main-footer-links">
+        <ul class="pf-c-login__main-footer-links" role="list">
           <li class="pf-c-login__main-footer-links-item">
             <a
               href="#"
@@ -204,7 +204,7 @@ wrapperTag: div
     </main>
     <footer class="pf-c-login__footer">
       <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
-      <ul class="pf-c-list pf-m-inline">
+      <ul class="pf-c-list pf-m-inline" role="list">
         <li>
           <a href="#">Terms of use</a>
         </li>
@@ -326,7 +326,7 @@ wrapperTag: div
         </form>
       </div>
       <footer class="pf-c-login__main-footer">
-        <ul class="pf-c-login__main-footer-links">
+        <ul class="pf-c-login__main-footer-links" role="list">
           <li class="pf-c-login__main-footer-links-item">
             <a
               href="#"
@@ -426,7 +426,7 @@ wrapperTag: div
     </main>
     <footer class="pf-c-login__footer">
       <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
-      <ul class="pf-c-list pf-m-inline">
+      <ul class="pf-c-list pf-m-inline" role="list">
         <li>
           <a href="#">Terms of use</a>
         </li>
@@ -553,7 +553,7 @@ wrapperTag: div
         </form>
       </div>
       <footer class="pf-c-login__main-footer">
-        <ul class="pf-c-login__main-footer-links">
+        <ul class="pf-c-login__main-footer-links" role="list">
           <li class="pf-c-login__main-footer-links-item">
             <a
               href="#"
@@ -653,7 +653,7 @@ wrapperTag: div
     </main>
     <footer class="pf-c-login__footer">
       <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
-      <ul class="pf-c-list pf-m-inline">
+      <ul class="pf-c-list pf-m-inline" role="list">
         <li>
           <a href="#">Terms of use</a>
         </li>
@@ -780,7 +780,7 @@ wrapperTag: div
         </form>
       </div>
       <footer class="pf-c-login__main-footer">
-        <ul class="pf-c-login__main-footer-links">
+        <ul class="pf-c-login__main-footer-links" role="list">
           <li class="pf-c-login__main-footer-links-item">
             <a
               href="#"
@@ -880,7 +880,7 @@ wrapperTag: div
     </main>
     <footer class="pf-c-login__footer">
       <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
-      <ul class="pf-c-list pf-m-inline">
+      <ul class="pf-c-list pf-m-inline" role="list">
         <li>
           <a href="#">Terms of use</a>
         </li>
@@ -1042,7 +1042,7 @@ wrapperTag: div
         </form>
       </div>
       <footer class="pf-c-login__main-footer">
-        <ul class="pf-c-login__main-footer-links">
+        <ul class="pf-c-login__main-footer-links" role="list">
           <li class="pf-c-login__main-footer-links-item">
             <a
               href="#"
@@ -1142,7 +1142,7 @@ wrapperTag: div
     </main>
     <footer class="pf-c-login__footer">
       <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
-      <ul class="pf-c-list pf-m-inline">
+      <ul class="pf-c-list pf-m-inline" role="list">
         <li>
           <a href="#">Terms of use</a>
         </li>
@@ -1163,25 +1163,25 @@ wrapperTag: div
 
 ### Usage
 
-| Class                                                                 | Applied to                      | Outcome                                                                                                        |
-| --------------------------------------------------------------------- | ------------------------------- | -------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-login`                                                         | `<div>`                         | Initializes the login component. **Required**                                                                  |
-| `.pf-c-login__container`                                              | `<div>`                         | Positions the login component content. **Required**                                                            |
-| `.pf-c-login__header`                                                 | `<header>`                      | Positions the login header. **Required**                                                                       |
-| `.pf-c-login__header .pf-c-brand`                                     | `<img>`                         | Creates a brand image inside of login header. **Required**                                                     |
-| `.pf-c-login__main`                                                   | `<main>`                        | Positions the login main area. **Required**                                                                    |
-| `.pf-c-login__main-header`                                            | `<header>`                      | Creates the header of the main area. **Required**                                                              |
-| `.pf-c-login__main-header .pf-c-title`                                | `<h1>,<h2>,<h3>,<h4>,<h5>,<h6>` | Creates a title in the main header area. **Required**                                                          |
-| `.pf-c-login__main-header-desc`                                       | `<p>`                           | Creates the description in the main area header.                                                               |
-| `.pf-c-login__main-header-utilities`                                  | `<div>`                         | Creates a utilities section in the main header area. **Note:** For use with a language selector menu.          |
-| `.pf-c-login__main-body`                                              | `<div>`                         | Creates the body of the main area. **Required**                                                                |
-| `.pf-c-login__main-body .pf-c-form`                                   | `<form>`                        | Creates the login form in the main body area. **Required**                                                     |
-| `.pf-c-login__main-body .pf-c-form .pf-c-form-helper-text.pf-m-error` | `<form>`                        | Creates the error messages shown when the form has errors. When not active, apply `.pf-m-hidden.` **Required** |
-| `.pf-c-login__main-footer`                                            | `<footer>`                      | Creates the footer of the main area. **Required**                                                              |
-| `.pf-c-login__main-footer-links`                                      | `<ul>`                          | Creates a list of links in the main footer. **Required**                                                       |
-| `.pf-c-login__main-footer-links-item`                                 | `<li>`                          | Creates proper spacing for links in the main footer. **Required**                                              |
-| `.pf-c-login__main-footer-links-item-link`                            | `<a>`                           | Creates link in links list in footer. **Required**                                                             |
-| `.pf-c-login__main-footer-band`                                       | `<div>`                         | Styles a band in the footer.                                                                                   |
-| `.pf-c-login__main-footer-band-item`                                  | `<p>`                           | Adds information to the band in the footer.                                                                    |
-| `.pf-c-login__footer`                                                 | `<footer>`                      | Positions the login footer. **Required**                                                                       |
-| `.pf-c-login__footer .pf-c-list`                                      | `<ul>`                          | Creates a list of links in the login footer. **Required**                                                      |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-login` | `<div>` | Initializes the login component. **Required**|
+| `.pf-c-login__container` | `<div>` | Positions the login component content. **Required**|
+| `.pf-c-login__header` | `<header>` | Positions the login header. **Required**|
+| `.pf-c-login__header .pf-c-brand` | `<img>` | Creates a brand image inside of login header. **Required** |
+| `.pf-c-login__main` | `<main>` | Positions the login main area. **Required** |
+| `.pf-c-login__main-header` | `<header>` | Creates the header of the main area. **Required** |
+| `.pf-c-login__main-header .pf-c-title` | `<h1>,<h2>,<h3>,<h4>,<h5>,<h6>` | Creates a title in the main header area. **Required** |
+| `.pf-c-login__main-header-desc` | `<p>` | Creates the description in the main area header. |
+| `.pf-c-login__main-header-utilities` | `<div>` | Creates a utilities section in the main header area. **Note:** For use with a language selector menu. |
+| `.pf-c-login__main-body` | `<div>` | Creates the body of the main area. **Required** |
+| `.pf-c-login__main-body .pf-c-form` | `<form>` | Creates the login form in the main body area. **Required**|
+| `.pf-c-login__main-body .pf-c-form .pf-c-form-helper-text.pf-m-error` | `<form>` | Creates the error messages shown when the form has errors. When not active, apply `.pf-m-hidden.` **Required** |
+| `.pf-c-login__main-footer` | `<footer>` | Creates the footer of the main area. **Required** |
+| `.pf-c-login__main-footer-links` | `<ul>` | Creates a list of links in the main footer. **Required** |
+| `.pf-c-login__main-footer-links-item` | `<li>` | Creates proper spacing for links in the main footer. **Required** |
+| `.pf-c-login__main-footer-links-item-link` | `<a>` | Creates link in links list in footer. **Required** |
+| `.pf-c-login__main-footer-band` | `<div>` | Styles a band in the footer. |
+| `.pf-c-login__main-footer-band-item` | `<p>` | Adds information to the band in the footer. |
+| `.pf-c-login__footer` | `<footer>` | Positions the login footer. **Required** |
+| `.pf-c-login__footer .pf-c-list` | `<ul>` | Creates a list of links in the login footer. **Required** |

package/docs/components/Masthead/examples/masthead.md

@@ -200,13 +200,13 @@ cssPrefix: pf-c-masthead
 
 ### Usage
 
-| Class                                                       | Applied to       | Outcome                                                                                                                                           |
-| ----------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-masthead`                                            | `<header>`       | Initiates the masthead component. **Required**                                                                                                    |
-| `.pf-c-masthead__main`                                      | `<div>`          | Initiates the masthead main component. **Required**                                                                                               |
-| `.pf-c-masthead__toggle`                                    | `<span>`         | Initiates the masthead toggle component.                                                                                                          |
-| `.pf-c-masthead__brand`                                     | `<a>, <div>`     | Initiates the masthead content component.                                                                                                         |
-| `.pf-c-masthead__content`                                   | `<div>`          | Initiates the masthead content component.                                                                                                         |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-masthead` | `<header>` | Initiates the masthead component. **Required** |
+| `.pf-c-masthead__main` | `<div>` | Initiates the masthead main component. **Required** |
+| `.pf-c-masthead__toggle` | `<span>` | Initiates the masthead toggle component. |
+| `.pf-c-masthead__brand` | `<a>, <div>` | Initiates the masthead content component. |
+| `.pf-c-masthead__content` | `<div>` | Initiates the masthead content component. |
 | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-masthead` | Modifies masthead horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-light`                                               | `.pf-c-masthead` | Modifies a masthead component to have a light theme with a background color of `--pf-global--BackgroundColor--100`.                               |
-| `.pf-m-light-200`                                           | `.pf-c-masthead` | Modifies a masthead component to have a light theme with a background color of `--pf-global--BackgroundColor--200`.                               |
+| `.pf-m-light` | `.pf-c-masthead` |  Modifies a masthead component to have a light theme with a background color of `--pf-global--BackgroundColor--100`. |
+| `.pf-m-light-200` | `.pf-c-masthead` |  Modifies a masthead component to have a light theme with a background color of `--pf-global--BackgroundColor--200`. |