@patternfly/patternfly 6.3.0-prerelease.8 → 6.3.0

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 (111) hide show
  1. package/assets/images/icon-outlined-star.hbs +3 -0
  2. package/assets/images/icon-star.hbs +3 -0
  3. package/base/patternfly-common.css +46 -11
  4. package/base/patternfly-common.scss +58 -13
  5. package/components/Accordion/accordion.css +72 -3
  6. package/components/Accordion/accordion.scss +78 -6
  7. package/components/Alert/alert-group.css +52 -31
  8. package/components/Alert/alert-group.scss +77 -46
  9. package/components/Button/button.css +154 -6
  10. package/components/Button/button.scss +160 -8
  11. package/components/DataList/data-list.css +2 -2
  12. package/components/DataList/data-list.scss +2 -2
  13. package/components/DualListSelector/dual-list-selector.css +36 -0
  14. package/components/DualListSelector/dual-list-selector.scss +43 -0
  15. package/components/ExpandableSection/expandable-section.css +63 -1
  16. package/components/ExpandableSection/expandable-section.scss +76 -2
  17. package/components/FileUpload/file-upload.css +3 -3
  18. package/components/FileUpload/file-upload.scss +3 -3
  19. package/components/Form/form.css +40 -1
  20. package/components/Form/form.scss +47 -1
  21. package/components/FormControl/form-control.css +16 -0
  22. package/components/FormControl/form-control.scss +9 -0
  23. package/components/InputGroup/input-group.css +80 -0
  24. package/components/InputGroup/input-group.scss +95 -0
  25. package/components/Menu/menu.css +24 -4
  26. package/components/Menu/menu.scss +20 -5
  27. package/components/MenuToggle/menu-toggle.css +30 -0
  28. package/components/MenuToggle/menu-toggle.scss +33 -0
  29. package/components/Nav/nav.css +22 -8
  30. package/components/Nav/nav.scss +22 -9
  31. package/components/Page/page.css +62 -3
  32. package/components/Page/page.scss +44 -3
  33. package/components/Progress/progress.css +16 -0
  34. package/components/Progress/progress.scss +11 -1
  35. package/components/ProgressStepper/progress-stepper.scss +1 -0
  36. package/components/Skeleton/skeleton.css +22 -2
  37. package/components/Skeleton/skeleton.scss +25 -3
  38. package/components/Spinner/spinner.css +5 -0
  39. package/components/Spinner/spinner.scss +6 -0
  40. package/components/Table/table-grid.css +51 -5
  41. package/components/Table/table-grid.scss +22 -1
  42. package/components/Table/table.css +83 -1
  43. package/components/Table/table.scss +123 -1
  44. package/components/Tabs/tabs.css +25 -15
  45. package/components/Tabs/tabs.scss +26 -13
  46. package/components/TextInputGroup/text-input-group.css +16 -0
  47. package/components/TextInputGroup/text-input-group.scss +8 -0
  48. package/components/Timestamp/timestamp.css +4 -0
  49. package/components/Timestamp/timestamp.scss +7 -0
  50. package/components/TreeView/tree-view.css +39 -0
  51. package/components/TreeView/tree-view.scss +42 -2
  52. package/components/Truncate/truncate.css +1 -0
  53. package/components/Truncate/truncate.scss +3 -0
  54. package/components/_index.css +918 -85
  55. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  56. package/docs/components/Button/examples/Button.md +148 -5
  57. package/docs/components/Card/examples/Card.md +8 -8
  58. package/docs/components/CodeBlock/examples/CodeBlock.md +5 -5
  59. package/docs/components/DataList/examples/DataList.md +23 -23
  60. package/docs/components/DualListSelector/examples/DualListSelector.md +534 -16
  61. package/docs/components/ExpandableSection/examples/ExpandableSection.md +17 -12
  62. package/docs/components/Form/examples/Form.md +1047 -126
  63. package/docs/components/Hint/examples/Hint.md +3 -3
  64. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -2
  65. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  66. package/docs/components/JumpLinks/examples/JumpLinks.md +1 -1
  67. package/docs/components/Masthead/examples/masthead.md +90 -12
  68. package/docs/components/Menu/examples/Menu.md +122 -6
  69. package/docs/components/MenuToggle/examples/MenuToggle.md +90 -51
  70. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +2 -10
  71. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  72. package/docs/components/Page/examples/Page.md +147 -14
  73. package/docs/components/Pagination/examples/Pagination.md +12 -12
  74. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  75. package/docs/components/Slider/examples/Slider.md +2 -2
  76. package/docs/components/Spinner/examples/Spinner.md +10 -0
  77. package/docs/components/Table/examples/Table.md +9428 -6173
  78. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  79. package/docs/components/TextInputGroup/examples/TextInputGroup.md +45 -5
  80. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  81. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  82. package/docs/demos/Alert/examples/Alert.md +66 -9
  83. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  84. package/docs/demos/Banner/examples/Banner.md +47 -6
  85. package/docs/demos/Card/examples/Card.md +5 -62
  86. package/docs/demos/CardView/examples/CardView.md +24 -5
  87. package/docs/demos/Dashboard/examples/Dashboard.md +24 -5
  88. package/docs/demos/DataList/examples/DataList.md +100 -24
  89. package/docs/demos/DescriptionList/examples/DescriptionList.md +66 -47
  90. package/docs/demos/Drawer/examples/Drawer.md +110 -53
  91. package/docs/demos/Form/examples/BasicForms.md +12 -12
  92. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  93. package/docs/demos/Masthead/examples/Masthead.md +170 -18
  94. package/docs/demos/Modal/examples/Modal.md +132 -18
  95. package/docs/demos/Nav/examples/Nav.md +111 -16
  96. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +110 -15
  97. package/docs/demos/Page/examples/Page.md +309 -43
  98. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -103
  99. package/docs/demos/Skeleton/examples/Skeleton.md +22 -3
  100. package/docs/demos/Table/examples/Table.md +449 -155
  101. package/docs/demos/Tabs/examples/Tabs.md +137 -593
  102. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  103. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  104. package/package.json +5 -5
  105. package/patternfly-base-no-globals.css +45 -11
  106. package/patternfly-base.css +45 -11
  107. package/patternfly-no-globals.css +963 -96
  108. package/patternfly.css +963 -96
  109. package/patternfly.min.css +1 -1
  110. package/patternfly.min.css.map +1 -1
  111. package/sass-utilities/mixins.scss +54 -0
package/docs/components/ExpandableSection/examples/ExpandableSection.md CHANGED
@@ -31,7 +31,7 @@ cssPrefix: pf-v6-c-expandable-section
31
31
  ```html
32
32
  <div class="pf-v6-c-expandable-section pf-m-expanded">
33
33
  <div class="pf-v6-c-expandable-section__toggle">
34
- <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded="true">
34
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded>
35
35
  <span class="pf-v6-c-button__icon pf-m-start">
36
36
  <span class="pf-v6-c-expandable-section__toggle-icon">
37
37
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -52,7 +52,7 @@ cssPrefix: pf-v6-c-expandable-section
52
52
  ```html
53
53
  <div class="pf-v6-c-expandable-section pf-m-expanded pf-m-indented">
54
54
  <div class="pf-v6-c-expandable-section__toggle">
55
- <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded="true">
55
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded>
56
56
  <span class="pf-v6-c-button__icon pf-m-start">
57
57
  <span class="pf-v6-c-expandable-section__toggle-icon">
58
58
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -97,7 +97,7 @@ cssPrefix: pf-v6-c-expandable-section
97
97
  class="pf-v6-c-expandable-section pf-m-expanded pf-m-display-lg pf-m-limit-width"
98
98
  >
99
99
  <div class="pf-v6-c-expandable-section__toggle">
100
- <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded="true">
100
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded>
101
101
  <span class="pf-v6-c-button__icon pf-m-start">
102
102
  <span class="pf-v6-c-expandable-section__toggle-icon">
103
103
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -120,7 +120,7 @@ cssPrefix: pf-v6-c-expandable-section
120
120
  class="pf-v6-c-expandable-section pf-m-expanded pf-m-display-lg pf-m-limit-width pf-m-indented"
121
121
  >
122
122
  <div class="pf-v6-c-expandable-section__toggle">
123
- <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded="true">
123
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded>
124
124
  <span class="pf-v6-c-button__icon pf-m-start">
125
125
  <span class="pf-v6-c-expandable-section__toggle-icon">
126
126
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -141,7 +141,9 @@ cssPrefix: pf-v6-c-expandable-section
141
141
  ```html
142
142
  <div class="pf-v6-l-stack pf-m-gutter">
143
143
  <div class="pf-v6-l-stack__item">
144
- <div class="pf-v6-c-expandable-section pf-m-expanded">
144
+ <div
145
+ class="pf-v6-c-expandable-section pf-m-expanded pf-m-detached pf-m-expand-top"
146
+ >
145
147
  <div
146
148
  class="pf-v6-c-expandable-section__content"
147
149
  id="detached-toggle-content"
@@ -150,18 +152,18 @@ cssPrefix: pf-v6-c-expandable-section
150
152
  </div>
151
153
 
152
154
  <div class="pf-v6-l-stack__item">
153
- <div class="pf-v6-c-expandable-section pf-m-expanded">
155
+ <div
156
+ class="pf-v6-c-expandable-section pf-m-expanded pf-m-detached pf-m-expand-top"
157
+ >
154
158
  <div class="pf-v6-c-expandable-section__toggle">
155
159
  <button
156
160
  class="pf-v6-c-button pf-m-link"
157
161
  type="button"
158
- aria-expanded="true"
162
+ aria-expanded
159
163
  aria-controls="detached-toggle-content"
160
164
  >
161
165
  <span class="pf-v6-c-button__icon pf-m-start">
162
- <span
163
- class="pf-v6-c-expandable-section__toggle-icon pf-m-expand-top"
164
- >
166
+ <span class="pf-v6-c-expandable-section__toggle-icon">
165
167
  <i class="fas fa-angle-right" aria-hidden="true"></i>
166
168
  </span>
167
169
  </span>
@@ -201,7 +203,7 @@ cssPrefix: pf-v6-c-expandable-section
201
203
  <button
202
204
  class="pf-v6-c-button pf-m-inline pf-m-link"
203
205
  type="button"
204
- aria-expanded="true"
206
+ aria-expanded
205
207
  >
206
208
  <span class="pf-v6-c-button__text">Show less</span>
207
209
  </button>
@@ -232,8 +234,11 @@ cssPrefix: pf-v6-c-expandable-section
232
234
  | `.pf-v6-c-expandable-section__toggle-icon` | `<span>` | Initiates the expandable toggle icon. **Required** |
233
235
  | `.pf-v6-c-expandable-section__content` | `<div>` | Initiates the expandable section content. **Required** |
234
236
  | `.pf-m-expanded` | `.pf-v6-c-expandable-section` | Modifies the component for the expanded state. |
237
+ | `.pf-m-detached` | `.pf-v6-c-expandable-section` | Modifies the component for a detached variant. |
238
+ | `.pf-m-expand-top` | `.pf-v6-c-expandable-section__toggle-icon` | Modifies the toggle icon to point up when expanded. We recommend the new method of applying this class directly to the `.pf-v6-c-expandable-section` wrapper element. |
239
+ | `.pf-m-expand-top` | `.pf-v6-c-expandable-section.pf-m-detached` | Modifies the expandable animation and icon rotation directions for detached expandable sections. **Required** when the content is above the toggle. |
240
+ | `.pf-m-expand-bottom` | `.pf-v6-c-expandable-section.pf-m-detached` | Modifies the expandable animation direction for detached expandable sections. **Required** when the content is below the toggle. |
235
241
  | `.pf-m-display-lg` | `.pf-v6-c-expandable-section` | Modifies the styling of the component to have large display styling. |
236
242
  | `.pf-m-indented` | `.pf-v6-c-expandable-section` | Indicates that the expandable section content is indented and is aligned with the start of the title text to provide visual hierarchy. |
237
243
  | `.pf-m-truncate` | `.pf-v6-c-expandable-section` | Indicates that the expandable section content is truncated by default, and not truncated when expanded. |
238
- | `.pf-m-expand-top` | `.pf-v6-c-expandable-section__toggle-icon` | Modifies the toggle icon to point up when expanded. |
239
244
  | `--pf-v6-c-expandable-section--m-truncate__content--LineClamp` | `.pf-v6-c-expandable-section.pf-m-truncate` | Modifies the number of lines to show before truncating. |