@patternfly/patternfly 6.0.0-alpha.161 → 6.0.0-alpha.162

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 (22) hide show
  1. package/components/Page/page.css +38 -54
  2. package/components/Page/page.scss +19 -32
  3. package/components/Toolbar/toolbar.css +1 -0
  4. package/components/Toolbar/toolbar.scss +1 -0
  5. package/components/_index.css +39 -54
  6. package/docs/components/Page/examples/Page.css +5 -9
  7. package/docs/components/Page/examples/Page.md +71 -32
  8. package/docs/demos/Alert/examples/Alert.md +393 -374
  9. package/docs/demos/CardView/examples/CardView.md +717 -708
  10. package/docs/demos/DataList/examples/DataList.md +2574 -2500
  11. package/docs/demos/Drawer/examples/Drawer.md +190 -182
  12. package/docs/demos/JumpLinks/examples/JumpLinks.md +642 -612
  13. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +3608 -3490
  14. package/docs/demos/Skeleton/examples/Skeleton.md +128 -126
  15. package/docs/demos/Table/examples/Table.md +9458 -9105
  16. package/docs/demos/Tabs/examples/Tabs.md +889 -885
  17. package/docs/demos/Toolbar/examples/Toolbar.md +1254 -1147
  18. package/package.json +1 -1
  19. package/patternfly-no-globals.css +39 -54
  20. package/patternfly.css +39 -54
  21. package/patternfly.min.css +1 -1
  22. package/patternfly.min.css.map +1 -1
package/docs/components/Page/examples/Page.md CHANGED
@@ -34,17 +34,34 @@ wrapperTag: div
34
34
  <div class="pf-v6-c-page__main-container" tabindex="-1">
35
35
  <main class="pf-v6-c-page__main" tabindex="-1">
36
36
  <section class="pf-v6-c-page__main-section">
37
- This is a default
38
- <code>.pf-v6-c-page__main-section</code>.
37
+ <div class="pf-v6-c-page__main-body">
38
+ This is a default
39
+ <code>.pf-v6-c-page__main-section</code>.
40
+ </div>
39
41
  </section>
40
42
  <section class="pf-v6-c-page__main-section pf-m-secondary">
41
- This
42
- <code>.pf-v6-c-page__main-section</code> uses
43
- <code>.pf-m-secondary</code>.
43
+ <div class="pf-v6-c-page__main-body">
44
+ This
45
+ <code>.pf-v6-c-page__main-section</code> uses
46
+ <code>.pf-m-secondary</code>.
47
+ </div>
44
48
  </section>
45
49
  <section class="pf-v6-c-page__main-section">
46
- This is a default
47
- <code>.pf-v6-c-page__main-section</code>.
50
+ <div class="pf-v6-c-page__main-body">
51
+ This is a default
52
+ <code>.pf-v6-c-page__main-section</code>.
53
+ </div>
54
+ </section>
55
+ <section class="pf-v6-c-page__main-section pf-m-secondary">
56
+ <div
57
+ class="pf-v6-c-page__main-body"
58
+ >This is a page__main-body, one of three within one page__main-section.</div>
59
+ <div
60
+ class="pf-v6-c-page__main-body"
61
+ >This is a page__main-body, one of three within one page__main-section.</div>
62
+ <div
63
+ class="pf-v6-c-page__main-body"
64
+ >This is a page__main-body, one of three within one page__main-section.</div>
48
65
  </section>
49
66
  </main>
50
67
  </div>
@@ -76,17 +93,23 @@ wrapperTag: div
76
93
  <div class="pf-v6-c-page__main-container" tabindex="-1">
77
94
  <main class="pf-v6-c-page__main" tabindex="-1">
78
95
  <section class="pf-v6-c-page__main-section">
79
- This is a default
80
- <code>.pf-v6-c-page__main-section</code>.
96
+ <div class="pf-v6-c-page__main-body">
97
+ This is a default
98
+ <code>.pf-v6-c-page__main-section</code>.
99
+ </div>
81
100
  </section>
82
101
  <section class="pf-v6-c-page__main-section pf-m-secondary">
83
- This
84
- <code>.pf-v6-c-page__main-section</code> uses
85
- <code>.pf-m-secondary</code>.
102
+ <div class="pf-v6-c-page__main-body">
103
+ This
104
+ <code>.pf-v6-c-page__main-section</code> uses
105
+ <code>.pf-m-secondary</code>.
106
+ </div>
86
107
  </section>
87
108
  <section class="pf-v6-c-page__main-section">
88
- This is a default
89
- <code>.pf-v6-c-page__main-section</code>.
109
+ <div class="pf-v6-c-page__main-body">
110
+ This is a default
111
+ <code>.pf-v6-c-page__main-section</code>.
112
+ </div>
90
113
  </section>
91
114
  </main>
92
115
  </div>
@@ -124,7 +147,9 @@ wrapperTag: div
124
147
  </div>
125
148
  <div class="pf-v6-c-page__main-container" tabindex="-1">
126
149
  <main class="pf-v6-c-page__main" tabindex="-1">
127
- <section class="pf-v6-c-page__main-section"></section>
150
+ <section class="pf-v6-c-page__main-section">
151
+ <div class="pf-v6-c-page__main-body"></div>
152
+ </section>
128
153
  </main>
129
154
  </div>
130
155
  </div>
@@ -154,14 +179,20 @@ wrapperTag: div
154
179
  </header>
155
180
  <div class="pf-v6-c-page__main-container" tabindex="-1">
156
181
  <main class="pf-v6-c-page__main" tabindex="-1">
157
- <section class="pf-v6-c-page__main-section">A regular page section.</section>
182
+ <section class="pf-v6-c-page__main-section">
183
+ <div class="pf-v6-c-page__main-body">A regular page section.</div>
184
+ </section>
158
185
  <section class="pf-v6-c-page__main-section pf-m-fill">
159
- This section uses
160
- <code>.pf-m-fill</code> to fill the available space.
186
+ <div class="pf-v6-c-page__main-body">
187
+ This section uses
188
+ <code>.pf-m-fill</code> to fill the available space.
189
+ </div>
161
190
  </section>
162
191
  <section class="pf-v6-c-page__main-section pf-m-no-fill">
163
- This section uses
164
- <code>.pf-m-no-fill</code> to not fill the available space.
192
+ <div class="pf-v6-c-page__main-body">
193
+ This section uses
194
+ <code>.pf-m-no-fill</code> to not fill the available space.
195
+ </div>
165
196
  </section>
166
197
  </main>
167
198
  </div>
@@ -196,21 +227,27 @@ wrapperTag: div
196
227
  <div class="pf-v6-c-page__main-container" tabindex="-1">
197
228
  <main class="pf-v6-c-page__main" tabindex="-1">
198
229
  <section class="pf-v6-c-page__main-section">
199
- This
200
- <code>.pf-v6-c-page__main-section</code> has default padding.
230
+ <div class="pf-v6-c-page__main-body">
231
+ This
232
+ <code>.pf-v6-c-page__main-section</code> has default padding.
233
+ </div>
201
234
  </section>
202
235
  <section class="pf-v6-c-page__main-section pf-m-no-padding">
203
- This
204
- <code>.pf-v6-c-page__main-section</code> uses
205
- <code>.pf-m-no-padding</code> to remove all padding.
236
+ <div class="pf-v6-c-page__main-body">
237
+ This
238
+ <code>.pf-v6-c-page__main-section</code> uses
239
+ <code>.pf-m-no-padding</code> to remove all padding.
240
+ </div>
206
241
  </section>
207
242
  <section
208
243
  class="pf-v6-c-page__main-section pf-m-no-padding pf-m-padding-on-md"
209
244
  >
210
- This
211
- <code>.pf-v6-c-page__main-section</code> uses
212
- <code>.pf-m-no-padding .pf-m-padding-on-md</code> to remove padding up to the
213
- <code>md</code> breakpoint.
245
+ <div class="pf-v6-c-page__main-body">
246
+ This
247
+ <code>.pf-v6-c-page__main-section</code> uses
248
+ <code>.pf-m-no-padding .pf-m-padding-on-md</code> to remove padding up to the
249
+ <code>md</code> breakpoint.
250
+ </div>
214
251
  </section>
215
252
  </main>
216
253
  </div>
@@ -260,7 +297,9 @@ wrapperTag: div
260
297
  <code>.pf-v6-c-page__main-breadcrumb</code> for breadcrumbs
261
298
  </section>
262
299
  <section class="pf-v6-c-page__main-section">
263
- <code>.pf-v6-c-page__main-section</code> for main sections
300
+ <div class="pf-v6-c-page__main-body">
301
+ <code>.pf-v6-c-page__main-section</code> for main sections
302
+ </div>
264
303
  </section>
265
304
  <section class="pf-v6-c-page__main-wizard">
266
305
  <code>.pf-v6-c-page__main-wizard</code> for wizards
@@ -340,10 +379,10 @@ This component provides the basic chrome for a page, including sidebar and main
340
379
  | `.pf-v6-c-page__main-nav` | `<section>` | Creates a container to nest the (deprecated) tertiary navigation component in the main page area. |
341
380
  | `.pf-v6-c-page__main-subnav` | `<section>` | Creates a container to nest the horizontal subnav navigation component in the main page area. |
342
381
  | `.pf-v6-c-page__main-breadcrumb` | `<section>` | Creates a container to nest the breadcrumb component in the main page area. |
343
- | `.pf-v6-c-page__main-section` | `<section>` | Creates a section container in the main page area. **Note: The last/only `.pf-v6-c-page__main-section` element will grow to fill the availble vertical space. You can change this behavior using `.pf-m-fill` and `.pf-m-no-fill`, which are documented below.** |
382
+ | `.pf-v6-c-page__main-section` | `<section>` | Creates a section container in the main page area. **Note: The last/only `.pf-v6-c-page__main-section` element will grow to fill the available vertical space. You can change this behavior using `.pf-m-fill` and `.pf-m-no-fill`, which are documented below.** |
344
383
  | `.pf-v6-c-page__main-tabs` | `<section>` | Creates a container to nest the tabs component in the main page area. |
345
384
  | `.pf-v6-c-page__main-wizard` | `<section>` | Creates a container to nest the wizard component in the main page area. |
346
- | `.pf-v6-c-page__main-body` | `<div>` | Creates the body section for a page section. **Required when using `.pf-m-limit-width` on `.pf-v6-c-page__main-section`** |
385
+ | `.pf-v6-c-page__main-body` | `<div>` | Creates the body section for a page section. **Required** |
347
386
  | `.pf-v6-c-page__main-group` | `<div>` | Creates the group of `.pf-v6-c-page__main-*` sections. Can be used in combination with `.pf-m-sticky-[top/bottom]` to make multiple sections sticky. |
348
387
  | `.pf-v6-c-page__drawer` | `<div>` | Creates a container for the drawer component when placing the main page element in the drawer body. |
349
388
  | `.pf-m-expanded` | `.pf-v6-c-page__sidebar` | Modifies the sidebar for the expanded state. |