@patternfly/patternfly 6.0.0-alpha.3 → 6.0.0-alpha.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -3
- package/assets/icons/iconUnicodes.json +1 -0
- package/assets/images/PF-Backdrop.svg +1 -0
- package/assets/images/PF-IconLogo-Reverse.svg +14 -0
- package/assets/images/PF-IconLogo.svg +17 -0
- package/assets/images/logo__pf--reverse-on-md.svg +1 -1
- package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
- package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
- package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
- package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
- package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
- package/assets/images/pf_logo_white.hbs +35 -0
- package/assets/images/pf_logo_white.svg +38 -0
- package/assets/pficon/pf-v5-pficon.woff2 +0 -0
- package/assets/pficon/pficon.scss +6 -129
- package/base/_common.scss +29 -4
- package/base/_globals.scss +5 -9
- package/base/_variables.scss +8 -6
- package/base/patternfly-common.css +24 -6
- package/base/patternfly-globals.css +5 -5
- package/base/patternfly-icons.css +5 -1
- package/base/patternfly-pf-icons.css +5 -1
- package/base/patternfly-variables.css +886 -771
- package/base/tokens/_tokens-dark.scss +322 -265
- package/base/tokens/_tokens-default.scss +426 -306
- package/base/tokens/_tokens-font.scss +59 -35
- package/base/tokens/_tokens-palette.scss +69 -71
- package/base/tokens/_workspace-overrides.scss +7 -0
- package/components/AboutModalBox/about-modal-box.css +80 -108
- package/components/AboutModalBox/about-modal-box.scss +64 -78
- package/components/Accordion/accordion.css +96 -175
- package/components/Accordion/accordion.scss +106 -193
- package/components/ActionList/action-list.css +2 -2
- package/components/ActionList/action-list.scss +2 -2
- package/components/Alert/alert-group.css +27 -20
- package/components/Alert/alert-group.scss +27 -20
- package/components/Alert/alert.css +74 -95
- package/components/Alert/alert.scss +76 -89
- package/components/AppLauncher/app-launcher.css +32 -23
- package/components/AppLauncher/app-launcher.scss +32 -23
- package/components/BackToTop/back-to-top.css +17 -15
- package/components/BackToTop/back-to-top.scss +14 -13
- package/components/Backdrop/backdrop.css +2 -2
- package/components/Backdrop/backdrop.scss +2 -2
- package/components/BackgroundImage/background-image.css +6 -3
- package/components/BackgroundImage/background-image.scss +8 -3
- package/components/Badge/badge.css +25 -17
- package/components/Badge/badge.scss +27 -19
- package/components/Banner/banner.css +91 -69
- package/components/Banner/banner.scss +95 -34
- package/components/Breadcrumb/breadcrumb.css +28 -19
- package/components/Breadcrumb/breadcrumb.scss +26 -19
- package/components/Button/button.css +35 -23
- package/components/Button/button.scss +36 -26
- package/components/Button/themes/dark/button.scss +1 -1
- package/components/CalendarMonth/calendar-month.css +25 -15
- package/components/CalendarMonth/calendar-month.scss +23 -15
- package/components/Card/card.css +25 -17
- package/components/Card/card.scss +24 -17
- package/components/Check/check.css +12 -10
- package/components/Check/check.scss +17 -12
- package/components/Chip/chip-group.css +6 -6
- package/components/Chip/chip-group.scss +6 -6
- package/components/Chip/chip.css +16 -9
- package/components/Chip/chip.scss +17 -9
- package/components/ClipboardCopy/clipboard-copy.css +19 -10
- package/components/ClipboardCopy/clipboard-copy.scss +16 -8
- package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +2 -2
- package/components/CodeBlock/code-block.css +6 -3
- package/components/CodeBlock/code-block.scss +6 -3
- package/components/CodeEditor/code-editor.css +31 -22
- package/components/CodeEditor/code-editor.scss +30 -21
- package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
- package/components/Content/content.css +100 -97
- package/components/Content/content.scss +101 -98
- package/components/ContextSelector/context-selector.css +41 -26
- package/components/ContextSelector/context-selector.scss +40 -25
- package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
- package/components/DataList/data-list-grid.css +21 -21
- package/components/DataList/data-list-grid.scss +3 -3
- package/components/DataList/data-list.css +69 -56
- package/components/DataList/data-list.scss +47 -35
- package/components/DatePicker/date-picker.css +8 -8
- package/components/DatePicker/date-picker.scss +8 -8
- package/components/DescriptionList/description-list.css +8 -5
- package/components/DescriptionList/description-list.scss +8 -5
- package/components/DragDrop/drag-drop.css +8 -8
- package/components/DragDrop/drag-drop.scss +8 -8
- package/components/Drawer/drawer.css +120 -62
- package/components/Drawer/drawer.scss +94 -44
- package/components/Dropdown/dropdown.css +76 -69
- package/components/Dropdown/dropdown.scss +67 -62
- package/components/DualListSelector/dual-list-selector.css +29 -15
- package/components/DualListSelector/dual-list-selector.scss +30 -15
- package/components/EmptyState/empty-state.css +7 -4
- package/components/EmptyState/empty-state.scss +7 -4
- package/components/ExpandableSection/expandable-section.css +75 -59
- package/components/ExpandableSection/expandable-section.scss +81 -72
- package/components/FileUpload/file-upload.css +9 -15
- package/components/FileUpload/file-upload.scss +9 -15
- package/components/Form/form.css +53 -50
- package/components/Form/form.scss +46 -44
- package/components/FormControl/form-control.css +18 -9
- package/components/FormControl/form-control.scss +18 -9
- package/components/HelperText/helper-text.css +1 -1
- package/components/HelperText/helper-text.scss +1 -1
- package/components/Hint/hint.css +37 -27
- package/components/Hint/hint.scss +37 -30
- package/components/Icon/icon.css +1 -1
- package/components/Icon/icon.scss +1 -1
- package/components/InlineEdit/inline-edit.css +9 -9
- package/components/InlineEdit/inline-edit.scss +9 -9
- package/components/InputGroup/input-group.css +12 -6
- package/components/InputGroup/input-group.scss +11 -5
- package/components/InputGroup/themes/dark/input-group.scss +1 -1
- package/components/JumpLinks/jump-links.css +27 -24
- package/components/JumpLinks/jump-links.scss +26 -24
- package/components/Label/label-group.css +13 -10
- package/components/Label/label-group.scss +13 -10
- package/components/Label/label.css +9 -9
- package/components/Label/label.scss +9 -9
- package/components/List/list.css +25 -25
- package/components/List/list.scss +26 -26
- package/components/LogViewer/log-viewer.css +14 -14
- package/components/LogViewer/log-viewer.scss +14 -14
- package/components/Login/login.css +104 -122
- package/components/Login/login.scss +92 -91
- package/components/Masthead/masthead.css +68 -125
- package/components/Masthead/masthead.scss +123 -153
- package/components/Menu/menu.css +82 -65
- package/components/Menu/menu.scss +85 -69
- package/components/MenuToggle/menu-toggle.css +89 -100
- package/components/MenuToggle/menu-toggle.scss +92 -112
- package/components/ModalBox/modal-box.css +76 -69
- package/components/ModalBox/modal-box.scss +74 -70
- package/components/MultipleFileUpload/multiple-file-upload.css +11 -8
- package/components/MultipleFileUpload/multiple-file-upload.scss +11 -8
- package/components/Nav/nav.css +162 -133
- package/components/Nav/nav.scss +162 -135
- package/components/Nav/themes/dark/nav.scss +2 -2
- package/components/NotificationBadge/notification-badge.css +66 -85
- package/components/NotificationBadge/notification-badge.scss +72 -103
- package/components/NotificationDrawer/notification-drawer.css +32 -19
- package/components/NotificationDrawer/notification-drawer.scss +30 -19
- package/components/NumberInput/number-input.css +2 -2
- package/components/NumberInput/number-input.scss +2 -2
- package/components/OptionsMenu/options-menu.css +43 -31
- package/components/OptionsMenu/options-menu.scss +43 -31
- package/components/OverflowMenu/overflow-menu.css +2 -2
- package/components/OverflowMenu/overflow-menu.scss +2 -2
- package/components/Page/page.css +232 -271
- package/components/Page/page.scss +180 -231
- package/components/Pagination/pagination.css +27 -17
- package/components/Pagination/pagination.scss +25 -17
- package/components/Panel/panel.css +13 -7
- package/components/Panel/panel.scss +13 -7
- package/components/Popover/popover.css +110 -87
- package/components/Popover/popover.scss +120 -109
- package/components/Progress/progress.css +9 -7
- package/components/Progress/progress.scss +12 -7
- package/components/ProgressStepper/progress-stepper.css +26 -20
- package/components/ProgressStepper/progress-stepper.scss +25 -19
- package/components/Radio/radio.css +16 -13
- package/components/Radio/radio.scss +20 -14
- package/components/Select/select.css +56 -47
- package/components/Select/select.scss +56 -47
- package/components/Sidebar/sidebar.css +11 -5
- package/components/Sidebar/sidebar.scss +11 -5
- package/components/SimpleList/simple-list.css +10 -4
- package/components/SimpleList/simple-list.scss +10 -4
- package/components/Skeleton/skeleton.css +6 -5
- package/components/Skeleton/skeleton.scss +4 -5
- package/components/SkipToContent/skip-to-content.css +9 -6
- package/components/SkipToContent/skip-to-content.scss +8 -6
- package/components/Slider/slider.css +47 -26
- package/components/Slider/slider.scss +56 -28
- package/components/Switch/switch.css +10 -6
- package/components/Switch/switch.scss +11 -7
- package/components/TabContent/tab-content.css +4 -1
- package/components/TabContent/tab-content.scss +4 -1
- package/components/Table/table-grid.css +264 -203
- package/components/Table/table-grid.scss +61 -47
- package/components/Table/table-scrollable.css +4 -4
- package/components/Table/table-scrollable.scss +6 -4
- package/components/Table/table-tree-view.css +112 -105
- package/components/Table/table-tree-view.scss +38 -33
- package/components/Table/table.css +176 -159
- package/components/Table/table.scss +177 -165
- package/components/Tabs/tabs.css +76 -48
- package/components/Tabs/tabs.scss +74 -48
- package/components/TextInputGroup/text-input-group.css +15 -15
- package/components/TextInputGroup/text-input-group.scss +15 -15
- package/components/Tile/tile.css +10 -10
- package/components/Tile/tile.scss +10 -10
- package/components/Title/title.css +70 -19
- package/components/Title/title.scss +90 -20
- package/components/ToggleGroup/toggle-group.css +14 -11
- package/components/ToggleGroup/toggle-group.scss +14 -11
- package/components/Toolbar/toolbar.css +57 -44
- package/components/Toolbar/toolbar.scss +45 -26
- package/components/Tooltip/tooltip.css +76 -44
- package/components/Tooltip/tooltip.scss +93 -77
- package/components/TreeView/tree-view.css +48 -27
- package/components/TreeView/tree-view.scss +50 -28
- package/components/Truncate/truncate.css +9 -0
- package/components/Truncate/truncate.scss +16 -3
- package/components/Wizard/wizard.css +57 -36
- package/components/Wizard/wizard.scss +57 -36
- package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
- package/docs/components/Accordion/examples/Accordion.md +614 -416
- package/docs/components/Alert/examples/Alert.md +1 -1
- package/docs/components/Badge/examples/Badge.md +21 -0
- package/docs/components/Banner/examples/Banner.md +48 -25
- package/docs/components/Brand/examples/Brand.css +12 -0
- package/docs/components/Brand/examples/Brand.md +75 -32
- package/docs/components/Button/examples/Button.css +2 -2
- package/docs/components/Button/examples/Button.md +15 -3
- package/docs/components/Card/examples/Card.md +125 -17
- package/docs/components/Check/examples/Check.md +71 -59
- package/docs/components/Chip/examples/Chip.md +1 -1
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
- package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
- package/docs/components/DragDrop/examples/DragDrop.css +2 -2
- package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
- package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -24
- package/docs/components/Label/examples/Label.md +1 -1
- package/docs/components/LogViewer/examples/LogViewer.css +2 -2
- package/docs/components/LogViewer/examples/LogViewer.md +250 -160
- package/docs/components/Login/examples/Login.md +5 -0
- package/docs/components/Masthead/examples/masthead.md +7 -54
- package/docs/components/Menu/examples/Menu.css +8 -0
- package/docs/components/Menu/examples/Menu.md +594 -543
- package/docs/components/MenuToggle/examples/MenuToggle.md +151 -138
- package/docs/components/ModalBox/examples/ModalBox.css +3 -8
- package/docs/components/Nav/examples/Navigation.css +3 -25
- package/docs/components/Nav/examples/Navigation.md +239 -113
- package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
- package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
- package/docs/components/Page/examples/Page.css +0 -8
- package/docs/components/Page/examples/Page.md +22 -21
- package/docs/components/Popover/examples/Popover.css +4 -9
- package/docs/components/Popover/examples/Popover.md +1 -1
- package/docs/components/Radio/examples/Radio.md +63 -55
- package/docs/components/Select/deprecated/Select.md +184 -177
- package/docs/components/Table/examples/Table.css +2 -2
- package/docs/components/Table/examples/Table.md +2 -2
- package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
- package/docs/components/Tile/examples/Tile.css +1 -1
- package/docs/components/Title/examples/Title.md +18 -0
- package/docs/components/Toolbar/examples/Toolbar.md +570 -2803
- package/docs/components/Tooltip/examples/Tooltip.css +4 -0
- package/docs/components/Tooltip/examples/Tooltip.md +3 -1
- package/docs/components/Truncate/examples/Truncate.md +2 -2
- package/docs/demos/AboutModal/examples/AboutModal.md +85 -10
- package/docs/demos/Alert/examples/Alert.md +249 -24
- package/docs/demos/BackToTop/examples/BackToTop.md +83 -8
- package/docs/demos/Banner/examples/Banner.md +168 -16
- package/docs/demos/Card/examples/Card.css +3 -3
- package/docs/demos/Card/examples/Card.md +28 -12
- package/docs/demos/CardView/examples/CardView.md +139 -79
- package/docs/demos/ContextSelector/examples/ContextSelector.md +332 -32
- package/docs/demos/Dashboard/examples/Dashboard.md +86 -11
- package/docs/demos/DataList/examples/DataList.md +524 -354
- package/docs/demos/DescriptionList/examples/DescriptionList.md +249 -24
- package/docs/demos/Drawer/examples/Drawer.md +415 -40
- package/docs/demos/JumpLinks/examples/JumpLinks.md +498 -48
- package/docs/demos/Masthead/examples/Masthead.md +793 -277
- package/docs/demos/Modal/examples/Modal.md +498 -48
- package/docs/demos/Nav/examples/Nav.md +664 -64
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +420 -40
- package/docs/demos/Page/examples/Page.md +747 -72
- package/docs/demos/Page/examples/Penta.md +746 -0
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +2 -1
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +824 -451
- package/docs/demos/Skeleton/examples/Skeleton.md +90 -43
- package/docs/demos/Table/examples/Table.md +2313 -1887
- package/docs/demos/Tabs/examples/Tabs.md +528 -71
- package/docs/demos/Toolbar/examples/Toolbar.css +15 -0
- package/docs/demos/Toolbar/examples/Toolbar.md +870 -1044
- package/docs/demos/Wizard/examples/Wizard.md +747 -72
- package/docs/layouts/Flex/examples/Flex.md +5 -5
- package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
- package/icons/pficons.mjs +1 -0
- package/layouts/Flex/flex.css +115 -43
- package/layouts/Flex/flex.scss +20 -8
- package/package.json +9 -5
- package/patternfly-addons.css +732 -972
- package/patternfly-base-no-globals-theme-dark-unversioned.css +921 -784
- package/patternfly-base-no-globals.css +921 -784
- package/patternfly-base-theme-dark-unversioned.css +926 -789
- package/patternfly-base.css +926 -789
- package/patternfly-no-globals.css +4816 -4221
- package/patternfly-theme-dark-unversioned.css +4821 -4226
- package/patternfly.css +4821 -4226
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/functions.scss +6 -0
- package/sass-utilities/mixins.scss +62 -2
- package/sass-utilities/scss-variables.scss +8 -8
- package/sass-utilities/themes/dark/mixins.scss +3 -1
- package/utilities/Accessibility/accessibility.css +12 -12
- package/utilities/Spacing/spacing.css +720 -960
- package/utilities/Spacing/spacing.scss +4 -8
- package/base/themes/dark/_variables.scss +0 -102
- package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
- package/components/Accordion/themes/dark/accordion.scss +0 -9
- package/components/Alert/themes/dark/alert.scss +0 -17
- package/components/Badge/themes/dark/badge.scss +0 -9
- package/components/Banner/themes/dark/banner.scss +0 -14
- package/components/Hint/themes/dark/hint.scss +0 -8
- package/components/Login/themes/dark/login.scss +0 -12
- package/components/Masthead/themes/dark/masthead.scss +0 -14
- package/components/ModalBox/themes/dark/modal-box.scss +0 -7
- package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
- package/components/Page/themes/dark/page.scss +0 -69
- package/components/Popover/themes/dark/popover.scss +0 -11
- package/components/Tooltip/themes/dark/tooltip.scss +0 -8
- package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
|
@@ -214,181 +214,49 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
214
214
|
<div class="pf-v5-c-toolbar__content-section">
|
|
215
215
|
<div class="pf-v5-c-toolbar__group pf-m-filter-group">
|
|
216
216
|
<div class="pf-v5-c-toolbar__item">
|
|
217
|
-
<
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
<
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
aria-haspopup="true"
|
|
228
|
-
aria-expanded="false"
|
|
229
|
-
aria-labelledby="toolbar-group-types-example-select-checkbox-filter1-label toolbar-group-types-example-select-checkbox-filter1-toggle"
|
|
230
|
-
>
|
|
231
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
232
|
-
<span class="pf-v5-c-select__toggle-text">Filter 1</span>
|
|
233
|
-
</div>
|
|
234
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
235
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
217
|
+
<button
|
|
218
|
+
class="pf-v5-c-menu-toggle"
|
|
219
|
+
type="button"
|
|
220
|
+
aria-expanded="false"
|
|
221
|
+
id="toolbar-group-types-example-toggle-1"
|
|
222
|
+
>
|
|
223
|
+
<span class="pf-v5-c-menu-toggle__text">Filter 1</span>
|
|
224
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
225
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
226
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
236
227
|
</span>
|
|
237
|
-
</
|
|
238
|
-
|
|
239
|
-
<ul
|
|
240
|
-
class="pf-v5-c-select__menu"
|
|
241
|
-
role="listbox"
|
|
242
|
-
aria-labelledby="toolbar-group-types-example-select-checkbox-filter1-label"
|
|
243
|
-
hidden
|
|
244
|
-
>
|
|
245
|
-
<li role="presentation">
|
|
246
|
-
<button class="pf-v5-c-select__menu-item" role="option">Running</button>
|
|
247
|
-
</li>
|
|
248
|
-
<li role="presentation">
|
|
249
|
-
<button
|
|
250
|
-
class="pf-v5-c-select__menu-item pf-m-selected"
|
|
251
|
-
role="option"
|
|
252
|
-
aria-selected="true"
|
|
253
|
-
>
|
|
254
|
-
Stopped
|
|
255
|
-
<span class="pf-v5-c-select__menu-item-icon">
|
|
256
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
257
|
-
</span>
|
|
258
|
-
</button>
|
|
259
|
-
</li>
|
|
260
|
-
<li role="presentation">
|
|
261
|
-
<button class="pf-v5-c-select__menu-item" role="option">Down</button>
|
|
262
|
-
</li>
|
|
263
|
-
<li role="presentation">
|
|
264
|
-
<button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
|
|
265
|
-
</li>
|
|
266
|
-
<li role="presentation">
|
|
267
|
-
<button
|
|
268
|
-
class="pf-v5-c-select__menu-item"
|
|
269
|
-
role="option"
|
|
270
|
-
>Needs maintenance</button>
|
|
271
|
-
</li>
|
|
272
|
-
</ul>
|
|
273
|
-
</div>
|
|
228
|
+
</span>
|
|
229
|
+
</button>
|
|
274
230
|
</div>
|
|
275
231
|
<div class="pf-v5-c-toolbar__item">
|
|
276
|
-
<
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
<
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
aria-haspopup="true"
|
|
287
|
-
aria-expanded="false"
|
|
288
|
-
aria-labelledby="toolbar-group-types-example-select-checkbox-filter2-label toolbar-group-types-example-select-checkbox-filter2-toggle"
|
|
289
|
-
>
|
|
290
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
291
|
-
<span class="pf-v5-c-select__toggle-text">Filter 2</span>
|
|
292
|
-
</div>
|
|
293
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
294
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
232
|
+
<button
|
|
233
|
+
class="pf-v5-c-menu-toggle"
|
|
234
|
+
type="button"
|
|
235
|
+
aria-expanded="false"
|
|
236
|
+
id="toolbar-group-types-example-toggle-2"
|
|
237
|
+
>
|
|
238
|
+
<span class="pf-v5-c-menu-toggle__text">Filter 2</span>
|
|
239
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
240
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
241
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
295
242
|
</span>
|
|
296
|
-
</
|
|
297
|
-
|
|
298
|
-
<ul
|
|
299
|
-
class="pf-v5-c-select__menu"
|
|
300
|
-
role="listbox"
|
|
301
|
-
aria-labelledby="toolbar-group-types-example-select-checkbox-filter2-label"
|
|
302
|
-
hidden
|
|
303
|
-
>
|
|
304
|
-
<li role="presentation">
|
|
305
|
-
<button class="pf-v5-c-select__menu-item" role="option">Running</button>
|
|
306
|
-
</li>
|
|
307
|
-
<li role="presentation">
|
|
308
|
-
<button
|
|
309
|
-
class="pf-v5-c-select__menu-item pf-m-selected"
|
|
310
|
-
role="option"
|
|
311
|
-
aria-selected="true"
|
|
312
|
-
>
|
|
313
|
-
Stopped
|
|
314
|
-
<span class="pf-v5-c-select__menu-item-icon">
|
|
315
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
316
|
-
</span>
|
|
317
|
-
</button>
|
|
318
|
-
</li>
|
|
319
|
-
<li role="presentation">
|
|
320
|
-
<button class="pf-v5-c-select__menu-item" role="option">Down</button>
|
|
321
|
-
</li>
|
|
322
|
-
<li role="presentation">
|
|
323
|
-
<button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
|
|
324
|
-
</li>
|
|
325
|
-
<li role="presentation">
|
|
326
|
-
<button
|
|
327
|
-
class="pf-v5-c-select__menu-item"
|
|
328
|
-
role="option"
|
|
329
|
-
>Needs maintenance</button>
|
|
330
|
-
</li>
|
|
331
|
-
</ul>
|
|
332
|
-
</div>
|
|
243
|
+
</span>
|
|
244
|
+
</button>
|
|
333
245
|
</div>
|
|
334
246
|
<div class="pf-v5-c-toolbar__item">
|
|
335
|
-
<
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
<
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
aria-haspopup="true"
|
|
346
|
-
aria-expanded="false"
|
|
347
|
-
aria-labelledby="toolbar-group-types-example-select-checkbox-filter3-label toolbar-group-types-example-select-checkbox-filter3-toggle"
|
|
348
|
-
>
|
|
349
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
350
|
-
<span class="pf-v5-c-select__toggle-text">Filter 3</span>
|
|
351
|
-
</div>
|
|
352
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
353
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
247
|
+
<button
|
|
248
|
+
class="pf-v5-c-menu-toggle"
|
|
249
|
+
type="button"
|
|
250
|
+
aria-expanded="false"
|
|
251
|
+
id="toolbar-group-types-example-toggle-3"
|
|
252
|
+
>
|
|
253
|
+
<span class="pf-v5-c-menu-toggle__text">Filter 3</span>
|
|
254
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
255
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
256
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
354
257
|
</span>
|
|
355
|
-
</
|
|
356
|
-
|
|
357
|
-
<ul
|
|
358
|
-
class="pf-v5-c-select__menu"
|
|
359
|
-
role="listbox"
|
|
360
|
-
aria-labelledby="toolbar-group-types-example-select-checkbox-filter3-label"
|
|
361
|
-
hidden
|
|
362
|
-
>
|
|
363
|
-
<li role="presentation">
|
|
364
|
-
<button class="pf-v5-c-select__menu-item" role="option">Running</button>
|
|
365
|
-
</li>
|
|
366
|
-
<li role="presentation">
|
|
367
|
-
<button
|
|
368
|
-
class="pf-v5-c-select__menu-item pf-m-selected"
|
|
369
|
-
role="option"
|
|
370
|
-
aria-selected="true"
|
|
371
|
-
>
|
|
372
|
-
Stopped
|
|
373
|
-
<span class="pf-v5-c-select__menu-item-icon">
|
|
374
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
375
|
-
</span>
|
|
376
|
-
</button>
|
|
377
|
-
</li>
|
|
378
|
-
<li role="presentation">
|
|
379
|
-
<button class="pf-v5-c-select__menu-item" role="option">Down</button>
|
|
380
|
-
</li>
|
|
381
|
-
<li role="presentation">
|
|
382
|
-
<button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
|
|
383
|
-
</li>
|
|
384
|
-
<li role="presentation">
|
|
385
|
-
<button
|
|
386
|
-
class="pf-v5-c-select__menu-item"
|
|
387
|
-
role="option"
|
|
388
|
-
>Needs maintenance</button>
|
|
389
|
-
</li>
|
|
390
|
-
</ul>
|
|
391
|
-
</div>
|
|
258
|
+
</span>
|
|
259
|
+
</button>
|
|
392
260
|
</div>
|
|
393
261
|
</div>
|
|
394
262
|
<div class="pf-v5-c-toolbar__group pf-m-icon-button-group">
|
|
@@ -454,10 +322,10 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
454
322
|
<div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-lg">
|
|
455
323
|
<div class="pf-v5-c-toolbar__toggle">
|
|
456
324
|
<button
|
|
457
|
-
class="pf-v5-c-
|
|
325
|
+
class="pf-v5-c-menu-toggle pf-m-plain"
|
|
458
326
|
type="button"
|
|
459
|
-
aria-label="Show filters"
|
|
460
327
|
aria-expanded="false"
|
|
328
|
+
aria-label="Show filters"
|
|
461
329
|
aria-controls="toolbar-toggle-group-example-expandable-content"
|
|
462
330
|
>
|
|
463
331
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
@@ -470,72 +338,22 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
470
338
|
role="group"
|
|
471
339
|
>
|
|
472
340
|
<div class="pf-v5-c-input-group__item">
|
|
473
|
-
<
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
<
|
|
480
|
-
class="
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
>
|
|
487
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
488
|
-
<span class="pf-v5-c-select__toggle-icon">
|
|
489
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
490
|
-
</span>
|
|
491
|
-
<span class="pf-v5-c-select__toggle-text">Name</span>
|
|
492
|
-
</div>
|
|
493
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
494
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
341
|
+
<button
|
|
342
|
+
class="pf-v5-c-menu-toggle"
|
|
343
|
+
type="button"
|
|
344
|
+
aria-expanded="false"
|
|
345
|
+
id="toolbar-toggle-group-example-search-filter-menu"
|
|
346
|
+
>
|
|
347
|
+
<span class="pf-v5-c-menu-toggle__icon">
|
|
348
|
+
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
349
|
+
</span>
|
|
350
|
+
<span class="pf-v5-c-menu-toggle__text">Name</span>
|
|
351
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
352
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
353
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
495
354
|
</span>
|
|
496
|
-
</
|
|
497
|
-
|
|
498
|
-
<ul
|
|
499
|
-
class="pf-v5-c-select__menu"
|
|
500
|
-
role="listbox"
|
|
501
|
-
aria-labelledby="toolbar-toggle-group-example-select-name-label"
|
|
502
|
-
hidden
|
|
503
|
-
>
|
|
504
|
-
<li role="presentation">
|
|
505
|
-
<button
|
|
506
|
-
class="pf-v5-c-select__menu-item"
|
|
507
|
-
role="option"
|
|
508
|
-
>Running</button>
|
|
509
|
-
</li>
|
|
510
|
-
<li role="presentation">
|
|
511
|
-
<button
|
|
512
|
-
class="pf-v5-c-select__menu-item pf-m-selected"
|
|
513
|
-
role="option"
|
|
514
|
-
aria-selected="true"
|
|
515
|
-
>
|
|
516
|
-
Stopped
|
|
517
|
-
<span class="pf-v5-c-select__menu-item-icon">
|
|
518
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
519
|
-
</span>
|
|
520
|
-
</button>
|
|
521
|
-
</li>
|
|
522
|
-
<li role="presentation">
|
|
523
|
-
<button class="pf-v5-c-select__menu-item" role="option">Down</button>
|
|
524
|
-
</li>
|
|
525
|
-
<li role="presentation">
|
|
526
|
-
<button
|
|
527
|
-
class="pf-v5-c-select__menu-item"
|
|
528
|
-
role="option"
|
|
529
|
-
>Degraded</button>
|
|
530
|
-
</li>
|
|
531
|
-
<li role="presentation">
|
|
532
|
-
<button
|
|
533
|
-
class="pf-v5-c-select__menu-item"
|
|
534
|
-
role="option"
|
|
535
|
-
>Needs maintenance</button>
|
|
536
|
-
</li>
|
|
537
|
-
</ul>
|
|
538
|
-
</div>
|
|
355
|
+
</span>
|
|
356
|
+
</button>
|
|
539
357
|
</div>
|
|
540
358
|
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
541
359
|
<div class="pf-v5-c-text-input-group">
|
|
@@ -559,210 +377,34 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
559
377
|
</div>
|
|
560
378
|
<div class="pf-v5-c-toolbar__group pf-m-filter-group">
|
|
561
379
|
<div class="pf-v5-c-toolbar__item">
|
|
562
|
-
<
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
<
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
aria-haspopup="true"
|
|
573
|
-
aria-expanded="false"
|
|
574
|
-
aria-labelledby="toolbar-toggle-group-example-select-checkbox-status-label toolbar-toggle-group-example-select-checkbox-status-toggle"
|
|
575
|
-
>
|
|
576
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
577
|
-
<span class="pf-v5-c-select__toggle-text">Status</span>
|
|
578
|
-
</div>
|
|
579
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
580
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
380
|
+
<button
|
|
381
|
+
class="pf-v5-c-menu-toggle"
|
|
382
|
+
type="button"
|
|
383
|
+
aria-expanded="false"
|
|
384
|
+
id="toolbar-toggle-group-example-menu-toggle-checkbox-status"
|
|
385
|
+
>
|
|
386
|
+
<span class="pf-v5-c-menu-toggle__text">Status</span>
|
|
387
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
388
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
389
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
581
390
|
</span>
|
|
582
|
-
</
|
|
583
|
-
|
|
584
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
585
|
-
<fieldset
|
|
586
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
587
|
-
aria-label="Select input"
|
|
588
|
-
>
|
|
589
|
-
<label
|
|
590
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
591
|
-
for="toolbar-toggle-group-example-select-checkbox-status-active"
|
|
592
|
-
>
|
|
593
|
-
<input
|
|
594
|
-
class="pf-v5-c-check__input"
|
|
595
|
-
type="checkbox"
|
|
596
|
-
id="toolbar-toggle-group-example-select-checkbox-status-active"
|
|
597
|
-
name="toolbar-toggle-group-example-select-checkbox-status-active"
|
|
598
|
-
/>
|
|
599
|
-
|
|
600
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
601
|
-
<span
|
|
602
|
-
class="pf-v5-c-check__description"
|
|
603
|
-
>This is a description</span>
|
|
604
|
-
</label>
|
|
605
|
-
<label
|
|
606
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
607
|
-
for="toolbar-toggle-group-example-select-checkbox-status-canceled"
|
|
608
|
-
>
|
|
609
|
-
<input
|
|
610
|
-
class="pf-v5-c-check__input"
|
|
611
|
-
type="checkbox"
|
|
612
|
-
id="toolbar-toggle-group-example-select-checkbox-status-canceled"
|
|
613
|
-
name="toolbar-toggle-group-example-select-checkbox-status-canceled"
|
|
614
|
-
/>
|
|
615
|
-
|
|
616
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
617
|
-
<span
|
|
618
|
-
class="pf-v5-c-check__description"
|
|
619
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
620
|
-
</label>
|
|
621
|
-
<label
|
|
622
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
623
|
-
for="toolbar-toggle-group-example-select-checkbox-status-paused"
|
|
624
|
-
>
|
|
625
|
-
<input
|
|
626
|
-
class="pf-v5-c-check__input"
|
|
627
|
-
type="checkbox"
|
|
628
|
-
id="toolbar-toggle-group-example-select-checkbox-status-paused"
|
|
629
|
-
name="toolbar-toggle-group-example-select-checkbox-status-paused"
|
|
630
|
-
/>
|
|
631
|
-
|
|
632
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
633
|
-
</label>
|
|
634
|
-
<label
|
|
635
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
636
|
-
for="toolbar-toggle-group-example-select-checkbox-status-warning"
|
|
637
|
-
>
|
|
638
|
-
<input
|
|
639
|
-
class="pf-v5-c-check__input"
|
|
640
|
-
type="checkbox"
|
|
641
|
-
id="toolbar-toggle-group-example-select-checkbox-status-warning"
|
|
642
|
-
name="toolbar-toggle-group-example-select-checkbox-status-warning"
|
|
643
|
-
/>
|
|
644
|
-
|
|
645
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
646
|
-
</label>
|
|
647
|
-
<label
|
|
648
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
649
|
-
for="toolbar-toggle-group-example-select-checkbox-status-restarted"
|
|
650
|
-
>
|
|
651
|
-
<input
|
|
652
|
-
class="pf-v5-c-check__input"
|
|
653
|
-
type="checkbox"
|
|
654
|
-
id="toolbar-toggle-group-example-select-checkbox-status-restarted"
|
|
655
|
-
name="toolbar-toggle-group-example-select-checkbox-status-restarted"
|
|
656
|
-
/>
|
|
657
|
-
|
|
658
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
659
|
-
</label>
|
|
660
|
-
</fieldset>
|
|
661
|
-
</div>
|
|
662
|
-
</div>
|
|
391
|
+
</span>
|
|
392
|
+
</button>
|
|
663
393
|
</div>
|
|
664
394
|
<div class="pf-v5-c-toolbar__item">
|
|
665
|
-
<
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
<
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
aria-haspopup="true"
|
|
676
|
-
aria-expanded="false"
|
|
677
|
-
aria-labelledby="toolbar-toggle-group-example-select-checkbox-risk-label toolbar-toggle-group-example-select-checkbox-risk-toggle"
|
|
678
|
-
>
|
|
679
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
680
|
-
<span class="pf-v5-c-select__toggle-text">Risk</span>
|
|
681
|
-
</div>
|
|
682
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
683
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
395
|
+
<button
|
|
396
|
+
class="pf-v5-c-menu-toggle"
|
|
397
|
+
type="button"
|
|
398
|
+
aria-expanded="false"
|
|
399
|
+
id="toolbar-toggle-group-example-menu-toggle-checkbox-risk"
|
|
400
|
+
>
|
|
401
|
+
<span class="pf-v5-c-menu-toggle__text">Risk</span>
|
|
402
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
403
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
404
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
684
405
|
</span>
|
|
685
|
-
</
|
|
686
|
-
|
|
687
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
688
|
-
<fieldset
|
|
689
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
690
|
-
aria-label="Select input"
|
|
691
|
-
>
|
|
692
|
-
<label
|
|
693
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
694
|
-
for="toolbar-toggle-group-example-select-checkbox-risk-active"
|
|
695
|
-
>
|
|
696
|
-
<input
|
|
697
|
-
class="pf-v5-c-check__input"
|
|
698
|
-
type="checkbox"
|
|
699
|
-
id="toolbar-toggle-group-example-select-checkbox-risk-active"
|
|
700
|
-
name="toolbar-toggle-group-example-select-checkbox-risk-active"
|
|
701
|
-
/>
|
|
702
|
-
|
|
703
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
704
|
-
<span
|
|
705
|
-
class="pf-v5-c-check__description"
|
|
706
|
-
>This is a description</span>
|
|
707
|
-
</label>
|
|
708
|
-
<label
|
|
709
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
710
|
-
for="toolbar-toggle-group-example-select-checkbox-risk-canceled"
|
|
711
|
-
>
|
|
712
|
-
<input
|
|
713
|
-
class="pf-v5-c-check__input"
|
|
714
|
-
type="checkbox"
|
|
715
|
-
id="toolbar-toggle-group-example-select-checkbox-risk-canceled"
|
|
716
|
-
name="toolbar-toggle-group-example-select-checkbox-risk-canceled"
|
|
717
|
-
/>
|
|
718
|
-
|
|
719
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
720
|
-
<span
|
|
721
|
-
class="pf-v5-c-check__description"
|
|
722
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
723
|
-
</label>
|
|
724
|
-
<label
|
|
725
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
726
|
-
for="toolbar-toggle-group-example-select-checkbox-risk-paused"
|
|
727
|
-
>
|
|
728
|
-
<input
|
|
729
|
-
class="pf-v5-c-check__input"
|
|
730
|
-
type="checkbox"
|
|
731
|
-
id="toolbar-toggle-group-example-select-checkbox-risk-paused"
|
|
732
|
-
name="toolbar-toggle-group-example-select-checkbox-risk-paused"
|
|
733
|
-
/>
|
|
734
|
-
|
|
735
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
736
|
-
</label>
|
|
737
|
-
<label
|
|
738
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
739
|
-
for="toolbar-toggle-group-example-select-checkbox-risk-warning"
|
|
740
|
-
>
|
|
741
|
-
<input
|
|
742
|
-
class="pf-v5-c-check__input"
|
|
743
|
-
type="checkbox"
|
|
744
|
-
id="toolbar-toggle-group-example-select-checkbox-risk-warning"
|
|
745
|
-
name="toolbar-toggle-group-example-select-checkbox-risk-warning"
|
|
746
|
-
/>
|
|
747
|
-
|
|
748
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
749
|
-
</label>
|
|
750
|
-
<label
|
|
751
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
752
|
-
for="toolbar-toggle-group-example-select-checkbox-risk-restarted"
|
|
753
|
-
>
|
|
754
|
-
<input
|
|
755
|
-
class="pf-v5-c-check__input"
|
|
756
|
-
type="checkbox"
|
|
757
|
-
id="toolbar-toggle-group-example-select-checkbox-risk-restarted"
|
|
758
|
-
name="toolbar-toggle-group-example-select-checkbox-risk-restarted"
|
|
759
|
-
/>
|
|
760
|
-
|
|
761
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
762
|
-
</label>
|
|
763
|
-
</fieldset>
|
|
764
|
-
</div>
|
|
765
|
-
</div>
|
|
406
|
+
</span>
|
|
407
|
+
</button>
|
|
766
408
|
</div>
|
|
767
409
|
</div>
|
|
768
410
|
</div>
|
|
@@ -784,12 +426,12 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
784
426
|
<div class="pf-v5-c-toolbar__content">
|
|
785
427
|
<div class="pf-v5-c-toolbar__content-section">
|
|
786
428
|
<div class="pf-v5-c-toolbar__group pf-m-toggle-group">
|
|
787
|
-
<div class="pf-v5-c-toolbar__toggle
|
|
429
|
+
<div class="pf-v5-c-toolbar__toggle">
|
|
788
430
|
<button
|
|
789
|
-
class="pf-v5-c-
|
|
431
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
|
|
790
432
|
type="button"
|
|
791
|
-
aria-label="Show filters"
|
|
792
433
|
aria-expanded="true"
|
|
434
|
+
aria-label="Show filters"
|
|
793
435
|
aria-controls="toolbar-toggle-group-collapsed-example-expandable-content"
|
|
794
436
|
>
|
|
795
437
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
@@ -808,72 +450,22 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
808
450
|
role="group"
|
|
809
451
|
>
|
|
810
452
|
<div class="pf-v5-c-input-group__item">
|
|
811
|
-
<
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
<
|
|
818
|
-
class="
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
>
|
|
825
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
826
|
-
<span class="pf-v5-c-select__toggle-icon">
|
|
827
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
828
|
-
</span>
|
|
829
|
-
<span class="pf-v5-c-select__toggle-text">Name</span>
|
|
830
|
-
</div>
|
|
831
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
832
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
453
|
+
<button
|
|
454
|
+
class="pf-v5-c-menu-toggle"
|
|
455
|
+
type="button"
|
|
456
|
+
aria-expanded="false"
|
|
457
|
+
id="toolbar-toggle-group-collapsed-example-search-filter-menu"
|
|
458
|
+
>
|
|
459
|
+
<span class="pf-v5-c-menu-toggle__icon">
|
|
460
|
+
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
461
|
+
</span>
|
|
462
|
+
<span class="pf-v5-c-menu-toggle__text">Name</span>
|
|
463
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
464
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
465
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
833
466
|
</span>
|
|
834
|
-
</
|
|
835
|
-
|
|
836
|
-
<ul
|
|
837
|
-
class="pf-v5-c-select__menu"
|
|
838
|
-
role="listbox"
|
|
839
|
-
aria-labelledby="toolbar-toggle-group-collapsed-example-select-name-label"
|
|
840
|
-
hidden
|
|
841
|
-
>
|
|
842
|
-
<li role="presentation">
|
|
843
|
-
<button
|
|
844
|
-
class="pf-v5-c-select__menu-item"
|
|
845
|
-
role="option"
|
|
846
|
-
>Running</button>
|
|
847
|
-
</li>
|
|
848
|
-
<li role="presentation">
|
|
849
|
-
<button
|
|
850
|
-
class="pf-v5-c-select__menu-item pf-m-selected"
|
|
851
|
-
role="option"
|
|
852
|
-
aria-selected="true"
|
|
853
|
-
>
|
|
854
|
-
Stopped
|
|
855
|
-
<span class="pf-v5-c-select__menu-item-icon">
|
|
856
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
857
|
-
</span>
|
|
858
|
-
</button>
|
|
859
|
-
</li>
|
|
860
|
-
<li role="presentation">
|
|
861
|
-
<button class="pf-v5-c-select__menu-item" role="option">Down</button>
|
|
862
|
-
</li>
|
|
863
|
-
<li role="presentation">
|
|
864
|
-
<button
|
|
865
|
-
class="pf-v5-c-select__menu-item"
|
|
866
|
-
role="option"
|
|
867
|
-
>Degraded</button>
|
|
868
|
-
</li>
|
|
869
|
-
<li role="presentation">
|
|
870
|
-
<button
|
|
871
|
-
class="pf-v5-c-select__menu-item"
|
|
872
|
-
role="option"
|
|
873
|
-
>Needs maintenance</button>
|
|
874
|
-
</li>
|
|
875
|
-
</ul>
|
|
876
|
-
</div>
|
|
467
|
+
</span>
|
|
468
|
+
</button>
|
|
877
469
|
</div>
|
|
878
470
|
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
879
471
|
<div class="pf-v5-c-text-input-group">
|
|
@@ -897,206 +489,34 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
897
489
|
</div>
|
|
898
490
|
<div class="pf-v5-c-toolbar__group pf-m-filter-group">
|
|
899
491
|
<div class="pf-v5-c-toolbar__item">
|
|
900
|
-
<
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
<
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
aria-haspopup="true"
|
|
911
|
-
aria-expanded="false"
|
|
912
|
-
aria-labelledby="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-label toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-toggle"
|
|
913
|
-
>
|
|
914
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
915
|
-
<span class="pf-v5-c-select__toggle-text">Status</span>
|
|
916
|
-
</div>
|
|
917
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
918
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
492
|
+
<button
|
|
493
|
+
class="pf-v5-c-menu-toggle"
|
|
494
|
+
type="button"
|
|
495
|
+
aria-expanded="false"
|
|
496
|
+
id="toolbar-toggle-group-collapsed-example-menu-toggle-checkbox-status"
|
|
497
|
+
>
|
|
498
|
+
<span class="pf-v5-c-menu-toggle__text">Status</span>
|
|
499
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
500
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
501
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
919
502
|
</span>
|
|
920
|
-
</
|
|
921
|
-
|
|
922
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
923
|
-
<fieldset
|
|
924
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
925
|
-
aria-label="Select input"
|
|
926
|
-
>
|
|
927
|
-
<label
|
|
928
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
929
|
-
for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active"
|
|
930
|
-
>
|
|
931
|
-
<input
|
|
932
|
-
class="pf-v5-c-check__input"
|
|
933
|
-
type="checkbox"
|
|
934
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active"
|
|
935
|
-
name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active"
|
|
936
|
-
/>
|
|
937
|
-
|
|
938
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
939
|
-
<span class="pf-v5-c-check__description">This is a description</span>
|
|
940
|
-
</label>
|
|
941
|
-
<label
|
|
942
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
943
|
-
for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled"
|
|
944
|
-
>
|
|
945
|
-
<input
|
|
946
|
-
class="pf-v5-c-check__input"
|
|
947
|
-
type="checkbox"
|
|
948
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled"
|
|
949
|
-
name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled"
|
|
950
|
-
/>
|
|
951
|
-
|
|
952
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
953
|
-
<span
|
|
954
|
-
class="pf-v5-c-check__description"
|
|
955
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
956
|
-
</label>
|
|
957
|
-
<label
|
|
958
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
959
|
-
for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-paused"
|
|
960
|
-
>
|
|
961
|
-
<input
|
|
962
|
-
class="pf-v5-c-check__input"
|
|
963
|
-
type="checkbox"
|
|
964
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-paused"
|
|
965
|
-
name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-paused"
|
|
966
|
-
/>
|
|
967
|
-
|
|
968
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
969
|
-
</label>
|
|
970
|
-
<label
|
|
971
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
972
|
-
for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-warning"
|
|
973
|
-
>
|
|
974
|
-
<input
|
|
975
|
-
class="pf-v5-c-check__input"
|
|
976
|
-
type="checkbox"
|
|
977
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-warning"
|
|
978
|
-
name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-warning"
|
|
979
|
-
/>
|
|
980
|
-
|
|
981
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
982
|
-
</label>
|
|
983
|
-
<label
|
|
984
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
985
|
-
for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted"
|
|
986
|
-
>
|
|
987
|
-
<input
|
|
988
|
-
class="pf-v5-c-check__input"
|
|
989
|
-
type="checkbox"
|
|
990
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted"
|
|
991
|
-
name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted"
|
|
992
|
-
/>
|
|
993
|
-
|
|
994
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
995
|
-
</label>
|
|
996
|
-
</fieldset>
|
|
997
|
-
</div>
|
|
998
|
-
</div>
|
|
503
|
+
</span>
|
|
504
|
+
</button>
|
|
999
505
|
</div>
|
|
1000
506
|
<div class="pf-v5-c-toolbar__item">
|
|
1001
|
-
<
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
<
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
aria-haspopup="true"
|
|
1012
|
-
aria-expanded="false"
|
|
1013
|
-
aria-labelledby="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-label toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-toggle"
|
|
1014
|
-
>
|
|
1015
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
1016
|
-
<span class="pf-v5-c-select__toggle-text">Risk</span>
|
|
1017
|
-
</div>
|
|
1018
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
1019
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
507
|
+
<button
|
|
508
|
+
class="pf-v5-c-menu-toggle"
|
|
509
|
+
type="button"
|
|
510
|
+
aria-expanded="false"
|
|
511
|
+
id="toolbar-toggle-group-collapsed-example-menu-toggle-checkbox-risk"
|
|
512
|
+
>
|
|
513
|
+
<span class="pf-v5-c-menu-toggle__text">Risk</span>
|
|
514
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
515
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
516
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1020
517
|
</span>
|
|
1021
|
-
</
|
|
1022
|
-
|
|
1023
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
1024
|
-
<fieldset
|
|
1025
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
1026
|
-
aria-label="Select input"
|
|
1027
|
-
>
|
|
1028
|
-
<label
|
|
1029
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
1030
|
-
for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active"
|
|
1031
|
-
>
|
|
1032
|
-
<input
|
|
1033
|
-
class="pf-v5-c-check__input"
|
|
1034
|
-
type="checkbox"
|
|
1035
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active"
|
|
1036
|
-
name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active"
|
|
1037
|
-
/>
|
|
1038
|
-
|
|
1039
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
1040
|
-
<span class="pf-v5-c-check__description">This is a description</span>
|
|
1041
|
-
</label>
|
|
1042
|
-
<label
|
|
1043
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
1044
|
-
for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled"
|
|
1045
|
-
>
|
|
1046
|
-
<input
|
|
1047
|
-
class="pf-v5-c-check__input"
|
|
1048
|
-
type="checkbox"
|
|
1049
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled"
|
|
1050
|
-
name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled"
|
|
1051
|
-
/>
|
|
1052
|
-
|
|
1053
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
1054
|
-
<span
|
|
1055
|
-
class="pf-v5-c-check__description"
|
|
1056
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
1057
|
-
</label>
|
|
1058
|
-
<label
|
|
1059
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
1060
|
-
for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused"
|
|
1061
|
-
>
|
|
1062
|
-
<input
|
|
1063
|
-
class="pf-v5-c-check__input"
|
|
1064
|
-
type="checkbox"
|
|
1065
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused"
|
|
1066
|
-
name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused"
|
|
1067
|
-
/>
|
|
1068
|
-
|
|
1069
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
1070
|
-
</label>
|
|
1071
|
-
<label
|
|
1072
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
1073
|
-
for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning"
|
|
1074
|
-
>
|
|
1075
|
-
<input
|
|
1076
|
-
class="pf-v5-c-check__input"
|
|
1077
|
-
type="checkbox"
|
|
1078
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning"
|
|
1079
|
-
name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning"
|
|
1080
|
-
/>
|
|
1081
|
-
|
|
1082
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
1083
|
-
</label>
|
|
1084
|
-
<label
|
|
1085
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
1086
|
-
for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted"
|
|
1087
|
-
>
|
|
1088
|
-
<input
|
|
1089
|
-
class="pf-v5-c-check__input"
|
|
1090
|
-
type="checkbox"
|
|
1091
|
-
id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted"
|
|
1092
|
-
name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted"
|
|
1093
|
-
/>
|
|
1094
|
-
|
|
1095
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
1096
|
-
</label>
|
|
1097
|
-
</fieldset>
|
|
1098
|
-
</div>
|
|
1099
|
-
</div>
|
|
518
|
+
</span>
|
|
519
|
+
</button>
|
|
1100
520
|
</div>
|
|
1101
521
|
</div>
|
|
1102
522
|
</div>
|
|
@@ -1114,7 +534,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1114
534
|
| Attribute | Applied to | Outcome |
|
|
1115
535
|
| -- | -- | -- |
|
|
1116
536
|
| `hidden` | `.pf-v5-c-toolbar__item`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__toggle`, `.pf-v5-c-toolbar__expandable-content` | Indicates that the toggle group element is hidden. **Required** |
|
|
1117
|
-
| `aria-expanded=
|
|
537
|
+
| `aria-expanded=true` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates that the expandable content is visible. **Required** |
|
|
1118
538
|
| `aria-expanded="false"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates the the expandable content is hidden. **Required** |
|
|
1119
539
|
| `aria-controls="[id of expandable content]"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Identifies the expanded content controlled by the toggle button. **Required** |
|
|
1120
540
|
| `id="[expandable-content_id]"` | `.pf-v5-c-toolbar__expandable-content` | Provides a reference for toggle button description. **Required** |
|
|
@@ -1123,7 +543,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1123
543
|
|
|
1124
544
|
| Attribute | Applied to | Outcome |
|
|
1125
545
|
| -- | -- | -- |
|
|
1126
|
-
| `aria-haspopup=
|
|
546
|
+
| `aria-haspopup=true` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | When expandable content appears above content (mobile viewport), `aria-haspopup=true` should be applied to indicate that focus should be trapped. **Required** |
|
|
1127
547
|
|
|
1128
548
|
### Usage
|
|
1129
549
|
|
|
@@ -1145,64 +565,45 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1145
565
|
<div class="pf-v5-c-toolbar__content">
|
|
1146
566
|
<div class="pf-v5-c-toolbar__content-section">
|
|
1147
567
|
<div class="pf-v5-c-toolbar__item pf-m-bulk-select">
|
|
1148
|
-
<div
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
role="menuitem"
|
|
1179
|
-
type="button"
|
|
1180
|
-
>Select all</button>
|
|
1181
|
-
</li>
|
|
1182
|
-
<li role="none">
|
|
1183
|
-
<button
|
|
1184
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
1185
|
-
role="menuitem"
|
|
1186
|
-
type="button"
|
|
1187
|
-
>Select none</button>
|
|
1188
|
-
</li>
|
|
1189
|
-
<li role="none">
|
|
1190
|
-
<button
|
|
1191
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
1192
|
-
role="menuitem"
|
|
1193
|
-
type="button"
|
|
1194
|
-
>Other action</button>
|
|
1195
|
-
</li>
|
|
1196
|
-
</ul>
|
|
568
|
+
<div
|
|
569
|
+
class="pf-v5-c-menu-toggle pf-m-split-button"
|
|
570
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-check"
|
|
571
|
+
>
|
|
572
|
+
<label
|
|
573
|
+
class="pf-v5-c-check pf-m-standalone"
|
|
574
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-check-check"
|
|
575
|
+
for="toolbar-selected-filters-toggle-group-collapsed-example-check-check-input"
|
|
576
|
+
>
|
|
577
|
+
<input
|
|
578
|
+
class="pf-v5-c-check__input"
|
|
579
|
+
type="checkbox"
|
|
580
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-check-check-input"
|
|
581
|
+
name="toolbar-selected-filters-toggle-group-collapsed-example-check-check-input"
|
|
582
|
+
aria-label="Standalone check"
|
|
583
|
+
/>
|
|
584
|
+
</label>
|
|
585
|
+
<button
|
|
586
|
+
class="pf-v5-c-menu-toggle__button"
|
|
587
|
+
type="button"
|
|
588
|
+
aria-expanded="false"
|
|
589
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-menu-toggle-toggle-button"
|
|
590
|
+
aria-label="Menu toggle"
|
|
591
|
+
>
|
|
592
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
593
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
594
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
595
|
+
</span>
|
|
596
|
+
</span>
|
|
597
|
+
</button>
|
|
1197
598
|
</div>
|
|
1198
599
|
</div>
|
|
1199
600
|
<div class="pf-v5-c-toolbar__group pf-m-toggle-group">
|
|
1200
601
|
<div class="pf-v5-c-toolbar__toggle">
|
|
1201
602
|
<button
|
|
1202
|
-
class="pf-v5-c-
|
|
603
|
+
class="pf-v5-c-menu-toggle pf-m-plain"
|
|
1203
604
|
type="button"
|
|
1204
|
-
aria-label="Show filters"
|
|
1205
605
|
aria-expanded="false"
|
|
606
|
+
aria-label="Show filters"
|
|
1206
607
|
aria-controls="toolbar-selected-filters-toggle-group-collapsed-example-expandable-content"
|
|
1207
608
|
>
|
|
1208
609
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
@@ -1215,72 +616,22 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1215
616
|
role="group"
|
|
1216
617
|
>
|
|
1217
618
|
<div class="pf-v5-c-input-group__item">
|
|
1218
|
-
<
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
<
|
|
1225
|
-
class="
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
>
|
|
1232
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
1233
|
-
<span class="pf-v5-c-select__toggle-icon">
|
|
1234
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
1235
|
-
</span>
|
|
1236
|
-
<span class="pf-v5-c-select__toggle-text">Name</span>
|
|
1237
|
-
</div>
|
|
1238
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
1239
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
619
|
+
<button
|
|
620
|
+
class="pf-v5-c-menu-toggle"
|
|
621
|
+
type="button"
|
|
622
|
+
aria-expanded="false"
|
|
623
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-search-filter-menu"
|
|
624
|
+
>
|
|
625
|
+
<span class="pf-v5-c-menu-toggle__icon">
|
|
626
|
+
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
627
|
+
</span>
|
|
628
|
+
<span class="pf-v5-c-menu-toggle__text">Name</span>
|
|
629
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
630
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
631
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1240
632
|
</span>
|
|
1241
|
-
</
|
|
1242
|
-
|
|
1243
|
-
<ul
|
|
1244
|
-
class="pf-v5-c-select__menu"
|
|
1245
|
-
role="listbox"
|
|
1246
|
-
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label"
|
|
1247
|
-
hidden
|
|
1248
|
-
>
|
|
1249
|
-
<li role="presentation">
|
|
1250
|
-
<button
|
|
1251
|
-
class="pf-v5-c-select__menu-item"
|
|
1252
|
-
role="option"
|
|
1253
|
-
>Running</button>
|
|
1254
|
-
</li>
|
|
1255
|
-
<li role="presentation">
|
|
1256
|
-
<button
|
|
1257
|
-
class="pf-v5-c-select__menu-item pf-m-selected"
|
|
1258
|
-
role="option"
|
|
1259
|
-
aria-selected="true"
|
|
1260
|
-
>
|
|
1261
|
-
Stopped
|
|
1262
|
-
<span class="pf-v5-c-select__menu-item-icon">
|
|
1263
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1264
|
-
</span>
|
|
1265
|
-
</button>
|
|
1266
|
-
</li>
|
|
1267
|
-
<li role="presentation">
|
|
1268
|
-
<button class="pf-v5-c-select__menu-item" role="option">Down</button>
|
|
1269
|
-
</li>
|
|
1270
|
-
<li role="presentation">
|
|
1271
|
-
<button
|
|
1272
|
-
class="pf-v5-c-select__menu-item"
|
|
1273
|
-
role="option"
|
|
1274
|
-
>Degraded</button>
|
|
1275
|
-
</li>
|
|
1276
|
-
<li role="presentation">
|
|
1277
|
-
<button
|
|
1278
|
-
class="pf-v5-c-select__menu-item"
|
|
1279
|
-
role="option"
|
|
1280
|
-
>Needs maintenance</button>
|
|
1281
|
-
</li>
|
|
1282
|
-
</ul>
|
|
1283
|
-
</div>
|
|
633
|
+
</span>
|
|
634
|
+
</button>
|
|
1284
635
|
</div>
|
|
1285
636
|
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
1286
637
|
<div class="pf-v5-c-text-input-group">
|
|
@@ -1304,210 +655,34 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1304
655
|
</div>
|
|
1305
656
|
<div class="pf-v5-c-toolbar__group pf-m-filter-group">
|
|
1306
657
|
<div class="pf-v5-c-toolbar__item">
|
|
1307
|
-
<
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
<
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
aria-haspopup="true"
|
|
1318
|
-
aria-expanded="false"
|
|
1319
|
-
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-label toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-toggle"
|
|
1320
|
-
>
|
|
1321
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
1322
|
-
<span class="pf-v5-c-select__toggle-text">Status</span>
|
|
1323
|
-
</div>
|
|
1324
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
1325
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
658
|
+
<button
|
|
659
|
+
class="pf-v5-c-menu-toggle"
|
|
660
|
+
type="button"
|
|
661
|
+
aria-expanded="false"
|
|
662
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-menu-toggle-checkbox-status"
|
|
663
|
+
>
|
|
664
|
+
<span class="pf-v5-c-menu-toggle__text">Status</span>
|
|
665
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
666
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
667
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1326
668
|
</span>
|
|
1327
|
-
</
|
|
1328
|
-
|
|
1329
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
1330
|
-
<fieldset
|
|
1331
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
1332
|
-
aria-label="Select input"
|
|
1333
|
-
>
|
|
1334
|
-
<label
|
|
1335
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
1336
|
-
for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active"
|
|
1337
|
-
>
|
|
1338
|
-
<input
|
|
1339
|
-
class="pf-v5-c-check__input"
|
|
1340
|
-
type="checkbox"
|
|
1341
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active"
|
|
1342
|
-
name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active"
|
|
1343
|
-
/>
|
|
1344
|
-
|
|
1345
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
1346
|
-
<span
|
|
1347
|
-
class="pf-v5-c-check__description"
|
|
1348
|
-
>This is a description</span>
|
|
1349
|
-
</label>
|
|
1350
|
-
<label
|
|
1351
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
1352
|
-
for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled"
|
|
1353
|
-
>
|
|
1354
|
-
<input
|
|
1355
|
-
class="pf-v5-c-check__input"
|
|
1356
|
-
type="checkbox"
|
|
1357
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled"
|
|
1358
|
-
name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled"
|
|
1359
|
-
/>
|
|
1360
|
-
|
|
1361
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
1362
|
-
<span
|
|
1363
|
-
class="pf-v5-c-check__description"
|
|
1364
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
1365
|
-
</label>
|
|
1366
|
-
<label
|
|
1367
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
1368
|
-
for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-paused"
|
|
1369
|
-
>
|
|
1370
|
-
<input
|
|
1371
|
-
class="pf-v5-c-check__input"
|
|
1372
|
-
type="checkbox"
|
|
1373
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-paused"
|
|
1374
|
-
name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-paused"
|
|
1375
|
-
/>
|
|
1376
|
-
|
|
1377
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
1378
|
-
</label>
|
|
1379
|
-
<label
|
|
1380
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
1381
|
-
for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-warning"
|
|
1382
|
-
>
|
|
1383
|
-
<input
|
|
1384
|
-
class="pf-v5-c-check__input"
|
|
1385
|
-
type="checkbox"
|
|
1386
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-warning"
|
|
1387
|
-
name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-warning"
|
|
1388
|
-
/>
|
|
1389
|
-
|
|
1390
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
1391
|
-
</label>
|
|
1392
|
-
<label
|
|
1393
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
1394
|
-
for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted"
|
|
1395
|
-
>
|
|
1396
|
-
<input
|
|
1397
|
-
class="pf-v5-c-check__input"
|
|
1398
|
-
type="checkbox"
|
|
1399
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted"
|
|
1400
|
-
name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted"
|
|
1401
|
-
/>
|
|
1402
|
-
|
|
1403
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
1404
|
-
</label>
|
|
1405
|
-
</fieldset>
|
|
1406
|
-
</div>
|
|
1407
|
-
</div>
|
|
669
|
+
</span>
|
|
670
|
+
</button>
|
|
1408
671
|
</div>
|
|
1409
672
|
<div class="pf-v5-c-toolbar__item">
|
|
1410
|
-
<
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
<
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
aria-haspopup="true"
|
|
1421
|
-
aria-expanded="false"
|
|
1422
|
-
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-label toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-toggle"
|
|
1423
|
-
>
|
|
1424
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
1425
|
-
<span class="pf-v5-c-select__toggle-text">Risk</span>
|
|
1426
|
-
</div>
|
|
1427
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
1428
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
673
|
+
<button
|
|
674
|
+
class="pf-v5-c-menu-toggle"
|
|
675
|
+
type="button"
|
|
676
|
+
aria-expanded="false"
|
|
677
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-menu-toggle-checkbox-risk"
|
|
678
|
+
>
|
|
679
|
+
<span class="pf-v5-c-menu-toggle__text">Risk</span>
|
|
680
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
681
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
682
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1429
683
|
</span>
|
|
1430
|
-
</
|
|
1431
|
-
|
|
1432
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
1433
|
-
<fieldset
|
|
1434
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
1435
|
-
aria-label="Select input"
|
|
1436
|
-
>
|
|
1437
|
-
<label
|
|
1438
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
1439
|
-
for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active"
|
|
1440
|
-
>
|
|
1441
|
-
<input
|
|
1442
|
-
class="pf-v5-c-check__input"
|
|
1443
|
-
type="checkbox"
|
|
1444
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active"
|
|
1445
|
-
name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active"
|
|
1446
|
-
/>
|
|
1447
|
-
|
|
1448
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
1449
|
-
<span
|
|
1450
|
-
class="pf-v5-c-check__description"
|
|
1451
|
-
>This is a description</span>
|
|
1452
|
-
</label>
|
|
1453
|
-
<label
|
|
1454
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
1455
|
-
for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled"
|
|
1456
|
-
>
|
|
1457
|
-
<input
|
|
1458
|
-
class="pf-v5-c-check__input"
|
|
1459
|
-
type="checkbox"
|
|
1460
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled"
|
|
1461
|
-
name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled"
|
|
1462
|
-
/>
|
|
1463
|
-
|
|
1464
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
1465
|
-
<span
|
|
1466
|
-
class="pf-v5-c-check__description"
|
|
1467
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
1468
|
-
</label>
|
|
1469
|
-
<label
|
|
1470
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
1471
|
-
for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused"
|
|
1472
|
-
>
|
|
1473
|
-
<input
|
|
1474
|
-
class="pf-v5-c-check__input"
|
|
1475
|
-
type="checkbox"
|
|
1476
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused"
|
|
1477
|
-
name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused"
|
|
1478
|
-
/>
|
|
1479
|
-
|
|
1480
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
1481
|
-
</label>
|
|
1482
|
-
<label
|
|
1483
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
1484
|
-
for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning"
|
|
1485
|
-
>
|
|
1486
|
-
<input
|
|
1487
|
-
class="pf-v5-c-check__input"
|
|
1488
|
-
type="checkbox"
|
|
1489
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning"
|
|
1490
|
-
name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning"
|
|
1491
|
-
/>
|
|
1492
|
-
|
|
1493
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
1494
|
-
</label>
|
|
1495
|
-
<label
|
|
1496
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
1497
|
-
for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted"
|
|
1498
|
-
>
|
|
1499
|
-
<input
|
|
1500
|
-
class="pf-v5-c-check__input"
|
|
1501
|
-
type="checkbox"
|
|
1502
|
-
id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted"
|
|
1503
|
-
name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted"
|
|
1504
|
-
/>
|
|
1505
|
-
|
|
1506
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
1507
|
-
</label>
|
|
1508
|
-
</fieldset>
|
|
1509
|
-
</div>
|
|
1510
|
-
</div>
|
|
684
|
+
</span>
|
|
685
|
+
</button>
|
|
1511
686
|
</div>
|
|
1512
687
|
</div>
|
|
1513
688
|
</div>
|
|
@@ -1747,64 +922,45 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1747
922
|
<div class="pf-v5-c-toolbar__content">
|
|
1748
923
|
<div class="pf-v5-c-toolbar__content-section">
|
|
1749
924
|
<div class="pf-v5-c-toolbar__item pf-m-bulk-select">
|
|
1750
|
-
<div
|
|
1751
|
-
|
|
1752
|
-
|
|
1753
|
-
|
|
1754
|
-
|
|
1755
|
-
|
|
1756
|
-
|
|
1757
|
-
|
|
1758
|
-
|
|
1759
|
-
|
|
1760
|
-
|
|
1761
|
-
|
|
1762
|
-
|
|
1763
|
-
|
|
1764
|
-
|
|
1765
|
-
|
|
1766
|
-
|
|
1767
|
-
|
|
1768
|
-
|
|
1769
|
-
|
|
1770
|
-
|
|
1771
|
-
|
|
1772
|
-
|
|
1773
|
-
|
|
1774
|
-
|
|
1775
|
-
|
|
1776
|
-
|
|
1777
|
-
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
role="menuitem"
|
|
1781
|
-
type="button"
|
|
1782
|
-
>Select all</button>
|
|
1783
|
-
</li>
|
|
1784
|
-
<li role="none">
|
|
1785
|
-
<button
|
|
1786
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
1787
|
-
role="menuitem"
|
|
1788
|
-
type="button"
|
|
1789
|
-
>Select none</button>
|
|
1790
|
-
</li>
|
|
1791
|
-
<li role="none">
|
|
1792
|
-
<button
|
|
1793
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
1794
|
-
role="menuitem"
|
|
1795
|
-
type="button"
|
|
1796
|
-
>Other action</button>
|
|
1797
|
-
</li>
|
|
1798
|
-
</ul>
|
|
925
|
+
<div
|
|
926
|
+
class="pf-v5-c-menu-toggle pf-m-split-button"
|
|
927
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-check"
|
|
928
|
+
>
|
|
929
|
+
<label
|
|
930
|
+
class="pf-v5-c-check pf-m-standalone"
|
|
931
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-check-check"
|
|
932
|
+
for="toolbar-selected-filters-toggle-group-expanded-example-check-check-input"
|
|
933
|
+
>
|
|
934
|
+
<input
|
|
935
|
+
class="pf-v5-c-check__input"
|
|
936
|
+
type="checkbox"
|
|
937
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-check-check-input"
|
|
938
|
+
name="toolbar-selected-filters-toggle-group-expanded-example-check-check-input"
|
|
939
|
+
aria-label="Standalone check"
|
|
940
|
+
/>
|
|
941
|
+
</label>
|
|
942
|
+
<button
|
|
943
|
+
class="pf-v5-c-menu-toggle__button"
|
|
944
|
+
type="button"
|
|
945
|
+
aria-expanded="false"
|
|
946
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-toggle-button"
|
|
947
|
+
aria-label="Menu toggle"
|
|
948
|
+
>
|
|
949
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
950
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
951
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
952
|
+
</span>
|
|
953
|
+
</span>
|
|
954
|
+
</button>
|
|
1799
955
|
</div>
|
|
1800
956
|
</div>
|
|
1801
957
|
<div class="pf-v5-c-toolbar__group pf-m-toggle-group">
|
|
1802
|
-
<div class="pf-v5-c-toolbar__toggle
|
|
958
|
+
<div class="pf-v5-c-toolbar__toggle">
|
|
1803
959
|
<button
|
|
1804
|
-
class="pf-v5-c-
|
|
960
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
|
|
1805
961
|
type="button"
|
|
1806
|
-
aria-label="Show filters"
|
|
1807
962
|
aria-expanded="true"
|
|
963
|
+
aria-label="Show filters"
|
|
1808
964
|
aria-controls="toolbar-selected-filters-toggle-group-expanded-example-expandable-content"
|
|
1809
965
|
>
|
|
1810
966
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
@@ -1868,87 +1024,37 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1868
1024
|
role="group"
|
|
1869
1025
|
>
|
|
1870
1026
|
<div class="pf-v5-c-input-group__item">
|
|
1871
|
-
<
|
|
1872
|
-
|
|
1873
|
-
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
<
|
|
1878
|
-
class="
|
|
1879
|
-
|
|
1880
|
-
|
|
1881
|
-
|
|
1882
|
-
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
|
|
1886
|
-
|
|
1887
|
-
|
|
1027
|
+
<button
|
|
1028
|
+
class="pf-v5-c-menu-toggle"
|
|
1029
|
+
type="button"
|
|
1030
|
+
aria-expanded="false"
|
|
1031
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-search-filter-menu"
|
|
1032
|
+
>
|
|
1033
|
+
<span class="pf-v5-c-menu-toggle__icon">
|
|
1034
|
+
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
1035
|
+
</span>
|
|
1036
|
+
<span class="pf-v5-c-menu-toggle__text">Name</span>
|
|
1037
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
1038
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1039
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1040
|
+
</span>
|
|
1041
|
+
</span>
|
|
1042
|
+
</button>
|
|
1043
|
+
</div>
|
|
1044
|
+
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
1045
|
+
<div class="pf-v5-c-text-input-group">
|
|
1046
|
+
<div class="pf-v5-c-text-input-group__main pf-m-icon">
|
|
1047
|
+
<span class="pf-v5-c-text-input-group__text">
|
|
1048
|
+
<span class="pf-v5-c-text-input-group__icon">
|
|
1049
|
+
<i class="fas fa-fw fa-search"></i>
|
|
1888
1050
|
</span>
|
|
1889
|
-
<
|
|
1890
|
-
|
|
1891
|
-
|
|
1892
|
-
|
|
1893
|
-
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
<ul
|
|
1897
|
-
class="pf-v5-c-select__menu"
|
|
1898
|
-
role="listbox"
|
|
1899
|
-
aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-name-label"
|
|
1900
|
-
hidden
|
|
1901
|
-
>
|
|
1902
|
-
<li role="presentation">
|
|
1903
|
-
<button
|
|
1904
|
-
class="pf-v5-c-select__menu-item"
|
|
1905
|
-
role="option"
|
|
1906
|
-
>Running</button>
|
|
1907
|
-
</li>
|
|
1908
|
-
<li role="presentation">
|
|
1909
|
-
<button
|
|
1910
|
-
class="pf-v5-c-select__menu-item pf-m-selected"
|
|
1911
|
-
role="option"
|
|
1912
|
-
aria-selected="true"
|
|
1913
|
-
>
|
|
1914
|
-
Stopped
|
|
1915
|
-
<span class="pf-v5-c-select__menu-item-icon">
|
|
1916
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1917
|
-
</span>
|
|
1918
|
-
</button>
|
|
1919
|
-
</li>
|
|
1920
|
-
<li role="presentation">
|
|
1921
|
-
<button class="pf-v5-c-select__menu-item" role="option">Down</button>
|
|
1922
|
-
</li>
|
|
1923
|
-
<li role="presentation">
|
|
1924
|
-
<button
|
|
1925
|
-
class="pf-v5-c-select__menu-item"
|
|
1926
|
-
role="option"
|
|
1927
|
-
>Degraded</button>
|
|
1928
|
-
</li>
|
|
1929
|
-
<li role="presentation">
|
|
1930
|
-
<button
|
|
1931
|
-
class="pf-v5-c-select__menu-item"
|
|
1932
|
-
role="option"
|
|
1933
|
-
>Needs maintenance</button>
|
|
1934
|
-
</li>
|
|
1935
|
-
</ul>
|
|
1936
|
-
</div>
|
|
1937
|
-
</div>
|
|
1938
|
-
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
1939
|
-
<div class="pf-v5-c-text-input-group">
|
|
1940
|
-
<div class="pf-v5-c-text-input-group__main pf-m-icon">
|
|
1941
|
-
<span class="pf-v5-c-text-input-group__text">
|
|
1942
|
-
<span class="pf-v5-c-text-input-group__icon">
|
|
1943
|
-
<i class="fas fa-fw fa-search"></i>
|
|
1944
|
-
</span>
|
|
1945
|
-
<input
|
|
1946
|
-
class="pf-v5-c-text-input-group__text-input"
|
|
1947
|
-
type="text"
|
|
1948
|
-
placeholder="Filter by name"
|
|
1949
|
-
value
|
|
1950
|
-
aria-label="Search input"
|
|
1951
|
-
/>
|
|
1051
|
+
<input
|
|
1052
|
+
class="pf-v5-c-text-input-group__text-input"
|
|
1053
|
+
type="text"
|
|
1054
|
+
placeholder="Filter by name"
|
|
1055
|
+
value
|
|
1056
|
+
aria-label="Search input"
|
|
1057
|
+
/>
|
|
1952
1058
|
</span>
|
|
1953
1059
|
</div>
|
|
1954
1060
|
</div>
|
|
@@ -1957,206 +1063,34 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1957
1063
|
</div>
|
|
1958
1064
|
<div class="pf-v5-c-toolbar__group pf-m-filter-group">
|
|
1959
1065
|
<div class="pf-v5-c-toolbar__item">
|
|
1960
|
-
<
|
|
1961
|
-
|
|
1962
|
-
|
|
1963
|
-
|
|
1964
|
-
|
|
1965
|
-
|
|
1966
|
-
<
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
|
|
1970
|
-
aria-haspopup="true"
|
|
1971
|
-
aria-expanded="false"
|
|
1972
|
-
aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-label toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-toggle"
|
|
1973
|
-
>
|
|
1974
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
1975
|
-
<span class="pf-v5-c-select__toggle-text">Status</span>
|
|
1976
|
-
</div>
|
|
1977
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
1978
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1066
|
+
<button
|
|
1067
|
+
class="pf-v5-c-menu-toggle"
|
|
1068
|
+
type="button"
|
|
1069
|
+
aria-expanded="false"
|
|
1070
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-status"
|
|
1071
|
+
>
|
|
1072
|
+
<span class="pf-v5-c-menu-toggle__text">Status</span>
|
|
1073
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
1074
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1075
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1979
1076
|
</span>
|
|
1980
|
-
</
|
|
1981
|
-
|
|
1982
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
1983
|
-
<fieldset
|
|
1984
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
1985
|
-
aria-label="Select input"
|
|
1986
|
-
>
|
|
1987
|
-
<label
|
|
1988
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
1989
|
-
for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-active"
|
|
1990
|
-
>
|
|
1991
|
-
<input
|
|
1992
|
-
class="pf-v5-c-check__input"
|
|
1993
|
-
type="checkbox"
|
|
1994
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-active"
|
|
1995
|
-
name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-active"
|
|
1996
|
-
/>
|
|
1997
|
-
|
|
1998
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
1999
|
-
<span class="pf-v5-c-check__description">This is a description</span>
|
|
2000
|
-
</label>
|
|
2001
|
-
<label
|
|
2002
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
2003
|
-
for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-canceled"
|
|
2004
|
-
>
|
|
2005
|
-
<input
|
|
2006
|
-
class="pf-v5-c-check__input"
|
|
2007
|
-
type="checkbox"
|
|
2008
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-canceled"
|
|
2009
|
-
name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-canceled"
|
|
2010
|
-
/>
|
|
2011
|
-
|
|
2012
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
2013
|
-
<span
|
|
2014
|
-
class="pf-v5-c-check__description"
|
|
2015
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
2016
|
-
</label>
|
|
2017
|
-
<label
|
|
2018
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
2019
|
-
for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-paused"
|
|
2020
|
-
>
|
|
2021
|
-
<input
|
|
2022
|
-
class="pf-v5-c-check__input"
|
|
2023
|
-
type="checkbox"
|
|
2024
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-paused"
|
|
2025
|
-
name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-paused"
|
|
2026
|
-
/>
|
|
2027
|
-
|
|
2028
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
2029
|
-
</label>
|
|
2030
|
-
<label
|
|
2031
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
2032
|
-
for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-warning"
|
|
2033
|
-
>
|
|
2034
|
-
<input
|
|
2035
|
-
class="pf-v5-c-check__input"
|
|
2036
|
-
type="checkbox"
|
|
2037
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-warning"
|
|
2038
|
-
name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-warning"
|
|
2039
|
-
/>
|
|
2040
|
-
|
|
2041
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
2042
|
-
</label>
|
|
2043
|
-
<label
|
|
2044
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
2045
|
-
for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-restarted"
|
|
2046
|
-
>
|
|
2047
|
-
<input
|
|
2048
|
-
class="pf-v5-c-check__input"
|
|
2049
|
-
type="checkbox"
|
|
2050
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-restarted"
|
|
2051
|
-
name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-restarted"
|
|
2052
|
-
/>
|
|
2053
|
-
|
|
2054
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
2055
|
-
</label>
|
|
2056
|
-
</fieldset>
|
|
2057
|
-
</div>
|
|
2058
|
-
</div>
|
|
1077
|
+
</span>
|
|
1078
|
+
</button>
|
|
2059
1079
|
</div>
|
|
2060
1080
|
<div class="pf-v5-c-toolbar__item">
|
|
2061
|
-
<
|
|
2062
|
-
|
|
2063
|
-
|
|
2064
|
-
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
<
|
|
2068
|
-
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
aria-haspopup="true"
|
|
2072
|
-
aria-expanded="false"
|
|
2073
|
-
aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-label toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-toggle"
|
|
2074
|
-
>
|
|
2075
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
2076
|
-
<span class="pf-v5-c-select__toggle-text">Risk</span>
|
|
2077
|
-
</div>
|
|
2078
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
2079
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1081
|
+
<button
|
|
1082
|
+
class="pf-v5-c-menu-toggle"
|
|
1083
|
+
type="button"
|
|
1084
|
+
aria-expanded="false"
|
|
1085
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-risk"
|
|
1086
|
+
>
|
|
1087
|
+
<span class="pf-v5-c-menu-toggle__text">Risk</span>
|
|
1088
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
1089
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1090
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
2080
1091
|
</span>
|
|
2081
|
-
</
|
|
2082
|
-
|
|
2083
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
2084
|
-
<fieldset
|
|
2085
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
2086
|
-
aria-label="Select input"
|
|
2087
|
-
>
|
|
2088
|
-
<label
|
|
2089
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
2090
|
-
for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-active"
|
|
2091
|
-
>
|
|
2092
|
-
<input
|
|
2093
|
-
class="pf-v5-c-check__input"
|
|
2094
|
-
type="checkbox"
|
|
2095
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-active"
|
|
2096
|
-
name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-active"
|
|
2097
|
-
/>
|
|
2098
|
-
|
|
2099
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
2100
|
-
<span class="pf-v5-c-check__description">This is a description</span>
|
|
2101
|
-
</label>
|
|
2102
|
-
<label
|
|
2103
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
2104
|
-
for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-canceled"
|
|
2105
|
-
>
|
|
2106
|
-
<input
|
|
2107
|
-
class="pf-v5-c-check__input"
|
|
2108
|
-
type="checkbox"
|
|
2109
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-canceled"
|
|
2110
|
-
name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-canceled"
|
|
2111
|
-
/>
|
|
2112
|
-
|
|
2113
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
2114
|
-
<span
|
|
2115
|
-
class="pf-v5-c-check__description"
|
|
2116
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
2117
|
-
</label>
|
|
2118
|
-
<label
|
|
2119
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
2120
|
-
for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-paused"
|
|
2121
|
-
>
|
|
2122
|
-
<input
|
|
2123
|
-
class="pf-v5-c-check__input"
|
|
2124
|
-
type="checkbox"
|
|
2125
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-paused"
|
|
2126
|
-
name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-paused"
|
|
2127
|
-
/>
|
|
2128
|
-
|
|
2129
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
2130
|
-
</label>
|
|
2131
|
-
<label
|
|
2132
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
2133
|
-
for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-warning"
|
|
2134
|
-
>
|
|
2135
|
-
<input
|
|
2136
|
-
class="pf-v5-c-check__input"
|
|
2137
|
-
type="checkbox"
|
|
2138
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-warning"
|
|
2139
|
-
name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-warning"
|
|
2140
|
-
/>
|
|
2141
|
-
|
|
2142
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
2143
|
-
</label>
|
|
2144
|
-
<label
|
|
2145
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
2146
|
-
for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-restarted"
|
|
2147
|
-
>
|
|
2148
|
-
<input
|
|
2149
|
-
class="pf-v5-c-check__input"
|
|
2150
|
-
type="checkbox"
|
|
2151
|
-
id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-restarted"
|
|
2152
|
-
name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-restarted"
|
|
2153
|
-
/>
|
|
2154
|
-
|
|
2155
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
2156
|
-
</label>
|
|
2157
|
-
</fieldset>
|
|
2158
|
-
</div>
|
|
2159
|
-
</div>
|
|
1092
|
+
</span>
|
|
1093
|
+
</button>
|
|
2160
1094
|
</div>
|
|
2161
1095
|
</div>
|
|
2162
1096
|
<div class="pf-v5-c-toolbar__group pf-m-chip-container">
|
|
@@ -2340,64 +1274,45 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
2340
1274
|
<div class="pf-v5-c-toolbar__content">
|
|
2341
1275
|
<div class="pf-v5-c-toolbar__content-section">
|
|
2342
1276
|
<div class="pf-v5-c-toolbar__item pf-m-bulk-select">
|
|
2343
|
-
<div
|
|
2344
|
-
|
|
2345
|
-
|
|
2346
|
-
|
|
2347
|
-
|
|
2348
|
-
|
|
2349
|
-
|
|
2350
|
-
|
|
2351
|
-
|
|
2352
|
-
|
|
2353
|
-
|
|
2354
|
-
|
|
2355
|
-
|
|
2356
|
-
|
|
2357
|
-
|
|
2358
|
-
|
|
2359
|
-
|
|
2360
|
-
|
|
2361
|
-
|
|
2362
|
-
|
|
2363
|
-
|
|
2364
|
-
|
|
2365
|
-
|
|
2366
|
-
|
|
2367
|
-
|
|
2368
|
-
|
|
2369
|
-
|
|
2370
|
-
|
|
2371
|
-
|
|
2372
|
-
|
|
2373
|
-
role="menuitem"
|
|
2374
|
-
type="button"
|
|
2375
|
-
>Select all</button>
|
|
2376
|
-
</li>
|
|
2377
|
-
<li role="none">
|
|
2378
|
-
<button
|
|
2379
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
2380
|
-
role="menuitem"
|
|
2381
|
-
type="button"
|
|
2382
|
-
>Select none</button>
|
|
2383
|
-
</li>
|
|
2384
|
-
<li role="none">
|
|
2385
|
-
<button
|
|
2386
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
2387
|
-
role="menuitem"
|
|
2388
|
-
type="button"
|
|
2389
|
-
>Other action</button>
|
|
2390
|
-
</li>
|
|
2391
|
-
</ul>
|
|
1277
|
+
<div
|
|
1278
|
+
class="pf-v5-c-menu-toggle pf-m-split-button"
|
|
1279
|
+
id="toolbar-selected-filters-example-check"
|
|
1280
|
+
>
|
|
1281
|
+
<label
|
|
1282
|
+
class="pf-v5-c-check pf-m-standalone"
|
|
1283
|
+
id="toolbar-selected-filters-example-check-check"
|
|
1284
|
+
for="toolbar-selected-filters-example-check-check-input"
|
|
1285
|
+
>
|
|
1286
|
+
<input
|
|
1287
|
+
class="pf-v5-c-check__input"
|
|
1288
|
+
type="checkbox"
|
|
1289
|
+
id="toolbar-selected-filters-example-check-check-input"
|
|
1290
|
+
name="toolbar-selected-filters-example-check-check-input"
|
|
1291
|
+
aria-label="Standalone check"
|
|
1292
|
+
/>
|
|
1293
|
+
</label>
|
|
1294
|
+
<button
|
|
1295
|
+
class="pf-v5-c-menu-toggle__button"
|
|
1296
|
+
type="button"
|
|
1297
|
+
aria-expanded="false"
|
|
1298
|
+
id="toolbar-selected-filters-example-menu-toggle-toggle-button"
|
|
1299
|
+
aria-label="Menu toggle"
|
|
1300
|
+
>
|
|
1301
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
1302
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1303
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1304
|
+
</span>
|
|
1305
|
+
</span>
|
|
1306
|
+
</button>
|
|
2392
1307
|
</div>
|
|
2393
1308
|
</div>
|
|
2394
1309
|
<div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show">
|
|
2395
1310
|
<div class="pf-v5-c-toolbar__toggle">
|
|
2396
1311
|
<button
|
|
2397
|
-
class="pf-v5-c-
|
|
1312
|
+
class="pf-v5-c-menu-toggle pf-m-plain"
|
|
2398
1313
|
type="button"
|
|
2399
|
-
aria-label="Show filters"
|
|
2400
1314
|
aria-expanded="false"
|
|
1315
|
+
aria-label="Show filters"
|
|
2401
1316
|
aria-controls="toolbar-selected-filters-example-expandable-content"
|
|
2402
1317
|
>
|
|
2403
1318
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
@@ -2405,210 +1320,34 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
2405
1320
|
</div>
|
|
2406
1321
|
<div class="pf-v5-c-toolbar__group pf-m-filter-group">
|
|
2407
1322
|
<div class="pf-v5-c-toolbar__item">
|
|
2408
|
-
<
|
|
2409
|
-
|
|
2410
|
-
|
|
2411
|
-
|
|
2412
|
-
|
|
2413
|
-
|
|
2414
|
-
<
|
|
2415
|
-
|
|
2416
|
-
|
|
2417
|
-
|
|
2418
|
-
aria-haspopup="true"
|
|
2419
|
-
aria-expanded="false"
|
|
2420
|
-
aria-labelledby="toolbar-selected-filters-example-select-checkbox-status-label toolbar-selected-filters-example-select-checkbox-status-toggle"
|
|
2421
|
-
>
|
|
2422
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
2423
|
-
<span class="pf-v5-c-select__toggle-text">Status</span>
|
|
2424
|
-
</div>
|
|
2425
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
2426
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1323
|
+
<button
|
|
1324
|
+
class="pf-v5-c-menu-toggle"
|
|
1325
|
+
type="button"
|
|
1326
|
+
aria-expanded="false"
|
|
1327
|
+
id="toolbar-selected-filters-example-menu-toggle-checkbox-status"
|
|
1328
|
+
>
|
|
1329
|
+
<span class="pf-v5-c-menu-toggle__text">Status</span>
|
|
1330
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
1331
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1332
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
2427
1333
|
</span>
|
|
2428
|
-
</
|
|
2429
|
-
|
|
2430
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
2431
|
-
<fieldset
|
|
2432
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
2433
|
-
aria-label="Select input"
|
|
2434
|
-
>
|
|
2435
|
-
<label
|
|
2436
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
2437
|
-
for="toolbar-selected-filters-example-select-checkbox-status-active"
|
|
2438
|
-
>
|
|
2439
|
-
<input
|
|
2440
|
-
class="pf-v5-c-check__input"
|
|
2441
|
-
type="checkbox"
|
|
2442
|
-
id="toolbar-selected-filters-example-select-checkbox-status-active"
|
|
2443
|
-
name="toolbar-selected-filters-example-select-checkbox-status-active"
|
|
2444
|
-
/>
|
|
2445
|
-
|
|
2446
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
2447
|
-
<span
|
|
2448
|
-
class="pf-v5-c-check__description"
|
|
2449
|
-
>This is a description</span>
|
|
2450
|
-
</label>
|
|
2451
|
-
<label
|
|
2452
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
2453
|
-
for="toolbar-selected-filters-example-select-checkbox-status-canceled"
|
|
2454
|
-
>
|
|
2455
|
-
<input
|
|
2456
|
-
class="pf-v5-c-check__input"
|
|
2457
|
-
type="checkbox"
|
|
2458
|
-
id="toolbar-selected-filters-example-select-checkbox-status-canceled"
|
|
2459
|
-
name="toolbar-selected-filters-example-select-checkbox-status-canceled"
|
|
2460
|
-
/>
|
|
2461
|
-
|
|
2462
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
2463
|
-
<span
|
|
2464
|
-
class="pf-v5-c-check__description"
|
|
2465
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
2466
|
-
</label>
|
|
2467
|
-
<label
|
|
2468
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
2469
|
-
for="toolbar-selected-filters-example-select-checkbox-status-paused"
|
|
2470
|
-
>
|
|
2471
|
-
<input
|
|
2472
|
-
class="pf-v5-c-check__input"
|
|
2473
|
-
type="checkbox"
|
|
2474
|
-
id="toolbar-selected-filters-example-select-checkbox-status-paused"
|
|
2475
|
-
name="toolbar-selected-filters-example-select-checkbox-status-paused"
|
|
2476
|
-
/>
|
|
2477
|
-
|
|
2478
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
2479
|
-
</label>
|
|
2480
|
-
<label
|
|
2481
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
2482
|
-
for="toolbar-selected-filters-example-select-checkbox-status-warning"
|
|
2483
|
-
>
|
|
2484
|
-
<input
|
|
2485
|
-
class="pf-v5-c-check__input"
|
|
2486
|
-
type="checkbox"
|
|
2487
|
-
id="toolbar-selected-filters-example-select-checkbox-status-warning"
|
|
2488
|
-
name="toolbar-selected-filters-example-select-checkbox-status-warning"
|
|
2489
|
-
/>
|
|
2490
|
-
|
|
2491
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
2492
|
-
</label>
|
|
2493
|
-
<label
|
|
2494
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
2495
|
-
for="toolbar-selected-filters-example-select-checkbox-status-restarted"
|
|
2496
|
-
>
|
|
2497
|
-
<input
|
|
2498
|
-
class="pf-v5-c-check__input"
|
|
2499
|
-
type="checkbox"
|
|
2500
|
-
id="toolbar-selected-filters-example-select-checkbox-status-restarted"
|
|
2501
|
-
name="toolbar-selected-filters-example-select-checkbox-status-restarted"
|
|
2502
|
-
/>
|
|
2503
|
-
|
|
2504
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
2505
|
-
</label>
|
|
2506
|
-
</fieldset>
|
|
2507
|
-
</div>
|
|
2508
|
-
</div>
|
|
1334
|
+
</span>
|
|
1335
|
+
</button>
|
|
2509
1336
|
</div>
|
|
2510
1337
|
<div class="pf-v5-c-toolbar__item">
|
|
2511
|
-
<
|
|
2512
|
-
|
|
2513
|
-
|
|
2514
|
-
|
|
2515
|
-
|
|
2516
|
-
|
|
2517
|
-
<
|
|
2518
|
-
|
|
2519
|
-
|
|
2520
|
-
|
|
2521
|
-
aria-haspopup="true"
|
|
2522
|
-
aria-expanded="false"
|
|
2523
|
-
aria-labelledby="toolbar-selected-filters-example-select-checkbox-risk-label toolbar-selected-filters-example-select-checkbox-risk-toggle"
|
|
2524
|
-
>
|
|
2525
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
2526
|
-
<span class="pf-v5-c-select__toggle-text">Risk</span>
|
|
2527
|
-
</div>
|
|
2528
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
2529
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1338
|
+
<button
|
|
1339
|
+
class="pf-v5-c-menu-toggle"
|
|
1340
|
+
type="button"
|
|
1341
|
+
aria-expanded="false"
|
|
1342
|
+
id="toolbar-selected-filters-example-menu-toggle-checkbox-risk"
|
|
1343
|
+
>
|
|
1344
|
+
<span class="pf-v5-c-menu-toggle__text">Risk</span>
|
|
1345
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
1346
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1347
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
2530
1348
|
</span>
|
|
2531
|
-
</
|
|
2532
|
-
|
|
2533
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
2534
|
-
<fieldset
|
|
2535
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
2536
|
-
aria-label="Select input"
|
|
2537
|
-
>
|
|
2538
|
-
<label
|
|
2539
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
2540
|
-
for="toolbar-selected-filters-example-select-checkbox-risk-active"
|
|
2541
|
-
>
|
|
2542
|
-
<input
|
|
2543
|
-
class="pf-v5-c-check__input"
|
|
2544
|
-
type="checkbox"
|
|
2545
|
-
id="toolbar-selected-filters-example-select-checkbox-risk-active"
|
|
2546
|
-
name="toolbar-selected-filters-example-select-checkbox-risk-active"
|
|
2547
|
-
/>
|
|
2548
|
-
|
|
2549
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
2550
|
-
<span
|
|
2551
|
-
class="pf-v5-c-check__description"
|
|
2552
|
-
>This is a description</span>
|
|
2553
|
-
</label>
|
|
2554
|
-
<label
|
|
2555
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
2556
|
-
for="toolbar-selected-filters-example-select-checkbox-risk-canceled"
|
|
2557
|
-
>
|
|
2558
|
-
<input
|
|
2559
|
-
class="pf-v5-c-check__input"
|
|
2560
|
-
type="checkbox"
|
|
2561
|
-
id="toolbar-selected-filters-example-select-checkbox-risk-canceled"
|
|
2562
|
-
name="toolbar-selected-filters-example-select-checkbox-risk-canceled"
|
|
2563
|
-
/>
|
|
2564
|
-
|
|
2565
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
2566
|
-
<span
|
|
2567
|
-
class="pf-v5-c-check__description"
|
|
2568
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
2569
|
-
</label>
|
|
2570
|
-
<label
|
|
2571
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
2572
|
-
for="toolbar-selected-filters-example-select-checkbox-risk-paused"
|
|
2573
|
-
>
|
|
2574
|
-
<input
|
|
2575
|
-
class="pf-v5-c-check__input"
|
|
2576
|
-
type="checkbox"
|
|
2577
|
-
id="toolbar-selected-filters-example-select-checkbox-risk-paused"
|
|
2578
|
-
name="toolbar-selected-filters-example-select-checkbox-risk-paused"
|
|
2579
|
-
/>
|
|
2580
|
-
|
|
2581
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
2582
|
-
</label>
|
|
2583
|
-
<label
|
|
2584
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
2585
|
-
for="toolbar-selected-filters-example-select-checkbox-risk-warning"
|
|
2586
|
-
>
|
|
2587
|
-
<input
|
|
2588
|
-
class="pf-v5-c-check__input"
|
|
2589
|
-
type="checkbox"
|
|
2590
|
-
id="toolbar-selected-filters-example-select-checkbox-risk-warning"
|
|
2591
|
-
name="toolbar-selected-filters-example-select-checkbox-risk-warning"
|
|
2592
|
-
/>
|
|
2593
|
-
|
|
2594
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
2595
|
-
</label>
|
|
2596
|
-
<label
|
|
2597
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
2598
|
-
for="toolbar-selected-filters-example-select-checkbox-risk-restarted"
|
|
2599
|
-
>
|
|
2600
|
-
<input
|
|
2601
|
-
class="pf-v5-c-check__input"
|
|
2602
|
-
type="checkbox"
|
|
2603
|
-
id="toolbar-selected-filters-example-select-checkbox-risk-restarted"
|
|
2604
|
-
name="toolbar-selected-filters-example-select-checkbox-risk-restarted"
|
|
2605
|
-
/>
|
|
2606
|
-
|
|
2607
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
2608
|
-
</label>
|
|
2609
|
-
</fieldset>
|
|
2610
|
-
</div>
|
|
2611
|
-
</div>
|
|
1349
|
+
</span>
|
|
1350
|
+
</button>
|
|
2612
1351
|
</div>
|
|
2613
1352
|
</div>
|
|
2614
1353
|
</div>
|
|
@@ -2885,10 +1624,10 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
2885
1624
|
<div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-2xl">
|
|
2886
1625
|
<div class="pf-v5-c-toolbar__toggle">
|
|
2887
1626
|
<button
|
|
2888
|
-
class="pf-v5-c-
|
|
1627
|
+
class="pf-v5-c-menu-toggle pf-m-plain"
|
|
2889
1628
|
type="button"
|
|
2890
|
-
aria-label="Show filters"
|
|
2891
1629
|
aria-expanded="false"
|
|
1630
|
+
aria-label="Show filters"
|
|
2892
1631
|
aria-controls="toolbar-stacked-example-expandable-content"
|
|
2893
1632
|
>
|
|
2894
1633
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
@@ -2897,316 +1636,68 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
2897
1636
|
<div class="pf-v5-c-toolbar__group">
|
|
2898
1637
|
<div
|
|
2899
1638
|
class="pf-v5-c-toolbar__item pf-m-label"
|
|
2900
|
-
id="-
|
|
1639
|
+
id="toolbar-stacked-example-menu-toggle-resource-label"
|
|
2901
1640
|
aria-hidden="true"
|
|
2902
1641
|
>Resource</div>
|
|
1642
|
+
|
|
2903
1643
|
<div class="pf-v5-c-toolbar__item">
|
|
2904
|
-
<
|
|
2905
|
-
|
|
2906
|
-
|
|
2907
|
-
|
|
2908
|
-
|
|
2909
|
-
|
|
2910
|
-
|
|
2911
|
-
|
|
2912
|
-
|
|
2913
|
-
|
|
2914
|
-
<span class="pf-v5-c-select__toggle-text">Pod</span>
|
|
2915
|
-
</div>
|
|
2916
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
2917
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1644
|
+
<button
|
|
1645
|
+
class="pf-v5-c-menu-toggle"
|
|
1646
|
+
type="button"
|
|
1647
|
+
aria-expanded="false"
|
|
1648
|
+
id="toolbar-stacked-example-menu-toggle-resource"
|
|
1649
|
+
>
|
|
1650
|
+
<span class="pf-v5-c-menu-toggle__text">Pod</span>
|
|
1651
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
1652
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1653
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
2918
1654
|
</span>
|
|
2919
|
-
</
|
|
2920
|
-
|
|
2921
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
2922
|
-
<fieldset
|
|
2923
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
2924
|
-
aria-label="Select input"
|
|
2925
|
-
>
|
|
2926
|
-
<label
|
|
2927
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
2928
|
-
for="-select-checkbox-resource-active"
|
|
2929
|
-
>
|
|
2930
|
-
<input
|
|
2931
|
-
class="pf-v5-c-check__input"
|
|
2932
|
-
type="checkbox"
|
|
2933
|
-
id="-select-checkbox-resource-active"
|
|
2934
|
-
name="-select-checkbox-resource-active"
|
|
2935
|
-
/>
|
|
2936
|
-
|
|
2937
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
2938
|
-
<span
|
|
2939
|
-
class="pf-v5-c-check__description"
|
|
2940
|
-
>This is a description</span>
|
|
2941
|
-
</label>
|
|
2942
|
-
<label
|
|
2943
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
2944
|
-
for="-select-checkbox-resource-canceled"
|
|
2945
|
-
>
|
|
2946
|
-
<input
|
|
2947
|
-
class="pf-v5-c-check__input"
|
|
2948
|
-
type="checkbox"
|
|
2949
|
-
id="-select-checkbox-resource-canceled"
|
|
2950
|
-
name="-select-checkbox-resource-canceled"
|
|
2951
|
-
/>
|
|
2952
|
-
|
|
2953
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
2954
|
-
<span
|
|
2955
|
-
class="pf-v5-c-check__description"
|
|
2956
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
2957
|
-
</label>
|
|
2958
|
-
<label
|
|
2959
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
2960
|
-
for="-select-checkbox-resource-paused"
|
|
2961
|
-
>
|
|
2962
|
-
<input
|
|
2963
|
-
class="pf-v5-c-check__input"
|
|
2964
|
-
type="checkbox"
|
|
2965
|
-
id="-select-checkbox-resource-paused"
|
|
2966
|
-
name="-select-checkbox-resource-paused"
|
|
2967
|
-
/>
|
|
2968
|
-
|
|
2969
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
2970
|
-
</label>
|
|
2971
|
-
<label
|
|
2972
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
2973
|
-
for="-select-checkbox-resource-warning"
|
|
2974
|
-
>
|
|
2975
|
-
<input
|
|
2976
|
-
class="pf-v5-c-check__input"
|
|
2977
|
-
type="checkbox"
|
|
2978
|
-
id="-select-checkbox-resource-warning"
|
|
2979
|
-
name="-select-checkbox-resource-warning"
|
|
2980
|
-
/>
|
|
2981
|
-
|
|
2982
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
2983
|
-
</label>
|
|
2984
|
-
<label
|
|
2985
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
2986
|
-
for="-select-checkbox-resource-restarted"
|
|
2987
|
-
>
|
|
2988
|
-
<input
|
|
2989
|
-
class="pf-v5-c-check__input"
|
|
2990
|
-
type="checkbox"
|
|
2991
|
-
id="-select-checkbox-resource-restarted"
|
|
2992
|
-
name="-select-checkbox-resource-restarted"
|
|
2993
|
-
/>
|
|
2994
|
-
|
|
2995
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
2996
|
-
</label>
|
|
2997
|
-
</fieldset>
|
|
2998
|
-
</div>
|
|
2999
|
-
</div>
|
|
1655
|
+
</span>
|
|
1656
|
+
</button>
|
|
3000
1657
|
</div>
|
|
3001
1658
|
</div>
|
|
3002
1659
|
<div class="pf-v5-c-toolbar__group">
|
|
3003
1660
|
<div
|
|
3004
1661
|
class="pf-v5-c-toolbar__item pf-m-label"
|
|
3005
|
-
id="-
|
|
1662
|
+
id="toolbar-stacked-example-menu-toggle-status-label"
|
|
3006
1663
|
aria-hidden="true"
|
|
3007
1664
|
>Status</div>
|
|
3008
1665
|
<div class="pf-v5-c-toolbar__item">
|
|
3009
|
-
<
|
|
3010
|
-
|
|
3011
|
-
|
|
3012
|
-
|
|
3013
|
-
|
|
3014
|
-
|
|
3015
|
-
|
|
3016
|
-
|
|
3017
|
-
|
|
3018
|
-
|
|
3019
|
-
|
|
3020
|
-
|
|
3021
|
-
|
|
3022
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
3023
|
-
</span>
|
|
3024
|
-
</button>
|
|
3025
|
-
|
|
3026
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
3027
|
-
<fieldset
|
|
3028
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
3029
|
-
aria-label="Select input"
|
|
3030
|
-
>
|
|
3031
|
-
<label
|
|
3032
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
3033
|
-
for="-select-checkbox-status-active"
|
|
3034
|
-
>
|
|
3035
|
-
<input
|
|
3036
|
-
class="pf-v5-c-check__input"
|
|
3037
|
-
type="checkbox"
|
|
3038
|
-
id="-select-checkbox-status-active"
|
|
3039
|
-
name="-select-checkbox-status-active"
|
|
3040
|
-
/>
|
|
3041
|
-
|
|
3042
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
3043
|
-
<span
|
|
3044
|
-
class="pf-v5-c-check__description"
|
|
3045
|
-
>This is a description</span>
|
|
3046
|
-
</label>
|
|
3047
|
-
<label
|
|
3048
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
3049
|
-
for="-select-checkbox-status-canceled"
|
|
3050
|
-
>
|
|
3051
|
-
<input
|
|
3052
|
-
class="pf-v5-c-check__input"
|
|
3053
|
-
type="checkbox"
|
|
3054
|
-
id="-select-checkbox-status-canceled"
|
|
3055
|
-
name="-select-checkbox-status-canceled"
|
|
3056
|
-
/>
|
|
3057
|
-
|
|
3058
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
3059
|
-
<span
|
|
3060
|
-
class="pf-v5-c-check__description"
|
|
3061
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
3062
|
-
</label>
|
|
3063
|
-
<label
|
|
3064
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3065
|
-
for="-select-checkbox-status-paused"
|
|
3066
|
-
>
|
|
3067
|
-
<input
|
|
3068
|
-
class="pf-v5-c-check__input"
|
|
3069
|
-
type="checkbox"
|
|
3070
|
-
id="-select-checkbox-status-paused"
|
|
3071
|
-
name="-select-checkbox-status-paused"
|
|
3072
|
-
/>
|
|
3073
|
-
|
|
3074
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
3075
|
-
</label>
|
|
3076
|
-
<label
|
|
3077
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3078
|
-
for="-select-checkbox-status-warning"
|
|
3079
|
-
>
|
|
3080
|
-
<input
|
|
3081
|
-
class="pf-v5-c-check__input"
|
|
3082
|
-
type="checkbox"
|
|
3083
|
-
id="-select-checkbox-status-warning"
|
|
3084
|
-
name="-select-checkbox-status-warning"
|
|
3085
|
-
/>
|
|
3086
|
-
|
|
3087
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
3088
|
-
</label>
|
|
3089
|
-
<label
|
|
3090
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3091
|
-
for="-select-checkbox-status-restarted"
|
|
3092
|
-
>
|
|
3093
|
-
<input
|
|
3094
|
-
class="pf-v5-c-check__input"
|
|
3095
|
-
type="checkbox"
|
|
3096
|
-
id="-select-checkbox-status-restarted"
|
|
3097
|
-
name="-select-checkbox-status-restarted"
|
|
3098
|
-
/>
|
|
3099
|
-
|
|
3100
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
3101
|
-
</label>
|
|
3102
|
-
</fieldset>
|
|
3103
|
-
</div>
|
|
3104
|
-
</div>
|
|
1666
|
+
<button
|
|
1667
|
+
class="pf-v5-c-menu-toggle"
|
|
1668
|
+
type="button"
|
|
1669
|
+
aria-expanded="false"
|
|
1670
|
+
id="toolbar-stacked-example-menu-toggle-status"
|
|
1671
|
+
>
|
|
1672
|
+
<span class="pf-v5-c-menu-toggle__text">Running</span>
|
|
1673
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
1674
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1675
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1676
|
+
</span>
|
|
1677
|
+
</span>
|
|
1678
|
+
</button>
|
|
3105
1679
|
</div>
|
|
3106
1680
|
</div>
|
|
3107
1681
|
<div class="pf-v5-c-toolbar__group">
|
|
3108
1682
|
<div
|
|
3109
1683
|
class="pf-v5-c-toolbar__item pf-m-label"
|
|
3110
|
-
id="-
|
|
1684
|
+
id="toolbar-stacked-example-menu-toggle-type-label"
|
|
3111
1685
|
aria-hidden="true"
|
|
3112
1686
|
>Type</div>
|
|
3113
1687
|
<div class="pf-v5-c-toolbar__item">
|
|
3114
|
-
<
|
|
3115
|
-
|
|
3116
|
-
|
|
3117
|
-
|
|
3118
|
-
|
|
3119
|
-
|
|
3120
|
-
|
|
3121
|
-
|
|
3122
|
-
|
|
3123
|
-
|
|
3124
|
-
<span class="pf-v5-c-select__toggle-text">Any</span>
|
|
3125
|
-
</div>
|
|
3126
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
3127
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1688
|
+
<button
|
|
1689
|
+
class="pf-v5-c-menu-toggle"
|
|
1690
|
+
type="button"
|
|
1691
|
+
aria-expanded="false"
|
|
1692
|
+
id="toolbar-stacked-example-menu-toggle-type"
|
|
1693
|
+
>
|
|
1694
|
+
<span class="pf-v5-c-menu-toggle__text">Any</span>
|
|
1695
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
1696
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1697
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
3128
1698
|
</span>
|
|
3129
|
-
</
|
|
3130
|
-
|
|
3131
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
3132
|
-
<fieldset
|
|
3133
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
3134
|
-
aria-label="Select input"
|
|
3135
|
-
>
|
|
3136
|
-
<label
|
|
3137
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
3138
|
-
for="-select-checkbox-type-active"
|
|
3139
|
-
>
|
|
3140
|
-
<input
|
|
3141
|
-
class="pf-v5-c-check__input"
|
|
3142
|
-
type="checkbox"
|
|
3143
|
-
id="-select-checkbox-type-active"
|
|
3144
|
-
name="-select-checkbox-type-active"
|
|
3145
|
-
/>
|
|
3146
|
-
|
|
3147
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
3148
|
-
<span
|
|
3149
|
-
class="pf-v5-c-check__description"
|
|
3150
|
-
>This is a description</span>
|
|
3151
|
-
</label>
|
|
3152
|
-
<label
|
|
3153
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
3154
|
-
for="-select-checkbox-type-canceled"
|
|
3155
|
-
>
|
|
3156
|
-
<input
|
|
3157
|
-
class="pf-v5-c-check__input"
|
|
3158
|
-
type="checkbox"
|
|
3159
|
-
id="-select-checkbox-type-canceled"
|
|
3160
|
-
name="-select-checkbox-type-canceled"
|
|
3161
|
-
/>
|
|
3162
|
-
|
|
3163
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
3164
|
-
<span
|
|
3165
|
-
class="pf-v5-c-check__description"
|
|
3166
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
3167
|
-
</label>
|
|
3168
|
-
<label
|
|
3169
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3170
|
-
for="-select-checkbox-type-paused"
|
|
3171
|
-
>
|
|
3172
|
-
<input
|
|
3173
|
-
class="pf-v5-c-check__input"
|
|
3174
|
-
type="checkbox"
|
|
3175
|
-
id="-select-checkbox-type-paused"
|
|
3176
|
-
name="-select-checkbox-type-paused"
|
|
3177
|
-
/>
|
|
3178
|
-
|
|
3179
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
3180
|
-
</label>
|
|
3181
|
-
<label
|
|
3182
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3183
|
-
for="-select-checkbox-type-warning"
|
|
3184
|
-
>
|
|
3185
|
-
<input
|
|
3186
|
-
class="pf-v5-c-check__input"
|
|
3187
|
-
type="checkbox"
|
|
3188
|
-
id="-select-checkbox-type-warning"
|
|
3189
|
-
name="-select-checkbox-type-warning"
|
|
3190
|
-
/>
|
|
3191
|
-
|
|
3192
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
3193
|
-
</label>
|
|
3194
|
-
<label
|
|
3195
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3196
|
-
for="-select-checkbox-type-restarted"
|
|
3197
|
-
>
|
|
3198
|
-
<input
|
|
3199
|
-
class="pf-v5-c-check__input"
|
|
3200
|
-
type="checkbox"
|
|
3201
|
-
id="-select-checkbox-type-restarted"
|
|
3202
|
-
name="-select-checkbox-type-restarted"
|
|
3203
|
-
/>
|
|
3204
|
-
|
|
3205
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
3206
|
-
</label>
|
|
3207
|
-
</fieldset>
|
|
3208
|
-
</div>
|
|
3209
|
-
</div>
|
|
1699
|
+
</span>
|
|
1700
|
+
</button>
|
|
3210
1701
|
</div>
|
|
3211
1702
|
</div>
|
|
3212
1703
|
</div>
|
|
@@ -3310,55 +1801,36 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
3310
1801
|
<div class="pf-v5-c-toolbar__content">
|
|
3311
1802
|
<div class="pf-v5-c-toolbar__content-section">
|
|
3312
1803
|
<div class="pf-v5-c-toolbar__item pf-m-bulk-select">
|
|
3313
|
-
<div
|
|
3314
|
-
|
|
3315
|
-
|
|
3316
|
-
|
|
3317
|
-
|
|
3318
|
-
|
|
3319
|
-
|
|
3320
|
-
|
|
3321
|
-
|
|
3322
|
-
|
|
3323
|
-
|
|
3324
|
-
|
|
3325
|
-
|
|
3326
|
-
|
|
3327
|
-
|
|
3328
|
-
|
|
3329
|
-
|
|
3330
|
-
|
|
3331
|
-
|
|
3332
|
-
|
|
3333
|
-
|
|
3334
|
-
|
|
3335
|
-
|
|
3336
|
-
|
|
3337
|
-
|
|
3338
|
-
|
|
3339
|
-
|
|
3340
|
-
|
|
3341
|
-
|
|
3342
|
-
|
|
3343
|
-
role="menuitem"
|
|
3344
|
-
type="button"
|
|
3345
|
-
>Select all</button>
|
|
3346
|
-
</li>
|
|
3347
|
-
<li role="none">
|
|
3348
|
-
<button
|
|
3349
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
3350
|
-
role="menuitem"
|
|
3351
|
-
type="button"
|
|
3352
|
-
>Select none</button>
|
|
3353
|
-
</li>
|
|
3354
|
-
<li role="none">
|
|
3355
|
-
<button
|
|
3356
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
3357
|
-
role="menuitem"
|
|
3358
|
-
type="button"
|
|
3359
|
-
>Other action</button>
|
|
3360
|
-
</li>
|
|
3361
|
-
</ul>
|
|
1804
|
+
<div
|
|
1805
|
+
class="pf-v5-c-menu-toggle pf-m-split-button"
|
|
1806
|
+
id="toolbar-stacked-example-check"
|
|
1807
|
+
>
|
|
1808
|
+
<label
|
|
1809
|
+
class="pf-v5-c-check pf-m-standalone"
|
|
1810
|
+
id="toolbar-stacked-example-check-check"
|
|
1811
|
+
for="toolbar-stacked-example-check-check-input"
|
|
1812
|
+
>
|
|
1813
|
+
<input
|
|
1814
|
+
class="pf-v5-c-check__input"
|
|
1815
|
+
type="checkbox"
|
|
1816
|
+
id="toolbar-stacked-example-check-check-input"
|
|
1817
|
+
name="toolbar-stacked-example-check-check-input"
|
|
1818
|
+
aria-label="Standalone check"
|
|
1819
|
+
/>
|
|
1820
|
+
</label>
|
|
1821
|
+
<button
|
|
1822
|
+
class="pf-v5-c-menu-toggle__button"
|
|
1823
|
+
type="button"
|
|
1824
|
+
aria-expanded="false"
|
|
1825
|
+
id="toolbar-stacked-example-menu-toggle-toggle-button"
|
|
1826
|
+
aria-label="Menu toggle"
|
|
1827
|
+
>
|
|
1828
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
1829
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1830
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1831
|
+
</span>
|
|
1832
|
+
</span>
|
|
1833
|
+
</button>
|
|
3362
1834
|
</div>
|
|
3363
1835
|
</div>
|
|
3364
1836
|
<div class="pf-v5-c-toolbar__item pf-m-pagination">
|
|
@@ -3416,22 +1888,26 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
3416
1888
|
</div>
|
|
3417
1889
|
|
|
3418
1890
|
<nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
|
|
3419
|
-
<
|
|
3420
|
-
|
|
3421
|
-
|
|
3422
|
-
|
|
3423
|
-
|
|
3424
|
-
|
|
3425
|
-
|
|
3426
|
-
|
|
3427
|
-
|
|
3428
|
-
|
|
3429
|
-
|
|
3430
|
-
|
|
3431
|
-
|
|
3432
|
-
|
|
3433
|
-
|
|
3434
|
-
|
|
1891
|
+
<div class="pf-v5-c-pagination__nav-control pf-m-first">
|
|
1892
|
+
<button
|
|
1893
|
+
class="pf-v5-c-button pf-m-plain pf-m-disabled"
|
|
1894
|
+
type="button"
|
|
1895
|
+
aria-label="Go to first page"
|
|
1896
|
+
aria-disabled="true"
|
|
1897
|
+
>
|
|
1898
|
+
<i class="fas fa-angle-double-left" aria-hidden="true"></i>
|
|
1899
|
+
</button>
|
|
1900
|
+
</div>
|
|
1901
|
+
<div class="pf-v5-c-pagination__nav-control pf-m-prev">
|
|
1902
|
+
<button
|
|
1903
|
+
class="pf-v5-c-button pf-m-plain pf-m-disabled"
|
|
1904
|
+
type="button"
|
|
1905
|
+
aria-label="Go to previous page"
|
|
1906
|
+
aria-disabled="true"
|
|
1907
|
+
>
|
|
1908
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
1909
|
+
</button>
|
|
1910
|
+
</div>
|
|
3435
1911
|
|
|
3436
1912
|
<div
|
|
3437
1913
|
class="pf-v5-c-pagination__nav-page-select"
|
|
@@ -3448,20 +1924,24 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
3448
1924
|
</span>
|
|
3449
1925
|
<span aria-hidden="true">of 4</span>
|
|
3450
1926
|
</div>
|
|
3451
|
-
<
|
|
3452
|
-
|
|
3453
|
-
|
|
3454
|
-
|
|
3455
|
-
|
|
3456
|
-
|
|
3457
|
-
|
|
3458
|
-
|
|
3459
|
-
|
|
3460
|
-
|
|
3461
|
-
|
|
3462
|
-
|
|
3463
|
-
|
|
3464
|
-
|
|
1927
|
+
<div class="pf-v5-c-pagination__nav-control pf-m-next">
|
|
1928
|
+
<button
|
|
1929
|
+
class="pf-v5-c-button pf-m-plain"
|
|
1930
|
+
type="button"
|
|
1931
|
+
aria-label="Go to next page"
|
|
1932
|
+
>
|
|
1933
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1934
|
+
</button>
|
|
1935
|
+
</div>
|
|
1936
|
+
<div class="pf-v5-c-pagination__nav-control pf-m-last">
|
|
1937
|
+
<button
|
|
1938
|
+
class="pf-v5-c-button pf-m-plain"
|
|
1939
|
+
type="button"
|
|
1940
|
+
aria-label="Go to last page"
|
|
1941
|
+
>
|
|
1942
|
+
<i class="fas fa-angle-double-right" aria-hidden="true"></i>
|
|
1943
|
+
</button>
|
|
1944
|
+
</div>
|
|
3465
1945
|
</nav>
|
|
3466
1946
|
</div>
|
|
3467
1947
|
</div>
|
|
@@ -3478,12 +1958,12 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
3478
1958
|
<div class="pf-v5-c-toolbar__content">
|
|
3479
1959
|
<div class="pf-v5-c-toolbar__content-section">
|
|
3480
1960
|
<div class="pf-v5-c-toolbar__group pf-m-toggle-group">
|
|
3481
|
-
<div class="pf-v5-c-toolbar__toggle
|
|
1961
|
+
<div class="pf-v5-c-toolbar__toggle">
|
|
3482
1962
|
<button
|
|
3483
|
-
class="pf-v5-c-
|
|
1963
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
|
|
3484
1964
|
type="button"
|
|
3485
|
-
aria-label="Show filters"
|
|
3486
1965
|
aria-expanded="true"
|
|
1966
|
+
aria-label="Show filters"
|
|
3487
1967
|
aria-controls="toolbar-stacked-collapsed-example-expandable-content"
|
|
3488
1968
|
>
|
|
3489
1969
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
@@ -3543,307 +2023,68 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
3543
2023
|
<div class="pf-v5-c-toolbar__group">
|
|
3544
2024
|
<div
|
|
3545
2025
|
class="pf-v5-c-toolbar__item pf-m-label"
|
|
3546
|
-
id="toolbar-stacked-collapsed-example-
|
|
2026
|
+
id="toolbar-stacked-collapsed-example-menu-toggle-resource-label"
|
|
2027
|
+
aria-hidden="true"
|
|
3547
2028
|
>Resource</div>
|
|
2029
|
+
|
|
3548
2030
|
<div class="pf-v5-c-toolbar__item">
|
|
3549
|
-
<
|
|
3550
|
-
|
|
3551
|
-
|
|
3552
|
-
|
|
3553
|
-
|
|
3554
|
-
|
|
3555
|
-
|
|
3556
|
-
|
|
3557
|
-
|
|
3558
|
-
|
|
3559
|
-
<span class="pf-v5-c-select__toggle-text">Pod</span>
|
|
3560
|
-
</div>
|
|
3561
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
3562
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2031
|
+
<button
|
|
2032
|
+
class="pf-v5-c-menu-toggle"
|
|
2033
|
+
type="button"
|
|
2034
|
+
aria-expanded="false"
|
|
2035
|
+
id="toolbar-stacked-collapsed-example-menu-toggle-resource"
|
|
2036
|
+
>
|
|
2037
|
+
<span class="pf-v5-c-menu-toggle__text">Pod</span>
|
|
2038
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
2039
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
2040
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
3563
2041
|
</span>
|
|
3564
|
-
</
|
|
3565
|
-
|
|
3566
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
3567
|
-
<fieldset
|
|
3568
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
3569
|
-
aria-label="Select input"
|
|
3570
|
-
>
|
|
3571
|
-
<label
|
|
3572
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
3573
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-active"
|
|
3574
|
-
>
|
|
3575
|
-
<input
|
|
3576
|
-
class="pf-v5-c-check__input"
|
|
3577
|
-
type="checkbox"
|
|
3578
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-active"
|
|
3579
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-active"
|
|
3580
|
-
/>
|
|
3581
|
-
|
|
3582
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
3583
|
-
<span class="pf-v5-c-check__description">This is a description</span>
|
|
3584
|
-
</label>
|
|
3585
|
-
<label
|
|
3586
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
3587
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-canceled"
|
|
3588
|
-
>
|
|
3589
|
-
<input
|
|
3590
|
-
class="pf-v5-c-check__input"
|
|
3591
|
-
type="checkbox"
|
|
3592
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-canceled"
|
|
3593
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-canceled"
|
|
3594
|
-
/>
|
|
3595
|
-
|
|
3596
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
3597
|
-
<span
|
|
3598
|
-
class="pf-v5-c-check__description"
|
|
3599
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
3600
|
-
</label>
|
|
3601
|
-
<label
|
|
3602
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3603
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-paused"
|
|
3604
|
-
>
|
|
3605
|
-
<input
|
|
3606
|
-
class="pf-v5-c-check__input"
|
|
3607
|
-
type="checkbox"
|
|
3608
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-paused"
|
|
3609
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-paused"
|
|
3610
|
-
/>
|
|
3611
|
-
|
|
3612
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
3613
|
-
</label>
|
|
3614
|
-
<label
|
|
3615
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3616
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-warning"
|
|
3617
|
-
>
|
|
3618
|
-
<input
|
|
3619
|
-
class="pf-v5-c-check__input"
|
|
3620
|
-
type="checkbox"
|
|
3621
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-warning"
|
|
3622
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-warning"
|
|
3623
|
-
/>
|
|
3624
|
-
|
|
3625
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
3626
|
-
</label>
|
|
3627
|
-
<label
|
|
3628
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3629
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-restarted"
|
|
3630
|
-
>
|
|
3631
|
-
<input
|
|
3632
|
-
class="pf-v5-c-check__input"
|
|
3633
|
-
type="checkbox"
|
|
3634
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-restarted"
|
|
3635
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-restarted"
|
|
3636
|
-
/>
|
|
3637
|
-
|
|
3638
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
3639
|
-
</label>
|
|
3640
|
-
</fieldset>
|
|
3641
|
-
</div>
|
|
3642
|
-
</div>
|
|
2042
|
+
</span>
|
|
2043
|
+
</button>
|
|
3643
2044
|
</div>
|
|
3644
2045
|
</div>
|
|
3645
2046
|
<div class="pf-v5-c-toolbar__group">
|
|
3646
2047
|
<div
|
|
3647
2048
|
class="pf-v5-c-toolbar__item pf-m-label"
|
|
3648
|
-
id="
|
|
2049
|
+
id="-menu-toggle-status-label"
|
|
2050
|
+
aria-hidden="true"
|
|
3649
2051
|
>Status</div>
|
|
3650
2052
|
<div class="pf-v5-c-toolbar__item">
|
|
3651
|
-
<
|
|
3652
|
-
|
|
3653
|
-
|
|
3654
|
-
|
|
3655
|
-
|
|
3656
|
-
|
|
3657
|
-
|
|
3658
|
-
|
|
3659
|
-
|
|
3660
|
-
|
|
3661
|
-
<span class="pf-v5-c-select__toggle-text">Running</span>
|
|
3662
|
-
</div>
|
|
3663
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
3664
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2053
|
+
<button
|
|
2054
|
+
class="pf-v5-c-menu-toggle"
|
|
2055
|
+
type="button"
|
|
2056
|
+
aria-expanded="false"
|
|
2057
|
+
id="-menu-toggle-status"
|
|
2058
|
+
>
|
|
2059
|
+
<span class="pf-v5-c-menu-toggle__text">Running</span>
|
|
2060
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
2061
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
2062
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
3665
2063
|
</span>
|
|
3666
|
-
</
|
|
3667
|
-
|
|
3668
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
3669
|
-
<fieldset
|
|
3670
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
3671
|
-
aria-label="Select input"
|
|
3672
|
-
>
|
|
3673
|
-
<label
|
|
3674
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
3675
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-active"
|
|
3676
|
-
>
|
|
3677
|
-
<input
|
|
3678
|
-
class="pf-v5-c-check__input"
|
|
3679
|
-
type="checkbox"
|
|
3680
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-active"
|
|
3681
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-active"
|
|
3682
|
-
/>
|
|
3683
|
-
|
|
3684
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
3685
|
-
<span class="pf-v5-c-check__description">This is a description</span>
|
|
3686
|
-
</label>
|
|
3687
|
-
<label
|
|
3688
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
3689
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-canceled"
|
|
3690
|
-
>
|
|
3691
|
-
<input
|
|
3692
|
-
class="pf-v5-c-check__input"
|
|
3693
|
-
type="checkbox"
|
|
3694
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-canceled"
|
|
3695
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-canceled"
|
|
3696
|
-
/>
|
|
3697
|
-
|
|
3698
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
3699
|
-
<span
|
|
3700
|
-
class="pf-v5-c-check__description"
|
|
3701
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
3702
|
-
</label>
|
|
3703
|
-
<label
|
|
3704
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3705
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-paused"
|
|
3706
|
-
>
|
|
3707
|
-
<input
|
|
3708
|
-
class="pf-v5-c-check__input"
|
|
3709
|
-
type="checkbox"
|
|
3710
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-paused"
|
|
3711
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-paused"
|
|
3712
|
-
/>
|
|
3713
|
-
|
|
3714
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
3715
|
-
</label>
|
|
3716
|
-
<label
|
|
3717
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3718
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-warning"
|
|
3719
|
-
>
|
|
3720
|
-
<input
|
|
3721
|
-
class="pf-v5-c-check__input"
|
|
3722
|
-
type="checkbox"
|
|
3723
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-warning"
|
|
3724
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-warning"
|
|
3725
|
-
/>
|
|
3726
|
-
|
|
3727
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
3728
|
-
</label>
|
|
3729
|
-
<label
|
|
3730
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3731
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-restarted"
|
|
3732
|
-
>
|
|
3733
|
-
<input
|
|
3734
|
-
class="pf-v5-c-check__input"
|
|
3735
|
-
type="checkbox"
|
|
3736
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-restarted"
|
|
3737
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-restarted"
|
|
3738
|
-
/>
|
|
3739
|
-
|
|
3740
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
3741
|
-
</label>
|
|
3742
|
-
</fieldset>
|
|
3743
|
-
</div>
|
|
3744
|
-
</div>
|
|
2064
|
+
</span>
|
|
2065
|
+
</button>
|
|
3745
2066
|
</div>
|
|
3746
2067
|
</div>
|
|
3747
2068
|
<div class="pf-v5-c-toolbar__group">
|
|
3748
2069
|
<div
|
|
3749
2070
|
class="pf-v5-c-toolbar__item pf-m-label"
|
|
3750
|
-
id="
|
|
2071
|
+
id="-menu-toggle-type-label"
|
|
2072
|
+
aria-hidden="true"
|
|
3751
2073
|
>Type</div>
|
|
3752
2074
|
<div class="pf-v5-c-toolbar__item">
|
|
3753
|
-
<
|
|
3754
|
-
|
|
3755
|
-
|
|
3756
|
-
|
|
3757
|
-
|
|
3758
|
-
|
|
3759
|
-
|
|
3760
|
-
|
|
3761
|
-
|
|
3762
|
-
|
|
3763
|
-
<span class="pf-v5-c-select__toggle-text">Any</span>
|
|
3764
|
-
</div>
|
|
3765
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
3766
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2075
|
+
<button
|
|
2076
|
+
class="pf-v5-c-menu-toggle"
|
|
2077
|
+
type="button"
|
|
2078
|
+
aria-expanded="false"
|
|
2079
|
+
id="-menu-toggle-type"
|
|
2080
|
+
>
|
|
2081
|
+
<span class="pf-v5-c-menu-toggle__text">Any</span>
|
|
2082
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
2083
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
2084
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
3767
2085
|
</span>
|
|
3768
|
-
</
|
|
3769
|
-
|
|
3770
|
-
<div class="pf-v5-c-select__menu" hidden>
|
|
3771
|
-
<fieldset
|
|
3772
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
3773
|
-
aria-label="Select input"
|
|
3774
|
-
>
|
|
3775
|
-
<label
|
|
3776
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
3777
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-active"
|
|
3778
|
-
>
|
|
3779
|
-
<input
|
|
3780
|
-
class="pf-v5-c-check__input"
|
|
3781
|
-
type="checkbox"
|
|
3782
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-active"
|
|
3783
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-active"
|
|
3784
|
-
/>
|
|
3785
|
-
|
|
3786
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
3787
|
-
<span class="pf-v5-c-check__description">This is a description</span>
|
|
3788
|
-
</label>
|
|
3789
|
-
<label
|
|
3790
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
|
|
3791
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-canceled"
|
|
3792
|
-
>
|
|
3793
|
-
<input
|
|
3794
|
-
class="pf-v5-c-check__input"
|
|
3795
|
-
type="checkbox"
|
|
3796
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-canceled"
|
|
3797
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-canceled"
|
|
3798
|
-
/>
|
|
3799
|
-
|
|
3800
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
3801
|
-
<span
|
|
3802
|
-
class="pf-v5-c-check__description"
|
|
3803
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
3804
|
-
</label>
|
|
3805
|
-
<label
|
|
3806
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3807
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-paused"
|
|
3808
|
-
>
|
|
3809
|
-
<input
|
|
3810
|
-
class="pf-v5-c-check__input"
|
|
3811
|
-
type="checkbox"
|
|
3812
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-paused"
|
|
3813
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-paused"
|
|
3814
|
-
/>
|
|
3815
|
-
|
|
3816
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
3817
|
-
</label>
|
|
3818
|
-
<label
|
|
3819
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3820
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-warning"
|
|
3821
|
-
>
|
|
3822
|
-
<input
|
|
3823
|
-
class="pf-v5-c-check__input"
|
|
3824
|
-
type="checkbox"
|
|
3825
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-warning"
|
|
3826
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-warning"
|
|
3827
|
-
/>
|
|
3828
|
-
|
|
3829
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
3830
|
-
</label>
|
|
3831
|
-
<label
|
|
3832
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
3833
|
-
for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-restarted"
|
|
3834
|
-
>
|
|
3835
|
-
<input
|
|
3836
|
-
class="pf-v5-c-check__input"
|
|
3837
|
-
type="checkbox"
|
|
3838
|
-
id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-restarted"
|
|
3839
|
-
name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-restarted"
|
|
3840
|
-
/>
|
|
3841
|
-
|
|
3842
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
3843
|
-
</label>
|
|
3844
|
-
</fieldset>
|
|
3845
|
-
</div>
|
|
3846
|
-
</div>
|
|
2086
|
+
</span>
|
|
2087
|
+
</button>
|
|
3847
2088
|
</div>
|
|
3848
2089
|
</div>
|
|
3849
2090
|
</div>
|
|
@@ -3853,63 +2094,44 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
3853
2094
|
<div class="pf-v5-c-toolbar__content">
|
|
3854
2095
|
<div class="pf-v5-c-toolbar__content-section">
|
|
3855
2096
|
<div class="pf-v5-c-toolbar__item pf-m-bulk-select">
|
|
3856
|
-
<div
|
|
3857
|
-
|
|
3858
|
-
|
|
3859
|
-
|
|
3860
|
-
|
|
3861
|
-
|
|
3862
|
-
|
|
3863
|
-
|
|
3864
|
-
|
|
3865
|
-
|
|
3866
|
-
|
|
3867
|
-
|
|
3868
|
-
|
|
3869
|
-
|
|
3870
|
-
|
|
3871
|
-
|
|
2097
|
+
<div
|
|
2098
|
+
class="pf-v5-c-menu-toggle pf-m-split-button"
|
|
2099
|
+
id="toolbar-stacked-collapsed-example-check"
|
|
2100
|
+
>
|
|
2101
|
+
<label
|
|
2102
|
+
class="pf-v5-c-check pf-m-standalone"
|
|
2103
|
+
id="toolbar-stacked-collapsed-example-check-check"
|
|
2104
|
+
for="toolbar-stacked-collapsed-example-check-check-input"
|
|
2105
|
+
>
|
|
2106
|
+
<input
|
|
2107
|
+
class="pf-v5-c-check__input"
|
|
2108
|
+
type="checkbox"
|
|
2109
|
+
id="toolbar-stacked-collapsed-example-check-check-input"
|
|
2110
|
+
name="toolbar-stacked-collapsed-example-check-check-input"
|
|
2111
|
+
aria-label="Standalone check"
|
|
2112
|
+
/>
|
|
2113
|
+
</label>
|
|
2114
|
+
<button
|
|
2115
|
+
class="pf-v5-c-menu-toggle__button"
|
|
2116
|
+
type="button"
|
|
2117
|
+
aria-expanded="false"
|
|
2118
|
+
id="toolbar-stacked-collapsed-example-menu-toggle-toggle-button"
|
|
2119
|
+
aria-label="Menu toggle"
|
|
2120
|
+
>
|
|
2121
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
2122
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
2123
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
2124
|
+
</span>
|
|
2125
|
+
</span>
|
|
2126
|
+
</button>
|
|
2127
|
+
</div>
|
|
2128
|
+
</div>
|
|
2129
|
+
<div class="pf-v5-c-toolbar__item pf-m-pagination">
|
|
2130
|
+
<div class="pf-v5-c-pagination" aria-label="Element pagination">
|
|
2131
|
+
<div class="pf-v5-c-pagination__total-items">37 items</div>
|
|
2132
|
+
<div class="pf-v5-c-options-menu">
|
|
3872
2133
|
<button
|
|
3873
|
-
class="pf-v5-c-
|
|
3874
|
-
type="button"
|
|
3875
|
-
aria-expanded="false"
|
|
3876
|
-
id="toolbar-stacked-collapsed-example-bulk-select-toggle-button"
|
|
3877
|
-
aria-label="Dropdown toggle"
|
|
3878
|
-
>
|
|
3879
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
3880
|
-
</button>
|
|
3881
|
-
</div>
|
|
3882
|
-
<ul class="pf-v5-c-dropdown__menu" hidden role="menu">
|
|
3883
|
-
<li role="none">
|
|
3884
|
-
<button
|
|
3885
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
3886
|
-
role="menuitem"
|
|
3887
|
-
type="button"
|
|
3888
|
-
>Select all</button>
|
|
3889
|
-
</li>
|
|
3890
|
-
<li role="none">
|
|
3891
|
-
<button
|
|
3892
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
3893
|
-
role="menuitem"
|
|
3894
|
-
type="button"
|
|
3895
|
-
>Select none</button>
|
|
3896
|
-
</li>
|
|
3897
|
-
<li role="none">
|
|
3898
|
-
<button
|
|
3899
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
3900
|
-
role="menuitem"
|
|
3901
|
-
type="button"
|
|
3902
|
-
>Other action</button>
|
|
3903
|
-
</li>
|
|
3904
|
-
</ul>
|
|
3905
|
-
</div>
|
|
3906
|
-
</div>
|
|
3907
|
-
<div class="pf-v5-c-toolbar__item pf-m-pagination">
|
|
3908
|
-
<div class="pf-v5-c-pagination" aria-label="Element pagination">
|
|
3909
|
-
<div class="pf-v5-c-pagination__total-items">37 items</div>
|
|
3910
|
-
<div class="pf-v5-c-options-menu">
|
|
3911
|
-
<button
|
|
3912
|
-
class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
|
|
2134
|
+
class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
|
|
3913
2135
|
type="button"
|
|
3914
2136
|
id="toolbar-stacked-collapsed-example-pagination-options-menu-toggle"
|
|
3915
2137
|
aria-haspopup="listbox"
|
|
@@ -3959,22 +2181,26 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
3959
2181
|
</div>
|
|
3960
2182
|
|
|
3961
2183
|
<nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
|
|
3962
|
-
<
|
|
3963
|
-
|
|
3964
|
-
|
|
3965
|
-
|
|
3966
|
-
|
|
3967
|
-
|
|
3968
|
-
|
|
3969
|
-
|
|
3970
|
-
|
|
3971
|
-
|
|
3972
|
-
|
|
3973
|
-
|
|
3974
|
-
|
|
3975
|
-
|
|
3976
|
-
|
|
3977
|
-
|
|
2184
|
+
<div class="pf-v5-c-pagination__nav-control pf-m-first">
|
|
2185
|
+
<button
|
|
2186
|
+
class="pf-v5-c-button pf-m-plain pf-m-disabled"
|
|
2187
|
+
type="button"
|
|
2188
|
+
aria-label="Go to first page"
|
|
2189
|
+
aria-disabled="true"
|
|
2190
|
+
>
|
|
2191
|
+
<i class="fas fa-angle-double-left" aria-hidden="true"></i>
|
|
2192
|
+
</button>
|
|
2193
|
+
</div>
|
|
2194
|
+
<div class="pf-v5-c-pagination__nav-control pf-m-prev">
|
|
2195
|
+
<button
|
|
2196
|
+
class="pf-v5-c-button pf-m-plain pf-m-disabled"
|
|
2197
|
+
type="button"
|
|
2198
|
+
aria-label="Go to previous page"
|
|
2199
|
+
aria-disabled="true"
|
|
2200
|
+
>
|
|
2201
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
2202
|
+
</button>
|
|
2203
|
+
</div>
|
|
3978
2204
|
|
|
3979
2205
|
<div
|
|
3980
2206
|
class="pf-v5-c-pagination__nav-page-select"
|
|
@@ -3991,489 +2217,28 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
3991
2217
|
</span>
|
|
3992
2218
|
<span aria-hidden="true">of 4</span>
|
|
3993
2219
|
</div>
|
|
3994
|
-
<
|
|
3995
|
-
class="pf-v5-c-button pf-m-plain"
|
|
3996
|
-
type="button"
|
|
3997
|
-
aria-label="Go to next page"
|
|
3998
|
-
>
|
|
3999
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
4000
|
-
</button>
|
|
4001
|
-
<button
|
|
4002
|
-
class="pf-v5-c-button pf-m-plain"
|
|
4003
|
-
type="button"
|
|
4004
|
-
aria-label="Go to last page"
|
|
4005
|
-
>
|
|
4006
|
-
<i class="fas fa-angle-double-right" aria-hidden="true"></i>
|
|
4007
|
-
</button>
|
|
4008
|
-
</nav>
|
|
4009
|
-
</div>
|
|
4010
|
-
</div>
|
|
4011
|
-
</div>
|
|
4012
|
-
</div>
|
|
4013
|
-
</div>
|
|
4014
|
-
|
|
4015
|
-
```
|
|
4016
|
-
|
|
4017
|
-
### Expanded elements
|
|
4018
|
-
|
|
4019
|
-
```html
|
|
4020
|
-
<div class="pf-v5-c-toolbar" id="toolbar-expanded-elements-example">
|
|
4021
|
-
<div class="pf-v5-c-toolbar__content">
|
|
4022
|
-
<div class="pf-v5-c-toolbar__content-section">
|
|
4023
|
-
<div class="pf-v5-c-toolbar__item pf-m-bulk-select">
|
|
4024
|
-
<div class="pf-v5-c-dropdown">
|
|
4025
|
-
<div class="pf-v5-c-dropdown__toggle pf-m-split-button">
|
|
4026
|
-
<label
|
|
4027
|
-
class="pf-v5-c-dropdown__toggle-check"
|
|
4028
|
-
for="toolbar-expanded-elements-example-bulk-select-toggle-check"
|
|
4029
|
-
>
|
|
4030
|
-
<div class="pf-v5-c-check pf-m-standalone">
|
|
4031
|
-
<input
|
|
4032
|
-
class="pf-v5-c-check__input"
|
|
4033
|
-
type="checkbox"
|
|
4034
|
-
id="toolbar-expanded-elements-example-bulk-select-toggle-check"
|
|
4035
|
-
aria-label="Select all"
|
|
4036
|
-
/>
|
|
4037
|
-
</div>
|
|
4038
|
-
</label>
|
|
4039
|
-
|
|
4040
|
-
<button
|
|
4041
|
-
class="pf-v5-c-dropdown__toggle-button"
|
|
4042
|
-
type="button"
|
|
4043
|
-
aria-expanded="false"
|
|
4044
|
-
id="toolbar-expanded-elements-example-bulk-select-toggle-button"
|
|
4045
|
-
aria-label="Dropdown toggle"
|
|
4046
|
-
>
|
|
4047
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
4048
|
-
</button>
|
|
4049
|
-
</div>
|
|
4050
|
-
<ul class="pf-v5-c-dropdown__menu" hidden role="menu">
|
|
4051
|
-
<li role="none">
|
|
2220
|
+
<div class="pf-v5-c-pagination__nav-control pf-m-next">
|
|
4052
2221
|
<button
|
|
4053
|
-
class="pf-v5-c-
|
|
4054
|
-
role="menuitem"
|
|
2222
|
+
class="pf-v5-c-button pf-m-plain"
|
|
4055
2223
|
type="button"
|
|
4056
|
-
|
|
4057
|
-
</li>
|
|
4058
|
-
<li role="none">
|
|
4059
|
-
<button
|
|
4060
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
4061
|
-
role="menuitem"
|
|
4062
|
-
type="button"
|
|
4063
|
-
>Select none</button>
|
|
4064
|
-
</li>
|
|
4065
|
-
<li role="none">
|
|
4066
|
-
<button
|
|
4067
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
4068
|
-
role="menuitem"
|
|
4069
|
-
type="button"
|
|
4070
|
-
>Other action</button>
|
|
4071
|
-
</li>
|
|
4072
|
-
</ul>
|
|
4073
|
-
</div>
|
|
4074
|
-
</div>
|
|
4075
|
-
<div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl">
|
|
4076
|
-
<div class="pf-v5-c-toolbar__toggle">
|
|
4077
|
-
<button
|
|
4078
|
-
class="pf-v5-c-button pf-m-plain"
|
|
4079
|
-
type="button"
|
|
4080
|
-
aria-label="Show filters"
|
|
4081
|
-
aria-expanded="false"
|
|
4082
|
-
aria-controls="toolbar-expanded-elements-example-expandable-content"
|
|
4083
|
-
>
|
|
4084
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
4085
|
-
</button>
|
|
4086
|
-
</div>
|
|
4087
|
-
<div class="pf-v5-c-toolbar__item pf-m-search-filter">
|
|
4088
|
-
<div
|
|
4089
|
-
class="pf-v5-c-input-group"
|
|
4090
|
-
aria-label="search filter"
|
|
4091
|
-
role="group"
|
|
4092
|
-
>
|
|
4093
|
-
<div class="pf-v5-c-input-group__item">
|
|
4094
|
-
<div class="pf-v5-c-select" style="width: 124px">
|
|
4095
|
-
<span
|
|
4096
|
-
id="toolbar-expanded-elements-example-select-name-label"
|
|
4097
|
-
hidden
|
|
4098
|
-
>Choose one</span>
|
|
4099
|
-
|
|
4100
|
-
<button
|
|
4101
|
-
class="pf-v5-c-select__toggle"
|
|
4102
|
-
type="button"
|
|
4103
|
-
id="toolbar-expanded-elements-example-select-name-toggle"
|
|
4104
|
-
aria-haspopup="true"
|
|
4105
|
-
aria-expanded="false"
|
|
4106
|
-
aria-labelledby="toolbar-expanded-elements-example-select-name-label toolbar-expanded-elements-example-select-name-toggle"
|
|
4107
|
-
>
|
|
4108
|
-
<div class="pf-v5-c-select__toggle-wrapper">
|
|
4109
|
-
<span class="pf-v5-c-select__toggle-icon">
|
|
4110
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
4111
|
-
</span>
|
|
4112
|
-
<span class="pf-v5-c-select__toggle-text">Name</span>
|
|
4113
|
-
</div>
|
|
4114
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
4115
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
4116
|
-
</span>
|
|
4117
|
-
</button>
|
|
4118
|
-
|
|
4119
|
-
<ul
|
|
4120
|
-
class="pf-v5-c-select__menu"
|
|
4121
|
-
role="listbox"
|
|
4122
|
-
aria-labelledby="toolbar-expanded-elements-example-select-name-label"
|
|
4123
|
-
hidden
|
|
4124
|
-
>
|
|
4125
|
-
<li role="presentation">
|
|
4126
|
-
<button
|
|
4127
|
-
class="pf-v5-c-select__menu-item"
|
|
4128
|
-
role="option"
|
|
4129
|
-
>Running</button>
|
|
4130
|
-
</li>
|
|
4131
|
-
<li role="presentation">
|
|
4132
|
-
<button
|
|
4133
|
-
class="pf-v5-c-select__menu-item pf-m-selected"
|
|
4134
|
-
role="option"
|
|
4135
|
-
aria-selected="true"
|
|
4136
|
-
>
|
|
4137
|
-
Stopped
|
|
4138
|
-
<span class="pf-v5-c-select__menu-item-icon">
|
|
4139
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
4140
|
-
</span>
|
|
4141
|
-
</button>
|
|
4142
|
-
</li>
|
|
4143
|
-
<li role="presentation">
|
|
4144
|
-
<button class="pf-v5-c-select__menu-item" role="option">Down</button>
|
|
4145
|
-
</li>
|
|
4146
|
-
<li role="presentation">
|
|
4147
|
-
<button
|
|
4148
|
-
class="pf-v5-c-select__menu-item"
|
|
4149
|
-
role="option"
|
|
4150
|
-
>Degraded</button>
|
|
4151
|
-
</li>
|
|
4152
|
-
<li role="presentation">
|
|
4153
|
-
<button
|
|
4154
|
-
class="pf-v5-c-select__menu-item"
|
|
4155
|
-
role="option"
|
|
4156
|
-
>Needs maintenance</button>
|
|
4157
|
-
</li>
|
|
4158
|
-
</ul>
|
|
4159
|
-
</div>
|
|
4160
|
-
</div>
|
|
4161
|
-
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
4162
|
-
<div class="pf-v5-c-text-input-group">
|
|
4163
|
-
<div class="pf-v5-c-text-input-group__main pf-m-icon">
|
|
4164
|
-
<span class="pf-v5-c-text-input-group__text">
|
|
4165
|
-
<span class="pf-v5-c-text-input-group__icon">
|
|
4166
|
-
<i class="fas fa-fw fa-search"></i>
|
|
4167
|
-
</span>
|
|
4168
|
-
<input
|
|
4169
|
-
class="pf-v5-c-text-input-group__text-input"
|
|
4170
|
-
type="text"
|
|
4171
|
-
placeholder="Filter by name"
|
|
4172
|
-
value
|
|
4173
|
-
aria-label="Search input"
|
|
4174
|
-
/>
|
|
4175
|
-
</span>
|
|
4176
|
-
</div>
|
|
4177
|
-
</div>
|
|
4178
|
-
</div>
|
|
4179
|
-
</div>
|
|
4180
|
-
</div>
|
|
4181
|
-
<div class="pf-v5-c-toolbar__group pf-m-filter-group">
|
|
4182
|
-
<div class="pf-v5-c-toolbar__item">
|
|
4183
|
-
<div class="pf-v5-c-select pf-m-expanded">
|
|
4184
|
-
<span
|
|
4185
|
-
id="toolbar-expanded-elements-example-select-checkbox-status-label"
|
|
4186
|
-
hidden
|
|
4187
|
-
>Choose many</span>
|
|
4188
|
-
|
|
4189
|
-
<button
|
|
4190
|
-
class="pf-v5-c-select__toggle"
|
|
4191
|
-
type="button"
|
|
4192
|
-
id="toolbar-expanded-elements-example-select-checkbox-status-toggle"
|
|
4193
|
-
aria-haspopup="true"
|
|
4194
|
-
aria-expanded="true"
|
|
4195
|
-
aria-labelledby="toolbar-expanded-elements-example-select-checkbox-status-label toolbar-expanded-elements-example-select-checkbox-status-toggle"
|
|
2224
|
+
aria-label="Go to next page"
|
|
4196
2225
|
>
|
|
4197
|
-
<
|
|
4198
|
-
<span class="pf-v5-c-select__toggle-text">Status</span>
|
|
4199
|
-
</div>
|
|
4200
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
4201
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
4202
|
-
</span>
|
|
2226
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
4203
2227
|
</button>
|
|
4204
|
-
|
|
4205
|
-
<div class="pf-v5-c-select__menu">
|
|
4206
|
-
<fieldset
|
|
4207
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
4208
|
-
aria-label="Select input"
|
|
4209
|
-
>
|
|
4210
|
-
<label
|
|
4211
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
4212
|
-
for="toolbar-expanded-elements-example-select-checkbox-status-active"
|
|
4213
|
-
>
|
|
4214
|
-
<input
|
|
4215
|
-
class="pf-v5-c-check__input"
|
|
4216
|
-
type="checkbox"
|
|
4217
|
-
id="toolbar-expanded-elements-example-select-checkbox-status-active"
|
|
4218
|
-
name="toolbar-expanded-elements-example-select-checkbox-status-active"
|
|
4219
|
-
/>
|
|
4220
|
-
|
|
4221
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
4222
|
-
</label>
|
|
4223
|
-
<label
|
|
4224
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
4225
|
-
for="toolbar-expanded-elements-example-select-checkbox-status-canceled"
|
|
4226
|
-
>
|
|
4227
|
-
<input
|
|
4228
|
-
class="pf-v5-c-check__input"
|
|
4229
|
-
type="checkbox"
|
|
4230
|
-
id="toolbar-expanded-elements-example-select-checkbox-status-canceled"
|
|
4231
|
-
name="toolbar-expanded-elements-example-select-checkbox-status-canceled"
|
|
4232
|
-
checked
|
|
4233
|
-
/>
|
|
4234
|
-
|
|
4235
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
4236
|
-
</label>
|
|
4237
|
-
<label
|
|
4238
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
4239
|
-
for="toolbar-expanded-elements-example-select-checkbox-status-paused"
|
|
4240
|
-
>
|
|
4241
|
-
<input
|
|
4242
|
-
class="pf-v5-c-check__input"
|
|
4243
|
-
type="checkbox"
|
|
4244
|
-
id="toolbar-expanded-elements-example-select-checkbox-status-paused"
|
|
4245
|
-
name="toolbar-expanded-elements-example-select-checkbox-status-paused"
|
|
4246
|
-
checked
|
|
4247
|
-
/>
|
|
4248
|
-
|
|
4249
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
4250
|
-
</label>
|
|
4251
|
-
<label
|
|
4252
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
4253
|
-
for="toolbar-expanded-elements-example-select-checkbox-status-warning"
|
|
4254
|
-
>
|
|
4255
|
-
<input
|
|
4256
|
-
class="pf-v5-c-check__input"
|
|
4257
|
-
type="checkbox"
|
|
4258
|
-
id="toolbar-expanded-elements-example-select-checkbox-status-warning"
|
|
4259
|
-
name="toolbar-expanded-elements-example-select-checkbox-status-warning"
|
|
4260
|
-
/>
|
|
4261
|
-
|
|
4262
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
4263
|
-
</label>
|
|
4264
|
-
<label
|
|
4265
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
4266
|
-
for="toolbar-expanded-elements-example-select-checkbox-status-restarted"
|
|
4267
|
-
>
|
|
4268
|
-
<input
|
|
4269
|
-
class="pf-v5-c-check__input"
|
|
4270
|
-
type="checkbox"
|
|
4271
|
-
id="toolbar-expanded-elements-example-select-checkbox-status-restarted"
|
|
4272
|
-
name="toolbar-expanded-elements-example-select-checkbox-status-restarted"
|
|
4273
|
-
checked
|
|
4274
|
-
/>
|
|
4275
|
-
|
|
4276
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
4277
|
-
</label>
|
|
4278
|
-
</fieldset>
|
|
4279
|
-
</div>
|
|
4280
2228
|
</div>
|
|
4281
|
-
|
|
4282
|
-
<div class="pf-v5-c-toolbar__item">
|
|
4283
|
-
<div class="pf-v5-c-select pf-m-expanded">
|
|
4284
|
-
<span
|
|
4285
|
-
id="toolbar-expanded-elements-example-select-checkbox-risk-label"
|
|
4286
|
-
hidden
|
|
4287
|
-
>Choose many</span>
|
|
4288
|
-
|
|
2229
|
+
<div class="pf-v5-c-pagination__nav-control pf-m-last">
|
|
4289
2230
|
<button
|
|
4290
|
-
class="pf-v5-c-
|
|
2231
|
+
class="pf-v5-c-button pf-m-plain"
|
|
4291
2232
|
type="button"
|
|
4292
|
-
|
|
4293
|
-
aria-haspopup="true"
|
|
4294
|
-
aria-expanded="true"
|
|
4295
|
-
aria-labelledby="toolbar-expanded-elements-example-select-checkbox-risk-label toolbar-expanded-elements-example-select-checkbox-risk-toggle"
|
|
2233
|
+
aria-label="Go to last page"
|
|
4296
2234
|
>
|
|
4297
|
-
<
|
|
4298
|
-
<span class="pf-v5-c-select__toggle-text">Risk</span>
|
|
4299
|
-
</div>
|
|
4300
|
-
<span class="pf-v5-c-select__toggle-arrow">
|
|
4301
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
4302
|
-
</span>
|
|
2235
|
+
<i class="fas fa-angle-double-right" aria-hidden="true"></i>
|
|
4303
2236
|
</button>
|
|
4304
|
-
|
|
4305
|
-
<div class="pf-v5-c-select__menu">
|
|
4306
|
-
<fieldset
|
|
4307
|
-
class="pf-v5-c-select__menu-fieldset"
|
|
4308
|
-
aria-label="Select input"
|
|
4309
|
-
>
|
|
4310
|
-
<label
|
|
4311
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
4312
|
-
for="toolbar-expanded-elements-example-select-checkbox-risk-active"
|
|
4313
|
-
>
|
|
4314
|
-
<input
|
|
4315
|
-
class="pf-v5-c-check__input"
|
|
4316
|
-
type="checkbox"
|
|
4317
|
-
id="toolbar-expanded-elements-example-select-checkbox-risk-active"
|
|
4318
|
-
name="toolbar-expanded-elements-example-select-checkbox-risk-active"
|
|
4319
|
-
/>
|
|
4320
|
-
|
|
4321
|
-
<span class="pf-v5-c-check__label">Active</span>
|
|
4322
|
-
</label>
|
|
4323
|
-
<label
|
|
4324
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
4325
|
-
for="toolbar-expanded-elements-example-select-checkbox-risk-canceled"
|
|
4326
|
-
>
|
|
4327
|
-
<input
|
|
4328
|
-
class="pf-v5-c-check__input"
|
|
4329
|
-
type="checkbox"
|
|
4330
|
-
id="toolbar-expanded-elements-example-select-checkbox-risk-canceled"
|
|
4331
|
-
name="toolbar-expanded-elements-example-select-checkbox-risk-canceled"
|
|
4332
|
-
checked
|
|
4333
|
-
/>
|
|
4334
|
-
|
|
4335
|
-
<span class="pf-v5-c-check__label">Canceled</span>
|
|
4336
|
-
</label>
|
|
4337
|
-
<label
|
|
4338
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
4339
|
-
for="toolbar-expanded-elements-example-select-checkbox-risk-paused"
|
|
4340
|
-
>
|
|
4341
|
-
<input
|
|
4342
|
-
class="pf-v5-c-check__input"
|
|
4343
|
-
type="checkbox"
|
|
4344
|
-
id="toolbar-expanded-elements-example-select-checkbox-risk-paused"
|
|
4345
|
-
name="toolbar-expanded-elements-example-select-checkbox-risk-paused"
|
|
4346
|
-
checked
|
|
4347
|
-
/>
|
|
4348
|
-
|
|
4349
|
-
<span class="pf-v5-c-check__label">Paused</span>
|
|
4350
|
-
</label>
|
|
4351
|
-
<label
|
|
4352
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
4353
|
-
for="toolbar-expanded-elements-example-select-checkbox-risk-warning"
|
|
4354
|
-
>
|
|
4355
|
-
<input
|
|
4356
|
-
class="pf-v5-c-check__input"
|
|
4357
|
-
type="checkbox"
|
|
4358
|
-
id="toolbar-expanded-elements-example-select-checkbox-risk-warning"
|
|
4359
|
-
name="toolbar-expanded-elements-example-select-checkbox-risk-warning"
|
|
4360
|
-
/>
|
|
4361
|
-
|
|
4362
|
-
<span class="pf-v5-c-check__label">Warning</span>
|
|
4363
|
-
</label>
|
|
4364
|
-
<label
|
|
4365
|
-
class="pf-v5-c-check pf-v5-c-select__menu-item"
|
|
4366
|
-
for="toolbar-expanded-elements-example-select-checkbox-risk-restarted"
|
|
4367
|
-
>
|
|
4368
|
-
<input
|
|
4369
|
-
class="pf-v5-c-check__input"
|
|
4370
|
-
type="checkbox"
|
|
4371
|
-
id="toolbar-expanded-elements-example-select-checkbox-risk-restarted"
|
|
4372
|
-
name="toolbar-expanded-elements-example-select-checkbox-risk-restarted"
|
|
4373
|
-
checked
|
|
4374
|
-
/>
|
|
4375
|
-
|
|
4376
|
-
<span class="pf-v5-c-check__label">Restarted</span>
|
|
4377
|
-
</label>
|
|
4378
|
-
</fieldset>
|
|
4379
|
-
</div>
|
|
4380
2237
|
</div>
|
|
4381
|
-
</
|
|
4382
|
-
</div>
|
|
4383
|
-
</div>
|
|
4384
|
-
<div class="pf-v5-c-toolbar__item pf-m-overflow-menu">
|
|
4385
|
-
<div
|
|
4386
|
-
class="pf-v5-c-overflow-menu"
|
|
4387
|
-
id="toolbar-expanded-elements-example-icon-button-overflow-menu"
|
|
4388
|
-
>
|
|
4389
|
-
<div class="pf-v5-c-overflow-menu__content">
|
|
4390
|
-
<div class="pf-v5-c-overflow-menu__group pf-m-icon-button-group">
|
|
4391
|
-
<div class="pf-v5-c-overflow-menu__item">
|
|
4392
|
-
<button
|
|
4393
|
-
class="pf-v5-c-button pf-m-plain"
|
|
4394
|
-
type="button"
|
|
4395
|
-
aria-label="Edit"
|
|
4396
|
-
>
|
|
4397
|
-
<i class="fas fa-edit" aria-hidden="true"></i>
|
|
4398
|
-
</button>
|
|
4399
|
-
</div>
|
|
4400
|
-
<div class="pf-v5-c-overflow-menu__item">
|
|
4401
|
-
<button
|
|
4402
|
-
class="pf-v5-c-button pf-m-plain"
|
|
4403
|
-
type="button"
|
|
4404
|
-
aria-label="Clone"
|
|
4405
|
-
>
|
|
4406
|
-
<i class="fas fa-clone" aria-hidden="true"></i>
|
|
4407
|
-
</button>
|
|
4408
|
-
</div>
|
|
4409
|
-
<div class="pf-v5-c-overflow-menu__item">
|
|
4410
|
-
<button
|
|
4411
|
-
class="pf-v5-c-button pf-m-plain"
|
|
4412
|
-
type="button"
|
|
4413
|
-
aria-label="Sync"
|
|
4414
|
-
>
|
|
4415
|
-
<i class="fas fa-sync" aria-hidden="true"></i>
|
|
4416
|
-
</button>
|
|
4417
|
-
</div>
|
|
4418
|
-
</div>
|
|
4419
|
-
</div>
|
|
4420
|
-
</div>
|
|
4421
|
-
</div>
|
|
4422
|
-
<div class="pf-v5-c-toolbar__item pf-m-overflow-menu">
|
|
4423
|
-
<div
|
|
4424
|
-
class="pf-v5-c-overflow-menu"
|
|
4425
|
-
id="toolbar-expanded-elements-example-overflow-menu"
|
|
4426
|
-
>
|
|
4427
|
-
<div class="pf-v5-c-overflow-menu__content">
|
|
4428
|
-
<div class="pf-v5-c-overflow-menu__group pf-m-button-group">
|
|
4429
|
-
<div class="pf-v5-c-overflow-menu__item">
|
|
4430
|
-
<button
|
|
4431
|
-
class="pf-v5-c-button pf-m-primary"
|
|
4432
|
-
type="button"
|
|
4433
|
-
>Primary</button>
|
|
4434
|
-
</div>
|
|
4435
|
-
<div class="pf-v5-c-overflow-menu__item">
|
|
4436
|
-
<button
|
|
4437
|
-
class="pf-v5-c-button pf-m-secondary"
|
|
4438
|
-
type="button"
|
|
4439
|
-
>Secondary</button>
|
|
4440
|
-
</div>
|
|
4441
|
-
</div>
|
|
4442
|
-
</div>
|
|
4443
|
-
|
|
4444
|
-
<div class="pf-v5-c-overflow-menu__control">
|
|
4445
|
-
<div class="pf-v5-c-dropdown pf-m-expanded">
|
|
4446
|
-
<button
|
|
4447
|
-
class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
|
|
4448
|
-
type="button"
|
|
4449
|
-
id="toolbar-expanded-elements-example-overflow-menu-dropdown-toggle"
|
|
4450
|
-
aria-label="Overflow menu"
|
|
4451
|
-
aria-expanded="true"
|
|
4452
|
-
>
|
|
4453
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
4454
|
-
</button>
|
|
4455
|
-
<ul
|
|
4456
|
-
class="pf-v5-c-dropdown__menu"
|
|
4457
|
-
role="menu"
|
|
4458
|
-
aria-labelledby="toolbar-expanded-elements-example-overflow-menu-dropdown-toggle"
|
|
4459
|
-
>
|
|
4460
|
-
<li role="none">
|
|
4461
|
-
<button
|
|
4462
|
-
role="menuitem"
|
|
4463
|
-
class="pf-v5-c-dropdown__menu-item"
|
|
4464
|
-
>Tertiary</button>
|
|
4465
|
-
</li>
|
|
4466
|
-
</ul>
|
|
4467
|
-
</div>
|
|
4468
|
-
</div>
|
|
2238
|
+
</nav>
|
|
4469
2239
|
</div>
|
|
4470
2240
|
</div>
|
|
4471
2241
|
</div>
|
|
4472
|
-
<div
|
|
4473
|
-
class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
|
|
4474
|
-
id="toolbar-expanded-elements-example-expandable-content"
|
|
4475
|
-
hidden
|
|
4476
|
-
></div>
|
|
4477
2242
|
</div>
|
|
4478
2243
|
</div>
|
|
4479
2244
|
|
|
@@ -4499,16 +2264,18 @@ As the toolbar component is a hybrid layout and component, some of its elements
|
|
|
4499
2264
|
| `.pf-m-full-height` | `.pf-v5-c-toolbar`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group` | Modifies toolbar component to full height of its container and removes vertical padding. |
|
|
4500
2265
|
| `.pf-m-static` | `.pf-v5-c-toolbar` | Modifies expandable content section to position itself to the nearest absolutely positioned parent outside of the toolbar component. This is used primarily for masthead toolbar. |
|
|
4501
2266
|
| `.pf-m-expanded` | `.pf-v5-c-toolbar__expandable-content` | Modifies expandable content section for the expanded state. |
|
|
4502
|
-
| `.pf-m-
|
|
4503
|
-
| `.pf-m-
|
|
4504
|
-
| `.pf-m-
|
|
4505
|
-
| `.pf-m-
|
|
4506
|
-
| `.pf-m-
|
|
4507
|
-
| `.pf-m-
|
|
2267
|
+
| `.pf-m-label` | `.pf-v5-c-toolbar__item` | Modifies label vertical positioning. |
|
|
2268
|
+
| `.pf-m-form-element` | `.pf-v5-c-toolbar__item` | Modifies form element vertical positioning. |
|
|
2269
|
+
| `.pf-m-bulk-select` | `.pf-v5-c-toolbar__item` | Modifies bulk select spacing. |
|
|
2270
|
+
| `.pf-m-overflow-menu` | `.pf-v5-c-toolbar__item` | Modifies overflow menu spacing. |
|
|
2271
|
+
| `.pf-m-pagination` | `.pf-v5-c-toolbar__item` | Modifies pagination spacing and margin. |
|
|
2272
|
+
| `.pf-m-search-filter` | `.pf-v5-c-toolbar__item` | Modifies search filter spacing. |
|
|
2273
|
+
| `.pf-m-chip-group` | `.pf-v5-c-toolbar__item` | Modifies chip group spacing. |
|
|
2274
|
+
| `.pf-m-expand-all` | `.pf-v5-c-toolbar__item` | Modifies an item for an expand all button. |
|
|
4508
2275
|
| `.pf-m-expanded` | `.pf-v5-c-toolbar__item.pf-m-expand-all` | Modifies an expand all button for the expanded state. |
|
|
4509
|
-
| `.pf-m-button-group` | `.pf-v5-c-toolbar__group` |
|
|
4510
|
-
| `.pf-m-icon-button-group` | `.pf-v5-c-toolbar__group` |
|
|
4511
|
-
| `.pf-m-filter-group` | `.pf-v5-c-toolbar__group` |
|
|
2276
|
+
| `.pf-m-button-group` | `.pf-v5-c-toolbar__group` | Modifies button group spacing. |
|
|
2277
|
+
| `.pf-m-icon-button-group` | `.pf-v5-c-toolbar__group` | Modifies icon button group spacing. |
|
|
2278
|
+
| `.pf-m-filter-group` | `.pf-v5-c-toolbar__group` | Modifies filter group spacing. |
|
|
4512
2279
|
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v5-c-toolbar__content`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__item`, `.pf-v5-c-toolbar__group` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
4513
2280
|
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v5-c-toolbar__content`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__item`, `.pf-v5-c-toolbar__group` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
4514
2281
|
| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-v5-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
@@ -4528,7 +2295,7 @@ As the toolbar component is a hybrid layout and component, some of its elements
|
|
|
4528
2295
|
| Attribute | Applied to | Outcome |
|
|
4529
2296
|
| -- | -- | -- |
|
|
4530
2297
|
| `hidden` | `.pf-v5-c-toolbar__item`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__toggle`, `.pf-v5-c-toolbar__expandable-content` | Indicates that the toolbar element is hidden. **Required** |
|
|
4531
|
-
| `aria-expanded=
|
|
2298
|
+
| `aria-expanded=true` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates that the expandable content is visible. **Required** |
|
|
4532
2299
|
| `aria-expanded="false"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates the the expandable content is hidden. **Required** |
|
|
4533
2300
|
| `aria-controls="[id of expandable content]"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Identifies the expanded content controlled by the toggle button. **Required** |
|
|
4534
2301
|
| `id="[expandable-content_id]"` | `.pf-v5-c-toolbar__expandable-content` | Provides a reference for toggle button description. **Required** |
|