@patternfly/patternfly 6.3.0-prerelease.6 → 6.3.0-prerelease.60

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 (168) hide show
  1. package/README.md +22 -14
  2. package/assets/images/icon-help.hbs +3 -0
  3. package/assets/images/icon-outlined-star.hbs +3 -0
  4. package/assets/images/icon-star.hbs +3 -0
  5. package/base/normalize.scss +4 -0
  6. package/base/patternfly-common.css +46 -11
  7. package/base/patternfly-common.scss +58 -13
  8. package/base/patternfly-variables.css +1172 -1
  9. package/base/patternfly-variables.scss +10 -0
  10. package/base/tokens/tokens-charts-dark.scss +1 -1
  11. package/base/tokens/tokens-charts.scss +1 -1
  12. package/base/tokens/tokens-dark.scss +13 -1
  13. package/base/tokens/tokens-default.scss +60 -2
  14. package/base/tokens/tokens-highcontrast-dark.scss +396 -0
  15. package/base/tokens/tokens-highcontrast.scss +703 -0
  16. package/base/tokens/tokens-local.scss +1 -0
  17. package/base/tokens/tokens-palette.scss +9 -1
  18. package/components/Accordion/accordion.css +102 -6
  19. package/components/Accordion/accordion.scss +112 -10
  20. package/components/Alert/alert-group.css +67 -33
  21. package/components/Alert/alert-group.scss +95 -48
  22. package/components/Badge/badge.css +2 -0
  23. package/components/Badge/badge.scss +2 -0
  24. package/components/Banner/banner.css +4 -0
  25. package/components/Banner/banner.scss +4 -0
  26. package/components/Button/button.css +187 -9
  27. package/components/Button/button.scss +195 -13
  28. package/components/CalendarMonth/calendar-month.css +16 -0
  29. package/components/CalendarMonth/calendar-month.scss +16 -0
  30. package/components/Card/card.css +5 -4
  31. package/components/Card/card.scss +5 -4
  32. package/components/CodeBlock/code-block.css +3 -0
  33. package/components/CodeBlock/code-block.scss +3 -0
  34. package/components/CodeEditor/code-editor.css +8 -3
  35. package/components/CodeEditor/code-editor.scss +11 -6
  36. package/components/DataList/data-list.css +2 -2
  37. package/components/DataList/data-list.scss +2 -2
  38. package/components/DatePicker/date-picker.css +3 -0
  39. package/components/DatePicker/date-picker.scss +4 -0
  40. package/components/Drawer/drawer.css +44 -41
  41. package/components/Drawer/drawer.scss +42 -36
  42. package/components/DualListSelector/dual-list-selector.css +55 -1
  43. package/components/DualListSelector/dual-list-selector.scss +63 -1
  44. package/components/ExpandableSection/expandable-section.css +63 -1
  45. package/components/ExpandableSection/expandable-section.scss +76 -2
  46. package/components/FileUpload/file-upload.css +3 -3
  47. package/components/FileUpload/file-upload.scss +3 -3
  48. package/components/Form/form.css +40 -1
  49. package/components/Form/form.scss +47 -1
  50. package/components/FormControl/form-control.css +16 -0
  51. package/components/FormControl/form-control.scss +9 -0
  52. package/components/InputGroup/input-group.css +80 -0
  53. package/components/InputGroup/input-group.scss +95 -0
  54. package/components/Label/label.css +20 -11
  55. package/components/Label/label.scss +21 -11
  56. package/components/Login/login.css +3 -0
  57. package/components/Login/login.scss +3 -0
  58. package/components/Menu/menu.css +35 -4
  59. package/components/Menu/menu.scss +32 -6
  60. package/components/MenuToggle/menu-toggle.css +51 -10
  61. package/components/MenuToggle/menu-toggle.scss +61 -9
  62. package/components/ModalBox/modal-box.css +3 -0
  63. package/components/ModalBox/modal-box.scss +3 -0
  64. package/components/Nav/nav.css +39 -8
  65. package/components/Nav/nav.scss +42 -9
  66. package/components/Page/page.css +124 -26
  67. package/components/Page/page.scss +86 -16
  68. package/components/Pagination/pagination.css +14 -1
  69. package/components/Pagination/pagination.scss +14 -1
  70. package/components/Panel/panel.css +7 -1
  71. package/components/Panel/panel.scss +7 -1
  72. package/components/Popover/popover.css +4 -0
  73. package/components/Popover/popover.scss +4 -0
  74. package/components/Progress/progress.css +26 -0
  75. package/components/Progress/progress.scss +22 -1
  76. package/components/ProgressStepper/progress-stepper.scss +1 -0
  77. package/components/SimpleList/simple-list.css +15 -0
  78. package/components/SimpleList/simple-list.scss +17 -1
  79. package/components/Skeleton/skeleton.css +22 -2
  80. package/components/Skeleton/skeleton.scss +25 -3
  81. package/components/Spinner/spinner.css +5 -0
  82. package/components/Spinner/spinner.scss +6 -0
  83. package/components/Table/table-grid.css +51 -5
  84. package/components/Table/table-grid.scss +22 -1
  85. package/components/Table/table.css +124 -2
  86. package/components/Table/table.scss +171 -3
  87. package/components/Tabs/tabs.css +32 -15
  88. package/components/Tabs/tabs.scss +34 -14
  89. package/components/TextInputGroup/text-input-group.css +23 -0
  90. package/components/TextInputGroup/text-input-group.scss +16 -1
  91. package/components/Timestamp/timestamp.css +4 -0
  92. package/components/Timestamp/timestamp.scss +7 -0
  93. package/components/TreeView/tree-view.css +54 -0
  94. package/components/TreeView/tree-view.scss +59 -2
  95. package/components/Truncate/truncate.css +1 -0
  96. package/components/Truncate/truncate.scss +3 -0
  97. package/components/Wizard/wizard.css +33 -6
  98. package/components/Wizard/wizard.scss +38 -8
  99. package/components/_index.css +1390 -195
  100. package/docs/components/Alert/examples/Alert.md +2 -2
  101. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  102. package/docs/components/Button/examples/Button.md +159 -6
  103. package/docs/components/Card/examples/Card.md +8 -8
  104. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +24 -32
  105. package/docs/components/CodeBlock/examples/CodeBlock.md +10 -10
  106. package/docs/components/CodeEditor/examples/CodeEditor.md +29 -5
  107. package/docs/components/DataList/examples/DataList.md +83 -207
  108. package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
  109. package/docs/components/DualListSelector/examples/DualListSelector.md +642 -319
  110. package/docs/components/EmptyState/examples/EmptyState.md +6 -6
  111. package/docs/components/ExpandableSection/examples/ExpandableSection.md +26 -15
  112. package/docs/components/Form/examples/Form.md +1178 -113
  113. package/docs/components/Hint/examples/Hint.md +3 -3
  114. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -6
  115. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  116. package/docs/components/Label/examples/Label.md +2 -2
  117. package/docs/components/Login/examples/Login.md +22 -22
  118. package/docs/components/Masthead/examples/masthead.md +90 -12
  119. package/docs/components/Menu/examples/Menu.md +122 -6
  120. package/docs/components/MenuToggle/examples/MenuToggle.md +93 -55
  121. package/docs/components/ModalBox/examples/ModalBox.md +13 -1
  122. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  123. package/docs/components/Page/examples/Page.md +147 -14
  124. package/docs/components/Pagination/examples/Pagination.md +123 -12
  125. package/docs/components/Popover/examples/Popover.md +0 -4
  126. package/docs/components/Progress/examples/Progress.md +222 -210
  127. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  128. package/docs/components/Skeleton/examples/Skeleton.md +21 -7
  129. package/docs/components/Slider/examples/Slider.md +2 -2
  130. package/docs/components/Spinner/examples/Spinner.md +10 -0
  131. package/docs/components/Table/examples/Table.md +7699 -4896
  132. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  133. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -49
  134. package/docs/components/Title/examples/Title.md +8 -8
  135. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  136. package/docs/components/Wizard/examples/Wizard.md +583 -0
  137. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  138. package/docs/demos/Alert/examples/Alert.md +66 -9
  139. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  140. package/docs/demos/Banner/examples/Banner.md +47 -6
  141. package/docs/demos/Card/examples/Card.md +13 -67
  142. package/docs/demos/CardView/examples/CardView.md +24 -5
  143. package/docs/demos/Dashboard/examples/Dashboard.md +34 -27
  144. package/docs/demos/DataList/examples/DataList.md +628 -192
  145. package/docs/demos/DescriptionList/examples/DescriptionList.md +79 -50
  146. package/docs/demos/Drawer/examples/Drawer.md +110 -53
  147. package/docs/demos/Form/examples/BasicForms.md +146 -26
  148. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  149. package/docs/demos/Masthead/examples/Masthead.md +170 -18
  150. package/docs/demos/Modal/examples/Modal.md +171 -21
  151. package/docs/demos/Nav/examples/Nav.md +111 -16
  152. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +114 -19
  153. package/docs/demos/Page/examples/Page.md +309 -43
  154. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  155. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +886 -415
  156. package/docs/demos/Skeleton/examples/Skeleton.md +25 -4
  157. package/docs/demos/Table/examples/Table.md +480 -177
  158. package/docs/demos/Tabs/examples/Tabs.md +139 -594
  159. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  160. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  161. package/package.json +12 -7
  162. package/patternfly-base-no-globals.css +1217 -12
  163. package/patternfly-base.css +1221 -12
  164. package/patternfly-no-globals.css +2837 -437
  165. package/patternfly.css +2839 -435
  166. package/patternfly.min.css +1 -1
  167. package/patternfly.min.css.map +1 -1
  168. package/sass-utilities/mixins.scss +54 -0
package/docs/components/EmptyState/examples/EmptyState.md CHANGED
@@ -14,7 +14,7 @@ cssPrefix: pf-v6-c-empty-state
14
14
  <i class="fas fa-cubes" aria-hidden="true"></i>
15
15
  </div>
16
16
  <div class="pf-v6-c-empty-state__title">
17
- <h1 class="pf-v6-c-empty-state__title-text">Empty state</h1>
17
+ <h4 class="pf-v6-c-empty-state__title-text">Empty state</h4>
18
18
  </div>
19
19
  </div>
20
20
 
@@ -64,7 +64,7 @@ cssPrefix: pf-v6-c-empty-state
64
64
  <i class="fas fa-cubes" aria-hidden="true"></i>
65
65
  </div>
66
66
  <div class="pf-v6-c-empty-state__title">
67
- <h1 class="pf-v6-c-empty-state__title-text">Empty state</h1>
67
+ <h4 class="pf-v6-c-empty-state__title-text">Empty state</h4>
68
68
  </div>
69
69
  </div>
70
70
 
@@ -109,7 +109,7 @@ cssPrefix: pf-v6-c-empty-state
109
109
  <i class="fas fa-cubes" aria-hidden="true"></i>
110
110
  </div>
111
111
  <div class="pf-v6-c-empty-state__title">
112
- <h1 class="pf-v6-c-empty-state__title-text">Empty state</h1>
112
+ <h4 class="pf-v6-c-empty-state__title-text">Empty state</h4>
113
113
  </div>
114
114
  </div>
115
115
 
@@ -160,7 +160,7 @@ cssPrefix: pf-v6-c-empty-state
160
160
  <i class="fas fa-cubes" aria-hidden="true"></i>
161
161
  </div>
162
162
  <div class="pf-v6-c-empty-state__title">
163
- <h1 class="pf-v6-c-empty-state__title-text">Empty state</h1>
163
+ <h4 class="pf-v6-c-empty-state__title-text">Empty state</h4>
164
164
  </div>
165
165
  </div>
166
166
 
@@ -210,7 +210,7 @@ cssPrefix: pf-v6-c-empty-state
210
210
  <i class="fas fa-cubes" aria-hidden="true"></i>
211
211
  </div>
212
212
  <div class="pf-v6-c-empty-state__title">
213
- <h1 class="pf-v6-c-empty-state__title-text">Empty state</h1>
213
+ <h4 class="pf-v6-c-empty-state__title-text">Empty state</h4>
214
214
  </div>
215
215
  </div>
216
216
 
@@ -259,7 +259,7 @@ cssPrefix: pf-v6-c-empty-state
259
259
  <i class="fas fa- fa-check-circle" aria-hidden="true"></i>
260
260
  </div>
261
261
  <div class="pf-v6-c-empty-state__title">
262
- <h1 class="pf-v6-c-empty-state__title-text">You're all set</h1>
262
+ <h4 class="pf-v6-c-empty-state__title-text">You're all set</h4>
263
263
  </div>
264
264
  </div>
265
265
 
package/docs/components/ExpandableSection/examples/ExpandableSection.md CHANGED
@@ -15,7 +15,7 @@ cssPrefix: pf-v6-c-expandable-section
15
15
  <i class="fas fa-angle-right" aria-hidden="true"></i>
16
16
  </span>
17
17
  </span>
18
- <span class="pf-v6-c-button__text">Show more</span>
18
+ <span class="pf-v6-c-button__text">Show more hidden example content</span>
19
19
  </button>
20
20
  </div>
21
21
  <div
@@ -37,7 +37,7 @@ cssPrefix: pf-v6-c-expandable-section
37
37
  <i class="fas fa-angle-right" aria-hidden="true"></i>
38
38
  </span>
39
39
  </span>
40
- <span class="pf-v6-c-button__text">Show less</span>
40
+ <span class="pf-v6-c-button__text">Show less expanded example content</span>
41
41
  </button>
42
42
  </div>
43
43
  <div
@@ -58,7 +58,7 @@ cssPrefix: pf-v6-c-expandable-section
58
58
  <i class="fas fa-angle-right" aria-hidden="true"></i>
59
59
  </span>
60
60
  </span>
61
- <span class="pf-v6-c-button__text">Show less</span>
61
+ <span class="pf-v6-c-button__text">Show less indented example content</span>
62
62
  </button>
63
63
  </div>
64
64
  <div
@@ -79,7 +79,9 @@ cssPrefix: pf-v6-c-expandable-section
79
79
  <i class="fas fa-angle-right" aria-hidden="true"></i>
80
80
  </span>
81
81
  </span>
82
- <span class="pf-v6-c-button__text">Show more</span>
82
+ <span
83
+ class="pf-v6-c-button__text"
84
+ >Show more disclosure variation example content</span>
83
85
  </button>
84
86
  </div>
85
87
  <div
@@ -103,7 +105,9 @@ cssPrefix: pf-v6-c-expandable-section
103
105
  <i class="fas fa-angle-right" aria-hidden="true"></i>
104
106
  </span>
105
107
  </span>
106
- <span class="pf-v6-c-button__text">Show less</span>
108
+ <span
109
+ class="pf-v6-c-button__text"
110
+ >Show less disclosure variation example content</span>
107
111
  </button>
108
112
  </div>
109
113
  <div
@@ -126,7 +130,9 @@ cssPrefix: pf-v6-c-expandable-section
126
130
  <i class="fas fa-angle-right" aria-hidden="true"></i>
127
131
  </span>
128
132
  </span>
129
- <span class="pf-v6-c-button__text">Show less</span>
133
+ <span
134
+ class="pf-v6-c-button__text"
135
+ >Show less disclosure variation indented example content</span>
130
136
  </button>
131
137
  </div>
132
138
  <div
@@ -141,7 +147,9 @@ cssPrefix: pf-v6-c-expandable-section
141
147
  ```html
142
148
  <div class="pf-v6-l-stack pf-m-gutter">
143
149
  <div class="pf-v6-l-stack__item">
144
- <div class="pf-v6-c-expandable-section pf-m-expanded">
150
+ <div
151
+ class="pf-v6-c-expandable-section pf-m-expanded pf-m-detached pf-m-expand-top"
152
+ >
145
153
  <div
146
154
  class="pf-v6-c-expandable-section__content"
147
155
  id="detached-toggle-content"
@@ -150,7 +158,9 @@ cssPrefix: pf-v6-c-expandable-section
150
158
  </div>
151
159
 
152
160
  <div class="pf-v6-l-stack__item">
153
- <div class="pf-v6-c-expandable-section pf-m-expanded">
161
+ <div
162
+ class="pf-v6-c-expandable-section pf-m-expanded pf-m-detached pf-m-expand-top"
163
+ >
154
164
  <div class="pf-v6-c-expandable-section__toggle">
155
165
  <button
156
166
  class="pf-v6-c-button pf-m-link"
@@ -159,13 +169,11 @@ cssPrefix: pf-v6-c-expandable-section
159
169
  aria-controls="detached-toggle-content"
160
170
  >
161
171
  <span class="pf-v6-c-button__icon pf-m-start">
162
- <span
163
- class="pf-v6-c-expandable-section__toggle-icon pf-m-expand-top"
164
- >
172
+ <span class="pf-v6-c-expandable-section__toggle-icon">
165
173
  <i class="fas fa-angle-right" aria-hidden="true"></i>
166
174
  </span>
167
175
  </span>
168
- <span class="pf-v6-c-button__text">Show less</span>
176
+ <span class="pf-v6-c-button__text">Show less detached example content</span>
169
177
  </button>
170
178
  </div>
171
179
  </div>
@@ -183,7 +191,7 @@ cssPrefix: pf-v6-c-expandable-section
183
191
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus, diam vitae eleifend consequat, metus sapien posuere quam, ut tincidunt nunc enim eget sapien. Mauris ac dui imperdiet dolor dignissim efficitur laoreet quis erat. Proin turpis leo, malesuada eget urna et, tristique mollis odio. Ut mattis nulla lorem, elementum hendrerit nunc molestie vitae. Proin massa sem, bibendum id urna in, viverra porta neque. Ut ut mi ac lacus rhoncus mollis id quis sem. Suspendisse non justo elementum, dictum eros nec, hendrerit sapien. Mauris aliquet, est sit amet tincidunt vehicula, purus est hendrerit arcu, vitae egestas odio lorem ut lacus. In et neque non metus viverra rhoncus quis non purus. Integer id venenatis tortor. Nulla sollicitudin convallis tellus, at porta eros volutpat in. Curabitur rhoncus rhoncus nisi, sit amet tincidunt dolor efficitur vitae. Integer purus neque, porta non odio lobortis, accumsan elementum risus. Pellentesque viverra id lacus a cursus. Etiam eu pulvinar risus. Etiam ultrices nec urna id consequat.</div>
184
192
  <div class="pf-v6-c-expandable-section__toggle">
185
193
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
186
- <span class="pf-v6-c-button__text">Show more</span>
194
+ <span class="pf-v6-c-button__text">Show more truncated content</span>
187
195
  </button>
188
196
  </div>
189
197
  </div>
@@ -203,7 +211,7 @@ cssPrefix: pf-v6-c-expandable-section
203
211
  type="button"
204
212
  aria-expanded="true"
205
213
  >
206
- <span class="pf-v6-c-button__text">Show less</span>
214
+ <span class="pf-v6-c-button__text">Show less truncated content</span>
207
215
  </button>
208
216
  </div>
209
217
  </div>
@@ -232,8 +240,11 @@ cssPrefix: pf-v6-c-expandable-section
232
240
  | `.pf-v6-c-expandable-section__toggle-icon` | `<span>` | Initiates the expandable toggle icon. **Required** |
233
241
  | `.pf-v6-c-expandable-section__content` | `<div>` | Initiates the expandable section content. **Required** |
234
242
  | `.pf-m-expanded` | `.pf-v6-c-expandable-section` | Modifies the component for the expanded state. |
243
+ | `.pf-m-detached` | `.pf-v6-c-expandable-section` | Modifies the component for a detached variant. |
244
+ | `.pf-m-expand-top` | `.pf-v6-c-expandable-section__toggle-icon` | Modifies the toggle icon to point up when expanded. We recommend the new method of applying this class directly to the `.pf-v6-c-expandable-section` wrapper element. |
245
+ | `.pf-m-expand-top` | `.pf-v6-c-expandable-section.pf-m-detached` | Modifies the expandable animation and icon rotation directions for detached expandable sections. **Required** when the content is above the toggle. |
246
+ | `.pf-m-expand-bottom` | `.pf-v6-c-expandable-section.pf-m-detached` | Modifies the expandable animation direction for detached expandable sections. **Required** when the content is below the toggle. |
235
247
  | `.pf-m-display-lg` | `.pf-v6-c-expandable-section` | Modifies the styling of the component to have large display styling. |
236
248
  | `.pf-m-indented` | `.pf-v6-c-expandable-section` | Indicates that the expandable section content is indented and is aligned with the start of the title text to provide visual hierarchy. |
237
249
  | `.pf-m-truncate` | `.pf-v6-c-expandable-section` | Indicates that the expandable section content is truncated by default, and not truncated when expanded. |
238
- | `.pf-m-expand-top` | `.pf-v6-c-expandable-section__toggle-icon` | Modifies the toggle icon to point up when expanded. |
239
250
  | `--pf-v6-c-expandable-section--m-truncate__content--LineClamp` | `.pf-v6-c-expandable-section.pf-m-truncate` | Modifies the number of lines to show before truncating. |