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

package/docs/components/LabelGroup/examples/LabelGroup.md

@@ -606,7 +606,7 @@ cssPrefix: pf-c-label-group
 
 In addition to the JavaScript management of [editable labels](/components/label#editable), dynamic label groups also need:
 
--   `.pf-c-label-group.pf-m-editable` onClick event should (excluding labels within) set focus on `.pf-c-label-group__textarea`
+*   `.pf-c-label-group.pf-m-editable` onClick event should (excluding labels within) set focus on `.pf-c-label-group__textarea`
 
 ### Editable labels, dynamic label group
 
@@ -740,9 +740,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
         </span>
       </li>
       <li class="pf-c-label-group__list-item">
-        <span
-          class="pf-c-label pf-m-blue pf-m-active pf-m-editable pf-m-editable-active"
-        >
+        <span class="pf-c-label pf-m-blue pf-m-editable pf-m-editable-active">
           <input
             class="pf-c-label__content"
             id="editable-labels-label-active-editable-group-example-editable-label-active-editable-content"
@@ -751,16 +749,6 @@ In addition to the JavaScript management of [editable labels](/components/label#
         "
             aria-label="Editable text"
           />
-
-          <button
-            class="pf-c-button pf-m-plain"
-            type="button"
-            id="editable-labels-label-active-editable-group-example-editable-label-active-button"
-            aria-label="Remove"
-            aria-labelledby="editable-labels-label-active-editable-group-example-editable-label-active-button editable-labels-label-active-editable-group-example-editable-label-active-text"
-          >
-            <i class="fas fa-times" aria-hidden="true"></i>
-          </button>
         </span>
       </li>
       <li class="pf-c-label-group__list-item pf-m-textarea">
@@ -916,7 +904,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
         </span>
       </li>
       <li class="pf-c-label-group__list-item">
-        <span class="pf-c-label pf-m-blue pf-m-active pf-m-editable">
+        <span class="pf-c-label pf-m-blue pf-m-editable">
           <button
             class="pf-c-label__content"
             id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-editable-content"
@@ -1085,27 +1073,27 @@ In addition to the JavaScript management of [editable labels](/components/label#
 
 ### Accessibility
 
-| Attribute                                                                                                  | Applied to                          | Outcome                                                                                                                                                                                                   |
-| ---------------------------------------------------------------------------------------------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `role="list"`                                                                                              | `.pf-c-label-group__list`           | Indicates that the label group list is a list element. This role is redundant since `.pf-c-label-group__list` is a `<ul>` but is required for screen readers to announce the list propertly. **Required** |
-| `aria-label="[button label text]"`                                                                         | `.pf-c-label-group__close > button` | Provides an accessible name for a label group close button when an icon is used instead of text. Required when an icon is used with no supporting text. **Required**                                      |
-| `aria-labelledby="[id value of .pf-c-label-group__close > button] [id value of .pf-c-label-group__label]"` | `.pf-c-label-group__close > button` | Provides an accessible name for the button. **Required**                                                                                                                                                  |
-| `aria-label="[label text]"`                                                                                | `.pf-c-label-group__textarea`       | Provides an accessible name for the textarea. **Required**                                                                                                                                                |
-| `row="1"`                                                                                                  | `.pf-c-label-group__textarea`       | Indicates that the label group textarea is one row. **Required**                                                                                                                                          |
-| `tabindex="0"`                                                                                             | `.pf-c-label-group__textarea`       | Inserts the label group textarea into the tab order of the page so that it is focusable. **Required**                                                                                                     |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `role="list"` | `.pf-c-label-group__list` | Indicates that the label group list is a list element. This role is redundant since `.pf-c-label-group__list` is a `<ul>` but is required for screen readers to announce the list propertly. **Required** |
+| `aria-label="[button label text]"` | `.pf-c-label-group__close > button` |  Provides an accessible name for a label group close button when an icon is used instead of text. Required when an icon is used with no supporting text. **Required** |
+| `aria-labelledby="[id value of .pf-c-label-group__close > button] [id value of .pf-c-label-group__label]"` | `.pf-c-label-group__close > button` | Provides an accessible name for the button. **Required** |
+| `aria-label="[label text]"` | `.pf-c-label-group__textarea` | Provides an accessible name for the textarea. **Required** |
+| `row="1"` | `.pf-c-label-group__textarea` | Indicates that the label group textarea is one row. **Required** |
+| `tabindex="0"` | `.pf-c-label-group__textarea` | Inserts the label group textarea into the tab order of the page so that it is focusable. **Required** |
 
 ### Usage
 
-| Class                          | Applied to                          | Outcome                                                                                      |
-| ------------------------------ | ----------------------------------- | -------------------------------------------------------------------------------------------- |
-| `.pf-c-label-group`            | `<div>`                             | Initiates the label group component. **Required.**                                           |
-| `.pf-c-label-group__list`      | `<ul>`                              | Initiates the container for a list of labels. **Required.**                                  |
-| `.pf-c-label-group__list-item` | `<li>`                              | Initiates the list item inside of the label group. **Required.**                             |
-| `.pf-c-label-group__main`      | `<div>`                             | Initiates the main element in the label group. **Required when label and list are present**  |
-| `.pf-c-label-group__textarea`  | `<textarea>`                        | Initiates the textarea element in the label group. **Required when label group is editable** |
-| `.pf-c-label-group__label`     | `<span>`                            | Initiates the label to be used in the label group.                                           |
-| `.pf-c-label-group__close`     | `<div>`                             | Initiates the container used for the button to remove the label group.                       |
-| `.pf-c-button`                 | `.pf-c-label-group__close <button>` | Initiates the button used to remove the label group.                                         |
-| `.pf-m-editable`               | `.pf-c-label-group`                 | Modifies the label group to support editable styling.                                        |
-| `.pf-m-category`               | `.pf-c-label-group`                 | Modifies the label group to support category styling.                                        |
-| `.pf-m-textarea`               | `.pf-c-label-group__list-item`      | Modifies the label group list item to support textarea.                                      |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-label-group` | `<div>` | Initiates the label group component. **Required.** |
+| `.pf-c-label-group__list` | `<ul>` | Initiates the container for a list of labels. **Required.** |
+| `.pf-c-label-group__list-item` | `<li>` | Initiates the list item inside of the label group. **Required.** |
+| `.pf-c-label-group__main` | `<div>` | Initiates the main element in the label group. **Required when label and list are present** |
+| `.pf-c-label-group__textarea` | `<textarea>` | Initiates the textarea element in the label group. **Required when label group is editable** |
+| `.pf-c-label-group__label` | `<span>` | Initiates the label to be used in the label group. |
+| `.pf-c-label-group__close` | `<div>` | Initiates the container used for the button to remove the label group. |
+| `.pf-c-button` | `.pf-c-label-group__close <button>` | Initiates the button used to remove the label group. |
+| `.pf-m-editable` | `.pf-c-label-group` | Modifies the label group to support editable styling. |
+| `.pf-m-category` | `.pf-c-label-group` | Modifies the label group to support category styling. |
+| `.pf-m-textarea` | `.pf-c-label-group__list-item` | Modifies the label group list item to support textarea. |

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>
@@ -5157,9 +5157,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 +5532,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 +5693,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). |