@patternfly/patternfly 6.6.0-prerelease.23 → 6.6.0-prerelease.25

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 (20) hide show
  1. package/components/Form/form.scss +1 -0
  2. package/components/ModalBox/modal-box.css +2 -2
  3. package/components/ModalBox/modal-box.scss +3 -3
  4. package/components/Tabs/tabs.css +19 -5
  5. package/components/Tabs/tabs.scss +22 -5
  6. package/components/_index.css +21 -7
  7. package/docs/components/Button/examples/Button.md +2 -2
  8. package/docs/components/Form/examples/Form.md +36 -8
  9. package/docs/components/Tabs/examples/Tabs.md +18 -998
  10. package/docs/components/TextInputGroup/examples/TextInputGroup.md +46 -34
  11. package/docs/demos/Alert/examples/Alert.md +32 -14
  12. package/docs/demos/Button/examples/Button.md +57 -45
  13. package/docs/demos/Compass/examples/Compass.md +0 -404
  14. package/docs/demos/Form/examples/BasicForms.md +56 -28
  15. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +2557 -5003
  16. package/package.json +2 -2
  17. package/patternfly-no-globals.css +21 -7
  18. package/patternfly.css +21 -7
  19. package/patternfly.min.css +1 -1
  20. package/patternfly.min.css.map +1 -1
package/docs/demos/Compass/examples/Compass.md CHANGED
@@ -139,30 +139,6 @@ This demo populates the main Compass section with a card view, which is one of t
139
139
  class="pf-v6-c-tabs pf-m-nav"
140
140
  aria-label="Compass primary"
141
141
  >
142
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
143
- <button
144
- class="pf-v6-c-button pf-m-small pf-m-plain"
145
- type="button"
146
- aria-label="Scroll left"
147
- disabled
148
- >
149
- <span class="pf-v6-c-button__icon">
150
- <svg
151
- class="pf-v6-svg"
152
- fill="currentColor"
153
- viewBox="0 0 20 20"
154
- aria-hidden="true"
155
- role="img"
156
- width="1em"
157
- height="1em"
158
- >
159
- <path
160
- d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
161
- />
162
- </svg>
163
- </span>
164
- </button>
165
- </div>
166
142
  <ul
167
143
  class="pf-v6-c-tabs__list"
168
144
  role="tablist"
@@ -239,31 +215,6 @@ This demo populates the main Compass section with a card view, which is one of t
239
215
  </a>
240
216
  </li>
241
217
  </ul>
242
-
243
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
244
- <button
245
- class="pf-v6-c-button pf-m-small pf-m-plain"
246
- type="button"
247
- aria-label="Scroll right"
248
- disabled
249
- >
250
- <span class="pf-v6-c-button__icon">
251
- <svg
252
- class="pf-v6-svg"
253
- fill="currentColor"
254
- viewBox="0 0 20 20"
255
- aria-hidden="true"
256
- role="img"
257
- width="1em"
258
- height="1em"
259
- >
260
- <path
261
- d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
262
- />
263
- </svg>
264
- </span>
265
- </button>
266
- </div>
267
218
  </nav>
268
219
  </div>
269
220
  <div class="pf-v6-c-compass__nav-search">
@@ -302,30 +253,6 @@ This demo populates the main Compass section with a card view, which is one of t
302
253
  class="pf-v6-c-tabs pf-m-nav pf-m-subtab"
303
254
  aria-label="Compass secondary"
304
255
  >
305
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
306
- <button
307
- class="pf-v6-c-button pf-m-small pf-m-plain"
308
- type="button"
309
- aria-label="Scroll left"
310
- disabled
311
- >
312
- <span class="pf-v6-c-button__icon">
313
- <svg
314
- class="pf-v6-svg"
315
- fill="currentColor"
316
- viewBox="0 0 20 20"
317
- aria-hidden="true"
318
- role="img"
319
- width="1em"
320
- height="1em"
321
- >
322
- <path
323
- d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
324
- />
325
- </svg>
326
- </span>
327
- </button>
328
- </div>
329
256
  <ul
330
257
  class="pf-v6-c-tabs__list"
331
258
  role="tablist"
@@ -405,31 +332,6 @@ This demo populates the main Compass section with a card view, which is one of t
405
332
  </a>
406
333
  </li>
407
334
  </ul>
408
-
409
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
410
- <button
411
- class="pf-v6-c-button pf-m-small pf-m-plain"
412
- type="button"
413
- aria-label="Scroll right"
414
- disabled
415
- >
416
- <span class="pf-v6-c-button__icon">
417
- <svg
418
- class="pf-v6-svg"
419
- fill="currentColor"
420
- viewBox="0 0 20 20"
421
- aria-hidden="true"
422
- role="img"
423
- width="1em"
424
- height="1em"
425
- >
426
- <path
427
- d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
428
- />
429
- </svg>
430
- </span>
431
- </button>
432
- </div>
433
335
  </nav>
434
336
  </div>
435
337
  </div>
@@ -1803,30 +1705,6 @@ This demo populates the main Compass section with a dashboard, which is often us
1803
1705
  class="pf-v6-c-tabs pf-m-nav"
1804
1706
  aria-label="Compass primary"
1805
1707
  >
1806
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1807
- <button
1808
- class="pf-v6-c-button pf-m-small pf-m-plain"
1809
- type="button"
1810
- aria-label="Scroll left"
1811
- disabled
1812
- >
1813
- <span class="pf-v6-c-button__icon">
1814
- <svg
1815
- class="pf-v6-svg"
1816
- fill="currentColor"
1817
- viewBox="0 0 20 20"
1818
- aria-hidden="true"
1819
- role="img"
1820
- width="1em"
1821
- height="1em"
1822
- >
1823
- <path
1824
- d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
1825
- />
1826
- </svg>
1827
- </span>
1828
- </button>
1829
- </div>
1830
1708
  <ul
1831
1709
  class="pf-v6-c-tabs__list"
1832
1710
  role="tablist"
@@ -1903,31 +1781,6 @@ This demo populates the main Compass section with a dashboard, which is often us
1903
1781
  </a>
1904
1782
  </li>
1905
1783
  </ul>
1906
-
1907
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1908
- <button
1909
- class="pf-v6-c-button pf-m-small pf-m-plain"
1910
- type="button"
1911
- aria-label="Scroll right"
1912
- disabled
1913
- >
1914
- <span class="pf-v6-c-button__icon">
1915
- <svg
1916
- class="pf-v6-svg"
1917
- fill="currentColor"
1918
- viewBox="0 0 20 20"
1919
- aria-hidden="true"
1920
- role="img"
1921
- width="1em"
1922
- height="1em"
1923
- >
1924
- <path
1925
- d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1926
- />
1927
- </svg>
1928
- </span>
1929
- </button>
1930
- </div>
1931
1784
  </nav>
1932
1785
  </div>
1933
1786
  <div class="pf-v6-c-compass__nav-search">
@@ -1966,30 +1819,6 @@ This demo populates the main Compass section with a dashboard, which is often us
1966
1819
  class="pf-v6-c-tabs pf-m-nav pf-m-subtab"
1967
1820
  aria-label="Compass secondary"
1968
1821
  >
1969
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1970
- <button
1971
- class="pf-v6-c-button pf-m-small pf-m-plain"
1972
- type="button"
1973
- aria-label="Scroll left"
1974
- disabled
1975
- >
1976
- <span class="pf-v6-c-button__icon">
1977
- <svg
1978
- class="pf-v6-svg"
1979
- fill="currentColor"
1980
- viewBox="0 0 20 20"
1981
- aria-hidden="true"
1982
- role="img"
1983
- width="1em"
1984
- height="1em"
1985
- >
1986
- <path
1987
- d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
1988
- />
1989
- </svg>
1990
- </span>
1991
- </button>
1992
- </div>
1993
1822
  <ul
1994
1823
  class="pf-v6-c-tabs__list"
1995
1824
  role="tablist"
@@ -2069,31 +1898,6 @@ This demo populates the main Compass section with a dashboard, which is often us
2069
1898
  </a>
2070
1899
  </li>
2071
1900
  </ul>
2072
-
2073
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
2074
- <button
2075
- class="pf-v6-c-button pf-m-small pf-m-plain"
2076
- type="button"
2077
- aria-label="Scroll right"
2078
- disabled
2079
- >
2080
- <span class="pf-v6-c-button__icon">
2081
- <svg
2082
- class="pf-v6-svg"
2083
- fill="currentColor"
2084
- viewBox="0 0 20 20"
2085
- aria-hidden="true"
2086
- role="img"
2087
- width="1em"
2088
- height="1em"
2089
- >
2090
- <path
2091
- d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2092
- />
2093
- </svg>
2094
- </span>
2095
- </button>
2096
- </div>
2097
1901
  </nav>
2098
1902
  </div>
2099
1903
  </div>
@@ -3752,30 +3556,6 @@ Without a glass panel component wrapping all of the content, there is no rounded
3752
3556
  class="pf-v6-c-tabs pf-m-nav"
3753
3557
  aria-label="Compass primary"
3754
3558
  >
3755
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
3756
- <button
3757
- class="pf-v6-c-button pf-m-small pf-m-plain"
3758
- type="button"
3759
- aria-label="Scroll left"
3760
- disabled
3761
- >
3762
- <span class="pf-v6-c-button__icon">
3763
- <svg
3764
- class="pf-v6-svg"
3765
- fill="currentColor"
3766
- viewBox="0 0 20 20"
3767
- aria-hidden="true"
3768
- role="img"
3769
- width="1em"
3770
- height="1em"
3771
- >
3772
- <path
3773
- d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
3774
- />
3775
- </svg>
3776
- </span>
3777
- </button>
3778
- </div>
3779
3559
  <ul
3780
3560
  class="pf-v6-c-tabs__list"
3781
3561
  role="tablist"
@@ -3852,31 +3632,6 @@ Without a glass panel component wrapping all of the content, there is no rounded
3852
3632
  </a>
3853
3633
  </li>
3854
3634
  </ul>
3855
-
3856
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
3857
- <button
3858
- class="pf-v6-c-button pf-m-small pf-m-plain"
3859
- type="button"
3860
- aria-label="Scroll right"
3861
- disabled
3862
- >
3863
- <span class="pf-v6-c-button__icon">
3864
- <svg
3865
- class="pf-v6-svg"
3866
- fill="currentColor"
3867
- viewBox="0 0 20 20"
3868
- aria-hidden="true"
3869
- role="img"
3870
- width="1em"
3871
- height="1em"
3872
- >
3873
- <path
3874
- d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
3875
- />
3876
- </svg>
3877
- </span>
3878
- </button>
3879
- </div>
3880
3635
  </nav>
3881
3636
  </div>
3882
3637
  <div class="pf-v6-c-compass__nav-search">
@@ -3915,30 +3670,6 @@ Without a glass panel component wrapping all of the content, there is no rounded
3915
3670
  class="pf-v6-c-tabs pf-m-nav pf-m-subtab"
3916
3671
  aria-label="Compass secondary"
3917
3672
  >
3918
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
3919
- <button
3920
- class="pf-v6-c-button pf-m-small pf-m-plain"
3921
- type="button"
3922
- aria-label="Scroll left"
3923
- disabled
3924
- >
3925
- <span class="pf-v6-c-button__icon">
3926
- <svg
3927
- class="pf-v6-svg"
3928
- fill="currentColor"
3929
- viewBox="0 0 20 20"
3930
- aria-hidden="true"
3931
- role="img"
3932
- width="1em"
3933
- height="1em"
3934
- >
3935
- <path
3936
- d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
3937
- />
3938
- </svg>
3939
- </span>
3940
- </button>
3941
- </div>
3942
3673
  <ul
3943
3674
  class="pf-v6-c-tabs__list"
3944
3675
  role="tablist"
@@ -4018,31 +3749,6 @@ Without a glass panel component wrapping all of the content, there is no rounded
4018
3749
  </a>
4019
3750
  </li>
4020
3751
  </ul>
4021
-
4022
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
4023
- <button
4024
- class="pf-v6-c-button pf-m-small pf-m-plain"
4025
- type="button"
4026
- aria-label="Scroll right"
4027
- disabled
4028
- >
4029
- <span class="pf-v6-c-button__icon">
4030
- <svg
4031
- class="pf-v6-svg"
4032
- fill="currentColor"
4033
- viewBox="0 0 20 20"
4034
- aria-hidden="true"
4035
- role="img"
4036
- width="1em"
4037
- height="1em"
4038
- >
4039
- <path
4040
- d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
4041
- />
4042
- </svg>
4043
- </span>
4044
- </button>
4045
- </div>
4046
3752
  </nav>
4047
3753
  </div>
4048
3754
  </div>
@@ -6316,33 +6022,6 @@ This demo showcases how you can position a side-panel drawer on top of the other
6316
6022
  class="pf-v6-c-tabs pf-m-nav"
6317
6023
  aria-label="Compass primary"
6318
6024
  >
6319
- <div
6320
- class="pf-v6-c-tabs__scroll-button"
6321
- aria-hidden="true"
6322
- >
6323
- <button
6324
- class="pf-v6-c-button pf-m-small pf-m-plain"
6325
- type="button"
6326
- aria-label="Scroll left"
6327
- disabled
6328
- >
6329
- <span class="pf-v6-c-button__icon">
6330
- <svg
6331
- class="pf-v6-svg"
6332
- fill="currentColor"
6333
- viewBox="0 0 20 20"
6334
- aria-hidden="true"
6335
- role="img"
6336
- width="1em"
6337
- height="1em"
6338
- >
6339
- <path
6340
- d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
6341
- />
6342
- </svg>
6343
- </span>
6344
- </button>
6345
- </div>
6346
6025
  <ul
6347
6026
  class="pf-v6-c-tabs__list"
6348
6027
  role="tablist"
@@ -6436,34 +6115,6 @@ This demo showcases how you can position a side-panel drawer on top of the other
6436
6115
  </a>
6437
6116
  </li>
6438
6117
  </ul>
6439
-
6440
- <div
6441
- class="pf-v6-c-tabs__scroll-button"
6442
- aria-hidden="true"
6443
- >
6444
- <button
6445
- class="pf-v6-c-button pf-m-small pf-m-plain"
6446
- type="button"
6447
- aria-label="Scroll right"
6448
- disabled
6449
- >
6450
- <span class="pf-v6-c-button__icon">
6451
- <svg
6452
- class="pf-v6-svg"
6453
- fill="currentColor"
6454
- viewBox="0 0 20 20"
6455
- aria-hidden="true"
6456
- role="img"
6457
- width="1em"
6458
- height="1em"
6459
- >
6460
- <path
6461
- d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
6462
- />
6463
- </svg>
6464
- </span>
6465
- </button>
6466
- </div>
6467
6118
  </nav>
6468
6119
  </div>
6469
6120
  <div class="pf-v6-c-compass__nav-search">
@@ -6502,33 +6153,6 @@ This demo showcases how you can position a side-panel drawer on top of the other
6502
6153
  class="pf-v6-c-tabs pf-m-nav pf-m-subtab"
6503
6154
  aria-label="Compass secondary"
6504
6155
  >
6505
- <div
6506
- class="pf-v6-c-tabs__scroll-button"
6507
- aria-hidden="true"
6508
- >
6509
- <button
6510
- class="pf-v6-c-button pf-m-small pf-m-plain"
6511
- type="button"
6512
- aria-label="Scroll left"
6513
- disabled
6514
- >
6515
- <span class="pf-v6-c-button__icon">
6516
- <svg
6517
- class="pf-v6-svg"
6518
- fill="currentColor"
6519
- viewBox="0 0 20 20"
6520
- aria-hidden="true"
6521
- role="img"
6522
- width="1em"
6523
- height="1em"
6524
- >
6525
- <path
6526
- d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
6527
- />
6528
- </svg>
6529
- </span>
6530
- </button>
6531
- </div>
6532
6156
  <ul
6533
6157
  class="pf-v6-c-tabs__list"
6534
6158
  role="tablist"
@@ -6625,34 +6249,6 @@ This demo showcases how you can position a side-panel drawer on top of the other
6625
6249
  </a>
6626
6250
  </li>
6627
6251
  </ul>
6628
-
6629
- <div
6630
- class="pf-v6-c-tabs__scroll-button"
6631
- aria-hidden="true"
6632
- >
6633
- <button
6634
- class="pf-v6-c-button pf-m-small pf-m-plain"
6635
- type="button"
6636
- aria-label="Scroll right"
6637
- disabled
6638
- >
6639
- <span class="pf-v6-c-button__icon">
6640
- <svg
6641
- class="pf-v6-svg"
6642
- fill="currentColor"
6643
- viewBox="0 0 20 20"
6644
- aria-hidden="true"
6645
- role="img"
6646
- width="1em"
6647
- height="1em"
6648
- >
6649
- <path
6650
- d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
6651
- />
6652
- </svg>
6653
- </span>
6654
- </button>
6655
- </div>
6656
6252
  </nav>
6657
6253
  </div>
6658
6254
  </div>
package/docs/demos/Form/examples/BasicForms.md CHANGED
@@ -223,13 +223,19 @@ subsection: forms
223
223
  </div>
224
224
  <div class="pf-v6-c-form__group pf-m-action">
225
225
  <div class="pf-v6-c-form__group-control">
226
- <div class="pf-v6-c-form__actions">
227
- <button class="pf-v6-c-button pf-m-primary" type="submit">
228
- <span class="pf-v6-c-button__text">Submit</span>
229
- </button>
230
- <button class="pf-v6-c-button pf-m-link" type="button">
231
- <span class="pf-v6-c-button__text">Cancel</span>
232
- </button>
226
+ <div class="pf-v6-c-action-list">
227
+ <div class="pf-v6-c-action-list__group">
228
+ <div class="pf-v6-c-action-list__item">
229
+ <button class="pf-v6-c-button pf-m-primary" type="submit">
230
+ <span class="pf-v6-c-button__text">Submit</span>
231
+ </button>
232
+ </div>
233
+ <div class="pf-v6-c-action-list__item">
234
+ <button class="pf-v6-c-button pf-m-link" type="button">
235
+ <span class="pf-v6-c-button__text">Cancel</span>
236
+ </button>
237
+ </div>
238
+ </div>
233
239
  </div>
234
240
  </div>
235
241
  </div>
@@ -377,13 +383,19 @@ subsection: forms
377
383
  </div>
378
384
  <div class="pf-v6-c-form__group pf-m-action">
379
385
  <div class="pf-v6-c-form__group-control">
380
- <div class="pf-v6-c-form__actions">
381
- <button class="pf-v6-c-button pf-m-primary" type="submit">
382
- <span class="pf-v6-c-button__text">Submit</span>
383
- </button>
384
- <button class="pf-v6-c-button pf-m-link" type="button">
385
- <span class="pf-v6-c-button__text">Cancel</span>
386
- </button>
386
+ <div class="pf-v6-c-action-list">
387
+ <div class="pf-v6-c-action-list__group">
388
+ <div class="pf-v6-c-action-list__item">
389
+ <button class="pf-v6-c-button pf-m-primary" type="submit">
390
+ <span class="pf-v6-c-button__text">Submit</span>
391
+ </button>
392
+ </div>
393
+ <div class="pf-v6-c-action-list__item">
394
+ <button class="pf-v6-c-button pf-m-link" type="button">
395
+ <span class="pf-v6-c-button__text">Cancel</span>
396
+ </button>
397
+ </div>
398
+ </div>
387
399
  </div>
388
400
  </div>
389
401
  </div>
@@ -561,13 +573,19 @@ subsection: forms
561
573
  </div>
562
574
  <div class="pf-v6-c-form__group pf-m-action">
563
575
  <div class="pf-v6-c-form__group-control">
564
- <div class="pf-v6-c-form__actions">
565
- <button class="pf-v6-c-button pf-m-primary" type="submit">
566
- <span class="pf-v6-c-button__text">Submit</span>
567
- </button>
568
- <button class="pf-v6-c-button pf-m-link" type="button">
569
- <span class="pf-v6-c-button__text">Cancel</span>
570
- </button>
576
+ <div class="pf-v6-c-action-list">
577
+ <div class="pf-v6-c-action-list__group">
578
+ <div class="pf-v6-c-action-list__item">
579
+ <button class="pf-v6-c-button pf-m-primary" type="submit">
580
+ <span class="pf-v6-c-button__text">Submit</span>
581
+ </button>
582
+ </div>
583
+ <div class="pf-v6-c-action-list__item">
584
+ <button class="pf-v6-c-button pf-m-link" type="button">
585
+ <span class="pf-v6-c-button__text">Cancel</span>
586
+ </button>
587
+ </div>
588
+ </div>
571
589
  </div>
572
590
  </div>
573
591
  </div>
@@ -2019,13 +2037,23 @@ subsection: forms
2019
2037
  </div>
2020
2038
  </div>
2021
2039
 
2022
- <div class="pf-v6-c-form__actions">
2023
- <button class="pf-v6-c-button pf-m-primary" type="submit">
2024
- <span class="pf-v6-c-button__text">Save</span>
2025
- </button>
2026
- <button class="pf-v6-c-button pf-m-secondary" type="reset">
2027
- <span class="pf-v6-c-button__text">Cancel</span>
2028
- </button>
2040
+ <div class="pf-v6-c-form__group pf-m-action">
2041
+ <div class="pf-v6-c-form__group-control">
2042
+ <div class="pf-v6-c-action-list">
2043
+ <div class="pf-v6-c-action-list__group">
2044
+ <div class="pf-v6-c-action-list__item">
2045
+ <button class="pf-v6-c-button pf-m-primary" type="submit">
2046
+ <span class="pf-v6-c-button__text">Save</span>
2047
+ </button>
2048
+ </div>
2049
+ <div class="pf-v6-c-action-list__item">
2050
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
2051
+ <span class="pf-v6-c-button__text">Cancel</span>
2052
+ </button>
2053
+ </div>
2054
+ </div>
2055
+ </div>
2056
+ </div>
2029
2057
  </div>
2030
2058
  </form>
2031
2059