@patternfly/patternfly 4.175.0 → 4.176.3

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 (33) hide show
  1. package/components/AlertGroup/alert-group.css +36 -0
  2. package/components/AlertGroup/alert-group.scss +41 -0
  3. package/components/Dropdown/dropdown.css +10 -9
  4. package/components/Dropdown/dropdown.scss +17 -16
  5. package/components/Label/label.css +43 -12
  6. package/components/Label/label.scss +45 -13
  7. package/components/Nav/nav.css +11 -0
  8. package/components/Nav/nav.scss +14 -0
  9. package/docs/components/AlertGroup/examples/AlertGroup.md +8 -3
  10. package/docs/components/Label/examples/Label.md +33 -67
  11. package/docs/components/LabelGroup/examples/LabelGroup.md +64 -107
  12. package/docs/components/LogViewer/examples/LogViewer.md +9 -9
  13. package/docs/components/Menu/examples/Menu.md +43 -42
  14. package/docs/components/Nav/examples/Navigation.md +23 -44
  15. package/docs/demos/Alert/examples/Alert.md +52 -359
  16. package/docs/demos/BackToTop/examples/BackToTop.md +5 -505
  17. package/docs/demos/Card/examples/Card.md +42 -36
  18. package/docs/demos/ContextSelector/examples/ContextSelector.md +46 -1051
  19. package/docs/demos/Drawer/examples/Drawer.md +3 -3
  20. package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -1225
  21. package/docs/demos/Masthead/examples/Masthead.md +14 -6
  22. package/docs/demos/Nav/examples/Nav.md +9 -301
  23. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
  24. package/docs/demos/Page/examples/Page.md +162 -3084
  25. package/docs/demos/Table/examples/Table.md +183 -18031
  26. package/docs/demos/Tabs/examples/Tabs.md +686 -7389
  27. package/docs/demos/Toolbar/examples/Toolbar.md +44 -1027
  28. package/docs/demos/Wizard/examples/Wizard.md +2 -2
  29. package/package.json +1 -1
  30. package/patternfly-no-reset.css +100 -21
  31. package/patternfly.css +100 -21
  32. package/patternfly.min.css +1 -1
  33. package/patternfly.min.css.map +1 -1
package/docs/demos/BackToTop/examples/BackToTop.md CHANGED
@@ -6,509 +6,9 @@ cssPrefix: pf-d-back-to-top
6
6
 
7
7
  ### Basic
8
8
 
9
- ```html isFullscreen
10
- <div class="pf-c-page" id="back-to-top-basic">
11
- <a
12
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
13
- href="#main-content-back-to-top-basic"
14
- >Skip to content</a>
15
- <header class="pf-c-page__header">
16
- <div class="pf-c-page__header-brand">
17
- <div class="pf-c-page__header-brand-toggle">
18
- <button
19
- class="pf-c-button pf-m-plain"
20
- type="button"
21
- id="back-to-top-basic-nav-toggle"
22
- aria-label="Global navigation"
23
- aria-expanded="true"
24
- aria-controls="back-to-top-basic-primary-nav"
25
- >
26
- <i class="fas fa-bars" aria-hidden="true"></i>
27
- </button>
28
- </div>
29
- <a href="#" class="pf-c-page__header-brand-link">
30
- <img
31
- class="pf-c-brand"
32
- src="/assets/images/PF-Masthead-Logo.svg"
33
- alt="PatternFly logo"
34
- />
35
- </a>
36
- </div>
37
-
38
- <div class="pf-c-page__header-tools">
39
- <div class="pf-c-page__header-tools-group">
40
- <div
41
- class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
42
- >
43
- <button
44
- class="pf-c-button pf-m-plain"
45
- type="button"
46
- aria-label="Settings"
47
- >
48
- <i class="fas fa-cog" aria-hidden="true"></i>
49
- </button>
50
- </div>
51
- <div
52
- class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
53
- >
54
- <button
55
- class="pf-c-button pf-m-plain"
56
- type="button"
57
- aria-label="Help"
58
- >
59
- <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
60
- </button>
61
- </div>
62
- </div>
63
- <div class="pf-c-page__header-tools-group">
64
- <div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
65
- <div class="pf-c-dropdown">
66
- <button
67
- class="pf-c-dropdown__toggle pf-m-plain"
68
- id="back-to-top-basic-dropdown-kebab-1-button"
69
- aria-expanded="false"
70
- type="button"
71
- aria-label="Actions"
72
- >
73
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
74
- </button>
75
- <ul
76
- class="pf-c-dropdown__menu pf-m-align-right"
77
- aria-labelledby="back-to-top-basic-dropdown-kebab-1-button"
78
- hidden
79
- >
80
- <li>
81
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
82
- </li>
83
- <li>
84
- <button class="pf-c-dropdown__menu-item" type="button">Action</button>
85
- </li>
86
- <li>
87
- <a
88
- class="pf-c-dropdown__menu-item pf-m-disabled"
89
- href="#"
90
- aria-disabled="true"
91
- tabindex="-1"
92
- >Disabled link</a>
93
- </li>
94
- <li>
95
- <button
96
- class="pf-c-dropdown__menu-item"
97
- type="button"
98
- disabled
99
- >Disabled action</button>
100
- </li>
101
- <li class="pf-c-divider" role="separator"></li>
102
- <li>
103
- <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
104
- </li>
105
- </ul>
106
- </div>
107
- </div>
108
- <div
109
- class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"
110
- >
111
- <div class="pf-c-dropdown">
112
- <button
113
- class="pf-c-dropdown__toggle pf-m-plain"
114
- id="back-to-top-basic-dropdown-kebab-2-button"
115
- aria-expanded="false"
116
- type="button"
117
- >
118
- <span class="pf-c-dropdown__toggle-text">John Smith</span>
119
- <span class="pf-c-dropdown__toggle-icon">
120
- <i class="fas fa-caret-down" aria-hidden="true"></i>
121
- </span>
122
- </button>
123
- <ul
124
- class="pf-c-dropdown__menu"
125
- aria-labelledby="back-to-top-basic-dropdown-kebab-2-button"
126
- hidden
127
- >
128
- <li>
129
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
130
- </li>
131
- <li>
132
- <button class="pf-c-dropdown__menu-item" type="button">Action</button>
133
- </li>
134
- <li>
135
- <a
136
- class="pf-c-dropdown__menu-item pf-m-disabled"
137
- href="#"
138
- aria-disabled="true"
139
- tabindex="-1"
140
- >Disabled link</a>
141
- </li>
142
- <li>
143
- <button
144
- class="pf-c-dropdown__menu-item"
145
- type="button"
146
- disabled
147
- >Disabled action</button>
148
- </li>
149
- <li class="pf-c-divider" role="separator"></li>
150
- <li>
151
- <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
152
- </li>
153
- </ul>
154
- </div>
155
- </div>
156
- </div>
157
- <img
158
- class="pf-c-avatar"
159
- src="/assets/images/img_avatar.svg"
160
- alt="Avatar image"
161
- />
162
- </div>
163
- </header>
164
- <div class="pf-c-page__sidebar">
165
- <div class="pf-c-page__sidebar-body">
166
- <nav
167
- class="pf-c-nav"
168
- id="back-to-top-basic-primary-nav"
169
- aria-label="Global"
170
- >
171
- <ul class="pf-c-nav__list">
172
- <li class="pf-c-nav__item">
173
- <a href="#" class="pf-c-nav__link">System panel</a>
174
- </li>
175
- <li class="pf-c-nav__item">
176
- <a
177
- href="#"
178
- class="pf-c-nav__link pf-m-current"
179
- aria-current="page"
180
- >Policy</a>
181
- </li>
182
- <li class="pf-c-nav__item">
183
- <a href="#" class="pf-c-nav__link">Authentication</a>
184
- </li>
185
- <li class="pf-c-nav__item">
186
- <a href="#" class="pf-c-nav__link">Network services</a>
187
- </li>
188
- <li class="pf-c-nav__item">
189
- <a href="#" class="pf-c-nav__link">Server</a>
190
- </li>
191
- </ul>
192
- </nav>
193
- </div>
194
- </div>
195
- <main
196
- class="pf-c-page__main"
197
- tabindex="-1"
198
- id="main-content-back-to-top-basic"
199
- >
200
- <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
201
- <div class="pf-c-page__main-body">
202
- <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
203
- <ol class="pf-c-breadcrumb__list">
204
- <li class="pf-c-breadcrumb__item">
205
- <a href="#" class="pf-c-breadcrumb__link">Section home</a>
206
- </li>
207
- <li class="pf-c-breadcrumb__item">
208
- <span class="pf-c-breadcrumb__item-divider">
209
- <i class="fas fa-angle-right" aria-hidden="true"></i>
210
- </span>
211
-
212
- <a href="#" class="pf-c-breadcrumb__link">Section title</a>
213
- </li>
214
- <li class="pf-c-breadcrumb__item">
215
- <span class="pf-c-breadcrumb__item-divider">
216
- <i class="fas fa-angle-right" aria-hidden="true"></i>
217
- </span>
218
-
219
- <a href="#" class="pf-c-breadcrumb__link">Section title</a>
220
- </li>
221
- <li class="pf-c-breadcrumb__item">
222
- <span class="pf-c-breadcrumb__item-divider">
223
- <i class="fas fa-angle-right" aria-hidden="true"></i>
224
- </span>
225
-
226
- <a
227
- href="#"
228
- class="pf-c-breadcrumb__link pf-m-current"
229
- aria-current="page"
230
- >Section landing</a>
231
- </li>
232
- </ol>
233
- </nav>
234
- </div>
235
- </section>
236
- <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
237
- <div class="pf-c-page__main-body">
238
- <div class="pf-c-content">
239
- <h1>Main title</h1>
240
- <p>This is a demo of the page component.</p>
241
- </div>
242
- </div>
243
- </section>
244
- <section class="pf-c-page__main-section pf-m-limit-width">
245
- <div class="pf-c-page__main-body">
246
- <div class="pf-l-gallery pf-m-gutter">
247
- <div class="pf-l-gallery__item">
248
- <div class="pf-c-card">
249
- <div class="pf-c-card__body">This is a card</div>
250
- </div>
251
- </div>
252
- <div class="pf-l-gallery__item">
253
- <div class="pf-c-card">
254
- <div class="pf-c-card__body">This is a card</div>
255
- </div>
256
- </div>
257
- <div class="pf-l-gallery__item">
258
- <div class="pf-c-card">
259
- <div class="pf-c-card__body">This is a card</div>
260
- </div>
261
- </div>
262
- <div class="pf-l-gallery__item">
263
- <div class="pf-c-card">
264
- <div class="pf-c-card__body">This is a card</div>
265
- </div>
266
- </div>
267
- <div class="pf-l-gallery__item">
268
- <div class="pf-c-card">
269
- <div class="pf-c-card__body">This is a card</div>
270
- </div>
271
- </div>
272
- <div class="pf-l-gallery__item">
273
- <div class="pf-c-card">
274
- <div class="pf-c-card__body">This is a card</div>
275
- </div>
276
- </div>
277
- <div class="pf-l-gallery__item">
278
- <div class="pf-c-card">
279
- <div class="pf-c-card__body">This is a card</div>
280
- </div>
281
- </div>
282
- <div class="pf-l-gallery__item">
283
- <div class="pf-c-card">
284
- <div class="pf-c-card__body">This is a card</div>
285
- </div>
286
- </div>
287
- <div class="pf-l-gallery__item">
288
- <div class="pf-c-card">
289
- <div class="pf-c-card__body">This is a card</div>
290
- </div>
291
- </div>
292
- <div class="pf-l-gallery__item">
293
- <div class="pf-c-card">
294
- <div class="pf-c-card__body">This is a card</div>
295
- </div>
296
- </div>
297
- <div class="pf-l-gallery__item">
298
- <div class="pf-c-card">
299
- <div class="pf-c-card__body">This is a card</div>
300
- </div>
301
- </div>
302
- <div class="pf-l-gallery__item">
303
- <div class="pf-c-card">
304
- <div class="pf-c-card__body">This is a card</div>
305
- </div>
306
- </div>
307
- <div class="pf-l-gallery__item">
308
- <div class="pf-c-card">
309
- <div class="pf-c-card__body">This is a card</div>
310
- </div>
311
- </div>
312
- <div class="pf-l-gallery__item">
313
- <div class="pf-c-card">
314
- <div class="pf-c-card__body">This is a card</div>
315
- </div>
316
- </div>
317
- <div class="pf-l-gallery__item">
318
- <div class="pf-c-card">
319
- <div class="pf-c-card__body">This is a card</div>
320
- </div>
321
- </div>
322
- <div class="pf-l-gallery__item">
323
- <div class="pf-c-card">
324
- <div class="pf-c-card__body">This is a card</div>
325
- </div>
326
- </div>
327
- <div class="pf-l-gallery__item">
328
- <div class="pf-c-card">
329
- <div class="pf-c-card__body">This is a card</div>
330
- </div>
331
- </div>
332
- <div class="pf-l-gallery__item">
333
- <div class="pf-c-card">
334
- <div class="pf-c-card__body">This is a card</div>
335
- </div>
336
- </div>
337
- <div class="pf-l-gallery__item">
338
- <div class="pf-c-card">
339
- <div class="pf-c-card__body">This is a card</div>
340
- </div>
341
- </div>
342
- <div class="pf-l-gallery__item">
343
- <div class="pf-c-card">
344
- <div class="pf-c-card__body">This is a card</div>
345
- </div>
346
- </div>
347
- <div class="pf-l-gallery__item">
348
- <div class="pf-c-card">
349
- <div class="pf-c-card__body">This is a card</div>
350
- </div>
351
- </div>
352
- <div class="pf-l-gallery__item">
353
- <div class="pf-c-card">
354
- <div class="pf-c-card__body">This is a card</div>
355
- </div>
356
- </div>
357
- <div class="pf-l-gallery__item">
358
- <div class="pf-c-card">
359
- <div class="pf-c-card__body">This is a card</div>
360
- </div>
361
- </div>
362
- <div class="pf-l-gallery__item">
363
- <div class="pf-c-card">
364
- <div class="pf-c-card__body">This is a card</div>
365
- </div>
366
- </div>
367
- <div class="pf-l-gallery__item">
368
- <div class="pf-c-card">
369
- <div class="pf-c-card__body">This is a card</div>
370
- </div>
371
- </div>
372
- <div class="pf-l-gallery__item">
373
- <div class="pf-c-card">
374
- <div class="pf-c-card__body">This is a card</div>
375
- </div>
376
- </div>
377
- <div class="pf-l-gallery__item">
378
- <div class="pf-c-card">
379
- <div class="pf-c-card__body">This is a card</div>
380
- </div>
381
- </div>
382
- <div class="pf-l-gallery__item">
383
- <div class="pf-c-card">
384
- <div class="pf-c-card__body">This is a card</div>
385
- </div>
386
- </div>
387
- <div class="pf-l-gallery__item">
388
- <div class="pf-c-card">
389
- <div class="pf-c-card__body">This is a card</div>
390
- </div>
391
- </div>
392
- <div class="pf-l-gallery__item">
393
- <div class="pf-c-card">
394
- <div class="pf-c-card__body">This is a card</div>
395
- </div>
396
- </div>
397
- <div class="pf-l-gallery__item">
398
- <div class="pf-c-card">
399
- <div class="pf-c-card__body">This is a card</div>
400
- </div>
401
- </div>
402
- <div class="pf-l-gallery__item">
403
- <div class="pf-c-card">
404
- <div class="pf-c-card__body">This is a card</div>
405
- </div>
406
- </div>
407
- <div class="pf-l-gallery__item">
408
- <div class="pf-c-card">
409
- <div class="pf-c-card__body">This is a card</div>
410
- </div>
411
- </div>
412
- <div class="pf-l-gallery__item">
413
- <div class="pf-c-card">
414
- <div class="pf-c-card__body">This is a card</div>
415
- </div>
416
- </div>
417
- <div class="pf-l-gallery__item">
418
- <div class="pf-c-card">
419
- <div class="pf-c-card__body">This is a card</div>
420
- </div>
421
- </div>
422
- <div class="pf-l-gallery__item">
423
- <div class="pf-c-card">
424
- <div class="pf-c-card__body">This is a card</div>
425
- </div>
426
- </div>
427
- <div class="pf-l-gallery__item">
428
- <div class="pf-c-card">
429
- <div class="pf-c-card__body">This is a card</div>
430
- </div>
431
- </div>
432
- <div class="pf-l-gallery__item">
433
- <div class="pf-c-card">
434
- <div class="pf-c-card__body">This is a card</div>
435
- </div>
436
- </div>
437
- <div class="pf-l-gallery__item">
438
- <div class="pf-c-card">
439
- <div class="pf-c-card__body">This is a card</div>
440
- </div>
441
- </div>
442
- <div class="pf-l-gallery__item">
443
- <div class="pf-c-card">
444
- <div class="pf-c-card__body">This is a card</div>
445
- </div>
446
- </div>
447
- <div class="pf-l-gallery__item">
448
- <div class="pf-c-card">
449
- <div class="pf-c-card__body">This is a card</div>
450
- </div>
451
- </div>
452
- <div class="pf-l-gallery__item">
453
- <div class="pf-c-card">
454
- <div class="pf-c-card__body">This is a card</div>
455
- </div>
456
- </div>
457
- <div class="pf-l-gallery__item">
458
- <div class="pf-c-card">
459
- <div class="pf-c-card__body">This is a card</div>
460
- </div>
461
- </div>
462
- <div class="pf-l-gallery__item">
463
- <div class="pf-c-card">
464
- <div class="pf-c-card__body">This is a card</div>
465
- </div>
466
- </div>
467
- <div class="pf-l-gallery__item">
468
- <div class="pf-c-card">
469
- <div class="pf-c-card__body">This is a card</div>
470
- </div>
471
- </div>
472
- <div class="pf-l-gallery__item">
473
- <div class="pf-c-card">
474
- <div class="pf-c-card__body">This is a card</div>
475
- </div>
476
- </div>
477
- <div class="pf-l-gallery__item">
478
- <div class="pf-c-card">
479
- <div class="pf-c-card__body">This is a card</div>
480
- </div>
481
- </div>
482
- <div class="pf-l-gallery__item">
483
- <div class="pf-c-card">
484
- <div class="pf-c-card__body">This is a card</div>
485
- </div>
486
- </div>
487
- <div class="pf-l-gallery__item">
488
- <div class="pf-c-card">
489
- <div class="pf-c-card__body">This is a card</div>
490
- </div>
491
- </div>
492
- <div class="pf-l-gallery__item">
493
- <div class="pf-c-card">
494
- <div class="pf-c-card__body">This is a card</div>
495
- </div>
496
- </div>
497
- </div>
498
- </div>
499
- </section>
500
- <div class="pf-c-back-to-top">
501
- <a
502
- class="pf-c-button pf-m-primary"
503
- href="#main-content-back-to-top-basic"
504
- >
505
- Back to top
506
- <span class="pf-c-button__icon pf-m-end">
507
- <i class="fas fa-angle-up" aria-hidden="true"></i>
508
- </span>
509
- </a>
510
- </div>
511
- </main>
512
- </div>
513
-
9
+ ```hbs isFullscreen
10
+ {{#> page-demo-default page-demo-default--id="back-to-top-basic"}}
11
+ {{> page-template-gallery page-template--gallery--IsLongGallery="true"}}
12
+ {{> back-to-top back-to-top--target="main-content-back-to-top-basic"}}
13
+ {{/page-demo-default}}
514
14
  ```