@patternfly/patternfly 6.0.0-alpha.103 → 6.0.0-alpha.104
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.
- package/components/Drawer/drawer.css +5 -4
- package/components/Drawer/drawer.scss +7 -6
- package/components/Page/page.css +24 -23
- package/components/Page/page.scss +24 -23
- package/docs/components/Drawer/examples/Drawer.md +2 -1
- package/docs/components/Page/deprecated/PageHeader.md +113 -99
- package/docs/components/Page/examples/Page.md +114 -100
- package/docs/demos/AboutModal/examples/AboutModal.md +81 -79
- package/docs/demos/Alert/examples/Alert.md +551 -524
- package/docs/demos/BackToTop/examples/BackToTop.md +211 -209
- package/docs/demos/Banner/examples/Banner.md +420 -412
- package/docs/demos/CardView/examples/CardView.md +1302 -1297
- package/docs/demos/ContextSelector/examples/ContextSelector.md +536 -523
- package/docs/demos/Dashboard/examples/Dashboard.md +1344 -1314
- package/docs/demos/DataList/examples/DataList.md +3006 -2958
- package/docs/demos/DescriptionList/examples/DescriptionList.md +532 -518
- package/docs/demos/Drawer/examples/Drawer.md +544 -528
- package/docs/demos/JumpLinks/examples/JumpLinks.md +915 -897
- package/docs/demos/Masthead/examples/Masthead.md +729 -711
- package/docs/demos/Modal/examples/Modal.md +486 -474
- package/docs/demos/Nav/examples/Nav.md +528 -510
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +440 -435
- package/docs/demos/Page/examples/Page.md +1656 -1633
- package/docs/demos/Page/examples/Penta.md +632 -577
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5222 -5080
- package/docs/demos/Skeleton/examples/Skeleton.md +177 -175
- package/docs/demos/Table/examples/Table.md +14137 -13972
- package/docs/demos/Tabs/examples/Tabs.md +2206 -2138
- package/docs/demos/Toolbar/examples/Toolbar.md +1322 -1269
- package/docs/demos/Wizard/examples/Wizard.md +1571 -1553
- package/package.json +1 -1
- package/patternfly-no-globals.css +29 -27
- package/patternfly-theme-dark-unversioned.css +29 -27
- package/patternfly.css +29 -27
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -31,21 +31,23 @@ wrapperTag: div
|
|
|
31
31
|
<div class="pf-v6-c-page__sidebar">
|
|
32
32
|
<div class="pf-v6-c-page__sidebar-body">Navigation</div>
|
|
33
33
|
</div>
|
|
34
|
-
<
|
|
35
|
-
<
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
34
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
35
|
+
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
36
|
+
<section class="pf-v6-c-page__main-section">
|
|
37
|
+
This is a default
|
|
38
|
+
<code>.pf-v6-c-page__main-section</code>.
|
|
39
|
+
</section>
|
|
40
|
+
<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>.
|
|
44
|
+
</section>
|
|
45
|
+
<section class="pf-v6-c-page__main-section">
|
|
46
|
+
This is a default
|
|
47
|
+
<code>.pf-v6-c-page__main-section</code>.
|
|
48
|
+
</section>
|
|
49
|
+
</main>
|
|
50
|
+
</div>
|
|
49
51
|
</div>
|
|
50
52
|
|
|
51
53
|
```
|
|
@@ -71,21 +73,23 @@ wrapperTag: div
|
|
|
71
73
|
<span>Content</span>
|
|
72
74
|
</div>
|
|
73
75
|
</header>
|
|
74
|
-
<
|
|
75
|
-
<
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
76
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
77
|
+
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
78
|
+
<section class="pf-v6-c-page__main-section">
|
|
79
|
+
This is a default
|
|
80
|
+
<code>.pf-v6-c-page__main-section</code>.
|
|
81
|
+
</section>
|
|
82
|
+
<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>.
|
|
86
|
+
</section>
|
|
87
|
+
<section class="pf-v6-c-page__main-section">
|
|
88
|
+
This is a default
|
|
89
|
+
<code>.pf-v6-c-page__main-section</code>.
|
|
90
|
+
</section>
|
|
91
|
+
</main>
|
|
92
|
+
</div>
|
|
89
93
|
</div>
|
|
90
94
|
|
|
91
95
|
```
|
|
@@ -118,9 +122,11 @@ wrapperTag: div
|
|
|
118
122
|
>inset content</div>
|
|
119
123
|
<div class="pf-v6-c-page__sidebar-body pf-m-page-insets">footer content</div>
|
|
120
124
|
</div>
|
|
121
|
-
<
|
|
122
|
-
<
|
|
123
|
-
|
|
125
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
126
|
+
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
127
|
+
<section class="pf-v6-c-page__main-section"></section>
|
|
128
|
+
</main>
|
|
129
|
+
</div>
|
|
124
130
|
</div>
|
|
125
131
|
|
|
126
132
|
```
|
|
@@ -146,17 +152,19 @@ wrapperTag: div
|
|
|
146
152
|
<span>Content</span>
|
|
147
153
|
</div>
|
|
148
154
|
</header>
|
|
149
|
-
<
|
|
150
|
-
<
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
155
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
156
|
+
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
157
|
+
<section class="pf-v6-c-page__main-section">A regular page section.</section>
|
|
158
|
+
<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.
|
|
161
|
+
</section>
|
|
162
|
+
<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.
|
|
165
|
+
</section>
|
|
166
|
+
</main>
|
|
167
|
+
</div>
|
|
160
168
|
</div>
|
|
161
169
|
|
|
162
170
|
```
|
|
@@ -185,25 +193,27 @@ wrapperTag: div
|
|
|
185
193
|
<div class="pf-v6-c-page__sidebar">
|
|
186
194
|
<div class="pf-v6-c-page__sidebar-body">Navigation</div>
|
|
187
195
|
</div>
|
|
188
|
-
<
|
|
189
|
-
<
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
196
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
197
|
+
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
198
|
+
<section class="pf-v6-c-page__main-section">
|
|
199
|
+
This
|
|
200
|
+
<code>.pf-v6-c-page__main-section</code> has default padding.
|
|
201
|
+
</section>
|
|
202
|
+
<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.
|
|
206
|
+
</section>
|
|
207
|
+
<section
|
|
208
|
+
class="pf-v6-c-page__main-section pf-m-no-padding pf-m-padding-on-md"
|
|
209
|
+
>
|
|
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.
|
|
214
|
+
</section>
|
|
215
|
+
</main>
|
|
216
|
+
</div>
|
|
207
217
|
</div>
|
|
208
218
|
|
|
209
219
|
```
|
|
@@ -232,29 +242,31 @@ wrapperTag: div
|
|
|
232
242
|
<div class="pf-v6-c-page__sidebar">
|
|
233
243
|
<div class="pf-v6-c-page__sidebar-body">Navigation</div>
|
|
234
244
|
</div>
|
|
235
|
-
<
|
|
236
|
-
<
|
|
237
|
-
<
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
<
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
<
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
<
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
<
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
<
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
<
|
|
256
|
-
|
|
257
|
-
|
|
245
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
246
|
+
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
247
|
+
<section class="pf-v6-c-page__main-subnav">
|
|
248
|
+
<code>.pf-v6-c-page__main-subnav</code> for horizontal subnav navigation
|
|
249
|
+
</section>
|
|
250
|
+
<section class="pf-v6-c-page__main-nav">
|
|
251
|
+
<code>.pf-v6-c-page__main-nav</code> for tertiary navigation
|
|
252
|
+
</section>
|
|
253
|
+
<section class="pf-v6-c-page__main-tabs">
|
|
254
|
+
<code>.pf-v6-c-page__main-tabs</code> for tabs
|
|
255
|
+
</section>
|
|
256
|
+
<div class="pf-v6-c-page__main-group">
|
|
257
|
+
<code>.pf-v6-c-page__main-group</code> for a group of page sections
|
|
258
|
+
</div>
|
|
259
|
+
<section class="pf-v6-c-page__main-breadcrumb">
|
|
260
|
+
<code>.pf-v6-c-page__main-breadcrumb</code> for breadcrumbs
|
|
261
|
+
</section>
|
|
262
|
+
<section class="pf-v6-c-page__main-section">
|
|
263
|
+
<code>.pf-v6-c-page__main-section</code> for main sections
|
|
264
|
+
</section>
|
|
265
|
+
<section class="pf-v6-c-page__main-wizard">
|
|
266
|
+
<code>.pf-v6-c-page__main-wizard</code> for wizards
|
|
267
|
+
</section>
|
|
268
|
+
</main>
|
|
269
|
+
</div>
|
|
258
270
|
</div>
|
|
259
271
|
|
|
260
272
|
```
|
|
@@ -280,22 +292,24 @@ wrapperTag: div
|
|
|
280
292
|
<span>Content</span>
|
|
281
293
|
</div>
|
|
282
294
|
</header>
|
|
283
|
-
<
|
|
284
|
-
<
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
<div class="pf-v6-c-
|
|
289
|
-
<div class="pf-v6-c-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
295
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
296
|
+
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
297
|
+
<section
|
|
298
|
+
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
|
|
299
|
+
>
|
|
300
|
+
<div class="pf-v6-c-page__main-body">
|
|
301
|
+
<div class="pf-v6-c-card">
|
|
302
|
+
<div class="pf-v6-c-card__body">
|
|
303
|
+
When a width limited page section is wider than the value of
|
|
304
|
+
<code>--pf-v6-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
|
|
305
|
+
<br />
|
|
306
|
+
<br />The content in this example is placed in a card to better illustrate how the section behaves when it is centered. A card is not required to center a page section.
|
|
307
|
+
</div>
|
|
294
308
|
</div>
|
|
295
309
|
</div>
|
|
296
|
-
</
|
|
297
|
-
</
|
|
298
|
-
</
|
|
310
|
+
</section>
|
|
311
|
+
</main>
|
|
312
|
+
</div>
|
|
299
313
|
</div>
|
|
300
314
|
|
|
301
315
|
```
|
|
@@ -228,92 +228,94 @@ This demo implements the about modal, including the backdrop.
|
|
|
228
228
|
</nav>
|
|
229
229
|
</div>
|
|
230
230
|
</div>
|
|
231
|
-
<
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
<
|
|
238
|
-
<
|
|
239
|
-
<
|
|
240
|
-
<
|
|
241
|
-
<
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
<
|
|
245
|
-
<
|
|
246
|
-
|
|
231
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
232
|
+
<main
|
|
233
|
+
class="pf-v6-c-page__main"
|
|
234
|
+
tabindex="-1"
|
|
235
|
+
id="main-content-modal-basic-example"
|
|
236
|
+
>
|
|
237
|
+
<section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
|
|
238
|
+
<div class="pf-v6-c-page__main-body">
|
|
239
|
+
<nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
|
|
240
|
+
<ol class="pf-v6-c-breadcrumb__list" role="list">
|
|
241
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
242
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
|
|
243
|
+
</li>
|
|
244
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
245
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
246
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
247
|
+
</span>
|
|
247
248
|
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
249
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
250
|
+
</li>
|
|
251
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
252
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
253
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
254
|
+
</span>
|
|
254
255
|
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
256
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
257
|
+
</li>
|
|
258
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
259
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
260
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
261
|
+
</span>
|
|
261
262
|
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
</div>
|
|
271
|
-
</section>
|
|
272
|
-
<section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
|
|
273
|
-
<div class="pf-v6-c-page__main-body">
|
|
274
|
-
<div class="pf-v6-c-content">
|
|
275
|
-
<h1>Main title</h1>
|
|
276
|
-
<p>This is a full page demo.</p>
|
|
263
|
+
<a
|
|
264
|
+
href="#"
|
|
265
|
+
class="pf-v6-c-breadcrumb__link pf-m-current"
|
|
266
|
+
aria-current="page"
|
|
267
|
+
>Section landing</a>
|
|
268
|
+
</li>
|
|
269
|
+
</ol>
|
|
270
|
+
</nav>
|
|
277
271
|
</div>
|
|
278
|
-
</
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
285
|
-
</div>
|
|
286
|
-
<div class="pf-v6-c-card">
|
|
287
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
288
|
-
</div>
|
|
289
|
-
<div class="pf-v6-c-card">
|
|
290
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
291
|
-
</div>
|
|
292
|
-
<div class="pf-v6-c-card">
|
|
293
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
294
|
-
</div>
|
|
295
|
-
<div class="pf-v6-c-card">
|
|
296
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
297
|
-
</div>
|
|
298
|
-
<div class="pf-v6-c-card">
|
|
299
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
300
|
-
</div>
|
|
301
|
-
<div class="pf-v6-c-card">
|
|
302
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
303
|
-
</div>
|
|
304
|
-
<div class="pf-v6-c-card">
|
|
305
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
306
|
-
</div>
|
|
307
|
-
<div class="pf-v6-c-card">
|
|
308
|
-
<div class="pf-v6-c-card__body">This is a card</div>
|
|
272
|
+
</section>
|
|
273
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
|
|
274
|
+
<div class="pf-v6-c-page__main-body">
|
|
275
|
+
<div class="pf-v6-c-content">
|
|
276
|
+
<h1>Main title</h1>
|
|
277
|
+
<p>This is a full page demo.</p>
|
|
309
278
|
</div>
|
|
310
|
-
|
|
311
|
-
|
|
279
|
+
</div>
|
|
280
|
+
</section>
|
|
281
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width">
|
|
282
|
+
<div class="pf-v6-c-page__main-body">
|
|
283
|
+
<div class="pf-v6-l-gallery pf-m-gutter">
|
|
284
|
+
<div class="pf-v6-c-card">
|
|
285
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
286
|
+
</div>
|
|
287
|
+
<div class="pf-v6-c-card">
|
|
288
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
289
|
+
</div>
|
|
290
|
+
<div class="pf-v6-c-card">
|
|
291
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
292
|
+
</div>
|
|
293
|
+
<div class="pf-v6-c-card">
|
|
294
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
295
|
+
</div>
|
|
296
|
+
<div class="pf-v6-c-card">
|
|
297
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
298
|
+
</div>
|
|
299
|
+
<div class="pf-v6-c-card">
|
|
300
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
301
|
+
</div>
|
|
302
|
+
<div class="pf-v6-c-card">
|
|
303
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
304
|
+
</div>
|
|
305
|
+
<div class="pf-v6-c-card">
|
|
306
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
307
|
+
</div>
|
|
308
|
+
<div class="pf-v6-c-card">
|
|
309
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
310
|
+
</div>
|
|
311
|
+
<div class="pf-v6-c-card">
|
|
312
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
313
|
+
</div>
|
|
312
314
|
</div>
|
|
313
315
|
</div>
|
|
314
|
-
</
|
|
315
|
-
</
|
|
316
|
-
</
|
|
316
|
+
</section>
|
|
317
|
+
</main>
|
|
318
|
+
</div>
|
|
317
319
|
</div>
|
|
318
320
|
<div class="pf-v6-c-backdrop">
|
|
319
321
|
<div class="pf-v6-l-bullseye">
|