@patternfly/patternfly 6.0.0-alpha.97 → 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 (153) 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 +20 -6
  8. package/components/MenuToggle/menu-toggle.scss +32 -6
  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 +35 -35
  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 +106 -22
  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 +57 -57
  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/Banner/examples/Banner.md +1 -1
  120. package/docs/demos/Card/examples/Card.md +12 -19
  121. package/docs/demos/DataList/examples/DataList.md +179 -280
  122. package/docs/demos/DescriptionList/examples/DescriptionList.md +6 -0
  123. package/docs/demos/Masthead/examples/Masthead.md +4 -8
  124. package/docs/demos/Nav/examples/Nav.md +45 -149
  125. package/docs/demos/Page/examples/Page.md +3 -37
  126. package/docs/demos/Page/examples/Penta.md +119 -40
  127. package/docs/demos/Table/examples/Table.md +1531 -4970
  128. package/docs/demos/Tabs/examples/Tabs.md +118 -174
  129. package/docs/demos/Toolbar/examples/Toolbar.md +220 -600
  130. package/docs/layouts/Bullseye/examples/Bullseye.md +3 -3
  131. package/docs/layouts/Flex/examples/Flex.md +76 -76
  132. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  133. package/docs/layouts/Grid/examples/Grid.md +8 -8
  134. package/docs/layouts/Level/examples/Level.md +4 -4
  135. package/docs/layouts/Split/examples/Split.md +6 -6
  136. package/docs/layouts/Stack/examples/Stack.md +5 -5
  137. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  138. package/docs/utilities/Alignment/examples/Alignment.md +4 -4
  139. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +10 -10
  140. package/docs/utilities/BoxShadow/examples/box-shadow.md +20 -20
  141. package/docs/utilities/Display/examples/Display.md +9 -9
  142. package/docs/utilities/Flex/examples/Flex.md +32 -32
  143. package/docs/utilities/Float/examples/Float.md +2 -2
  144. package/docs/utilities/Sizing/examples/Sizing.md +41 -41
  145. package/docs/utilities/Spacing/examples/Spacing.md +11 -11
  146. package/docs/utilities/Text/examples/Text.md +28 -28
  147. package/package.json +2 -1
  148. package/patternfly-no-globals.css +363 -465
  149. package/patternfly-theme-dark-unversioned.css +363 -465
  150. package/patternfly.css +363 -465
  151. package/patternfly.min.css +1 -1
  152. package/patternfly.min.css.map +1 -1
  153. package/components/Table/themes/dark/table.scss +0 -16
@@ -26,15 +26,15 @@ section: utility-classes
26
26
 
27
27
  | Class | Applied to | Outcome |
28
28
  | -- | -- | -- |
29
- | `.pf-v5-u-w-initial{-on-[breakpoint]}` | `*` | Sets width: initial (auto) |
30
- | `.pf-v5-u-w-inherit{-on-[breakpoint]}` | `*` | Sets width: inherit |
31
- | `.pf-v5-u-w-0{-on-[breakpoint]}` | `*` | Sets width: 0% |
32
- | `.pf-v5-u-w-25{-on-[breakpoint]}` | `*` | Sets width: 25% |
33
- | `.pf-v5-u-w-33{-on-[breakpoint]}` | `*` | Sets width: calc(100% / 3) |
34
- | `.pf-v5-u-w-50{-on-[breakpoint]}` | `*` | Sets width: 50% |
35
- | `.pf-v5-u-w-66{-on-[breakpoint]}` | `*` | Sets width: calc(100% / 3 \* 2) |
36
- | `.pf-v5-u-w-75{-on-[breakpoint]}` | `*` | Sets width: 75% |
37
- | `.pf-v5-u-w-100{-on-[breakpoint]}` | `*` | Sets width: 100% |
29
+ | `.pf-v6-u-w-initial{-on-[breakpoint]}` | `*` | Sets width: initial (auto) |
30
+ | `.pf-v6-u-w-inherit{-on-[breakpoint]}` | `*` | Sets width: inherit |
31
+ | `.pf-v6-u-w-0{-on-[breakpoint]}` | `*` | Sets width: 0% |
32
+ | `.pf-v6-u-w-25{-on-[breakpoint]}` | `*` | Sets width: 25% |
33
+ | `.pf-v6-u-w-33{-on-[breakpoint]}` | `*` | Sets width: calc(100% / 3) |
34
+ | `.pf-v6-u-w-50{-on-[breakpoint]}` | `*` | Sets width: 50% |
35
+ | `.pf-v6-u-w-66{-on-[breakpoint]}` | `*` | Sets width: calc(100% / 3 \* 2) |
36
+ | `.pf-v6-u-w-75{-on-[breakpoint]}` | `*` | Sets width: 75% |
37
+ | `.pf-v6-u-w-100{-on-[breakpoint]}` | `*` | Sets width: 100% |
38
38
 
39
39
  ### Width viewport units
40
40
 
@@ -54,12 +54,12 @@ section: utility-classes
54
54
 
55
55
  | Class | Applied to | Outcome |
56
56
  | -- | -- | -- |
57
- | `.pf-v5-u-w-25vw{-on-[breakpoint]}` | `*` | Sets width: 25vw |
58
- | `.pf-v5-u-w-33vw{-on-[breakpoint]}` | `*` | Sets width: calc(100vw / 3) |
59
- | `.pf-v5-u-w-50vw{-on-[breakpoint]}` | `*` | Sets width: 50vw |
60
- | `.pf-v5-u-w-66vw{-on-[breakpoint]}` | `*` | Sets width: calc(100vw / 3 \* 2) |
61
- | `.pf-v5-u-w-75vw{-on-[breakpoint]}` | `*` | Sets width: 75vw |
62
- | `.pf-v5-u-w-100vw{-on-[breakpoint]}` | `*` | Sets width: 100vw |
57
+ | `.pf-v6-u-w-25vw{-on-[breakpoint]}` | `*` | Sets width: 25vw |
58
+ | `.pf-v6-u-w-33vw{-on-[breakpoint]}` | `*` | Sets width: calc(100vw / 3) |
59
+ | `.pf-v6-u-w-50vw{-on-[breakpoint]}` | `*` | Sets width: 50vw |
60
+ | `.pf-v6-u-w-66vw{-on-[breakpoint]}` | `*` | Sets width: calc(100vw / 3 \* 2) |
61
+ | `.pf-v6-u-w-75vw{-on-[breakpoint]}` | `*` | Sets width: 75vw |
62
+ | `.pf-v6-u-w-100vw{-on-[breakpoint]}` | `*` | Sets width: 100vw |
63
63
 
64
64
  ### Height base and percentage units
65
65
 
@@ -94,15 +94,15 @@ section: utility-classes
94
94
 
95
95
  | Class | Applied to | Outcome |
96
96
  | -- | -- | -- |
97
- | `.pf-v5-u-h-initial{-on-[breakpoint]}` | `*` | Sets height: initial (auto) |
98
- | `.pf-v5-u-h-inherit{-on-[breakpoint]}` | `*` | Sets height: inherit |
99
- | `.pf-v5-u-h-0{-on-[breakpoint]}` | `*` | Sets height: 0% |
100
- | `.pf-v5-u-h-25{-on-[breakpoint]}`| `*` | Sets height: 25% |
101
- | `.pf-v5-u-h-33{-on-[breakpoint]}`| `*` | Sets height: calc(100% / 3) |
102
- | `.pf-v5-u-h-50{-on-[breakpoint]}`| `*` | Sets height: 50% |
103
- | `.pf-v5-u-h-66{-on-[breakpoint]}`| `*` | Sets height: calc(100% / 3 \* 2) |
104
- | `.pf-v5-u-h-75{-on-[breakpoint]}`| `*` | Sets height: 75% |
105
- | `.pf-v5-u-h-100{-on-[breakpoint]}` | `*` | Sets height: 100% |
97
+ | `.pf-v6-u-h-initial{-on-[breakpoint]}` | `*` | Sets height: initial (auto) |
98
+ | `.pf-v6-u-h-inherit{-on-[breakpoint]}` | `*` | Sets height: inherit |
99
+ | `.pf-v6-u-h-0{-on-[breakpoint]}` | `*` | Sets height: 0% |
100
+ | `.pf-v6-u-h-25{-on-[breakpoint]}`| `*` | Sets height: 25% |
101
+ | `.pf-v6-u-h-33{-on-[breakpoint]}`| `*` | Sets height: calc(100% / 3) |
102
+ | `.pf-v6-u-h-50{-on-[breakpoint]}`| `*` | Sets height: 50% |
103
+ | `.pf-v6-u-h-66{-on-[breakpoint]}`| `*` | Sets height: calc(100% / 3 \* 2) |
104
+ | `.pf-v6-u-h-75{-on-[breakpoint]}`| `*` | Sets height: 75% |
105
+ | `.pf-v6-u-h-100{-on-[breakpoint]}` | `*` | Sets height: 100% |
106
106
 
107
107
  ### Height viewport units
108
108
 
@@ -134,12 +134,12 @@ section: utility-classes
134
134
 
135
135
  | Class | Applied to | Outcome |
136
136
  | -- | -- | -- |
137
- | `.pf-v5-u-h-25vh{-on-[breakpoint]}` | `*` | Sets height: 25vh |
138
- | `.pf-v5-u-h-33vh{-on-[breakpoint]}` | `*` | Sets height: calc(100vh / 3) |
139
- | `.pf-v5-u-h-50vh{-on-[breakpoint]}` | `*` | Sets height: 50vh |
140
- | `.pf-v5-u-h-66vh{-on-[breakpoint]}` | `*` | Sets height: calc(100vh / 3 \* 2) |
141
- | `.pf-v5-u-h-75vh{-on-[breakpoint]}` | `*` | Sets height: 75vh |
142
- | `.pf-v5-u-h-100vh{-on-[breakpoint]}` | `*` | Sets height: 100vh |
137
+ | `.pf-v6-u-h-25vh{-on-[breakpoint]}` | `*` | Sets height: 25vh |
138
+ | `.pf-v6-u-h-33vh{-on-[breakpoint]}` | `*` | Sets height: calc(100vh / 3) |
139
+ | `.pf-v6-u-h-50vh{-on-[breakpoint]}` | `*` | Sets height: 50vh |
140
+ | `.pf-v6-u-h-66vh{-on-[breakpoint]}` | `*` | Sets height: calc(100vh / 3 \* 2) |
141
+ | `.pf-v6-u-h-75vh{-on-[breakpoint]}` | `*` | Sets height: 75vh |
142
+ | `.pf-v6-u-h-100vh{-on-[breakpoint]}` | `*` | Sets height: 100vh |
143
143
 
144
144
  ### Min width
145
145
 
@@ -185,15 +185,15 @@ section: utility-classes
185
185
 
186
186
  | Class | Applied to | Outcome |
187
187
  | -- | -- | -- |
188
- | `.pf-v5-u-min-width` | `*` | Sets min-width: `var(--pf-v5-u-min-width--MinWidth{-on-[breakpoint]})`. |
189
- | `.pf-v5-u-max-width` | `*` | Sets min-width: `var(--pf-v5-u-max-width--MaxWidth{-on-[breakpoint]})`. |
188
+ | `.pf-v6-u-min-width` | `*` | Sets min-width: `var(--pf-v6-u-min-width--MinWidth{-on-[breakpoint]})`. |
189
+ | `.pf-v6-u-max-width` | `*` | Sets min-width: `var(--pf-v6-u-max-width--MaxWidth{-on-[breakpoint]})`. |
190
190
 
191
- [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example --pf-v5-u-min-width--MinWidth-on-lg**
191
+ [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example --pf-v6-u-min-width--MinWidth-on-lg**
192
192
 
193
193
  | Custom property | Applied to | Outcome |
194
194
  | -- | -- | -- |
195
- | `--pf-v5-u-min-width--MinWidth{-on-[breakpoint]}: {width}` | `.pf-v5-u-min-width` | Modifies the min width custom property. |
196
- | `--pf-v5-u-max-width--MaxWidth{-on-[breakpoint]}: {width}` | `.pf-v5-u-max-width` | Modifies the max width custom property. |
195
+ | `--pf-v6-u-min-width--MinWidth{-on-[breakpoint]}: {width}` | `.pf-v6-u-min-width` | Modifies the min width custom property. |
196
+ | `--pf-v6-u-max-width--MaxWidth{-on-[breakpoint]}: {width}` | `.pf-v6-u-max-width` | Modifies the max width custom property. |
197
197
 
198
198
  ### Min height
199
199
 
@@ -230,7 +230,7 @@ section: utility-classes
230
230
  ```html
231
231
  <div
232
232
  class="pf-v5-u-min-height pf-v5-u-max-height"
233
- style="--pf-v5-u-min-height--MinHeight: 20ch; --pf-v5-u-max-height--MaxHeight: 30ch; --pf-v5-u-max-height--MaxHeight-on-md: 50ch; --pf-v5-u-max-height--MaxHeight-on-xl: 70ch;"
233
+ style="--pf-v5-u-min-height--MinHeight: 20ch; --pf-v5-u-max-height--MaxHeight: 30ch; --pf-v6-u-max-height--MaxHeight-on-md: 50ch; --pf-v6-u-max-height--MaxHeight-on-xl: 70ch;"
234
234
  >Min-height 20ch, max-height 30ch, max-height-on-md 50ch, max-height-on-xl 70ch example</div>
235
235
 
236
236
  ```
@@ -239,12 +239,12 @@ section: utility-classes
239
239
 
240
240
  | Class | Applied to | Outcome |
241
241
  | -- | -- | -- |
242
- | `.pf-v5-u-min-height` | `*` | Sets min-height: `var(--pf-v5-u-min-height--MinHeight{-on-[breakpoint]})`. |
243
- | `.pf-v5-u-max-height` | `*` | Sets max-height: `var(--pf-v5-u-max-height--MaxHeight{-on-[breakpoint]})`. |
242
+ | `.pf-v6-u-min-height` | `*` | Sets min-height: `var(--pf-v6-u-min-height--MinHeight{-on-[breakpoint]})`. |
243
+ | `.pf-v6-u-max-height` | `*` | Sets max-height: `var(--pf-v6-u-max-height--MaxHeight{-on-[breakpoint]})`. |
244
244
 
245
- [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example --pf-v5-u-min-height--MinHeight-on-lg**
245
+ [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example --pf-v6-u-min-height--MinHeight-on-lg**
246
246
 
247
247
  | Custom property | Applied to | Outcome |
248
248
  | -- | -- | -- |
249
- | `--pf-v5-u-min-height--MinHeight{-on-[breakpoint]}: {height}` | `.pf-v5-u-min-height` | Modifies the min height custom property. |
250
- | `--pf-v5-u-max-height--MaxHeight{-on-[breakpoint]}: {height}` | `.pf-v5-u-max-height` | Modifies the max height custom property. |
249
+ | `--pf-v6-u-min-height--MinHeight{-on-[breakpoint]}: {height}` | `.pf-v6-u-min-height` | Modifies the min height custom property. |
250
+ | `--pf-v6-u-max-height--MaxHeight{-on-[breakpoint]}: {height}` | `.pf-v6-u-max-height` | Modifies the max height custom property. |
@@ -118,7 +118,7 @@ pf: 'test'
118
118
 
119
119
  ### Overview
120
120
 
121
- [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v5-u-m-sm-on-lg**
121
+ [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-m-sm-on-lg**
122
122
 
123
123
  ### Margin properties
124
124
 
@@ -150,18 +150,18 @@ pf: 'test'
150
150
  | -- | -- |
151
151
  | `auto` | auto |
152
152
  | `0` | 0 |
153
- | `xs` | var(--pf-v5-global--spacer--xs) |
154
- | `sm` | var(--pf-v5-global--spacer--sm) |
155
- | `md` | var(--pf-v5-global--spacer--md) |
156
- | `lg` | var(--pf-v5-global--spacer--lg) |
157
- | `xl` | var(--pf-v5-global--spacer--xl) |
158
- | `2xl` | var(--pf-v5-global--spacer--2xl) |
159
- | `3xl` | var(--pf-v5-global--spacer--3xl) |
160
- | `4xl` | var(--pf-v5-global--spacer--4xl) |
153
+ | `xs` | var(--pf-v6-global--spacer--xs) |
154
+ | `sm` | var(--pf-v6-global--spacer--sm) |
155
+ | `md` | var(--pf-v6-global--spacer--md) |
156
+ | `lg` | var(--pf-v6-global--spacer--lg) |
157
+ | `xl` | var(--pf-v6-global--spacer--xl) |
158
+ | `2xl` | var(--pf-v6-global--spacer--2xl) |
159
+ | `3xl` | var(--pf-v6-global--spacer--3xl) |
160
+ | `4xl` | var(--pf-v6-global--spacer--4xl) |
161
161
 
162
162
  ### Usage
163
163
 
164
164
  | Class | Applied to | Outcome |
165
165
  | -- | -- | -- |
166
- | `.pf-v5-u-{m, mt, mr, mb, ml, mx, my}-{size}{-on-[breakpoint]}` | `*` | Sets margin top, right, bottom, left, margin-left & right, margin-top & bottom to spacer value |
167
- | `.pf-v5-u-{p, pt, pr, pb, pl, px, py}-{size}{-on-[breakpoint]}` | `*` | Sets padding top, right, bottom, left, padding-left & right, padding-top & bottom to spacer value |
166
+ | `.pf-v6-u-{m, mt, mr, mb, ml, mx, my}-{size}{-on-[breakpoint]}` | `*` | Sets margin top, right, bottom, left, margin-left & right, margin-top & bottom to spacer value |
167
+ | `.pf-v6-u-{p, pt, pr, pb, pl, px, py}-{size}{-on-[breakpoint]}` | `*` | Sets padding top, right, bottom, left, padding-left & right, padding-top & bottom to spacer value |
@@ -138,7 +138,7 @@ These colors are best used with the ["inverse" background colors](/utility-class
138
138
  <h4>
139
139
  <strong>Wrap</strong>
140
140
  </h4>
141
- <div class="pf-v5-u-text-wrap">
141
+ <div class="pf-v6-u-text-wrap">
142
142
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut.</p>
143
143
  <br />
144
144
  </div>
@@ -147,7 +147,7 @@ These colors are best used with the ["inverse" background colors](/utility-class
147
147
  </h4>
148
148
  <div>
149
149
  <p
150
- class="pf-v5-u-text-truncate"
150
+ class="pf-v6-u-text-truncate"
151
151
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut.</p>
152
152
  </div>
153
153
 
@@ -161,34 +161,34 @@ These text utilities can be used to modify text within the PatternFly framework.
161
161
 
162
162
  Care should be taken especially when applying text colors, as this can have a negative effect on the readability and accessibility of text. Refer to the information on [contrast ratios](/guidelines/colors/#contrast-ratios) for more information.
163
163
 
164
- [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v5-u-font-size-xl-on-lg**
164
+ [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-font-size-xl-on-lg**
165
165
 
166
166
  ### Usage
167
167
 
168
168
  | Class | Applied to | Outcome |
169
169
  | - | - | - |
170
- | `.pf-v5-u-font-size-{xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}`| `*` | Sets font-size to xs, sm, md, lg, xl, 2xl, 3xl, or 4xl |
171
- | `.pf-v5-u-font-family-{text, heading, monospace, text-vf, heading-vf, monospace-vf}` | `*` | Sets font-family to text, heading, or monospace, or the variable font variation of that font family |
172
- | `.pf-v5-u-font-weight-{normal, bold}{-on-[breakpoint]}` | `*` | Sets font-weight to light, normal, or bold |
173
- | `.pf-v5-u-color-{100, 200, 300, 400}{-on-[breakpoint]}` | `*` | Sets font-color to color 100, 200, 300, or 400 |
174
- | `.pf-v5-u-active-color-{100, 400}{-on-[breakpoint]}` | `*` | Sets font-color to active color 100 or 400 |
175
- | `.pf-v5-u-primary-color-100{-on-[breakpoint]}` | `*` | Sets font-color to primary color 100 |
176
- | `.pf-v5-u-color-light-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to light color 100 or 200 |
177
- | `.pf-v5-u-link-color{-on-[breakpoint]}` | `*` | Sets font-color to link color |
178
- | `.pf-v5-u-link-color-hover{-on-[breakpoint]}` | `*` | Sets font-color to hover link color |
179
- | `.pf-v5-u-link-color-light{-on-[breakpoint]}` | `*` | Sets font-color to light link color |
180
- | `.pf-v5-u-link-color-light-hover{-on-[breakpoint]}` | `*` | Sets font-color to light hover link color |
181
- | `.pf-v5-u-link-color-dark{-on-[breakpoint]}` | `*` | Sets font-color to dark link color |
182
- | `.pf-v5-u-link-color-dark-hover{-on-[breakpoint]}` | `*` | Sets font-color to dark hover link color |
183
- | `.pf-v5-u-link-color-visited{-on-[breakpoint]}` | `*` | Sets font-color to visited link color |
184
- | `.pf-v5-u-custom-color-{100, 200, 300}{-on-[breakpoint]}` | `*` | Sets font-color to custom color 100, 200, or 300 |
185
- | `.pf-v5-u-success-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to success color 100 or 200 |
186
- | `.pf-v5-u-info-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to info color 100 or 200 |
187
- | `.pf-v5-u-warning-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to warning color 100 or 200 |
188
- | `.pf-v5-u-danger-color-{100, 200, 300}{-on-[breakpoint]}` | `*` | Sets font-color to danger color 100, 200, or 300 |
189
- | `.pf-v5-u-disabled-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to disabled color 100 or 200 |
190
- | `.pf-v5-u-icon-color-{light, dark}{-on-[breakpoint]}` | `*` | Sets font-color to light or dark icon color |
191
- | `.pf-v5-u-text-break-word{-on-[breakpoint]}` | `*` | Sets word-break to break-word |
192
- | `.pf-v5-u-text-nowrap{-on-[breakpoint]}` | `*` | Sets white-space to nowrap |
193
- | `.pf-v5-u-text-wrap{-on-[breakpoint]}` | `*` | Sets white-space to normal |
194
- | `.pf-v5-u-text-truncate` | `*` | Truncates text field |
170
+ | `.pf-v6-u-font-size-{xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}`| `*` | Sets font-size to xs, sm, md, lg, xl, 2xl, 3xl, or 4xl |
171
+ | `.pf-v6-u-font-family-{text, heading, monospace, text-vf, heading-vf, monospace-vf}` | `*` | Sets font-family to text, heading, or monospace, or the variable font variation of that font family |
172
+ | `.pf-v6-u-font-weight-{normal, bold}{-on-[breakpoint]}` | `*` | Sets font-weight to light, normal, or bold |
173
+ | `.pf-v6-u-color-{100, 200, 300, 400}{-on-[breakpoint]}` | `*` | Sets font-color to color 100, 200, 300, or 400 |
174
+ | `.pf-v6-u-active-color-{100, 400}{-on-[breakpoint]}` | `*` | Sets font-color to active color 100 or 400 |
175
+ | `.pf-v6-u-primary-color-100{-on-[breakpoint]}` | `*` | Sets font-color to primary color 100 |
176
+ | `.pf-v6-u-color-light-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to light color 100 or 200 |
177
+ | `.pf-v6-u-link-color{-on-[breakpoint]}` | `*` | Sets font-color to link color |
178
+ | `.pf-v6-u-link-color-hover{-on-[breakpoint]}` | `*` | Sets font-color to hover link color |
179
+ | `.pf-v6-u-link-color-light{-on-[breakpoint]}` | `*` | Sets font-color to light link color |
180
+ | `.pf-v6-u-link-color-light-hover{-on-[breakpoint]}` | `*` | Sets font-color to light hover link color |
181
+ | `.pf-v6-u-link-color-dark{-on-[breakpoint]}` | `*` | Sets font-color to dark link color |
182
+ | `.pf-v6-u-link-color-dark-hover{-on-[breakpoint]}` | `*` | Sets font-color to dark hover link color |
183
+ | `.pf-v6-u-link-color-visited{-on-[breakpoint]}` | `*` | Sets font-color to visited link color |
184
+ | `.pf-v6-u-custom-color-{100, 200, 300}{-on-[breakpoint]}` | `*` | Sets font-color to custom color 100, 200, or 300 |
185
+ | `.pf-v6-u-success-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to success color 100 or 200 |
186
+ | `.pf-v6-u-info-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to info color 100 or 200 |
187
+ | `.pf-v6-u-warning-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to warning color 100 or 200 |
188
+ | `.pf-v6-u-danger-color-{100, 200, 300}{-on-[breakpoint]}` | `*` | Sets font-color to danger color 100, 200, or 300 |
189
+ | `.pf-v6-u-disabled-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to disabled color 100 or 200 |
190
+ | `.pf-v6-u-icon-color-{light, dark}{-on-[breakpoint]}` | `*` | Sets font-color to light or dark icon color |
191
+ | `.pf-v6-u-text-break-word{-on-[breakpoint]}` | `*` | Sets word-break to break-word |
192
+ | `.pf-v6-u-text-nowrap{-on-[breakpoint]}` | `*` | Sets white-space to nowrap |
193
+ | `.pf-v6-u-text-wrap{-on-[breakpoint]}` | `*` | Sets white-space to normal |
194
+ | `.pf-v6-u-text-truncate` | `*` | Truncates text field |
package/package.json CHANGED
@@ -1,11 +1,12 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.97",
4
+ "version": "6.0.0-alpha.99",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
8
8
  "a11y": "patternfly-a11y --config patternfly-a11y.config",
9
+ "backstop:clean": "rimraf -- backstop_data/bitmaps_test backstop_data/html_report",
9
10
  "backstop:test": "backstop test --config='backstop.js'",
10
11
  "backstop:approve": "backstop approve --config='backstop.js'",
11
12
  "build-patternfly": "gulp buildPatternfly",