@patternfly/patternfly 6.3.0 → 6.4.0-prerelease.1
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/README.md +23 -15
- package/base/normalize.scss +4 -0
- package/base/patternfly-variables.css +1172 -1
- package/base/patternfly-variables.scss +10 -0
- package/base/tokens/tokens-charts-dark.scss +1 -1
- package/base/tokens/tokens-charts.scss +1 -1
- package/base/tokens/tokens-dark.scss +13 -1
- package/base/tokens/tokens-default.scss +60 -2
- package/base/tokens/tokens-highcontrast-dark.scss +396 -0
- package/base/tokens/tokens-highcontrast.scss +703 -0
- package/base/tokens/tokens-local.scss +1 -0
- package/base/tokens/tokens-palette.scss +9 -1
- package/components/Accordion/accordion.css +42 -15
- package/components/Accordion/accordion.scss +48 -18
- package/components/Alert/alert-group.css +17 -15
- package/components/Alert/alert-group.scss +22 -18
- package/components/Badge/badge.css +2 -0
- package/components/Badge/badge.scss +2 -0
- package/components/Banner/banner.css +4 -0
- package/components/Banner/banner.scss +4 -0
- package/components/Button/button.css +34 -4
- package/components/Button/button.scss +36 -6
- package/components/CalendarMonth/calendar-month.css +35 -4
- package/components/CalendarMonth/calendar-month.scss +38 -4
- package/components/Card/card.css +7 -4
- package/components/Card/card.scss +7 -4
- package/components/CodeBlock/code-block.css +3 -0
- package/components/CodeBlock/code-block.scss +3 -0
- package/components/CodeEditor/code-editor.css +23 -3
- package/components/CodeEditor/code-editor.scss +28 -5
- package/components/DatePicker/date-picker.css +3 -0
- package/components/DatePicker/date-picker.scss +4 -0
- package/components/Divider/divider.css +2 -0
- package/components/Divider/divider.scss +2 -0
- package/components/Drawer/drawer.css +46 -41
- package/components/Drawer/drawer.scss +45 -36
- package/components/DualListSelector/dual-list-selector.css +21 -4
- package/components/DualListSelector/dual-list-selector.scss +23 -4
- package/components/ExpandableSection/expandable-section.css +6 -2
- package/components/ExpandableSection/expandable-section.scss +7 -3
- package/components/FormControl/form-control.css +6 -7
- package/components/FormControl/form-control.scss +8 -10
- package/components/Label/label.css +20 -11
- package/components/Label/label.scss +21 -11
- package/components/Login/login.css +3 -0
- package/components/Login/login.scss +3 -0
- package/components/Menu/menu.css +18 -0
- package/components/Menu/menu.scss +19 -1
- package/components/MenuToggle/menu-toggle.css +13 -6
- package/components/MenuToggle/menu-toggle.scss +13 -6
- package/components/ModalBox/modal-box.css +3 -0
- package/components/ModalBox/modal-box.scss +3 -0
- package/components/Nav/nav.css +17 -0
- package/components/Nav/nav.scss +20 -0
- package/components/Page/page.css +73 -25
- package/components/Page/page.scss +60 -19
- package/components/Pagination/pagination.css +15 -2
- package/components/Pagination/pagination.scss +15 -2
- package/components/Panel/panel.css +14 -1
- package/components/Panel/panel.scss +14 -1
- package/components/Popover/popover.css +4 -0
- package/components/Popover/popover.scss +4 -0
- package/components/Progress/progress.css +19 -0
- package/components/Progress/progress.scss +22 -0
- package/components/Sidebar/sidebar.css +7 -0
- package/components/Sidebar/sidebar.scss +7 -0
- package/components/SimpleList/simple-list.css +15 -0
- package/components/SimpleList/simple-list.scss +17 -1
- package/components/Slider/slider.css +9 -0
- package/components/Slider/slider.scss +9 -0
- package/components/Switch/switch.css +7 -1
- package/components/Switch/switch.scss +7 -1
- package/components/Table/table.css +41 -1
- package/components/Table/table.scss +48 -2
- package/components/Tabs/tabs.css +18 -7
- package/components/Tabs/tabs.scss +19 -11
- package/components/TextInputGroup/text-input-group.css +7 -0
- package/components/TextInputGroup/text-input-group.scss +8 -1
- package/components/ToggleGroup/toggle-group.css +18 -9
- package/components/ToggleGroup/toggle-group.scss +24 -17
- package/components/Toolbar/toolbar.css +7 -0
- package/components/Toolbar/toolbar.scss +7 -0
- package/components/TreeView/tree-view.css +15 -0
- package/components/TreeView/tree-view.scss +17 -0
- package/components/Wizard/wizard.css +37 -6
- package/components/Wizard/wizard.scss +44 -10
- package/components/_index.css +631 -168
- package/docs/components/Alert/examples/Alert.md +3 -4
- package/docs/components/Button/examples/Button.md +1 -3
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +25 -33
- package/docs/components/CodeBlock/examples/CodeBlock.md +13 -7
- package/docs/components/CodeEditor/examples/CodeEditor.md +20 -6
- package/docs/components/DataList/examples/DataList.md +66 -184
- package/docs/components/DatePicker/examples/DatePicker.md +4 -1
- package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
- package/docs/components/DualListSelector/examples/DualListSelector.md +0 -195
- package/docs/components/EmptyState/examples/EmptyState.md +6 -6
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +92 -18
- package/docs/components/FileUpload/examples/FileUpload.md +4 -3
- package/docs/components/Form/examples/Form.md +19 -18
- package/docs/components/HelperText/examples/HelperText.md +65 -75
- package/docs/components/Hint/examples/Hint.md +3 -3
- package/docs/components/Icon/examples/Icon.md +0 -10
- package/docs/components/InlineEdit/examples/InlineEdit.md +0 -4
- package/docs/components/JumpLinks/examples/JumpLinks.md +164 -77
- package/docs/components/Label/examples/Label.md +2 -2
- package/docs/components/Login/examples/Login.md +42 -37
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +32 -6
- package/docs/components/Pagination/examples/Pagination.md +111 -0
- package/docs/components/Popover/examples/Popover.md +0 -4
- package/docs/components/Progress/examples/Progress.md +223 -210
- package/docs/components/Skeleton/examples/Skeleton.md +21 -7
- package/docs/components/Table/examples/Table.md +947 -1423
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +126 -47
- package/docs/components/Title/examples/Title.md +8 -8
- package/docs/components/Truncate/examples/Truncate.md +8 -6
- package/docs/components/Wizard/examples/Wizard.md +583 -0
- package/docs/demos/Alert/examples/Alert.md +28 -19
- package/docs/demos/Card/examples/Card.md +8 -5
- package/docs/demos/CardView/examples/CardView.md +81 -85
- package/docs/demos/Dashboard/examples/Dashboard.md +10 -22
- package/docs/demos/DataList/examples/DataList.md +528 -168
- package/docs/demos/DescriptionList/examples/DescriptionList.md +13 -3
- package/docs/demos/Drawer/examples/Drawer.md +0 -2
- package/docs/demos/Form/examples/BasicForms.md +93 -62
- package/docs/demos/HelperText/examples/HelperText.md +31 -23
- package/docs/demos/JumpLinks/examples/JumpLinks.md +0 -5
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +4 -4
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +56 -38
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +726 -312
- package/docs/demos/Skeleton/examples/Skeleton.md +3 -1
- package/docs/demos/Table/examples/Table.md +5 -20
- package/docs/demos/Tabs/examples/Tabs.md +2 -1
- package/package.json +12 -7
- package/patternfly-base-no-globals.css +1172 -1
- package/patternfly-base.css +1176 -1
- package/patternfly-no-globals.css +1803 -169
- package/patternfly.css +1838 -200
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -124,7 +124,10 @@ cssPrefix: pf-v6-c-date-picker
|
|
|
124
124
|
<span class="pf-v6-c-helper-text__item-icon">
|
|
125
125
|
<i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
|
|
126
126
|
</span>
|
|
127
|
-
<span class="pf-v6-c-helper-text__item-text">
|
|
127
|
+
<span class="pf-v6-c-helper-text__item-text">
|
|
128
|
+
<span class="pf-v6-screen-reader">Error:</span>
|
|
129
|
+
Invalid date
|
|
130
|
+
</span>
|
|
128
131
|
</div>
|
|
129
132
|
</div>
|
|
130
133
|
</div>
|
|
@@ -7,7 +7,7 @@ cssPrefix: pf-v6-c-description-list
|
|
|
7
7
|
### Default
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
|
-
<dl class="pf-v6-c-description-list">
|
|
10
|
+
<dl class="pf-v6-c-description-list" aria-label="Default example">
|
|
11
11
|
<div class="pf-v6-c-description-list__group">
|
|
12
12
|
<dt class="pf-v6-c-description-list__term">
|
|
13
13
|
<span class="pf-v6-c-description-list__text">Name</span>
|
|
@@ -64,7 +64,7 @@ cssPrefix: pf-v6-c-description-list
|
|
|
64
64
|
### Term help text
|
|
65
65
|
|
|
66
66
|
```html
|
|
67
|
-
<dl class="pf-v6-c-description-list">
|
|
67
|
+
<dl class="pf-v6-c-description-list" aria-label="Term help text example">
|
|
68
68
|
<div class="pf-v6-c-description-list__group">
|
|
69
69
|
<dt class="pf-v6-c-description-list__term">
|
|
70
70
|
<span
|
|
@@ -146,7 +146,10 @@ cssPrefix: pf-v6-c-description-list
|
|
|
146
146
|
### Default, two column
|
|
147
147
|
|
|
148
148
|
```html
|
|
149
|
-
<dl
|
|
149
|
+
<dl
|
|
150
|
+
class="pf-v6-c-description-list pf-m-2-col"
|
|
151
|
+
aria-label="Default, two column example"
|
|
152
|
+
>
|
|
150
153
|
<div class="pf-v6-c-description-list__group">
|
|
151
154
|
<dt class="pf-v6-c-description-list__term">
|
|
152
155
|
<span class="pf-v6-c-description-list__text">Name</span>
|
|
@@ -205,7 +208,10 @@ cssPrefix: pf-v6-c-description-list
|
|
|
205
208
|
### Default, three column on lg breakpoint
|
|
206
209
|
|
|
207
210
|
```html
|
|
208
|
-
<dl
|
|
211
|
+
<dl
|
|
212
|
+
class="pf-v6-c-description-list pf-m-3-col-on-lg"
|
|
213
|
+
aria-label="Default, three column on lg breakpoint example"
|
|
214
|
+
>
|
|
209
215
|
<div class="pf-v6-c-description-list__group">
|
|
210
216
|
<dt class="pf-v6-c-description-list__term">
|
|
211
217
|
<span class="pf-v6-c-description-list__text">Name</span>
|
|
@@ -262,7 +268,10 @@ cssPrefix: pf-v6-c-description-list
|
|
|
262
268
|
### Horizontal
|
|
263
269
|
|
|
264
270
|
```html
|
|
265
|
-
<dl
|
|
271
|
+
<dl
|
|
272
|
+
class="pf-v6-c-description-list pf-m-horizontal"
|
|
273
|
+
aria-label="Horizontal example"
|
|
274
|
+
>
|
|
266
275
|
<div class="pf-v6-c-description-list__group">
|
|
267
276
|
<dt class="pf-v6-c-description-list__term">
|
|
268
277
|
<span class="pf-v6-c-description-list__text">Name</span>
|
|
@@ -319,7 +328,10 @@ cssPrefix: pf-v6-c-description-list
|
|
|
319
328
|
### Horizontal, two column
|
|
320
329
|
|
|
321
330
|
```html
|
|
322
|
-
<dl
|
|
331
|
+
<dl
|
|
332
|
+
class="pf-v6-c-description-list pf-m-horizontal pf-m-2-col"
|
|
333
|
+
aria-label="Horizontal, two column example"
|
|
334
|
+
>
|
|
323
335
|
<div class="pf-v6-c-description-list__group">
|
|
324
336
|
<dt class="pf-v6-c-description-list__term">
|
|
325
337
|
<span class="pf-v6-c-description-list__text">Name</span>
|
|
@@ -376,7 +388,10 @@ cssPrefix: pf-v6-c-description-list
|
|
|
376
388
|
### Horizontal, three column on lg breakpoint
|
|
377
389
|
|
|
378
390
|
```html
|
|
379
|
-
<dl
|
|
391
|
+
<dl
|
|
392
|
+
class="pf-v6-c-description-list pf-m-horizontal pf-m-3-col-on-lg"
|
|
393
|
+
aria-label="Horizontal, three column on lg breakpoint example"
|
|
394
|
+
>
|
|
380
395
|
<div class="pf-v6-c-description-list__group">
|
|
381
396
|
<dt class="pf-v6-c-description-list__term">
|
|
382
397
|
<span class="pf-v6-c-description-list__text">Name</span>
|
|
@@ -433,7 +448,7 @@ cssPrefix: pf-v6-c-description-list
|
|
|
433
448
|
### Compact
|
|
434
449
|
|
|
435
450
|
```html
|
|
436
|
-
<dl class="pf-v6-c-description-list pf-m-compact">
|
|
451
|
+
<dl class="pf-v6-c-description-list pf-m-compact" aria-label="Compact example">
|
|
437
452
|
<div class="pf-v6-c-description-list__group">
|
|
438
453
|
<dt class="pf-v6-c-description-list__term">
|
|
439
454
|
<span class="pf-v6-c-description-list__text">Name</span>
|
|
@@ -490,7 +505,10 @@ cssPrefix: pf-v6-c-description-list
|
|
|
490
505
|
### Compact horizontal
|
|
491
506
|
|
|
492
507
|
```html
|
|
493
|
-
<dl
|
|
508
|
+
<dl
|
|
509
|
+
class="pf-v6-c-description-list pf-m-compact pf-m-horizontal pf-m-2-col"
|
|
510
|
+
aria-label="Compact horizontal example"
|
|
511
|
+
>
|
|
494
512
|
<div class="pf-v6-c-description-list__group">
|
|
495
513
|
<dt class="pf-v6-c-description-list__term">
|
|
496
514
|
<span class="pf-v6-c-description-list__text">Name</span>
|
|
@@ -547,7 +565,10 @@ cssPrefix: pf-v6-c-description-list
|
|
|
547
565
|
### Fluid horizontal
|
|
548
566
|
|
|
549
567
|
```html
|
|
550
|
-
<dl
|
|
568
|
+
<dl
|
|
569
|
+
class="pf-v6-c-description-list pf-m-horizontal pf-m-fluid pf-m-2-col"
|
|
570
|
+
aria-label="Fluid horizontal example"
|
|
571
|
+
>
|
|
551
572
|
<div class="pf-v6-c-description-list__group">
|
|
552
573
|
<dt class="pf-v6-c-description-list__term">
|
|
553
574
|
<span class="pf-v6-c-description-list__text">Name</span>
|
|
@@ -608,6 +629,7 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
608
629
|
```html
|
|
609
630
|
<dl
|
|
610
631
|
class="pf-v6-c-description-list pf-m-fill-columns pf-m-2-col pf-m-3-col-on-lg"
|
|
632
|
+
aria-label="Column fill example"
|
|
611
633
|
>
|
|
612
634
|
<div class="pf-v6-c-description-list__group">
|
|
613
635
|
<dt class="pf-v6-c-description-list__term">
|
|
@@ -669,7 +691,10 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
669
691
|
### Auto-fit basic
|
|
670
692
|
|
|
671
693
|
```html
|
|
672
|
-
<dl
|
|
694
|
+
<dl
|
|
695
|
+
class="pf-v6-c-description-list pf-m-auto-fit"
|
|
696
|
+
aria-label="Auto-fit basic example"
|
|
697
|
+
>
|
|
673
698
|
<div class="pf-v6-c-description-list__group">
|
|
674
699
|
<dt class="pf-v6-c-description-list__term">
|
|
675
700
|
<span class="pf-v6-c-description-list__text">Name</span>
|
|
@@ -728,6 +753,7 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
728
753
|
```html
|
|
729
754
|
<dl
|
|
730
755
|
class="pf-v6-c-description-list pf-m-auto-fit"
|
|
756
|
+
aria-label="Auto-fit, min width modified, grid template columns example"
|
|
731
757
|
style="--pf-v6-c-description-list--GridTemplateColumns--min: 200px;"
|
|
732
758
|
>
|
|
733
759
|
<div class="pf-v6-c-description-list__group">
|
|
@@ -788,6 +814,7 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
788
814
|
```html
|
|
789
815
|
<dl
|
|
790
816
|
class="pf-v6-c-description-list pf-m-auto-fit"
|
|
817
|
+
aria-label="Auto-fit, min width modified, responsive grid template columns example"
|
|
791
818
|
style="--pf-v6-c-description-list--GridTemplateColumns--min-on-md: 100px; --pf-v6-c-description-list--GridTemplateColumns--min-on-lg: 150px; --pf-v6-c-description-list--GridTemplateColumns--min-on-xl: 200px; --pf-v6-c-description-list--GridTemplateColumns--min-on-2xl: 300px;"
|
|
792
819
|
>
|
|
793
820
|
<div class="pf-v6-c-description-list__group">
|
|
@@ -848,7 +875,10 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
848
875
|
### Default, responsive columns
|
|
849
876
|
|
|
850
877
|
```html
|
|
851
|
-
<dl
|
|
878
|
+
<dl
|
|
879
|
+
class="pf-v6-c-description-list pf-m-2-col-on-lg pf-m-3-col-on-xl"
|
|
880
|
+
aria-label="Default, responsive columns example"
|
|
881
|
+
>
|
|
852
882
|
<div class="pf-v6-c-description-list__group">
|
|
853
883
|
<dt class="pf-v6-c-description-list__term">
|
|
854
884
|
<span class="pf-v6-c-description-list__text">Name</span>
|
|
@@ -907,6 +937,7 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
907
937
|
```html
|
|
908
938
|
<dl
|
|
909
939
|
class="pf-v6-c-description-list pf-m-horizontal pf-m-2-col-on-lg pf-m-3-col-on-xl"
|
|
940
|
+
aria-label="Horizontal, responsive columns example"
|
|
910
941
|
>
|
|
911
942
|
<div class="pf-v6-c-description-list__group">
|
|
912
943
|
<dt class="pf-v6-c-description-list__term">
|
|
@@ -966,6 +997,7 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
966
997
|
```html
|
|
967
998
|
<dl
|
|
968
999
|
class="pf-v6-c-description-list pf-m-horizontal pf-m-vertical-on-md pf-m-horizontal-on-lg pf-m-vertical-on-xl pf-m-horizontal-on-2xl"
|
|
1000
|
+
aria-label="Responsive, horizontal, vertical group layout example"
|
|
969
1001
|
>
|
|
970
1002
|
<div class="pf-v6-c-description-list__group">
|
|
971
1003
|
<dt class="pf-v6-c-description-list__term">
|
|
@@ -1025,7 +1057,10 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
1025
1057
|
### Default, auto columns width
|
|
1026
1058
|
|
|
1027
1059
|
```html
|
|
1028
|
-
<dl
|
|
1060
|
+
<dl
|
|
1061
|
+
class="pf-v6-c-description-list pf-m-auto-column-widths pf-m-3-col"
|
|
1062
|
+
aria-label="Default, auto columns width example"
|
|
1063
|
+
>
|
|
1029
1064
|
<div class="pf-v6-c-description-list__group">
|
|
1030
1065
|
<dt class="pf-v6-c-description-list__term">
|
|
1031
1066
|
<span class="pf-v6-c-description-list__text">Name</span>
|
|
@@ -1084,6 +1119,7 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
1084
1119
|
```html
|
|
1085
1120
|
<dl
|
|
1086
1121
|
class="pf-v6-c-description-list pf-m-horizontal pf-m-auto-column-widths pf-m-2-col-on-lg"
|
|
1122
|
+
aria-label="Horizontal, auto column width example"
|
|
1087
1123
|
>
|
|
1088
1124
|
<div class="pf-v6-c-description-list__group">
|
|
1089
1125
|
<dt class="pf-v6-c-description-list__term">
|
|
@@ -1143,7 +1179,10 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
1143
1179
|
### Default, inline grid
|
|
1144
1180
|
|
|
1145
1181
|
```html
|
|
1146
|
-
<dl
|
|
1182
|
+
<dl
|
|
1183
|
+
class="pf-v6-c-description-list pf-m-3-col pf-m-inline-grid"
|
|
1184
|
+
aria-label="Default, inline grid example"
|
|
1185
|
+
>
|
|
1147
1186
|
<div class="pf-v6-c-description-list__group">
|
|
1148
1187
|
<dt class="pf-v6-c-description-list__term">
|
|
1149
1188
|
<span class="pf-v6-c-description-list__text">Name</span>
|
|
@@ -1200,7 +1239,10 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
1200
1239
|
### Display variant
|
|
1201
1240
|
|
|
1202
1241
|
```html
|
|
1203
|
-
<dl
|
|
1242
|
+
<dl
|
|
1243
|
+
class="pf-v6-c-description-list pf-m-display-lg pf-m-2-col-on-lg"
|
|
1244
|
+
aria-label="Display variant example"
|
|
1245
|
+
>
|
|
1204
1246
|
<div class="pf-v6-c-description-list__group">
|
|
1205
1247
|
<dt class="pf-v6-c-description-list__term">
|
|
1206
1248
|
<span class="pf-v6-c-description-list__text">Name</span>
|
|
@@ -1261,7 +1303,10 @@ Cards can be used as description list group wrappers. Using cards in this way ap
|
|
|
1261
1303
|
### Description list group wrapper as card
|
|
1262
1304
|
|
|
1263
1305
|
```html
|
|
1264
|
-
<dl
|
|
1306
|
+
<dl
|
|
1307
|
+
class="pf-v6-c-description-list pf-m-2-col-on-lg"
|
|
1308
|
+
aria-label="Description list group wrapper as card example"
|
|
1309
|
+
>
|
|
1265
1310
|
<div class="pf-v6-c-card">
|
|
1266
1311
|
<dt class="pf-v6-c-description-list__term">
|
|
1267
1312
|
<span class="pf-v6-c-description-list__text">Name</span>
|
|
@@ -1318,7 +1363,10 @@ Cards can be used as description list group wrappers. Using cards in this way ap
|
|
|
1318
1363
|
### Display lg and card variant
|
|
1319
1364
|
|
|
1320
1365
|
```html
|
|
1321
|
-
<dl
|
|
1366
|
+
<dl
|
|
1367
|
+
class="pf-v6-c-description-list pf-m-display-lg pf-m-2-col-on-lg"
|
|
1368
|
+
aria-label="Display lg and card variant example"
|
|
1369
|
+
>
|
|
1322
1370
|
<div class="pf-v6-c-card">
|
|
1323
1371
|
<dt class="pf-v6-c-description-list__term">
|
|
1324
1372
|
<span class="pf-v6-c-description-list__text">Name</span>
|
|
@@ -1375,7 +1423,10 @@ Cards can be used as description list group wrappers. Using cards in this way ap
|
|
|
1375
1423
|
### Display 2xl and card variant
|
|
1376
1424
|
|
|
1377
1425
|
```html
|
|
1378
|
-
<dl
|
|
1426
|
+
<dl
|
|
1427
|
+
class="pf-v6-c-description-list pf-m-display-2xl pf-m-2-col-on-lg"
|
|
1428
|
+
aria-label="Display 2xl and card variant example"
|
|
1429
|
+
>
|
|
1379
1430
|
<div class="pf-v6-c-card">
|
|
1380
1431
|
<dt class="pf-v6-c-description-list__term">
|
|
1381
1432
|
<span class="pf-v6-c-description-list__text">Name</span>
|
|
@@ -1432,7 +1483,10 @@ Cards can be used as description list group wrappers. Using cards in this way ap
|
|
|
1432
1483
|
### Display and card variant, three column on lg breakpoint
|
|
1433
1484
|
|
|
1434
1485
|
```html
|
|
1435
|
-
<dl
|
|
1486
|
+
<dl
|
|
1487
|
+
class="pf-v6-c-description-list pf-m-3-col-on-lg pf-m-display-lg"
|
|
1488
|
+
aria-label="Display and card variant, three column on lg breakpoint example"
|
|
1489
|
+
>
|
|
1436
1490
|
<div class="pf-v6-c-card">
|
|
1437
1491
|
<dt class="pf-v6-c-description-list__term">
|
|
1438
1492
|
<span class="pf-v6-c-description-list__text">Name</span>
|
|
@@ -1468,6 +1522,7 @@ Cards can be used as description list group wrappers. Using cards in this way ap
|
|
|
1468
1522
|
```html
|
|
1469
1523
|
<dl
|
|
1470
1524
|
class="pf-v6-c-description-list pf-m-2-col-on-lg pf-m-display-lg pf-m-horizontal"
|
|
1525
|
+
aria-label="Display and card variant, horizontal, modified term width example"
|
|
1471
1526
|
style="--pf-v6-c-description-list__term--width: 10ch;"
|
|
1472
1527
|
>
|
|
1473
1528
|
<div class="pf-v6-c-card">
|
|
@@ -1504,7 +1559,8 @@ Cards can be used as description list group wrappers. Using cards in this way ap
|
|
|
1504
1559
|
|
|
1505
1560
|
### Horizontal 2 col auto term width
|
|
1506
1561
|
```hbs
|
|
1507
|
-
{{> description-list__example
|
|
1562
|
+
{{> description-list__example
|
|
1563
|
+
description-list--aria-label="Horizontal 2 column auto term width example" description-list--modifier="pf-m-horizontal pf-m-auto-term-widths pf-m-2-col"}}
|
|
1508
1564
|
``` -->
|
|
1509
1565
|
|
|
1510
1566
|
## With icons
|
|
@@ -1512,7 +1568,7 @@ Cards can be used as description list group wrappers. Using cards in this way ap
|
|
|
1512
1568
|
### Icons on terms
|
|
1513
1569
|
|
|
1514
1570
|
```html
|
|
1515
|
-
<dl class="pf-v6-c-description-list">
|
|
1571
|
+
<dl class="pf-v6-c-description-list" aria-label="Icons on terms example">
|
|
1516
1572
|
<div class="pf-v6-c-description-list__group">
|
|
1517
1573
|
<dt class="pf-v6-c-description-list__term">
|
|
1518
1574
|
<span class="pf-v6-c-description-list__term-icon">
|
|
@@ -1589,7 +1645,7 @@ Cards can be used as description list group wrappers. Using cards in this way ap
|
|
|
1589
1645
|
|
|
1590
1646
|
| Attribute | Applied to | Outcome |
|
|
1591
1647
|
| -- | -- | -- |
|
|
1592
|
-
| `
|
|
1648
|
+
| `aria-label` | `.pf-v6-c-description-list` | Provides an accessible title for the description list. **Required** |
|
|
1593
1649
|
| `tabindex="0"` | `.pf-v6-c-description-list__text.pf-m-help-text` | Inserts the `.pf-v6-c-description-list__text` into the tab order of the page so that it is focusable. **Required when the element is clickable** |
|
|
1594
1650
|
|
|
1595
1651
|
### Usage
|