@patternfly/patternfly 6.3.0-prerelease.9 → 6.3.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/assets/images/icon-outlined-star.hbs +3 -0
- package/assets/images/icon-star.hbs +3 -0
- package/base/patternfly-common.css +46 -11
- package/base/patternfly-common.scss +58 -13
- package/components/Accordion/accordion.css +72 -3
- package/components/Accordion/accordion.scss +78 -6
- package/components/Alert/alert-group.css +52 -31
- package/components/Alert/alert-group.scss +77 -46
- package/components/Button/button.css +154 -6
- package/components/Button/button.scss +160 -8
- package/components/DataList/data-list.css +2 -2
- package/components/DataList/data-list.scss +2 -2
- package/components/DualListSelector/dual-list-selector.css +36 -0
- package/components/DualListSelector/dual-list-selector.scss +43 -0
- package/components/ExpandableSection/expandable-section.css +63 -1
- package/components/ExpandableSection/expandable-section.scss +76 -2
- package/components/FileUpload/file-upload.css +3 -3
- package/components/FileUpload/file-upload.scss +3 -3
- package/components/Form/form.css +40 -1
- package/components/Form/form.scss +47 -1
- package/components/FormControl/form-control.css +16 -0
- package/components/FormControl/form-control.scss +9 -0
- package/components/InputGroup/input-group.css +80 -0
- package/components/InputGroup/input-group.scss +95 -0
- package/components/Menu/menu.css +24 -4
- package/components/Menu/menu.scss +20 -5
- package/components/MenuToggle/menu-toggle.css +30 -0
- package/components/MenuToggle/menu-toggle.scss +33 -0
- package/components/Nav/nav.css +22 -8
- package/components/Nav/nav.scss +22 -9
- package/components/Page/page.css +62 -3
- package/components/Page/page.scss +44 -3
- package/components/Progress/progress.css +16 -0
- package/components/Progress/progress.scss +11 -1
- package/components/ProgressStepper/progress-stepper.scss +1 -0
- package/components/Spinner/spinner.css +5 -0
- package/components/Spinner/spinner.scss +6 -0
- package/components/Table/table-grid.css +51 -5
- package/components/Table/table-grid.scss +22 -1
- package/components/Table/table.css +95 -2
- package/components/Table/table.scss +138 -3
- package/components/Tabs/tabs.css +25 -15
- package/components/Tabs/tabs.scss +26 -13
- package/components/TextInputGroup/text-input-group.css +20 -0
- package/components/TextInputGroup/text-input-group.scss +12 -0
- package/components/Timestamp/timestamp.css +4 -0
- package/components/Timestamp/timestamp.scss +7 -0
- package/components/TreeView/tree-view.css +39 -0
- package/components/TreeView/tree-view.scss +42 -2
- package/components/Truncate/truncate.css +1 -0
- package/components/Truncate/truncate.scss +3 -0
- package/components/_index.css +912 -84
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
- package/docs/components/Button/examples/Button.md +148 -5
- package/docs/components/Card/examples/Card.md +8 -8
- package/docs/components/CodeBlock/examples/CodeBlock.md +5 -5
- package/docs/components/DataList/examples/DataList.md +23 -23
- package/docs/components/DualListSelector/examples/DualListSelector.md +534 -16
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +17 -12
- package/docs/components/Form/examples/Form.md +1047 -126
- package/docs/components/Hint/examples/Hint.md +3 -3
- package/docs/components/InlineEdit/examples/InlineEdit.md +2 -2
- package/docs/components/InputGroup/examples/InputGroup.md +5 -1
- package/docs/components/JumpLinks/examples/JumpLinks.md +1 -1
- package/docs/components/Masthead/examples/masthead.md +90 -12
- package/docs/components/Menu/examples/Menu.md +122 -6
- package/docs/components/MenuToggle/examples/MenuToggle.md +90 -51
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +2 -10
- package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
- package/docs/components/Page/examples/Page.md +147 -14
- package/docs/components/Pagination/examples/Pagination.md +12 -12
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
- package/docs/components/Slider/examples/Slider.md +2 -2
- package/docs/components/Spinner/examples/Spinner.md +10 -0
- package/docs/components/Table/examples/Table.md +9428 -6173
- package/docs/components/Tabs/examples/Tabs.md +1214 -6729
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +45 -5
- package/docs/components/Toolbar/examples/Toolbar.md +7 -7
- package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
- package/docs/demos/Alert/examples/Alert.md +66 -9
- package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
- package/docs/demos/Banner/examples/Banner.md +47 -6
- package/docs/demos/Card/examples/Card.md +5 -62
- package/docs/demos/CardView/examples/CardView.md +24 -5
- package/docs/demos/Dashboard/examples/Dashboard.md +24 -5
- package/docs/demos/DataList/examples/DataList.md +100 -24
- package/docs/demos/DescriptionList/examples/DescriptionList.md +66 -47
- package/docs/demos/Drawer/examples/Drawer.md +110 -53
- package/docs/demos/Form/examples/BasicForms.md +12 -12
- package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
- package/docs/demos/Masthead/examples/Masthead.md +170 -18
- package/docs/demos/Modal/examples/Modal.md +132 -18
- package/docs/demos/Nav/examples/Nav.md +111 -16
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +110 -15
- package/docs/demos/Page/examples/Page.md +309 -43
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -103
- package/docs/demos/Skeleton/examples/Skeleton.md +22 -3
- package/docs/demos/Table/examples/Table.md +449 -155
- package/docs/demos/Tabs/examples/Tabs.md +137 -593
- package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
- package/docs/demos/Wizard/examples/Wizard.md +198 -27
- package/package.json +5 -5
- package/patternfly-base-no-globals.css +45 -11
- package/patternfly-base.css +45 -11
- package/patternfly-no-globals.css +957 -95
- package/patternfly.css +957 -95
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/mixins.scss +54 -0
|
@@ -75,7 +75,7 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
75
75
|
|
|
76
76
|
|
|
77
77
|
<button
|
|
78
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
78
|
+
class="pf-v6-c-menu-toggle pf-m-text pf-m-small pf-m-plain"
|
|
79
79
|
type="button"
|
|
80
80
|
aria-expanded="false"
|
|
81
81
|
aria-label="Menu toggle"
|
|
@@ -130,7 +130,7 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
130
130
|
|
|
131
131
|
|
|
132
132
|
<button
|
|
133
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
133
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-primary"
|
|
134
134
|
type="button"
|
|
135
135
|
aria-expanded="true"
|
|
136
136
|
>
|
|
@@ -194,7 +194,7 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
194
194
|
|
|
195
195
|
|
|
196
196
|
<button
|
|
197
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
197
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-secondary"
|
|
198
198
|
type="button"
|
|
199
199
|
aria-expanded="true"
|
|
200
200
|
>
|
|
@@ -238,7 +238,7 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
238
238
|
</button>
|
|
239
239
|
|
|
240
240
|
<button
|
|
241
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
241
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-plain"
|
|
242
242
|
type="button"
|
|
243
243
|
aria-expanded="true"
|
|
244
244
|
aria-label="Actions"
|
|
@@ -266,7 +266,7 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
266
266
|
|
|
267
267
|
```html
|
|
268
268
|
<button
|
|
269
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
269
|
+
class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
|
|
270
270
|
type="button"
|
|
271
271
|
aria-expanded="false"
|
|
272
272
|
aria-label="Menu toggle"
|
|
@@ -281,7 +281,7 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
281
281
|
|
|
282
282
|
|
|
283
283
|
<button
|
|
284
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
284
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-text pf-m-plain"
|
|
285
285
|
type="button"
|
|
286
286
|
aria-expanded="true"
|
|
287
287
|
aria-label="Menu toggle"
|
|
@@ -296,7 +296,7 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
296
296
|
|
|
297
297
|
|
|
298
298
|
<button
|
|
299
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
299
|
+
class="pf-v6-c-menu-toggle pf-m-text pf-m-plain pf-m-disabled"
|
|
300
300
|
type="button"
|
|
301
301
|
aria-expanded="false"
|
|
302
302
|
disabled
|
|
@@ -329,7 +329,7 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
329
329
|
</button>
|
|
330
330
|
|
|
331
331
|
<button
|
|
332
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
332
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-small"
|
|
333
333
|
type="button"
|
|
334
334
|
aria-expanded="true"
|
|
335
335
|
>
|
|
@@ -357,7 +357,7 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
357
357
|
<br />
|
|
358
358
|
<br />
|
|
359
359
|
<button
|
|
360
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
360
|
+
class="pf-v6-c-menu-toggle pf-m-small pf-m-primary"
|
|
361
361
|
type="button"
|
|
362
362
|
aria-expanded="false"
|
|
363
363
|
>
|
|
@@ -370,7 +370,7 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
370
370
|
</button>
|
|
371
371
|
|
|
372
372
|
<button
|
|
373
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
373
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-small pf-m-primary"
|
|
374
374
|
type="button"
|
|
375
375
|
aria-expanded="true"
|
|
376
376
|
>
|
|
@@ -383,7 +383,7 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
383
383
|
</button>
|
|
384
384
|
|
|
385
385
|
<button
|
|
386
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
386
|
+
class="pf-v6-c-menu-toggle pf-m-small pf-m-primary pf-m-disabled"
|
|
387
387
|
type="button"
|
|
388
388
|
aria-expanded="false"
|
|
389
389
|
disabled
|
|
@@ -398,7 +398,7 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
398
398
|
<br />
|
|
399
399
|
<br />
|
|
400
400
|
<button
|
|
401
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
401
|
+
class="pf-v6-c-menu-toggle pf-m-small pf-m-secondary"
|
|
402
402
|
type="button"
|
|
403
403
|
aria-expanded="false"
|
|
404
404
|
>
|
|
@@ -411,7 +411,7 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
411
411
|
</button>
|
|
412
412
|
|
|
413
413
|
<button
|
|
414
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
414
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-small pf-m-secondary"
|
|
415
415
|
type="button"
|
|
416
416
|
aria-expanded="true"
|
|
417
417
|
>
|
|
@@ -424,7 +424,7 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
424
424
|
</button>
|
|
425
425
|
|
|
426
426
|
<button
|
|
427
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
427
|
+
class="pf-v6-c-menu-toggle pf-m-small pf-m-secondary pf-m-disabled"
|
|
428
428
|
type="button"
|
|
429
429
|
aria-expanded="false"
|
|
430
430
|
disabled
|
|
@@ -439,7 +439,7 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
439
439
|
<br />
|
|
440
440
|
<br />
|
|
441
441
|
<button
|
|
442
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
442
|
+
class="pf-v6-c-menu-toggle pf-m-text pf-m-small pf-m-plain"
|
|
443
443
|
type="button"
|
|
444
444
|
aria-expanded="false"
|
|
445
445
|
>
|
|
@@ -452,7 +452,7 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
452
452
|
</button>
|
|
453
453
|
|
|
454
454
|
<button
|
|
455
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
455
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-text pf-m-small pf-m-plain"
|
|
456
456
|
type="button"
|
|
457
457
|
aria-expanded="true"
|
|
458
458
|
>
|
|
@@ -465,7 +465,7 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
465
465
|
</button>
|
|
466
466
|
|
|
467
467
|
<button
|
|
468
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
468
|
+
class="pf-v6-c-menu-toggle pf-m-text pf-m-small pf-m-plain pf-m-disabled"
|
|
469
469
|
type="button"
|
|
470
470
|
aria-expanded="false"
|
|
471
471
|
disabled
|
|
@@ -480,7 +480,7 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
480
480
|
<br />
|
|
481
481
|
<br />
|
|
482
482
|
<button
|
|
483
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
483
|
+
class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
|
|
484
484
|
type="button"
|
|
485
485
|
aria-expanded="false"
|
|
486
486
|
aria-label="Actions"
|
|
@@ -491,7 +491,7 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
491
491
|
</button>
|
|
492
492
|
|
|
493
493
|
<button
|
|
494
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
494
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-small pf-m-plain"
|
|
495
495
|
type="button"
|
|
496
496
|
aria-expanded="true"
|
|
497
497
|
aria-label="Actions"
|
|
@@ -502,7 +502,7 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
502
502
|
</button>
|
|
503
503
|
|
|
504
504
|
<button
|
|
505
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
505
|
+
class="pf-v6-c-menu-toggle pf-m-small pf-m-plain pf-m-disabled"
|
|
506
506
|
type="button"
|
|
507
507
|
aria-expanded="false"
|
|
508
508
|
disabled
|
|
@@ -658,7 +658,7 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
658
658
|
|
|
659
659
|
```html
|
|
660
660
|
<div
|
|
661
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
661
|
+
class="pf-v6-c-menu-toggle pf-m-full-width pf-m-typeahead"
|
|
662
662
|
id="typeahead-example"
|
|
663
663
|
>
|
|
664
664
|
<div class="pf-v6-c-text-input-group pf-m-plain">
|
|
@@ -848,7 +848,7 @@ Shown with default, primary, and secondary styling
|
|
|
848
848
|
<br />
|
|
849
849
|
|
|
850
850
|
<div
|
|
851
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
851
|
+
class="pf-v6-c-menu-toggle pf-m-primary pf-m-split-button"
|
|
852
852
|
id="split-button-checkbox-with-toggle-action-primary-example"
|
|
853
853
|
>
|
|
854
854
|
<button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
|
|
@@ -868,7 +868,7 @@ Shown with default, primary, and secondary styling
|
|
|
868
868
|
</div>
|
|
869
869
|
|
|
870
870
|
<div
|
|
871
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
871
|
+
class="pf-v6-c-menu-toggle pf-m-primary pf-m-expanded pf-m-split-button"
|
|
872
872
|
id="split-button-checkbox-with-toggle-action-primary-expanded-example"
|
|
873
873
|
>
|
|
874
874
|
<button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
|
|
@@ -888,7 +888,7 @@ Shown with default, primary, and secondary styling
|
|
|
888
888
|
</div>
|
|
889
889
|
|
|
890
890
|
<div
|
|
891
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
891
|
+
class="pf-v6-c-menu-toggle pf-m-primary pf-m-split-button pf-m-disabled"
|
|
892
892
|
id="split-button-checkbox-with-toggle-action-primary-disabled-example"
|
|
893
893
|
>
|
|
894
894
|
<button class="pf-v6-c-menu-toggle__button" type="button" disabled>Action</button>
|
|
@@ -912,7 +912,7 @@ Shown with default, primary, and secondary styling
|
|
|
912
912
|
<br />
|
|
913
913
|
|
|
914
914
|
<div
|
|
915
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
915
|
+
class="pf-v6-c-menu-toggle pf-m-secondary pf-m-split-button"
|
|
916
916
|
id="split-button-checkbox-with-toggle-action-secondary-example"
|
|
917
917
|
>
|
|
918
918
|
<button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
|
|
@@ -932,7 +932,7 @@ Shown with default, primary, and secondary styling
|
|
|
932
932
|
</div>
|
|
933
933
|
|
|
934
934
|
<div
|
|
935
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
935
|
+
class="pf-v6-c-menu-toggle pf-m-secondary pf-m-expanded pf-m-split-button"
|
|
936
936
|
id="split-button-checkbox-with-toggle-action-secondary-expanded-example"
|
|
937
937
|
>
|
|
938
938
|
<button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
|
|
@@ -952,7 +952,7 @@ Shown with default, primary, and secondary styling
|
|
|
952
952
|
</div>
|
|
953
953
|
|
|
954
954
|
<div
|
|
955
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
955
|
+
class="pf-v6-c-menu-toggle pf-m-secondary pf-m-split-button pf-m-disabled"
|
|
956
956
|
id="split-button-checkbox-with-toggle-action-secondary-disabled-example"
|
|
957
957
|
>
|
|
958
958
|
<button class="pf-v6-c-menu-toggle__button" type="button" disabled>Action</button>
|
|
@@ -1069,7 +1069,7 @@ Shown with default, primary, and secondary styling
|
|
|
1069
1069
|
<br />
|
|
1070
1070
|
|
|
1071
1071
|
<div
|
|
1072
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
1072
|
+
class="pf-v6-c-menu-toggle pf-m-primary pf-m-split-button"
|
|
1073
1073
|
id="split-button-primary-checkbox-example"
|
|
1074
1074
|
>
|
|
1075
1075
|
<label class="pf-v6-c-check pf-m-standalone">
|
|
@@ -1097,7 +1097,7 @@ Shown with default, primary, and secondary styling
|
|
|
1097
1097
|
</div>
|
|
1098
1098
|
|
|
1099
1099
|
<div
|
|
1100
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
1100
|
+
class="pf-v6-c-menu-toggle pf-m-primary pf-m-expanded pf-m-split-button"
|
|
1101
1101
|
id="split-button--primary-checkbox-expanded-example"
|
|
1102
1102
|
>
|
|
1103
1103
|
<label class="pf-v6-c-check pf-m-standalone">
|
|
@@ -1125,7 +1125,7 @@ Shown with default, primary, and secondary styling
|
|
|
1125
1125
|
</div>
|
|
1126
1126
|
|
|
1127
1127
|
<div
|
|
1128
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
1128
|
+
class="pf-v6-c-menu-toggle pf-m-primary pf-m-split-button pf-m-disabled"
|
|
1129
1129
|
id="split-button--primary-checkbox-disabled-example"
|
|
1130
1130
|
>
|
|
1131
1131
|
<label class="pf-v6-c-check pf-m-standalone">
|
|
@@ -1158,7 +1158,7 @@ Shown with default, primary, and secondary styling
|
|
|
1158
1158
|
<br />
|
|
1159
1159
|
|
|
1160
1160
|
<div
|
|
1161
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
1161
|
+
class="pf-v6-c-menu-toggle pf-m-secondary pf-m-split-button"
|
|
1162
1162
|
id="split-button-secondary-checkbox-example"
|
|
1163
1163
|
>
|
|
1164
1164
|
<label class="pf-v6-c-check pf-m-standalone">
|
|
@@ -1186,7 +1186,7 @@ Shown with default, primary, and secondary styling
|
|
|
1186
1186
|
</div>
|
|
1187
1187
|
|
|
1188
1188
|
<div
|
|
1189
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
1189
|
+
class="pf-v6-c-menu-toggle pf-m-secondary pf-m-expanded pf-m-split-button"
|
|
1190
1190
|
id="split-button-secondary-checkbox-expanded-example"
|
|
1191
1191
|
>
|
|
1192
1192
|
<label class="pf-v6-c-check pf-m-standalone">
|
|
@@ -1214,7 +1214,7 @@ Shown with default, primary, and secondary styling
|
|
|
1214
1214
|
</div>
|
|
1215
1215
|
|
|
1216
1216
|
<div
|
|
1217
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
1217
|
+
class="pf-v6-c-menu-toggle pf-m-secondary pf-m-split-button pf-m-disabled"
|
|
1218
1218
|
id="split-button-secondary-checkbox-disabled-example"
|
|
1219
1219
|
>
|
|
1220
1220
|
<label class="pf-v6-c-check pf-m-standalone">
|
|
@@ -1350,7 +1350,7 @@ Shown with default, primary, and secondary styling
|
|
|
1350
1350
|
<br />
|
|
1351
1351
|
|
|
1352
1352
|
<div
|
|
1353
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
1353
|
+
class="pf-v6-c-menu-toggle pf-m-primary pf-m-split-button"
|
|
1354
1354
|
id="split-button-checkbox-primary-example"
|
|
1355
1355
|
>
|
|
1356
1356
|
<label
|
|
@@ -1381,7 +1381,7 @@ Shown with default, primary, and secondary styling
|
|
|
1381
1381
|
</div>
|
|
1382
1382
|
|
|
1383
1383
|
<div
|
|
1384
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
1384
|
+
class="pf-v6-c-menu-toggle pf-m-primary pf-m-expanded pf-m-split-button"
|
|
1385
1385
|
id="split-button-checkbox-primary-expanded-example"
|
|
1386
1386
|
>
|
|
1387
1387
|
<label
|
|
@@ -1412,7 +1412,7 @@ Shown with default, primary, and secondary styling
|
|
|
1412
1412
|
</div>
|
|
1413
1413
|
|
|
1414
1414
|
<div
|
|
1415
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
1415
|
+
class="pf-v6-c-menu-toggle pf-m-primary pf-m-split-button pf-m-disabled"
|
|
1416
1416
|
id="split-button-checkbox-primary-disabled-example"
|
|
1417
1417
|
>
|
|
1418
1418
|
<label
|
|
@@ -1448,7 +1448,7 @@ Shown with default, primary, and secondary styling
|
|
|
1448
1448
|
<br />
|
|
1449
1449
|
|
|
1450
1450
|
<div
|
|
1451
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
1451
|
+
class="pf-v6-c-menu-toggle pf-m-secondary pf-m-split-button"
|
|
1452
1452
|
id="split-button-checkbox-secondary-example"
|
|
1453
1453
|
>
|
|
1454
1454
|
<label
|
|
@@ -1479,7 +1479,7 @@ Shown with default, primary, and secondary styling
|
|
|
1479
1479
|
</div>
|
|
1480
1480
|
|
|
1481
1481
|
<div
|
|
1482
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
1482
|
+
class="pf-v6-c-menu-toggle pf-m-secondary pf-m-expanded pf-m-split-button"
|
|
1483
1483
|
id="split-button-checkbox-secondary-expanded-example"
|
|
1484
1484
|
>
|
|
1485
1485
|
<label
|
|
@@ -1510,7 +1510,7 @@ Shown with default, primary, and secondary styling
|
|
|
1510
1510
|
</div>
|
|
1511
1511
|
|
|
1512
1512
|
<div
|
|
1513
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
1513
|
+
class="pf-v6-c-menu-toggle pf-m-secondary pf-m-split-button pf-m-disabled"
|
|
1514
1514
|
id="split-button-checkbox-secondary-disabled-example"
|
|
1515
1515
|
>
|
|
1516
1516
|
<label
|
|
@@ -1641,7 +1641,7 @@ Shown with default, primary, and secondary styling
|
|
|
1641
1641
|
<br />
|
|
1642
1642
|
|
|
1643
1643
|
<div
|
|
1644
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
1644
|
+
class="pf-v6-c-menu-toggle pf-m-primary pf-m-split-button"
|
|
1645
1645
|
id="split-button-primary-checkbox-with-toggle-button-text-example"
|
|
1646
1646
|
>
|
|
1647
1647
|
<label class="pf-v6-c-check pf-m-standalone">
|
|
@@ -1669,7 +1669,7 @@ Shown with default, primary, and secondary styling
|
|
|
1669
1669
|
</button>
|
|
1670
1670
|
</div>
|
|
1671
1671
|
<div
|
|
1672
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
1672
|
+
class="pf-v6-c-menu-toggle pf-m-primary pf-m-expanded pf-m-split-button"
|
|
1673
1673
|
id="split-button-primary-checkbox-with-toggle-button-text-expanded-example"
|
|
1674
1674
|
>
|
|
1675
1675
|
<label class="pf-v6-c-check pf-m-standalone">
|
|
@@ -1697,7 +1697,7 @@ Shown with default, primary, and secondary styling
|
|
|
1697
1697
|
</button>
|
|
1698
1698
|
</div>
|
|
1699
1699
|
<div
|
|
1700
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
1700
|
+
class="pf-v6-c-menu-toggle pf-m-primary pf-m-split-button pf-m-disabled"
|
|
1701
1701
|
id="split-button-primary-checkbox-with-toggle-button-text-disabled-example"
|
|
1702
1702
|
>
|
|
1703
1703
|
<label class="pf-v6-c-check pf-m-standalone">
|
|
@@ -1731,7 +1731,7 @@ Shown with default, primary, and secondary styling
|
|
|
1731
1731
|
<br />
|
|
1732
1732
|
|
|
1733
1733
|
<div
|
|
1734
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
1734
|
+
class="pf-v6-c-menu-toggle pf-m-secondary pf-m-split-button"
|
|
1735
1735
|
id="split-button-secondary-checkbox-with-toggle-button-text-example"
|
|
1736
1736
|
>
|
|
1737
1737
|
<label class="pf-v6-c-check pf-m-standalone">
|
|
@@ -1759,7 +1759,7 @@ Shown with default, primary, and secondary styling
|
|
|
1759
1759
|
</button>
|
|
1760
1760
|
</div>
|
|
1761
1761
|
<div
|
|
1762
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
1762
|
+
class="pf-v6-c-menu-toggle pf-m-secondary pf-m-expanded pf-m-split-button"
|
|
1763
1763
|
id="split-button-secondary-checkbox-with-toggle-button-text-expanded-example"
|
|
1764
1764
|
>
|
|
1765
1765
|
<label class="pf-v6-c-check pf-m-standalone">
|
|
@@ -1787,7 +1787,7 @@ Shown with default, primary, and secondary styling
|
|
|
1787
1787
|
</button>
|
|
1788
1788
|
</div>
|
|
1789
1789
|
<div
|
|
1790
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
1790
|
+
class="pf-v6-c-menu-toggle pf-m-secondary pf-m-split-button pf-m-disabled"
|
|
1791
1791
|
id="split-button-secondary-checkbox-with-toggle-button-text-disabled-example"
|
|
1792
1792
|
>
|
|
1793
1793
|
<label class="pf-v6-c-check pf-m-standalone">
|
|
@@ -1925,7 +1925,7 @@ Shown with default, primary, and secondary styling
|
|
|
1925
1925
|
<br />
|
|
1926
1926
|
|
|
1927
1927
|
<div
|
|
1928
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
1928
|
+
class="pf-v6-c-menu-toggle pf-m-primary pf-m-split-button"
|
|
1929
1929
|
id="split-button-primary-checkbox-with-toggle-button-icon-text-example"
|
|
1930
1930
|
>
|
|
1931
1931
|
<label class="pf-v6-c-check pf-m-standalone">
|
|
@@ -1956,7 +1956,7 @@ Shown with default, primary, and secondary styling
|
|
|
1956
1956
|
</button>
|
|
1957
1957
|
</div>
|
|
1958
1958
|
<div
|
|
1959
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
1959
|
+
class="pf-v6-c-menu-toggle pf-m-primary pf-m-expanded pf-m-split-button"
|
|
1960
1960
|
id="split-button-primary-checkbox-with-toggle-button-icon-text-expanded-example"
|
|
1961
1961
|
>
|
|
1962
1962
|
<label class="pf-v6-c-check pf-m-standalone">
|
|
@@ -1987,7 +1987,7 @@ Shown with default, primary, and secondary styling
|
|
|
1987
1987
|
</button>
|
|
1988
1988
|
</div>
|
|
1989
1989
|
<div
|
|
1990
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
1990
|
+
class="pf-v6-c-menu-toggle pf-m-primary pf-m-split-button pf-m-disabled"
|
|
1991
1991
|
id="split-button-primary-checkbox-with-toggle-button-icon-text-disabled-example"
|
|
1992
1992
|
>
|
|
1993
1993
|
<label class="pf-v6-c-check pf-m-standalone">
|
|
@@ -2024,7 +2024,7 @@ Shown with default, primary, and secondary styling
|
|
|
2024
2024
|
<br />
|
|
2025
2025
|
|
|
2026
2026
|
<div
|
|
2027
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
2027
|
+
class="pf-v6-c-menu-toggle pf-m-secondary pf-m-split-button"
|
|
2028
2028
|
id="split-button-secondary-checkbox-with-toggle-button-icon-text-example"
|
|
2029
2029
|
>
|
|
2030
2030
|
<label class="pf-v6-c-check pf-m-standalone">
|
|
@@ -2055,7 +2055,7 @@ Shown with default, primary, and secondary styling
|
|
|
2055
2055
|
</button>
|
|
2056
2056
|
</div>
|
|
2057
2057
|
<div
|
|
2058
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
2058
|
+
class="pf-v6-c-menu-toggle pf-m-secondary pf-m-expanded pf-m-split-button"
|
|
2059
2059
|
id="split-button-secondary-checkbox-with-toggle-button-icon-text-expanded-example"
|
|
2060
2060
|
>
|
|
2061
2061
|
<label class="pf-v6-c-check pf-m-standalone">
|
|
@@ -2086,7 +2086,7 @@ Shown with default, primary, and secondary styling
|
|
|
2086
2086
|
</button>
|
|
2087
2087
|
</div>
|
|
2088
2088
|
<div
|
|
2089
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
2089
|
+
class="pf-v6-c-menu-toggle pf-m-secondary pf-m-split-button pf-m-disabled"
|
|
2090
2090
|
id="split-button-secondary-checkbox-with-toggle-button-icon-text-disabled-example"
|
|
2091
2091
|
>
|
|
2092
2092
|
<label class="pf-v6-c-check pf-m-standalone">
|
|
@@ -2121,6 +2121,45 @@ Shown with default, primary, and secondary styling
|
|
|
2121
2121
|
|
|
2122
2122
|
```
|
|
2123
2123
|
|
|
2124
|
+
### Settings
|
|
2125
|
+
|
|
2126
|
+
```html
|
|
2127
|
+
<button
|
|
2128
|
+
class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
|
|
2129
|
+
type="button"
|
|
2130
|
+
aria-expanded="false"
|
|
2131
|
+
aria-label="Settings"
|
|
2132
|
+
>
|
|
2133
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
2134
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
2135
|
+
</span>
|
|
2136
|
+
</button>
|
|
2137
|
+
|
|
2138
|
+
<button
|
|
2139
|
+
class="pf-v6-c-menu-toggle pf-m-settings pf-m-expanded pf-m-plain"
|
|
2140
|
+
type="button"
|
|
2141
|
+
aria-expanded="true"
|
|
2142
|
+
aria-label="Settings"
|
|
2143
|
+
>
|
|
2144
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
2145
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
2146
|
+
</span>
|
|
2147
|
+
</button>
|
|
2148
|
+
|
|
2149
|
+
<button
|
|
2150
|
+
class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain pf-m-disabled"
|
|
2151
|
+
type="button"
|
|
2152
|
+
aria-expanded="false"
|
|
2153
|
+
disabled
|
|
2154
|
+
aria-label="Settings"
|
|
2155
|
+
>
|
|
2156
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
2157
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
2158
|
+
</span>
|
|
2159
|
+
</button>
|
|
2160
|
+
|
|
2161
|
+
```
|
|
2162
|
+
|
|
2124
2163
|
## Documentation
|
|
2125
2164
|
|
|
2126
2165
|
### Accessibility
|
|
@@ -346,11 +346,7 @@ cssPrefix: pf-v6-c-multiple-file-upload
|
|
|
346
346
|
<div class="pf-v6-c-multiple-file-upload__status">
|
|
347
347
|
<div class="pf-v6-c-expandable-section pf-m-expanded">
|
|
348
348
|
<div class="pf-v6-c-expandable-section__toggle">
|
|
349
|
-
<button
|
|
350
|
-
class="pf-v6-c-button pf-m-link"
|
|
351
|
-
type="button"
|
|
352
|
-
aria-expanded="true"
|
|
353
|
-
>
|
|
349
|
+
<button class="pf-v6-c-button pf-m-link" type="button" aria-expanded>
|
|
354
350
|
<span class="pf-v6-c-button__icon pf-m-start">
|
|
355
351
|
<span class="pf-v6-c-expandable-section__toggle-icon">
|
|
356
352
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
@@ -557,11 +553,7 @@ cssPrefix: pf-v6-c-multiple-file-upload
|
|
|
557
553
|
<div class="pf-v6-c-multiple-file-upload__status">
|
|
558
554
|
<div class="pf-v6-c-expandable-section pf-m-expanded">
|
|
559
555
|
<div class="pf-v6-c-expandable-section__toggle">
|
|
560
|
-
<button
|
|
561
|
-
class="pf-v6-c-button pf-m-link"
|
|
562
|
-
type="button"
|
|
563
|
-
aria-expanded="true"
|
|
564
|
-
>
|
|
556
|
+
<button class="pf-v6-c-button pf-m-link" type="button" aria-expanded>
|
|
565
557
|
<span class="pf-v6-c-button__icon pf-m-start">
|
|
566
558
|
<span class="pf-v6-c-expandable-section__toggle-icon">
|
|
567
559
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
@@ -19,7 +19,7 @@ The overflow menu relies on groups (`.pf-v6-c-overflow-menu__group`) and items (
|
|
|
19
19
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
20
20
|
type="button"
|
|
21
21
|
aria-expanded="false"
|
|
22
|
-
aria-label="
|
|
22
|
+
aria-label="Generic options"
|
|
23
23
|
id="overflow-menu-simple-toggle"
|
|
24
24
|
>
|
|
25
25
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -154,7 +154,7 @@ The action group consists of a primary and secondary action. Any additional acti
|
|
|
154
154
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
155
155
|
type="button"
|
|
156
156
|
aria-expanded="false"
|
|
157
|
-
aria-label="
|
|
157
|
+
aria-label="Additional options in menu toggle"
|
|
158
158
|
id="overflow-menu-simple-additional-options-hidden-toggle"
|
|
159
159
|
>
|
|
160
160
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -232,7 +232,7 @@ The action group consists of a primary and secondary action. Any additional acti
|
|
|
232
232
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
233
233
|
type="button"
|
|
234
234
|
aria-expanded="false"
|
|
235
|
-
aria-label="
|
|
235
|
+
aria-label="Additional options toggle"
|
|
236
236
|
id="overflow-menu-simple-additional-options-visible-toggle"
|
|
237
237
|
>
|
|
238
238
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -264,7 +264,7 @@ The action group consists of a primary and secondary action. Any additional acti
|
|
|
264
264
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
265
265
|
type="button"
|
|
266
266
|
aria-expanded="false"
|
|
267
|
-
aria-label="
|
|
267
|
+
aria-label="menu with additional options"
|
|
268
268
|
id="overflow-menu-persistent-hidden-toggle"
|
|
269
269
|
>
|
|
270
270
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -307,7 +307,7 @@ The action group consists of a primary and secondary action. Any additional acti
|
|
|
307
307
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
308
308
|
type="button"
|
|
309
309
|
aria-expanded="false"
|
|
310
|
-
aria-label="
|
|
310
|
+
aria-label="Persistent options toggle"
|
|
311
311
|
id="overflow-menu-persistent-visible-example-toggle"
|
|
312
312
|
>
|
|
313
313
|
<span class="pf-v6-c-menu-toggle__icon">
|