@patternfly/patternfly 6.5.0-prerelease.7 → 6.5.0-prerelease.8

package/docs/components/DataList/examples/DataList.md

@@ -2,9 +2,9 @@
 id: Data list
 section: components
 cssPrefix: pf-v6-c-data-list
----## Examples
+---## Basic data list
 
-### Basic
+### Basic data list example
 
 ```html
 <ul
@@ -40,7 +40,7 @@ cssPrefix: pf-v6-c-data-list
 
 ```
 
-### Accessibility
+### Basic data list accessibility
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
@@ -49,7 +49,7 @@ cssPrefix: pf-v6-c-data-list
 | `aria-labelledby`   | `.pf-v6-c-data-list__item` | Provides an accessible description for data list item. **Required** |
 | `id`                | `.pf-v6-c-data-list__cell`, `.pf-v6-c-data-list__cell *`  | Provides a reference for data list item description. **Required** |
 
-### Usage
+### Basic data list usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
@@ -63,7 +63,9 @@ cssPrefix: pf-v6-c-data-list
 | `.pf-m-no-fill` | `.pf-v6-c-data-list__cell` | Modifies a data list cell to not fill the available horizontal space. |
 | `.pf-m-align-right` | `.pf-v6-c-data-list__cell` | Modifies a data list cell to align-right. |
 
-### With headings
+## Data list with headings
+
+### Data list with headings example
 
 ```html
 <ul
@@ -101,11 +103,13 @@ cssPrefix: pf-v6-c-data-list
 
 ```
 
-### Usage
+### Data list with headings usage
 
 When a list item includes more than one block of content, it can be difficult for some screen reader users to discern where one list item ends and the next one begins. A simple way to provide better separation of list items is to define the primary content section as a heading. Headings are useful for indicating a new section of contents, but also provide an easy way for screen reader users to navigate to specific sections on the page. The heading level should be based on the context in which the DataList component is being used. For example, if the heading for the section that contains the DataList is a level 3, then `h4` elements should be used in the DataList list items.
 
-### Checkboxes, actions, and additional cells
+## Data list with checkboxes, actions, and additional cells
+
+### Data list with checkboxes, actions, and additional cells example
 
 ```html
 <ul
@@ -284,7 +288,7 @@ When a list item includes more than one block of content, it can be difficult fo
 
 ```
 
-### Accessibility
+### Data list with checkboxes, actions, and additional cells accessibility
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
@@ -293,7 +297,7 @@ When a list item includes more than one block of content, it can be difficult fo
 | `aria-labelledby="{title_cell_id} {data_list_action_id}"`  | `.pf-v6-c-data-list__action` > `.pf-v6-c-button`   | Creates an accessible label for the action button using the title cell and button label **Required** |
 | `id`  | `.pf-v6-c-data-list__cell > *`, `.pf-v6-c-data-list__check` > `.pf-v6-c-check__input`, `.pf-v6-c-data-list__action` > `.pf-v6-c-button` | Provides a reference for interactive elements. **Required** |
 
-### Usage
+### Data list with checkboxes, actions, and additional cells usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
@@ -304,7 +308,9 @@ When a list item includes more than one block of content, it can be difficult fo
 | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Hides an actions container at optional [breakpoint](/tokens/all-patternfly-tokens), or hides it at all breakpoints with `.pf-m-hidden`. |
 | `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Shows an actions container at optional [breakpoint](/tokens/all-patternfly-tokens). |
 
-### Expandable
+## Exandable data list
+
+### Expandable data list example
 
 ```html
 <ul
@@ -498,7 +504,7 @@ When a list item includes more than one block of content, it can be difficult fo
 
 ```
 
-### Expandable compact
+### Compact expandable data list example
 
 ```html
 <ul
@@ -695,7 +701,7 @@ When a list item includes more than one block of content, it can be difficult fo
 
 ```
 
-### Expandable nested
+### Nested expandable data list example
 
 ```html
 <ul
@@ -1015,7 +1021,9 @@ When a list item includes more than one block of content, it can be difficult fo
 
 ```
 
-### Compact
+## Compact data list
+
+### Compact data list example
 
 ```html
 <ul
@@ -1188,7 +1196,7 @@ When a list item includes more than one block of content, it can be difficult fo
 
 ```
 
-### Accessibility
+### Compact data list accessibility
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
@@ -1199,7 +1207,7 @@ When a list item includes more than one block of content, it can be difficult fo
 | `id="{button_id}"` | `.pf-v6-c-data-list__toggle` > `.pf-v6-c-button` | Provides a reference for toggle button description. **Required** |
 | `aria-controls="[id of element controlled]"` | `.pf-v6-c-data-list__toggle` > `.pf-v6-c-button`    | Identifies the section controlled by the toggle button. **Required** |
 
-### Usage
+### Compact data list usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
@@ -1213,7 +1221,9 @@ When a list item includes more than one block of content, it can be difficult fo
 | `.pf-m-no-padding` | `.pf-v6-c-data-list__expandable-content-body` | Removes padding for the expandable content body. |
 | `.pf-m-icon` | `.pf-v6-c-data-list__cell` | Modifies a data list cell to not grow and align-left when its the first data-list\_\_cell element. |
 
-### Modifiers
+## Data list modifiers
+
+### Data list flex modifiers example
 
 ```html
 <h2 class="Preview__section-title">Default fitting - example 1</h2>
@@ -1412,19 +1422,103 @@ When a list item includes more than one block of content, it can be difficult fo
 
 ```
 
-### Accessibility
+### Data list text modifiers example
+
+```html
+<ul
+  class="pf-v6-c-data-list"
+  role="list"
+  aria-label="Data list with text modifiers"
+  id="data-list-with-text-modifiers"
+>
+  <li class="pf-v6-c-data-list__item">
+    <div class="pf-v6-c-data-list__item-row">
+      <div class="pf-v6-c-data-list__item-content">
+        <div class="pf-v6-c-data-list__cell">
+          <span
+            id="data-list-with-text-modifiers-item"
+          >This text will wrap to the next line because it has the default behavior of the data list cell.</span>
+        </div>
+        <div
+          class="pf-v6-c-data-list__cell pf-m-truncate"
+          tabindex="0"
+        >This text will truncate because it is very very long.</div>
+        <div
+          class="pf-v6-c-data-list__cell pf-m-break-word"
+        >http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org</div>
+        <div
+          class="pf-v6-c-data-list__cell pf-m-nowrap"
+        >This text will not break or wrap.</div>
+      </div>
+    </div>
+    <div class="pf-v6-c-data-list__item-row pf-m-truncate">
+      <div class="pf-v6-c-data-list__item-content">
+        <div
+          class="pf-v6-c-data-list__cell"
+          tabindex="0"
+        >This text will truncate because it is very very long. This text will truncate because it is very very long.</div>
+        <div
+          class="pf-v6-c-data-list__cell"
+          tabindex="0"
+        >This text will truncate because it is very very long. This text will truncate because it is very very long.</div>
+        <div
+          class="pf-v6-c-data-list__cell"
+          tabindex="0"
+        >This text will truncate because it is very very long. This text will truncate because it is very very long.</div>
+        <div
+          class="pf-v6-c-data-list__cell"
+          tabindex="0"
+        >This text will truncate because it is very very long. This text will truncate because it is very very long.</div>
+      </div>
+    </div>
+    <div class="pf-v6-c-data-list__item-row pf-m-break-word">
+      <div class="pf-v6-c-data-list__item-content">
+        <div
+          class="pf-v6-c-data-list__cell"
+        >http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org</div>
+        <div
+          class="pf-v6-c-data-list__cell"
+        >http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org</div>
+        <div
+          class="pf-v6-c-data-list__cell"
+        >http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org</div>
+        <div
+          class="pf-v6-c-data-list__cell"
+        >http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org</div>
+      </div>
+    </div>
+    <div class="pf-v6-c-data-list__item-row pf-m-nowrap">
+      <div class="pf-v6-c-data-list__item-content">
+        <div class="pf-v6-c-data-list__cell">This text will not break or wrap.</div>
+        <div class="pf-v6-c-data-list__cell">This text will not break or wrap.</div>
+        <div class="pf-v6-c-data-list__cell">This text will not break or wrap.</div>
+        <div class="pf-v6-c-data-list__cell">This text will not break or wrap.</div>
+      </div>
+    </div>
+  </li>
+</ul>
+
+```
+
+### Data list modifiers accessibility
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
 | `aria-controls="[id of element controlled]"` | `.pf-v6-c-data-list__toggle` > `.pf-v6-c-button`    | Identifies the section controlled by the toggle button. **Required** |
 
-### Usage
+### Data list modifiers usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
 | `.pf-m-flex-{1, 2, 3, 4, 5}` | `.pf-v6-c-data-list__cell` | Percentage based modifier for `.pf-v6-c-data-list__cell` widths. |
+| `.pf-v6-c-data-list__text` | `*` | Inserts the data list text element. Use this class to modify specific text directly. |
+| `.pf-m-truncate` | `.pf-v6-c-data-list`, `.pf-v6-c-data-list__item-row`, `.pf-v6-c-data-list__cell`, `.pf-v6-c-data-list__text` | Modifies the data list element so that text is truncated. |
+| `.pf-m-break-word` | `.pf-v6-c-data-list`, `.pf-v6-c-data-list__item-row`, `.pf-v6-c-data-list__cell`, `.pf-v6-c-data-list__text` | Modifies the data list element so that text breaks to the next line. |
+| `.pf-m-nowrap` | `.pf-v6-c-data-list`, `.pf-v6-c-data-list__item-row`, `.pf-v6-c-data-list__cell`, `.pf-v6-c-data-list__text` | Modifies the data list element so that text does not wrap to the next line. |
+
+## Data list with clickable rows
 
-### Clickable rows
+### Data list with clickable rows example
 
 ```html
 <ul
@@ -1466,20 +1560,7 @@ When a list item includes more than one block of content, it can be difficult fo
 
 ```
 
-### Accessibility
-
-| Attribute | Applied to | Outcome |
-| -- | -- | -- |
-| `tabindex="0"` | `.pf-v6-c-data-list__item.pf-m-clickable` | Inserts the clickable row into the tab order of the page so that it is focusable. **Required** |
-
-### Usage
-
-| Class | Applied to | Outcome |
-| -- | -- | -- |
-| `.pf-m-clickable` | `.pf-v6-c-data-list__item` | Modifies a data list item so that it is clickable. |
-| `.pf-m-selected` | `.pf-v6-c-data-list__item` | Modifies a data list item for the selected state. |
-
-### Clickable expandable rows
+### Data list with clickable expandable rows example
 
 ```html
 <ul
@@ -1656,7 +1737,22 @@ When a list item includes more than one block of content, it can be difficult fo
 
 ```
 
-### Draggable
+### Data list with clickable rows accessibility
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `tabindex="0"` | `.pf-v6-c-data-list__item.pf-m-clickable` | Inserts the clickable row into the tab order of the page so that it is focusable. **Required** |
+
+### Data list with clickable rows usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-clickable` | `.pf-v6-c-data-list__item` | Modifies a data list item so that it is clickable. |
+| `.pf-m-selected` | `.pf-v6-c-data-list__item` | Modifies a data list item for the selected state. |
+
+## Draggable data list
+
+### Draggable data list example
 
 ```html
 <div
@@ -1845,7 +1941,7 @@ When a list item includes more than one block of content, it can be difficult fo
 
 ```
 
-### Accessibility
+### Draggable data list accessibility
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
@@ -1855,7 +1951,7 @@ When a list item includes more than one block of content, it can be difficult fo
 | `aria-labelledby="[id value of .pf-v6-c-data-list__item-draggable-button] [id value of .pf-v6-c-data-list__cell-text]"` | `.pf-v6-c-data-list__item-draggable-button` | Provides an accessible name for the draggable button. |
 | `id="[]"` | `.pf-v6-c-data-list__item-draggable-button`, `.pf-v6-c-data-list__cell-text` | Gives the button and the text element accessible IDs |
 
-### Usage
+### Draggable data list usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
@@ -1866,117 +1962,37 @@ When a list item includes more than one block of content, it can be difficult fo
 | `.pf-m-disabled` | `.pf-v6-c-data-list__item.pf-m-draggable` | Modifies a data list draggable item for the disabled state. |
 | `.pf-m-drag-over` | `.pf-v6-c-data-list` | Modifies the data list to indicate that a draggable item is being dragged over the data list. |
 
-### Text modifiers
+## Plain data list
 
-```html
+### Plain data list example
+
+```html isBeta
 <ul
-  class="pf-v6-c-data-list"
+  class="pf-v6-c-data-list pf-m-plain"
   role="list"
-  aria-label="Data list with text modifiers"
-  id="data-list-with-text-modifiers"
+  aria-label="Basic data list example"
+  id="data-list-basic"
 >
   <li class="pf-v6-c-data-list__item">
     <div class="pf-v6-c-data-list__item-row">
       <div class="pf-v6-c-data-list__item-content">
         <div class="pf-v6-c-data-list__cell">
-          <span
-            id="data-list-with-text-modifiers-item"
-          >This text will wrap to the next line because it has the default behavior of the data list cell.</span>
+          <span id="data-list-basic-item-1">Primary content</span>
         </div>
-        <div
-          class="pf-v6-c-data-list__cell pf-m-truncate"
-          tabindex="0"
-        >This text will truncate because it is very very long.</div>
-        <div
-          class="pf-v6-c-data-list__cell pf-m-break-word"
-        >http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org</div>
-        <div
-          class="pf-v6-c-data-list__cell pf-m-nowrap"
-        >This text will not break or wrap.</div>
-      </div>
-    </div>
-    <div class="pf-v6-c-data-list__item-row pf-m-truncate">
-      <div class="pf-v6-c-data-list__item-content">
-        <div
-          class="pf-v6-c-data-list__cell"
-          tabindex="0"
-        >This text will truncate because it is very very long. This text will truncate because it is very very long.</div>
-        <div
-          class="pf-v6-c-data-list__cell"
-          tabindex="0"
-        >This text will truncate because it is very very long. This text will truncate because it is very very long.</div>
-        <div
-          class="pf-v6-c-data-list__cell"
-          tabindex="0"
-        >This text will truncate because it is very very long. This text will truncate because it is very very long.</div>
-        <div
-          class="pf-v6-c-data-list__cell"
-          tabindex="0"
-        >This text will truncate because it is very very long. This text will truncate because it is very very long.</div>
-      </div>
-    </div>
-    <div class="pf-v6-c-data-list__item-row pf-m-break-word">
-      <div class="pf-v6-c-data-list__item-content">
-        <div
-          class="pf-v6-c-data-list__cell"
-        >http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org</div>
-        <div
-          class="pf-v6-c-data-list__cell"
-        >http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org</div>
-        <div
-          class="pf-v6-c-data-list__cell"
-        >http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org</div>
-        <div
-          class="pf-v6-c-data-list__cell"
-        >http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org</div>
-      </div>
-    </div>
-    <div class="pf-v6-c-data-list__item-row pf-m-nowrap">
-      <div class="pf-v6-c-data-list__item-content">
-        <div class="pf-v6-c-data-list__cell">This text will not break or wrap.</div>
-        <div class="pf-v6-c-data-list__cell">This text will not break or wrap.</div>
-        <div class="pf-v6-c-data-list__cell">This text will not break or wrap.</div>
-        <div class="pf-v6-c-data-list__cell">This text will not break or wrap.</div>
+        <div class="pf-v6-c-data-list__cell">Secondary content</div>
       </div>
     </div>
   </li>
-</ul>
 
-```
-
-### Text-modifiers-data-list-text
-
-```html
-<ul
-  class="pf-v6-c-data-list"
-  role="list"
-  aria-label="Data list with modifiers and text"
-  id="data-list-with-text-modifiers-and-text"
->
   <li class="pf-v6-c-data-list__item">
     <div class="pf-v6-c-data-list__item-row">
       <div class="pf-v6-c-data-list__item-content">
-        <div class="pf-v6-c-data-list__cell">
-          <span
-            id="data-list-with-text-modifiers-and-text-item-1"
-          >This text will wrap to the next line because it has the default behavior of the data list cell.</span>
-          <span
-            class="pf-v6-c-data-list__text pf-m-truncate"
-            tabindex="0"
-          >This is data list text, you can apply `pf-m-truncate` directly to the text. This is data list text, you can apply `pf-m-truncate` directly to the text.</span>
-        </div>
-        <div class="pf-v6-c-data-list__cell">
-          This text will wrap to the next line because it has the default behavior of the data list cell.
-          <span
-            class="pf-v6-c-data-list__text pf-m-break-word"
-          >http://thisisaverylongdatalisttextthatneedstobreakusethebreakwordmodifier.org</span>
-        </div>
-        <div class="pf-v6-c-data-list__cell">
-          This text will wrap to the next line because it has the default behavior of the data list cell.
-          <span
-            class="pf-v6-c-data-list__text pf-m-nowrap"
-          >This is data list text, you can apply `pf-m-nowrap` directly to the text.</span>
+        <div class="pf-v6-c-data-list__cell pf-m-no-fill">
+          <span id="data-list-basic-item-2">Secondary content (pf-m-no-fill)</span>
         </div>
+        <div
+          class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
+        >Secondary content (pf-m-align-right pf-m-no-fill)</div>
       </div>
     </div>
   </li>
@@ -1984,22 +2000,15 @@ When a list item includes more than one block of content, it can be difficult fo
 
 ```
 
-### Usage
+### Plain data list usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v6-c-data-list__text` | `*` | Inserts the data list text element. Use this class to modify specific text directly. |
-| `.pf-m-truncate` | `.pf-v6-c-data-list`, `.pf-v6-c-data-list__item-row`, `.pf-v6-c-data-list__cell`, `.pf-v6-c-data-list__text` | Modifies the data list element so that text is truncated. |
-| `.pf-m-break-word` | `.pf-v6-c-data-list`, `.pf-v6-c-data-list__item-row`, `.pf-v6-c-data-list__cell`, `.pf-v6-c-data-list__text` | Modifies the data list element so that text breaks to the next line. |
-| `.pf-m-nowrap` | `.pf-v6-c-data-list`, `.pf-v6-c-data-list__item-row`, `.pf-v6-c-data-list__cell`, `.pf-v6-c-data-list__text` | Modifies the data list element so that text does not wrap to the next line. |
+| `.pf-m-plain` | `.pf-v6-c-data-list` | Modifies a data list to have a transparent background. |
 
-## Documentation
-
-### Overview
+## Data list as grid
 
-The DataList component provides a flexible alternative to the Table component, wherein individual data points may or may not exist within each row. DataList relies upon PatternFly layouts to achieve desired presentation within `pf-v6-c-data-list__cell`s. DataLists do not have headers. If headers are required, use the [table component](/components/table).
-
-### Grid
+### Data list as grid example
 
 ```html
 <ul
@@ -2040,7 +2049,7 @@ The DataList component provides a flexible alternative to the Table component, w
 
 ```
 
-### Grid (small breakpoint)
+### Data list as grid on small breakpoint example
 
 ```html
 <ul
@@ -2081,7 +2090,7 @@ The DataList component provides a flexible alternative to the Table component, w
 
 ```
 
-### Grid none
+### Data list with no grid
 
 ```html
 <ul
@@ -2122,8 +2131,14 @@ The DataList component provides a flexible alternative to the Table component, w
 
 ```
 
-### Usage
+### Data list as grid usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
 | `.pf-m-grid{-[none, sm, md, lg, xl, 2xl]}` | `.pf-v6-c-data-list` | Modifies the data list to switch to a grid layout at a specified [breakpoint](/tokens/all-patternfly-tokens). `.pf-m-grid` will display the grid layout at all breakpoints. `.pf-m-grid-none` will display the desktop layout at all breakpoints. **Note:** Without a grid modifier, the data list will display the grid layout by default and switch to the desktop layout at a medium breakpoint. |
+
+## Documentation
+
+### Overview
+
+The DataList component provides a flexible alternative to the Table component, wherein individual data points may or may not exist within each row. DataList relies upon PatternFly layouts to achieve desired presentation within `pf-v6-c-data-list__cell` elements. DataLists do not have headers. If headers are required, use the [table component](/components/table).