@patternfly/patternfly 6.0.0-alpha.185 → 6.0.0-alpha.187

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 (43) hide show
  1. package/components/Form/form.css +58 -1
  2. package/components/Form/form.scss +14 -2
  3. package/components/Toolbar/toolbar.css +232 -531
  4. package/components/Toolbar/toolbar.scss +101 -89
  5. package/components/_index.css +282 -524
  6. package/docs/components/Card/examples/Card.md +8 -8
  7. package/docs/components/DataList/examples/DataList.md +17 -17
  8. package/docs/components/DualListSelector/examples/DualListSelector.md +16 -16
  9. package/docs/components/Form/examples/Form.md +42 -1
  10. package/docs/components/Hint/examples/Hint.md +3 -3
  11. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +37 -37
  12. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  13. package/docs/components/Table/examples/Table.md +454 -454
  14. package/docs/components/Toolbar/examples/Toolbar.css +10 -4
  15. package/docs/components/Toolbar/examples/Toolbar.md +1050 -637
  16. package/docs/demos/AboutModal/examples/AboutModal.md +1 -0
  17. package/docs/demos/Alert/examples/Alert.md +3 -0
  18. package/docs/demos/BackToTop/examples/BackToTop.md +1 -0
  19. package/docs/demos/Banner/examples/Banner.md +2 -0
  20. package/docs/demos/CardView/examples/CardView.md +13 -12
  21. package/docs/demos/Dashboard/examples/Dashboard.md +2 -1
  22. package/docs/demos/DataList/examples/DataList.md +31 -27
  23. package/docs/demos/DescriptionList/examples/DescriptionList.md +4 -1
  24. package/docs/demos/Drawer/examples/Drawer.md +6 -1
  25. package/docs/demos/JumpLinks/examples/JumpLinks.md +6 -0
  26. package/docs/demos/Masthead/examples/Masthead.md +19 -9
  27. package/docs/demos/Modal/examples/Modal.md +6 -0
  28. package/docs/demos/Nav/examples/Nav.md +8 -0
  29. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +71 -61
  30. package/docs/demos/Page/examples/Page.md +11 -0
  31. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +27 -19
  32. package/docs/demos/Skeleton/examples/Skeleton.md +1 -0
  33. package/docs/demos/Table/examples/Table.md +161 -146
  34. package/docs/demos/Tabs/examples/Tabs.md +32 -26
  35. package/docs/demos/Toolbar/examples/Toolbar.css +9 -1
  36. package/docs/demos/Toolbar/examples/Toolbar.md +1592 -1295
  37. package/docs/demos/Wizard/examples/Wizard.md +9 -0
  38. package/package.json +1 -1
  39. package/patternfly-no-globals.css +282 -524
  40. package/patternfly.css +282 -524
  41. package/patternfly.min.css +1 -1
  42. package/patternfly.min.css.map +1 -1
  43. package/docs/demos/Page/examples/Penta.md +0 -903
package/components/Form/form.css CHANGED
@@ -20,8 +20,9 @@
20
20
  --pf-v6-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
21
21
  --pf-v6-c-form__label-required--Color: var(--pf-t--global--color--status--danger--default);
22
22
  --pf-v6-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
23
- --pf-v6-c-form__group-label-info--MarginInlineStart: var(--pf-t--global--spacer--sm);
23
+ --pf-v6-c-form__group-label--m-info--Gap: var(--pf-t--global--spacer--sm);
24
24
  --pf-v6-c-form__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
25
+ --pf-v6-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--sm);
25
26
  --pf-v6-c-form__group-control--m-inline--child--MarginInlineEnd: var(--pf-t--global--spacer--lg);
26
27
  --pf-v6-c-form__group-control__helper-text--MarginBlockEnd: var(--pf-t--global--spacer--xs);
27
28
  --pf-v6-c-form__group-control--Gap: var(--pf-t--global--spacer--sm);
@@ -102,6 +103,14 @@
102
103
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
103
104
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
104
105
  }
106
+ .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label.pf-m-info {
107
+ flex-direction: column;
108
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
109
+ align-items: flex-start;
110
+ }
111
+ .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label-main {
112
+ flex-grow: 0;
113
+ }
105
114
  .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-control {
106
115
  grid-column: 2;
107
116
  }
@@ -122,6 +131,14 @@
122
131
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
123
132
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
124
133
  }
134
+ .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label.pf-m-info {
135
+ flex-direction: column;
136
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
137
+ align-items: flex-start;
138
+ }
139
+ .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label-main {
140
+ flex-grow: 0;
141
+ }
125
142
  .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-control {
126
143
  grid-column: 2;
127
144
  }
@@ -142,6 +159,14 @@
142
159
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
143
160
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
144
161
  }
162
+ .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label.pf-m-info {
163
+ flex-direction: column;
164
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
165
+ align-items: flex-start;
166
+ }
167
+ .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label-main {
168
+ flex-grow: 0;
169
+ }
145
170
  .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-control {
146
171
  grid-column: 2;
147
172
  }
@@ -162,6 +187,14 @@
162
187
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
163
188
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
164
189
  }
190
+ .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label.pf-m-info {
191
+ flex-direction: column;
192
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
193
+ align-items: flex-start;
194
+ }
195
+ .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label-main {
196
+ flex-grow: 0;
197
+ }
165
198
  .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-control {
166
199
  grid-column: 2;
167
200
  }
@@ -182,6 +215,14 @@
182
215
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
183
216
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
184
217
  }
218
+ .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label.pf-m-info {
219
+ flex-direction: column;
220
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
221
+ align-items: flex-start;
222
+ }
223
+ .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label-main {
224
+ flex-grow: 0;
225
+ }
185
226
  .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-control {
186
227
  grid-column: 2;
187
228
  }
@@ -202,6 +243,14 @@
202
243
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
203
244
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
204
245
  }
246
+ .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label.pf-m-info {
247
+ flex-direction: column;
248
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
249
+ align-items: flex-start;
250
+ }
251
+ .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label-main {
252
+ flex-grow: 0;
253
+ }
205
254
  .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-control {
206
255
  grid-column: 2;
207
256
  }
@@ -222,6 +271,14 @@
222
271
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
223
272
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
224
273
  }
274
+ .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label.pf-m-info {
275
+ flex-direction: column;
276
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
277
+ align-items: flex-start;
278
+ }
279
+ .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label-main {
280
+ flex-grow: 0;
281
+ }
225
282
  .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-control {
226
283
  grid-column: 2;
227
284
  }
package/components/Form/form.scss CHANGED
@@ -85,8 +85,9 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
85
85
  --#{$form}__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
86
86
 
87
87
  // Form group label info
88
- --#{$form}__group-label-info--MarginInlineStart: var(--pf-t--global--spacer--sm);
88
+ --#{$form}__group-label--m-info--Gap: var(--pf-t--global--spacer--sm);
89
89
  --#{$form}__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
90
+ --#{$form}--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--sm);
90
91
 
91
92
  // Group control
92
93
  --#{$form}__group-control--m-inline--child--MarginInlineEnd: var(--pf-t--global--spacer--lg);
@@ -179,12 +180,23 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
179
180
  .#{$form}__group-label {
180
181
  padding-block-start: var(--#{$form}--m-horizontal__group-label--md--PaddingBlockStart);
181
182
 
182
- // stylelint-disable-next-line
183
+ // stylelint-disable max-nesting-depth
183
184
  &.pf-m-no-padding-top {
184
185
  --#{$form}--m-horizontal__group-label--md--PaddingBlockStart: var(--#{$form}--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
185
186
 
186
187
  transform: translateY(var(--#{$form}--m-horizontal__group-label--m-no-padding--md--TranslateY));
187
188
  }
189
+
190
+ &.pf-m-info {
191
+ flex-direction: column;
192
+ gap: var(--#{$form}--m-horizontal__group-label--m-info--Gap);
193
+ align-items: flex-start;
194
+ }
195
+ // stylelint-enable
196
+ }
197
+
198
+ .#{$form}__group-label-main {
199
+ flex-grow: 0;
188
200
  }
189
201
 
190
202
  .#{$form}__group-control {