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

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

@@ -1,6 +1,5 @@
 ---
 id: 'Log viewer'
-beta: true
 section: extensions
 cssPrefix: pf-c-log-viewer
 ---import './LogViewer.css';
@@ -98,9 +97,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 +445,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 +649,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 +997,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 +1201,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 +1549,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 +1753,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 +2101,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 +2305,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 +2653,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 +2857,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 +3232,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 +3479,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 +3827,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 +4031,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 +4377,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 +4581,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 +4929,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 +5048,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 +5162,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 +5537,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 +5698,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). |