@patternfly/patternfly 6.0.0-alpha.165 → 6.0.0-alpha.167
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/Alert/alert-group.css +54 -3
- package/components/Alert/alert-group.scss +85 -0
- package/components/Alert/alert.scss +1 -1
- package/components/Button/button.css +33 -14
- package/components/Button/button.scss +36 -14
- package/components/_index.css +87 -17
- package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
- package/docs/components/ActionList/examples/ActionList.md +60 -20
- package/docs/components/Alert/examples/Alert.md +106 -62
- package/docs/components/BackToTop/examples/BackToTop.md +5 -3
- package/docs/components/Banner/examples/Banner.md +9 -3
- package/docs/components/Button/examples/Button.md +536 -367
- package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
- package/docs/components/Card/examples/Card.md +43 -29
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +75 -33
- package/docs/components/CodeBlock/examples/CodeBlock.md +18 -6
- package/docs/components/CodeEditor/examples/CodeEditor.md +44 -22
- package/docs/components/ContextSelector/deprecated/context-selector.md +6 -8
- package/docs/components/DataList/examples/DataList.md +121 -63
- package/docs/components/DatePicker/examples/DatePicker.md +18 -6
- package/docs/components/DescriptionList/examples/DescriptionList.md +125 -75
- package/docs/components/Drawer/examples/Drawer.md +57 -19
- package/docs/components/DualListSelector/examples/DualListSelector.md +204 -100
- package/docs/components/EmptyState/examples/EmptyState.md +123 -53
- package/docs/components/FileUpload/examples/FileUpload.md +42 -14
- package/docs/components/Form/examples/Form.md +53 -19
- package/docs/components/Hint/examples/Hint.md +9 -9
- package/docs/components/InlineEdit/examples/InlineEdit.md +78 -26
- package/docs/components/InputGroup/examples/InputGroup.md +27 -9
- package/docs/components/JumpLinks/examples/JumpLinks.md +188 -68
- package/docs/components/Label/examples/Label.md +651 -217
- package/docs/components/LogViewer/examples/LogViewer.md +218 -86
- package/docs/components/Login/examples/Login.md +346 -282
- package/docs/components/Masthead/examples/masthead.md +27 -9
- package/docs/components/Menu/examples/Menu.md +35 -25
- package/docs/components/MenuToggle/examples/MenuToggle.md +3 -1
- package/docs/components/ModalBox/examples/ModalBox.md +48 -16
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +48 -16
- package/docs/components/Nav/examples/Navigation.md +12 -4
- package/docs/components/NotificationBadge/examples/NotificationBadge.md +78 -42
- package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +6 -2
- package/docs/components/NumberInput/examples/NumberInput.md +96 -48
- package/docs/components/OverflowMenu/examples/overflow-menu.md +48 -16
- package/docs/components/Page/examples/Page.md +21 -7
- package/docs/components/Pagination/examples/Pagination.md +132 -44
- package/docs/components/Popover/examples/Popover.md +45 -15
- package/docs/components/Select/deprecated/Select.md +111 -55
- package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
- package/docs/components/Slider/examples/Slider.md +12 -4
- package/docs/components/Table/examples/Table.md +363 -208
- package/docs/components/Tabs/examples/Tabs.md +1230 -574
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +132 -44
- package/docs/components/Toolbar/examples/Toolbar.md +120 -64
- package/docs/components/TreeView/examples/TreeView.md +12 -4
- package/docs/components/Wizard/examples/Wizard.md +105 -38
- package/docs/demos/AboutModal/examples/AboutModal.md +9 -3
- package/docs/demos/Alert/examples/Alert.md +39 -25
- package/docs/demos/BackToTop/examples/BackToTop.md +11 -5
- package/docs/demos/Banner/examples/Banner.md +12 -4
- package/docs/demos/Button/examples/Button.md +7 -7
- package/docs/demos/Card/examples/Card.md +106 -57
- package/docs/demos/CardView/examples/CardView.md +30 -13
- package/docs/demos/ContextSelector/examples/ContextSelector.md +24 -8
- package/docs/demos/Dashboard/examples/Dashboard.md +43 -28
- package/docs/demos/DataList/examples/DataList.md +255 -149
- package/docs/demos/DescriptionList/examples/DescriptionList.md +21 -7
- package/docs/demos/Drawer/examples/Drawer.md +89 -43
- package/docs/demos/Form/examples/BasicForms.md +141 -59
- package/docs/demos/JumpLinks/examples/JumpLinks.md +222 -109
- package/docs/demos/Masthead/examples/Masthead.md +63 -21
- package/docs/demos/Modal/examples/Modal.md +99 -37
- package/docs/demos/Nav/examples/Nav.md +45 -15
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +58 -43
- package/docs/demos/Page/examples/Page.md +54 -21
- package/docs/demos/Page/examples/Penta.md +9 -6
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +12 -4
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +306 -133
- package/docs/demos/Skeleton/examples/Skeleton.md +6 -2
- package/docs/demos/Table/examples/Table.md +474 -210
- package/docs/demos/Tabs/examples/Tabs.md +60 -22
- package/docs/demos/Toolbar/examples/Toolbar.md +123 -72
- package/docs/demos/Wizard/examples/Wizard.md +179 -110
- package/package.json +1 -1
- package/patternfly-no-globals.css +87 -17
- package/patternfly.css +87 -17
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -76,18 +76,21 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
76
76
|
type="button"
|
|
77
77
|
aria-label="Close success alert: Success alert title"
|
|
78
78
|
>
|
|
79
|
-
<
|
|
79
|
+
<span class="pf-v6-c-button__text">
|
|
80
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
81
|
+
</span>
|
|
80
82
|
</button>
|
|
81
83
|
</div>
|
|
82
84
|
<div class="pf-v6-c-alert__description">
|
|
83
85
|
<p>Success alert description. This should tell the user more information about the alert.</p>
|
|
84
86
|
</div>
|
|
85
87
|
<div class="pf-v6-c-alert__action-group">
|
|
86
|
-
<button
|
|
87
|
-
class="pf-v6-c-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
88
|
+
<button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
|
|
89
|
+
<span class="pf-v6-c-button__text">View details</span>
|
|
90
|
+
</button>
|
|
91
|
+
<button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
|
|
92
|
+
<span class="pf-v6-c-button__text">Ignore</span>
|
|
93
|
+
</button>
|
|
91
94
|
</div>
|
|
92
95
|
</div>
|
|
93
96
|
<br />
|
|
@@ -105,7 +108,9 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
105
108
|
type="button"
|
|
106
109
|
aria-label="Close success alert: Success alert title"
|
|
107
110
|
>
|
|
108
|
-
<
|
|
111
|
+
<span class="pf-v6-c-button__text">
|
|
112
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
113
|
+
</span>
|
|
109
114
|
</button>
|
|
110
115
|
</div>
|
|
111
116
|
<div class="pf-v6-c-alert__description">
|
|
@@ -130,15 +135,18 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
130
135
|
type="button"
|
|
131
136
|
aria-label="Close success alert: Success alert title"
|
|
132
137
|
>
|
|
133
|
-
<
|
|
138
|
+
<span class="pf-v6-c-button__text">
|
|
139
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
140
|
+
</span>
|
|
134
141
|
</button>
|
|
135
142
|
</div>
|
|
136
143
|
<div class="pf-v6-c-alert__action-group">
|
|
137
|
-
<button
|
|
138
|
-
class="pf-v6-c-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
144
|
+
<button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
|
|
145
|
+
<span class="pf-v6-c-button__text">View details</span>
|
|
146
|
+
</button>
|
|
147
|
+
<button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
|
|
148
|
+
<span class="pf-v6-c-button__text">Ignore</span>
|
|
149
|
+
</button>
|
|
142
150
|
</div>
|
|
143
151
|
</div>
|
|
144
152
|
<br />
|
|
@@ -156,7 +164,9 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
156
164
|
type="button"
|
|
157
165
|
aria-label="Close success alert: Success alert title"
|
|
158
166
|
>
|
|
159
|
-
<
|
|
167
|
+
<span class="pf-v6-c-button__text">
|
|
168
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
169
|
+
</span>
|
|
160
170
|
</button>
|
|
161
171
|
</div>
|
|
162
172
|
</div>
|
|
@@ -295,18 +305,21 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
295
305
|
type="button"
|
|
296
306
|
aria-label="Close success alert: Success alert title"
|
|
297
307
|
>
|
|
298
|
-
<
|
|
308
|
+
<span class="pf-v6-c-button__text">
|
|
309
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
310
|
+
</span>
|
|
299
311
|
</button>
|
|
300
312
|
</div>
|
|
301
313
|
<div class="pf-v6-c-alert__description">
|
|
302
314
|
<p>Success alert description. This should tell the user more information about the alert.</p>
|
|
303
315
|
</div>
|
|
304
316
|
<div class="pf-v6-c-alert__action-group">
|
|
305
|
-
<button
|
|
306
|
-
class="pf-v6-c-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
317
|
+
<button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
|
|
318
|
+
<span class="pf-v6-c-button__text">View details</span>
|
|
319
|
+
</button>
|
|
320
|
+
<button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
|
|
321
|
+
<span class="pf-v6-c-button__text">Ignore</span>
|
|
322
|
+
</button>
|
|
310
323
|
</div>
|
|
311
324
|
</div>
|
|
312
325
|
<br />
|
|
@@ -324,7 +337,9 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
324
337
|
type="button"
|
|
325
338
|
aria-label="Close success alert: Success alert title"
|
|
326
339
|
>
|
|
327
|
-
<
|
|
340
|
+
<span class="pf-v6-c-button__text">
|
|
341
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
342
|
+
</span>
|
|
328
343
|
</button>
|
|
329
344
|
</div>
|
|
330
345
|
<div class="pf-v6-c-alert__description">
|
|
@@ -349,15 +364,18 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
349
364
|
type="button"
|
|
350
365
|
aria-label="Close success alert: Success alert title"
|
|
351
366
|
>
|
|
352
|
-
<
|
|
367
|
+
<span class="pf-v6-c-button__text">
|
|
368
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
369
|
+
</span>
|
|
353
370
|
</button>
|
|
354
371
|
</div>
|
|
355
372
|
<div class="pf-v6-c-alert__action-group">
|
|
356
|
-
<button
|
|
357
|
-
class="pf-v6-c-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
373
|
+
<button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
|
|
374
|
+
<span class="pf-v6-c-button__text">View details</span>
|
|
375
|
+
</button>
|
|
376
|
+
<button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
|
|
377
|
+
<span class="pf-v6-c-button__text">Ignore</span>
|
|
378
|
+
</button>
|
|
361
379
|
</div>
|
|
362
380
|
</div>
|
|
363
381
|
<br />
|
|
@@ -432,8 +450,10 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
432
450
|
aria-label="Details"
|
|
433
451
|
aria-labelledby="alert-expandable-example-1-title alert-expandable-example-1-toggle"
|
|
434
452
|
>
|
|
435
|
-
<span class="pf-v6-c-
|
|
436
|
-
<
|
|
453
|
+
<span class="pf-v6-c-button__text">
|
|
454
|
+
<span class="pf-v6-c-alert__toggle-icon">
|
|
455
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
456
|
+
</span>
|
|
437
457
|
</span>
|
|
438
458
|
</button>
|
|
439
459
|
</div>
|
|
@@ -450,18 +470,21 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
450
470
|
type="button"
|
|
451
471
|
aria-label="Close success alert: Success alert title"
|
|
452
472
|
>
|
|
453
|
-
<
|
|
473
|
+
<span class="pf-v6-c-button__text">
|
|
474
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
475
|
+
</span>
|
|
454
476
|
</button>
|
|
455
477
|
</div>
|
|
456
478
|
<div class="pf-v6-c-alert__description" hidden>
|
|
457
479
|
<p>Success alert description. This should tell the user more information about the alert.</p>
|
|
458
480
|
</div>
|
|
459
481
|
<div class="pf-v6-c-alert__action-group">
|
|
460
|
-
<button
|
|
461
|
-
class="pf-v6-c-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
482
|
+
<button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
|
|
483
|
+
<span class="pf-v6-c-button__text">View details</span>
|
|
484
|
+
</button>
|
|
485
|
+
<button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
|
|
486
|
+
<span class="pf-v6-c-button__text">Ignore</span>
|
|
487
|
+
</button>
|
|
465
488
|
</div>
|
|
466
489
|
</div>
|
|
467
490
|
<br />
|
|
@@ -478,8 +501,10 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
478
501
|
aria-label="Details"
|
|
479
502
|
aria-labelledby="alert-expandable-example-2-title alert-expandable-example-2-toggle"
|
|
480
503
|
>
|
|
481
|
-
<span class="pf-v6-c-
|
|
482
|
-
<
|
|
504
|
+
<span class="pf-v6-c-button__text">
|
|
505
|
+
<span class="pf-v6-c-alert__toggle-icon">
|
|
506
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
507
|
+
</span>
|
|
483
508
|
</span>
|
|
484
509
|
</button>
|
|
485
510
|
</div>
|
|
@@ -496,18 +521,21 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
496
521
|
type="button"
|
|
497
522
|
aria-label="Close success alert: Success alert title"
|
|
498
523
|
>
|
|
499
|
-
<
|
|
524
|
+
<span class="pf-v6-c-button__text">
|
|
525
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
526
|
+
</span>
|
|
500
527
|
</button>
|
|
501
528
|
</div>
|
|
502
529
|
<div class="pf-v6-c-alert__description">
|
|
503
530
|
<p>Success alert description. This should tell the user more information about the alert.</p>
|
|
504
531
|
</div>
|
|
505
532
|
<div class="pf-v6-c-alert__action-group">
|
|
506
|
-
<button
|
|
507
|
-
class="pf-v6-c-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
533
|
+
<button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
|
|
534
|
+
<span class="pf-v6-c-button__text">View details</span>
|
|
535
|
+
</button>
|
|
536
|
+
<button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
|
|
537
|
+
<span class="pf-v6-c-button__text">Ignore</span>
|
|
538
|
+
</button>
|
|
511
539
|
</div>
|
|
512
540
|
</div>
|
|
513
541
|
<br />
|
|
@@ -524,8 +552,10 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
524
552
|
aria-label="Details"
|
|
525
553
|
aria-labelledby="alert-expandable-example-3-title alert-expandable-example-3-toggle"
|
|
526
554
|
>
|
|
527
|
-
<span class="pf-v6-c-
|
|
528
|
-
<
|
|
555
|
+
<span class="pf-v6-c-button__text">
|
|
556
|
+
<span class="pf-v6-c-alert__toggle-icon">
|
|
557
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
558
|
+
</span>
|
|
529
559
|
</span>
|
|
530
560
|
</button>
|
|
531
561
|
</div>
|
|
@@ -542,18 +572,21 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
542
572
|
type="button"
|
|
543
573
|
aria-label="Close success alert: Success alert title"
|
|
544
574
|
>
|
|
545
|
-
<
|
|
575
|
+
<span class="pf-v6-c-button__text">
|
|
576
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
577
|
+
</span>
|
|
546
578
|
</button>
|
|
547
579
|
</div>
|
|
548
580
|
<div class="pf-v6-c-alert__description" hidden>
|
|
549
581
|
<p>Success alert description. This should tell the user more information about the alert.</p>
|
|
550
582
|
</div>
|
|
551
583
|
<div class="pf-v6-c-alert__action-group">
|
|
552
|
-
<button
|
|
553
|
-
class="pf-v6-c-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
584
|
+
<button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
|
|
585
|
+
<span class="pf-v6-c-button__text">View details</span>
|
|
586
|
+
</button>
|
|
587
|
+
<button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
|
|
588
|
+
<span class="pf-v6-c-button__text">Ignore</span>
|
|
589
|
+
</button>
|
|
557
590
|
</div>
|
|
558
591
|
</div>
|
|
559
592
|
<br />
|
|
@@ -570,8 +603,10 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
570
603
|
aria-label="Details"
|
|
571
604
|
aria-labelledby="alert-expandable-example-4-title alert-expandable-example-4-toggle"
|
|
572
605
|
>
|
|
573
|
-
<span class="pf-v6-c-
|
|
574
|
-
<
|
|
606
|
+
<span class="pf-v6-c-button__text">
|
|
607
|
+
<span class="pf-v6-c-alert__toggle-icon">
|
|
608
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
609
|
+
</span>
|
|
575
610
|
</span>
|
|
576
611
|
</button>
|
|
577
612
|
</div>
|
|
@@ -588,18 +623,21 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
|
|
|
588
623
|
type="button"
|
|
589
624
|
aria-label="Close success alert: Success alert title"
|
|
590
625
|
>
|
|
591
|
-
<
|
|
626
|
+
<span class="pf-v6-c-button__text">
|
|
627
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
628
|
+
</span>
|
|
592
629
|
</button>
|
|
593
630
|
</div>
|
|
594
631
|
<div class="pf-v6-c-alert__description">
|
|
595
632
|
<p>Success alert description. This should tell the user more information about the alert.</p>
|
|
596
633
|
</div>
|
|
597
634
|
<div class="pf-v6-c-alert__action-group">
|
|
598
|
-
<button
|
|
599
|
-
class="pf-v6-c-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
635
|
+
<button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
|
|
636
|
+
<span class="pf-v6-c-button__text">View details</span>
|
|
637
|
+
</button>
|
|
638
|
+
<button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
|
|
639
|
+
<span class="pf-v6-c-button__text">Ignore</span>
|
|
640
|
+
</button>
|
|
603
641
|
</div>
|
|
604
642
|
</div>
|
|
605
643
|
|
|
@@ -697,7 +735,9 @@ For sighted users, interactive elements can be included in this message in one o
|
|
|
697
735
|
type="button"
|
|
698
736
|
aria-label="Close success alert: Success alert title"
|
|
699
737
|
>
|
|
700
|
-
<
|
|
738
|
+
<span class="pf-v6-c-button__text">
|
|
739
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
740
|
+
</span>
|
|
701
741
|
</button>
|
|
702
742
|
</div>
|
|
703
743
|
</div>
|
|
@@ -718,7 +758,9 @@ For sighted users, interactive elements can be included in this message in one o
|
|
|
718
758
|
type="button"
|
|
719
759
|
aria-label="Close success alert: Success alert title"
|
|
720
760
|
>
|
|
721
|
-
<
|
|
761
|
+
<span class="pf-v6-c-button__text">
|
|
762
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
763
|
+
</span>
|
|
722
764
|
</button>
|
|
723
765
|
</div>
|
|
724
766
|
</div>
|
|
@@ -745,7 +787,9 @@ For sighted users, interactive elements can be included in this message in one o
|
|
|
745
787
|
type="button"
|
|
746
788
|
aria-label="Close success alert: Success alert title"
|
|
747
789
|
>
|
|
748
|
-
<
|
|
790
|
+
<span class="pf-v6-c-button__text">
|
|
791
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
792
|
+
</span>
|
|
749
793
|
</button>
|
|
750
794
|
</div>
|
|
751
795
|
</div>
|
|
@@ -11,9 +11,11 @@ cssPrefix: pf-v6-c-back-to-top
|
|
|
11
11
|
```html
|
|
12
12
|
<div class="pf-v6-c-back-to-top">
|
|
13
13
|
<a class="pf-v6-c-button pf-m-primary" href="#">
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
<
|
|
14
|
+
<span class="pf-v6-c-button__text">
|
|
15
|
+
Back to top
|
|
16
|
+
<span class="pf-v6-c-button__icon pf-m-start pf-m-end">
|
|
17
|
+
<i class="fas fa-angle-up" aria-hidden="true"></i>
|
|
18
|
+
</span>
|
|
17
19
|
</span>
|
|
18
20
|
</a>
|
|
19
21
|
</div>
|
|
@@ -69,7 +69,9 @@ Banners can be styled with one of 9 different nonstatus colors. A nonstatus bann
|
|
|
69
69
|
<button
|
|
70
70
|
class="pf-v6-c-button pf-m-inline pf-m-link"
|
|
71
71
|
type="button"
|
|
72
|
-
>
|
|
72
|
+
>
|
|
73
|
+
<span class="pf-v6-c-button__text">inline link button</span>
|
|
74
|
+
</button>
|
|
73
75
|
</div>
|
|
74
76
|
<br />
|
|
75
77
|
<div class="pf-v6-c-banner pf-m-yellow">
|
|
@@ -77,7 +79,9 @@ Banners can be styled with one of 9 different nonstatus colors. A nonstatus bann
|
|
|
77
79
|
<a
|
|
78
80
|
class="pf-v6-c-button pf-m-inline pf-m-link"
|
|
79
81
|
href="https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html#ARIA8-examples"
|
|
80
|
-
>
|
|
82
|
+
>
|
|
83
|
+
<span class="pf-v6-c-button__text">inline link button (anchor)</span>
|
|
84
|
+
</a>
|
|
81
85
|
</div>
|
|
82
86
|
<br />
|
|
83
87
|
<div class="pf-v6-c-banner pf-m-red">
|
|
@@ -86,7 +90,9 @@ Banners can be styled with one of 9 different nonstatus colors. A nonstatus bann
|
|
|
86
90
|
class="pf-v6-c-button pf-m-link pf-m-inline"
|
|
87
91
|
type="button"
|
|
88
92
|
disabled
|
|
89
|
-
>
|
|
93
|
+
>
|
|
94
|
+
<span class="pf-v6-c-button__text">disabled inline link button</span>
|
|
95
|
+
</button>
|
|
90
96
|
</div>
|
|
91
97
|
|
|
92
98
|
```
|