@patternfly/patternfly 6.0.0-alpha.90 → 6.0.0-alpha.92
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/base/patternfly-common.css +10 -10
- package/base/patternfly-globals.css +3 -3
- package/base/patternfly-icons.css +1 -1
- package/base/patternfly-themes.css +53 -53
- package/base/patternfly-variables.css +236 -245
- package/base/tokens/_tokens-font.scss +0 -11
- package/components/AboutModalBox/about-modal-box.css +102 -102
- package/components/Accordion/accordion.css +118 -118
- package/components/ActionList/action-list.css +16 -16
- package/components/Alert/alert-group.css +50 -50
- package/components/Alert/alert.css +161 -161
- package/components/AppLauncher/app-launcher.css +167 -167
- package/components/Avatar/avatar.css +116 -116
- package/components/BackToTop/back-to-top.css +21 -21
- package/components/Backdrop/backdrop.css +9 -9
- package/components/BackgroundImage/background-image.css +15 -15
- package/components/Badge/badge.css +35 -35
- package/components/Banner/banner.css +114 -114
- package/components/Brand/brand.css +28 -28
- package/components/Breadcrumb/breadcrumb.css +62 -62
- package/components/Button/button.css +514 -514
- package/components/CalendarMonth/calendar-month.css +144 -144
- package/components/Card/card.css +230 -230
- package/components/Check/check.css +43 -43
- package/components/Chip/chip-group.css +60 -60
- package/components/Chip/chip.css +83 -83
- package/components/ClipboardCopy/clipboard-copy.css +71 -71
- package/components/CodeBlock/code-block.css +35 -35
- package/components/CodeEditor/code-editor.css +121 -121
- package/components/Content/content.css +216 -216
- package/components/ContextSelector/context-selector.css +251 -251
- package/components/DataList/data-list-grid.css +182 -182
- package/components/DataList/data-list.css +468 -468
- package/components/DatePicker/date-picker.css +35 -35
- package/components/DescriptionList/description-list-order.css +90 -90
- package/components/DescriptionList/description-list.css +193 -193
- package/components/Divider/divider.css +143 -143
- package/components/DragDrop/drag-drop.css +46 -46
- package/components/Drawer/drawer.css +474 -474
- package/components/Dropdown/dropdown.css +457 -457
- package/components/DualListSelector/dual-list-selector.css +199 -199
- package/components/EmptyState/empty-state.css +104 -104
- package/components/ExpandableSection/expandable-section.css +113 -113
- package/components/FileUpload/file-upload.css +32 -32
- package/components/Form/form.css +281 -281
- package/components/FormControl/form-control.css +197 -197
- package/components/HelperText/helper-text.css +51 -51
- package/components/Hint/hint.css +46 -46
- package/components/Icon/icon.css +218 -218
- package/components/InlineEdit/inline-edit.css +43 -43
- package/components/InputGroup/input-group.css +52 -52
- package/components/JumpLinks/jump-links.css +183 -183
- package/components/Label/label-group.css +86 -86
- package/components/Label/label.css +438 -438
- package/components/List/list.css +53 -53
- package/components/LogViewer/log-viewer.css +138 -138
- package/components/Login/login.css +139 -139
- package/components/Masthead/masthead.css +319 -319
- package/components/Menu/menu.css +415 -415
- package/components/MenuToggle/menu-toggle.css +275 -275
- package/components/ModalBox/modal-box.css +121 -121
- package/components/MultipleFileUpload/multiple-file-upload.css +163 -163
- package/components/Nav/nav.css +225 -225
- package/components/NotificationBadge/notification-badge.css +66 -66
- package/components/NotificationDrawer/notification-drawer.css +179 -179
- package/components/NumberInput/number-input.css +20 -20
- package/components/OptionsMenu/options-menu.css +190 -190
- package/components/OverflowMenu/overflow-menu.css +19 -19
- package/components/Page/page.css +598 -598
- package/components/Pagination/pagination.css +220 -220
- package/components/Panel/panel.css +72 -72
- package/components/Popover/popover.css +148 -148
- package/components/Progress/progress.css +80 -80
- package/components/ProgressStepper/progress-stepper.css +514 -514
- package/components/Radio/radio.css +44 -44
- package/components/Select/select.css +423 -423
- package/components/Sidebar/sidebar.css +166 -166
- package/components/SimpleList/simple-list.css +53 -53
- package/components/Skeleton/skeleton.css +112 -112
- package/components/SkipToContent/skip-to-content.css +8 -8
- package/components/Slider/slider.css +144 -144
- package/components/Spinner/spinner.css +36 -36
- package/components/Switch/switch.css +89 -89
- package/components/TabContent/tab-content.css +34 -34
- package/components/Table/table-grid.css +911 -911
- package/components/Table/table-scrollable.css +38 -38
- package/components/Table/table-tree-view.css +497 -497
- package/components/Table/table.css +660 -660
- package/components/Tabs/tabs.css +616 -616
- package/components/TextInputGroup/text-input-group.css +88 -88
- package/components/Tile/tile.css +68 -68
- package/components/Timestamp/timestamp.css +29 -29
- package/components/Title/title.css +87 -87
- package/components/ToggleGroup/toggle-group.css +86 -86
- package/components/Toolbar/toolbar.css +2279 -2279
- package/components/Tooltip/tooltip.css +85 -85
- package/components/TreeView/tree-view.css +363 -363
- package/components/Truncate/truncate.css +15 -15
- package/components/Wizard/wizard.css +272 -272
- package/docs/components/AboutModalBox/examples/AboutModalBox.md +11 -11
- package/docs/components/Accordion/examples/Accordion.md +188 -188
- package/docs/components/ActionList/examples/ActionList.md +55 -55
- package/docs/components/Alert/examples/Alert.md +222 -222
- package/docs/components/AppLauncher/deprecated/application-launcher.md +146 -146
- package/docs/components/Avatar/examples/Avatar.md +6 -6
- package/docs/components/BackToTop/examples/BackToTop.md +3 -3
- package/docs/components/Backdrop/examples/Backdrop.md +1 -1
- package/docs/components/BackgroundImage/examples/BackgroundImage.md +2 -2
- package/docs/components/Badge/examples/Badge.md +17 -17
- package/docs/components/Banner/examples/Banner.md +42 -42
- package/docs/components/Brand/examples/Brand.md +4 -4
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +90 -90
- package/docs/components/Button/examples/Button.md +364 -364
- package/docs/components/CalendarMonth/examples/CalendarMonth.md +436 -436
- package/docs/components/Card/examples/Card.md +515 -515
- package/docs/components/Check/examples/Check.md +37 -37
- package/docs/components/Chip/examples/Chip.md +216 -216
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +82 -82
- package/docs/components/CodeBlock/examples/CodeBlock.md +39 -39
- package/docs/components/CodeEditor/examples/CodeEditor.md +85 -85
- package/docs/components/Content/examples/Content.md +1 -1
- package/docs/components/ContextSelector/deprecated/context-selector.md +160 -160
- package/docs/components/DataList/examples/DataList.md +666 -666
- package/docs/components/DatePicker/examples/DatePicker.md +54 -54
- package/docs/components/DescriptionList/examples/DescriptionList.md +737 -737
- package/docs/components/Divider/examples/Divider.md +18 -18
- package/docs/components/DragDrop/examples/DragDrop.md +27 -27
- package/docs/components/Drawer/examples/Drawer.md +225 -225
- package/docs/components/Dropdown/deprecated/Dropdown.md +541 -541
- package/docs/components/DualListSelector/examples/DualListSelector.md +1012 -1012
- package/docs/components/EmptyState/examples/EmptyState.md +100 -100
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -47
- package/docs/components/FileUpload/examples/FileUpload.md +94 -94
- package/docs/components/Form/examples/Form.md +226 -226
- package/docs/components/FormControl/examples/FormControl.md +65 -65
- package/docs/components/HelperText/examples/HelperText.md +72 -72
- package/docs/components/Hint/examples/Hint.md +44 -44
- package/docs/components/Icon/examples/Icon.md +85 -85
- package/docs/components/InlineEdit/examples/InlineEdit.md +209 -209
- package/docs/components/InputGroup/examples/InputGroup.md +73 -73
- package/docs/components/JumpLinks/examples/JumpLinks.md +285 -285
- package/docs/components/Label/examples/Label.md +1717 -1717
- package/docs/components/List/examples/List.md +30 -30
- package/docs/components/LogViewer/examples/LogViewer.md +1785 -1785
- package/docs/components/Login/examples/Login.md +287 -287
- package/docs/components/Masthead/examples/masthead.md +39 -39
- package/docs/components/Menu/examples/Menu.md +2377 -2377
- package/docs/components/MenuToggle/examples/MenuToggle.md +242 -242
- package/docs/components/ModalBox/examples/ModalBox.md +119 -119
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +192 -192
- package/docs/components/Nav/examples/Navigation.md +856 -856
- package/docs/components/NotificationBadge/examples/NotificationBadge.md +42 -42
- package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +659 -659
- package/docs/components/NumberInput/examples/NumberInput.md +127 -127
- package/docs/components/OptionsMenu/deprecated/options-menu.md +178 -178
- package/docs/components/OverflowMenu/examples/overflow-menu.md +97 -97
- package/docs/components/Page/deprecated/PageHeader.md +85 -85
- package/docs/components/Page/examples/Page.md +90 -90
- package/docs/components/Pagination/examples/Pagination.md +285 -285
- package/docs/components/Panel/examples/Panel.md +38 -38
- package/docs/components/Popover/examples/Popover.md +169 -169
- package/docs/components/Progress/examples/Progress.md +145 -145
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +295 -295
- package/docs/components/Radio/examples/Radio.md +33 -33
- package/docs/components/Select/deprecated/Select.md +736 -736
- package/docs/components/Sidebar/examples/Sidebar.md +65 -65
- package/docs/components/SimpleList/examples/SimpleList.md +39 -39
- package/docs/components/Skeleton/examples/Skeleton.md +29 -29
- package/docs/components/SkipToContent/examples/SkipToContent.md +3 -3
- package/docs/components/Slider/examples/Slider.md +213 -213
- package/docs/components/Spinner/examples/Spinner.md +14 -14
- package/docs/components/Switch/examples/Switch.md +58 -58
- package/docs/components/TabContent/examples/TabContent.md +24 -24
- package/docs/components/Table/examples/Table.md +6982 -6982
- package/docs/components/Tabs/examples/Tabs.md +2114 -2114
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +373 -373
- package/docs/components/Tile/examples/Tile.md +131 -131
- package/docs/components/Timestamp/examples/Timestamp.md +10 -10
- package/docs/components/Title/examples/Title.md +12 -12
- package/docs/components/ToggleGroup/examples/toggle-group.md +116 -116
- package/docs/components/Toolbar/examples/Toolbar.md +611 -611
- package/docs/components/Tooltip/examples/Tooltip.md +27 -27
- package/docs/components/TreeView/examples/TreeView.md +1166 -1166
- package/docs/components/Truncate/examples/Truncate.md +7 -7
- package/docs/components/Wizard/examples/Wizard.md +522 -522
- package/docs/demos/AboutModal/examples/AboutModal.md +106 -106
- package/docs/demos/Alert/examples/Alert.md +391 -391
- package/docs/demos/BackToTop/examples/BackToTop.md +175 -175
- package/docs/demos/Banner/examples/Banner.md +364 -364
- package/docs/demos/Button/examples/Button.md +50 -50
- package/docs/demos/Card/examples/Card.md +1054 -1054
- package/docs/demos/CardView/examples/CardView.md +378 -378
- package/docs/demos/ContextSelector/examples/ContextSelector.md +449 -449
- package/docs/demos/Dashboard/examples/Dashboard.md +541 -541
- package/docs/demos/DataList/examples/DataList.md +1148 -1148
- package/docs/demos/DescriptionList/examples/DescriptionList.md +544 -544
- package/docs/demos/Drawer/examples/Drawer.md +531 -531
- package/docs/demos/Form/examples/BasicForms.md +444 -444
- package/docs/demos/HelperText/examples/HelperText.md +51 -51
- package/docs/demos/JumpLinks/examples/JumpLinks.md +596 -596
- package/docs/demos/Masthead/examples/Masthead.md +763 -763
- package/docs/demos/Modal/examples/Modal.md +645 -645
- package/docs/demos/Nav/examples/Nav.md +649 -649
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1570 -1570
- package/docs/demos/Page/examples/Page.md +1330 -1330
- package/docs/demos/Page/examples/Penta.md +217 -217
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +23 -23
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +108 -108
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1890 -1890
- package/docs/demos/Skeleton/examples/Skeleton.md +176 -176
- package/docs/demos/Table/examples/Table.md +4580 -4580
- package/docs/demos/Tabs/examples/Tabs.md +1040 -1040
- package/docs/demos/Toolbar/examples/Toolbar.md +961 -961
- package/docs/demos/Wizard/examples/Wizard.md +1574 -1574
- package/docs/layouts/Bullseye/examples/Bullseye.md +2 -2
- package/docs/layouts/Flex/examples/Flex.md +290 -290
- package/docs/layouts/Gallery/examples/Gallery.md +48 -48
- package/docs/layouts/Grid/examples/Grid.md +121 -121
- package/docs/layouts/Level/examples/Level.md +11 -11
- package/docs/layouts/Split/examples/Split.md +23 -23
- package/docs/layouts/Stack/examples/Stack.md +8 -8
- package/docs/utilities/Accessibility/examples/Accessibility.md +3 -3
- package/docs/utilities/Alignment/examples/Alignment.md +4 -4
- package/docs/utilities/Display/examples/Display.md +16 -16
- package/docs/utilities/Flex/examples/Flex.md +53 -53
- package/docs/utilities/Float/examples/Float.md +2 -2
- package/docs/utilities/Spacing/examples/Spacing.md +16 -16
- package/layouts/Bullseye/bullseye.css +3 -3
- package/layouts/Flex/flex.css +1276 -1276
- package/layouts/Gallery/gallery.css +34 -34
- package/layouts/Grid/grid.css +531 -531
- package/layouts/Level/level.css +4 -4
- package/layouts/Split/split.css +6 -6
- package/layouts/Stack/stack.css +5 -5
- package/package.json +5 -5
- package/patternfly-addons.css +2989 -2989
- package/patternfly-base-no-globals-theme-dark-unversioned.css +269 -278
- package/patternfly-base-no-globals.css +284 -293
- package/patternfly-base-theme-dark-unversioned.css +271 -280
- package/patternfly-base.css +286 -295
- package/patternfly-charts-theme-dark-unversioned.css +66 -66
- package/patternfly-charts-theme-dark.css +66 -66
- package/patternfly-charts.css +320 -320
- package/patternfly-no-globals.css +20217 -20226
- package/patternfly-theme-dark-unversioned.css +20209 -20218
- package/patternfly.css +20219 -20228
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/_init.scss +1 -1
- package/utilities/Accessibility/accessibility.css +18 -18
- package/utilities/Alignment/alignment.css +24 -24
- package/utilities/BackgroundColor/BackgroundColor.css +252 -252
- package/utilities/BoxShadow/box-shadow.css +42 -42
- package/utilities/Display/display.css +54 -54
- package/utilities/Flex/flex.css +228 -228
- package/utilities/Float/float.css +12 -12
- package/utilities/Sizing/sizing.css +216 -216
- package/utilities/Spacing/spacing.css +1512 -1512
- package/utilities/Text/text.css +631 -631
|
@@ -42,22 +42,22 @@ Several components in the following examples do not include functional and/or ac
|
|
|
42
42
|
### Simple
|
|
43
43
|
|
|
44
44
|
```html
|
|
45
|
-
<div class="pf-
|
|
46
|
-
<div class="pf-
|
|
47
|
-
<div class="pf-
|
|
48
|
-
<div class="pf-
|
|
49
|
-
<div class="pf-
|
|
50
|
-
<div class="pf-
|
|
51
|
-
<hr class="pf-
|
|
52
|
-
<div class="pf-
|
|
53
|
-
<div class="pf-
|
|
54
|
-
<div class="pf-
|
|
55
|
-
<div class="pf-
|
|
45
|
+
<div class="pf-v6-c-toolbar" id="toolbar-simple-example">
|
|
46
|
+
<div class="pf-v6-c-toolbar__content">
|
|
47
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
48
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
49
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
50
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
51
|
+
<hr class="pf-v6-c-divider pf-m-vertical" />
|
|
52
|
+
<div class="pf-v6-c-toolbar__group">
|
|
53
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
54
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
55
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
56
56
|
</div>
|
|
57
|
-
<hr class="pf-
|
|
58
|
-
<div class="pf-
|
|
59
|
-
<div class="pf-
|
|
60
|
-
<div class="pf-
|
|
57
|
+
<hr class="pf-v6-c-divider pf-m-vertical" />
|
|
58
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
59
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
60
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
61
61
|
</div>
|
|
62
62
|
</div>
|
|
63
63
|
</div>
|
|
@@ -74,19 +74,19 @@ Several components in the following examples do not include functional and/or ac
|
|
|
74
74
|
### Adjusted group column gap
|
|
75
75
|
|
|
76
76
|
```html
|
|
77
|
-
<div class="pf-
|
|
78
|
-
<div class="pf-
|
|
79
|
-
<div class="pf-
|
|
80
|
-
<div class="pf-
|
|
81
|
-
<div class="pf-
|
|
82
|
-
<div class="pf-
|
|
77
|
+
<div class="pf-v6-c-toolbar" id="toolbar-group-spacer-example">
|
|
78
|
+
<div class="pf-v6-c-toolbar__content">
|
|
79
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
80
|
+
<div class="pf-v6-c-toolbar__group pf-m-column-gap-lg">
|
|
81
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
82
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
83
83
|
</div>
|
|
84
|
-
<hr class="pf-
|
|
84
|
+
<hr class="pf-v6-c-divider pf-m-vertical" />
|
|
85
85
|
<div
|
|
86
|
-
class="pf-
|
|
86
|
+
class="pf-v6-c-toolbar__group pf-m-column-gap-none pf-m-column-gap-sm"
|
|
87
87
|
>
|
|
88
|
-
<div class="pf-
|
|
89
|
-
<div class="pf-
|
|
88
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
89
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
90
90
|
</div>
|
|
91
91
|
</div>
|
|
92
92
|
</div>
|
|
@@ -97,16 +97,16 @@ Several components in the following examples do not include functional and/or ac
|
|
|
97
97
|
### Insets
|
|
98
98
|
|
|
99
99
|
```html
|
|
100
|
-
<div class="pf-
|
|
101
|
-
<div class="pf-
|
|
102
|
-
<div class="pf-
|
|
103
|
-
<div class="pf-
|
|
104
|
-
<div class="pf-
|
|
105
|
-
<div class="pf-
|
|
100
|
+
<div class="pf-v6-c-toolbar pf-m-inset-xl" id="toolbar-inset-example">
|
|
101
|
+
<div class="pf-v6-c-toolbar__content">
|
|
102
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
103
|
+
<div class="pf-v6-c-toolbar__group">
|
|
104
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
105
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
106
106
|
</div>
|
|
107
|
-
<hr class="pf-
|
|
108
|
-
<div class="pf-
|
|
109
|
-
<div class="pf-
|
|
107
|
+
<hr class="pf-v6-c-divider pf-m-vertical" />
|
|
108
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
109
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
110
110
|
</div>
|
|
111
111
|
</div>
|
|
112
112
|
</div>
|
|
@@ -116,16 +116,16 @@ Several components in the following examples do not include functional and/or ac
|
|
|
116
116
|
### Page insets
|
|
117
117
|
|
|
118
118
|
```html
|
|
119
|
-
<div class="pf-
|
|
120
|
-
<div class="pf-
|
|
121
|
-
<div class="pf-
|
|
122
|
-
<div class="pf-
|
|
123
|
-
<div class="pf-
|
|
124
|
-
<div class="pf-
|
|
119
|
+
<div class="pf-v6-c-toolbar pf-m-page-insets" id="toolbar-page-insets-example">
|
|
120
|
+
<div class="pf-v6-c-toolbar__content">
|
|
121
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
122
|
+
<div class="pf-v6-c-toolbar__group">
|
|
123
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
124
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
125
125
|
</div>
|
|
126
|
-
<hr class="pf-
|
|
127
|
-
<div class="pf-
|
|
128
|
-
<div class="pf-
|
|
126
|
+
<hr class="pf-v6-c-divider pf-m-vertical" />
|
|
127
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
128
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
129
129
|
</div>
|
|
130
130
|
</div>
|
|
131
131
|
</div>
|
|
@@ -142,19 +142,19 @@ Several components in the following examples do not include functional and/or ac
|
|
|
142
142
|
### Width control
|
|
143
143
|
|
|
144
144
|
```html
|
|
145
|
-
<div class="pf-
|
|
146
|
-
<div class="pf-
|
|
147
|
-
<div class="pf-
|
|
148
|
-
<div class="pf-
|
|
145
|
+
<div class="pf-v6-c-toolbar" id="toolbar-width-control">
|
|
146
|
+
<div class="pf-v6-c-toolbar__content">
|
|
147
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
148
|
+
<div class="pf-v6-c-toolbar__group">
|
|
149
149
|
<div
|
|
150
|
-
class="pf-
|
|
150
|
+
class="pf-v6-c-toolbar__item"
|
|
151
151
|
style="--pf-v5-c-toolbar__item--Width: 80px; --pf-v5-c-toolbar__item--Width-on-xl: 10rem"
|
|
152
152
|
>Item</div>
|
|
153
|
-
<div class="pf-
|
|
153
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
154
154
|
</div>
|
|
155
|
-
<hr class="pf-
|
|
156
|
-
<div class="pf-
|
|
157
|
-
<div class="pf-
|
|
155
|
+
<hr class="pf-v6-c-divider pf-m-vertical" />
|
|
156
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
157
|
+
<div class="pf-v6-c-toolbar__item">Item</div>
|
|
158
158
|
</div>
|
|
159
159
|
</div>
|
|
160
160
|
</div>
|
|
@@ -171,78 +171,78 @@ Several components in the following examples do not include functional and/or ac
|
|
|
171
171
|
### Group types
|
|
172
172
|
|
|
173
173
|
```html
|
|
174
|
-
<div class="pf-
|
|
175
|
-
<div class="pf-
|
|
176
|
-
<div class="pf-
|
|
177
|
-
<div class="pf-
|
|
178
|
-
<div class="pf-
|
|
174
|
+
<div class="pf-v6-c-toolbar" id="toolbar-group-types-example">
|
|
175
|
+
<div class="pf-v6-c-toolbar__content">
|
|
176
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
177
|
+
<div class="pf-v6-c-toolbar__group pf-m-filter-group">
|
|
178
|
+
<div class="pf-v6-c-toolbar__item">
|
|
179
179
|
<button
|
|
180
|
-
class="pf-
|
|
180
|
+
class="pf-v6-c-menu-toggle"
|
|
181
181
|
type="button"
|
|
182
182
|
aria-expanded="false"
|
|
183
183
|
id="toolbar-group-types-example-toggle-1"
|
|
184
184
|
>
|
|
185
|
-
<span class="pf-
|
|
186
|
-
<span class="pf-
|
|
187
|
-
<span class="pf-
|
|
185
|
+
<span class="pf-v6-c-menu-toggle__text">Filter 1</span>
|
|
186
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
187
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
188
188
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
189
189
|
</span>
|
|
190
190
|
</span>
|
|
191
191
|
</button>
|
|
192
192
|
</div>
|
|
193
|
-
<div class="pf-
|
|
193
|
+
<div class="pf-v6-c-toolbar__item">
|
|
194
194
|
<button
|
|
195
|
-
class="pf-
|
|
195
|
+
class="pf-v6-c-menu-toggle"
|
|
196
196
|
type="button"
|
|
197
197
|
aria-expanded="false"
|
|
198
198
|
id="toolbar-group-types-example-toggle-2"
|
|
199
199
|
>
|
|
200
|
-
<span class="pf-
|
|
201
|
-
<span class="pf-
|
|
202
|
-
<span class="pf-
|
|
200
|
+
<span class="pf-v6-c-menu-toggle__text">Filter 2</span>
|
|
201
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
202
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
203
203
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
204
204
|
</span>
|
|
205
205
|
</span>
|
|
206
206
|
</button>
|
|
207
207
|
</div>
|
|
208
|
-
<div class="pf-
|
|
208
|
+
<div class="pf-v6-c-toolbar__item">
|
|
209
209
|
<button
|
|
210
|
-
class="pf-
|
|
210
|
+
class="pf-v6-c-menu-toggle"
|
|
211
211
|
type="button"
|
|
212
212
|
aria-expanded="false"
|
|
213
213
|
id="toolbar-group-types-example-toggle-3"
|
|
214
214
|
>
|
|
215
|
-
<span class="pf-
|
|
216
|
-
<span class="pf-
|
|
217
|
-
<span class="pf-
|
|
215
|
+
<span class="pf-v6-c-menu-toggle__text">Filter 3</span>
|
|
216
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
217
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
218
218
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
219
219
|
</span>
|
|
220
220
|
</span>
|
|
221
221
|
</button>
|
|
222
222
|
</div>
|
|
223
223
|
</div>
|
|
224
|
-
<div class="pf-
|
|
225
|
-
<div class="pf-
|
|
224
|
+
<div class="pf-v6-c-toolbar__group pf-m-icon-button-group">
|
|
225
|
+
<div class="pf-v6-c-toolbar__item">
|
|
226
226
|
<button
|
|
227
|
-
class="pf-
|
|
227
|
+
class="pf-v6-c-button pf-m-plain"
|
|
228
228
|
type="button"
|
|
229
229
|
aria-label="Edit"
|
|
230
230
|
>
|
|
231
231
|
<i class="fas fa-edit" aria-hidden="true"></i>
|
|
232
232
|
</button>
|
|
233
233
|
</div>
|
|
234
|
-
<div class="pf-
|
|
234
|
+
<div class="pf-v6-c-toolbar__item">
|
|
235
235
|
<button
|
|
236
|
-
class="pf-
|
|
236
|
+
class="pf-v6-c-button pf-m-plain"
|
|
237
237
|
type="button"
|
|
238
238
|
aria-label="Clone"
|
|
239
239
|
>
|
|
240
240
|
<i class="fas fa-clone" aria-hidden="true"></i>
|
|
241
241
|
</button>
|
|
242
242
|
</div>
|
|
243
|
-
<div class="pf-
|
|
243
|
+
<div class="pf-v6-c-toolbar__item">
|
|
244
244
|
<button
|
|
245
|
-
class="pf-
|
|
245
|
+
class="pf-v6-c-button pf-m-plain"
|
|
246
246
|
type="button"
|
|
247
247
|
aria-label="Sync"
|
|
248
248
|
>
|
|
@@ -250,15 +250,15 @@ Several components in the following examples do not include functional and/or ac
|
|
|
250
250
|
</button>
|
|
251
251
|
</div>
|
|
252
252
|
</div>
|
|
253
|
-
<div class="pf-
|
|
254
|
-
<div class="pf-
|
|
255
|
-
<button class="pf-
|
|
253
|
+
<div class="pf-v6-c-toolbar__group pf-m-button-group">
|
|
254
|
+
<div class="pf-v6-c-toolbar__item">
|
|
255
|
+
<button class="pf-v6-c-button pf-m-primary" type="button">Action</button>
|
|
256
256
|
</div>
|
|
257
|
-
<div class="pf-
|
|
258
|
-
<button class="pf-
|
|
257
|
+
<div class="pf-v6-c-toolbar__item">
|
|
258
|
+
<button class="pf-v6-c-button pf-m-secondary" type="button">Secondary</button>
|
|
259
259
|
</div>
|
|
260
|
-
<div class="pf-
|
|
261
|
-
<button class="pf-
|
|
260
|
+
<div class="pf-v6-c-toolbar__item">
|
|
261
|
+
<button class="pf-v6-c-button pf-m-tertiary" type="button">Tertiary</button>
|
|
262
262
|
</div>
|
|
263
263
|
</div>
|
|
264
264
|
</div>
|
|
@@ -277,56 +277,56 @@ Several components in the following examples do not include functional and/or ac
|
|
|
277
277
|
### Toggle group
|
|
278
278
|
|
|
279
279
|
```html
|
|
280
|
-
<div class="pf-
|
|
281
|
-
<div class="pf-
|
|
282
|
-
<div class="pf-
|
|
283
|
-
<div class="pf-
|
|
284
|
-
<div class="pf-
|
|
280
|
+
<div class="pf-v6-c-toolbar" id="toolbar-toggle-group-example">
|
|
281
|
+
<div class="pf-v6-c-toolbar__content">
|
|
282
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
283
|
+
<div class="pf-v6-c-toolbar__group pf-m-toggle-group pf-m-show-on-lg">
|
|
284
|
+
<div class="pf-v6-c-toolbar__toggle pf-m-show">
|
|
285
285
|
<button
|
|
286
|
-
class="pf-
|
|
286
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
287
287
|
type="button"
|
|
288
288
|
aria-expanded="false"
|
|
289
289
|
aria-label="Show filters"
|
|
290
290
|
aria-controls="toolbar-toggle-group-example-expandable-content"
|
|
291
291
|
>
|
|
292
|
-
<span class="pf-
|
|
292
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
293
293
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
294
294
|
</span>
|
|
295
295
|
</button>
|
|
296
296
|
</div>
|
|
297
|
-
<div class="pf-
|
|
297
|
+
<div class="pf-v6-c-toolbar__item pf-m-search-filter">
|
|
298
298
|
<div
|
|
299
|
-
class="pf-
|
|
299
|
+
class="pf-v6-c-input-group"
|
|
300
300
|
aria-label="search filter"
|
|
301
301
|
role="group"
|
|
302
302
|
>
|
|
303
|
-
<div class="pf-
|
|
303
|
+
<div class="pf-v6-c-input-group__item">
|
|
304
304
|
<button
|
|
305
|
-
class="pf-
|
|
305
|
+
class="pf-v6-c-menu-toggle"
|
|
306
306
|
type="button"
|
|
307
307
|
aria-expanded="false"
|
|
308
308
|
id="toolbar-toggle-group-example-search-filter-menu"
|
|
309
309
|
>
|
|
310
|
-
<span class="pf-
|
|
310
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
311
311
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
312
312
|
</span>
|
|
313
|
-
<span class="pf-
|
|
314
|
-
<span class="pf-
|
|
315
|
-
<span class="pf-
|
|
313
|
+
<span class="pf-v6-c-menu-toggle__text">Name</span>
|
|
314
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
315
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
316
316
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
317
317
|
</span>
|
|
318
318
|
</span>
|
|
319
319
|
</button>
|
|
320
320
|
</div>
|
|
321
|
-
<div class="pf-
|
|
322
|
-
<div class="pf-
|
|
323
|
-
<div class="pf-
|
|
324
|
-
<span class="pf-
|
|
325
|
-
<span class="pf-
|
|
321
|
+
<div class="pf-v6-c-input-group__item pf-m-fill">
|
|
322
|
+
<div class="pf-v6-c-text-input-group">
|
|
323
|
+
<div class="pf-v6-c-text-input-group__main pf-m-icon">
|
|
324
|
+
<span class="pf-v6-c-text-input-group__text">
|
|
325
|
+
<span class="pf-v6-c-text-input-group__icon">
|
|
326
326
|
<i class="fas fa-fw fa-search"></i>
|
|
327
327
|
</span>
|
|
328
328
|
<input
|
|
329
|
-
class="pf-
|
|
329
|
+
class="pf-v6-c-text-input-group__text-input"
|
|
330
330
|
type="text"
|
|
331
331
|
placeholder="Filter by name"
|
|
332
332
|
value
|
|
@@ -338,32 +338,32 @@ Several components in the following examples do not include functional and/or ac
|
|
|
338
338
|
</div>
|
|
339
339
|
</div>
|
|
340
340
|
</div>
|
|
341
|
-
<div class="pf-
|
|
342
|
-
<div class="pf-
|
|
341
|
+
<div class="pf-v6-c-toolbar__group pf-m-filter-group">
|
|
342
|
+
<div class="pf-v6-c-toolbar__item">
|
|
343
343
|
<button
|
|
344
|
-
class="pf-
|
|
344
|
+
class="pf-v6-c-menu-toggle"
|
|
345
345
|
type="button"
|
|
346
346
|
aria-expanded="false"
|
|
347
347
|
id="toolbar-toggle-group-example-menu-toggle-checkbox-status"
|
|
348
348
|
>
|
|
349
|
-
<span class="pf-
|
|
350
|
-
<span class="pf-
|
|
351
|
-
<span class="pf-
|
|
349
|
+
<span class="pf-v6-c-menu-toggle__text">Status</span>
|
|
350
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
351
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
352
352
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
353
353
|
</span>
|
|
354
354
|
</span>
|
|
355
355
|
</button>
|
|
356
356
|
</div>
|
|
357
|
-
<div class="pf-
|
|
357
|
+
<div class="pf-v6-c-toolbar__item">
|
|
358
358
|
<button
|
|
359
|
-
class="pf-
|
|
359
|
+
class="pf-v6-c-menu-toggle"
|
|
360
360
|
type="button"
|
|
361
361
|
aria-expanded="false"
|
|
362
362
|
id="toolbar-toggle-group-example-menu-toggle-checkbox-risk"
|
|
363
363
|
>
|
|
364
|
-
<span class="pf-
|
|
365
|
-
<span class="pf-
|
|
366
|
-
<span class="pf-
|
|
364
|
+
<span class="pf-v6-c-menu-toggle__text">Risk</span>
|
|
365
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
366
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
367
367
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
368
368
|
</span>
|
|
369
369
|
</span>
|
|
@@ -373,7 +373,7 @@ Several components in the following examples do not include functional and/or ac
|
|
|
373
373
|
</div>
|
|
374
374
|
</div>
|
|
375
375
|
<div
|
|
376
|
-
class="pf-
|
|
376
|
+
class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
|
|
377
377
|
id="toolbar-toggle-group-example-expandable-content"
|
|
378
378
|
hidden
|
|
379
379
|
></div>
|
|
@@ -385,19 +385,19 @@ Several components in the following examples do not include functional and/or ac
|
|
|
385
385
|
### Toggle group on mobile (filters collapsed, expandable content expanded)
|
|
386
386
|
|
|
387
387
|
```html
|
|
388
|
-
<div class="pf-
|
|
389
|
-
<div class="pf-
|
|
390
|
-
<div class="pf-
|
|
391
|
-
<div class="pf-
|
|
392
|
-
<div class="pf-
|
|
388
|
+
<div class="pf-v6-c-toolbar" id="toolbar-toggle-group-collapsed-example">
|
|
389
|
+
<div class="pf-v6-c-toolbar__content">
|
|
390
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
391
|
+
<div class="pf-v6-c-toolbar__group pf-m-toggle-group">
|
|
392
|
+
<div class="pf-v6-c-toolbar__toggle pf-m-show">
|
|
393
393
|
<button
|
|
394
|
-
class="pf-
|
|
394
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
|
|
395
395
|
type="button"
|
|
396
396
|
aria-expanded="true"
|
|
397
397
|
aria-label="Show filters"
|
|
398
398
|
aria-controls="toolbar-toggle-group-collapsed-example-expandable-content"
|
|
399
399
|
>
|
|
400
|
-
<span class="pf-
|
|
400
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
401
401
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
402
402
|
</span>
|
|
403
403
|
</button>
|
|
@@ -405,42 +405,42 @@ Several components in the following examples do not include functional and/or ac
|
|
|
405
405
|
</div>
|
|
406
406
|
</div>
|
|
407
407
|
<div
|
|
408
|
-
class="pf-
|
|
408
|
+
class="pf-v6-c-toolbar__expandable-content pf-m-expanded"
|
|
409
409
|
id="toolbar-toggle-group-collapsed-example-expandable-content"
|
|
410
410
|
>
|
|
411
|
-
<div class="pf-
|
|
411
|
+
<div class="pf-v6-c-toolbar__item pf-m-search-filter">
|
|
412
412
|
<div
|
|
413
|
-
class="pf-
|
|
413
|
+
class="pf-v6-c-input-group"
|
|
414
414
|
aria-label="search filter"
|
|
415
415
|
role="group"
|
|
416
416
|
>
|
|
417
|
-
<div class="pf-
|
|
417
|
+
<div class="pf-v6-c-input-group__item">
|
|
418
418
|
<button
|
|
419
|
-
class="pf-
|
|
419
|
+
class="pf-v6-c-menu-toggle"
|
|
420
420
|
type="button"
|
|
421
421
|
aria-expanded="false"
|
|
422
422
|
id="toolbar-toggle-group-collapsed-example-search-filter-menu"
|
|
423
423
|
>
|
|
424
|
-
<span class="pf-
|
|
424
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
425
425
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
426
426
|
</span>
|
|
427
|
-
<span class="pf-
|
|
428
|
-
<span class="pf-
|
|
429
|
-
<span class="pf-
|
|
427
|
+
<span class="pf-v6-c-menu-toggle__text">Name</span>
|
|
428
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
429
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
430
430
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
431
431
|
</span>
|
|
432
432
|
</span>
|
|
433
433
|
</button>
|
|
434
434
|
</div>
|
|
435
|
-
<div class="pf-
|
|
436
|
-
<div class="pf-
|
|
437
|
-
<div class="pf-
|
|
438
|
-
<span class="pf-
|
|
439
|
-
<span class="pf-
|
|
435
|
+
<div class="pf-v6-c-input-group__item pf-m-fill">
|
|
436
|
+
<div class="pf-v6-c-text-input-group">
|
|
437
|
+
<div class="pf-v6-c-text-input-group__main pf-m-icon">
|
|
438
|
+
<span class="pf-v6-c-text-input-group__text">
|
|
439
|
+
<span class="pf-v6-c-text-input-group__icon">
|
|
440
440
|
<i class="fas fa-fw fa-search"></i>
|
|
441
441
|
</span>
|
|
442
442
|
<input
|
|
443
|
-
class="pf-
|
|
443
|
+
class="pf-v6-c-text-input-group__text-input"
|
|
444
444
|
type="text"
|
|
445
445
|
placeholder="Filter by name"
|
|
446
446
|
value
|
|
@@ -452,32 +452,32 @@ Several components in the following examples do not include functional and/or ac
|
|
|
452
452
|
</div>
|
|
453
453
|
</div>
|
|
454
454
|
</div>
|
|
455
|
-
<div class="pf-
|
|
456
|
-
<div class="pf-
|
|
455
|
+
<div class="pf-v6-c-toolbar__group pf-m-filter-group">
|
|
456
|
+
<div class="pf-v6-c-toolbar__item">
|
|
457
457
|
<button
|
|
458
|
-
class="pf-
|
|
458
|
+
class="pf-v6-c-menu-toggle"
|
|
459
459
|
type="button"
|
|
460
460
|
aria-expanded="false"
|
|
461
461
|
id="toolbar-toggle-group-collapsed-example-menu-toggle-checkbox-status"
|
|
462
462
|
>
|
|
463
|
-
<span class="pf-
|
|
464
|
-
<span class="pf-
|
|
465
|
-
<span class="pf-
|
|
463
|
+
<span class="pf-v6-c-menu-toggle__text">Status</span>
|
|
464
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
465
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
466
466
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
467
467
|
</span>
|
|
468
468
|
</span>
|
|
469
469
|
</button>
|
|
470
470
|
</div>
|
|
471
|
-
<div class="pf-
|
|
471
|
+
<div class="pf-v6-c-toolbar__item">
|
|
472
472
|
<button
|
|
473
|
-
class="pf-
|
|
473
|
+
class="pf-v6-c-menu-toggle"
|
|
474
474
|
type="button"
|
|
475
475
|
aria-expanded="false"
|
|
476
476
|
id="toolbar-toggle-group-collapsed-example-menu-toggle-checkbox-risk"
|
|
477
477
|
>
|
|
478
|
-
<span class="pf-
|
|
479
|
-
<span class="pf-
|
|
480
|
-
<span class="pf-
|
|
478
|
+
<span class="pf-v6-c-menu-toggle__text">Risk</span>
|
|
479
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
480
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
481
481
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
482
482
|
</span>
|
|
483
483
|
</span>
|
|
@@ -523,23 +523,23 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
523
523
|
|
|
524
524
|
```html
|
|
525
525
|
<div
|
|
526
|
-
class="pf-
|
|
526
|
+
class="pf-v6-c-toolbar"
|
|
527
527
|
id="toolbar-selected-filters-toggle-group-collapsed-example"
|
|
528
528
|
>
|
|
529
|
-
<div class="pf-
|
|
530
|
-
<div class="pf-
|
|
531
|
-
<div class="pf-
|
|
529
|
+
<div class="pf-v6-c-toolbar__content">
|
|
530
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
531
|
+
<div class="pf-v6-c-toolbar__item pf-m-bulk-select">
|
|
532
532
|
<div
|
|
533
|
-
class="pf-
|
|
533
|
+
class="pf-v6-c-menu-toggle pf-m-split-button"
|
|
534
534
|
id="toolbar-selected-filters-toggle-group-collapsed-example-check"
|
|
535
535
|
>
|
|
536
536
|
<label
|
|
537
|
-
class="pf-
|
|
537
|
+
class="pf-v6-c-check pf-m-standalone"
|
|
538
538
|
id="toolbar-selected-filters-toggle-group-collapsed-example-check-check"
|
|
539
539
|
for="toolbar-selected-filters-toggle-group-collapsed-example-check-check-input"
|
|
540
540
|
>
|
|
541
541
|
<input
|
|
542
|
-
class="pf-
|
|
542
|
+
class="pf-v6-c-check__input"
|
|
543
543
|
type="checkbox"
|
|
544
544
|
id="toolbar-selected-filters-toggle-group-collapsed-example-check-check-input"
|
|
545
545
|
name="toolbar-selected-filters-toggle-group-collapsed-example-check-check-input"
|
|
@@ -547,67 +547,67 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
547
547
|
/>
|
|
548
548
|
</label>
|
|
549
549
|
<button
|
|
550
|
-
class="pf-
|
|
550
|
+
class="pf-v6-c-menu-toggle__button"
|
|
551
551
|
type="button"
|
|
552
552
|
aria-expanded="false"
|
|
553
553
|
id="toolbar-selected-filters-toggle-group-collapsed-example-menu-toggle-toggle-button"
|
|
554
554
|
aria-label="Menu toggle"
|
|
555
555
|
>
|
|
556
|
-
<span class="pf-
|
|
557
|
-
<span class="pf-
|
|
556
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
557
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
558
558
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
559
559
|
</span>
|
|
560
560
|
</span>
|
|
561
561
|
</button>
|
|
562
562
|
</div>
|
|
563
563
|
</div>
|
|
564
|
-
<div class="pf-
|
|
565
|
-
<div class="pf-
|
|
564
|
+
<div class="pf-v6-c-toolbar__group pf-m-toggle-group">
|
|
565
|
+
<div class="pf-v6-c-toolbar__toggle pf-m-show">
|
|
566
566
|
<button
|
|
567
|
-
class="pf-
|
|
567
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
568
568
|
type="button"
|
|
569
569
|
aria-expanded="false"
|
|
570
570
|
aria-label="Show filters"
|
|
571
571
|
aria-controls="toolbar-selected-filters-toggle-group-collapsed-example-expandable-content"
|
|
572
572
|
>
|
|
573
|
-
<span class="pf-
|
|
573
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
574
574
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
575
575
|
</span>
|
|
576
576
|
</button>
|
|
577
577
|
</div>
|
|
578
|
-
<div class="pf-
|
|
578
|
+
<div class="pf-v6-c-toolbar__item pf-m-search-filter">
|
|
579
579
|
<div
|
|
580
|
-
class="pf-
|
|
580
|
+
class="pf-v6-c-input-group"
|
|
581
581
|
aria-label="search filter"
|
|
582
582
|
role="group"
|
|
583
583
|
>
|
|
584
|
-
<div class="pf-
|
|
584
|
+
<div class="pf-v6-c-input-group__item">
|
|
585
585
|
<button
|
|
586
|
-
class="pf-
|
|
586
|
+
class="pf-v6-c-menu-toggle"
|
|
587
587
|
type="button"
|
|
588
588
|
aria-expanded="false"
|
|
589
589
|
id="toolbar-selected-filters-toggle-group-collapsed-example-search-filter-menu"
|
|
590
590
|
>
|
|
591
|
-
<span class="pf-
|
|
591
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
592
592
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
593
593
|
</span>
|
|
594
|
-
<span class="pf-
|
|
595
|
-
<span class="pf-
|
|
596
|
-
<span class="pf-
|
|
594
|
+
<span class="pf-v6-c-menu-toggle__text">Name</span>
|
|
595
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
596
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
597
597
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
598
598
|
</span>
|
|
599
599
|
</span>
|
|
600
600
|
</button>
|
|
601
601
|
</div>
|
|
602
|
-
<div class="pf-
|
|
603
|
-
<div class="pf-
|
|
604
|
-
<div class="pf-
|
|
605
|
-
<span class="pf-
|
|
606
|
-
<span class="pf-
|
|
602
|
+
<div class="pf-v6-c-input-group__item pf-m-fill">
|
|
603
|
+
<div class="pf-v6-c-text-input-group">
|
|
604
|
+
<div class="pf-v6-c-text-input-group__main pf-m-icon">
|
|
605
|
+
<span class="pf-v6-c-text-input-group__text">
|
|
606
|
+
<span class="pf-v6-c-text-input-group__icon">
|
|
607
607
|
<i class="fas fa-fw fa-search"></i>
|
|
608
608
|
</span>
|
|
609
609
|
<input
|
|
610
|
-
class="pf-
|
|
610
|
+
class="pf-v6-c-text-input-group__text-input"
|
|
611
611
|
type="text"
|
|
612
612
|
placeholder="Filter by name"
|
|
613
613
|
value
|
|
@@ -619,32 +619,32 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
619
619
|
</div>
|
|
620
620
|
</div>
|
|
621
621
|
</div>
|
|
622
|
-
<div class="pf-
|
|
623
|
-
<div class="pf-
|
|
622
|
+
<div class="pf-v6-c-toolbar__group pf-m-filter-group">
|
|
623
|
+
<div class="pf-v6-c-toolbar__item">
|
|
624
624
|
<button
|
|
625
|
-
class="pf-
|
|
625
|
+
class="pf-v6-c-menu-toggle"
|
|
626
626
|
type="button"
|
|
627
627
|
aria-expanded="false"
|
|
628
628
|
id="toolbar-selected-filters-toggle-group-collapsed-example-menu-toggle-checkbox-status"
|
|
629
629
|
>
|
|
630
|
-
<span class="pf-
|
|
631
|
-
<span class="pf-
|
|
632
|
-
<span class="pf-
|
|
630
|
+
<span class="pf-v6-c-menu-toggle__text">Status</span>
|
|
631
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
632
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
633
633
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
634
634
|
</span>
|
|
635
635
|
</span>
|
|
636
636
|
</button>
|
|
637
637
|
</div>
|
|
638
|
-
<div class="pf-
|
|
638
|
+
<div class="pf-v6-c-toolbar__item">
|
|
639
639
|
<button
|
|
640
|
-
class="pf-
|
|
640
|
+
class="pf-v6-c-menu-toggle"
|
|
641
641
|
type="button"
|
|
642
642
|
aria-expanded="false"
|
|
643
643
|
id="toolbar-selected-filters-toggle-group-collapsed-example-menu-toggle-checkbox-risk"
|
|
644
644
|
>
|
|
645
|
-
<span class="pf-
|
|
646
|
-
<span class="pf-
|
|
647
|
-
<span class="pf-
|
|
645
|
+
<span class="pf-v6-c-menu-toggle__text">Risk</span>
|
|
646
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
647
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
648
648
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
649
649
|
</span>
|
|
650
650
|
</span>
|
|
@@ -652,15 +652,15 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
652
652
|
</div>
|
|
653
653
|
</div>
|
|
654
654
|
</div>
|
|
655
|
-
<div class="pf-
|
|
655
|
+
<div class="pf-v6-c-toolbar__item pf-m-overflow-menu">
|
|
656
656
|
<div
|
|
657
|
-
class="pf-
|
|
657
|
+
class="pf-v6-c-overflow-menu"
|
|
658
658
|
id="toolbar-selected-filters-toggle-group-collapsed-example-icon-button-overflow-menu"
|
|
659
659
|
>
|
|
660
|
-
<div class="pf-
|
|
661
|
-
<div class="pf-
|
|
660
|
+
<div class="pf-v6-c-overflow-menu__control">
|
|
661
|
+
<div class="pf-v6-c-dropdown">
|
|
662
662
|
<button
|
|
663
|
-
class="pf-
|
|
663
|
+
class="pf-v6-c-button pf-v5-c-dropdown__toggle pf-m-plain"
|
|
664
664
|
type="button"
|
|
665
665
|
id="toolbar-selected-filters-toggle-group-collapsed-example-icon-button-overflow-menu-dropdown-toggle"
|
|
666
666
|
aria-label="Overflow menu"
|
|
@@ -669,7 +669,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
669
669
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
670
670
|
</button>
|
|
671
671
|
<ul
|
|
672
|
-
class="pf-
|
|
672
|
+
class="pf-v6-c-dropdown__menu"
|
|
673
673
|
role="menu"
|
|
674
674
|
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-icon-button-overflow-menu-dropdown-toggle"
|
|
675
675
|
hidden
|
|
@@ -677,19 +677,19 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
677
677
|
<li role="none">
|
|
678
678
|
<button
|
|
679
679
|
role="menuitem"
|
|
680
|
-
class="pf-
|
|
680
|
+
class="pf-v6-c-dropdown__menu-item"
|
|
681
681
|
>Edit</button>
|
|
682
682
|
</li>
|
|
683
683
|
<li role="none">
|
|
684
684
|
<button
|
|
685
685
|
role="menuitem"
|
|
686
|
-
class="pf-
|
|
686
|
+
class="pf-v6-c-dropdown__menu-item"
|
|
687
687
|
>Clone</button>
|
|
688
688
|
</li>
|
|
689
689
|
<li role="none">
|
|
690
690
|
<button
|
|
691
691
|
role="menuitem"
|
|
692
|
-
class="pf-
|
|
692
|
+
class="pf-v6-c-dropdown__menu-item"
|
|
693
693
|
>Sync</button>
|
|
694
694
|
</li>
|
|
695
695
|
</ul>
|
|
@@ -699,35 +699,35 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
699
699
|
</div>
|
|
700
700
|
</div>
|
|
701
701
|
<div
|
|
702
|
-
class="pf-
|
|
702
|
+
class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
|
|
703
703
|
id="toolbar-selected-filters-toggle-group-collapsed-example-expandable-content"
|
|
704
704
|
hidden
|
|
705
705
|
>
|
|
706
|
-
<div class="pf-
|
|
707
|
-
<div class="pf-
|
|
708
|
-
<div class="pf-
|
|
709
|
-
<div class="pf-
|
|
710
|
-
<div class="pf-
|
|
706
|
+
<div class="pf-v6-c-toolbar__group pf-m-chip-container">
|
|
707
|
+
<div class="pf-v6-c-toolbar__group pf-m-grow">
|
|
708
|
+
<div class="pf-v6-c-toolbar__item">
|
|
709
|
+
<div class="pf-v6-c-chip-group" role="group">
|
|
710
|
+
<div class="pf-v6-c-chip-group__main">
|
|
711
711
|
<span
|
|
712
|
-
class="pf-
|
|
712
|
+
class="pf-v6-c-chip-group__label"
|
|
713
713
|
id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-status-chip-group-label"
|
|
714
714
|
>Status</span>
|
|
715
715
|
<ul
|
|
716
|
-
class="pf-
|
|
716
|
+
class="pf-v6-c-chip-group__list"
|
|
717
717
|
role="list"
|
|
718
718
|
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-status-chip-group-label"
|
|
719
719
|
>
|
|
720
|
-
<li class="pf-
|
|
721
|
-
<div class="pf-
|
|
722
|
-
<span class="pf-
|
|
720
|
+
<li class="pf-v6-c-chip-group__list-item">
|
|
721
|
+
<div class="pf-v6-c-chip">
|
|
722
|
+
<span class="pf-v6-c-chip__content">
|
|
723
723
|
<span
|
|
724
|
-
class="pf-
|
|
724
|
+
class="pf-v6-c-chip__text"
|
|
725
725
|
id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-one"
|
|
726
726
|
>Chip one</span>
|
|
727
727
|
</span>
|
|
728
|
-
<span class="pf-
|
|
728
|
+
<span class="pf-v6-c-chip__actions">
|
|
729
729
|
<button
|
|
730
|
-
class="pf-
|
|
730
|
+
class="pf-v6-c-button pf-m-plain"
|
|
731
731
|
type="button"
|
|
732
732
|
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-one toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-one"
|
|
733
733
|
aria-label="Remove"
|
|
@@ -738,17 +738,17 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
738
738
|
</span>
|
|
739
739
|
</div>
|
|
740
740
|
</li>
|
|
741
|
-
<li class="pf-
|
|
742
|
-
<div class="pf-
|
|
743
|
-
<span class="pf-
|
|
741
|
+
<li class="pf-v6-c-chip-group__list-item">
|
|
742
|
+
<div class="pf-v6-c-chip">
|
|
743
|
+
<span class="pf-v6-c-chip__content">
|
|
744
744
|
<span
|
|
745
|
-
class="pf-
|
|
745
|
+
class="pf-v6-c-chip__text"
|
|
746
746
|
id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-two"
|
|
747
747
|
>Chip two</span>
|
|
748
748
|
</span>
|
|
749
|
-
<span class="pf-
|
|
749
|
+
<span class="pf-v6-c-chip__actions">
|
|
750
750
|
<button
|
|
751
|
-
class="pf-
|
|
751
|
+
class="pf-v6-c-button pf-m-plain"
|
|
752
752
|
type="button"
|
|
753
753
|
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-two toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-two"
|
|
754
754
|
aria-label="Remove"
|
|
@@ -759,17 +759,17 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
759
759
|
</span>
|
|
760
760
|
</div>
|
|
761
761
|
</li>
|
|
762
|
-
<li class="pf-
|
|
763
|
-
<div class="pf-
|
|
764
|
-
<span class="pf-
|
|
762
|
+
<li class="pf-v6-c-chip-group__list-item">
|
|
763
|
+
<div class="pf-v6-c-chip">
|
|
764
|
+
<span class="pf-v6-c-chip__content">
|
|
765
765
|
<span
|
|
766
|
-
class="pf-
|
|
766
|
+
class="pf-v6-c-chip__text"
|
|
767
767
|
id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-three"
|
|
768
768
|
>Chip three</span>
|
|
769
769
|
</span>
|
|
770
|
-
<span class="pf-
|
|
770
|
+
<span class="pf-v6-c-chip__actions">
|
|
771
771
|
<button
|
|
772
|
-
class="pf-
|
|
772
|
+
class="pf-v6-c-button pf-m-plain"
|
|
773
773
|
type="button"
|
|
774
774
|
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-three toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-three"
|
|
775
775
|
aria-label="Remove"
|
|
@@ -784,29 +784,29 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
784
784
|
</div>
|
|
785
785
|
</div>
|
|
786
786
|
</div>
|
|
787
|
-
<div class="pf-
|
|
788
|
-
<div class="pf-
|
|
789
|
-
<div class="pf-
|
|
787
|
+
<div class="pf-v6-c-toolbar__item">
|
|
788
|
+
<div class="pf-v6-c-chip-group" role="group">
|
|
789
|
+
<div class="pf-v6-c-chip-group__main">
|
|
790
790
|
<span
|
|
791
|
-
class="pf-
|
|
791
|
+
class="pf-v6-c-chip-group__label"
|
|
792
792
|
id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-risk-chip-group-label"
|
|
793
793
|
>Risk</span>
|
|
794
794
|
<ul
|
|
795
|
-
class="pf-
|
|
795
|
+
class="pf-v6-c-chip-group__list"
|
|
796
796
|
role="list"
|
|
797
797
|
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-risk-chip-group-label"
|
|
798
798
|
>
|
|
799
|
-
<li class="pf-
|
|
800
|
-
<div class="pf-
|
|
801
|
-
<span class="pf-
|
|
799
|
+
<li class="pf-v6-c-chip-group__list-item">
|
|
800
|
+
<div class="pf-v6-c-chip">
|
|
801
|
+
<span class="pf-v6-c-chip__content">
|
|
802
802
|
<span
|
|
803
|
-
class="pf-
|
|
803
|
+
class="pf-v6-c-chip__text"
|
|
804
804
|
id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-one"
|
|
805
805
|
>Chip one</span>
|
|
806
806
|
</span>
|
|
807
|
-
<span class="pf-
|
|
807
|
+
<span class="pf-v6-c-chip__actions">
|
|
808
808
|
<button
|
|
809
|
-
class="pf-
|
|
809
|
+
class="pf-v6-c-button pf-m-plain"
|
|
810
810
|
type="button"
|
|
811
811
|
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-one toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-one"
|
|
812
812
|
aria-label="Remove"
|
|
@@ -817,17 +817,17 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
817
817
|
</span>
|
|
818
818
|
</div>
|
|
819
819
|
</li>
|
|
820
|
-
<li class="pf-
|
|
821
|
-
<div class="pf-
|
|
822
|
-
<span class="pf-
|
|
820
|
+
<li class="pf-v6-c-chip-group__list-item">
|
|
821
|
+
<div class="pf-v6-c-chip">
|
|
822
|
+
<span class="pf-v6-c-chip__content">
|
|
823
823
|
<span
|
|
824
|
-
class="pf-
|
|
824
|
+
class="pf-v6-c-chip__text"
|
|
825
825
|
id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-two"
|
|
826
826
|
>Chip two</span>
|
|
827
827
|
</span>
|
|
828
|
-
<span class="pf-
|
|
828
|
+
<span class="pf-v6-c-chip__actions">
|
|
829
829
|
<button
|
|
830
|
-
class="pf-
|
|
830
|
+
class="pf-v6-c-button pf-m-plain"
|
|
831
831
|
type="button"
|
|
832
832
|
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-two toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-two"
|
|
833
833
|
aria-label="Remove"
|
|
@@ -838,17 +838,17 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
838
838
|
</span>
|
|
839
839
|
</div>
|
|
840
840
|
</li>
|
|
841
|
-
<li class="pf-
|
|
842
|
-
<div class="pf-
|
|
843
|
-
<span class="pf-
|
|
841
|
+
<li class="pf-v6-c-chip-group__list-item">
|
|
842
|
+
<div class="pf-v6-c-chip">
|
|
843
|
+
<span class="pf-v6-c-chip__content">
|
|
844
844
|
<span
|
|
845
|
-
class="pf-
|
|
845
|
+
class="pf-v6-c-chip__text"
|
|
846
846
|
id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-three"
|
|
847
847
|
>Chip three</span>
|
|
848
848
|
</span>
|
|
849
|
-
<span class="pf-
|
|
849
|
+
<span class="pf-v6-c-chip__actions">
|
|
850
850
|
<button
|
|
851
|
-
class="pf-
|
|
851
|
+
class="pf-v6-c-button pf-m-plain"
|
|
852
852
|
type="button"
|
|
853
853
|
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-three toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-three"
|
|
854
854
|
aria-label="Remove"
|
|
@@ -864,21 +864,21 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
864
864
|
</div>
|
|
865
865
|
</div>
|
|
866
866
|
</div>
|
|
867
|
-
<div class="pf-
|
|
867
|
+
<div class="pf-v6-c-toolbar__item">
|
|
868
868
|
<button
|
|
869
|
-
class="pf-
|
|
869
|
+
class="pf-v6-c-button pf-m-link pf-m-inline"
|
|
870
870
|
type="button"
|
|
871
871
|
>Clear all filters</button>
|
|
872
872
|
</div>
|
|
873
873
|
</div>
|
|
874
874
|
</div>
|
|
875
875
|
</div>
|
|
876
|
-
<div class="pf-
|
|
877
|
-
<div class="pf-
|
|
878
|
-
<div class="pf-
|
|
879
|
-
<div class="pf-
|
|
876
|
+
<div class="pf-v6-c-toolbar__content">
|
|
877
|
+
<div class="pf-v6-c-toolbar__group">
|
|
878
|
+
<div class="pf-v6-c-toolbar__item">6 filters applied</div>
|
|
879
|
+
<div class="pf-v6-c-toolbar__item">
|
|
880
880
|
<button
|
|
881
|
-
class="pf-
|
|
881
|
+
class="pf-v6-c-button pf-m-link pf-m-inline"
|
|
882
882
|
type="button"
|
|
883
883
|
>Clear all filters</button>
|
|
884
884
|
</div>
|
|
@@ -892,23 +892,23 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
892
892
|
|
|
893
893
|
```html
|
|
894
894
|
<div
|
|
895
|
-
class="pf-
|
|
895
|
+
class="pf-v6-c-toolbar"
|
|
896
896
|
id="toolbar-selected-filters-toggle-group-expanded-example"
|
|
897
897
|
>
|
|
898
|
-
<div class="pf-
|
|
899
|
-
<div class="pf-
|
|
900
|
-
<div class="pf-
|
|
898
|
+
<div class="pf-v6-c-toolbar__content">
|
|
899
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
900
|
+
<div class="pf-v6-c-toolbar__item pf-m-bulk-select">
|
|
901
901
|
<div
|
|
902
|
-
class="pf-
|
|
902
|
+
class="pf-v6-c-menu-toggle pf-m-split-button"
|
|
903
903
|
id="toolbar-selected-filters-toggle-group-expanded-example-check"
|
|
904
904
|
>
|
|
905
905
|
<label
|
|
906
|
-
class="pf-
|
|
906
|
+
class="pf-v6-c-check pf-m-standalone"
|
|
907
907
|
id="toolbar-selected-filters-toggle-group-expanded-example-check-check"
|
|
908
908
|
for="toolbar-selected-filters-toggle-group-expanded-example-check-check-input"
|
|
909
909
|
>
|
|
910
910
|
<input
|
|
911
|
-
class="pf-
|
|
911
|
+
class="pf-v6-c-check__input"
|
|
912
912
|
type="checkbox"
|
|
913
913
|
id="toolbar-selected-filters-toggle-group-expanded-example-check-check-input"
|
|
914
914
|
name="toolbar-selected-filters-toggle-group-expanded-example-check-check-input"
|
|
@@ -916,44 +916,44 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
916
916
|
/>
|
|
917
917
|
</label>
|
|
918
918
|
<button
|
|
919
|
-
class="pf-
|
|
919
|
+
class="pf-v6-c-menu-toggle__button"
|
|
920
920
|
type="button"
|
|
921
921
|
aria-expanded="false"
|
|
922
922
|
id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-toggle-button"
|
|
923
923
|
aria-label="Menu toggle"
|
|
924
924
|
>
|
|
925
|
-
<span class="pf-
|
|
926
|
-
<span class="pf-
|
|
925
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
926
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
927
927
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
928
928
|
</span>
|
|
929
929
|
</span>
|
|
930
930
|
</button>
|
|
931
931
|
</div>
|
|
932
932
|
</div>
|
|
933
|
-
<div class="pf-
|
|
934
|
-
<div class="pf-
|
|
933
|
+
<div class="pf-v6-c-toolbar__group pf-m-toggle-group">
|
|
934
|
+
<div class="pf-v6-c-toolbar__toggle pf-m-show">
|
|
935
935
|
<button
|
|
936
|
-
class="pf-
|
|
936
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
|
|
937
937
|
type="button"
|
|
938
938
|
aria-expanded="true"
|
|
939
939
|
aria-label="Show filters"
|
|
940
940
|
aria-controls="toolbar-selected-filters-toggle-group-expanded-example-expandable-content"
|
|
941
941
|
>
|
|
942
|
-
<span class="pf-
|
|
942
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
943
943
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
944
944
|
</span>
|
|
945
945
|
</button>
|
|
946
946
|
</div>
|
|
947
947
|
</div>
|
|
948
|
-
<div class="pf-
|
|
948
|
+
<div class="pf-v6-c-toolbar__item pf-m-overflow-menu">
|
|
949
949
|
<div
|
|
950
|
-
class="pf-
|
|
950
|
+
class="pf-v6-c-overflow-menu"
|
|
951
951
|
id="toolbar-selected-filters-toggle-group-expanded-example-icon-button-overflow-menu"
|
|
952
952
|
>
|
|
953
|
-
<div class="pf-
|
|
954
|
-
<div class="pf-
|
|
953
|
+
<div class="pf-v6-c-overflow-menu__control">
|
|
954
|
+
<div class="pf-v6-c-dropdown">
|
|
955
955
|
<button
|
|
956
|
-
class="pf-
|
|
956
|
+
class="pf-v6-c-button pf-v5-c-dropdown__toggle pf-m-plain"
|
|
957
957
|
type="button"
|
|
958
958
|
id="toolbar-selected-filters-toggle-group-expanded-example-icon-button-overflow-menu-dropdown-toggle"
|
|
959
959
|
aria-label="Overflow menu"
|
|
@@ -962,7 +962,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
962
962
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
963
963
|
</button>
|
|
964
964
|
<ul
|
|
965
|
-
class="pf-
|
|
965
|
+
class="pf-v6-c-dropdown__menu"
|
|
966
966
|
role="menu"
|
|
967
967
|
aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-icon-button-overflow-menu-dropdown-toggle"
|
|
968
968
|
hidden
|
|
@@ -970,19 +970,19 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
970
970
|
<li role="none">
|
|
971
971
|
<button
|
|
972
972
|
role="menuitem"
|
|
973
|
-
class="pf-
|
|
973
|
+
class="pf-v6-c-dropdown__menu-item"
|
|
974
974
|
>Edit</button>
|
|
975
975
|
</li>
|
|
976
976
|
<li role="none">
|
|
977
977
|
<button
|
|
978
978
|
role="menuitem"
|
|
979
|
-
class="pf-
|
|
979
|
+
class="pf-v6-c-dropdown__menu-item"
|
|
980
980
|
>Clone</button>
|
|
981
981
|
</li>
|
|
982
982
|
<li role="none">
|
|
983
983
|
<button
|
|
984
984
|
role="menuitem"
|
|
985
|
-
class="pf-
|
|
985
|
+
class="pf-v6-c-dropdown__menu-item"
|
|
986
986
|
>Sync</button>
|
|
987
987
|
</li>
|
|
988
988
|
</ul>
|
|
@@ -992,42 +992,42 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
992
992
|
</div>
|
|
993
993
|
</div>
|
|
994
994
|
<div
|
|
995
|
-
class="pf-
|
|
995
|
+
class="pf-v6-c-toolbar__expandable-content pf-m-expanded"
|
|
996
996
|
id="toolbar-selected-filters-toggle-group-expanded-example-expandable-content"
|
|
997
997
|
>
|
|
998
|
-
<div class="pf-
|
|
998
|
+
<div class="pf-v6-c-toolbar__item pf-m-search-filter">
|
|
999
999
|
<div
|
|
1000
|
-
class="pf-
|
|
1000
|
+
class="pf-v6-c-input-group"
|
|
1001
1001
|
aria-label="search filter"
|
|
1002
1002
|
role="group"
|
|
1003
1003
|
>
|
|
1004
|
-
<div class="pf-
|
|
1004
|
+
<div class="pf-v6-c-input-group__item">
|
|
1005
1005
|
<button
|
|
1006
|
-
class="pf-
|
|
1006
|
+
class="pf-v6-c-menu-toggle"
|
|
1007
1007
|
type="button"
|
|
1008
1008
|
aria-expanded="false"
|
|
1009
1009
|
id="toolbar-selected-filters-toggle-group-expanded-example-search-filter-menu"
|
|
1010
1010
|
>
|
|
1011
|
-
<span class="pf-
|
|
1011
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1012
1012
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
1013
1013
|
</span>
|
|
1014
|
-
<span class="pf-
|
|
1015
|
-
<span class="pf-
|
|
1016
|
-
<span class="pf-
|
|
1014
|
+
<span class="pf-v6-c-menu-toggle__text">Name</span>
|
|
1015
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1016
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1017
1017
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1018
1018
|
</span>
|
|
1019
1019
|
</span>
|
|
1020
1020
|
</button>
|
|
1021
1021
|
</div>
|
|
1022
|
-
<div class="pf-
|
|
1023
|
-
<div class="pf-
|
|
1024
|
-
<div class="pf-
|
|
1025
|
-
<span class="pf-
|
|
1026
|
-
<span class="pf-
|
|
1022
|
+
<div class="pf-v6-c-input-group__item pf-m-fill">
|
|
1023
|
+
<div class="pf-v6-c-text-input-group">
|
|
1024
|
+
<div class="pf-v6-c-text-input-group__main pf-m-icon">
|
|
1025
|
+
<span class="pf-v6-c-text-input-group__text">
|
|
1026
|
+
<span class="pf-v6-c-text-input-group__icon">
|
|
1027
1027
|
<i class="fas fa-fw fa-search"></i>
|
|
1028
1028
|
</span>
|
|
1029
1029
|
<input
|
|
1030
|
-
class="pf-
|
|
1030
|
+
class="pf-v6-c-text-input-group__text-input"
|
|
1031
1031
|
type="text"
|
|
1032
1032
|
placeholder="Filter by name"
|
|
1033
1033
|
value
|
|
@@ -1039,63 +1039,63 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1039
1039
|
</div>
|
|
1040
1040
|
</div>
|
|
1041
1041
|
</div>
|
|
1042
|
-
<div class="pf-
|
|
1043
|
-
<div class="pf-
|
|
1042
|
+
<div class="pf-v6-c-toolbar__group pf-m-filter-group">
|
|
1043
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1044
1044
|
<button
|
|
1045
|
-
class="pf-
|
|
1045
|
+
class="pf-v6-c-menu-toggle"
|
|
1046
1046
|
type="button"
|
|
1047
1047
|
aria-expanded="false"
|
|
1048
1048
|
id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-status"
|
|
1049
1049
|
>
|
|
1050
|
-
<span class="pf-
|
|
1051
|
-
<span class="pf-
|
|
1052
|
-
<span class="pf-
|
|
1050
|
+
<span class="pf-v6-c-menu-toggle__text">Status</span>
|
|
1051
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1052
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1053
1053
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1054
1054
|
</span>
|
|
1055
1055
|
</span>
|
|
1056
1056
|
</button>
|
|
1057
1057
|
</div>
|
|
1058
|
-
<div class="pf-
|
|
1058
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1059
1059
|
<button
|
|
1060
|
-
class="pf-
|
|
1060
|
+
class="pf-v6-c-menu-toggle"
|
|
1061
1061
|
type="button"
|
|
1062
1062
|
aria-expanded="false"
|
|
1063
1063
|
id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-risk"
|
|
1064
1064
|
>
|
|
1065
|
-
<span class="pf-
|
|
1066
|
-
<span class="pf-
|
|
1067
|
-
<span class="pf-
|
|
1065
|
+
<span class="pf-v6-c-menu-toggle__text">Risk</span>
|
|
1066
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1067
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1068
1068
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1069
1069
|
</span>
|
|
1070
1070
|
</span>
|
|
1071
1071
|
</button>
|
|
1072
1072
|
</div>
|
|
1073
1073
|
</div>
|
|
1074
|
-
<div class="pf-
|
|
1075
|
-
<div class="pf-
|
|
1076
|
-
<div class="pf-
|
|
1077
|
-
<div class="pf-
|
|
1078
|
-
<div class="pf-
|
|
1074
|
+
<div class="pf-v6-c-toolbar__group pf-m-chip-container">
|
|
1075
|
+
<div class="pf-v6-c-toolbar__group pf-m-grow">
|
|
1076
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1077
|
+
<div class="pf-v6-c-chip-group" role="group">
|
|
1078
|
+
<div class="pf-v6-c-chip-group__main">
|
|
1079
1079
|
<span
|
|
1080
|
-
class="pf-
|
|
1080
|
+
class="pf-v6-c-chip-group__label"
|
|
1081
1081
|
id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-status-chip-group-label"
|
|
1082
1082
|
>Status</span>
|
|
1083
1083
|
<ul
|
|
1084
|
-
class="pf-
|
|
1084
|
+
class="pf-v6-c-chip-group__list"
|
|
1085
1085
|
role="list"
|
|
1086
1086
|
aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-status-chip-group-label"
|
|
1087
1087
|
>
|
|
1088
|
-
<li class="pf-
|
|
1089
|
-
<div class="pf-
|
|
1090
|
-
<span class="pf-
|
|
1088
|
+
<li class="pf-v6-c-chip-group__list-item">
|
|
1089
|
+
<div class="pf-v6-c-chip">
|
|
1090
|
+
<span class="pf-v6-c-chip__content">
|
|
1091
1091
|
<span
|
|
1092
|
-
class="pf-
|
|
1092
|
+
class="pf-v6-c-chip__text"
|
|
1093
1093
|
id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-one"
|
|
1094
1094
|
>Chip one</span>
|
|
1095
1095
|
</span>
|
|
1096
|
-
<span class="pf-
|
|
1096
|
+
<span class="pf-v6-c-chip__actions">
|
|
1097
1097
|
<button
|
|
1098
|
-
class="pf-
|
|
1098
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1099
1099
|
type="button"
|
|
1100
1100
|
aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-one toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-one"
|
|
1101
1101
|
aria-label="Remove"
|
|
@@ -1106,17 +1106,17 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1106
1106
|
</span>
|
|
1107
1107
|
</div>
|
|
1108
1108
|
</li>
|
|
1109
|
-
<li class="pf-
|
|
1110
|
-
<div class="pf-
|
|
1111
|
-
<span class="pf-
|
|
1109
|
+
<li class="pf-v6-c-chip-group__list-item">
|
|
1110
|
+
<div class="pf-v6-c-chip">
|
|
1111
|
+
<span class="pf-v6-c-chip__content">
|
|
1112
1112
|
<span
|
|
1113
|
-
class="pf-
|
|
1113
|
+
class="pf-v6-c-chip__text"
|
|
1114
1114
|
id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-two"
|
|
1115
1115
|
>Chip two</span>
|
|
1116
1116
|
</span>
|
|
1117
|
-
<span class="pf-
|
|
1117
|
+
<span class="pf-v6-c-chip__actions">
|
|
1118
1118
|
<button
|
|
1119
|
-
class="pf-
|
|
1119
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1120
1120
|
type="button"
|
|
1121
1121
|
aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-two toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-two"
|
|
1122
1122
|
aria-label="Remove"
|
|
@@ -1127,17 +1127,17 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1127
1127
|
</span>
|
|
1128
1128
|
</div>
|
|
1129
1129
|
</li>
|
|
1130
|
-
<li class="pf-
|
|
1131
|
-
<div class="pf-
|
|
1132
|
-
<span class="pf-
|
|
1130
|
+
<li class="pf-v6-c-chip-group__list-item">
|
|
1131
|
+
<div class="pf-v6-c-chip">
|
|
1132
|
+
<span class="pf-v6-c-chip__content">
|
|
1133
1133
|
<span
|
|
1134
|
-
class="pf-
|
|
1134
|
+
class="pf-v6-c-chip__text"
|
|
1135
1135
|
id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-three"
|
|
1136
1136
|
>Chip three</span>
|
|
1137
1137
|
</span>
|
|
1138
|
-
<span class="pf-
|
|
1138
|
+
<span class="pf-v6-c-chip__actions">
|
|
1139
1139
|
<button
|
|
1140
|
-
class="pf-
|
|
1140
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1141
1141
|
type="button"
|
|
1142
1142
|
aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-three toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-three"
|
|
1143
1143
|
aria-label="Remove"
|
|
@@ -1152,29 +1152,29 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1152
1152
|
</div>
|
|
1153
1153
|
</div>
|
|
1154
1154
|
</div>
|
|
1155
|
-
<div class="pf-
|
|
1156
|
-
<div class="pf-
|
|
1157
|
-
<div class="pf-
|
|
1155
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1156
|
+
<div class="pf-v6-c-chip-group" role="group">
|
|
1157
|
+
<div class="pf-v6-c-chip-group__main">
|
|
1158
1158
|
<span
|
|
1159
|
-
class="pf-
|
|
1159
|
+
class="pf-v6-c-chip-group__label"
|
|
1160
1160
|
id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-risk-chip-group-label"
|
|
1161
1161
|
>Risk</span>
|
|
1162
1162
|
<ul
|
|
1163
|
-
class="pf-
|
|
1163
|
+
class="pf-v6-c-chip-group__list"
|
|
1164
1164
|
role="list"
|
|
1165
1165
|
aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-risk-chip-group-label"
|
|
1166
1166
|
>
|
|
1167
|
-
<li class="pf-
|
|
1168
|
-
<div class="pf-
|
|
1169
|
-
<span class="pf-
|
|
1167
|
+
<li class="pf-v6-c-chip-group__list-item">
|
|
1168
|
+
<div class="pf-v6-c-chip">
|
|
1169
|
+
<span class="pf-v6-c-chip__content">
|
|
1170
1170
|
<span
|
|
1171
|
-
class="pf-
|
|
1171
|
+
class="pf-v6-c-chip__text"
|
|
1172
1172
|
id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-one"
|
|
1173
1173
|
>Chip one</span>
|
|
1174
1174
|
</span>
|
|
1175
|
-
<span class="pf-
|
|
1175
|
+
<span class="pf-v6-c-chip__actions">
|
|
1176
1176
|
<button
|
|
1177
|
-
class="pf-
|
|
1177
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1178
1178
|
type="button"
|
|
1179
1179
|
aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-one toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-one"
|
|
1180
1180
|
aria-label="Remove"
|
|
@@ -1185,17 +1185,17 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1185
1185
|
</span>
|
|
1186
1186
|
</div>
|
|
1187
1187
|
</li>
|
|
1188
|
-
<li class="pf-
|
|
1189
|
-
<div class="pf-
|
|
1190
|
-
<span class="pf-
|
|
1188
|
+
<li class="pf-v6-c-chip-group__list-item">
|
|
1189
|
+
<div class="pf-v6-c-chip">
|
|
1190
|
+
<span class="pf-v6-c-chip__content">
|
|
1191
1191
|
<span
|
|
1192
|
-
class="pf-
|
|
1192
|
+
class="pf-v6-c-chip__text"
|
|
1193
1193
|
id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-two"
|
|
1194
1194
|
>Chip two</span>
|
|
1195
1195
|
</span>
|
|
1196
|
-
<span class="pf-
|
|
1196
|
+
<span class="pf-v6-c-chip__actions">
|
|
1197
1197
|
<button
|
|
1198
|
-
class="pf-
|
|
1198
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1199
1199
|
type="button"
|
|
1200
1200
|
aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-two toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-two"
|
|
1201
1201
|
aria-label="Remove"
|
|
@@ -1206,17 +1206,17 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1206
1206
|
</span>
|
|
1207
1207
|
</div>
|
|
1208
1208
|
</li>
|
|
1209
|
-
<li class="pf-
|
|
1210
|
-
<div class="pf-
|
|
1211
|
-
<span class="pf-
|
|
1209
|
+
<li class="pf-v6-c-chip-group__list-item">
|
|
1210
|
+
<div class="pf-v6-c-chip">
|
|
1211
|
+
<span class="pf-v6-c-chip__content">
|
|
1212
1212
|
<span
|
|
1213
|
-
class="pf-
|
|
1213
|
+
class="pf-v6-c-chip__text"
|
|
1214
1214
|
id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-three"
|
|
1215
1215
|
>Chip three</span>
|
|
1216
1216
|
</span>
|
|
1217
|
-
<span class="pf-
|
|
1217
|
+
<span class="pf-v6-c-chip__actions">
|
|
1218
1218
|
<button
|
|
1219
|
-
class="pf-
|
|
1219
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1220
1220
|
type="button"
|
|
1221
1221
|
aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-three toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-three"
|
|
1222
1222
|
aria-label="Remove"
|
|
@@ -1232,9 +1232,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1232
1232
|
</div>
|
|
1233
1233
|
</div>
|
|
1234
1234
|
</div>
|
|
1235
|
-
<div class="pf-
|
|
1235
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1236
1236
|
<button
|
|
1237
|
-
class="pf-
|
|
1237
|
+
class="pf-v6-c-button pf-m-link pf-m-inline"
|
|
1238
1238
|
type="button"
|
|
1239
1239
|
>Clear all filters</button>
|
|
1240
1240
|
</div>
|
|
@@ -1248,21 +1248,21 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1248
1248
|
### Selected filters on desktop (not responsive)
|
|
1249
1249
|
|
|
1250
1250
|
```html
|
|
1251
|
-
<div class="pf-
|
|
1252
|
-
<div class="pf-
|
|
1253
|
-
<div class="pf-
|
|
1254
|
-
<div class="pf-
|
|
1251
|
+
<div class="pf-v6-c-toolbar" id="toolbar-selected-filters-example">
|
|
1252
|
+
<div class="pf-v6-c-toolbar__content">
|
|
1253
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
1254
|
+
<div class="pf-v6-c-toolbar__item pf-m-bulk-select">
|
|
1255
1255
|
<div
|
|
1256
|
-
class="pf-
|
|
1256
|
+
class="pf-v6-c-menu-toggle pf-m-split-button"
|
|
1257
1257
|
id="toolbar-selected-filters-example-check"
|
|
1258
1258
|
>
|
|
1259
1259
|
<label
|
|
1260
|
-
class="pf-
|
|
1260
|
+
class="pf-v6-c-check pf-m-standalone"
|
|
1261
1261
|
id="toolbar-selected-filters-example-check-check"
|
|
1262
1262
|
for="toolbar-selected-filters-example-check-check-input"
|
|
1263
1263
|
>
|
|
1264
1264
|
<input
|
|
1265
|
-
class="pf-
|
|
1265
|
+
class="pf-v6-c-check__input"
|
|
1266
1266
|
type="checkbox"
|
|
1267
1267
|
id="toolbar-selected-filters-example-check-check-input"
|
|
1268
1268
|
name="toolbar-selected-filters-example-check-check-input"
|
|
@@ -1270,60 +1270,60 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1270
1270
|
/>
|
|
1271
1271
|
</label>
|
|
1272
1272
|
<button
|
|
1273
|
-
class="pf-
|
|
1273
|
+
class="pf-v6-c-menu-toggle__button"
|
|
1274
1274
|
type="button"
|
|
1275
1275
|
aria-expanded="false"
|
|
1276
1276
|
id="toolbar-selected-filters-example-menu-toggle-toggle-button"
|
|
1277
1277
|
aria-label="Menu toggle"
|
|
1278
1278
|
>
|
|
1279
|
-
<span class="pf-
|
|
1280
|
-
<span class="pf-
|
|
1279
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1280
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1281
1281
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1282
1282
|
</span>
|
|
1283
1283
|
</span>
|
|
1284
1284
|
</button>
|
|
1285
1285
|
</div>
|
|
1286
1286
|
</div>
|
|
1287
|
-
<div class="pf-
|
|
1288
|
-
<div class="pf-
|
|
1287
|
+
<div class="pf-v6-c-toolbar__group pf-m-toggle-group pf-m-show">
|
|
1288
|
+
<div class="pf-v6-c-toolbar__toggle pf-m-show">
|
|
1289
1289
|
<button
|
|
1290
|
-
class="pf-
|
|
1290
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1291
1291
|
type="button"
|
|
1292
1292
|
aria-expanded="false"
|
|
1293
1293
|
aria-label="Show filters"
|
|
1294
1294
|
aria-controls="toolbar-selected-filters-example-expandable-content"
|
|
1295
1295
|
>
|
|
1296
|
-
<span class="pf-
|
|
1296
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1297
1297
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
1298
1298
|
</span>
|
|
1299
1299
|
</button>
|
|
1300
1300
|
</div>
|
|
1301
|
-
<div class="pf-
|
|
1302
|
-
<div class="pf-
|
|
1301
|
+
<div class="pf-v6-c-toolbar__group pf-m-filter-group">
|
|
1302
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1303
1303
|
<button
|
|
1304
|
-
class="pf-
|
|
1304
|
+
class="pf-v6-c-menu-toggle"
|
|
1305
1305
|
type="button"
|
|
1306
1306
|
aria-expanded="false"
|
|
1307
1307
|
id="toolbar-selected-filters-example-menu-toggle-checkbox-status"
|
|
1308
1308
|
>
|
|
1309
|
-
<span class="pf-
|
|
1310
|
-
<span class="pf-
|
|
1311
|
-
<span class="pf-
|
|
1309
|
+
<span class="pf-v6-c-menu-toggle__text">Status</span>
|
|
1310
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1311
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1312
1312
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1313
1313
|
</span>
|
|
1314
1314
|
</span>
|
|
1315
1315
|
</button>
|
|
1316
1316
|
</div>
|
|
1317
|
-
<div class="pf-
|
|
1317
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1318
1318
|
<button
|
|
1319
|
-
class="pf-
|
|
1319
|
+
class="pf-v6-c-menu-toggle"
|
|
1320
1320
|
type="button"
|
|
1321
1321
|
aria-expanded="false"
|
|
1322
1322
|
id="toolbar-selected-filters-example-menu-toggle-checkbox-risk"
|
|
1323
1323
|
>
|
|
1324
|
-
<span class="pf-
|
|
1325
|
-
<span class="pf-
|
|
1326
|
-
<span class="pf-
|
|
1324
|
+
<span class="pf-v6-c-menu-toggle__text">Risk</span>
|
|
1325
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1326
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1327
1327
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1328
1328
|
</span>
|
|
1329
1329
|
</span>
|
|
@@ -1331,34 +1331,34 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1331
1331
|
</div>
|
|
1332
1332
|
</div>
|
|
1333
1333
|
</div>
|
|
1334
|
-
<div class="pf-
|
|
1334
|
+
<div class="pf-v6-c-toolbar__item pf-m-overflow-menu">
|
|
1335
1335
|
<div
|
|
1336
|
-
class="pf-
|
|
1336
|
+
class="pf-v6-c-overflow-menu"
|
|
1337
1337
|
id="toolbar-selected-filters-example-icon-button-overflow-menu"
|
|
1338
1338
|
>
|
|
1339
|
-
<div class="pf-
|
|
1340
|
-
<div class="pf-
|
|
1341
|
-
<div class="pf-
|
|
1339
|
+
<div class="pf-v6-c-overflow-menu__content">
|
|
1340
|
+
<div class="pf-v6-c-overflow-menu__group pf-m-icon-button-group">
|
|
1341
|
+
<div class="pf-v6-c-overflow-menu__item">
|
|
1342
1342
|
<button
|
|
1343
|
-
class="pf-
|
|
1343
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1344
1344
|
type="button"
|
|
1345
1345
|
aria-label="Edit"
|
|
1346
1346
|
>
|
|
1347
1347
|
<i class="fas fa-edit" aria-hidden="true"></i>
|
|
1348
1348
|
</button>
|
|
1349
1349
|
</div>
|
|
1350
|
-
<div class="pf-
|
|
1350
|
+
<div class="pf-v6-c-overflow-menu__item">
|
|
1351
1351
|
<button
|
|
1352
|
-
class="pf-
|
|
1352
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1353
1353
|
type="button"
|
|
1354
1354
|
aria-label="Clone"
|
|
1355
1355
|
>
|
|
1356
1356
|
<i class="fas fa-clone" aria-hidden="true"></i>
|
|
1357
1357
|
</button>
|
|
1358
1358
|
</div>
|
|
1359
|
-
<div class="pf-
|
|
1359
|
+
<div class="pf-v6-c-overflow-menu__item">
|
|
1360
1360
|
<button
|
|
1361
|
-
class="pf-
|
|
1361
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1362
1362
|
type="button"
|
|
1363
1363
|
aria-label="Sync"
|
|
1364
1364
|
>
|
|
@@ -1369,32 +1369,32 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1369
1369
|
</div>
|
|
1370
1370
|
</div>
|
|
1371
1371
|
</div>
|
|
1372
|
-
<div class="pf-
|
|
1372
|
+
<div class="pf-v6-c-toolbar__item pf-m-overflow-menu">
|
|
1373
1373
|
<div
|
|
1374
|
-
class="pf-
|
|
1374
|
+
class="pf-v6-c-overflow-menu"
|
|
1375
1375
|
id="toolbar-selected-filters-example-overflow-menu"
|
|
1376
1376
|
>
|
|
1377
|
-
<div class="pf-
|
|
1378
|
-
<div class="pf-
|
|
1379
|
-
<div class="pf-
|
|
1377
|
+
<div class="pf-v6-c-overflow-menu__content">
|
|
1378
|
+
<div class="pf-v6-c-overflow-menu__group pf-m-button-group">
|
|
1379
|
+
<div class="pf-v6-c-overflow-menu__item">
|
|
1380
1380
|
<button
|
|
1381
|
-
class="pf-
|
|
1381
|
+
class="pf-v6-c-button pf-m-primary"
|
|
1382
1382
|
type="button"
|
|
1383
1383
|
>Primary</button>
|
|
1384
1384
|
</div>
|
|
1385
|
-
<div class="pf-
|
|
1385
|
+
<div class="pf-v6-c-overflow-menu__item">
|
|
1386
1386
|
<button
|
|
1387
|
-
class="pf-
|
|
1387
|
+
class="pf-v6-c-button pf-m-secondary"
|
|
1388
1388
|
type="button"
|
|
1389
1389
|
>Secondary</button>
|
|
1390
1390
|
</div>
|
|
1391
1391
|
</div>
|
|
1392
1392
|
</div>
|
|
1393
1393
|
|
|
1394
|
-
<div class="pf-
|
|
1395
|
-
<div class="pf-
|
|
1394
|
+
<div class="pf-v6-c-overflow-menu__control">
|
|
1395
|
+
<div class="pf-v6-c-dropdown">
|
|
1396
1396
|
<button
|
|
1397
|
-
class="pf-
|
|
1397
|
+
class="pf-v6-c-button pf-v5-c-dropdown__toggle pf-m-plain"
|
|
1398
1398
|
type="button"
|
|
1399
1399
|
id="toolbar-selected-filters-example-overflow-menu-dropdown-toggle"
|
|
1400
1400
|
aria-label="Overflow menu"
|
|
@@ -1403,7 +1403,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1403
1403
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1404
1404
|
</button>
|
|
1405
1405
|
<ul
|
|
1406
|
-
class="pf-
|
|
1406
|
+
class="pf-v6-c-dropdown__menu"
|
|
1407
1407
|
role="menu"
|
|
1408
1408
|
aria-labelledby="toolbar-selected-filters-example-overflow-menu-dropdown-toggle"
|
|
1409
1409
|
hidden
|
|
@@ -1411,7 +1411,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1411
1411
|
<li role="none">
|
|
1412
1412
|
<button
|
|
1413
1413
|
role="menuitem"
|
|
1414
|
-
class="pf-
|
|
1414
|
+
class="pf-v6-c-dropdown__menu-item"
|
|
1415
1415
|
>Tertiary</button>
|
|
1416
1416
|
</li>
|
|
1417
1417
|
</ul>
|
|
@@ -1421,32 +1421,32 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1421
1421
|
</div>
|
|
1422
1422
|
</div>
|
|
1423
1423
|
</div>
|
|
1424
|
-
<div class="pf-
|
|
1425
|
-
<div class="pf-
|
|
1426
|
-
<div class="pf-
|
|
1427
|
-
<div class="pf-
|
|
1428
|
-
<div class="pf-
|
|
1429
|
-
<div class="pf-
|
|
1424
|
+
<div class="pf-v6-c-toolbar__content pf-m-chip-container">
|
|
1425
|
+
<div class="pf-v6-c-toolbar__group">
|
|
1426
|
+
<div class="pf-v6-c-toolbar__group">
|
|
1427
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1428
|
+
<div class="pf-v6-c-chip-group" role="group">
|
|
1429
|
+
<div class="pf-v6-c-chip-group__main">
|
|
1430
1430
|
<span
|
|
1431
|
-
class="pf-
|
|
1431
|
+
class="pf-v6-c-chip-group__label"
|
|
1432
1432
|
id="toolbar-selected-filters-example-chip-group-status-chip-group-label"
|
|
1433
1433
|
>Status</span>
|
|
1434
1434
|
<ul
|
|
1435
|
-
class="pf-
|
|
1435
|
+
class="pf-v6-c-chip-group__list"
|
|
1436
1436
|
role="list"
|
|
1437
1437
|
aria-labelledby="toolbar-selected-filters-example-chip-group-status-chip-group-label"
|
|
1438
1438
|
>
|
|
1439
|
-
<li class="pf-
|
|
1440
|
-
<div class="pf-
|
|
1441
|
-
<span class="pf-
|
|
1439
|
+
<li class="pf-v6-c-chip-group__list-item">
|
|
1440
|
+
<div class="pf-v6-c-chip">
|
|
1441
|
+
<span class="pf-v6-c-chip__content">
|
|
1442
1442
|
<span
|
|
1443
|
-
class="pf-
|
|
1443
|
+
class="pf-v6-c-chip__text"
|
|
1444
1444
|
id="toolbar-selected-filters-example-chip-group-statuschip-one"
|
|
1445
1445
|
>Chip one</span>
|
|
1446
1446
|
</span>
|
|
1447
|
-
<span class="pf-
|
|
1447
|
+
<span class="pf-v6-c-chip__actions">
|
|
1448
1448
|
<button
|
|
1449
|
-
class="pf-
|
|
1449
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1450
1450
|
type="button"
|
|
1451
1451
|
aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-one toolbar-selected-filters-example-chip-group-statuschip-one"
|
|
1452
1452
|
aria-label="Remove"
|
|
@@ -1457,17 +1457,17 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1457
1457
|
</span>
|
|
1458
1458
|
</div>
|
|
1459
1459
|
</li>
|
|
1460
|
-
<li class="pf-
|
|
1461
|
-
<div class="pf-
|
|
1462
|
-
<span class="pf-
|
|
1460
|
+
<li class="pf-v6-c-chip-group__list-item">
|
|
1461
|
+
<div class="pf-v6-c-chip">
|
|
1462
|
+
<span class="pf-v6-c-chip__content">
|
|
1463
1463
|
<span
|
|
1464
|
-
class="pf-
|
|
1464
|
+
class="pf-v6-c-chip__text"
|
|
1465
1465
|
id="toolbar-selected-filters-example-chip-group-statuschip-two"
|
|
1466
1466
|
>Chip two</span>
|
|
1467
1467
|
</span>
|
|
1468
|
-
<span class="pf-
|
|
1468
|
+
<span class="pf-v6-c-chip__actions">
|
|
1469
1469
|
<button
|
|
1470
|
-
class="pf-
|
|
1470
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1471
1471
|
type="button"
|
|
1472
1472
|
aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-two toolbar-selected-filters-example-chip-group-statuschip-two"
|
|
1473
1473
|
aria-label="Remove"
|
|
@@ -1478,17 +1478,17 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1478
1478
|
</span>
|
|
1479
1479
|
</div>
|
|
1480
1480
|
</li>
|
|
1481
|
-
<li class="pf-
|
|
1482
|
-
<div class="pf-
|
|
1483
|
-
<span class="pf-
|
|
1481
|
+
<li class="pf-v6-c-chip-group__list-item">
|
|
1482
|
+
<div class="pf-v6-c-chip">
|
|
1483
|
+
<span class="pf-v6-c-chip__content">
|
|
1484
1484
|
<span
|
|
1485
|
-
class="pf-
|
|
1485
|
+
class="pf-v6-c-chip__text"
|
|
1486
1486
|
id="toolbar-selected-filters-example-chip-group-statuschip-three"
|
|
1487
1487
|
>Chip three</span>
|
|
1488
1488
|
</span>
|
|
1489
|
-
<span class="pf-
|
|
1489
|
+
<span class="pf-v6-c-chip__actions">
|
|
1490
1490
|
<button
|
|
1491
|
-
class="pf-
|
|
1491
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1492
1492
|
type="button"
|
|
1493
1493
|
aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-three toolbar-selected-filters-example-chip-group-statuschip-three"
|
|
1494
1494
|
aria-label="Remove"
|
|
@@ -1503,29 +1503,29 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1503
1503
|
</div>
|
|
1504
1504
|
</div>
|
|
1505
1505
|
</div>
|
|
1506
|
-
<div class="pf-
|
|
1507
|
-
<div class="pf-
|
|
1508
|
-
<div class="pf-
|
|
1506
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1507
|
+
<div class="pf-v6-c-chip-group" role="group">
|
|
1508
|
+
<div class="pf-v6-c-chip-group__main">
|
|
1509
1509
|
<span
|
|
1510
|
-
class="pf-
|
|
1510
|
+
class="pf-v6-c-chip-group__label"
|
|
1511
1511
|
id="toolbar-selected-filters-example-chip-group-risk-chip-group-label"
|
|
1512
1512
|
>Risk</span>
|
|
1513
1513
|
<ul
|
|
1514
|
-
class="pf-
|
|
1514
|
+
class="pf-v6-c-chip-group__list"
|
|
1515
1515
|
role="list"
|
|
1516
1516
|
aria-labelledby="toolbar-selected-filters-example-chip-group-risk-chip-group-label"
|
|
1517
1517
|
>
|
|
1518
|
-
<li class="pf-
|
|
1519
|
-
<div class="pf-
|
|
1520
|
-
<span class="pf-
|
|
1518
|
+
<li class="pf-v6-c-chip-group__list-item">
|
|
1519
|
+
<div class="pf-v6-c-chip">
|
|
1520
|
+
<span class="pf-v6-c-chip__content">
|
|
1521
1521
|
<span
|
|
1522
|
-
class="pf-
|
|
1522
|
+
class="pf-v6-c-chip__text"
|
|
1523
1523
|
id="toolbar-selected-filters-example-chip-group-riskchip-one"
|
|
1524
1524
|
>Chip one</span>
|
|
1525
1525
|
</span>
|
|
1526
|
-
<span class="pf-
|
|
1526
|
+
<span class="pf-v6-c-chip__actions">
|
|
1527
1527
|
<button
|
|
1528
|
-
class="pf-
|
|
1528
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1529
1529
|
type="button"
|
|
1530
1530
|
aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-one toolbar-selected-filters-example-chip-group-riskchip-one"
|
|
1531
1531
|
aria-label="Remove"
|
|
@@ -1536,17 +1536,17 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1536
1536
|
</span>
|
|
1537
1537
|
</div>
|
|
1538
1538
|
</li>
|
|
1539
|
-
<li class="pf-
|
|
1540
|
-
<div class="pf-
|
|
1541
|
-
<span class="pf-
|
|
1539
|
+
<li class="pf-v6-c-chip-group__list-item">
|
|
1540
|
+
<div class="pf-v6-c-chip">
|
|
1541
|
+
<span class="pf-v6-c-chip__content">
|
|
1542
1542
|
<span
|
|
1543
|
-
class="pf-
|
|
1543
|
+
class="pf-v6-c-chip__text"
|
|
1544
1544
|
id="toolbar-selected-filters-example-chip-group-riskchip-two"
|
|
1545
1545
|
>Chip two</span>
|
|
1546
1546
|
</span>
|
|
1547
|
-
<span class="pf-
|
|
1547
|
+
<span class="pf-v6-c-chip__actions">
|
|
1548
1548
|
<button
|
|
1549
|
-
class="pf-
|
|
1549
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1550
1550
|
type="button"
|
|
1551
1551
|
aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-two toolbar-selected-filters-example-chip-group-riskchip-two"
|
|
1552
1552
|
aria-label="Remove"
|
|
@@ -1557,17 +1557,17 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1557
1557
|
</span>
|
|
1558
1558
|
</div>
|
|
1559
1559
|
</li>
|
|
1560
|
-
<li class="pf-
|
|
1561
|
-
<div class="pf-
|
|
1562
|
-
<span class="pf-
|
|
1560
|
+
<li class="pf-v6-c-chip-group__list-item">
|
|
1561
|
+
<div class="pf-v6-c-chip">
|
|
1562
|
+
<span class="pf-v6-c-chip__content">
|
|
1563
1563
|
<span
|
|
1564
|
-
class="pf-
|
|
1564
|
+
class="pf-v6-c-chip__text"
|
|
1565
1565
|
id="toolbar-selected-filters-example-chip-group-riskchip-three"
|
|
1566
1566
|
>Chip three</span>
|
|
1567
1567
|
</span>
|
|
1568
|
-
<span class="pf-
|
|
1568
|
+
<span class="pf-v6-c-chip__actions">
|
|
1569
1569
|
<button
|
|
1570
|
-
class="pf-
|
|
1570
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1571
1571
|
type="button"
|
|
1572
1572
|
aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-three toolbar-selected-filters-example-chip-group-riskchip-three"
|
|
1573
1573
|
aria-label="Remove"
|
|
@@ -1583,9 +1583,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1583
1583
|
</div>
|
|
1584
1584
|
</div>
|
|
1585
1585
|
</div>
|
|
1586
|
-
<div class="pf-
|
|
1586
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1587
1587
|
<button
|
|
1588
|
-
class="pf-
|
|
1588
|
+
class="pf-v6-c-button pf-m-link pf-m-inline"
|
|
1589
1589
|
type="button"
|
|
1590
1590
|
>Clear all filters</button>
|
|
1591
1591
|
</div>
|
|
@@ -1600,84 +1600,84 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1600
1600
|
### Stacked on desktop
|
|
1601
1601
|
|
|
1602
1602
|
```html
|
|
1603
|
-
<div class="pf-
|
|
1604
|
-
<div class="pf-
|
|
1605
|
-
<div class="pf-
|
|
1606
|
-
<div class="pf-
|
|
1607
|
-
<div class="pf-
|
|
1603
|
+
<div class="pf-v6-c-toolbar" id="toolbar-stacked-example">
|
|
1604
|
+
<div class="pf-v6-c-toolbar__content">
|
|
1605
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
1606
|
+
<div class="pf-v6-c-toolbar__group pf-m-toggle-group pf-m-show-on-2xl">
|
|
1607
|
+
<div class="pf-v6-c-toolbar__toggle pf-m-show">
|
|
1608
1608
|
<button
|
|
1609
|
-
class="pf-
|
|
1609
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1610
1610
|
type="button"
|
|
1611
1611
|
aria-expanded="false"
|
|
1612
1612
|
aria-label="Show filters"
|
|
1613
1613
|
aria-controls="toolbar-stacked-example-expandable-content"
|
|
1614
1614
|
>
|
|
1615
|
-
<span class="pf-
|
|
1615
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1616
1616
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
1617
1617
|
</span>
|
|
1618
1618
|
</button>
|
|
1619
1619
|
</div>
|
|
1620
|
-
<div class="pf-
|
|
1620
|
+
<div class="pf-v6-c-toolbar__group">
|
|
1621
1621
|
<div
|
|
1622
|
-
class="pf-
|
|
1622
|
+
class="pf-v6-c-toolbar__item pf-m-label"
|
|
1623
1623
|
id="toolbar-stacked-example-menu-toggle-resource-label"
|
|
1624
1624
|
aria-hidden="true"
|
|
1625
1625
|
>Resource</div>
|
|
1626
1626
|
|
|
1627
|
-
<div class="pf-
|
|
1627
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1628
1628
|
<button
|
|
1629
|
-
class="pf-
|
|
1629
|
+
class="pf-v6-c-menu-toggle"
|
|
1630
1630
|
type="button"
|
|
1631
1631
|
aria-expanded="false"
|
|
1632
1632
|
id="toolbar-stacked-example-menu-toggle-resource"
|
|
1633
1633
|
>
|
|
1634
|
-
<span class="pf-
|
|
1635
|
-
<span class="pf-
|
|
1636
|
-
<span class="pf-
|
|
1634
|
+
<span class="pf-v6-c-menu-toggle__text">Pod</span>
|
|
1635
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1636
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1637
1637
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1638
1638
|
</span>
|
|
1639
1639
|
</span>
|
|
1640
1640
|
</button>
|
|
1641
1641
|
</div>
|
|
1642
1642
|
</div>
|
|
1643
|
-
<div class="pf-
|
|
1643
|
+
<div class="pf-v6-c-toolbar__group">
|
|
1644
1644
|
<div
|
|
1645
|
-
class="pf-
|
|
1645
|
+
class="pf-v6-c-toolbar__item pf-m-label"
|
|
1646
1646
|
id="toolbar-stacked-example-menu-toggle-status-label"
|
|
1647
1647
|
aria-hidden="true"
|
|
1648
1648
|
>Status</div>
|
|
1649
|
-
<div class="pf-
|
|
1649
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1650
1650
|
<button
|
|
1651
|
-
class="pf-
|
|
1651
|
+
class="pf-v6-c-menu-toggle"
|
|
1652
1652
|
type="button"
|
|
1653
1653
|
aria-expanded="false"
|
|
1654
1654
|
id="toolbar-stacked-example-menu-toggle-status"
|
|
1655
1655
|
>
|
|
1656
|
-
<span class="pf-
|
|
1657
|
-
<span class="pf-
|
|
1658
|
-
<span class="pf-
|
|
1656
|
+
<span class="pf-v6-c-menu-toggle__text">Running</span>
|
|
1657
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1658
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1659
1659
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1660
1660
|
</span>
|
|
1661
1661
|
</span>
|
|
1662
1662
|
</button>
|
|
1663
1663
|
</div>
|
|
1664
1664
|
</div>
|
|
1665
|
-
<div class="pf-
|
|
1665
|
+
<div class="pf-v6-c-toolbar__group">
|
|
1666
1666
|
<div
|
|
1667
|
-
class="pf-
|
|
1667
|
+
class="pf-v6-c-toolbar__item pf-m-label"
|
|
1668
1668
|
id="toolbar-stacked-example-menu-toggle-type-label"
|
|
1669
1669
|
aria-hidden="true"
|
|
1670
1670
|
>Type</div>
|
|
1671
|
-
<div class="pf-
|
|
1671
|
+
<div class="pf-v6-c-toolbar__item">
|
|
1672
1672
|
<button
|
|
1673
|
-
class="pf-
|
|
1673
|
+
class="pf-v6-c-menu-toggle"
|
|
1674
1674
|
type="button"
|
|
1675
1675
|
aria-expanded="false"
|
|
1676
1676
|
id="toolbar-stacked-example-menu-toggle-type"
|
|
1677
1677
|
>
|
|
1678
|
-
<span class="pf-
|
|
1679
|
-
<span class="pf-
|
|
1680
|
-
<span class="pf-
|
|
1678
|
+
<span class="pf-v6-c-menu-toggle__text">Any</span>
|
|
1679
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1680
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1681
1681
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1682
1682
|
</span>
|
|
1683
1683
|
</span>
|
|
@@ -1685,34 +1685,34 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1685
1685
|
</div>
|
|
1686
1686
|
</div>
|
|
1687
1687
|
</div>
|
|
1688
|
-
<div class="pf-
|
|
1688
|
+
<div class="pf-v6-c-toolbar__item pf-m-overflow-menu">
|
|
1689
1689
|
<div
|
|
1690
|
-
class="pf-
|
|
1690
|
+
class="pf-v6-c-overflow-menu"
|
|
1691
1691
|
id="toolbar-stacked-example-icon-button-overflow-menu"
|
|
1692
1692
|
>
|
|
1693
|
-
<div class="pf-
|
|
1694
|
-
<div class="pf-
|
|
1695
|
-
<div class="pf-
|
|
1693
|
+
<div class="pf-v6-c-overflow-menu__content">
|
|
1694
|
+
<div class="pf-v6-c-overflow-menu__group pf-m-icon-button-group">
|
|
1695
|
+
<div class="pf-v6-c-overflow-menu__item">
|
|
1696
1696
|
<button
|
|
1697
|
-
class="pf-
|
|
1697
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1698
1698
|
type="button"
|
|
1699
1699
|
aria-label="Edit"
|
|
1700
1700
|
>
|
|
1701
1701
|
<i class="fas fa-edit" aria-hidden="true"></i>
|
|
1702
1702
|
</button>
|
|
1703
1703
|
</div>
|
|
1704
|
-
<div class="pf-
|
|
1704
|
+
<div class="pf-v6-c-overflow-menu__item">
|
|
1705
1705
|
<button
|
|
1706
|
-
class="pf-
|
|
1706
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1707
1707
|
type="button"
|
|
1708
1708
|
aria-label="Clone"
|
|
1709
1709
|
>
|
|
1710
1710
|
<i class="fas fa-clone" aria-hidden="true"></i>
|
|
1711
1711
|
</button>
|
|
1712
1712
|
</div>
|
|
1713
|
-
<div class="pf-
|
|
1713
|
+
<div class="pf-v6-c-overflow-menu__item">
|
|
1714
1714
|
<button
|
|
1715
|
-
class="pf-
|
|
1715
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1716
1716
|
type="button"
|
|
1717
1717
|
aria-label="Sync"
|
|
1718
1718
|
>
|
|
@@ -1723,32 +1723,32 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1723
1723
|
</div>
|
|
1724
1724
|
</div>
|
|
1725
1725
|
</div>
|
|
1726
|
-
<div class="pf-
|
|
1726
|
+
<div class="pf-v6-c-toolbar__item pf-m-overflow-menu">
|
|
1727
1727
|
<div
|
|
1728
|
-
class="pf-
|
|
1728
|
+
class="pf-v6-c-overflow-menu"
|
|
1729
1729
|
id="toolbar-stacked-example-overflow-menu"
|
|
1730
1730
|
>
|
|
1731
|
-
<div class="pf-
|
|
1732
|
-
<div class="pf-
|
|
1733
|
-
<div class="pf-
|
|
1731
|
+
<div class="pf-v6-c-overflow-menu__content">
|
|
1732
|
+
<div class="pf-v6-c-overflow-menu__group pf-m-button-group">
|
|
1733
|
+
<div class="pf-v6-c-overflow-menu__item">
|
|
1734
1734
|
<button
|
|
1735
|
-
class="pf-
|
|
1735
|
+
class="pf-v6-c-button pf-m-primary"
|
|
1736
1736
|
type="button"
|
|
1737
1737
|
>Primary</button>
|
|
1738
1738
|
</div>
|
|
1739
|
-
<div class="pf-
|
|
1739
|
+
<div class="pf-v6-c-overflow-menu__item">
|
|
1740
1740
|
<button
|
|
1741
|
-
class="pf-
|
|
1741
|
+
class="pf-v6-c-button pf-m-secondary"
|
|
1742
1742
|
type="button"
|
|
1743
1743
|
>Secondary</button>
|
|
1744
1744
|
</div>
|
|
1745
1745
|
</div>
|
|
1746
1746
|
</div>
|
|
1747
1747
|
|
|
1748
|
-
<div class="pf-
|
|
1749
|
-
<div class="pf-
|
|
1748
|
+
<div class="pf-v6-c-overflow-menu__control">
|
|
1749
|
+
<div class="pf-v6-c-dropdown">
|
|
1750
1750
|
<button
|
|
1751
|
-
class="pf-
|
|
1751
|
+
class="pf-v6-c-button pf-v5-c-dropdown__toggle pf-m-plain"
|
|
1752
1752
|
type="button"
|
|
1753
1753
|
id="toolbar-stacked-example-overflow-menu-dropdown-toggle"
|
|
1754
1754
|
aria-label="Overflow menu"
|
|
@@ -1757,7 +1757,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1757
1757
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1758
1758
|
</button>
|
|
1759
1759
|
<ul
|
|
1760
|
-
class="pf-
|
|
1760
|
+
class="pf-v6-c-dropdown__menu"
|
|
1761
1761
|
role="menu"
|
|
1762
1762
|
aria-labelledby="toolbar-stacked-example-overflow-menu-dropdown-toggle"
|
|
1763
1763
|
hidden
|
|
@@ -1765,7 +1765,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1765
1765
|
<li role="none">
|
|
1766
1766
|
<button
|
|
1767
1767
|
role="menuitem"
|
|
1768
|
-
class="pf-
|
|
1768
|
+
class="pf-v6-c-dropdown__menu-item"
|
|
1769
1769
|
>Tertiary</button>
|
|
1770
1770
|
</li>
|
|
1771
1771
|
</ul>
|
|
@@ -1775,27 +1775,27 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1775
1775
|
</div>
|
|
1776
1776
|
</div>
|
|
1777
1777
|
<div
|
|
1778
|
-
class="pf-
|
|
1778
|
+
class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
|
|
1779
1779
|
id="toolbar-stacked-example-expandable-content"
|
|
1780
1780
|
hidden
|
|
1781
1781
|
></div>
|
|
1782
1782
|
</div>
|
|
1783
|
-
<hr class="pf-
|
|
1783
|
+
<hr class="pf-v6-c-divider" />
|
|
1784
1784
|
|
|
1785
|
-
<div class="pf-
|
|
1786
|
-
<div class="pf-
|
|
1787
|
-
<div class="pf-
|
|
1785
|
+
<div class="pf-v6-c-toolbar__content">
|
|
1786
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
1787
|
+
<div class="pf-v6-c-toolbar__item pf-m-bulk-select">
|
|
1788
1788
|
<div
|
|
1789
|
-
class="pf-
|
|
1789
|
+
class="pf-v6-c-menu-toggle pf-m-split-button"
|
|
1790
1790
|
id="toolbar-stacked-example-check"
|
|
1791
1791
|
>
|
|
1792
1792
|
<label
|
|
1793
|
-
class="pf-
|
|
1793
|
+
class="pf-v6-c-check pf-m-standalone"
|
|
1794
1794
|
id="toolbar-stacked-example-check-check"
|
|
1795
1795
|
for="toolbar-stacked-example-check-check-input"
|
|
1796
1796
|
>
|
|
1797
1797
|
<input
|
|
1798
|
-
class="pf-
|
|
1798
|
+
class="pf-v6-c-check__input"
|
|
1799
1799
|
type="checkbox"
|
|
1800
1800
|
id="toolbar-stacked-example-check-check-input"
|
|
1801
1801
|
name="toolbar-stacked-example-check-check-input"
|
|
@@ -1803,68 +1803,68 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1803
1803
|
/>
|
|
1804
1804
|
</label>
|
|
1805
1805
|
<button
|
|
1806
|
-
class="pf-
|
|
1806
|
+
class="pf-v6-c-menu-toggle__button"
|
|
1807
1807
|
type="button"
|
|
1808
1808
|
aria-expanded="false"
|
|
1809
1809
|
id="toolbar-stacked-example-menu-toggle-toggle-button"
|
|
1810
1810
|
aria-label="Menu toggle"
|
|
1811
1811
|
>
|
|
1812
|
-
<span class="pf-
|
|
1813
|
-
<span class="pf-
|
|
1812
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1813
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1814
1814
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1815
1815
|
</span>
|
|
1816
1816
|
</span>
|
|
1817
1817
|
</button>
|
|
1818
1818
|
</div>
|
|
1819
1819
|
</div>
|
|
1820
|
-
<div class="pf-
|
|
1821
|
-
<div class="pf-
|
|
1822
|
-
<div class="pf-
|
|
1823
|
-
<div class="pf-
|
|
1824
|
-
<div class="pf-
|
|
1820
|
+
<div class="pf-v6-c-toolbar__item pf-m-pagination">
|
|
1821
|
+
<div class="pf-v6-c-pagination" aria-label="Element pagination">
|
|
1822
|
+
<div class="pf-v6-c-pagination__total-items">37 items</div>
|
|
1823
|
+
<div class="pf-v6-c-pagination__page-menu">
|
|
1824
|
+
<div class="pf-v6-c-options-menu">
|
|
1825
1825
|
<button
|
|
1826
|
-
class="pf-
|
|
1826
|
+
class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
|
|
1827
1827
|
type="button"
|
|
1828
1828
|
id="toolbar-stacked-example-pagination-options-menu-toggle"
|
|
1829
1829
|
aria-haspopup="listbox"
|
|
1830
1830
|
aria-expanded="false"
|
|
1831
1831
|
>
|
|
1832
|
-
<span class="pf-
|
|
1832
|
+
<span class="pf-v6-c-options-menu__toggle-text">
|
|
1833
1833
|
<b>1 - 10</b> of
|
|
1834
1834
|
<b>36</b>
|
|
1835
1835
|
</span>
|
|
1836
|
-
<div class="pf-
|
|
1836
|
+
<div class="pf-v6-c-options-menu__toggle-icon">
|
|
1837
1837
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1838
1838
|
</div>
|
|
1839
1839
|
</button>
|
|
1840
1840
|
<ul
|
|
1841
|
-
class="pf-
|
|
1841
|
+
class="pf-v6-c-options-menu__menu"
|
|
1842
1842
|
role="menu"
|
|
1843
1843
|
aria-labelledby="toolbar-stacked-example-pagination-options-menu-toggle"
|
|
1844
1844
|
hidden
|
|
1845
1845
|
>
|
|
1846
1846
|
<li role="none">
|
|
1847
1847
|
<button
|
|
1848
|
-
class="pf-
|
|
1848
|
+
class="pf-v6-c-options-menu__menu-item"
|
|
1849
1849
|
type="button"
|
|
1850
1850
|
role="menuitem"
|
|
1851
1851
|
>5 per page</button>
|
|
1852
1852
|
</li>
|
|
1853
1853
|
<li role="none">
|
|
1854
1854
|
<button
|
|
1855
|
-
class="pf-
|
|
1855
|
+
class="pf-v6-c-options-menu__menu-item"
|
|
1856
1856
|
type="button"
|
|
1857
1857
|
role="menuitem"
|
|
1858
1858
|
>
|
|
1859
1859
|
10 per page
|
|
1860
|
-
<div class="pf-
|
|
1860
|
+
<div class="pf-v6-c-options-menu__menu-item-icon">
|
|
1861
1861
|
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1862
1862
|
</div>
|
|
1863
1863
|
</button>
|
|
1864
1864
|
</li>
|
|
1865
1865
|
<li role="none">
|
|
1866
1866
|
<button
|
|
1867
|
-
class="pf-
|
|
1867
|
+
class="pf-v6-c-options-menu__menu-item"
|
|
1868
1868
|
type="button"
|
|
1869
1869
|
role="menuitem"
|
|
1870
1870
|
>20 per page</button>
|
|
@@ -1872,10 +1872,10 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1872
1872
|
</ul>
|
|
1873
1873
|
</div>
|
|
1874
1874
|
</div>
|
|
1875
|
-
<nav class="pf-
|
|
1876
|
-
<div class="pf-
|
|
1875
|
+
<nav class="pf-v6-c-pagination__nav" aria-label="Pagination">
|
|
1876
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-first">
|
|
1877
1877
|
<button
|
|
1878
|
-
class="pf-
|
|
1878
|
+
class="pf-v6-c-button pf-m-plain pf-m-disabled"
|
|
1879
1879
|
type="button"
|
|
1880
1880
|
aria-label="Go to first page"
|
|
1881
1881
|
aria-disabled="true"
|
|
@@ -1883,9 +1883,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1883
1883
|
<i class="fas fa-angle-double-left" aria-hidden="true"></i>
|
|
1884
1884
|
</button>
|
|
1885
1885
|
</div>
|
|
1886
|
-
<div class="pf-
|
|
1886
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-prev">
|
|
1887
1887
|
<button
|
|
1888
|
-
class="pf-
|
|
1888
|
+
class="pf-v6-c-button pf-m-plain pf-m-disabled"
|
|
1889
1889
|
type="button"
|
|
1890
1890
|
aria-label="Go to previous page"
|
|
1891
1891
|
aria-disabled="true"
|
|
@@ -1895,10 +1895,10 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1895
1895
|
</div>
|
|
1896
1896
|
|
|
1897
1897
|
<div
|
|
1898
|
-
class="pf-
|
|
1898
|
+
class="pf-v6-c-pagination__nav-page-select"
|
|
1899
1899
|
aria-label="Current page 1 of 4"
|
|
1900
1900
|
>
|
|
1901
|
-
<span class="pf-
|
|
1901
|
+
<span class="pf-v6-c-form-control">
|
|
1902
1902
|
<input
|
|
1903
1903
|
aria-label="Current page"
|
|
1904
1904
|
type="number"
|
|
@@ -1909,18 +1909,18 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1909
1909
|
</span>
|
|
1910
1910
|
<span aria-hidden="true">of 4</span>
|
|
1911
1911
|
</div>
|
|
1912
|
-
<div class="pf-
|
|
1912
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-next">
|
|
1913
1913
|
<button
|
|
1914
|
-
class="pf-
|
|
1914
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1915
1915
|
type="button"
|
|
1916
1916
|
aria-label="Go to next page"
|
|
1917
1917
|
>
|
|
1918
1918
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1919
1919
|
</button>
|
|
1920
1920
|
</div>
|
|
1921
|
-
<div class="pf-
|
|
1921
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-last">
|
|
1922
1922
|
<button
|
|
1923
|
-
class="pf-
|
|
1923
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1924
1924
|
type="button"
|
|
1925
1925
|
aria-label="Go to last page"
|
|
1926
1926
|
>
|
|
@@ -1939,33 +1939,33 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1939
1939
|
### Stacked on mobile (filters collapsed, expandable content expanded)
|
|
1940
1940
|
|
|
1941
1941
|
```html
|
|
1942
|
-
<div class="pf-
|
|
1943
|
-
<div class="pf-
|
|
1944
|
-
<div class="pf-
|
|
1945
|
-
<div class="pf-
|
|
1946
|
-
<div class="pf-
|
|
1942
|
+
<div class="pf-v6-c-toolbar" id="toolbar-stacked-collapsed-example">
|
|
1943
|
+
<div class="pf-v6-c-toolbar__content">
|
|
1944
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
1945
|
+
<div class="pf-v6-c-toolbar__group pf-m-toggle-group">
|
|
1946
|
+
<div class="pf-v6-c-toolbar__toggle pf-m-show">
|
|
1947
1947
|
<button
|
|
1948
|
-
class="pf-
|
|
1948
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
|
|
1949
1949
|
type="button"
|
|
1950
1950
|
aria-expanded="true"
|
|
1951
1951
|
aria-label="Show filters"
|
|
1952
1952
|
aria-controls="toolbar-stacked-collapsed-example-expandable-content"
|
|
1953
1953
|
>
|
|
1954
|
-
<span class="pf-
|
|
1954
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1955
1955
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
1956
1956
|
</span>
|
|
1957
1957
|
</button>
|
|
1958
1958
|
</div>
|
|
1959
1959
|
</div>
|
|
1960
|
-
<div class="pf-
|
|
1960
|
+
<div class="pf-v6-c-toolbar__item pf-m-overflow-menu">
|
|
1961
1961
|
<div
|
|
1962
|
-
class="pf-
|
|
1962
|
+
class="pf-v6-c-overflow-menu"
|
|
1963
1963
|
id="toolbar-stacked-collapsed-example-icon-button-overflow-menu"
|
|
1964
1964
|
>
|
|
1965
|
-
<div class="pf-
|
|
1966
|
-
<div class="pf-
|
|
1965
|
+
<div class="pf-v6-c-overflow-menu__control">
|
|
1966
|
+
<div class="pf-v6-c-dropdown">
|
|
1967
1967
|
<button
|
|
1968
|
-
class="pf-
|
|
1968
|
+
class="pf-v6-c-button pf-v5-c-dropdown__toggle pf-m-plain"
|
|
1969
1969
|
type="button"
|
|
1970
1970
|
id="toolbar-stacked-collapsed-example-icon-button-overflow-menu-dropdown-toggle"
|
|
1971
1971
|
aria-label="Overflow menu"
|
|
@@ -1974,7 +1974,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1974
1974
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1975
1975
|
</button>
|
|
1976
1976
|
<ul
|
|
1977
|
-
class="pf-
|
|
1977
|
+
class="pf-v6-c-dropdown__menu"
|
|
1978
1978
|
role="menu"
|
|
1979
1979
|
aria-labelledby="toolbar-stacked-collapsed-example-icon-button-overflow-menu-dropdown-toggle"
|
|
1980
1980
|
hidden
|
|
@@ -1982,19 +1982,19 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1982
1982
|
<li role="none">
|
|
1983
1983
|
<button
|
|
1984
1984
|
role="menuitem"
|
|
1985
|
-
class="pf-
|
|
1985
|
+
class="pf-v6-c-dropdown__menu-item"
|
|
1986
1986
|
>Edit</button>
|
|
1987
1987
|
</li>
|
|
1988
1988
|
<li role="none">
|
|
1989
1989
|
<button
|
|
1990
1990
|
role="menuitem"
|
|
1991
|
-
class="pf-
|
|
1991
|
+
class="pf-v6-c-dropdown__menu-item"
|
|
1992
1992
|
>Clone</button>
|
|
1993
1993
|
</li>
|
|
1994
1994
|
<li role="none">
|
|
1995
1995
|
<button
|
|
1996
1996
|
role="menuitem"
|
|
1997
|
-
class="pf-
|
|
1997
|
+
class="pf-v6-c-dropdown__menu-item"
|
|
1998
1998
|
>Sync</button>
|
|
1999
1999
|
</li>
|
|
2000
2000
|
</ul>
|
|
@@ -2004,70 +2004,70 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
2004
2004
|
</div>
|
|
2005
2005
|
</div>
|
|
2006
2006
|
<div
|
|
2007
|
-
class="pf-
|
|
2007
|
+
class="pf-v6-c-toolbar__expandable-content pf-m-expanded"
|
|
2008
2008
|
id="toolbar-stacked-collapsed-example-expandable-content"
|
|
2009
2009
|
>
|
|
2010
|
-
<div class="pf-
|
|
2010
|
+
<div class="pf-v6-c-toolbar__group">
|
|
2011
2011
|
<div
|
|
2012
|
-
class="pf-
|
|
2012
|
+
class="pf-v6-c-toolbar__item pf-m-label"
|
|
2013
2013
|
id="toolbar-stacked-collapsed-example-menu-toggle-resource-label"
|
|
2014
2014
|
aria-hidden="true"
|
|
2015
2015
|
>Resource</div>
|
|
2016
2016
|
|
|
2017
|
-
<div class="pf-
|
|
2017
|
+
<div class="pf-v6-c-toolbar__item">
|
|
2018
2018
|
<button
|
|
2019
|
-
class="pf-
|
|
2019
|
+
class="pf-v6-c-menu-toggle"
|
|
2020
2020
|
type="button"
|
|
2021
2021
|
aria-expanded="false"
|
|
2022
2022
|
id="toolbar-stacked-collapsed-example-menu-toggle-resource"
|
|
2023
2023
|
>
|
|
2024
|
-
<span class="pf-
|
|
2025
|
-
<span class="pf-
|
|
2026
|
-
<span class="pf-
|
|
2024
|
+
<span class="pf-v6-c-menu-toggle__text">Pod</span>
|
|
2025
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
2026
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
2027
2027
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2028
2028
|
</span>
|
|
2029
2029
|
</span>
|
|
2030
2030
|
</button>
|
|
2031
2031
|
</div>
|
|
2032
2032
|
</div>
|
|
2033
|
-
<div class="pf-
|
|
2033
|
+
<div class="pf-v6-c-toolbar__group">
|
|
2034
2034
|
<div
|
|
2035
|
-
class="pf-
|
|
2035
|
+
class="pf-v6-c-toolbar__item pf-m-label"
|
|
2036
2036
|
id="-menu-toggle-status-label"
|
|
2037
2037
|
aria-hidden="true"
|
|
2038
2038
|
>Status</div>
|
|
2039
|
-
<div class="pf-
|
|
2039
|
+
<div class="pf-v6-c-toolbar__item">
|
|
2040
2040
|
<button
|
|
2041
|
-
class="pf-
|
|
2041
|
+
class="pf-v6-c-menu-toggle"
|
|
2042
2042
|
type="button"
|
|
2043
2043
|
aria-expanded="false"
|
|
2044
2044
|
id="-menu-toggle-status"
|
|
2045
2045
|
>
|
|
2046
|
-
<span class="pf-
|
|
2047
|
-
<span class="pf-
|
|
2048
|
-
<span class="pf-
|
|
2046
|
+
<span class="pf-v6-c-menu-toggle__text">Running</span>
|
|
2047
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
2048
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
2049
2049
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2050
2050
|
</span>
|
|
2051
2051
|
</span>
|
|
2052
2052
|
</button>
|
|
2053
2053
|
</div>
|
|
2054
2054
|
</div>
|
|
2055
|
-
<div class="pf-
|
|
2055
|
+
<div class="pf-v6-c-toolbar__group">
|
|
2056
2056
|
<div
|
|
2057
|
-
class="pf-
|
|
2057
|
+
class="pf-v6-c-toolbar__item pf-m-label"
|
|
2058
2058
|
id="-menu-toggle-type-label"
|
|
2059
2059
|
aria-hidden="true"
|
|
2060
2060
|
>Type</div>
|
|
2061
|
-
<div class="pf-
|
|
2061
|
+
<div class="pf-v6-c-toolbar__item">
|
|
2062
2062
|
<button
|
|
2063
|
-
class="pf-
|
|
2063
|
+
class="pf-v6-c-menu-toggle"
|
|
2064
2064
|
type="button"
|
|
2065
2065
|
aria-expanded="false"
|
|
2066
2066
|
id="-menu-toggle-type"
|
|
2067
2067
|
>
|
|
2068
|
-
<span class="pf-
|
|
2069
|
-
<span class="pf-
|
|
2070
|
-
<span class="pf-
|
|
2068
|
+
<span class="pf-v6-c-menu-toggle__text">Any</span>
|
|
2069
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
2070
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
2071
2071
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2072
2072
|
</span>
|
|
2073
2073
|
</span>
|
|
@@ -2076,22 +2076,22 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
2076
2076
|
</div>
|
|
2077
2077
|
</div>
|
|
2078
2078
|
</div>
|
|
2079
|
-
<hr class="pf-
|
|
2079
|
+
<hr class="pf-v6-c-divider" />
|
|
2080
2080
|
|
|
2081
|
-
<div class="pf-
|
|
2082
|
-
<div class="pf-
|
|
2083
|
-
<div class="pf-
|
|
2081
|
+
<div class="pf-v6-c-toolbar__content">
|
|
2082
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
2083
|
+
<div class="pf-v6-c-toolbar__item pf-m-bulk-select">
|
|
2084
2084
|
<div
|
|
2085
|
-
class="pf-
|
|
2085
|
+
class="pf-v6-c-menu-toggle pf-m-split-button"
|
|
2086
2086
|
id="toolbar-stacked-collapsed-example-check"
|
|
2087
2087
|
>
|
|
2088
2088
|
<label
|
|
2089
|
-
class="pf-
|
|
2089
|
+
class="pf-v6-c-check pf-m-standalone"
|
|
2090
2090
|
id="toolbar-stacked-collapsed-example-check-check"
|
|
2091
2091
|
for="toolbar-stacked-collapsed-example-check-check-input"
|
|
2092
2092
|
>
|
|
2093
2093
|
<input
|
|
2094
|
-
class="pf-
|
|
2094
|
+
class="pf-v6-c-check__input"
|
|
2095
2095
|
type="checkbox"
|
|
2096
2096
|
id="toolbar-stacked-collapsed-example-check-check-input"
|
|
2097
2097
|
name="toolbar-stacked-collapsed-example-check-check-input"
|
|
@@ -2099,68 +2099,68 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
2099
2099
|
/>
|
|
2100
2100
|
</label>
|
|
2101
2101
|
<button
|
|
2102
|
-
class="pf-
|
|
2102
|
+
class="pf-v6-c-menu-toggle__button"
|
|
2103
2103
|
type="button"
|
|
2104
2104
|
aria-expanded="false"
|
|
2105
2105
|
id="toolbar-stacked-collapsed-example-menu-toggle-toggle-button"
|
|
2106
2106
|
aria-label="Menu toggle"
|
|
2107
2107
|
>
|
|
2108
|
-
<span class="pf-
|
|
2109
|
-
<span class="pf-
|
|
2108
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
2109
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
2110
2110
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2111
2111
|
</span>
|
|
2112
2112
|
</span>
|
|
2113
2113
|
</button>
|
|
2114
2114
|
</div>
|
|
2115
2115
|
</div>
|
|
2116
|
-
<div class="pf-
|
|
2117
|
-
<div class="pf-
|
|
2118
|
-
<div class="pf-
|
|
2119
|
-
<div class="pf-
|
|
2120
|
-
<div class="pf-
|
|
2116
|
+
<div class="pf-v6-c-toolbar__item pf-m-pagination">
|
|
2117
|
+
<div class="pf-v6-c-pagination" aria-label="Element pagination">
|
|
2118
|
+
<div class="pf-v6-c-pagination__total-items">37 items</div>
|
|
2119
|
+
<div class="pf-v6-c-pagination__page-menu">
|
|
2120
|
+
<div class="pf-v6-c-options-menu">
|
|
2121
2121
|
<button
|
|
2122
|
-
class="pf-
|
|
2122
|
+
class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
|
|
2123
2123
|
type="button"
|
|
2124
2124
|
id="toolbar-stacked-collapsed-example-pagination-options-menu-toggle"
|
|
2125
2125
|
aria-haspopup="listbox"
|
|
2126
2126
|
aria-expanded="false"
|
|
2127
2127
|
>
|
|
2128
|
-
<span class="pf-
|
|
2128
|
+
<span class="pf-v6-c-options-menu__toggle-text">
|
|
2129
2129
|
<b>1 - 10</b> of
|
|
2130
2130
|
<b>36</b>
|
|
2131
2131
|
</span>
|
|
2132
|
-
<div class="pf-
|
|
2132
|
+
<div class="pf-v6-c-options-menu__toggle-icon">
|
|
2133
2133
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2134
2134
|
</div>
|
|
2135
2135
|
</button>
|
|
2136
2136
|
<ul
|
|
2137
|
-
class="pf-
|
|
2137
|
+
class="pf-v6-c-options-menu__menu"
|
|
2138
2138
|
role="menu"
|
|
2139
2139
|
aria-labelledby="toolbar-stacked-collapsed-example-pagination-options-menu-toggle"
|
|
2140
2140
|
hidden
|
|
2141
2141
|
>
|
|
2142
2142
|
<li role="none">
|
|
2143
2143
|
<button
|
|
2144
|
-
class="pf-
|
|
2144
|
+
class="pf-v6-c-options-menu__menu-item"
|
|
2145
2145
|
type="button"
|
|
2146
2146
|
role="menuitem"
|
|
2147
2147
|
>5 per page</button>
|
|
2148
2148
|
</li>
|
|
2149
2149
|
<li role="none">
|
|
2150
2150
|
<button
|
|
2151
|
-
class="pf-
|
|
2151
|
+
class="pf-v6-c-options-menu__menu-item"
|
|
2152
2152
|
type="button"
|
|
2153
2153
|
role="menuitem"
|
|
2154
2154
|
>
|
|
2155
2155
|
10 per page
|
|
2156
|
-
<div class="pf-
|
|
2156
|
+
<div class="pf-v6-c-options-menu__menu-item-icon">
|
|
2157
2157
|
<i class="fas fa-check" aria-hidden="true"></i>
|
|
2158
2158
|
</div>
|
|
2159
2159
|
</button>
|
|
2160
2160
|
</li>
|
|
2161
2161
|
<li role="none">
|
|
2162
2162
|
<button
|
|
2163
|
-
class="pf-
|
|
2163
|
+
class="pf-v6-c-options-menu__menu-item"
|
|
2164
2164
|
type="button"
|
|
2165
2165
|
role="menuitem"
|
|
2166
2166
|
>20 per page</button>
|
|
@@ -2168,10 +2168,10 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
2168
2168
|
</ul>
|
|
2169
2169
|
</div>
|
|
2170
2170
|
</div>
|
|
2171
|
-
<nav class="pf-
|
|
2172
|
-
<div class="pf-
|
|
2171
|
+
<nav class="pf-v6-c-pagination__nav" aria-label="Pagination">
|
|
2172
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-first">
|
|
2173
2173
|
<button
|
|
2174
|
-
class="pf-
|
|
2174
|
+
class="pf-v6-c-button pf-m-plain pf-m-disabled"
|
|
2175
2175
|
type="button"
|
|
2176
2176
|
aria-label="Go to first page"
|
|
2177
2177
|
aria-disabled="true"
|
|
@@ -2179,9 +2179,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
2179
2179
|
<i class="fas fa-angle-double-left" aria-hidden="true"></i>
|
|
2180
2180
|
</button>
|
|
2181
2181
|
</div>
|
|
2182
|
-
<div class="pf-
|
|
2182
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-prev">
|
|
2183
2183
|
<button
|
|
2184
|
-
class="pf-
|
|
2184
|
+
class="pf-v6-c-button pf-m-plain pf-m-disabled"
|
|
2185
2185
|
type="button"
|
|
2186
2186
|
aria-label="Go to previous page"
|
|
2187
2187
|
aria-disabled="true"
|
|
@@ -2191,10 +2191,10 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
2191
2191
|
</div>
|
|
2192
2192
|
|
|
2193
2193
|
<div
|
|
2194
|
-
class="pf-
|
|
2194
|
+
class="pf-v6-c-pagination__nav-page-select"
|
|
2195
2195
|
aria-label="Current page 1 of 4"
|
|
2196
2196
|
>
|
|
2197
|
-
<span class="pf-
|
|
2197
|
+
<span class="pf-v6-c-form-control">
|
|
2198
2198
|
<input
|
|
2199
2199
|
aria-label="Current page"
|
|
2200
2200
|
type="number"
|
|
@@ -2205,18 +2205,18 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
2205
2205
|
</span>
|
|
2206
2206
|
<span aria-hidden="true">of 4</span>
|
|
2207
2207
|
</div>
|
|
2208
|
-
<div class="pf-
|
|
2208
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-next">
|
|
2209
2209
|
<button
|
|
2210
|
-
class="pf-
|
|
2210
|
+
class="pf-v6-c-button pf-m-plain"
|
|
2211
2211
|
type="button"
|
|
2212
2212
|
aria-label="Go to next page"
|
|
2213
2213
|
>
|
|
2214
2214
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2215
2215
|
</button>
|
|
2216
2216
|
</div>
|
|
2217
|
-
<div class="pf-
|
|
2217
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-last">
|
|
2218
2218
|
<button
|
|
2219
|
-
class="pf-
|
|
2219
|
+
class="pf-v6-c-button pf-m-plain"
|
|
2220
2220
|
type="button"
|
|
2221
2221
|
aria-label="Go to last page"
|
|
2222
2222
|
>
|