@patternfly/patternfly 6.3.0-prerelease.2 → 6.3.0-prerelease.20

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 (76) hide show
  1. package/README.md +1 -1
  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/patternfly-common.css +11 -11
  6. package/base/patternfly-common.scss +12 -12
  7. package/components/Accordion/accordion.css +71 -1
  8. package/components/Accordion/accordion.scss +75 -4
  9. package/components/Alert/alert-group.css +52 -31
  10. package/components/Alert/alert-group.scss +77 -46
  11. package/components/Button/button.css +27 -0
  12. package/components/Button/button.scss +30 -1
  13. package/components/CodeEditor/code-editor.css +3 -0
  14. package/components/CodeEditor/code-editor.scss +3 -1
  15. package/components/Drawer/drawer.css +28 -14
  16. package/components/Drawer/drawer.scss +28 -9
  17. package/components/DualListSelector/dual-list-selector.css +36 -0
  18. package/components/DualListSelector/dual-list-selector.scss +43 -0
  19. package/components/ExpandableSection/expandable-section.css +47 -1
  20. package/components/ExpandableSection/expandable-section.scss +50 -1
  21. package/components/MenuToggle/menu-toggle.css +8 -4
  22. package/components/MenuToggle/menu-toggle.scss +15 -3
  23. package/components/Page/page.css +4 -3
  24. package/components/Page/page.scss +4 -2
  25. package/components/ProgressStepper/progress-stepper.scss +1 -0
  26. package/components/Skeleton/skeleton.css +22 -2
  27. package/components/Skeleton/skeleton.scss +25 -3
  28. package/components/Spinner/spinner.css +5 -0
  29. package/components/Spinner/spinner.scss +6 -0
  30. package/components/Table/table-grid.css +6 -5
  31. package/components/Table/table-grid.scss +2 -1
  32. package/components/Table/table.css +33 -0
  33. package/components/Table/table.scss +33 -0
  34. package/components/Tabs/tabs.css +25 -15
  35. package/components/Tabs/tabs.scss +26 -13
  36. package/components/Timestamp/timestamp.css +4 -0
  37. package/components/Timestamp/timestamp.scss +7 -0
  38. package/components/TreeView/tree-view.css +33 -0
  39. package/components/TreeView/tree-view.scss +36 -2
  40. package/components/Truncate/truncate.css +6 -0
  41. package/components/Truncate/truncate.scss +9 -0
  42. package/components/_index.css +410 -76
  43. package/docs/components/Button/examples/Button.md +73 -3
  44. package/docs/components/CodeEditor/examples/CodeEditor.md +26 -2
  45. package/docs/components/Divider/examples/Divider.md +1 -1
  46. package/docs/components/Drawer/examples/Drawer.md +4 -0
  47. package/docs/components/DualListSelector/examples/DualListSelector.md +518 -0
  48. package/docs/components/Form/examples/Form.md +156 -12
  49. package/docs/components/Menu/examples/Menu.md +120 -4
  50. package/docs/components/MenuToggle/examples/MenuToggle.md +3 -4
  51. package/docs/components/ModalBox/examples/ModalBox.md +13 -1
  52. package/docs/components/Page/examples/Page.md +1 -0
  53. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  54. package/docs/components/Spinner/examples/Spinner.md +10 -0
  55. package/docs/components/Table/examples/Table.md +330 -16
  56. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  57. package/docs/components/Truncate/examples/Truncate.md +53 -10
  58. package/docs/demos/Card/examples/Card.md +0 -57
  59. package/docs/demos/DescriptionList/examples/DescriptionList.md +0 -38
  60. package/docs/demos/Drawer/examples/Drawer.md +0 -38
  61. package/docs/demos/Form/examples/BasicForms.md +130 -10
  62. package/docs/demos/Masthead/examples/Masthead.md +1 -1
  63. package/docs/demos/Modal/examples/Modal.md +39 -3
  64. package/docs/demos/Nav/examples/Nav.md +2 -2
  65. package/docs/demos/Page/examples/Page.md +355 -0
  66. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  67. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +0 -76
  68. package/docs/demos/Table/examples/Table.md +67 -23
  69. package/docs/demos/Tabs/examples/Tabs.md +0 -570
  70. package/package.json +6 -6
  71. package/patternfly-base-no-globals.css +11 -11
  72. package/patternfly-base.css +11 -11
  73. package/patternfly-no-globals.css +421 -87
  74. package/patternfly.css +421 -87
  75. package/patternfly.min.css +1 -1
  76. package/patternfly.min.css.map +1 -1
package/docs/components/Button/examples/Button.md CHANGED
@@ -1906,7 +1906,19 @@ For when a plain/icon button is placed inline with text
1906
1906
  aria-label="More info"
1907
1907
  >
1908
1908
  <span class="pf-v6-c-button__icon">
1909
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1909
+ <svg
1910
+ class="pf-v6-svg"
1911
+ viewBox="0 0 1024 1024"
1912
+ fill="currentColor"
1913
+ aria-hidden="true"
1914
+ role="img"
1915
+ width="1em"
1916
+ height="1em"
1917
+ >
1918
+ <path
1919
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1920
+ />
1921
+ </svg>
1910
1922
  </span>
1911
1923
  </button>
1912
1924
  .
@@ -2010,7 +2022,36 @@ A favorite button should use a plain button with the star icon. Applying `.pf-m-
2010
2022
  aria-label="not starred"
2011
2023
  >
2012
2024
  <span class="pf-v6-c-button__icon">
2013
- <i class="fas fa-star" aria-hidden="true"></i>
2025
+ <span class="pf-v6-c-button__icon-favorite">
2026
+ <svg
2027
+ class="pf-v6-svg"
2028
+ viewBox="0 0 576 512"
2029
+ fill="currentColor"
2030
+ aria-hidden="true"
2031
+ role="img"
2032
+ width="1em"
2033
+ height="1em"
2034
+ >
2035
+ <path
2036
+ d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"
2037
+ />
2038
+ </svg>
2039
+ </span>
2040
+ <span class="pf-v6-c-button__icon-favorited">
2041
+ <svg
2042
+ class="pf-v6-svg"
2043
+ viewBox="0 0 576 512"
2044
+ fill="currentColor"
2045
+ aria-hidden="true"
2046
+ role="img"
2047
+ width="1em"
2048
+ height="1em"
2049
+ >
2050
+ <path
2051
+ d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
2052
+ />
2053
+ </svg>
2054
+ </span>
2014
2055
  </span>
2015
2056
  </button>
2016
2057
  <button
@@ -2019,7 +2060,36 @@ A favorite button should use a plain button with the star icon. Applying `.pf-m-
2019
2060
  aria-label="starred"
2020
2061
  >
2021
2062
  <span class="pf-v6-c-button__icon">
2022
- <i class="fas fa-star" aria-hidden="true"></i>
2063
+ <span class="pf-v6-c-button__icon-favorite">
2064
+ <svg
2065
+ class="pf-v6-svg"
2066
+ viewBox="0 0 576 512"
2067
+ fill="currentColor"
2068
+ aria-hidden="true"
2069
+ role="img"
2070
+ width="1em"
2071
+ height="1em"
2072
+ >
2073
+ <path
2074
+ d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"
2075
+ />
2076
+ </svg>
2077
+ </span>
2078
+ <span class="pf-v6-c-button__icon-favorited">
2079
+ <svg
2080
+ class="pf-v6-svg"
2081
+ viewBox="0 0 576 512"
2082
+ fill="currentColor"
2083
+ aria-hidden="true"
2084
+ role="img"
2085
+ width="1em"
2086
+ height="1em"
2087
+ >
2088
+ <path
2089
+ d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
2090
+ />
2091
+ </svg>
2092
+ </span>
2023
2093
  </span>
2024
2094
  </button>
2025
2095
 
package/docs/components/CodeEditor/examples/CodeEditor.md CHANGED
@@ -255,7 +255,19 @@ cssPrefix: pf-v6-c-code-editor
255
255
  <div class="pf-v6-c-code-editor__keyboard-shortcuts">
256
256
  <button class="pf-v6-c-button pf-m-link" type="button">
257
257
  <span class="pf-v6-c-button__icon pf-m-start">
258
- <i class="fas fa-question-circle" aria-hidden="true"></i>
258
+ <svg
259
+ class="pf-v6-svg"
260
+ viewBox="0 0 1024 1024"
261
+ fill="currentColor"
262
+ aria-hidden="true"
263
+ role="img"
264
+ width="1em"
265
+ height="1em"
266
+ >
267
+ <path
268
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
269
+ />
270
+ </svg>
259
271
  </span>
260
272
  <span class="pf-v6-c-button__text">View shortcuts</span>
261
273
  </button>
@@ -402,7 +414,19 @@ This is an extra container used in React to prevent event propagation if upload
402
414
  <div class="pf-v6-c-code-editor__keyboard-shortcuts">
403
415
  <button class="pf-v6-c-button pf-m-link" type="button">
404
416
  <span class="pf-v6-c-button__icon pf-m-start">
405
- <i class="fas fa-question-circle" aria-hidden="true"></i>
417
+ <svg
418
+ class="pf-v6-svg"
419
+ viewBox="0 0 1024 1024"
420
+ fill="currentColor"
421
+ aria-hidden="true"
422
+ role="img"
423
+ width="1em"
424
+ height="1em"
425
+ >
426
+ <path
427
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
428
+ />
429
+ </svg>
406
430
  </span>
407
431
  <span class="pf-v6-c-button__text">View shortcuts</span>
408
432
  </button>
package/docs/components/Divider/examples/Divider.md CHANGED
@@ -18,7 +18,7 @@ cssPrefix: pf-v6-c-divider
18
18
  ```html
19
19
  <ul role="list">
20
20
  <li>List item one</li>
21
- <li class="pf-v6-c-divider" role="separator"></li>
21
+ <li class="pf-v6-c-divider" role="presentation"></li>
22
22
  <li>List item two</li>
23
23
  </ul>
24
24
 
package/docs/components/Drawer/examples/Drawer.md CHANGED
@@ -550,6 +550,7 @@ cssPrefix: pf-v6-c-drawer
550
550
  class="pf-v6-c-drawer__splitter pf-m-vertical"
551
551
  role="separator"
552
552
  tabindex="0"
553
+ aria-valuenow="50"
553
554
  aria-orientation="vertical"
554
555
  >
555
556
  <div class="pf-v6-c-drawer__splitter-handle"></div>
@@ -597,6 +598,7 @@ cssPrefix: pf-v6-c-drawer
597
598
  class="pf-v6-c-drawer__splitter pf-m-vertical"
598
599
  role="separator"
599
600
  tabindex="0"
601
+ aria-valuenow="50"
600
602
  aria-orientation="vertical"
601
603
  >
602
604
  <div class="pf-v6-c-drawer__splitter-handle"></div>
@@ -647,6 +649,7 @@ cssPrefix: pf-v6-c-drawer
647
649
  class="pf-v6-c-drawer__splitter"
648
650
  role="separator"
649
651
  tabindex="0"
652
+ aria-valuenow="50"
650
653
  aria-orientation="horizontal"
651
654
  >
652
655
  <div class="pf-v6-c-drawer__splitter-handle"></div>
@@ -694,6 +697,7 @@ cssPrefix: pf-v6-c-drawer
694
697
  class="pf-v6-c-drawer__splitter pf-m-vertical"
695
698
  role="separator"
696
699
  tabindex="0"
700
+ aria-valuenow="50"
697
701
  aria-orientation="vertical"
698
702
  >
699
703
  <div class="pf-v6-c-drawer__splitter-handle"></div>