@patternfly/patternfly 6.5.0-prerelease.2 → 6.5.0-prerelease.3

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 (11) hide show
  1. package/components/ActionList/action-list.css +7 -0
  2. package/components/ActionList/action-list.scss +10 -0
  3. package/components/Spinner/spinner.css +3 -0
  4. package/components/Spinner/spinner.scss +5 -0
  5. package/components/_index.css +10 -0
  6. package/docs/components/ActionList/examples/ActionList.md +85 -0
  7. package/package.json +2 -2
  8. package/patternfly-no-globals.css +10 -0
  9. package/patternfly.css +10 -0
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
package/components/ActionList/action-list.css CHANGED
@@ -2,6 +2,7 @@
2
2
  --pf-v6-c-action-list--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
3
3
  --pf-v6-c-action-list--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal--default);
4
4
  --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
5
+ --pf-v6-c-action-list--m-vertical--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--default);
5
6
  --pf-v6-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
6
7
  }
7
8
 
@@ -19,6 +20,12 @@
19
20
  --pf-v6-c-action-list__group--ColumnGap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
20
21
  column-gap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
21
22
  }
23
+ .pf-v6-c-action-list.pf-m-vertical, .pf-v6-c-action-list.pf-m-vertical .pf-v6-c-action-list__group {
24
+ flex-direction: column;
25
+ }
26
+ .pf-v6-c-action-list.pf-m-vertical {
27
+ row-gap: var(--pf-v6-c-action-list--m-vertical--RowGap);
28
+ }
22
29
 
23
30
  .pf-v6-c-action-list__group {
24
31
  row-gap: var(--pf-v6-c-action-list__group--RowGap, var(--pf-v6-c-action-list--RowGap));
package/components/ActionList/action-list.scss CHANGED
@@ -6,6 +6,7 @@
6
6
 
7
7
  // * Action list group
8
8
  --#{$action-list}__group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
9
+ --#{$action-list}--m-vertical--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--default);
9
10
 
10
11
  // * Action list icons
11
12
  --#{$action-list}--m-icons--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
@@ -29,6 +30,15 @@
29
30
 
30
31
  column-gap: var(--#{$action-list}--m-icons--ColumnGap); // update prop: val to prevent potential inheritance conflicts
31
32
  }
33
+
34
+ &.pf-m-vertical,
35
+ &.pf-m-vertical .#{$action-list}__group {
36
+ flex-direction: column;
37
+ }
38
+
39
+ &.pf-m-vertical {
40
+ row-gap: var(--#{$action-list}--m-vertical--RowGap);
41
+ }
32
42
  }
33
43
 
34
44
  // - Action list group
package/components/Spinner/spinner.css CHANGED
@@ -41,6 +41,9 @@
41
41
  .pf-v6-c-spinner.pf-m-xl {
42
42
  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
43
43
  }
44
+ .pf-v6-m-no-motion .pf-v6-c-spinner {
45
+ --pf-v6-c-spinner--AnimationDuration: 0s;
46
+ }
44
47
 
45
48
  .pf-v6-c-spinner__path {
46
49
  width: 100%;
package/components/Spinner/spinner.scss CHANGED
@@ -55,6 +55,11 @@
55
55
  &.pf-m-xl {
56
56
  --#{$spinner}--diameter: var(--#{$spinner}--m-xl--diameter);
57
57
  }
58
+
59
+ // Disable animations when no-motion modifier is applied
60
+ .#{$pf-prefix}m-no-motion & {
61
+ --#{$spinner}--AnimationDuration: 0s;
62
+ }
58
63
  }
59
64
 
60
65
  .#{$spinner}__path {
package/components/_index.css CHANGED
@@ -445,6 +445,7 @@
445
445
  --pf-v6-c-action-list--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
446
446
  --pf-v6-c-action-list--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal--default);
447
447
  --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
448
+ --pf-v6-c-action-list--m-vertical--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--default);
448
449
  --pf-v6-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
449
450
  }
450
451
 
@@ -462,6 +463,12 @@
462
463
  --pf-v6-c-action-list__group--ColumnGap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
463
464
  column-gap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
464
465
  }
466
+ .pf-v6-c-action-list.pf-m-vertical, .pf-v6-c-action-list.pf-m-vertical .pf-v6-c-action-list__group {
467
+ flex-direction: column;
468
+ }
469
+ .pf-v6-c-action-list.pf-m-vertical {
470
+ row-gap: var(--pf-v6-c-action-list--m-vertical--RowGap);
471
+ }
465
472
 
466
473
  .pf-v6-c-action-list__group {
467
474
  row-gap: var(--pf-v6-c-action-list__group--RowGap, var(--pf-v6-c-action-list--RowGap));
@@ -15751,6 +15758,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15751
15758
  .pf-v6-c-spinner.pf-m-xl {
15752
15759
  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
15753
15760
  }
15761
+ .pf-v6-m-no-motion .pf-v6-c-spinner {
15762
+ --pf-v6-c-spinner--AnimationDuration: 0s;
15763
+ }
15754
15764
 
15755
15765
  .pf-v6-c-spinner__path {
15756
15766
  width: 100%;
package/docs/components/ActionList/examples/ActionList.md CHANGED
@@ -196,6 +196,90 @@ In modals, forms, data lists
196
196
 
197
197
  ```
198
198
 
199
+ ### Vertical action list
200
+
201
+ ```html isBeta
202
+ Multiple groups
203
+ <div class="pf-v6-c-action-list pf-m-vertical">
204
+ <div class="pf-v6-c-action-list__group">
205
+ <div class="pf-v6-c-action-list__item">
206
+ <button class="pf-v6-c-button pf-m-primary" type="button">
207
+ <span class="pf-v6-c-button__text">Next</span>
208
+ </button>
209
+ </div>
210
+ <div class="pf-v6-c-action-list__item">
211
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
212
+ <span class="pf-v6-c-button__text">Back</span>
213
+ </button>
214
+ </div>
215
+ </div>
216
+ <div class="pf-v6-c-action-list__group">
217
+ <div class="pf-v6-c-action-list__item">
218
+ <button class="pf-v6-c-button pf-m-primary" type="button">
219
+ <span class="pf-v6-c-button__text">Submit</span>
220
+ </button>
221
+ </div>
222
+ <div class="pf-v6-c-action-list__item">
223
+ <button class="pf-v6-c-button pf-m-link" type="button">
224
+ <span class="pf-v6-c-button__text">Cancel</span>
225
+ </button>
226
+ </div>
227
+ </div>
228
+ </div><br/ >
229
+ Icons, in two groups
230
+ <div class="pf-v6-c-action-list pf-m-vertical">
231
+ <div class="pf-v6-c-action-list__group pf-m-icons">
232
+ <div class="pf-v6-c-action-list__item">
233
+ <button
234
+ class="pf-v6-c-button pf-m-plain"
235
+ type="button"
236
+ aria-label="Close"
237
+ >
238
+ <span class="pf-v6-c-button__icon pf-m-start">
239
+ <i class="fas fa-times" aria-hidden="true"></i>
240
+ </span>
241
+ </button>
242
+ </div>
243
+ <div class="pf-v6-c-action-list__item">
244
+ <button
245
+ class="pf-v6-c-button pf-m-plain"
246
+ type="button"
247
+ aria-label="Toggle"
248
+ >
249
+ <span class="pf-v6-c-button__icon">
250
+ <i class="fas fa-check" aria-hidden="true"></i>
251
+ </span>
252
+ </button>
253
+ </div>
254
+ </div>
255
+ <div class="pf-v6-c-action-list__group pf-m-icons">
256
+ <div class="pf-v6-c-action-list__item">
257
+ <button
258
+ class="pf-v6-c-button pf-m-plain"
259
+ type="button"
260
+ aria-label="Close"
261
+ >
262
+ <span class="pf-v6-c-button__icon">
263
+ <i class="fas fa-times" aria-hidden="true"></i>
264
+ </span>
265
+ </button>
266
+ </div>
267
+ <div class="pf-v6-c-action-list__item">
268
+ <button
269
+ class="pf-v6-c-button pf-m-plain"
270
+ type="button"
271
+ aria-label="Toggle"
272
+ >
273
+ <span class="pf-v6-c-button__icon">
274
+ <i class="fas fa-check" aria-hidden="true"></i>
275
+ </span>
276
+ </button>
277
+ </div>
278
+ </div>
279
+ </div>
280
+
281
+ ```
282
+
199
283
  ### Overview
200
284
 
201
285
  ### Usage
@@ -206,3 +290,4 @@ In modals, forms, data lists
206
290
  | `.pf-v6-c-action-list__item` | `<div>` | Initiates the action list item container. |
207
291
  | `.pf-v6-c-action-list__group` | `<div>` | Initiates the action list group container. |
208
292
  | `.pf-m-icons` | `.pf-v6-c-action-list`, `.pf-v6-c-action-list__group` | Modifies the action list and/or group to support icon buttons. If applied to `.pf-v6-c-action-list`, all nested groups will inherit this modification. |
293
+ | `.pf-m-vertical` | `.pf-v6-c-action-list` | Modifies the action list to display vertically. |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.5.0-prerelease.2",
4
+ "version": "6.5.0-prerelease.3",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -50,7 +50,7 @@
50
50
  "@octokit/rest": "^20.1.0",
51
51
  "@patternfly/documentation-framework": "6.28.8",
52
52
  "@patternfly/patternfly-a11y": "5.1.0",
53
- "@patternfly/react-code-editor": "6.3.1",
53
+ "@patternfly/react-code-editor": "6.4.0",
54
54
  "@patternfly/react-core": "6.4.0",
55
55
  "@patternfly/react-table": "6.4.0",
56
56
  "@starptech/prettyhtml": "^0.10.0",
package/patternfly-no-globals.css CHANGED
@@ -9112,6 +9112,7 @@
9112
9112
  --pf-v6-c-action-list--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
9113
9113
  --pf-v6-c-action-list--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal--default);
9114
9114
  --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
9115
+ --pf-v6-c-action-list--m-vertical--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--default);
9115
9116
  --pf-v6-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
9116
9117
  }
9117
9118
 
@@ -9129,6 +9130,12 @@
9129
9130
  --pf-v6-c-action-list__group--ColumnGap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
9130
9131
  column-gap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
9131
9132
  }
9133
+ .pf-v6-c-action-list.pf-m-vertical, .pf-v6-c-action-list.pf-m-vertical .pf-v6-c-action-list__group {
9134
+ flex-direction: column;
9135
+ }
9136
+ .pf-v6-c-action-list.pf-m-vertical {
9137
+ row-gap: var(--pf-v6-c-action-list--m-vertical--RowGap);
9138
+ }
9132
9139
 
9133
9140
  .pf-v6-c-action-list__group {
9134
9141
  row-gap: var(--pf-v6-c-action-list__group--RowGap, var(--pf-v6-c-action-list--RowGap));
@@ -24418,6 +24425,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24418
24425
  .pf-v6-c-spinner.pf-m-xl {
24419
24426
  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
24420
24427
  }
24428
+ .pf-v6-m-no-motion .pf-v6-c-spinner {
24429
+ --pf-v6-c-spinner--AnimationDuration: 0s;
24430
+ }
24421
24431
 
24422
24432
  .pf-v6-c-spinner__path {
24423
24433
  width: 100%;
package/patternfly.css CHANGED
@@ -9252,6 +9252,7 @@ button) {
9252
9252
  --pf-v6-c-action-list--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
9253
9253
  --pf-v6-c-action-list--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal--default);
9254
9254
  --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
9255
+ --pf-v6-c-action-list--m-vertical--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--default);
9255
9256
  --pf-v6-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
9256
9257
  }
9257
9258
 
@@ -9269,6 +9270,12 @@ button) {
9269
9270
  --pf-v6-c-action-list__group--ColumnGap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
9270
9271
  column-gap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
9271
9272
  }
9273
+ .pf-v6-c-action-list.pf-m-vertical, .pf-v6-c-action-list.pf-m-vertical .pf-v6-c-action-list__group {
9274
+ flex-direction: column;
9275
+ }
9276
+ .pf-v6-c-action-list.pf-m-vertical {
9277
+ row-gap: var(--pf-v6-c-action-list--m-vertical--RowGap);
9278
+ }
9272
9279
 
9273
9280
  .pf-v6-c-action-list__group {
9274
9281
  row-gap: var(--pf-v6-c-action-list__group--RowGap, var(--pf-v6-c-action-list--RowGap));
@@ -24558,6 +24565,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24558
24565
  .pf-v6-c-spinner.pf-m-xl {
24559
24566
  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
24560
24567
  }
24568
+ .pf-v6-m-no-motion .pf-v6-c-spinner {
24569
+ --pf-v6-c-spinner--AnimationDuration: 0s;
24570
+ }
24561
24571
 
24562
24572
  .pf-v6-c-spinner__path {
24563
24573
  width: 100%;