@patternfly/patternfly 6.0.0-alpha.98 → 6.0.0-alpha.99

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (166) hide show
  1. package/components/Card/card.css +1 -0
  2. package/components/Card/card.scss +1 -0
  3. package/components/Check/check.css +10 -3
  4. package/components/Check/check.scss +17 -4
  5. package/components/Masthead/masthead.css +17 -9
  6. package/components/Masthead/masthead.scss +18 -9
  7. package/components/MenuToggle/menu-toggle.css +4 -4
  8. package/components/MenuToggle/menu-toggle.scss +4 -4
  9. package/components/ModalBox/modal-box.css +11 -7
  10. package/components/ModalBox/modal-box.scss +27 -12
  11. package/components/Nav/nav.css +64 -110
  12. package/components/Nav/nav.scss +70 -143
  13. package/components/Page/page.css +9 -17
  14. package/components/Page/page.scss +10 -23
  15. package/components/Radio/radio.css +12 -5
  16. package/components/Radio/radio.scss +21 -6
  17. package/components/Table/table-grid.css +30 -35
  18. package/components/Table/table-grid.scss +44 -32
  19. package/components/Table/table-scrollable.css +14 -6
  20. package/components/Table/table-scrollable.scss +6 -1
  21. package/components/Table/table-tree-view.css +5 -5
  22. package/components/Table/table-tree-view.scss +14 -8
  23. package/components/Table/table.css +90 -254
  24. package/components/Table/table.scss +158 -347
  25. package/components/Toolbar/toolbar.css +66 -2
  26. package/components/Toolbar/toolbar.scss +21 -2
  27. package/docs/components/AboutModalBox/examples/AboutModalBox.md +12 -12
  28. package/docs/components/Accordion/examples/Accordion.md +19 -19
  29. package/docs/components/ActionList/examples/ActionList.md +5 -5
  30. package/docs/components/Alert/examples/Alert.md +26 -26
  31. package/docs/components/AppLauncher/deprecated/application-launcher.md +31 -31
  32. package/docs/components/Avatar/examples/Avatar.md +8 -8
  33. package/docs/components/BackToTop/examples/BackToTop.md +3 -3
  34. package/docs/components/Backdrop/examples/Backdrop.md +3 -3
  35. package/docs/components/BackgroundImage/examples/BackgroundImage.md +4 -4
  36. package/docs/components/Badge/examples/Badge.md +6 -6
  37. package/docs/components/Banner/examples/Banner.md +17 -17
  38. package/docs/components/Brand/examples/Brand.css +3 -3
  39. package/docs/components/Brand/examples/Brand.md +7 -7
  40. package/docs/components/Breadcrumb/examples/Breadcrumb.md +12 -12
  41. package/docs/components/Button/examples/Button.css +2 -2
  42. package/docs/components/Button/examples/Button.md +35 -35
  43. package/docs/components/CalendarMonth/examples/CalendarMonth.md +29 -29
  44. package/docs/components/Card/examples/Card.md +30 -30
  45. package/docs/components/Check/examples/Check.md +12 -12
  46. package/docs/components/Chip/examples/Chip.md +21 -21
  47. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +19 -19
  48. package/docs/components/CodeBlock/examples/CodeBlock.md +8 -8
  49. package/docs/components/CodeEditor/examples/CodeEditor.md +14 -14
  50. package/docs/components/Content/examples/Content.md +5 -5
  51. package/docs/components/ContextSelector/deprecated/context-selector.md +23 -23
  52. package/docs/components/DataList/examples/DataList.md +177 -112
  53. package/docs/components/DatePicker/examples/DatePicker.md +10 -10
  54. package/docs/components/DescriptionList/examples/DescriptionList.md +29 -29
  55. package/docs/components/Divider/examples/Divider.md +7 -7
  56. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  57. package/docs/components/Drawer/examples/Drawer.md +36 -36
  58. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  59. package/docs/components/Dropdown/deprecated/Dropdown.md +47 -47
  60. package/docs/components/DualListSelector/examples/DualListSelector.md +41 -41
  61. package/docs/components/EmptyState/examples/EmptyState.md +21 -21
  62. package/docs/components/ExpandableSection/examples/ExpandableSection.md +18 -18
  63. package/docs/components/FileUpload/examples/FileUpload.md +8 -8
  64. package/docs/components/Form/examples/Form.md +52 -52
  65. package/docs/components/FormControl/examples/FormControl.md +22 -22
  66. package/docs/components/HelperText/examples/HelperText.md +11 -11
  67. package/docs/components/Hint/examples/Hint.md +6 -6
  68. package/docs/components/Icon/examples/Icon.md +13 -13
  69. package/docs/components/InlineEdit/examples/InlineEdit.md +54 -138
  70. package/docs/components/InputGroup/examples/InputGroup.md +10 -10
  71. package/docs/components/JumpLinks/examples/JumpLinks.md +19 -19
  72. package/docs/components/Label/examples/Label.css +4 -4
  73. package/docs/components/Label/examples/Label.md +45 -45
  74. package/docs/components/List/examples/List.md +6 -6
  75. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  76. package/docs/components/LogViewer/examples/LogViewer.md +45 -165
  77. package/docs/components/Login/examples/Login.md +21 -21
  78. package/docs/components/Masthead/examples/masthead.md +7 -7
  79. package/docs/components/Menu/examples/Menu.md +60 -60
  80. package/docs/components/MenuToggle/examples/MenuToggle.md +34 -106
  81. package/docs/components/ModalBox/examples/ModalBox.md +75 -34
  82. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +21 -21
  83. package/docs/components/Nav/examples/Navigation.css +20 -3
  84. package/docs/components/Nav/examples/Navigation.md +44 -50
  85. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  86. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +36 -36
  87. package/docs/components/NumberInput/examples/NumberInput.md +13 -13
  88. package/docs/components/OptionsMenu/deprecated/options-menu.md +22 -22
  89. package/docs/components/OverflowMenu/examples/overflow-menu.md +20 -20
  90. package/docs/components/Page/deprecated/PageHeader.md +30 -30
  91. package/docs/components/Page/examples/Page.md +55 -54
  92. package/docs/components/Pagination/examples/Pagination.md +25 -25
  93. package/docs/components/Panel/examples/Panel.md +10 -10
  94. package/docs/components/Popover/examples/Popover.md +30 -30
  95. package/docs/components/Progress/examples/Progress.md +31 -31
  96. package/docs/components/ProgressStepper/examples/ProgressStepper.md +17 -17
  97. package/docs/components/Radio/examples/Radio.md +9 -9
  98. package/docs/components/Select/deprecated/Select.md +110 -110
  99. package/docs/components/Sidebar/examples/Sidebar.md +16 -16
  100. package/docs/components/SimpleList/examples/SimpleList.md +9 -9
  101. package/docs/components/Skeleton/examples/Skeleton.md +14 -14
  102. package/docs/components/SkipToContent/examples/SkipToContent.md +4 -4
  103. package/docs/components/Slider/examples/Slider.md +33 -33
  104. package/docs/components/Spinner/examples/Spinner.md +14 -14
  105. package/docs/components/Switch/examples/Switch.md +14 -14
  106. package/docs/components/TabContent/examples/TabContent.md +10 -10
  107. package/docs/components/Table/examples/Table.md +5395 -15077
  108. package/docs/components/Tabs/examples/Tabs.md +39 -39
  109. package/docs/components/TextInputGroup/examples/TextInputGroup.md +1 -1
  110. package/docs/components/Tile/examples/Tile.md +12 -12
  111. package/docs/components/Timestamp/examples/Timestamp.md +4 -4
  112. package/docs/components/Title/examples/Title.md +20 -20
  113. package/docs/components/ToggleGroup/examples/toggle-group.md +10 -10
  114. package/docs/components/Toolbar/examples/Toolbar.md +68 -200
  115. package/docs/components/Tooltip/examples/Tooltip.md +9 -9
  116. package/docs/components/TreeView/examples/TreeView.md +31 -31
  117. package/docs/components/Truncate/examples/Truncate.md +8 -8
  118. package/docs/components/Wizard/examples/Wizard.md +46 -46
  119. package/docs/demos/AboutModal/examples/AboutModal.md +4 -52
  120. package/docs/demos/Alert/examples/Alert.md +12 -156
  121. package/docs/demos/BackToTop/examples/BackToTop.md +4 -52
  122. package/docs/demos/Banner/examples/Banner.md +9 -105
  123. package/docs/demos/Card/examples/Card.md +12 -19
  124. package/docs/demos/CardView/examples/CardView.md +5 -65
  125. package/docs/demos/ContextSelector/examples/ContextSelector.md +12 -156
  126. package/docs/demos/Dashboard/examples/Dashboard.md +4 -52
  127. package/docs/demos/DataList/examples/DataList.md +200 -553
  128. package/docs/demos/DescriptionList/examples/DescriptionList.md +18 -156
  129. package/docs/demos/Drawer/examples/Drawer.md +20 -260
  130. package/docs/demos/JumpLinks/examples/JumpLinks.md +24 -312
  131. package/docs/demos/Masthead/examples/Masthead.md +23 -255
  132. package/docs/demos/Modal/examples/Modal.md +24 -312
  133. package/docs/demos/Nav/examples/Nav.md +69 -461
  134. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +20 -260
  135. package/docs/demos/Page/examples/Page.md +39 -505
  136. package/docs/demos/Page/examples/Penta.md +120 -53
  137. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +35 -455
  138. package/docs/demos/Skeleton/examples/Skeleton.md +4 -52
  139. package/docs/demos/Table/examples/Table.md +1598 -6045
  140. package/docs/demos/Tabs/examples/Tabs.md +143 -499
  141. package/docs/demos/Toolbar/examples/Toolbar.md +245 -925
  142. package/docs/demos/Wizard/examples/Wizard.md +36 -468
  143. package/docs/layouts/Bullseye/examples/Bullseye.md +3 -3
  144. package/docs/layouts/Flex/examples/Flex.md +76 -76
  145. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  146. package/docs/layouts/Grid/examples/Grid.md +8 -8
  147. package/docs/layouts/Level/examples/Level.md +4 -4
  148. package/docs/layouts/Split/examples/Split.md +6 -6
  149. package/docs/layouts/Stack/examples/Stack.md +5 -5
  150. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  151. package/docs/utilities/Alignment/examples/Alignment.md +4 -4
  152. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +10 -10
  153. package/docs/utilities/BoxShadow/examples/box-shadow.md +20 -20
  154. package/docs/utilities/Display/examples/Display.md +9 -9
  155. package/docs/utilities/Flex/examples/Flex.md +32 -32
  156. package/docs/utilities/Float/examples/Float.md +2 -2
  157. package/docs/utilities/Sizing/examples/Sizing.md +41 -41
  158. package/docs/utilities/Spacing/examples/Spacing.md +11 -11
  159. package/docs/utilities/Text/examples/Text.md +28 -28
  160. package/package.json +2 -1
  161. package/patternfly-no-globals.css +347 -463
  162. package/patternfly-theme-dark-unversioned.css +347 -463
  163. package/patternfly.css +347 -463
  164. package/patternfly.min.css +1 -1
  165. package/patternfly.min.css.map +1 -1
  166. package/components/Table/themes/dark/table.scss +0 -16
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  id: 'Description list'
3
3
  section: components
4
- cssPrefix: pf-v5-c-description-list
4
+ cssPrefix: pf-v6-c-description-list
5
5
  ---## Examples
6
6
 
7
7
  ### Default
@@ -703,7 +703,7 @@ Column fill will modify the default placement of description list groups to fill
703
703
  ```html
704
704
  <dl
705
705
  class="pf-v6-c-description-list pf-m-auto-fit"
706
- style="--pf-v5-c-description-list--GridTemplateColumns--min: 200px;"
706
+ style="--pf-v6-c-description-list--GridTemplateColumns--min: 200px;"
707
707
  >
708
708
  <div class="pf-v6-c-description-list__group">
709
709
  <dt class="pf-v6-c-description-list__term">
@@ -763,7 +763,7 @@ Column fill will modify the default placement of description list groups to fill
763
763
  ```html
764
764
  <dl
765
765
  class="pf-v6-c-description-list pf-m-auto-fit"
766
- style="--pf-v5-c-description-list--GridTemplateColumns--min-on-md: 100px; --pf-v5-c-description-list--GridTemplateColumns--min-on-lg: 150px; --pf-v5-c-description-list--GridTemplateColumns--min-on-xl: 200px; --pf-v5-c-description-list--GridTemplateColumns--min-on-2xl: 300px;"
766
+ style="--pf-v6-c-description-list--GridTemplateColumns--min-on-md: 100px; --pf-v6-c-description-list--GridTemplateColumns--min-on-lg: 150px; --pf-v6-c-description-list--GridTemplateColumns--min-on-xl: 200px; --pf-v6-c-description-list--GridTemplateColumns--min-on-2xl: 300px;"
767
767
  >
768
768
  <div class="pf-v6-c-description-list__group">
769
769
  <dt class="pf-v6-c-description-list__term">
@@ -1443,7 +1443,7 @@ Cards can be used as description list group wrappers. Using cards in this way ap
1443
1443
  ```html
1444
1444
  <dl
1445
1445
  class="pf-v6-c-description-list pf-m-2-col-on-lg pf-m-display-lg pf-m-horizontal"
1446
- style="--pf-v5-c-description-list__term--width: 10ch;"
1446
+ style="--pf-v6-c-description-list__term--width: 10ch;"
1447
1447
  >
1448
1448
  <div class="pf-v6-c-card">
1449
1449
  <dt class="pf-v6-c-description-list__term">
@@ -1564,33 +1564,33 @@ Cards can be used as description list group wrappers. Using cards in this way ap
1564
1564
 
1565
1565
  | Attribute | Applied to | Outcome |
1566
1566
  | -- | -- | -- |
1567
- | `title` | `.pf-v5-c-description-list` | Provides an accessible title for the description list. **Required** |
1568
- | `tabindex="0"` | `.pf-v5-c-description-list__text.pf-m-help-text` | Inserts the `.pf-v5-c-description-list__text` into the tab order of the page so that it is focusable. **Required when the element is clickable** |
1567
+ | `title` | `.pf-v6-c-description-list` | Provides an accessible title for the description list. **Required** |
1568
+ | `tabindex="0"` | `.pf-v6-c-description-list__text.pf-m-help-text` | Inserts the `.pf-v6-c-description-list__text` into the tab order of the page so that it is focusable. **Required when the element is clickable** |
1569
1569
 
1570
1570
  ### Usage
1571
1571
 
1572
1572
  | Class | Applied to | Outcome |
1573
1573
  | -- | -- | -- |
1574
- | `.pf-v5-c-description-list` | `<dl>` | Initiates the description list component. **Required** |
1575
- | `.pf-v5-c-description-list__group` | `<div>` | Initiates a description list component group. **Required** |
1576
- | `.pf-v5-c-description-list__term` | `<dt>` | Initiates a description list component term. **Required** |
1577
- | `.pf-v5-c-description-list__description` | `<dd>` | Initiates a description list component description. **Required** |
1578
- | `.pf-v5-c-description-list__text` | `<span>`, `<div>` | Initiates a description list component text element. Use a `<span>` when a child of `.pf-v5-c-description-list__term`. **Required** |
1579
- | `.pf-v5-c-description-list__term-icon` | `<span>` | Initiates a description list component term icon element. |
1580
- | `.pf-m-compact` | `.pf-v5-c-description-list` | Modifies the description list for compact horizontal and vertical spacing. |
1581
- | `.pf-m-display-lg` | `.pf-v5-c-description-list` | Modifies the description list to have large display styling. |
1582
- | `.pf-m-display-2xl` | `.pf-v5-c-description-list` | Modifies the description list to have 2xl display styling. |
1583
- | `.pf-m-fluid` | `.pf-v5-c-description-list.pf-m-horizontal` | Modifies the description list term width to be fluid. |
1584
- | `.pf-m-help-text` | `.pf-v5-c-description-list__text` | Indicates there is more information available for the description list component term text. |
1585
- | `.pf-m-horizontal{-on-[sm, md, lg, xl, 2xl]}` | `.pf-v5-c-description-list` | Modifies the description list component term and description pair to a horizontal layout. |
1586
- | `.pf-m-vertical{-on-[sm, md, lg, xl, 2xl]}` | `.pf-v5-c-description-list` | Modifies the description list component term and description pair to a vertical layout. |
1587
- | `.pf-m-fill-columns` | `.pf-v5-c-description-list` | Modifies the description list groups to fill columns from top to bottom, instead of rows from left to right. |
1588
- | `.pf-m-auto-column-widths` | `.pf-v5-c-description-list` | Modifies the description list to format automatically. |
1589
- | `.pf-m-inline-grid` | `.pf-v5-c-description-list` | Modifies the description list display to inline-grid. |
1590
- | `.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}` | `.pf-v5-c-description-list` | Modifies the description list number of columns. |
1591
- | `--pf-v5-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-v5-c-description-list` | Modifies the min value of the `grid-template-columns` declaration at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
1592
- | `--pf-v5-c-description-list--m-horizontal__term--width{-on-[breakpoint]}: {width}` | `.pf-v5-c-description-list.pf-m-horizontal` | Modifies the description list term width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
1593
-
1594
- <!-- | `.pf-m-order[0-12]{-on-[breakpoint]}` | `.pf-v5-c-description-list__group` | Modifies the order of the flex layout element. |
1595
- | `.pf-m-order-first{-on-[breakpoint]}` | `.pf-v5-c-description-list__group` | Modifies the order of the flex layout element to -1. |
1596
- | `.pf-m-order-last{-on-[breakpoint]}` | `..pf-v5-c-description-list__group` | Modifies the order of the flex layout element to $limit + 1. | -->
1574
+ | `.pf-v6-c-description-list` | `<dl>` | Initiates the description list component. **Required** |
1575
+ | `.pf-v6-c-description-list__group` | `<div>` | Initiates a description list component group. **Required** |
1576
+ | `.pf-v6-c-description-list__term` | `<dt>` | Initiates a description list component term. **Required** |
1577
+ | `.pf-v6-c-description-list__description` | `<dd>` | Initiates a description list component description. **Required** |
1578
+ | `.pf-v6-c-description-list__text` | `<span>`, `<div>` | Initiates a description list component text element. Use a `<span>` when a child of `.pf-v6-c-description-list__term`. **Required** |
1579
+ | `.pf-v6-c-description-list__term-icon` | `<span>` | Initiates a description list component term icon element. |
1580
+ | `.pf-m-compact` | `.pf-v6-c-description-list` | Modifies the description list for compact horizontal and vertical spacing. |
1581
+ | `.pf-m-display-lg` | `.pf-v6-c-description-list` | Modifies the description list to have large display styling. |
1582
+ | `.pf-m-display-2xl` | `.pf-v6-c-description-list` | Modifies the description list to have 2xl display styling. |
1583
+ | `.pf-m-fluid` | `.pf-v6-c-description-list.pf-m-horizontal` | Modifies the description list term width to be fluid. |
1584
+ | `.pf-m-help-text` | `.pf-v6-c-description-list__text` | Indicates there is more information available for the description list component term text. |
1585
+ | `.pf-m-horizontal{-on-[sm, md, lg, xl, 2xl]}` | `.pf-v6-c-description-list` | Modifies the description list component term and description pair to a horizontal layout. |
1586
+ | `.pf-m-vertical{-on-[sm, md, lg, xl, 2xl]}` | `.pf-v6-c-description-list` | Modifies the description list component term and description pair to a vertical layout. |
1587
+ | `.pf-m-fill-columns` | `.pf-v6-c-description-list` | Modifies the description list groups to fill columns from top to bottom, instead of rows from left to right. |
1588
+ | `.pf-m-auto-column-widths` | `.pf-v6-c-description-list` | Modifies the description list to format automatically. |
1589
+ | `.pf-m-inline-grid` | `.pf-v6-c-description-list` | Modifies the description list display to inline-grid. |
1590
+ | `.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}` | `.pf-v6-c-description-list` | Modifies the description list number of columns. |
1591
+ | `--pf-v6-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-v6-c-description-list` | Modifies the min value of the `grid-template-columns` declaration at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
1592
+ | `--pf-v6-c-description-list--m-horizontal__term--width{-on-[breakpoint]}: {width}` | `.pf-v6-c-description-list.pf-m-horizontal` | Modifies the description list term width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
1593
+
1594
+ <!-- | `.pf-m-order[0-12]{-on-[breakpoint]}` | `.pf-v6-c-description-list__group` | Modifies the order of the flex layout element. |
1595
+ | `.pf-m-order-first{-on-[breakpoint]}` | `.pf-v6-c-description-list__group` | Modifies the order of the flex layout element to -1. |
1596
+ | `.pf-m-order-last{-on-[breakpoint]}` | `..pf-v6-c-description-list__group` | Modifies the order of the flex layout element to $limit + 1. | -->
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  id: Divider
3
3
  section: components
4
- cssPrefix: pf-v5-c-divider
4
+ cssPrefix: pf-v6-c-divider
5
5
  ---import './Divider.css'
6
6
 
7
7
  ## Examples
@@ -125,14 +125,14 @@ The divider renders as an `<hr>` by default. It is possible to make the divider
125
125
 
126
126
  | Attribute | Applied to | Outcome |
127
127
  | -- | -- | -- |
128
- | `role="separator"` | `li.pf-v5-c-divider`, `div.pf-v5-c-divider` | Indicates that the separator is a separator. |
128
+ | `role="separator"` | `li.pf-v6-c-divider`, `div.pf-v6-c-divider` | Indicates that the separator is a separator. |
129
129
 
130
130
  ### Usage
131
131
 
132
132
  | Class | Applied to | Outcome |
133
133
  | -- | -- | -- |
134
- | `.pf-v5-c-divider` | `<hr>`, `<li>`, `<div>` | Defines the divider component. |
135
- | `.pf-m-vertical` | `.pf-v5-c-divider` | Modifies the divider component from horizontal to vertical. This modifier requires that the parent has an explicit or implicit height, or has a flex or grid based layout parent. |
136
- | `.pf-m-inset-{none, sm, md, lg, xl, 2xl, 3xl}{-on-[sm, md, lg, xl, 2xl]}` | `.pf-v5-c-divider` | Modifies divider padding/inset to visually match padding of other adjacent components. |
137
- | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v5-c-divider` | Modifies a divider to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
138
- | `.pf-m-visible{-on-[breakpoint]}` | `.pf-v5-c-divider` | Modifies a divider to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
134
+ | `.pf-v6-c-divider` | `<hr>`, `<li>`, `<div>` | Defines the divider component. |
135
+ | `.pf-m-vertical` | `.pf-v6-c-divider` | Modifies the divider component from horizontal to vertical. This modifier requires that the parent has an explicit or implicit height, or has a flex or grid based layout parent. |
136
+ | `.pf-m-inset-{none, sm, md, lg, xl, 2xl, 3xl}{-on-[sm, md, lg, xl, 2xl]}` | `.pf-v6-c-divider` | Modifies divider padding/inset to visually match padding of other adjacent components. |
137
+ | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-divider` | Modifies a divider to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
138
+ | `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-divider` | Modifies a divider to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
@@ -2,7 +2,7 @@
2
2
  id: 'Drag and drop'
3
3
  beta: true
4
4
  section: components
5
- cssPrefix: pf-v5-c-drag-drop
5
+ cssPrefix: pf-v6-c-drag-drop
6
6
  ---import './DragDrop.css'
7
7
 
8
8
  ## Examples
@@ -61,7 +61,7 @@ cssPrefix: pf-v5-c-drag-drop
61
61
 
62
62
  | Class | Applied to | Outcome |
63
63
  | -- | -- | -- |
64
- | `.pf-v5-c-draggable` | `*` | Initiates a draggable element. |
65
- | `.pf-v5-c-droppable` | `*` | Initiates a droppable element. |
66
- | `.pf-m-dragging` | `.pf-v5-c-draggable`, `.pf-v5-c-droppable` | Indicates a draggable and droppable element are in the dragging state. |
67
- | `.pf-m-drag-outside` | `.pf-v5-c-draggable`, `.pf-v5-c-droppable` | Indicates a draggable element is dragged outside of a droppable element. |
64
+ | `.pf-v6-c-draggable` | `*` | Initiates a draggable element. |
65
+ | `.pf-v6-c-droppable` | `*` | Initiates a droppable element. |
66
+ | `.pf-m-dragging` | `.pf-v6-c-draggable`, `.pf-v6-c-droppable` | Indicates a draggable and droppable element are in the dragging state. |
67
+ | `.pf-m-drag-outside` | `.pf-v6-c-draggable`, `.pf-v6-c-droppable` | Indicates a draggable element is dragged outside of a droppable element. |
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  id: Drawer
3
3
  section: components
4
- cssPrefix: pf-v5-c-drawer
4
+ cssPrefix: pf-v6-c-drawer
5
5
  ---import './Drawer.css'
6
6
 
7
7
  ## Examples
@@ -426,7 +426,7 @@ cssPrefix: pf-v5-c-drawer
426
426
  <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
427
427
  <div
428
428
  class="pf-v6-c-drawer__body pf-m-paddinng"
429
- style="--pf-v5-c-drawer__panel__body--PaddingLeft: 48px;"
429
+ style="--pf-v6-c-drawer__panel__body--PaddingLeft: 48px;"
430
430
  >Drawer panel body content with modified inline start padding</div>
431
431
  </div>
432
432
  </div>
@@ -729,18 +729,18 @@ cssPrefix: pf-v5-c-drawer
729
729
 
730
730
  | Class | Applied to | Outcome |
731
731
  | -- | -- | -- |
732
- | `role="separator"` | `.pf-v5-c-drawer__splitter` | Indicates that the splitter is a separator. **Required** |
733
- | `tabindex="0"` | `.pf-v5-c-drawer__splitter` | Inserts the splitter into the tab order of the page so that it is focusable. **Required** |
734
- | `aria-orientation="horizontal"` | `.pf-v5-c-drawer__splitter` | Indicates that the splitter is oriented horizontally. |
735
- | `aria-orientation="vertical"` | `.pf-v5-c-drawer__splitter.pf-m-vertical` | Indicates that the splitter is oriented vertically. |
732
+ | `role="separator"` | `.pf-v6-c-drawer__splitter` | Indicates that the splitter is a separator. **Required** |
733
+ | `tabindex="0"` | `.pf-v6-c-drawer__splitter` | Inserts the splitter into the tab order of the page so that it is focusable. **Required** |
734
+ | `aria-orientation="horizontal"` | `.pf-v6-c-drawer__splitter` | Indicates that the splitter is oriented horizontally. |
735
+ | `aria-orientation="vertical"` | `.pf-v6-c-drawer__splitter.pf-m-vertical` | Indicates that the splitter is oriented vertically. |
736
736
 
737
737
  ### Usage
738
738
 
739
739
  | Class | Applied to | Outcome |
740
740
  | -- | -- | -- |
741
- | `.pf-v5-c-drawer__splitter` | `<div>` | Initiates the splitter. |
742
- | `.pf-v5-c-drawer__splitter-handle` | `<div>` | Initiates the splitter handle element. |
743
- | `.pf-m-vertical` | `.pf-v5-c-drawer__splitter` | Modifies the splitter to be vertical. |
741
+ | `.pf-v6-c-drawer__splitter` | `<div>` | Initiates the splitter. |
742
+ | `.pf-v6-c-drawer__splitter-handle` | `<div>` | Initiates the splitter handle element. |
743
+ | `.pf-m-vertical` | `.pf-v6-c-drawer__splitter` | Modifies the splitter to be vertical. |
744
744
 
745
745
  ## Documentation
746
746
 
@@ -750,35 +750,35 @@ cssPrefix: pf-v5-c-drawer
750
750
  | -- | -- | -- |
751
751
  | `aria-expanded="true"` | `action that opens drawer` | Indicates that the expandable content is visible. **Required** |
752
752
  | `aria-expanded="false"` | `action that opens drawer` | Indicates that the expandable content is hidden. **Required** |
753
- | `hidden` | `.pf-v5-c-drawer__panel` | Hides the drawer panel from assistive technologies. **Required** |
753
+ | `hidden` | `.pf-v6-c-drawer__panel` | Hides the drawer panel from assistive technologies. **Required** |
754
754
 
755
755
  ### Usage
756
756
 
757
757
  | Class | Applied to | Outcome |
758
758
  | -- | -- | -- |
759
- | `.pf-v5-c-drawer` | `<div>` | Initiates the drawer container. **Required** |
760
- | `.pf-v5-c-drawer__section` | `<div>` | Initiates a drawer section area. This element can be used above or below `.pf-v5-c-drawer__main` for titles, toolbars, footers, etc. |
761
- | `.pf-v5-c-drawer__main` | `<div>` | Initiates the drawer main area. **Required** |
762
- | `.pf-v5-c-drawer__content` | `<div>` | Initiates the drawer content container. **Required** |
763
- | `.pf-v5-c-drawer__panel` | `<aside>` | Initiates the drawer panel container. **Required** |
764
- | `.pf-v5-c-drawer__panel-main` | `<div>` | Initiates the drawer panel main container for resizable drawers only. |
765
- | `.pf-v5-c-drawer__body` | `<div>` | Initiates a drawer body container and is the child of `.pf-v5-c-drawer__content`, `.pf-v5-c-drawer__panel` and `.pf-v5-c-drawer__panel-main`. **Required** |
766
- | `.pf-v5-c-drawer__head` | `<div>` | Initiates a drawer head container. This container positions `.pf-v5-c-drawer__actions`, if present. |
767
- | `.pf-v5-c-drawer__actions` | `<div>` | Initiates an actions container within `.pf-v5--drawer__head`. |
768
- | `.pf-v5-c-drawer__close` | `<div>` | Identifies the drawer close button within `.pf-v5-c-drawer__actions`. |
769
- | `.pf-v5-c-drawer__description` | `<div>` | Initiates a drawer panel description. |
770
- | `.pf-m-panel-left` | `.pf-v5-c-drawer` | Modifies the drawer panel to expand from the left. |
771
- | `.pf-m-panel-bottom` | `.pf-v5-c-drawer` | Modifies the drawer panel to expand from the bottom. **Note:** percentage based panel sizes require the drawer component's parent element have an implicit or explicit height. |
772
- | `.pf-m-expanded` | `.pf-v5-c-drawer` | Modifies the drawer panel for the expanded state. |
773
- | `.pf-m-static{-on-[lg, xl, 2xl]}` | `.pf-v5-c-drawer` | Modifies the drawer panel state to always show both content and panel at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
774
- | `.pf-m-inline{-on-[lg, xl, 2xl]}` | `.pf-v5-c-drawer` | Modifies the drawer so the content element and panel element are displayed side by side. `.pf-m-inline` used without a [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) will default to the `md` breakpoint. |
775
- | `.pf-m-no-border` | `.pf-v5-c-drawer__panel` | Modifies the drawer panel border treatment to disable all border treatment. |
776
- | `.pf-m-padding` | `.pf-v5-c-drawer__body` | Modifies the element to add padding. |
777
- | `.pf-m-no-padding` | `.pf-v5-c-drawer__body` | Modifies the element to remove padding. |
778
- | `.pf-m-no-background` | `.pf-v5-c-drawer__section`, `.pf-v5-c-drawer__content`, `.pf-v5-c-drawer__panel` | Modifies the drawer element background color to transparent. |
779
- | `.pf-m-secondary` | `.pf-v5-c-drawer__section`, `.pf-v5-c-drawer__content`, `.pf-v5-c-drawer__panel` | Modifies the drawer element to use the secondary background color. |
780
- | `.pf-m-width-{25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-v5-c-drawer__panel` | Modifies the drawer panel width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
781
- | `.pf-m-resizable` | `.pf-v5-c-drawer__panel` | Modifies the drawer panel to be resizable. Intended for use with the `.pf-v5-c-drawer__splitter` element. |
782
- | `--pf-v5-c-drawer__panel--md--FlexBasis--min` | `.pf-v5-c-drawer__panel` | Defines the drawer panel minimum size. |
783
- | `--pf-v5-c-drawer__panel--md--FlexBasis` | `.pf-v5-c-drawer__panel` | Defines the drawer panel size. |
784
- | `--pf-v5-c-drawer__panel--md--FlexBasis--max` | `.pf-v5-c-drawer__panel` | Defines the drawer panel maximum size. |
759
+ | `.pf-v6-c-drawer` | `<div>` | Initiates the drawer container. **Required** |
760
+ | `.pf-v6-c-drawer__section` | `<div>` | Initiates a drawer section area. This element can be used above or below `.pf-v6-c-drawer__main` for titles, toolbars, footers, etc. |
761
+ | `.pf-v6-c-drawer__main` | `<div>` | Initiates the drawer main area. **Required** |
762
+ | `.pf-v6-c-drawer__content` | `<div>` | Initiates the drawer content container. **Required** |
763
+ | `.pf-v6-c-drawer__panel` | `<aside>` | Initiates the drawer panel container. **Required** |
764
+ | `.pf-v6-c-drawer__panel-main` | `<div>` | Initiates the drawer panel main container for resizable drawers only. |
765
+ | `.pf-v6-c-drawer__body` | `<div>` | Initiates a drawer body container and is the child of `.pf-v6-c-drawer__content`, `.pf-v6-c-drawer__panel` and `.pf-v6-c-drawer__panel-main`. **Required** |
766
+ | `.pf-v6-c-drawer__head` | `<div>` | Initiates a drawer head container. This container positions `.pf-v6-c-drawer__actions`, if present. |
767
+ | `.pf-v6-c-drawer__actions` | `<div>` | Initiates an actions container within `.pf-v6--drawer__head`. |
768
+ | `.pf-v6-c-drawer__close` | `<div>` | Identifies the drawer close button within `.pf-v6-c-drawer__actions`. |
769
+ | `.pf-v6-c-drawer__description` | `<div>` | Initiates a drawer panel description. |
770
+ | `.pf-m-panel-left` | `.pf-v6-c-drawer` | Modifies the drawer panel to expand from the left. |
771
+ | `.pf-m-panel-bottom` | `.pf-v6-c-drawer` | Modifies the drawer panel to expand from the bottom. **Note:** percentage based panel sizes require the drawer component's parent element have an implicit or explicit height. |
772
+ | `.pf-m-expanded` | `.pf-v6-c-drawer` | Modifies the drawer panel for the expanded state. |
773
+ | `.pf-m-static{-on-[lg, xl, 2xl]}` | `.pf-v6-c-drawer` | Modifies the drawer panel state to always show both content and panel at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
774
+ | `.pf-m-inline{-on-[lg, xl, 2xl]}` | `.pf-v6-c-drawer` | Modifies the drawer so the content element and panel element are displayed side by side. `.pf-m-inline` used without a [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) will default to the `md` breakpoint. |
775
+ | `.pf-m-no-border` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel border treatment to disable all border treatment. |
776
+ | `.pf-m-padding` | `.pf-v6-c-drawer__body` | Modifies the element to add padding. |
777
+ | `.pf-m-no-padding` | `.pf-v6-c-drawer__body` | Modifies the element to remove padding. |
778
+ | `.pf-m-no-background` | `.pf-v6-c-drawer__section`, `.pf-v6-c-drawer__content`, `.pf-v6-c-drawer__panel` | Modifies the drawer element background color to transparent. |
779
+ | `.pf-m-secondary` | `.pf-v6-c-drawer__section`, `.pf-v6-c-drawer__content`, `.pf-v6-c-drawer__panel` | Modifies the drawer element to use the secondary background color. |
780
+ | `.pf-m-width-{25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
781
+ | `.pf-m-resizable` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel to be resizable. Intended for use with the `.pf-v6-c-drawer__splitter` element. |
782
+ | `--pf-v6-c-drawer__panel--md--FlexBasis--min` | `.pf-v6-c-drawer__panel` | Defines the drawer panel minimum size. |
783
+ | `--pf-v6-c-drawer__panel--md--FlexBasis` | `.pf-v6-c-drawer__panel` | Defines the drawer panel size. |
784
+ | `--pf-v6-c-drawer__panel--md--FlexBasis--max` | `.pf-v6-c-drawer__panel` | Defines the drawer panel maximum size. |
@@ -51,7 +51,7 @@
51
51
  min-height: 210px;
52
52
  }
53
53
 
54
- [id^="ws-html-deprecated-c-dropdown-split-button"] .pf-v5-c-dropdown:not(:last-child) {
54
+ [id^="ws-html-deprecated-c-dropdown-split-button"] .pf-v6-c-dropdown:not(:last-child) {
55
55
  margin-inline-end: 4px;
56
56
  }
57
57
 
@@ -2,7 +2,7 @@
2
2
  id: Dropdown
3
3
  section: components
4
4
  subsection: menus
5
- cssPrefix: pf-v5-c-dropdown
5
+ cssPrefix: pf-v6-c-dropdown
6
6
  deprecated: true
7
7
  ---import './Dropdown.css'
8
8
 
@@ -2867,54 +2867,54 @@ The dropdown menu can contain either links or buttons, depending on the expected
2867
2867
 
2868
2868
  | Attribute | Applied | Outcome |
2869
2869
  | -- | -- | -- |
2870
- | `aria-expanded="false"` | `.pf-v5-c-dropdown__toggle`, `.pf-v5-c-dropdown__toggle-check`, `.pf-v5-c-dropdown__toggle-button` | Indicates that the menu is hidden. |
2871
- | `aria-expanded="true"` | `.pf-v5-c-dropdown__toggle`, `.pf-v5-c-dropdown__toggle-check`, `.pf-v5-c-dropdown__toggle-button` | Indicates that the menu is visible. |
2872
- | `aria-label="Actions"` | `.pf-v5-c-dropdown__toggle`, `.pf-v5-c-dropdown__toggle-check`, `.pf-v5-c-dropdown__toggle-button` | Provides an accessible name for the dropdown when an icon is used instead of text. **Required when icon is used with no supporting text**. |
2873
- | `aria-hidden="true"` | `.pf-v5-c-dropdown__toggle-icon`, `<i>`, `.pf-v5-c-dropdown__toggle-check .pf-v5-c-dropdown__toggle-text` | Hides the icon from assistive technologies. |
2874
- | `hidden` | `.pf-v5-c-dropdown__menu` | Indicates that the menu is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
2875
- | `aria-labelledby="{toggle button id}"` | `.pf-v5-c-dropdown__menu` | Gives the menu an accessible name by referring to the element that toggles the menu. |
2876
- | `aria-labelledby="{checkbox id} {toggle text id}"` | `.pf-m-split-button .pf-v5-c-dropdown__toggle-check > input[type="checkbox"]` | Gives the checkbox an accessible name by referring to the element by which it is described. |
2877
- | `disabled` | `.pf-v5-c-dropdown__toggle`, `.pf-v5-c-dropdown__toggle-button`, `.pf-v5-c-dropdown__toggle-check > input[type="checkbox"]` | Disables the dropdown toggle and removes it from keyboard focus. |
2878
- | `disabled` | `button.pf-v5-c-dropdown__menu-item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
2879
- | `aria-disabled="true"` | `a.pf-v5-c-dropdown__menu-item` | When the menu item uses a link element, indicates that it is unavailable. |
2880
- | `tabindex="-1"` | `a.pf-v5-c-dropdown__menu-item` | When the menu item uses a link element, removes it from keyboard focus. |
2870
+ | `aria-expanded="false"` | `.pf-v6-c-dropdown__toggle`, `.pf-v6-c-dropdown__toggle-check`, `.pf-v6-c-dropdown__toggle-button` | Indicates that the menu is hidden. |
2871
+ | `aria-expanded="true"` | `.pf-v6-c-dropdown__toggle`, `.pf-v6-c-dropdown__toggle-check`, `.pf-v6-c-dropdown__toggle-button` | Indicates that the menu is visible. |
2872
+ | `aria-label="Actions"` | `.pf-v6-c-dropdown__toggle`, `.pf-v6-c-dropdown__toggle-check`, `.pf-v6-c-dropdown__toggle-button` | Provides an accessible name for the dropdown when an icon is used instead of text. **Required when icon is used with no supporting text**. |
2873
+ | `aria-hidden="true"` | `.pf-v6-c-dropdown__toggle-icon`, `<i>`, `.pf-v6-c-dropdown__toggle-check .pf-v6-c-dropdown__toggle-text` | Hides the icon from assistive technologies. |
2874
+ | `hidden` | `.pf-v6-c-dropdown__menu` | Indicates that the menu is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
2875
+ | `aria-labelledby="{toggle button id}"` | `.pf-v6-c-dropdown__menu` | Gives the menu an accessible name by referring to the element that toggles the menu. |
2876
+ | `aria-labelledby="{checkbox id} {toggle text id}"` | `.pf-m-split-button .pf-v6-c-dropdown__toggle-check > input[type="checkbox"]` | Gives the checkbox an accessible name by referring to the element by which it is described. |
2877
+ | `disabled` | `.pf-v6-c-dropdown__toggle`, `.pf-v6-c-dropdown__toggle-button`, `.pf-v6-c-dropdown__toggle-check > input[type="checkbox"]` | Disables the dropdown toggle and removes it from keyboard focus. |
2878
+ | `disabled` | `button.pf-v6-c-dropdown__menu-item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
2879
+ | `aria-disabled="true"` | `a.pf-v6-c-dropdown__menu-item` | When the menu item uses a link element, indicates that it is unavailable. |
2880
+ | `tabindex="-1"` | `a.pf-v6-c-dropdown__menu-item` | When the menu item uses a link element, removes it from keyboard focus. |
2881
2881
 
2882
2882
  ### Usage
2883
2883
 
2884
2884
  | Class | Applied | Outcome |
2885
2885
  | -- | -- | -- |
2886
- | `.pf-v5-c-dropdown` | `<div>` | Defines the parent wrapper of the dropdown. |
2887
- | `.pf-v5-c-dropdown__toggle` | `<button>` | Defines the dropdown toggle. |
2888
- | `.pf-v5-c-dropdown__toggle-icon` | `<span>` | Defines the dropdown toggle icon. |
2889
- | `.pf-v5-c-dropdown__toggle-text` | `<span>` | Defines the dropdown toggle text. **Required when text is present, adds truncation**. |
2890
- | `.pf-v5-c-dropdown__toggle-check` | `<label>` | Defines a checkbox in the toggle area of a split button dropdown. |
2891
- | `.pf-v5-c-dropdown__toggle-button` | `<button>` | Defines the toggle button for a split button dropdown. |
2892
- | `.pf-v5-c-dropdown__toggle-progress` | `<span>` | Defines the progress element to indicate a dropdown action is in progress. |
2893
- | `.pf-v5-c-dropdown__menu` | `<ul>`, `<div>` | Defines the parent wrapper of the menu items. |
2894
- | `.pf-v5-c-dropdown__menu-item` | `<a>` | Defines a menu item that navigates to another page. |
2895
- | `.pf-v5-c-dropdown__menu-item-icon` | `<span>` | Defines the wrapper for the menu item icon. |
2896
- | `.pf-v5-c-dropdown__menu-item-description` | `<div>` | Defines the wrapper for the menu item description. |
2897
- | `.pf-v5-c-dropdown__menu-item-main` | `<div>` | Defines the wrapper for the menu item main element. Use when the description element is present. |
2898
- | `.pf-v5-c-dropdown__toggle-image` | `<span>` | Defines the wrapper for the dropdown toggle button image. |
2899
- | `.pf-v5-c-dropdown__menu-item` | `<button>` | Defines a menu item that performs an action on the current page. |
2900
- | `.pf-v5-c-dropdown__group` | `<section>` | Defines a group of items in a dropdown. **Required when there is more than one group in a dropdown**. |
2901
- | `.pf-v5-c-dropdown__group-title` | `<h1>` | Defines the title for a group of items in the dropdown menu. |
2902
- | `.pf-m-expanded` | `.pf-v5-c-dropdown` | Modifies for the expanded state. |
2903
- | `.pf-m-top` | `.pf-v5-c-dropdown` | Modifies to display the menu above the toggle. |
2904
- | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-v5-c-dropdown__menu` | Modifies to display the menu aligned to the left edge of the toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
2905
- | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-v5-c-dropdown__menu` | Modifies to display the menu aligned to the right edge of the toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
2906
- | `.pf-m-static` | `.pf-v5-c-dropdown__menu` | Modifies a dropdown menu to be statically positioned to support custom positioning. |
2907
- | `.pf-m-split-button` | `.pf-v5-c-dropdown__toggle` | Modifies the dropdown toggle area to allow for interactive elements. |
2908
- | `.pf-m-action` | `.pf-v5-c-dropdown__toggle.pf-m-split-button` | Modifies the dropdown toggle for when an action is placed beside a toggle button in a split button dropdown. |
2909
- | `.pf-m-text` | `.pf-v5-c-dropdown__menu-item` | Modifies a menu item to be non-interactive text. |
2910
- | `.pf-m-plain` | `.pf-v5-c-dropdown__toggle` | Modifies to display the toggle with no border. |
2911
- | `.pf-m-text` | `.pf-v5-c-dropdown__toggle` | Modifies the dropdown toggle for the text variation. |
2912
- | `.pf-m-primary` | `.pf-v5-c-dropdown__toggle` | Modifies to display the toggle with primary styles. |
2913
- | `.pf-m-secondary` | `.pf-v5-c-dropdown__toggle` | Modifies to display the toggle with secondary styles. |
2914
- | `.pf-m-full-height` | `.pf-v5-c-dropdown` | Modifies a dropdown to full height of parent. See masthead for use. |
2915
- | `.pf-m-disabled` | `a.pf-v5-c-dropdown__menu-item` | Modifies to display the menu item as disabled. This applies to `a.pf-v5-c-dropdown__menu-item` and should not be used in lieu of the `disabled` attribute on `button.pf-v5-c-dropdown__menu-item`. |
2916
- | `.pf-m-disabled` | `div.pf-v5-c-dropdown__toggle` | Modifies to display the dropdown toggle as disabled. This applies to `div.pf-v5-c-dropdown__toggle` and should not be used in lieu of the `disabled` attribute on `button.pf-v5-c-dropdown__toggle`. When this is used, `disabled` should also be added to any form elements in `div.pf-v5-c-dropdown__toggle`. |
2917
- | `.pf-m-icon` | `.pf-v5-c-dropdown__menu-item` | Modifies an item to support adding an icon. |
2918
- | `.pf-m-active` | `.pf-v5-c-dropdown__toggle` | Modifies the dropdown menu toggle for the active state. |
2919
- | `.pf-m-description` | `.pf-v5-c-dropdown__menu-item` | Modifies an item to support adding a description. |
2920
- | `.pf-m-in-progress` | `.pf-v5-c-dropdown__toggle-check` | Modifies a toggle check element to indicate the check action is in progress. |
2886
+ | `.pf-v6-c-dropdown` | `<div>` | Defines the parent wrapper of the dropdown. |
2887
+ | `.pf-v6-c-dropdown__toggle` | `<button>` | Defines the dropdown toggle. |
2888
+ | `.pf-v6-c-dropdown__toggle-icon` | `<span>` | Defines the dropdown toggle icon. |
2889
+ | `.pf-v6-c-dropdown__toggle-text` | `<span>` | Defines the dropdown toggle text. **Required when text is present, adds truncation**. |
2890
+ | `.pf-v6-c-dropdown__toggle-check` | `<label>` | Defines a checkbox in the toggle area of a split button dropdown. |
2891
+ | `.pf-v6-c-dropdown__toggle-button` | `<button>` | Defines the toggle button for a split button dropdown. |
2892
+ | `.pf-v6-c-dropdown__toggle-progress` | `<span>` | Defines the progress element to indicate a dropdown action is in progress. |
2893
+ | `.pf-v6-c-dropdown__menu` | `<ul>`, `<div>` | Defines the parent wrapper of the menu items. |
2894
+ | `.pf-v6-c-dropdown__menu-item` | `<a>` | Defines a menu item that navigates to another page. |
2895
+ | `.pf-v6-c-dropdown__menu-item-icon` | `<span>` | Defines the wrapper for the menu item icon. |
2896
+ | `.pf-v6-c-dropdown__menu-item-description` | `<div>` | Defines the wrapper for the menu item description. |
2897
+ | `.pf-v6-c-dropdown__menu-item-main` | `<div>` | Defines the wrapper for the menu item main element. Use when the description element is present. |
2898
+ | `.pf-v6-c-dropdown__toggle-image` | `<span>` | Defines the wrapper for the dropdown toggle button image. |
2899
+ | `.pf-v6-c-dropdown__menu-item` | `<button>` | Defines a menu item that performs an action on the current page. |
2900
+ | `.pf-v6-c-dropdown__group` | `<section>` | Defines a group of items in a dropdown. **Required when there is more than one group in a dropdown**. |
2901
+ | `.pf-v6-c-dropdown__group-title` | `<h1>` | Defines the title for a group of items in the dropdown menu. |
2902
+ | `.pf-m-expanded` | `.pf-v6-c-dropdown` | Modifies for the expanded state. |
2903
+ | `.pf-m-top` | `.pf-v6-c-dropdown` | Modifies to display the menu above the toggle. |
2904
+ | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-v6-c-dropdown__menu` | Modifies to display the menu aligned to the left edge of the toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
2905
+ | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-v6-c-dropdown__menu` | Modifies to display the menu aligned to the right edge of the toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
2906
+ | `.pf-m-static` | `.pf-v6-c-dropdown__menu` | Modifies a dropdown menu to be statically positioned to support custom positioning. |
2907
+ | `.pf-m-split-button` | `.pf-v6-c-dropdown__toggle` | Modifies the dropdown toggle area to allow for interactive elements. |
2908
+ | `.pf-m-action` | `.pf-v6-c-dropdown__toggle.pf-m-split-button` | Modifies the dropdown toggle for when an action is placed beside a toggle button in a split button dropdown. |
2909
+ | `.pf-m-text` | `.pf-v6-c-dropdown__menu-item` | Modifies a menu item to be non-interactive text. |
2910
+ | `.pf-m-plain` | `.pf-v6-c-dropdown__toggle` | Modifies to display the toggle with no border. |
2911
+ | `.pf-m-text` | `.pf-v6-c-dropdown__toggle` | Modifies the dropdown toggle for the text variation. |
2912
+ | `.pf-m-primary` | `.pf-v6-c-dropdown__toggle` | Modifies to display the toggle with primary styles. |
2913
+ | `.pf-m-secondary` | `.pf-v6-c-dropdown__toggle` | Modifies to display the toggle with secondary styles. |
2914
+ | `.pf-m-full-height` | `.pf-v6-c-dropdown` | Modifies a dropdown to full height of parent. See masthead for use. |
2915
+ | `.pf-m-disabled` | `a.pf-v6-c-dropdown__menu-item` | Modifies to display the menu item as disabled. This applies to `a.pf-v6-c-dropdown__menu-item` and should not be used in lieu of the `disabled` attribute on `button.pf-v6-c-dropdown__menu-item`. |
2916
+ | `.pf-m-disabled` | `div.pf-v6-c-dropdown__toggle` | Modifies to display the dropdown toggle as disabled. This applies to `div.pf-v6-c-dropdown__toggle` and should not be used in lieu of the `disabled` attribute on `button.pf-v6-c-dropdown__toggle`. When this is used, `disabled` should also be added to any form elements in `div.pf-v6-c-dropdown__toggle`. |
2917
+ | `.pf-m-icon` | `.pf-v6-c-dropdown__menu-item` | Modifies an item to support adding an icon. |
2918
+ | `.pf-m-active` | `.pf-v6-c-dropdown__toggle` | Modifies the dropdown menu toggle for the active state. |
2919
+ | `.pf-m-description` | `.pf-v6-c-dropdown__menu-item` | Modifies an item to support adding a description. |
2920
+ | `.pf-m-in-progress` | `.pf-v6-c-dropdown__toggle-check` | Modifies a toggle check element to indicate the check action is in progress. |
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  id: 'Dual list selector'
3
3
  section: components
4
- cssPrefix: pf-v5-c-dual-list-selector
4
+ cssPrefix: pf-v6-c-dual-list-selector
5
5
  ---## Examples
6
6
 
7
7
  ### Basic
@@ -3320,48 +3320,48 @@ cssPrefix: pf-v5-c-dual-list-selector
3320
3320
  | Attribute | Applied to | Outcome |
3321
3321
  | -- | -- | -- |
3322
3322
  | `aria-live` | `[element with live text]` | To give screen reader users live feedback about what's happening during interaction with the dual list selector, both during drag and drop interactions and keyboard interactions. **Highly Recommended** |
3323
- | `aria-labelledby="[id of .pf-v5-c-dual-list-selector__status-text]` | `.pf-v5-c-dual-list-selector__list [ul]` | Gives the list an accessible name. |
3324
- | `role="listbox or tree or group"` | `.pf-v5-c-dual-list-selector__list [ul]` | Indicates the list is single, a tree, or a subgroup within the tree. |
3325
- | `aria-multiselectable="true"` | `.pf-v5-c-dual-list-selector__list [ul]` | Indicates the list is multiselectable. |
3326
- | `aria-activedescendant=""` | `.pf-v5-c-dual-list-selector__list [ul]` | Indicates the list has clickable children. |
3327
- | `role="option or treeitem"` | `.pf-v5-c-dual-list-selector__list-item [li]` | Indicates whether the item is part of a tree. |
3328
- | `aria-expanded="true"` | `.pf-v5-c-dual-list-selector__list-item [li]` | Indicates a treeitem is expanded. |
3323
+ | `aria-labelledby="[id of .pf-v6-c-dual-list-selector__status-text]` | `.pf-v6-c-dual-list-selector__list [ul]` | Gives the list an accessible name. |
3324
+ | `role="listbox or tree or group"` | `.pf-v6-c-dual-list-selector__list [ul]` | Indicates the list is single, a tree, or a subgroup within the tree. |
3325
+ | `aria-multiselectable="true"` | `.pf-v6-c-dual-list-selector__list [ul]` | Indicates the list is multiselectable. |
3326
+ | `aria-activedescendant=""` | `.pf-v6-c-dual-list-selector__list [ul]` | Indicates the list has clickable children. |
3327
+ | `role="option or treeitem"` | `.pf-v6-c-dual-list-selector__list-item [li]` | Indicates whether the item is part of a tree. |
3328
+ | `aria-expanded="true"` | `.pf-v6-c-dual-list-selector__list-item [li]` | Indicates a treeitem is expanded. |
3329
3329
 
3330
3330
  ### Usage
3331
3331
 
3332
3332
  | Class | Applied | Outcome |
3333
3333
  | -- | -- | -- |
3334
- | `.pf-v5-c-dual-list-selector` | `<div>` | Initiates the dual list selector component. **Required** |
3335
- | `.pf-v5-c-dual-list-selector__pane` | `<div>` | Initiates a dual list selector pane. **Required** |
3336
- | `.pf-v5-c-dual-list-selector__header` | `<div>` | Initiates a dual list selector pane header. **Required** |
3337
- | `.pf-v5-c-dual-list-selector__title` | `<div>` | Initiates a dual list selector pane title. **Required** |
3338
- | `.pf-v5-c-dual-list-selector__title-text` | `<div>` | Initiates a dual list selector pane title text. **Required** |
3339
- | `.pf-v5-c-dual-list-selector__tools` | `<div>` | Initiates a dual list selector tools. **Required** |
3340
- | `.pf-v5-c-dual-list-selector__filter` | `<div>` | Initiates a dual list selector pane filter. **Required** |
3341
- | `.pf-v5-c-dual-list-selector__actions` | `<div>` | Initiates a dual list selector pane actions. |
3342
- | `.pf-v5-c-dual-list-selector__actions-item` | `<div>` | Initiates a dual list selector pane actions item. |
3343
- | `.pf-v5-c-dual-list-selector__status` | `<div>` | Initiates a dual list selector pane selected status. **Required** |
3344
- | `.pf-v5-c-dual-list-selector__status-text` | `<span>` | Initiates a dual list selector pane selected status text. **Required** |
3345
- | `.pf-v5-c-dual-list-selector__menu` | `<div>` | Initiates a dual list selector pane menu container. **Required** |
3346
- | `.pf-v5-c-dual-list-selector__list` | `<ul>` | Initiates a dual list selector pane menu list. **Required** |
3347
- | `.pf-v5-c-dual-list-selector__list-item` | `<li>` | Initiates a dual list selector pane menu list item. **Required** |
3348
- | `.pf-v5-c-dual-list-selector__list-item-row` | `<div>` | Initiates a dual list selector pane menu list item row. **Required** |
3349
- | `.pf-v5-c-dual-list-selector__draggable` | `<div>` | Initiates a dual list selector pane draggable element. |
3350
- | `.pf-v5-c-dual-list-selector__item` | `<span>`, `<div>` | Initiates a dual list selector pane menu item. **Required** |
3351
- | `.pf-v5-c-dual-list-selector__item-main` | `<span>` | Initiates a dual list selector pane menu item main container. **Required** |
3352
- | `.pf-v5-c-dual-list-selector__item-check` | `<span>` | Initiates the dual list selector item check. |
3353
- | `.pf-v5-c-dual-list-selector__item-count` | `<span>` | Initiates the dual list selector item count. |
3354
- | `.pf-v5-c-dual-list-selector__item-toggle-icon` | `<span>` | Initiates the dual list selector item toggle icon. |
3355
- | `.pf-v5-c-dual-list-selector__item-toggle` | `<button>` | Initiates the dual list selector item toggle. |
3356
- | `.pf-v5-c-dual-list-selector__item-text` | `<span>` | Initiates a dual list selector pane menu item text. **Required** |
3357
- | `.pf-v5-c-dual-list-selector__controls` | `<div>` | Initiates the dual list selector controls. **Required** |
3358
- | `.pf-v5-c-dual-list-selector__controls-item` | `<div>` | Initiates the dual list selector controls item. **Required** |
3359
- | `.pf-m-available` | `.pf-v5-c-dual-list-selector__pane` | Defines a pane as the available list. |
3360
- | `.pf-m-chosen` | `.pf-v5-c-dual-list-selector__pane` | Defines a pane as the chosen list. |
3361
- | `.pf-m-drag-over` | `.pf-v5-c-dual-list-selector__list` | Modifies the dual list selector list to indicate that a draggable item is being dragged over the list. |
3362
- | `.pf-m-ghost-row` | `.pf-v5-c-dual-list-selector__list-item-row` | Modifies the list item main to be a ghost row. |
3363
- | `.pf-m-selected` | `.pf-v5-c-dual-list-selector__list-item-row` | Modifies the menu item for the selected state. |
3364
- | `.pf-m-check` | `.pf-v5-c-dual-list-selector__list-item-row` | Indicates that an item is selectable with a checkbox. |
3365
- | `.pf-m-expandable` | `.pf-v5-c-dual-list-selector__list-item` | Indicates that an item is expandable. |
3366
- | `.pf-m-expanded` | `.pf-v5-c-dual-list-selector__list-item` | Indicates that an item is expanded. |
3367
- | `.pf-m-disabled` | `.pf-v5-c-dual-list-selector__list-item` | Indicates that an item is disabled. **Note:** If an item is expandable, only the top level item needs the disabled class. |
3334
+ | `.pf-v6-c-dual-list-selector` | `<div>` | Initiates the dual list selector component. **Required** |
3335
+ | `.pf-v6-c-dual-list-selector__pane` | `<div>` | Initiates a dual list selector pane. **Required** |
3336
+ | `.pf-v6-c-dual-list-selector__header` | `<div>` | Initiates a dual list selector pane header. **Required** |
3337
+ | `.pf-v6-c-dual-list-selector__title` | `<div>` | Initiates a dual list selector pane title. **Required** |
3338
+ | `.pf-v6-c-dual-list-selector__title-text` | `<div>` | Initiates a dual list selector pane title text. **Required** |
3339
+ | `.pf-v6-c-dual-list-selector__tools` | `<div>` | Initiates a dual list selector tools. **Required** |
3340
+ | `.pf-v6-c-dual-list-selector__filter` | `<div>` | Initiates a dual list selector pane filter. **Required** |
3341
+ | `.pf-v6-c-dual-list-selector__actions` | `<div>` | Initiates a dual list selector pane actions. |
3342
+ | `.pf-v6-c-dual-list-selector__actions-item` | `<div>` | Initiates a dual list selector pane actions item. |
3343
+ | `.pf-v6-c-dual-list-selector__status` | `<div>` | Initiates a dual list selector pane selected status. **Required** |
3344
+ | `.pf-v6-c-dual-list-selector__status-text` | `<span>` | Initiates a dual list selector pane selected status text. **Required** |
3345
+ | `.pf-v6-c-dual-list-selector__menu` | `<div>` | Initiates a dual list selector pane menu container. **Required** |
3346
+ | `.pf-v6-c-dual-list-selector__list` | `<ul>` | Initiates a dual list selector pane menu list. **Required** |
3347
+ | `.pf-v6-c-dual-list-selector__list-item` | `<li>` | Initiates a dual list selector pane menu list item. **Required** |
3348
+ | `.pf-v6-c-dual-list-selector__list-item-row` | `<div>` | Initiates a dual list selector pane menu list item row. **Required** |
3349
+ | `.pf-v6-c-dual-list-selector__draggable` | `<div>` | Initiates a dual list selector pane draggable element. |
3350
+ | `.pf-v6-c-dual-list-selector__item` | `<span>`, `<div>` | Initiates a dual list selector pane menu item. **Required** |
3351
+ | `.pf-v6-c-dual-list-selector__item-main` | `<span>` | Initiates a dual list selector pane menu item main container. **Required** |
3352
+ | `.pf-v6-c-dual-list-selector__item-check` | `<span>` | Initiates the dual list selector item check. |
3353
+ | `.pf-v6-c-dual-list-selector__item-count` | `<span>` | Initiates the dual list selector item count. |
3354
+ | `.pf-v6-c-dual-list-selector__item-toggle-icon` | `<span>` | Initiates the dual list selector item toggle icon. |
3355
+ | `.pf-v6-c-dual-list-selector__item-toggle` | `<button>` | Initiates the dual list selector item toggle. |
3356
+ | `.pf-v6-c-dual-list-selector__item-text` | `<span>` | Initiates a dual list selector pane menu item text. **Required** |
3357
+ | `.pf-v6-c-dual-list-selector__controls` | `<div>` | Initiates the dual list selector controls. **Required** |
3358
+ | `.pf-v6-c-dual-list-selector__controls-item` | `<div>` | Initiates the dual list selector controls item. **Required** |
3359
+ | `.pf-m-available` | `.pf-v6-c-dual-list-selector__pane` | Defines a pane as the available list. |
3360
+ | `.pf-m-chosen` | `.pf-v6-c-dual-list-selector__pane` | Defines a pane as the chosen list. |
3361
+ | `.pf-m-drag-over` | `.pf-v6-c-dual-list-selector__list` | Modifies the dual list selector list to indicate that a draggable item is being dragged over the list. |
3362
+ | `.pf-m-ghost-row` | `.pf-v6-c-dual-list-selector__list-item-row` | Modifies the list item main to be a ghost row. |
3363
+ | `.pf-m-selected` | `.pf-v6-c-dual-list-selector__list-item-row` | Modifies the menu item for the selected state. |
3364
+ | `.pf-m-check` | `.pf-v6-c-dual-list-selector__list-item-row` | Indicates that an item is selectable with a checkbox. |
3365
+ | `.pf-m-expandable` | `.pf-v6-c-dual-list-selector__list-item` | Indicates that an item is expandable. |
3366
+ | `.pf-m-expanded` | `.pf-v6-c-dual-list-selector__list-item` | Indicates that an item is expanded. |
3367
+ | `.pf-m-disabled` | `.pf-v6-c-dual-list-selector__list-item` | Indicates that an item is disabled. **Note:** If an item is expandable, only the top level item needs the disabled class. |
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  id: Empty state
3
3
  section: components
4
- cssPrefix: pf-v5-c-empty-state
4
+ cssPrefix: pf-v6-c-empty-state
5
5
  ---## Examples
6
6
 
7
7
  ### Basic
@@ -235,28 +235,28 @@ cssPrefix: pf-v5-c-empty-state
235
235
 
236
236
  | Attribute | Applied to | Outcome |
237
237
  | -- | -- | -- |
238
- | `aria-hidden="true"` | `.pf-v5-c-empty-state__icon` | Hides icon for assistive technologies. **Required** |
238
+ | `aria-hidden="true"` | `.pf-v6-c-empty-state__icon` | Hides icon for assistive technologies. **Required** |
239
239
 
240
240
  ### Usage
241
241
 
242
242
  | Class | Applied to | Outcome |
243
243
  | -- | -- | -- |
244
- | `.pf-v5-c-empty-state` | `<div>` | Initiates an empty state component. The empty state centers its content (`.pf-v5-c-empty-state__content`) vertically and horizontally. **Required** |
245
- | `.pf-v5-c-empty-state__content` | `<div>` | Creates the content container. **Required** |
246
- | `.pf-v5-c-empty-state__header` | `<div>` | Creates the header container. **Required** |
247
- | `.pf-v5-c-empty-state__title` | `<div>` | Creates the empty state title container. **Required** |
248
- | `.pf-v5-c-empty-state__title-text` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<div>` | Creates the empty state title text container. |
249
- | `.pf-v5-c-empty-state__icon` | `<div>` | Creates the empty state icon container. |
250
- | `.pf-v5-c-empty-state__body` | `<div>` | Creates the empty state body content. There can be more than one `.pf-v5-c-empty-state__body` elements. |
251
- | `.pf-v5-c-empty-state__footer` | `<div>` | Creates the footer container. **Required** |
252
- | `.pf-v5-c-empty-state__actions` | `<div>` | Container for actions. **Required** |
253
- | `.pf-m-xs` | `.pf-v5-c-empty-state` | Modifies the empty state for an extra small variation and max-width. |
254
- | `.pf-m-sm` | `.pf-v5-c-empty-state` | Modifies the empty state for a small max-width. |
255
- | `.pf-m-lg` | `.pf-v5-c-empty-state` | Modifies the empty state for a large max-width. |
256
- | `.pf-m-xl` | `.pf-v5-c-empty-state` | Modifies the empty state for an extra large variation and max-width. |
257
- | `.pf-m-full-height` | `.pf-v5-c-empty-state` | Modifies the empty state to be `height: 100%`. If you need the empty state content to be centered vertically, you can use this modifier to make the empty state fill the height of its container, and center `.pf-v5-c-empty-state__content`. **Note:** this modifier requires the parent of `.pf-v5-c-empty-state` have an implicit or explicit `height` defined. |
258
- | `.pf-m-danger` | `.pf-v5-c-empty-state` | Modifies the empty state for danger status. |
259
- | `.pf-m-warning` | `.pf-v5-c-empty-state` | Modifies the empty state for warning status. |
260
- | `.pf-m-success` | `.pf-v5-c-empty-state` | Modifies the empty state for success status. |
261
- | `.pf-m-info` | `.pf-v5-c-empty-state` | Modifies the empty state for info status. |
262
- | `.pf-m-custom` | `.pf-v5-c-empty-state` | Modifies the empty state for custom status. |
244
+ | `.pf-v6-c-empty-state` | `<div>` | Initiates an empty state component. The empty state centers its content (`.pf-v6-c-empty-state__content`) vertically and horizontally. **Required** |
245
+ | `.pf-v6-c-empty-state__content` | `<div>` | Creates the content container. **Required** |
246
+ | `.pf-v6-c-empty-state__header` | `<div>` | Creates the header container. **Required** |
247
+ | `.pf-v6-c-empty-state__title` | `<div>` | Creates the empty state title container. **Required** |
248
+ | `.pf-v6-c-empty-state__title-text` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<div>` | Creates the empty state title text container. |
249
+ | `.pf-v6-c-empty-state__icon` | `<div>` | Creates the empty state icon container. |
250
+ | `.pf-v6-c-empty-state__body` | `<div>` | Creates the empty state body content. There can be more than one `.pf-v6-c-empty-state__body` elements. |
251
+ | `.pf-v6-c-empty-state__footer` | `<div>` | Creates the footer container. **Required** |
252
+ | `.pf-v6-c-empty-state__actions` | `<div>` | Container for actions. **Required** |
253
+ | `.pf-m-xs` | `.pf-v6-c-empty-state` | Modifies the empty state for an extra small variation and max-width. |
254
+ | `.pf-m-sm` | `.pf-v6-c-empty-state` | Modifies the empty state for a small max-width. |
255
+ | `.pf-m-lg` | `.pf-v6-c-empty-state` | Modifies the empty state for a large max-width. |
256
+ | `.pf-m-xl` | `.pf-v6-c-empty-state` | Modifies the empty state for an extra large variation and max-width. |
257
+ | `.pf-m-full-height` | `.pf-v6-c-empty-state` | Modifies the empty state to be `height: 100%`. If you need the empty state content to be centered vertically, you can use this modifier to make the empty state fill the height of its container, and center `.pf-v6-c-empty-state__content`. **Note:** this modifier requires the parent of `.pf-v6-c-empty-state` have an implicit or explicit `height` defined. |
258
+ | `.pf-m-danger` | `.pf-v6-c-empty-state` | Modifies the empty state for danger status. |
259
+ | `.pf-m-warning` | `.pf-v6-c-empty-state` | Modifies the empty state for warning status. |
260
+ | `.pf-m-success` | `.pf-v6-c-empty-state` | Modifies the empty state for success status. |
261
+ | `.pf-m-info` | `.pf-v6-c-empty-state` | Modifies the empty state for info status. |
262
+ | `.pf-m-custom` | `.pf-v6-c-empty-state` | Modifies the empty state for custom status. |