@patternfly/patternfly 6.3.0-prerelease.51 → 6.3.0-prerelease.53

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 (13) hide show
  1. package/components/Accordion/accordion.css +19 -15
  2. package/components/Accordion/accordion.scss +19 -18
  3. package/components/_index.css +19 -15
  4. package/docs/components/DataList/examples/DataList.md +60 -184
  5. package/docs/demos/Dashboard/examples/Dashboard.md +5 -20
  6. package/docs/demos/DataList/examples/DataList.md +528 -168
  7. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +726 -312
  8. package/docs/demos/Table/examples/Table.md +5 -20
  9. package/package.json +4 -3
  10. package/patternfly-no-globals.css +19 -15
  11. package/patternfly.css +19 -15
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
package/components/Accordion/accordion.css CHANGED
@@ -21,15 +21,22 @@
21
21
  --pf-v6-c-accordion__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
22
22
  --pf-v6-c-accordion__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
23
23
  --pf-v6-c-accordion__toggle-icon--Transition: transform var(--pf-v6-c-accordion__toggle-icon--TransitionDuration) var(--pf-v6-c-accordion__toggle-icon--TransitionTimingFunction);
24
+ --pf-v6-c-accordion__toggle-icon--Rotate: 0;
24
25
  --pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
25
26
  --pf-v6-c-accordion__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
26
- --pf-v6-c-accordion__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
27
+ --pf-v6-c-accordion__expandable-content--MarginBlockEnd: 0;
27
28
  --pf-v6-c-accordion__expandable-content--MarginInlineStart: var(--pf-t--global--spacer--md);
28
29
  --pf-v6-c-accordion__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
29
30
  --pf-v6-c-accordion__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
30
31
  --pf-v6-c-accordion__expandable-content--Color: var(--pf-t--global--text--color--regular);
31
32
  --pf-v6-c-accordion__expandable-content--FontSize: var(--pf-t--global--font--size--body--default);
33
+ --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base: 0;
32
34
  --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem;
35
+ --pf-v6-c-accordion__expandable-content--MaxHeight: 0;
36
+ --pf-v6-c-accordion__expandable-content--Visibility: hidden;
37
+ --pf-v6-c-accordion__item--m-expanded__expandable-content--Visibility: visible;
38
+ --pf-v6-c-accordion__item--m-expanded__expandable-content--MaxHeight: 99999px;
39
+ --pf-v6-c-accordion__item--m-expanded__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
33
40
  --pf-v6-c-accordion__item--before--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
34
41
  --pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
35
42
  --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade);
@@ -127,6 +134,7 @@
127
134
  .pf-v6-c-accordion__item.pf-m-expanded {
128
135
  --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd);
129
136
  --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
137
+ --pf-v6-c-accordion__toggle-icon--Rotate: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate);
130
138
  --pf-v6-c-accordion__item--before--TransitionDuration--slide: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--slide);
131
139
  --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--fade);
132
140
  --pf-v6-c-accordion__item--before--Opacity: var(--pf-v6-c-accordion__item--m-expanded--before--Opacity);
@@ -135,9 +143,11 @@
135
143
  --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade);
136
144
  --pf-v6-c-accordion__expandable-content--Opacity: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity);
137
145
  --pf-v6-c-accordion__expandable-content--TranslateY: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY);
138
- }
139
- .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__toggle-icon {
140
- transform: rotate(var(--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate));
146
+ --pf-v6-c-accordion__expandable-content--MarginBlockEnd: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--MarginBlockEnd);
147
+ --pf-v6-c-accordion__expandable-content--MaxHeight: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--MaxHeight);
148
+ --pf-v6-c-accordion__expandable-content--Visibility: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Visibility);
149
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: 0s;
150
+ --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
141
151
  }
142
152
 
143
153
  .pf-v6-c-accordion__toggle {
@@ -173,6 +183,7 @@
173
183
 
174
184
  .pf-v6-c-accordion__toggle-icon {
175
185
  transition: var(--pf-v6-c-accordion__toggle-icon--Transition);
186
+ transform: rotate(var(--pf-v6-c-accordion__toggle-icon--Rotate));
176
187
  }
177
188
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-accordion__toggle-icon {
178
189
  scale: -1 1;
@@ -183,12 +194,13 @@
183
194
  }
184
195
 
185
196
  .pf-v6-c-accordion__expandable-content {
186
- max-height: 0;
197
+ max-height: var(--pf-v6-c-accordion__expandable-content--MaxHeight);
198
+ margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
187
199
  margin-inline-start: var(--pf-v6-c-accordion__expandable-content--MarginInlineStart);
188
200
  margin-inline-end: var(--pf-v6-c-accordion__expandable-content--MarginInlineEnd);
189
201
  font-size: var(--pf-v6-c-accordion__expandable-content--FontSize);
190
202
  color: var(--pf-v6-c-accordion__expandable-content--Color);
191
- visibility: hidden;
203
+ visibility: var(--pf-v6-c-accordion__expandable-content--Visibility);
192
204
  background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
193
205
  border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
194
206
  opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
@@ -199,17 +211,9 @@
199
211
  translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
200
212
  }
201
213
  .pf-v6-c-accordion__expandable-content.pf-m-fixed {
214
+ max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base);
202
215
  overflow-y: auto;
203
216
  }
204
- .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
205
- max-height: 99999px;
206
- margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
207
- visibility: revert;
208
- transition-delay: 0s;
209
- }
210
- .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content.pf-m-fixed {
211
- max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
212
- }
213
217
 
214
218
  .pf-v6-c-accordion__expandable-content-body {
215
219
  padding-block-start: var(--pf-v6-c-accordion__expandable-content-body--PaddingBlockStart);
package/components/Accordion/accordion.scss CHANGED
@@ -35,17 +35,24 @@
35
35
  --#{$accordion}__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
36
36
  --#{$accordion}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
37
37
  --#{$accordion}__toggle-icon--Transition: transform var(--#{$accordion}__toggle-icon--TransitionDuration) var(--#{$accordion}__toggle-icon--TransitionTimingFunction); // TODO remove in breaking change along with shorthand property
38
+ --#{$accordion}__toggle-icon--Rotate: 0;
38
39
  --#{$accordion}__toggle--m-expanded__toggle-icon--Rotate: 90deg;
39
40
 
40
41
  // accordion expandable content
41
42
  --#{$accordion}__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
42
- --#{$accordion}__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
43
+ --#{$accordion}__expandable-content--MarginBlockEnd: 0;
43
44
  --#{$accordion}__expandable-content--MarginInlineStart: var(--pf-t--global--spacer--md);
44
45
  --#{$accordion}__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
45
46
  --#{$accordion}__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
46
47
  --#{$accordion}__expandable-content--Color: var(--pf-t--global--text--color--regular);
47
48
  --#{$accordion}__expandable-content--FontSize: var(--pf-t--global--font--size--body--default);
49
+ --#{$accordion}__expandable-content--m-fixed--MaxHeight--base: 0;
48
50
  --#{$accordion}__expandable-content--m-fixed--MaxHeight: #{pf-size-prem(150px)};
51
+ --#{$accordion}__expandable-content--MaxHeight: 0;
52
+ --#{$accordion}__expandable-content--Visibility: hidden;
53
+ --#{$accordion}__item--m-expanded__expandable-content--Visibility: visible;
54
+ --#{$accordion}__item--m-expanded__expandable-content--MaxHeight: 99999px;
55
+ --#{$accordion}__item--m-expanded__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
49
56
 
50
57
  // expand animation
51
58
  --#{$accordion}__item--before--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
@@ -155,6 +162,7 @@
155
162
  &.pf-m-expanded {
156
163
  --#{$accordion}__toggle--PaddingBlockEnd: var(--#{$accordion}__toggle--m-expanded--PaddingBlockEnd);
157
164
  --#{$accordion}__toggle-text--FontWeight: var(--#{$accordion}__toggle--m-expanded__toggle-text--FontWeight);
165
+ --#{$accordion}__toggle-icon--Rotate: var(--#{$accordion}__toggle--m-expanded__toggle-icon--Rotate);
158
166
  --#{$accordion}__item--before--TransitionDuration--slide: var(--#{$accordion}__item--before--TransitionDuration--expand--slide);
159
167
  --#{$accordion}__item--before--TransitionDuration--fade: var(--#{$accordion}__item--before--TransitionDuration--expand--fade);
160
168
  --#{$accordion}__item--before--Opacity: var(--#{$accordion}__item--m-expanded--before--Opacity);
@@ -163,10 +171,11 @@
163
171
  --#{$accordion}__expandable-content--TransitionDuration--fade: var(--#{$accordion}__expandable-content--TransitionDuration--expand--fade);
164
172
  --#{$accordion}__expandable-content--Opacity: var(--#{$accordion}__item--m-expanded__expandable-content--Opacity);
165
173
  --#{$accordion}__expandable-content--TranslateY: var(--#{$accordion}__item--m-expanded__expandable-content--TranslateY);
166
-
167
- .#{$accordion}__toggle-icon {
168
- transform: rotate(var(--#{$accordion}__toggle--m-expanded__toggle-icon--Rotate));
169
- }
174
+ --#{$accordion}__expandable-content--MarginBlockEnd: var(--#{$accordion}__item--m-expanded__expandable-content--MarginBlockEnd);
175
+ --#{$accordion}__expandable-content--MaxHeight: var(--#{$accordion}__item--m-expanded__expandable-content--MaxHeight);
176
+ --#{$accordion}__expandable-content--Visibility: var(--#{$accordion}__item--m-expanded__expandable-content--Visibility);
177
+ --#{$accordion}__expandable-content--TransitionDuration--fade: 0s;
178
+ --#{$accordion}__expandable-content--m-fixed--MaxHeight--base: var(--#{$accordion}__expandable-content--m-fixed--MaxHeight);
170
179
  }
171
180
  }
172
181
 
@@ -205,6 +214,7 @@
205
214
  @include pf-v6-mirror-inline-on-rtl;
206
215
 
207
216
  transition: var(--#{$accordion}__toggle-icon--Transition); // TODO remove shorthand property in breaking change
217
+ transform: rotate(var(--#{$accordion}__toggle-icon--Rotate));
208
218
  }
209
219
 
210
220
  .#{$accordion}__expandable-content:where([hidden]) {
@@ -212,12 +222,13 @@
212
222
  }
213
223
 
214
224
  .#{$accordion}__expandable-content {
215
- max-height: 0;
225
+ max-height: var(--#{$accordion}__expandable-content--MaxHeight);
226
+ margin-block-end: var(--#{$accordion}__expandable-content--MarginBlockEnd);
216
227
  margin-inline-start: var(--#{$accordion}__expandable-content--MarginInlineStart);
217
228
  margin-inline-end: var(--#{$accordion}__expandable-content--MarginInlineEnd);
218
229
  font-size: var(--#{$accordion}__expandable-content--FontSize);
219
230
  color: var(--#{$accordion}__expandable-content--Color);
220
- visibility: hidden;
231
+ visibility: var(--#{$accordion}__expandable-content--Visibility);
221
232
  background-color: var(--#{$accordion}__expandable-content--BackgroundColor);
222
233
  border-radius: var(--#{$accordion}__expandable-content--BorderRadius);
223
234
  opacity: var(--#{$accordion}__expandable-content--Opacity);
@@ -228,19 +239,9 @@
228
239
  translate: 0 var(--#{$accordion}__expandable-content--TranslateY);
229
240
 
230
241
  &.pf-m-fixed {
242
+ max-height: var(--#{$accordion}__expandable-content--m-fixed--MaxHeight--base);
231
243
  overflow-y: auto;
232
244
  }
233
-
234
- .#{$accordion}__item.pf-m-expanded & {
235
- max-height: 99999px;
236
- margin-block-end: var(--#{$accordion}__expandable-content--MarginBlockEnd);
237
- visibility: revert;
238
- transition-delay: 0s;
239
-
240
- &.pf-m-fixed {
241
- max-height: var(--#{$accordion}__expandable-content--m-fixed--MaxHeight);
242
- }
243
- }
244
245
  }
245
246
 
246
247
  .#{$accordion}__expandable-content-body {
package/components/_index.css CHANGED
@@ -214,15 +214,22 @@
214
214
  --pf-v6-c-accordion__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
215
215
  --pf-v6-c-accordion__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
216
216
  --pf-v6-c-accordion__toggle-icon--Transition: transform var(--pf-v6-c-accordion__toggle-icon--TransitionDuration) var(--pf-v6-c-accordion__toggle-icon--TransitionTimingFunction);
217
+ --pf-v6-c-accordion__toggle-icon--Rotate: 0;
217
218
  --pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
218
219
  --pf-v6-c-accordion__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
219
- --pf-v6-c-accordion__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
220
+ --pf-v6-c-accordion__expandable-content--MarginBlockEnd: 0;
220
221
  --pf-v6-c-accordion__expandable-content--MarginInlineStart: var(--pf-t--global--spacer--md);
221
222
  --pf-v6-c-accordion__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
222
223
  --pf-v6-c-accordion__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
223
224
  --pf-v6-c-accordion__expandable-content--Color: var(--pf-t--global--text--color--regular);
224
225
  --pf-v6-c-accordion__expandable-content--FontSize: var(--pf-t--global--font--size--body--default);
226
+ --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base: 0;
225
227
  --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem;
228
+ --pf-v6-c-accordion__expandable-content--MaxHeight: 0;
229
+ --pf-v6-c-accordion__expandable-content--Visibility: hidden;
230
+ --pf-v6-c-accordion__item--m-expanded__expandable-content--Visibility: visible;
231
+ --pf-v6-c-accordion__item--m-expanded__expandable-content--MaxHeight: 99999px;
232
+ --pf-v6-c-accordion__item--m-expanded__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
226
233
  --pf-v6-c-accordion__item--before--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
227
234
  --pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
228
235
  --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade);
@@ -320,6 +327,7 @@
320
327
  .pf-v6-c-accordion__item.pf-m-expanded {
321
328
  --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd);
322
329
  --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
330
+ --pf-v6-c-accordion__toggle-icon--Rotate: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate);
323
331
  --pf-v6-c-accordion__item--before--TransitionDuration--slide: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--slide);
324
332
  --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--fade);
325
333
  --pf-v6-c-accordion__item--before--Opacity: var(--pf-v6-c-accordion__item--m-expanded--before--Opacity);
@@ -328,9 +336,11 @@
328
336
  --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade);
329
337
  --pf-v6-c-accordion__expandable-content--Opacity: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity);
330
338
  --pf-v6-c-accordion__expandable-content--TranslateY: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY);
331
- }
332
- .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__toggle-icon {
333
- transform: rotate(var(--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate));
339
+ --pf-v6-c-accordion__expandable-content--MarginBlockEnd: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--MarginBlockEnd);
340
+ --pf-v6-c-accordion__expandable-content--MaxHeight: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--MaxHeight);
341
+ --pf-v6-c-accordion__expandable-content--Visibility: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Visibility);
342
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: 0s;
343
+ --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
334
344
  }
335
345
 
336
346
  .pf-v6-c-accordion__toggle {
@@ -366,6 +376,7 @@
366
376
 
367
377
  .pf-v6-c-accordion__toggle-icon {
368
378
  transition: var(--pf-v6-c-accordion__toggle-icon--Transition);
379
+ transform: rotate(var(--pf-v6-c-accordion__toggle-icon--Rotate));
369
380
  }
370
381
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-accordion__toggle-icon {
371
382
  scale: -1 1;
@@ -376,12 +387,13 @@
376
387
  }
377
388
 
378
389
  .pf-v6-c-accordion__expandable-content {
379
- max-height: 0;
390
+ max-height: var(--pf-v6-c-accordion__expandable-content--MaxHeight);
391
+ margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
380
392
  margin-inline-start: var(--pf-v6-c-accordion__expandable-content--MarginInlineStart);
381
393
  margin-inline-end: var(--pf-v6-c-accordion__expandable-content--MarginInlineEnd);
382
394
  font-size: var(--pf-v6-c-accordion__expandable-content--FontSize);
383
395
  color: var(--pf-v6-c-accordion__expandable-content--Color);
384
- visibility: hidden;
396
+ visibility: var(--pf-v6-c-accordion__expandable-content--Visibility);
385
397
  background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
386
398
  border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
387
399
  opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
@@ -392,17 +404,9 @@
392
404
  translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
393
405
  }
394
406
  .pf-v6-c-accordion__expandable-content.pf-m-fixed {
407
+ max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base);
395
408
  overflow-y: auto;
396
409
  }
397
- .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
398
- max-height: 99999px;
399
- margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
400
- visibility: revert;
401
- transition-delay: 0s;
402
- }
403
- .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content.pf-m-fixed {
404
- max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
405
- }
406
410
 
407
411
  .pf-v6-c-accordion__expandable-content-body {
408
412
  padding-block-start: var(--pf-v6-c-accordion__expandable-content-body--PaddingBlockStart);