@patternfly/patternfly 6.3.0-prerelease.5 → 6.3.0-prerelease.50

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 (128) hide show
  1. package/README.md +5 -5
  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/normalize.scss +4 -0
  6. package/base/patternfly-common.css +46 -11
  7. package/base/patternfly-common.scss +58 -13
  8. package/components/Accordion/accordion.css +72 -3
  9. package/components/Accordion/accordion.scss +78 -6
  10. package/components/Alert/alert-group.css +52 -31
  11. package/components/Alert/alert-group.scss +77 -46
  12. package/components/Button/button.css +155 -6
  13. package/components/Button/button.scss +161 -8
  14. package/components/Card/card.css +0 -1
  15. package/components/Card/card.scss +0 -1
  16. package/components/DataList/data-list.css +2 -2
  17. package/components/DataList/data-list.scss +2 -2
  18. package/components/DualListSelector/dual-list-selector.css +36 -0
  19. package/components/DualListSelector/dual-list-selector.scss +43 -0
  20. package/components/ExpandableSection/expandable-section.css +63 -1
  21. package/components/ExpandableSection/expandable-section.scss +76 -2
  22. package/components/FileUpload/file-upload.css +3 -3
  23. package/components/FileUpload/file-upload.scss +3 -3
  24. package/components/Form/form.css +40 -1
  25. package/components/Form/form.scss +47 -1
  26. package/components/FormControl/form-control.css +16 -0
  27. package/components/FormControl/form-control.scss +9 -0
  28. package/components/InputGroup/input-group.css +80 -0
  29. package/components/InputGroup/input-group.scss +95 -0
  30. package/components/Menu/menu.css +24 -4
  31. package/components/Menu/menu.scss +20 -5
  32. package/components/MenuToggle/menu-toggle.css +38 -4
  33. package/components/MenuToggle/menu-toggle.scss +48 -3
  34. package/components/Nav/nav.css +22 -8
  35. package/components/Nav/nav.scss +22 -9
  36. package/components/Page/page.css +66 -6
  37. package/components/Page/page.scss +48 -5
  38. package/components/Progress/progress.css +16 -0
  39. package/components/Progress/progress.scss +11 -1
  40. package/components/ProgressStepper/progress-stepper.scss +1 -0
  41. package/components/Skeleton/skeleton.css +22 -2
  42. package/components/Skeleton/skeleton.scss +25 -3
  43. package/components/Spinner/spinner.css +5 -0
  44. package/components/Spinner/spinner.scss +6 -0
  45. package/components/Table/table-grid.css +51 -5
  46. package/components/Table/table-grid.scss +22 -1
  47. package/components/Table/table.css +95 -2
  48. package/components/Table/table.scss +138 -3
  49. package/components/Tabs/tabs.css +25 -15
  50. package/components/Tabs/tabs.scss +26 -13
  51. package/components/TextInputGroup/text-input-group.css +23 -0
  52. package/components/TextInputGroup/text-input-group.scss +16 -1
  53. package/components/Timestamp/timestamp.css +4 -0
  54. package/components/Timestamp/timestamp.scss +7 -0
  55. package/components/TreeView/tree-view.css +39 -0
  56. package/components/TreeView/tree-view.scss +42 -2
  57. package/components/Truncate/truncate.css +1 -0
  58. package/components/Truncate/truncate.scss +3 -0
  59. package/components/Wizard/wizard.css +11 -5
  60. package/components/Wizard/wizard.scss +13 -5
  61. package/components/_index.css +961 -99
  62. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  63. package/docs/components/Button/examples/Button.md +161 -6
  64. package/docs/components/Card/examples/Card.md +8 -8
  65. package/docs/components/CodeBlock/examples/CodeBlock.md +11 -11
  66. package/docs/components/CodeEditor/examples/CodeEditor.md +29 -5
  67. package/docs/components/DataList/examples/DataList.md +23 -23
  68. package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
  69. package/docs/components/DualListSelector/examples/DualListSelector.md +534 -16
  70. package/docs/components/EmptyState/examples/EmptyState.md +6 -6
  71. package/docs/components/ExpandableSection/examples/ExpandableSection.md +32 -21
  72. package/docs/components/Form/examples/Form.md +1179 -114
  73. package/docs/components/Hint/examples/Hint.md +3 -3
  74. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -6
  75. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  76. package/docs/components/JumpLinks/examples/JumpLinks.md +1 -1
  77. package/docs/components/Label/examples/Label.md +2 -2
  78. package/docs/components/Masthead/examples/masthead.md +90 -12
  79. package/docs/components/Menu/examples/Menu.md +122 -6
  80. package/docs/components/MenuToggle/examples/MenuToggle.md +93 -55
  81. package/docs/components/ModalBox/examples/ModalBox.md +13 -1
  82. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +2 -10
  83. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  84. package/docs/components/Page/examples/Page.md +148 -14
  85. package/docs/components/Pagination/examples/Pagination.md +12 -12
  86. package/docs/components/Popover/examples/Popover.md +0 -4
  87. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  88. package/docs/components/Skeleton/examples/Skeleton.md +21 -7
  89. package/docs/components/Slider/examples/Slider.md +2 -2
  90. package/docs/components/Spinner/examples/Spinner.md +10 -0
  91. package/docs/components/Table/examples/Table.md +9462 -6183
  92. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  93. package/docs/components/TextInputGroup/examples/TextInputGroup.md +73 -5
  94. package/docs/components/Title/examples/Title.md +8 -8
  95. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  96. package/docs/components/Wizard/examples/Wizard.md +583 -0
  97. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  98. package/docs/demos/Alert/examples/Alert.md +66 -9
  99. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  100. package/docs/demos/Banner/examples/Banner.md +47 -6
  101. package/docs/demos/Card/examples/Card.md +13 -67
  102. package/docs/demos/CardView/examples/CardView.md +24 -5
  103. package/docs/demos/Dashboard/examples/Dashboard.md +29 -7
  104. package/docs/demos/DataList/examples/DataList.md +100 -24
  105. package/docs/demos/DescriptionList/examples/DescriptionList.md +79 -50
  106. package/docs/demos/Drawer/examples/Drawer.md +110 -53
  107. package/docs/demos/Form/examples/BasicForms.md +142 -22
  108. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  109. package/docs/demos/Masthead/examples/Masthead.md +171 -19
  110. package/docs/demos/Modal/examples/Modal.md +171 -21
  111. package/docs/demos/Nav/examples/Nav.md +113 -18
  112. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +110 -15
  113. package/docs/demos/Page/examples/Page.md +661 -40
  114. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  115. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -103
  116. package/docs/demos/Skeleton/examples/Skeleton.md +25 -4
  117. package/docs/demos/Table/examples/Table.md +475 -157
  118. package/docs/demos/Tabs/examples/Tabs.md +139 -594
  119. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  120. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  121. package/package.json +5 -5
  122. package/patternfly-base-no-globals.css +45 -11
  123. package/patternfly-base.css +49 -11
  124. package/patternfly-no-globals.css +1006 -110
  125. package/patternfly.css +1010 -110
  126. package/patternfly.min.css +1 -1
  127. package/patternfly.min.css.map +1 -1
  128. package/sass-utilities/mixins.scss +54 -0
package/docs/components/TextInputGroup/examples/TextInputGroup.md CHANGED
@@ -165,6 +165,34 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
165
165
  </div>
166
166
  </div>
167
167
 
168
+ <br />
169
+ <div class="pf-v6-c-text-input-group pf-m-error">
170
+ <div class="pf-v6-c-text-input-group__main">
171
+ <span class="pf-v6-c-text-input-group__text">
172
+ <input
173
+ class="pf-v6-c-text-input-group__text-input"
174
+ type="text"
175
+ value="Error validation with no icon but with utilities"
176
+ aria-label="Type to filter"
177
+ />
178
+ <span class="pf-v6-c-text-input-group__icon pf-m-status">
179
+ <i aria-hidden="true" class="fas fa-exclamation-circle"></i>
180
+ </span>
181
+ </span>
182
+ </div>
183
+ <div class="pf-v6-c-text-input-group__utilities">
184
+ <button
185
+ class="pf-v6-c-button pf-m-plain"
186
+ type="button"
187
+ aria-label="Clear input"
188
+ >
189
+ <span class="pf-v6-c-button__text">
190
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
191
+ </span>
192
+ </button>
193
+ </div>
194
+ </div>
195
+
168
196
  ```
169
197
 
170
198
  ### Filters
@@ -741,6 +769,8 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
741
769
 
742
770
  ### Search input group
743
771
 
772
+ The React implementation can be found in the [search input](/components/search-input) component.
773
+
744
774
  ```html
745
775
  <div class="pf-v6-c-text-input-group">
746
776
  <div class="pf-v6-c-text-input-group__main pf-m-icon">
@@ -867,8 +897,26 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
867
897
  ```html
868
898
  <h3>Collapsed</h3>
869
899
  <br />
870
- <div class="pf-v6-c-input-group pf-m-plain">
871
- <div class="pf-v6-c-input-group__item pf-m-plain">
900
+ <div class="pf-v6-c-input-group pf-m-search-expandable pf-m-plain">
901
+ <div class="pf-v6-c-input-group__item pf-m-search-input">
902
+ <div class="pf-v6-c-text-input-group">
903
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
904
+ <span class="pf-v6-c-text-input-group__text">
905
+ <span class="pf-v6-c-text-input-group__icon">
906
+ <i class="fas fa-fw fa-search"></i>
907
+ </span>
908
+ <input
909
+ class="pf-v6-c-text-input-group__text-input"
910
+ type="text"
911
+ placeholder="Search"
912
+ value
913
+ aria-label="Search input"
914
+ />
915
+ </span>
916
+ </div>
917
+ </div>
918
+ </div>
919
+ <div class="pf-v6-c-input-group__item pf-m-search-expand pf-m-plain">
872
920
  <button
873
921
  class="pf-v6-c-button pf-m-plain"
874
922
  type="button"
@@ -879,13 +927,22 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
879
927
  </span>
880
928
  </button>
881
929
  </div>
930
+ <div class="pf-v6-c-input-group__item pf-m-search-action pf-m-plain">
931
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
932
+ <span class="pf-v6-c-button__icon">
933
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
934
+ </span>
935
+ </button>
936
+ </div>
882
937
  </div>
883
938
  <br />
884
939
  <br />
885
940
  <h3>Expanded</h3>
886
941
  <br />
887
- <div class="pf-v6-c-input-group pf-m-plain">
888
- <div class="pf-v6-c-input-group__item pf-m-fill">
942
+ <div
943
+ class="pf-v6-c-input-group pf-m-expanded pf-m-search-expandable pf-m-plain"
944
+ >
945
+ <div class="pf-v6-c-input-group__item pf-m-search-input">
889
946
  <div class="pf-v6-c-text-input-group">
890
947
  <div class="pf-v6-c-text-input-group__main pf-m-icon">
891
948
  <span class="pf-v6-c-text-input-group__text">
@@ -903,7 +960,18 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
903
960
  </div>
904
961
  </div>
905
962
  </div>
906
- <div class="pf-v6-c-input-group__item pf-m-plain">
963
+ <div class="pf-v6-c-input-group__item pf-m-search-expand pf-m-plain">
964
+ <button
965
+ class="pf-v6-c-button pf-m-plain"
966
+ type="button"
967
+ aria-label="Open search"
968
+ >
969
+ <span class="pf-v6-c-button__icon">
970
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
971
+ </span>
972
+ </button>
973
+ </div>
974
+ <div class="pf-v6-c-input-group__item pf-m-search-action pf-m-plain">
907
975
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
908
976
  <span class="pf-v6-c-button__icon">
909
977
  <i class="fas fa-times fa-fw" aria-hidden="true"></i>
package/docs/components/Title/examples/Title.md CHANGED
@@ -19,12 +19,12 @@ cssPrefix: pf-v6-c-title
19
19
  ### Heading level modifiers
20
20
 
21
21
  ```html
22
- <div class="pf-v6-c-title pf-m-h1">H1-styled title</div>
23
- <div class="pf-v6-c-title pf-m-h2">H2-styled title</div>
24
- <div class="pf-v6-c-title pf-m-h3">H3-styled title</div>
25
- <div class="pf-v6-c-title pf-m-h4">H4-styled title</div>
26
- <div class="pf-v6-c-title pf-m-h5">H5-styled title</div>
27
- <div class="pf-v6-c-title pf-m-h6">H6-styled title</div>
22
+ <h1 class="pf-v6-c-title pf-m-h1">H1-styled title</h1>
23
+ <h2 class="pf-v6-c-title pf-m-h2">H2-styled title</h2>
24
+ <h3 class="pf-v6-c-title pf-m-h3">H3-styled title</h3>
25
+ <h4 class="pf-v6-c-title pf-m-h4">H4-styled title</h4>
26
+ <h5 class="pf-v6-c-title pf-m-h5">H5-styled title</h5>
27
+ <h6 class="pf-v6-c-title pf-m-h6">H6-styled title</h6>
28
28
 
29
29
  ```
30
30
 
@@ -33,7 +33,7 @@ cssPrefix: pf-v6-c-title
33
33
  ```html
34
34
  <h1 class="pf-v6-c-title pf-m-2xl pf-m-page-title">2xl page title</h1>
35
35
 
36
- <div class="pf-v6-c-title pf-m-h1 pf-m-page-title">H1 page title</div>
36
+ <h1 class="pf-v6-c-title pf-m-h1 pf-m-page-title">H1 page title</h1>
37
37
 
38
38
  ```
39
39
 
@@ -58,7 +58,7 @@ The content component defines margin on headers. To regain the same spacing use,
58
58
 
59
59
  | Class | Applied | Outcome |
60
60
  | -- | -- | -- |
61
- | `.pf-v6-c-title` | `*` | Initiates a title. Always use it with a modifier class. |
61
+ | `.pf-v6-c-title` | `h1-h6` | Initiates a title. Always use it with a modifier class. |
62
62
  | `.pf-m-4xl` | `.pf-v6-c-title` | Modifies for 4xl size |
63
63
  | `.pf-m-3xl` | `.pf-v6-c-title` | Modifies for 3xl size |
64
64
  | `.pf-m-2xl` | `.pf-v6-c-title` | Modifies for 2xl size |
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -589,7 +589,7 @@ Several components in the following examples do not include functional and/or ac
589
589
  <div class="pf-v6-c-toolbar__group pf-m-toggle-group">
590
590
  <div class="pf-v6-c-toolbar__toggle">
591
591
  <button
592
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
592
+ class="pf-v6-c-menu-toggle pf-m-expanded pf-m-plain"
593
593
  type="button"
594
594
  aria-expanded="true"
595
595
  aria-label="Show filters"
@@ -1196,7 +1196,7 @@ Several components in the following examples do not include functional and/or ac
1196
1196
  <div class="pf-v6-c-toolbar__group pf-m-toggle-group">
1197
1197
  <div class="pf-v6-c-toolbar__toggle">
1198
1198
  <button
1199
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
1199
+ class="pf-v6-c-menu-toggle pf-m-expanded pf-m-plain"
1200
1200
  type="button"
1201
1201
  aria-expanded="true"
1202
1202
  aria-label="Show filters"
@@ -1667,7 +1667,7 @@ Several components in the following examples do not include functional and/or ac
1667
1667
  class="pf-v6-c-menu-toggle pf-m-plain"
1668
1668
  type="button"
1669
1669
  aria-expanded="false"
1670
- aria-label="Menu toggle"
1670
+ aria-label="Toggle options"
1671
1671
  id="toolbar-selected-filters-example-overflow-toggle"
1672
1672
  >
1673
1673
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1919,7 +1919,7 @@ Several components in the following examples do not include functional and/or ac
1919
1919
  class="pf-v6-c-menu-toggle pf-m-plain"
1920
1920
  type="button"
1921
1921
  aria-expanded="false"
1922
- aria-label="Menu toggle"
1922
+ aria-label="Toggle options"
1923
1923
  id="toolbar-stacked-example-overflow-toggle"
1924
1924
  >
1925
1925
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1972,7 +1972,7 @@ Several components in the following examples do not include functional and/or ac
1972
1972
  <div class="pf-v6-c-pagination__total-items">37 items</div>
1973
1973
  <div class="pf-v6-c-pagination__page-menu">
1974
1974
  <button
1975
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1975
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1976
1976
  type="button"
1977
1977
  aria-expanded="false"
1978
1978
  aria-label="Menu toggle"
@@ -2071,7 +2071,7 @@ Several components in the following examples do not include functional and/or ac
2071
2071
  <div class="pf-v6-c-toolbar__group pf-m-toggle-group">
2072
2072
  <div class="pf-v6-c-toolbar__toggle">
2073
2073
  <button
2074
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
2074
+ class="pf-v6-c-menu-toggle pf-m-expanded pf-m-plain"
2075
2075
  type="button"
2076
2076
  aria-expanded="true"
2077
2077
  aria-label="Show filters"
@@ -2393,7 +2393,7 @@ Several components in the following examples do not include functional and/or ac
2393
2393
  <div class="pf-v6-c-pagination__total-items">37 items</div>
2394
2394
  <div class="pf-v6-c-pagination__page-menu">
2395
2395
  <button
2396
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
2396
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2397
2397
  type="button"
2398
2398
  aria-expanded="false"
2399
2399
  aria-label="Menu toggle"