Examples
Basic
- Primary contentSecondary content
- Secondary content (pf-m-no-fill)Secondary content (pf-m-align-right pf-m-no-fill)
Compact
- Primary contentSecondary content
- Secondary content (pf-m-no-fill)Secondary content (pf-m-align-right pf-m-no-fill)
Checkboxes, actions and additional cells
- Primary content Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.Tertiary content Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.More content Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.More content Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
- Primary content - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
- Primary content - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
Actions: single and multiple
- Single actionable Primary contentSingle actionable Secondary content
- Multi actions Primary contentMulti actions Secondary content
Expandable
- Secondary contentLorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Width modifiers
Default fitting - example 1
- default
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
defaultLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Flex modifiers - example 2
- width 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
width 4Lorem ipsum dolor sit amet.
Flex modifiers - example 3
Selectable rows
- Single actionable Primary contentSingle actionable Secondary content
- Selectable actions Primary contentSelectable actions Secondary content
Controlling text
- Primary contentReally really really really really really really really really really really really really really long description that should be truncated before it ends
Draggable Beta
Draggable data lists used to have their own HTML5-based API for drag and drop, which wasn't able to fulfill requirements such as custom styling on items being dragged. So we wrote generic DragDrop, Draggable, and Droppable components for this purpose. Use those new components instead of the deprecated (and buggy!) HTML5-based API.
Note: Keyboard accessibility and screen reader accessibility for the DragDrop component are still in development.
- item 0
- item 1
- item 2
- item 3
- item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4
- item 5
- item 6
- item 7
- item 8
- item 9
Small grid breakpoint
- Primary contentReally really really really really really really really really really really really really really long description that should be truncated before it ends
Props
DataList
| Name | Type | Default | Description |
|---|---|---|---|
| aria-labelrequired | string | Adds accessible text to the DataList list | |
| children | React.ReactNode | null | Content rendered inside the DataList list |
| className | string | '' | Additional classes added to the DataList list |
| gridBreakpoint | 'none' | 'always' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'md' | Specifies the grid breakpoints |
| isCompact | boolean | false | Flag indicating if DataList should have compact styling |
| Deprecated: itemOrder | string[] | Order of items in a draggable DataList | |
| Deprecated: onDragCancel | () => void | Optional informational callback for dragging, fired when dragging is cancelled | |
| Deprecated: onDragFinish | (newItemOrder: string[]) => void | Optional callback to make DataList draggable, fired when dragging ends | |
| Deprecated: onDragMove | (oldIndex: number, newIndex: number) => void | Optional informational callback for dragging, fired when an item moves | |
| Deprecated: onDragStart | (id: string) => void | Optional informational callback for dragging, fired when dragging starts | |
| onSelectDataListItem | (id: string) => void | Optional callback to make DataList selectable, fired when DataListItem selected | |
| selectableRowBeta | SelectableRowObject | Object that causes the data list to render hidden inputs which improve selectable item a11y | |
| selectedDataListItemId | string | '' | Id of DataList item currently selected |
| wrapModifier | DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord' | null | Determines which wrapping modifier to apply to the DataList |
SelectableRowObject
| Name | Type | Default | Description |
|---|---|---|---|
| onChangerequired | (id: string, event: React.FormEvent<HTMLInputElement>) => void | Callback that executes when the screen reader accessible element receives a change event | |
| typerequired | 'multiple' | 'single' | Determines if only one of the selectable rows should be selectable at a time |
DataListAction
| Name | Type | Default | Description |
|---|---|---|---|
| aria-labelrequired | string | Adds accessible text to the DataList Action | |
| aria-labelledbyrequired | string | Adds accessible text to the DataList Action | |
| childrenrequired | React.ReactNode | Content rendered as DataList Action (e.g <Button> or <Dropdown>) | |
| idrequired | string | Identify the DataList toggle number | |
| className | string | Additional classes added to the DataList Action | |
| isPlainButtonAction | boolean | Flag to indicate that the action is a plain button (e.g. kebab dropdown toggle) so that styling is applied to align the button | |
| visibility | { default?: 'hidden' | 'visible'; sm?: 'hidden' | 'visible'; md?: 'hidden' | 'visible'; lg?: 'hidden' | 'visible'; xl?: 'hidden' | 'visible'; '2xl'?: 'hidden' | 'visible'; } | What breakpoints to hide/show the data list action |
DataListCell
| Name | Type | Default | Description |
|---|---|---|---|
| alignRight | boolean | false | Aligns the cell content to the right of its parent. |
| children | React.ReactNode | null | Content rendered inside the DataList cell |
| className | string | '' | Additional classes added to the DataList cell |
| isFilled | boolean | true | Enables the body Content to fill the height of the card |
| isIcon | boolean | false | Set to true if the cell content is an Icon |
| width | 1 | 2 | 3 | 4 | 5 | 1 | Width (from 1-5) to the DataList cell |
| wrapModifier | DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord' | null | Determines which wrapping modifier to apply to the DataListCell |
DataListCheck
| Name | Type | Default | Description |
|---|---|---|---|
| aria-labelledbyrequired | string | Aria-labelledby of the DataList checkbox | |
| checked | boolean | null | Flag to show if the DataList checkbox is checked when it is controlled by React state. Both isChecked and checked are valid, but only use one. To make the DataList checkbox uncontrolled, instead use the defaultChecked prop, but do not use both. |
| className | string | '' | Additional classes added to the DataList item checkbox |
| defaultChecked | boolean | Flag to set default value of DataList checkbox when it is uncontrolled by React state. To make the DataList checkbox controlled, instead use the isChecked prop, but do not use both. | |
| isChecked | boolean | null | Flag to show if the DataList checkbox is checked when it is controlled by React state. Both isChecked and checked are valid, but only use one. To make the DataList checkbox uncontrolled, instead use the defaultChecked prop, but do not use both. |
| isDisabled | boolean | false | Flag to show if the DataList checkbox is disabled |
| isValid | boolean | true | Flag to show if the DataList checkbox selection is valid or invalid |
| onChange | (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void | (checked: boolean, event: React.FormEvent<HTMLInputElement>) => {} | A callback for when the DataList checkbox selection changes |
| otherControls | boolean | false | Flag to indicate if other controls are used in the DataListItem |
DataListItem
| Name | Type | Default | Description |
|---|---|---|---|
| aria-labelledby | string | '' | Adds accessible text to the DataList item |
| children | React.ReactNode | null | Content rendered inside the DataList item |
| className | string | '' | Additional classes added to the DataList item should be either <DataListItemRow> or <DataListContent> |
| id | string | '' | Unique id for the DataList item |
| isExpanded | boolean | false | Flag to show if the expanded content of the DataList item is visible |
| selectableInputAriaLabelBeta | string | Aria label to apply to the selectable input if one is rendered |
DataListItemCells
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | '' | Additional classes added to the DataList item Content Wrapper. Children should be one ore more <DataListCell> nodes |
| dataListCells | React.ReactNode | Array of <DataListCell> nodes that are rendered one after the other. | |
| rowid | string | '' | Id for the row |
DataListItemRow
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Content rendered inside the DataListItemRow | |
| className | string | '' | Additional classes added to the DataListItemRow |
| rowid | string | '' | Id for the row item |
| wrapModifier | DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord' | null | Determines which wrapping modifier to apply to the DataListItemRow |
DataListToggle
| Name | Type | Default | Description |
|---|---|---|---|
| idrequired | string | Identify the DataList toggle number | |
| aria-controls | string | '' | Allows users of some screen readers to shift focus to the controlled element. Should be used when the controlled contents are not adjacent to the toggle that controls them. |
| aria-label | string | 'Details' | Adds accessible text to the DataList toggle |
| aria-labelledby | string | Adds accessible text to the DataList toggle | |
| className | string | '' | Additional classes added to the DataList cell |
| isExpanded | boolean | false | Flag to show if the expanded content of the DataList item is visible |
| rowid | string | '' | Id for the row |
DataListContent
| Name | Type | Default | Description |
|---|---|---|---|
| aria-labelrequired | string | Adds accessible text to the DataList toggle | |
| children | React.ReactNode | null | Content rendered inside the DataList item |
| className | string | '' | Additional classes added to the DataList cell |
| hasNoPadding | boolean | false | Flag to remove padding from the expandable content |
| id | string | '' | Identify the DataListContent item |
| isHidden | boolean | false | Flag to show if the expanded content of the DataList item is visible |
| rowid | string | '' | Id for the row |
DataListDragButton
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | '' | Additional classes added to the drag button |
| isDisabled | boolean | false | Flag indicating if drag is disabled for the item |
| type | 'button' | 'submit' | 'reset' | Sets button type |
DataListControl
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Children of the data list control | |
| className | string | '' | Additional classes added to the DataList item control |
CSS variables
| .pf-c-data-list | --pf-global--Color--100 | #151515 | |
| .pf-c-data-list | --pf-global--Color--200 | #6a6e73 | |
| .pf-c-data-list | --pf-global--BorderColor--100 | #d2d2d2 | |
| .pf-c-data-list | --pf-global--primary-color--100 | #06c | |
| .pf-c-data-list | --pf-global--link--Color | #06c | |
| .pf-c-data-list | --pf-global--link--Color--hover | #004080 | |
| .pf-c-data-list | --pf-global--BackgroundColor--100 | #fff | |
| .pf-c-data-list | --pf-c-data-list--FontSize | 1em | |
| .pf-c-data-list | --pf-c-data-list--LineHeight | 1.5 | |
| .pf-c-data-list | --pf-c-data-list--BorderTopColor | #f0f0f0 | |
| .pf-c-data-list | --pf-c-data-list--BorderTopWidth | 0.5rem | |
| .pf-c-data-list | --pf-c-data-list--sm--BorderTopWidth | 1px | |
| .pf-c-data-list | --pf-c-data-list--sm--BorderTopColor | #d2d2d2 | |
| .pf-c-data-list | --pf-c-data-list__item--BackgroundColor | #fff | |
| .pf-c-data-list | --pf-c-data-list__item--m-selected--ZIndex | 100 | |
| .pf-c-data-list | --pf-c-data-list__item--m-expanded--before--BackgroundColor | #06c | |
| .pf-c-data-list | --pf-c-data-list__item--m-selected--before--BackgroundColor | #06c | |
| .pf-c-data-list | --pf-c-data-list__item--m-selected--BoxShadow | 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) | |
| .pf-c-data-list | --pf-c-data-list__item--m-selectable--OutlineOffset | calc(-1 * 0.25rem) | |
| .pf-c-data-list | --pf-c-data-list__item--m-selectable--hover--ZIndex | calc(100 + 1) | |
| .pf-c-data-list | --pf-c-data-list__item--m-selectable--hover--BoxShadow | 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) | |
| .pf-c-data-list | --pf-c-data-list__item--m-selectable--focus--BoxShadow | 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) | |
| .pf-c-data-list | --pf-c-data-list__item--m-selectable--active--BoxShadow | 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) | |
| .pf-c-data-list | --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor | #2b9af3 | |
| .pf-c-data-list | --pf-c-data-list__item--BorderBottomColor | #f0f0f0 | |
| .pf-c-data-list | --pf-c-data-list__item--BorderBottomWidth | 0.5rem | |
| .pf-c-data-list | --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor | #f0f0f0 | |
| .pf-c-data-list | --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth | 0.5rem | |
| .pf-c-data-list | --pf-c-data-list__item--sm--BorderBottomWidth | 1px | |
| .pf-c-data-list | --pf-c-data-list__item--sm--BorderBottomColor | #d2d2d2 | |
| .pf-c-data-list | --pf-c-data-list__item--before--BackgroundColor | transparent | |
| .pf-c-data-list | --pf-c-data-list__item--before--Width | 3px | |
| .pf-c-data-list | --pf-c-data-list__item--before--Transition | all 250ms cubic-bezier(.42, 0, .58, 1) | |
| .pf-c-data-list | --pf-c-data-list__item--before--Top | 0 | |
| .pf-c-data-list | --pf-c-data-list__item--before--sm--Top | calc(0.5rem * -1) | |
| .pf-c-data-list | --pf-c-data-list__item-row--PaddingRight | 1rem | |
| .pf-c-data-list | --pf-c-data-list__item-row--PaddingLeft | 1rem | |
| .pf-c-data-list | --pf-c-data-list__item-row--xl--PaddingRight | 1.5rem | |
| .pf-c-data-list | --pf-c-data-list__item-row--xl--PaddingLeft | 1.5rem | |
| .pf-c-data-list | --pf-c-data-list__item-content--md--PaddingBottom | 1.5rem | |
| .pf-c-data-list | --pf-c-data-list__cell--PaddingTop | 1.5rem | |
| .pf-c-data-list | --pf-c-data-list__cell--PaddingBottom | 1.5rem | |
| .pf-c-data-list | --pf-c-data-list__cell--MarginRight | 2rem | |
| .pf-c-data-list | --pf-c-data-list__cell--md--PaddingBottom | 0 | |
| .pf-c-data-list | --pf-c-data-list__cell--m-icon--MarginRight | 1rem | |
| .pf-c-data-list | --pf-c-data-list__cell--cell--PaddingTop | 0 | |
| .pf-c-data-list | --pf-c-data-list__cell--cell--md--PaddingTop | 1.5rem | |
| .pf-c-data-list | --pf-c-data-list__cell--m-icon--cell--PaddingTop | 1.5rem | |
| .pf-c-data-list | --pf-c-data-list--cell--MinWidth | initial | |
| .pf-c-data-list | --pf-c-data-list--cell--Overflow | visible | |
| .pf-c-data-list | --pf-c-data-list--cell--TextOverflow | clip | |
| .pf-c-data-list | --pf-c-data-list--cell--WhiteSpace | normal | |
| .pf-c-data-list | --pf-c-data-list--cell--WordBreak | normal | |
| .pf-c-data-list | --pf-c-data-list--cell--m-truncate--MinWidth | 5ch | |
| .pf-c-data-list | --pf-c-data-list__toggle--MarginLeft | calc(0.5rem * -1) | |
| .pf-c-data-list | --pf-c-data-list__toggle--MarginTop | calc(0.375rem * -1) | |
| .pf-c-data-list | --pf-c-data-list__toggle--MarginBottom | calc(0.375rem * -1) | |
| .pf-c-data-list | --pf-c-data-list__toggle-icon--Height | calc(1em * 1.5) | |
| .pf-c-data-list | --pf-c-data-list__toggle-icon--Transition | .2s ease-in 0s | |
| .pf-c-data-list | --pf-c-data-list__toggle-icon--Rotate | 0 | |
| .pf-c-data-list | --pf-c-data-list__item--m-expanded__toggle-icon--Rotate | 90deg | |
| .pf-c-data-list | --pf-c-data-list__item-draggable-button--PaddingLeft | 1rem | |
| .pf-c-data-list | --pf-c-data-list__item-draggable-button--PaddingRight | 1rem | |
| .pf-c-data-list | --pf-c-data-list__item-draggable-button--MarginTop | calc(1.5rem * -1) | |
| .pf-c-data-list | --pf-c-data-list__item-draggable-button--MarginBottom | calc(1.5rem * -1) | |
| .pf-c-data-list | --pf-c-data-list__item-draggable-button--PaddingTop | 1.5rem | |
| .pf-c-data-list | --pf-c-data-list__item-draggable-button--PaddingBottom | 1.5rem | |
| .pf-c-data-list | --pf-c-data-list__item-draggable-button--MarginLeft | calc(1rem * -1) | |
| .pf-c-data-list | --pf-c-data-list__item-draggable-button-icon--Color | #6a6e73 | |
| .pf-c-data-list | --pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color | #d2d2d2 | |
| .pf-c-data-list | --pf-c-data-list__item-draggable-button--hover__draggable-icon--Color | #151515 | |
| .pf-c-data-list | --pf-c-data-list__item-draggable-button--focus__draggable-icon--Color | #151515 | |
| .pf-c-data-list | --pf-c-data-list__item--m-ghost-row--after--BackgroundColor | #fff | |
| .pf-c-data-list | --pf-c-data-list__item--m-ghost-row--after--Opacity | .6 | |
| .pf-c-data-list | --pf-c-data-list__item-control--PaddingTop | 1.5rem | |
| .pf-c-data-list | --pf-c-data-list__item-control--PaddingBottom | 1.5rem | |
| .pf-c-data-list | --pf-c-data-list__item-control--MarginRight | 1rem | |
| .pf-c-data-list | --pf-c-data-list__item-control--md--MarginRight | 2rem | |
| .pf-c-data-list | --pf-c-data-list__item-control--not-last-child--MarginRight | 1rem | |
| .pf-c-data-list | --pf-c-data-list__check--Height | calc(1em * 1.5) | |
| .pf-c-data-list | --pf-c-data-list__check--MarginTop | -0.0625rem | |
| .pf-c-data-list | --pf-c-data-list__item-action--Display | flex | |
| .pf-c-data-list | --pf-c-data-list__item-action--PaddingTop | 1.5rem | |
| .pf-c-data-list | --pf-c-data-list__item-action--PaddingBottom | 1.5rem | |
| .pf-c-data-list | --pf-c-data-list__item-action--MarginLeft | 1rem | |
| .pf-c-data-list | --pf-c-data-list__item-action--md--MarginLeft | 2rem | |
| .pf-c-data-list | --pf-c-data-list__item-action--not-last-child--MarginRight | 1rem | |
| .pf-c-data-list | --pf-c-data-list__item-action__action--MarginTop | calc(0.375rem * -1) | |
| .pf-c-data-list | --pf-c-data-list__action--MarginTop | calc(0.375rem * -1) | |
| .pf-c-data-list | --pf-c-data-list__item-action__action--MarginBottom | calc(0.375rem * -1) | |
| .pf-c-data-list | --pf-c-data-list__expandable-content--BorderTopWidth | 1px | |
| .pf-c-data-list | --pf-c-data-list__expandable-content--BorderTopColor | #d2d2d2 | |
| .pf-c-data-list | --pf-c-data-list__expandable-content--MarginRight | calc(1rem * -1) | |
| .pf-c-data-list | --pf-c-data-list__expandable-content--MarginLeft | calc(1rem * -1) | |
| .pf-c-data-list | --pf-c-data-list__expandable-content--MaxHeight | 37.5rem | |
| .pf-c-data-list | --pf-c-data-list__expandable-content--before--Top | calc(0.5rem * -1) | |
| .pf-c-data-list | --pf-c-data-list__expandable-content-body--PaddingTop | 1rem | |
| .pf-c-data-list | --pf-c-data-list__expandable-content-body--PaddingRight | 1rem | |
| .pf-c-data-list | --pf-c-data-list__expandable-content-body--PaddingBottom | 1rem | |
| .pf-c-data-list | --pf-c-data-list__expandable-content-body--PaddingLeft | 1rem | |
| .pf-c-data-list | --pf-c-data-list__expandable-content-body--md--PaddingTop | 1.5rem | |
| .pf-c-data-list | --pf-c-data-list__expandable-content-body--xl--PaddingRight | 1.5rem | |
| .pf-c-data-list | --pf-c-data-list__expandable-content-body--md--PaddingBottom | 1.5rem | |
| .pf-c-data-list | --pf-c-data-list__expandable-content-body--xl--PaddingLeft | 1.5rem | |
| .pf-c-data-list | --pf-c-data-list--m-compact--FontSize | 0.875rem | |
| .pf-c-data-list | --pf-c-data-list--m-compact--LineHeight | 1.3 | |
| .pf-c-data-list | --pf-c-data-list--m-compact__check--FontSize | 1rem | |
| .pf-c-data-list | --pf-c-data-list--m-compact__cell--PaddingTop | 0.5rem | |
| .pf-c-data-list | --pf-c-data-list--m-compact__cell--PaddingBottom | 0.5rem | |
| .pf-c-data-list | --pf-c-data-list--m-compact__cell--md--PaddingBottom | 0 | |
| .pf-c-data-list | --pf-c-data-list--m-compact__cell-cell--PaddingTop | 0 | |
| .pf-c-data-list | --pf-c-data-list--m-compact__cell-cell--md--PaddingTop | 0.5rem | |
| .pf-c-data-list | --pf-c-data-list--m-compact__cell--cell--MarginRight | 1rem | |
| .pf-c-data-list | --pf-c-data-list--m-compact__item-control--PaddingTop | 0.5rem | |
| .pf-c-data-list | --pf-c-data-list--m-compact__item-control--PaddingBottom | 0.5rem | |
| .pf-c-data-list | --pf-c-data-list--m-compact__item-control--MarginRight | 1rem | |
| .pf-c-data-list | --pf-c-data-list--m-compact__item-action--PaddingTop | 0.5rem | |
| .pf-c-data-list | --pf-c-data-list--m-compact__item-action--PaddingBottom | 0.5rem | |
| .pf-c-data-list | --pf-c-data-list--m-compact__item-action--MarginLeft | 1rem | |
| .pf-c-data-list | --pf-c-data-list--m-compact__item-action__action--MarginTop | calc(0.5rem * -1) | |
| .pf-c-data-list | --pf-c-data-list--m-compact__item-action__action--MarginBottom | calc(0.5rem * -1) | |
| .pf-c-data-list | --pf-c-data-list--m-compact__action--MarginTop | calc(0.5rem * -1) | |
| .pf-c-data-list | --pf-c-data-list--m-compact__item-content--PaddingBottom | 0.5rem | |
| .pf-c-data-list | --pf-c-data-list--m-compact__item-draggable-button--MarginTop | calc(0.5rem * -1) | |
| .pf-c-data-list | --pf-c-data-list--m-compact__item-draggable-button--MarginBottom | calc(0.5rem * -1) | |
| .pf-c-data-list | --pf-c-data-list--m-compact__item-draggable-button--PaddingTop | 0.5rem | |
| .pf-c-data-list | --pf-c-data-list--m-compact__item-draggable-button--PaddingBottom | 0.5rem | |
| .pf-c-data-list | --pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop | 0.5rem | |
| .pf-c-data-list__item-action | --pf-hidden-visible--visible--Visibility | visible | |
| .pf-c-data-list__item-action | --pf-hidden-visible--hidden--Display | none | |
| .pf-c-data-list__item-action | --pf-hidden-visible--hidden--Visibility | hidden | |
| .pf-c-data-list__item-action | --pf-hidden-visible--Display | flex | |
| .pf-c-data-list__item-action | --pf-hidden-visible--Visibility | visible | |
| .pf-c-data-list__item-action | --pf-hidden-visible--visible--Display | flex | |
| .pf-m-hidden.pf-c-data-list__item-action | --pf-hidden-visible--Display | none | |
| .pf-m-hidden.pf-c-data-list__item-action | --pf-hidden-visible--Visibility | hidden | |
| .pf-c-data-list.pf-m-compact | --pf-c-data-list__check--FontSize | 1rem | |
| .pf-c-data-list.pf-m-compact | --pf-c-data-list__action--MarginTop | calc(0.5rem * -1) | |
| .pf-c-data-list.pf-m-compact | --pf-c-data-list--FontSize | 0.875rem | |
| .pf-c-data-list.pf-m-compact | --pf-c-data-list__item-action--MarginLeft | 1rem | |
| .pf-c-data-list.pf-m-compact | --pf-c-data-list__item-action--PaddingTop | 0.5rem | |
| .pf-c-data-list.pf-m-compact | --pf-c-data-list__item-action--PaddingBottom | 0.5rem | |
| .pf-c-data-list.pf-m-compact | --pf-c-data-list__item-action__action--MarginTop | calc(0.5rem * -1) | |
| .pf-c-data-list.pf-m-compact | --pf-c-data-list__item-action__action--MarginBottom | calc(0.5rem * -1) | |
| .pf-c-data-list.pf-m-compact | --pf-c-data-list__item-control--MarginRight | 1rem | |
| .pf-c-data-list.pf-m-compact | --pf-c-data-list__item-control--PaddingTop | 0.5rem | |
| .pf-c-data-list.pf-m-compact | --pf-c-data-list__item-control--PaddingBottom | 0.5rem | |
| .pf-c-data-list.pf-m-compact | --pf-c-data-list__item-content--md--PaddingBottom | 0.5rem | |
| .pf-c-data-list.pf-m-compact | --pf-c-data-list__item-draggable-button--MarginTop | calc(0.5rem * -1) | |
| .pf-c-data-list.pf-m-compact | --pf-c-data-list__item-draggable-button--MarginBottom | calc(0.5rem * -1) | |
| .pf-c-data-list.pf-m-compact | --pf-c-data-list__item-draggable-button--PaddingTop | 0.5rem | |
| .pf-c-data-list.pf-m-compact | --pf-c-data-list__item-draggable-button--PaddingBottom | 0.5rem | |
| .pf-c-data-list.pf-m-compact | --pf-c-data-list__cell--m-icon--cell--PaddingTop | 0.5rem | |
| .pf-c-data-list.pf-m-compact .pf-c-data-list__cell | --pf-c-data-list__cell--PaddingTop | 0.5rem | |
| .pf-c-data-list.pf-m-compact .pf-c-data-list__cell | --pf-c-data-list__cell--PaddingBottom | 0.5rem | |
| .pf-c-data-list.pf-m-compact .pf-c-data-list__cell | --pf-c-data-list__cell--MarginRight | 1rem | |
| .pf-c-data-list.pf-m-compact .pf-c-data-list__cell | --pf-c-data-list__cell--cell--PaddingTop | 0 | |
| .pf-c-data-list.pf-m-truncate | --pf-c-data-list--cell--MinWidth | 5ch | |
| .pf-c-data-list.pf-m-truncate | --pf-c-data-list--cell--Overflow | hidden | |
| .pf-c-data-list.pf-m-truncate | --pf-c-data-list--cell--TextOverflow | ellipsis | |
| .pf-c-data-list.pf-m-truncate | --pf-c-data-list--cell--WhiteSpace | nowrap | |
| .pf-c-data-list.pf-m-break-word | --pf-c-data-list--cell--WordBreak | break-word | |
| .pf-c-data-list.pf-m-nowrap | --pf-c-data-list--cell--WhiteSpace | nowrap | |
| .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child) | --pf-c-data-list__item--BorderBottomWidth | 0 | |
| .pf-c-data-list__item.pf-m-selected | --pf-c-data-list__item--before--BackgroundColor | #06c | |
| .pf-c-data-list__item.pf-m-expanded | --pf-c-data-list__toggle-icon--Rotate | 90deg | |
| .pf-c-data-list__item.pf-m-expanded | --pf-c-data-list__item--before--BackgroundColor | #06c | |
| .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) | --pf-c-data-list__item--before--BackgroundColor | #2b9af3 | |
| .pf-c-data-list__item-draggable-button:hover | --pf-c-data-list__item-draggable-button-icon--Color | #151515 | |
| .pf-c-data-list__item-draggable-button:focus | --pf-c-data-list__item-draggable-button-icon--Color | #151515 | |
| .pf-c-data-list__item-draggable-button.pf-m-disabled | --pf-c-data-list__item-draggable-button-icon--Color | #d2d2d2 | |
View source on GitHub
