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

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 +45 -1
  20. package/components/ExpandableSection/expandable-section.scss +48 -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 +408 -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 +419 -87
  74. package/patternfly.css +419 -87
  75. package/patternfly.min.css +1 -1
  76. package/patternfly.min.css.map +1 -1
package/docs/demos/Table/examples/Table.md CHANGED
@@ -2609,7 +2609,7 @@ wrapperTag: div
2609
2609
  class="pf-v6-c-button pf-m-plain"
2610
2610
  id="expandable-demo-table-expandable-toggle-thead"
2611
2611
  type="button"
2612
- aria-controls="expandable-demo-table-content-thead"
2612
+ aria-controls="expandable-demo-table-content-1 expandable-demo-table-content-2 expandable-demo-table-content-3 expandable-demo-table-content-4 expandable-demo-table-content-5"
2613
2613
  aria-labelledby="expandable-demo-table-node-thead"
2614
2614
  aria-label="Toggle all rows"
2615
2615
  >
@@ -2790,7 +2790,7 @@ wrapperTag: div
2790
2790
  class="pf-v6-c-table__td"
2791
2791
  role="cell"
2792
2792
  colspan="7"
2793
- id="expandable-demo-table-content1"
2793
+ id="expandable-demo-table-content-1"
2794
2794
  >
2795
2795
  <div class="pf-v6-c-table__expandable-row-content">
2796
2796
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -2810,14 +2810,19 @@ wrapperTag: div
2810
2810
 
2811
2811
  <tbody class="pf-v6-c-table__tbody pf-m-expanded" role="rowgroup">
2812
2812
  <tr class="pf-v6-c-table__tr pf-m-expanded" role="row">
2813
- <td class="pf-v6-c-table__td pf-v6-c-table__toggle" role="cell">
2813
+ <td
2814
+ class="pf-v6-c-table__td pf-v6-c-table__toggle"
2815
+ aria-label="Row expansion"
2816
+ >
2814
2817
  <button
2815
2818
  class="pf-v6-c-button pf-m-expanded pf-m-plain"
2816
- id="expandable-demo-table-expandable-toggle-3"
2819
+ id="expandable-demo-table-expandable-toggle-2"
2817
2820
  type="button"
2818
2821
  aria-expanded="true"
2819
- aria-labelledby="expandable-demo-table-node-3 expandable-demo-table-expandable-toggle-3"
2822
+ aria-controls="expandable-demo-table-content-2"
2823
+ aria-labelledby="expandable-demo-table-node-2"
2820
2824
  aria-label="Toggle row"
2825
+ aria-describedby="true"
2821
2826
  >
2822
2827
  <span class="pf-v6-c-button__icon">
2823
2828
  <div class="pf-v6-c-table__toggle-icon">
@@ -2826,6 +2831,7 @@ wrapperTag: div
2826
2831
  </span>
2827
2832
  </button>
2828
2833
  </td>
2834
+
2829
2835
  <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
2830
2836
  <div class="pf-v6-c-check pf-m-standalone">
2831
2837
  <input
@@ -2908,7 +2914,7 @@ wrapperTag: div
2908
2914
  class="pf-v6-c-table__td"
2909
2915
  role="cell"
2910
2916
  colspan="5"
2911
- id="expandable-demo-table-content2"
2917
+ id="expandable-demo-table-content-2"
2912
2918
  >
2913
2919
  <div class="pf-v6-c-table__expandable-row-content">
2914
2920
  <div class="pf-v6-c-content">
@@ -2944,12 +2950,16 @@ wrapperTag: div
2944
2950
 
2945
2951
  <tbody class="pf-v6-c-table__tbody" role="rowgroup">
2946
2952
  <tr class="pf-v6-c-table__tr" role="row">
2947
- <td class="pf-v6-c-table__td pf-v6-c-table__toggle" role="cell">
2953
+ <td
2954
+ class="pf-v6-c-table__td pf-v6-c-table__toggle"
2955
+ aria-label="Row expansion"
2956
+ >
2948
2957
  <button
2949
2958
  class="pf-v6-c-button pf-m-plain"
2950
- id="expandable-demo-table-expandable-toggle-5"
2959
+ id="expandable-demo-table-expandable-toggle-3"
2951
2960
  type="button"
2952
- aria-labelledby="expandable-demo-table-node-5 expandable-demo-table-expandable-toggle-5"
2961
+ aria-controls="expandable-demo-table-content-3"
2962
+ aria-labelledby="expandable-demo-table-node-3"
2953
2963
  aria-label="Toggle row"
2954
2964
  >
2955
2965
  <span class="pf-v6-c-button__icon">
@@ -2959,6 +2969,7 @@ wrapperTag: div
2959
2969
  </span>
2960
2970
  </button>
2961
2971
  </td>
2972
+
2962
2973
  <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
2963
2974
  <div class="pf-v6-c-check pf-m-standalone">
2964
2975
  <input
@@ -3035,7 +3046,7 @@ wrapperTag: div
3035
3046
  class="pf-v6-c-table__td"
3036
3047
  role="cell"
3037
3048
  colspan="9"
3038
- id="expandable-demo-table-content3"
3049
+ id="expandable-demo-table-content-3"
3039
3050
  >
3040
3051
  <div class="pf-v6-c-table__expandable-row-content">
3041
3052
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -3051,12 +3062,16 @@ wrapperTag: div
3051
3062
 
3052
3063
  <tbody class="pf-v6-c-table__tbody" role="rowgroup">
3053
3064
  <tr class="pf-v6-c-table__tr" role="row">
3054
- <td class="pf-v6-c-table__td pf-v6-c-table__toggle" role="cell">
3065
+ <td
3066
+ class="pf-v6-c-table__td pf-v6-c-table__toggle"
3067
+ aria-label="Row expansion"
3068
+ >
3055
3069
  <button
3056
3070
  class="pf-v6-c-button pf-m-plain"
3057
- id="expandable-demo-table-expandable-toggle-7"
3071
+ id="expandable-demo-table-expandable-toggle-4"
3058
3072
  type="button"
3059
- aria-labelledby="expandable-demo-table-node-7 expandable-demo-table-expandable-toggle-7"
3073
+ aria-controls="expandable-demo-table-content-4"
3074
+ aria-labelledby="expandable-demo-table-node-4"
3060
3075
  aria-label="Toggle row"
3061
3076
  >
3062
3077
  <span class="pf-v6-c-button__icon">
@@ -3066,6 +3081,7 @@ wrapperTag: div
3066
3081
  </span>
3067
3082
  </button>
3068
3083
  </td>
3084
+
3069
3085
  <td class="pf-v6-c-table__td pf-v6-c-table__check" role="cell">
3070
3086
  <div class="pf-v6-c-check pf-m-standalone">
3071
3087
  <input
@@ -3142,7 +3158,7 @@ wrapperTag: div
3142
3158
  class="pf-v6-c-table__td"
3143
3159
  role="cell"
3144
3160
  colspan="9"
3145
- id="expandable-demo-table-content4"
3161
+ id="expandable-demo-table-content-4"
3146
3162
  >
3147
3163
  <div class="pf-v6-c-table__expandable-row-content">
3148
3164
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -3158,12 +3174,16 @@ wrapperTag: div
3158
3174
 
3159
3175
  <tbody class="pf-v6-c-table__tbody" role="rowgroup">
3160
3176
  <tr class="pf-v6-c-table__tr" role="row">
3161
- <td class="pf-v6-c-table__td pf-v6-c-table__toggle" role="cell">
3177
+ <td
3178
+ class="pf-v6-c-table__td pf-v6-c-table__toggle"
3179
+ aria-label="Row expansion"
3180
+ >
3162
3181
  <button
3163
3182
  class="pf-v6-c-button pf-m-plain"
3164
- id="expandable-demo-table-expandable-toggle-9"
3183
+ id="expandable-demo-table-expandable-toggle-5"
3165
3184
  type="button"
3166
- aria-labelledby="expandable-demo-table-node-9 expandable-demo-table-expandable-toggle-9"
3185
+ aria-controls="expandable-demo-table-content-5"
3186
+ aria-labelledby="expandable-demo-table-node-5"
3167
3187
  aria-label="Toggle row"
3168
3188
  >
3169
3189
  <span class="pf-v6-c-button__icon">
@@ -3180,13 +3200,13 @@ wrapperTag: div
3180
3200
  >
3181
3201
  <label
3182
3202
  class="pf-v6-c-check pf-m-standalone"
3183
- for="expandable-demo-table-checkrow-9-check-input"
3203
+ for="expandable-demo-table-checkrow-5-check-input"
3184
3204
  >
3185
3205
  <input
3186
3206
  class="pf-v6-c-check__input"
3187
3207
  type="checkbox"
3188
- id="expandable-demo-table-checkrow-9-check-input"
3189
- name="expandable-demo-table-checkrow-9-check-input"
3208
+ id="expandable-demo-table-checkrow-5-check-input"
3209
+ name="expandable-demo-table-checkrow-5-check-input"
3190
3210
  aria-label="Select row"
3191
3211
  />
3192
3212
  </label>
@@ -3256,7 +3276,7 @@ wrapperTag: div
3256
3276
  class="pf-v6-c-table__td"
3257
3277
  role="cell"
3258
3278
  colspan="9"
3259
- id="expandable-demo-table-content5"
3279
+ id="expandable-demo-table-content-5"
3260
3280
  >
3261
3281
  <div class="pf-v6-c-table__expandable-row-content">
3262
3282
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -16022,7 +16042,19 @@ By default, table cell alignment is set to baseline. This retains vertical align
16022
16042
  aria-label="aria-label&#x3D;&quot;More info&quot;"
16023
16043
  >
16024
16044
  <span class="pf-v6-c-button__icon">
16025
- <i class="fas fa-question-circle" aria-hidden="true"></i>
16045
+ <svg
16046
+ class="pf-v6-svg"
16047
+ viewBox="0 0 1024 1024"
16048
+ fill="currentColor"
16049
+ aria-hidden="true"
16050
+ role="img"
16051
+ width="1em"
16052
+ height="1em"
16053
+ >
16054
+ <path
16055
+ 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"
16056
+ />
16057
+ </svg>
16026
16058
  </span>
16027
16059
  </button>
16028
16060
  </span>
@@ -16065,7 +16097,19 @@ By default, table cell alignment is set to baseline. This retains vertical align
16065
16097
  aria-label="aria-label&#x3D;&quot;More info&quot;"
16066
16098
  >
16067
16099
  <span class="pf-v6-c-button__icon">
16068
- <i class="fas fa-question-circle" aria-hidden="true"></i>
16100
+ <svg
16101
+ class="pf-v6-svg"
16102
+ viewBox="0 0 1024 1024"
16103
+ fill="currentColor"
16104
+ aria-hidden="true"
16105
+ role="img"
16106
+ width="1em"
16107
+ height="1em"
16108
+ >
16109
+ <path
16110
+ 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"
16111
+ />
16112
+ </svg>
16069
16113
  </span>
16070
16114
  </button>
16071
16115
  </span>