@patternfly/patternfly 5.0.0-alpha.3 → 5.0.0-alpha.31
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/RELEASE-NOTES.md +17 -0
- package/assets/icons/iconUnicodes.json +1 -0
- package/assets/pficon/pficon.scss +6 -0
- package/assets/pficon/pficon.woff +0 -0
- package/assets/pficon/pficon.woff2 +0 -0
- package/base/_base.scss +0 -18
- package/base/_chart-globals.scss +0 -4
- package/base/_common.scss +0 -22
- package/base/_fonts.scss +22 -22
- package/base/_globals.scss +1 -1
- package/base/_icons.scss +1 -28
- package/base/_svg-icons.scss +6 -0
- package/base/_variables.scss +1 -1
- package/base/patternfly-common.css +0 -10
- package/base/patternfly-fonts.css +17 -17
- package/base/patternfly-icons.css +6 -20
- package/base/patternfly-pf-icons.css +5 -1
- package/base/themes/dark/_globals.scss +1 -1
- package/base/themes/dark/_variables.scss +1 -1
- package/components/AboutModalBox/about-modal-box.css +7 -7
- package/components/AboutModalBox/about-modal-box.scss +7 -7
- package/components/Accordion/accordion.css +2 -0
- package/components/Accordion/accordion.scss +2 -0
- package/components/Alert/alert.css +3 -3
- package/components/Alert/alert.scss +3 -3
- package/components/AppLauncher/app-launcher.css +2 -0
- package/components/AppLauncher/app-launcher.scss +2 -0
- package/components/Avatar/avatar.scss +2 -2
- package/components/Banner/banner.css +14 -14
- package/components/Banner/banner.scss +9 -13
- package/components/Breadcrumb/breadcrumb.css +2 -0
- package/components/Breadcrumb/breadcrumb.scss +2 -0
- package/components/CalendarMonth/calendar-month.css +2 -2
- package/components/CalendarMonth/calendar-month.scss +3 -3
- package/components/Card/card.css +20 -21
- package/components/Card/card.scss +22 -26
- package/components/Chip/chip.css +33 -24
- package/components/Chip/chip.scss +40 -31
- package/components/ChipGroup/chip-group.css +27 -17
- package/components/ChipGroup/chip-group.scss +36 -22
- package/components/Content/content.css +11 -5
- package/components/Content/content.scss +17 -9
- package/components/ContextSelector/context-selector.css +5 -1
- package/components/ContextSelector/context-selector.scss +6 -2
- package/components/DataList/data-list-grid.css +7 -7
- package/components/DataList/data-list-grid.scss +1 -1
- package/components/DataList/data-list.css +12 -11
- package/components/DataList/data-list.scss +5 -4
- package/components/DescriptionList/description-list.css +7 -7
- package/components/DescriptionList/description-list.scss +7 -7
- package/components/Divider/divider.css +2 -2
- package/components/Divider/divider.scss +3 -3
- package/components/Drawer/drawer.css +15 -16
- package/components/Drawer/drawer.scss +2 -3
- package/components/Dropdown/dropdown.css +12 -10
- package/components/Dropdown/dropdown.scss +2 -0
- package/components/DualListSelector/dual-list-selector.css +1 -1
- package/components/DualListSelector/dual-list-selector.scss +1 -1
- package/components/EmptyState/empty-state.css +46 -52
- package/components/EmptyState/empty-state.scss +58 -57
- package/components/ExpandableSection/expandable-section.css +2 -0
- package/components/ExpandableSection/expandable-section.scss +2 -0
- package/components/Form/form.css +12 -12
- package/components/Form/form.scss +7 -7
- package/components/FormControl/form-control.css +2 -5
- package/components/FormControl/themes/dark/form-control.scss +2 -6
- package/components/Hint/hint.css +2 -2
- package/components/Hint/hint.scss +2 -2
- package/components/Label/label.css +43 -30
- package/components/Label/label.scss +49 -34
- package/components/LabelGroup/label-group.css +26 -22
- package/components/LabelGroup/label-group.scss +31 -26
- package/components/Login/login.css +11 -11
- package/components/Login/login.scss +10 -10
- package/components/Masthead/masthead.css +4 -4
- package/components/Masthead/masthead.scss +4 -4
- package/components/Menu/menu.css +9 -6
- package/components/Menu/menu.scss +34 -31
- package/components/MenuToggle/menu-toggle.css +3 -1
- package/components/MenuToggle/menu-toggle.scss +3 -1
- package/components/ModalBox/modal-box.css +9 -8
- package/components/ModalBox/modal-box.scss +11 -11
- package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
- package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
- package/components/Nav/nav.css +1 -1
- package/components/Nav/nav.scss +2 -2
- package/components/NotificationDrawer/notification-drawer.css +3 -3
- package/components/NotificationDrawer/notification-drawer.scss +3 -3
- package/components/Page/page.css +71 -71
- package/components/Page/page.scss +12 -12
- package/components/Pagination/pagination.css +2 -2
- package/components/Popover/popover.css +25 -31
- package/components/Popover/popover.scss +27 -32
- package/components/Popover/themes/dark/popover.scss +2 -8
- package/components/Progress/progress.css +13 -10
- package/components/Progress/progress.scss +13 -10
- package/components/ProgressStepper/progress-stepper.css +5 -5
- package/components/ProgressStepper/progress-stepper.scss +5 -5
- package/components/SearchInput/search-input.css +4 -2
- package/components/SearchInput/search-input.scss +4 -2
- package/components/Select/select.css +1 -1
- package/components/Select/select.scss +1 -1
- package/components/Sidebar/sidebar.css +69 -26
- package/components/Sidebar/sidebar.scss +84 -27
- package/components/SimpleList/simple-list.css +1 -1
- package/components/SimpleList/simple-list.scss +2 -2
- package/components/Spinner/spinner.css +4 -4
- package/components/Spinner/spinner.scss +4 -4
- package/components/Table/table-grid.css +28 -28
- package/components/Table/table-scrollable.css +31 -26
- package/components/Table/table-scrollable.scss +33 -28
- package/components/Table/table-tree-view.css +14 -4
- package/components/Table/table-tree-view.scss +15 -0
- package/components/Table/table.css +7 -2
- package/components/Table/table.scss +9 -2
- package/components/Tabs/tabs.css +0 -4
- package/components/Tabs/tabs.scss +0 -7
- package/components/TextInputGroup/text-input-group.css +6 -4
- package/components/TextInputGroup/text-input-group.scss +6 -5
- package/components/Tile/tile.css +1 -1
- package/components/Tile/tile.scss +1 -1
- package/components/Timestamp/timestamp.css +3 -3
- package/components/Timestamp/timestamp.scss +3 -3
- package/components/Toolbar/toolbar.css +78 -43
- package/components/Toolbar/toolbar.scss +50 -10
- package/components/Tooltip/themes/dark/tooltip.scss +1 -11
- package/components/Tooltip/tooltip.css +7 -12
- package/components/Tooltip/tooltip.scss +6 -3
- package/components/TreeView/tree-view.css +7 -15
- package/components/TreeView/tree-view.scss +7 -18
- package/components/Wizard/wizard.css +16 -1
- package/components/Wizard/wizard.scss +20 -2
- package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -13
- package/docs/components/Accordion/examples/Accordion.md +12 -12
- package/docs/components/ActionList/examples/ActionList.md +6 -6
- package/docs/components/Alert/examples/Alert.md +19 -19
- package/docs/components/AlertGroup/examples/AlertGroup.md +12 -12
- package/docs/components/AppLauncher/examples/application-launcher.md +51 -46
- package/docs/components/Avatar/examples/Avatar.md +11 -11
- package/docs/components/BackToTop/examples/BackToTop.md +4 -4
- package/docs/components/Backdrop/examples/Backdrop.md +4 -4
- package/docs/components/BackgroundImage/examples/BackgroundImage.md +4 -4
- package/docs/components/Badge/examples/Badge.md +5 -5
- package/docs/components/Banner/examples/Banner.md +8 -8
- package/docs/components/Brand/examples/Brand.md +9 -9
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
- package/docs/components/Button/examples/Button.md +35 -35
- package/docs/components/CalendarMonth/examples/CalendarMonth.md +32 -32
- package/docs/components/Card/examples/Card.md +139 -64
- package/docs/components/Check/examples/Check.md +15 -19
- package/docs/components/Chip/examples/Chip.md +70 -52
- package/docs/components/ChipGroup/examples/ChipGroup.md +452 -673
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
- package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
- package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
- package/docs/components/Content/examples/Content.md +37 -9
- package/docs/components/ContextSelector/examples/context-selector.css +5 -1
- package/docs/components/ContextSelector/examples/context-selector.md +86 -80
- package/docs/components/DataList/examples/DataList.md +187 -148
- package/docs/components/DatePicker/examples/DatePicker.md +10 -10
- package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
- package/docs/components/Divider/examples/Divider.md +10 -10
- package/docs/components/DragDrop/examples/DragDrop.md +5 -5
- package/docs/components/Drawer/examples/Drawer.md +43 -43
- package/docs/components/Dropdown/examples/Dropdown.css +5 -2
- package/docs/components/Dropdown/examples/Dropdown.md +123 -99
- package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
- package/docs/components/EmptyState/examples/EmptyState.md +130 -82
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
- package/docs/components/FileUpload/examples/FileUpload.md +8 -8
- package/docs/components/Form/examples/Form.md +64 -64
- package/docs/components/FormControl/examples/FormControl.md +20 -20
- package/docs/components/HelperText/examples/HelperText.md +12 -12
- package/docs/components/Hint/examples/Hint.md +7 -7
- package/docs/components/Icon/examples/Icon.md +10 -10
- package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
- package/docs/components/InputGroup/examples/InputGroup.md +10 -10
- package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
- package/docs/components/Label/examples/Label.md +1427 -746
- package/docs/components/LabelGroup/examples/LabelGroup.md +295 -242
- package/docs/components/List/examples/List.md +18 -18
- package/docs/components/LogViewer/examples/LogViewer.md +79 -73
- package/docs/components/Login/examples/Login.md +32 -32
- package/docs/components/Masthead/examples/masthead.md +9 -9
- package/docs/components/Menu/examples/Menu.md +82 -80
- package/docs/components/MenuToggle/examples/MenuToggle.md +28 -28
- package/docs/components/ModalBox/examples/ModalBox.md +106 -85
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +25 -25
- package/docs/components/Nav/examples/Navigation.md +69 -69
- package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
- package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +44 -44
- package/docs/components/NumberInput/examples/NumberInput.md +12 -12
- package/docs/components/OptionsMenu/examples/options-menu.md +27 -28
- package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
- package/docs/components/Page/examples/Page.md +54 -54
- package/docs/components/Pagination/examples/Pagination.md +27 -27
- package/docs/components/Panel/examples/Panel.md +10 -10
- package/docs/components/Popover/examples/Popover.md +201 -144
- package/docs/components/Progress/examples/Progress.md +31 -60
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -38
- package/docs/components/Radio/examples/Radio.md +11 -11
- package/docs/components/SearchInput/examples/SearchInput.md +34 -34
- package/docs/components/Select/examples/Select.md +367 -313
- package/docs/components/Sidebar/examples/Sidebar.md +70 -14
- package/docs/components/SimpleList/examples/SimpleList.md +15 -15
- package/docs/components/Skeleton/examples/Skeleton.md +8 -8
- package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
- package/docs/components/Slider/examples/Slider.md +24 -24
- package/docs/components/Spinner/examples/Spinner.md +24 -24
- package/docs/components/Switch/examples/Switch.md +19 -19
- package/docs/components/TabContent/examples/TabContent.md +13 -13
- package/docs/components/Table/examples/Table.css +4 -0
- package/docs/components/Table/examples/Table.md +3163 -1712
- package/docs/components/Tabs/examples/Tabs.md +149 -149
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +362 -280
- package/docs/components/Tile/examples/Tile.md +15 -15
- package/docs/components/Timestamp/examples/Timestamp.md +5 -5
- package/docs/components/Title/examples/Title.md +17 -17
- package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
- package/docs/components/Toolbar/examples/Toolbar.md +466 -373
- package/docs/components/Tooltip/examples/Tooltip.md +10 -10
- package/docs/components/TreeView/examples/TreeView.md +34 -34
- package/docs/components/Truncate/examples/Truncate.md +4 -4
- package/docs/components/Wizard/examples/Wizard.md +119 -127
- package/docs/demos/AboutModal/examples/AboutModal.md +4 -4
- package/docs/demos/Alert/examples/Alert.md +13 -13
- package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
- package/docs/demos/Banner/examples/Banner.md +8 -9
- package/docs/demos/Card/examples/Card.md +219 -156
- package/docs/demos/CardView/examples/CardView.md +56 -29
- package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
- package/docs/demos/Dashboard/examples/Dashboard.md +51 -35
- package/docs/demos/DataList/examples/DataList.md +158 -109
- package/docs/demos/DescriptionList/examples/DescriptionList.md +33 -22
- package/docs/demos/Drawer/examples/Drawer.md +24 -22
- package/docs/demos/Form/examples/BasicForms.md +28 -22
- package/docs/demos/HelperText/examples/HelperText.md +8 -9
- package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
- package/docs/demos/Masthead/examples/Masthead.md +29 -32
- package/docs/demos/Modal/examples/Modal.md +54 -66
- package/docs/demos/Nav/examples/Nav.md +47 -47
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +40 -28
- package/docs/demos/Page/examples/Page.md +37 -37
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +32 -33
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +74 -64
- package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
- package/docs/demos/Table/examples/Table.md +2454 -467
- package/docs/demos/Tabs/examples/Tabs.md +141 -90
- package/docs/demos/Toolbar/examples/Toolbar.md +1808 -174
- package/docs/demos/Wizard/examples/Wizard.md +289 -266
- package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
- package/docs/layouts/Flex/examples/Flex.md +98 -98
- package/docs/layouts/Gallery/examples/Gallery.md +7 -7
- package/docs/layouts/Grid/examples/Grid.md +9 -9
- package/docs/layouts/Level/examples/Level.md +5 -5
- package/docs/layouts/Split/examples/Split.md +7 -7
- package/docs/layouts/Stack/examples/Stack.md +6 -6
- package/docs/utilities/Accessibility/examples/Accessibility.md +4 -4
- package/docs/utilities/Alignment/examples/Alignment.md +6 -6
- package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +12 -12
- package/docs/utilities/BoxShadow/examples/box-shadow.md +22 -22
- package/docs/utilities/Display/examples/Display.md +11 -11
- package/docs/utilities/Flex/examples/Flex.md +34 -34
- package/docs/utilities/Float/examples/Float.md +4 -4
- package/docs/utilities/Sizing/examples/Sizing.md +50 -50
- package/docs/utilities/Spacing/examples/Spacing.md +34 -34
- package/docs/utilities/Text/examples/Text.md +27 -27
- package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
- package/layouts/Gallery/gallery.css +1 -1
- package/layouts/Gallery/gallery.scss +1 -1
- package/layouts/Grid/grid.css +7 -7
- package/layouts/Grid/grid.scss +2 -2
- package/package.json +59 -65
- package/patternfly-base-no-reset.css +23 -47
- package/patternfly-base.css +23 -47
- package/patternfly-no-reset.css +781 -656
- package/patternfly.css +781 -656
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/functions.scss +8 -24
- package/sass-utilities/mixins.scss +15 -39
- package/sass-utilities/scss-variables.scss +1 -1
- package/sass-utilities/themes/dark/scss-variables.scss +1 -1
- package/utilities/Spacing/spacing.scss +2 -2
- package/base/_shield-inheritable.scss +0 -69
- package/base/_shield-noninheritable.scss +0 -13
- package/base/patternfly-shield-inheritable.css +0 -66
- package/base/patternfly-shield-inheritable.scss +0 -4
- package/base/patternfly-shield-noninheritable.css +0 -9
- package/base/patternfly-shield-noninheritable.scss +0 -4
|
@@ -10,28 +10,32 @@ Toolbar relies on groups (`.pf-c-toolbar__group`) and items (`.pf-c-toolbar__ite
|
|
|
10
10
|
|
|
11
11
|
### Default spacing for items and groups:
|
|
12
12
|
|
|
13
|
-
| Class
|
|
14
|
-
|
|
|
15
|
-
| `.pf-c-toolbar__item`
|
|
16
|
-
| `.pf-c-toolbar__group` | `--pf-c-toolbar__group--spacer` | `16px`
|
|
13
|
+
| Class | CSS Variable | Computed Value |
|
|
14
|
+
| -- | -- | -- |
|
|
15
|
+
| `.pf-c-toolbar__item` | `--pf-c-toolbar__item--spacer` | `16px` |
|
|
16
|
+
| `.pf-c-toolbar__group` | `--pf-c-toolbar__group--spacer` | `16px` |
|
|
17
17
|
|
|
18
18
|
### Toolbar item types
|
|
19
19
|
|
|
20
|
-
| Class
|
|
21
|
-
|
|
|
22
|
-
| `.pf-m-bulk-select`
|
|
23
|
-
| `.pf-m-overflow-menu` | `.pf-c-toolbar__item` | Initiates overflow menu spacing. Spacer value is set to `var(--pf-c-toolbar--m-overflow-menu--spacer)`.
|
|
24
|
-
| `.pf-m-pagination`
|
|
25
|
-
| `.pf-m-search-filter` | `.pf-c-toolbar__item` | Initiates search filter spacing. Spacer value is set to `var(--pf-c-toolbar--m-search-filter--spacer)`.
|
|
20
|
+
| Class | Applied to | Outcome |
|
|
21
|
+
| -- | -- | -- |
|
|
22
|
+
| `.pf-m-bulk-select` | `.pf-c-toolbar__item` | Initiates bulk select spacing. Spacer value is set to `var(--pf-c-toolbar--m-bulk-select--spacer)`. |
|
|
23
|
+
| `.pf-m-overflow-menu` | `.pf-c-toolbar__item` | Initiates overflow menu spacing. Spacer value is set to `var(--pf-c-toolbar--m-overflow-menu--spacer)`. |
|
|
24
|
+
| `.pf-m-pagination` | `.pf-c-toolbar__item` | Initiates pagination spacing and margin. Spacer value is set to `var(--pf-c-toolbar--m-pagination--spacer)`. |
|
|
25
|
+
| `.pf-m-search-filter` | `.pf-c-toolbar__item` | Initiates search filter spacing. Spacer value is set to `var(--pf-c-toolbar--m-search-filter--spacer)`. |
|
|
26
26
|
|
|
27
27
|
### Modifiers
|
|
28
28
|
|
|
29
|
-
| Class
|
|
30
|
-
|
|
|
31
|
-
| `.pf-m-hidden{-on-[breakpoint]}`
|
|
32
|
-
| `.pf-m-visible{-on-[breakpoint]}`
|
|
29
|
+
| Class | Applied to | Outcome |
|
|
30
|
+
| -- | -- | -- |
|
|
31
|
+
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
32
|
+
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
33
33
|
| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
34
|
-
| `.pf-m-align-left{-on-[breakpoint]}`
|
|
34
|
+
| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
35
|
+
| `.pf-m-align-items-center` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies toolbar element to vertically align children to center. |
|
|
36
|
+
| `.pf-m-align-items-baseline` | `.pf-c-toolbar__group` | Modifies toolbar group to vertically align children to baseline. |
|
|
37
|
+
| `.pf-m-align-self-center` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to center. |
|
|
38
|
+
| `.pf-m-align-self-baseline` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to baseline. |
|
|
35
39
|
|
|
36
40
|
### Special notes
|
|
37
41
|
|
|
@@ -68,10 +72,10 @@ Several components in the following examples do not include functional and/or ac
|
|
|
68
72
|
|
|
69
73
|
### Item types
|
|
70
74
|
|
|
71
|
-
| Class
|
|
72
|
-
|
|
|
73
|
-
| `.pf-c-toolbar__item`
|
|
74
|
-
| `.pf-c-toolbar__group` | `<div>`
|
|
75
|
+
| Class | Applied to | Outcome |
|
|
76
|
+
| -- | -- | -- |
|
|
77
|
+
| `.pf-c-toolbar__item` | `<div>` | Initiates the toolbar component item. **Required** |
|
|
78
|
+
| `.pf-c-toolbar__group` | `<div>` | Initiates the toolbar component group. |
|
|
75
79
|
|
|
76
80
|
### Spacers
|
|
77
81
|
|
|
@@ -164,12 +168,12 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
164
168
|
|
|
165
169
|
### Toolbar spacers and insets
|
|
166
170
|
|
|
167
|
-
| Class
|
|
168
|
-
|
|
|
169
|
-
| `.pf-m-page-insets`
|
|
170
|
-
| `.pf-m-spacer-{none, sm, md, lg}{-on-[breakpoint]}`
|
|
171
|
-
| `.pf-m-space-items-{none, sm, md, lg}{-on-[breakpoint]}`
|
|
172
|
-
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-toolbar`
|
|
171
|
+
| Class | Applied to | Outcome |
|
|
172
|
+
| -- | -- | -- |
|
|
173
|
+
| `.pf-m-page-insets` | `.pf-c-toolbar` | Modifies toolbar insets to match page section, table, page header or any other component whose inset shifts from `--pf-global--spacer--md` to `--pf-global--spacer--lg` at the `xl` breakpoint. |
|
|
174
|
+
| `.pf-m-spacer-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
175
|
+
| `.pf-m-space-items-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-c-toolbar__group` | Modifies toolbar group child spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
176
|
+
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-toolbar` | Modifies toolbar horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
173
177
|
|
|
174
178
|
### Width control
|
|
175
179
|
|
|
@@ -195,10 +199,10 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
195
199
|
|
|
196
200
|
### Width control usage
|
|
197
201
|
|
|
198
|
-
| Class
|
|
199
|
-
|
|
|
200
|
-
| `--pf-c-toolbar__item--Width{-on-[breakpoint]}: {width}`
|
|
201
|
-
| `--pf-c-toolbar__item--MinWidth{-on-[breakpoint]}: {width}` | `.pf-c-toolbar__item` |
|
|
202
|
+
| Class | Applied to | Outcome |
|
|
203
|
+
| -- | -- | -- |
|
|
204
|
+
| `--pf-c-toolbar__item--Width{-on-[breakpoint]}: {width}` | `.pf-c-toolbar__item` | Modifies the width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
205
|
+
| `--pf-c-toolbar__item--MinWidth{-on-[breakpoint]}: {width}` | `.pf-c-toolbar__item` | Modifies the min width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
202
206
|
|
|
203
207
|
### Group types
|
|
204
208
|
|
|
@@ -433,11 +437,11 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
433
437
|
|
|
434
438
|
### Toolbar group types
|
|
435
439
|
|
|
436
|
-
| Class
|
|
437
|
-
|
|
|
438
|
-
| `.pf-m-filter-group`
|
|
440
|
+
| Class | Applied to | Outcome |
|
|
441
|
+
| -- | -- | -- |
|
|
442
|
+
| `.pf-m-filter-group` | `.pf-c-toolbar__group` | Modifies toolbar group spacing. Spacer value is set to `var(--pf-c-toolbar__group--m-filter-group--spacer)`. Child spacer value is set to `var(--pf-c-toolbar__group--m-filter-group--space-items)`. |
|
|
439
443
|
| `.pf-m-icon-button-group` | `.pf-c-toolbar__group` | Modifies toolbar group spacing. Spacer value is set to `var(--pf-c-toolbar__group--m-toggle-group--spacer)`. Child spacer value is set to `var(--pf-c-toolbar__group--m-icon-button-group--space-items)`. |
|
|
440
|
-
| `.pf-m-button-group`
|
|
444
|
+
| `.pf-m-button-group` | `.pf-c-toolbar__group` | Modifies toolbar group spacing. Spacer value is set to `var(--pf-c-toolbar__group--m-toggle-group--spacer)`. Child spacer value is set to `var(--pf-c-toolbar__group--m-button-group--space-items)`. |
|
|
441
445
|
|
|
442
446
|
### Toggle group
|
|
443
447
|
|
|
@@ -489,7 +493,6 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
489
493
|
role="listbox"
|
|
490
494
|
aria-labelledby="toolbar-toggle-group-example-select-name-label"
|
|
491
495
|
hidden
|
|
492
|
-
style="width: 175px"
|
|
493
496
|
>
|
|
494
497
|
<li role="presentation">
|
|
495
498
|
<button class="pf-c-select__menu-item" role="option">Running</button>
|
|
@@ -528,9 +531,9 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
528
531
|
</span>
|
|
529
532
|
<input
|
|
530
533
|
class="pf-c-text-input-group__text-input"
|
|
531
|
-
type="
|
|
532
|
-
value
|
|
534
|
+
type="search"
|
|
533
535
|
placeholder="Filter by name"
|
|
536
|
+
value
|
|
534
537
|
aria-label="Type to filter"
|
|
535
538
|
/>
|
|
536
539
|
</span>
|
|
@@ -810,7 +813,6 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
810
813
|
role="listbox"
|
|
811
814
|
aria-labelledby="toolbar-toggle-group-collapsed-example-select-name-label"
|
|
812
815
|
hidden
|
|
813
|
-
style="width: 175px"
|
|
814
816
|
>
|
|
815
817
|
<li role="presentation">
|
|
816
818
|
<button class="pf-c-select__menu-item" role="option">Running</button>
|
|
@@ -849,9 +851,9 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
849
851
|
</span>
|
|
850
852
|
<input
|
|
851
853
|
class="pf-c-text-input-group__text-input"
|
|
852
|
-
type="
|
|
853
|
-
value
|
|
854
|
+
type="search"
|
|
854
855
|
placeholder="Filter by name"
|
|
856
|
+
value
|
|
855
857
|
aria-label="Type to filter"
|
|
856
858
|
/>
|
|
857
859
|
</span>
|
|
@@ -1075,27 +1077,27 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1075
1077
|
|
|
1076
1078
|
### Accessibility
|
|
1077
1079
|
|
|
1078
|
-
| Attribute
|
|
1079
|
-
|
|
|
1080
|
-
| `hidden`
|
|
1081
|
-
| `aria-expanded="true"`
|
|
1082
|
-
| `aria-expanded="false"`
|
|
1083
|
-
| `aria-controls="[id of expandable content]"` | `.pf-c-toolbar__toggle > .pf-c-button`
|
|
1084
|
-
| `id="[expandable-content_id]"`
|
|
1080
|
+
| Attribute | Applied to | Outcome |
|
|
1081
|
+
| -- | -- | -- |
|
|
1082
|
+
| `hidden` | `.pf-c-toolbar__item`, `.pf-c-toolbar__group`, `.pf-c-toolbar__toggle`, `.pf-c-toolbar__expandable-content` | Indicates that the toggle group element is hidden. **Required** |
|
|
1083
|
+
| `aria-expanded="true"` | `.pf-c-toolbar__toggle > .pf-c-button` | Indicates that the expandable content is visible. **Required** |
|
|
1084
|
+
| `aria-expanded="false"` | `.pf-c-toolbar__toggle > .pf-c-button` | Indicates the the expandable content is hidden. **Required** |
|
|
1085
|
+
| `aria-controls="[id of expandable content]"` | `.pf-c-toolbar__toggle > .pf-c-button` | Identifies the expanded content controlled by the toggle button. **Required** |
|
|
1086
|
+
| `id="[expandable-content_id]"` | `.pf-c-toolbar__expandable-content` | Provides a reference for toggle button description. **Required** |
|
|
1085
1087
|
|
|
1086
1088
|
### Responsive attributes
|
|
1087
1089
|
|
|
1088
|
-
| Attribute
|
|
1089
|
-
|
|
|
1090
|
+
| Attribute | Applied to | Outcome |
|
|
1091
|
+
| -- | -- | -- |
|
|
1090
1092
|
| `aria-haspopup="true"` | `.pf-c-toolbar__toggle > .pf-c-button` | When expandable content appears above content (mobile viewport), `aria-haspopup="true"` should be applied to indicate that focus should be trapped. **Required** |
|
|
1091
1093
|
|
|
1092
1094
|
### Usage
|
|
1093
1095
|
|
|
1094
|
-
| Class
|
|
1095
|
-
|
|
|
1096
|
+
| Class | Applied to | Outcome |
|
|
1097
|
+
| -- | -- | -- |
|
|
1096
1098
|
| `.pf-m-show{-on-[breakpoint]}` | `.pf-c-toolbar__group.pf-m-toggle-group`, `.pf-c-toolbar__expandable-content` | Modifies toolbar element visibility at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). This selector must be applied consistently to toggle group and expandable content. |
|
|
1097
|
-
| `.pf-m-chip-container`
|
|
1098
|
-
| `.pf-m-expanded`
|
|
1099
|
+
| `.pf-m-chip-container` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
|
|
1100
|
+
| `.pf-m-expanded` | `.pf-c-toolbar__expandable-content`, `.pf-c-toolbar__toggle` | Modifies the component for the expanded state. |
|
|
1099
1101
|
|
|
1100
1102
|
### Selected
|
|
1101
1103
|
|
|
@@ -1115,11 +1117,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1115
1117
|
class="pf-c-dropdown__toggle-check"
|
|
1116
1118
|
for="toolbar-selected-filters-toggle-group-collapsed-example-bulk-select-toggle-check"
|
|
1117
1119
|
>
|
|
1118
|
-
<
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1120
|
+
<div class="pf-c-check pf-m-standalone">
|
|
1121
|
+
<input
|
|
1122
|
+
class="pf-c-check__input"
|
|
1123
|
+
type="checkbox"
|
|
1124
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-bulk-select-toggle-check"
|
|
1125
|
+
aria-label="Select all"
|
|
1126
|
+
/>
|
|
1127
|
+
</div>
|
|
1123
1128
|
</label>
|
|
1124
1129
|
|
|
1125
1130
|
<button
|
|
@@ -1192,7 +1197,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1192
1197
|
role="listbox"
|
|
1193
1198
|
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label"
|
|
1194
1199
|
hidden
|
|
1195
|
-
style="width: 175px"
|
|
1196
1200
|
>
|
|
1197
1201
|
<li role="presentation">
|
|
1198
1202
|
<button class="pf-c-select__menu-item" role="option">Running</button>
|
|
@@ -1231,9 +1235,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1231
1235
|
</span>
|
|
1232
1236
|
<input
|
|
1233
1237
|
class="pf-c-text-input-group__text-input"
|
|
1234
|
-
type="
|
|
1235
|
-
value
|
|
1238
|
+
type="search"
|
|
1236
1239
|
placeholder="Filter by name"
|
|
1240
|
+
value
|
|
1237
1241
|
aria-label="Type to filter"
|
|
1238
1242
|
/>
|
|
1239
1243
|
</span>
|
|
@@ -1503,53 +1507,65 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1503
1507
|
>
|
|
1504
1508
|
<li class="pf-c-chip-group__list-item">
|
|
1505
1509
|
<div class="pf-c-chip">
|
|
1506
|
-
<span
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1518
|
-
|
|
1510
|
+
<span class="pf-c-chip__content">
|
|
1511
|
+
<span
|
|
1512
|
+
class="pf-c-chip__text"
|
|
1513
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-one"
|
|
1514
|
+
>Chip one</span>
|
|
1515
|
+
</span>
|
|
1516
|
+
<span class="pf-c-chip__actions">
|
|
1517
|
+
<button
|
|
1518
|
+
class="pf-c-button pf-m-plain"
|
|
1519
|
+
type="button"
|
|
1520
|
+
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-one toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-one"
|
|
1521
|
+
aria-label="Remove"
|
|
1522
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-one"
|
|
1523
|
+
>
|
|
1524
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1525
|
+
</button>
|
|
1526
|
+
</span>
|
|
1519
1527
|
</div>
|
|
1520
1528
|
</li>
|
|
1521
1529
|
<li class="pf-c-chip-group__list-item">
|
|
1522
1530
|
<div class="pf-c-chip">
|
|
1523
|
-
<span
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1531
|
+
<span class="pf-c-chip__content">
|
|
1532
|
+
<span
|
|
1533
|
+
class="pf-c-chip__text"
|
|
1534
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-two"
|
|
1535
|
+
>Chip two</span>
|
|
1536
|
+
</span>
|
|
1537
|
+
<span class="pf-c-chip__actions">
|
|
1538
|
+
<button
|
|
1539
|
+
class="pf-c-button pf-m-plain"
|
|
1540
|
+
type="button"
|
|
1541
|
+
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-two toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-two"
|
|
1542
|
+
aria-label="Remove"
|
|
1543
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-two"
|
|
1544
|
+
>
|
|
1545
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1546
|
+
</button>
|
|
1547
|
+
</span>
|
|
1536
1548
|
</div>
|
|
1537
1549
|
</li>
|
|
1538
1550
|
<li class="pf-c-chip-group__list-item">
|
|
1539
1551
|
<div class="pf-c-chip">
|
|
1540
|
-
<span
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
|
|
1552
|
+
<span class="pf-c-chip__content">
|
|
1553
|
+
<span
|
|
1554
|
+
class="pf-c-chip__text"
|
|
1555
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-three"
|
|
1556
|
+
>Chip three</span>
|
|
1557
|
+
</span>
|
|
1558
|
+
<span class="pf-c-chip__actions">
|
|
1559
|
+
<button
|
|
1560
|
+
class="pf-c-button pf-m-plain"
|
|
1561
|
+
type="button"
|
|
1562
|
+
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-three toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-three"
|
|
1563
|
+
aria-label="Remove"
|
|
1564
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-three"
|
|
1565
|
+
>
|
|
1566
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1567
|
+
</button>
|
|
1568
|
+
</span>
|
|
1553
1569
|
</div>
|
|
1554
1570
|
</li>
|
|
1555
1571
|
</ul>
|
|
@@ -1571,53 +1587,65 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1571
1587
|
>
|
|
1572
1588
|
<li class="pf-c-chip-group__list-item">
|
|
1573
1589
|
<div class="pf-c-chip">
|
|
1574
|
-
<span
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1590
|
+
<span class="pf-c-chip__content">
|
|
1591
|
+
<span
|
|
1592
|
+
class="pf-c-chip__text"
|
|
1593
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-one"
|
|
1594
|
+
>Chip one</span>
|
|
1595
|
+
</span>
|
|
1596
|
+
<span class="pf-c-chip__actions">
|
|
1597
|
+
<button
|
|
1598
|
+
class="pf-c-button pf-m-plain"
|
|
1599
|
+
type="button"
|
|
1600
|
+
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-one toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-one"
|
|
1601
|
+
aria-label="Remove"
|
|
1602
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-one"
|
|
1603
|
+
>
|
|
1604
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1605
|
+
</button>
|
|
1606
|
+
</span>
|
|
1587
1607
|
</div>
|
|
1588
1608
|
</li>
|
|
1589
1609
|
<li class="pf-c-chip-group__list-item">
|
|
1590
1610
|
<div class="pf-c-chip">
|
|
1591
|
-
<span
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1611
|
+
<span class="pf-c-chip__content">
|
|
1612
|
+
<span
|
|
1613
|
+
class="pf-c-chip__text"
|
|
1614
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-two"
|
|
1615
|
+
>Chip two</span>
|
|
1616
|
+
</span>
|
|
1617
|
+
<span class="pf-c-chip__actions">
|
|
1618
|
+
<button
|
|
1619
|
+
class="pf-c-button pf-m-plain"
|
|
1620
|
+
type="button"
|
|
1621
|
+
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-two toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-two"
|
|
1622
|
+
aria-label="Remove"
|
|
1623
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-two"
|
|
1624
|
+
>
|
|
1625
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1626
|
+
</button>
|
|
1627
|
+
</span>
|
|
1604
1628
|
</div>
|
|
1605
1629
|
</li>
|
|
1606
1630
|
<li class="pf-c-chip-group__list-item">
|
|
1607
1631
|
<div class="pf-c-chip">
|
|
1608
|
-
<span
|
|
1609
|
-
|
|
1610
|
-
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
|
|
1615
|
-
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
|
|
1619
|
-
|
|
1620
|
-
|
|
1632
|
+
<span class="pf-c-chip__content">
|
|
1633
|
+
<span
|
|
1634
|
+
class="pf-c-chip__text"
|
|
1635
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-three"
|
|
1636
|
+
>Chip three</span>
|
|
1637
|
+
</span>
|
|
1638
|
+
<span class="pf-c-chip__actions">
|
|
1639
|
+
<button
|
|
1640
|
+
class="pf-c-button pf-m-plain"
|
|
1641
|
+
type="button"
|
|
1642
|
+
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-three toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-three"
|
|
1643
|
+
aria-label="Remove"
|
|
1644
|
+
id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-three"
|
|
1645
|
+
>
|
|
1646
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1647
|
+
</button>
|
|
1648
|
+
</span>
|
|
1621
1649
|
</div>
|
|
1622
1650
|
</li>
|
|
1623
1651
|
</ul>
|
|
@@ -1656,11 +1684,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1656
1684
|
class="pf-c-dropdown__toggle-check"
|
|
1657
1685
|
for="toolbar-selected-filters-toggle-group-expanded-example-bulk-select-toggle-check"
|
|
1658
1686
|
>
|
|
1659
|
-
<
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
|
|
1687
|
+
<div class="pf-c-check pf-m-standalone">
|
|
1688
|
+
<input
|
|
1689
|
+
class="pf-c-check__input"
|
|
1690
|
+
type="checkbox"
|
|
1691
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-bulk-select-toggle-check"
|
|
1692
|
+
aria-label="Select all"
|
|
1693
|
+
/>
|
|
1694
|
+
</div>
|
|
1664
1695
|
</label>
|
|
1665
1696
|
|
|
1666
1697
|
<button
|
|
@@ -1774,7 +1805,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1774
1805
|
role="listbox"
|
|
1775
1806
|
aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-name-label"
|
|
1776
1807
|
hidden
|
|
1777
|
-
style="width: 175px"
|
|
1778
1808
|
>
|
|
1779
1809
|
<li role="presentation">
|
|
1780
1810
|
<button class="pf-c-select__menu-item" role="option">Running</button>
|
|
@@ -1813,9 +1843,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1813
1843
|
</span>
|
|
1814
1844
|
<input
|
|
1815
1845
|
class="pf-c-text-input-group__text-input"
|
|
1816
|
-
type="
|
|
1817
|
-
value
|
|
1846
|
+
type="search"
|
|
1818
1847
|
placeholder="Filter by name"
|
|
1848
|
+
value
|
|
1819
1849
|
aria-label="Type to filter"
|
|
1820
1850
|
/>
|
|
1821
1851
|
</span>
|
|
@@ -2044,53 +2074,65 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
2044
2074
|
>
|
|
2045
2075
|
<li class="pf-c-chip-group__list-item">
|
|
2046
2076
|
<div class="pf-c-chip">
|
|
2047
|
-
<span
|
|
2048
|
-
|
|
2049
|
-
|
|
2050
|
-
|
|
2051
|
-
|
|
2052
|
-
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
|
|
2056
|
-
|
|
2057
|
-
|
|
2058
|
-
|
|
2059
|
-
|
|
2077
|
+
<span class="pf-c-chip__content">
|
|
2078
|
+
<span
|
|
2079
|
+
class="pf-c-chip__text"
|
|
2080
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-one"
|
|
2081
|
+
>Chip one</span>
|
|
2082
|
+
</span>
|
|
2083
|
+
<span class="pf-c-chip__actions">
|
|
2084
|
+
<button
|
|
2085
|
+
class="pf-c-button pf-m-plain"
|
|
2086
|
+
type="button"
|
|
2087
|
+
aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-one toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-one"
|
|
2088
|
+
aria-label="Remove"
|
|
2089
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-one"
|
|
2090
|
+
>
|
|
2091
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2092
|
+
</button>
|
|
2093
|
+
</span>
|
|
2060
2094
|
</div>
|
|
2061
2095
|
</li>
|
|
2062
2096
|
<li class="pf-c-chip-group__list-item">
|
|
2063
2097
|
<div class="pf-c-chip">
|
|
2064
|
-
<span
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
2098
|
+
<span class="pf-c-chip__content">
|
|
2099
|
+
<span
|
|
2100
|
+
class="pf-c-chip__text"
|
|
2101
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-two"
|
|
2102
|
+
>Chip two</span>
|
|
2103
|
+
</span>
|
|
2104
|
+
<span class="pf-c-chip__actions">
|
|
2105
|
+
<button
|
|
2106
|
+
class="pf-c-button pf-m-plain"
|
|
2107
|
+
type="button"
|
|
2108
|
+
aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-two toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-two"
|
|
2109
|
+
aria-label="Remove"
|
|
2110
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-two"
|
|
2111
|
+
>
|
|
2112
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2113
|
+
</button>
|
|
2114
|
+
</span>
|
|
2077
2115
|
</div>
|
|
2078
2116
|
</li>
|
|
2079
2117
|
<li class="pf-c-chip-group__list-item">
|
|
2080
2118
|
<div class="pf-c-chip">
|
|
2081
|
-
<span
|
|
2082
|
-
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
|
|
2119
|
+
<span class="pf-c-chip__content">
|
|
2120
|
+
<span
|
|
2121
|
+
class="pf-c-chip__text"
|
|
2122
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-three"
|
|
2123
|
+
>Chip three</span>
|
|
2124
|
+
</span>
|
|
2125
|
+
<span class="pf-c-chip__actions">
|
|
2126
|
+
<button
|
|
2127
|
+
class="pf-c-button pf-m-plain"
|
|
2128
|
+
type="button"
|
|
2129
|
+
aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-three toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-three"
|
|
2130
|
+
aria-label="Remove"
|
|
2131
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-three"
|
|
2132
|
+
>
|
|
2133
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2134
|
+
</button>
|
|
2135
|
+
</span>
|
|
2094
2136
|
</div>
|
|
2095
2137
|
</li>
|
|
2096
2138
|
</ul>
|
|
@@ -2112,53 +2154,65 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
2112
2154
|
>
|
|
2113
2155
|
<li class="pf-c-chip-group__list-item">
|
|
2114
2156
|
<div class="pf-c-chip">
|
|
2115
|
-
<span
|
|
2116
|
-
|
|
2117
|
-
|
|
2118
|
-
|
|
2119
|
-
|
|
2120
|
-
|
|
2121
|
-
|
|
2122
|
-
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
|
|
2126
|
-
|
|
2127
|
-
|
|
2157
|
+
<span class="pf-c-chip__content">
|
|
2158
|
+
<span
|
|
2159
|
+
class="pf-c-chip__text"
|
|
2160
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-one"
|
|
2161
|
+
>Chip one</span>
|
|
2162
|
+
</span>
|
|
2163
|
+
<span class="pf-c-chip__actions">
|
|
2164
|
+
<button
|
|
2165
|
+
class="pf-c-button pf-m-plain"
|
|
2166
|
+
type="button"
|
|
2167
|
+
aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-one toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-one"
|
|
2168
|
+
aria-label="Remove"
|
|
2169
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-one"
|
|
2170
|
+
>
|
|
2171
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2172
|
+
</button>
|
|
2173
|
+
</span>
|
|
2128
2174
|
</div>
|
|
2129
2175
|
</li>
|
|
2130
2176
|
<li class="pf-c-chip-group__list-item">
|
|
2131
2177
|
<div class="pf-c-chip">
|
|
2132
|
-
<span
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
|
|
2142
|
-
|
|
2143
|
-
|
|
2144
|
-
|
|
2178
|
+
<span class="pf-c-chip__content">
|
|
2179
|
+
<span
|
|
2180
|
+
class="pf-c-chip__text"
|
|
2181
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-two"
|
|
2182
|
+
>Chip two</span>
|
|
2183
|
+
</span>
|
|
2184
|
+
<span class="pf-c-chip__actions">
|
|
2185
|
+
<button
|
|
2186
|
+
class="pf-c-button pf-m-plain"
|
|
2187
|
+
type="button"
|
|
2188
|
+
aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-two toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-two"
|
|
2189
|
+
aria-label="Remove"
|
|
2190
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-two"
|
|
2191
|
+
>
|
|
2192
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2193
|
+
</button>
|
|
2194
|
+
</span>
|
|
2145
2195
|
</div>
|
|
2146
2196
|
</li>
|
|
2147
2197
|
<li class="pf-c-chip-group__list-item">
|
|
2148
2198
|
<div class="pf-c-chip">
|
|
2149
|
-
<span
|
|
2150
|
-
|
|
2151
|
-
|
|
2152
|
-
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
|
|
2159
|
-
|
|
2160
|
-
|
|
2161
|
-
|
|
2199
|
+
<span class="pf-c-chip__content">
|
|
2200
|
+
<span
|
|
2201
|
+
class="pf-c-chip__text"
|
|
2202
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-three"
|
|
2203
|
+
>Chip three</span>
|
|
2204
|
+
</span>
|
|
2205
|
+
<span class="pf-c-chip__actions">
|
|
2206
|
+
<button
|
|
2207
|
+
class="pf-c-button pf-m-plain"
|
|
2208
|
+
type="button"
|
|
2209
|
+
aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-three toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-three"
|
|
2210
|
+
aria-label="Remove"
|
|
2211
|
+
id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-three"
|
|
2212
|
+
>
|
|
2213
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2214
|
+
</button>
|
|
2215
|
+
</span>
|
|
2162
2216
|
</div>
|
|
2163
2217
|
</li>
|
|
2164
2218
|
</ul>
|
|
@@ -2192,11 +2246,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
2192
2246
|
class="pf-c-dropdown__toggle-check"
|
|
2193
2247
|
for="toolbar-selected-filters-example-bulk-select-toggle-check"
|
|
2194
2248
|
>
|
|
2195
|
-
<
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
|
|
2199
|
-
|
|
2249
|
+
<div class="pf-c-check pf-m-standalone">
|
|
2250
|
+
<input
|
|
2251
|
+
class="pf-c-check__input"
|
|
2252
|
+
type="checkbox"
|
|
2253
|
+
id="toolbar-selected-filters-example-bulk-select-toggle-check"
|
|
2254
|
+
aria-label="Select all"
|
|
2255
|
+
/>
|
|
2256
|
+
</div>
|
|
2200
2257
|
</label>
|
|
2201
2258
|
|
|
2202
2259
|
<button
|
|
@@ -2542,53 +2599,65 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
2542
2599
|
>
|
|
2543
2600
|
<li class="pf-c-chip-group__list-item">
|
|
2544
2601
|
<div class="pf-c-chip">
|
|
2545
|
-
<span
|
|
2546
|
-
|
|
2547
|
-
|
|
2548
|
-
|
|
2549
|
-
|
|
2550
|
-
|
|
2551
|
-
|
|
2552
|
-
|
|
2553
|
-
|
|
2554
|
-
|
|
2555
|
-
|
|
2556
|
-
|
|
2557
|
-
|
|
2602
|
+
<span class="pf-c-chip__content">
|
|
2603
|
+
<span
|
|
2604
|
+
class="pf-c-chip__text"
|
|
2605
|
+
id="toolbar-selected-filters-example-chip-group-statuschip-one"
|
|
2606
|
+
>Chip one</span>
|
|
2607
|
+
</span>
|
|
2608
|
+
<span class="pf-c-chip__actions">
|
|
2609
|
+
<button
|
|
2610
|
+
class="pf-c-button pf-m-plain"
|
|
2611
|
+
type="button"
|
|
2612
|
+
aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-one toolbar-selected-filters-example-chip-group-statuschip-one"
|
|
2613
|
+
aria-label="Remove"
|
|
2614
|
+
id="toolbar-selected-filters-example-chip-group-statusremove-chip-one"
|
|
2615
|
+
>
|
|
2616
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2617
|
+
</button>
|
|
2618
|
+
</span>
|
|
2558
2619
|
</div>
|
|
2559
2620
|
</li>
|
|
2560
2621
|
<li class="pf-c-chip-group__list-item">
|
|
2561
2622
|
<div class="pf-c-chip">
|
|
2562
|
-
<span
|
|
2563
|
-
|
|
2564
|
-
|
|
2565
|
-
|
|
2566
|
-
|
|
2567
|
-
|
|
2568
|
-
|
|
2569
|
-
|
|
2570
|
-
|
|
2571
|
-
|
|
2572
|
-
|
|
2573
|
-
|
|
2574
|
-
|
|
2623
|
+
<span class="pf-c-chip__content">
|
|
2624
|
+
<span
|
|
2625
|
+
class="pf-c-chip__text"
|
|
2626
|
+
id="toolbar-selected-filters-example-chip-group-statuschip-two"
|
|
2627
|
+
>Chip two</span>
|
|
2628
|
+
</span>
|
|
2629
|
+
<span class="pf-c-chip__actions">
|
|
2630
|
+
<button
|
|
2631
|
+
class="pf-c-button pf-m-plain"
|
|
2632
|
+
type="button"
|
|
2633
|
+
aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-two toolbar-selected-filters-example-chip-group-statuschip-two"
|
|
2634
|
+
aria-label="Remove"
|
|
2635
|
+
id="toolbar-selected-filters-example-chip-group-statusremove-chip-two"
|
|
2636
|
+
>
|
|
2637
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2638
|
+
</button>
|
|
2639
|
+
</span>
|
|
2575
2640
|
</div>
|
|
2576
2641
|
</li>
|
|
2577
2642
|
<li class="pf-c-chip-group__list-item">
|
|
2578
2643
|
<div class="pf-c-chip">
|
|
2579
|
-
<span
|
|
2580
|
-
|
|
2581
|
-
|
|
2582
|
-
|
|
2583
|
-
|
|
2584
|
-
|
|
2585
|
-
|
|
2586
|
-
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
|
|
2591
|
-
|
|
2644
|
+
<span class="pf-c-chip__content">
|
|
2645
|
+
<span
|
|
2646
|
+
class="pf-c-chip__text"
|
|
2647
|
+
id="toolbar-selected-filters-example-chip-group-statuschip-three"
|
|
2648
|
+
>Chip three</span>
|
|
2649
|
+
</span>
|
|
2650
|
+
<span class="pf-c-chip__actions">
|
|
2651
|
+
<button
|
|
2652
|
+
class="pf-c-button pf-m-plain"
|
|
2653
|
+
type="button"
|
|
2654
|
+
aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-three toolbar-selected-filters-example-chip-group-statuschip-three"
|
|
2655
|
+
aria-label="Remove"
|
|
2656
|
+
id="toolbar-selected-filters-example-chip-group-statusremove-chip-three"
|
|
2657
|
+
>
|
|
2658
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2659
|
+
</button>
|
|
2660
|
+
</span>
|
|
2592
2661
|
</div>
|
|
2593
2662
|
</li>
|
|
2594
2663
|
</ul>
|
|
@@ -2610,53 +2679,65 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
2610
2679
|
>
|
|
2611
2680
|
<li class="pf-c-chip-group__list-item">
|
|
2612
2681
|
<div class="pf-c-chip">
|
|
2613
|
-
<span
|
|
2614
|
-
|
|
2615
|
-
|
|
2616
|
-
|
|
2617
|
-
|
|
2618
|
-
|
|
2619
|
-
|
|
2620
|
-
|
|
2621
|
-
|
|
2622
|
-
|
|
2623
|
-
|
|
2624
|
-
|
|
2625
|
-
|
|
2682
|
+
<span class="pf-c-chip__content">
|
|
2683
|
+
<span
|
|
2684
|
+
class="pf-c-chip__text"
|
|
2685
|
+
id="toolbar-selected-filters-example-chip-group-riskchip-one"
|
|
2686
|
+
>Chip one</span>
|
|
2687
|
+
</span>
|
|
2688
|
+
<span class="pf-c-chip__actions">
|
|
2689
|
+
<button
|
|
2690
|
+
class="pf-c-button pf-m-plain"
|
|
2691
|
+
type="button"
|
|
2692
|
+
aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-one toolbar-selected-filters-example-chip-group-riskchip-one"
|
|
2693
|
+
aria-label="Remove"
|
|
2694
|
+
id="toolbar-selected-filters-example-chip-group-riskremove-chip-one"
|
|
2695
|
+
>
|
|
2696
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2697
|
+
</button>
|
|
2698
|
+
</span>
|
|
2626
2699
|
</div>
|
|
2627
2700
|
</li>
|
|
2628
2701
|
<li class="pf-c-chip-group__list-item">
|
|
2629
2702
|
<div class="pf-c-chip">
|
|
2630
|
-
<span
|
|
2631
|
-
|
|
2632
|
-
|
|
2633
|
-
|
|
2634
|
-
|
|
2635
|
-
|
|
2636
|
-
|
|
2637
|
-
|
|
2638
|
-
|
|
2639
|
-
|
|
2640
|
-
|
|
2641
|
-
|
|
2642
|
-
|
|
2703
|
+
<span class="pf-c-chip__content">
|
|
2704
|
+
<span
|
|
2705
|
+
class="pf-c-chip__text"
|
|
2706
|
+
id="toolbar-selected-filters-example-chip-group-riskchip-two"
|
|
2707
|
+
>Chip two</span>
|
|
2708
|
+
</span>
|
|
2709
|
+
<span class="pf-c-chip__actions">
|
|
2710
|
+
<button
|
|
2711
|
+
class="pf-c-button pf-m-plain"
|
|
2712
|
+
type="button"
|
|
2713
|
+
aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-two toolbar-selected-filters-example-chip-group-riskchip-two"
|
|
2714
|
+
aria-label="Remove"
|
|
2715
|
+
id="toolbar-selected-filters-example-chip-group-riskremove-chip-two"
|
|
2716
|
+
>
|
|
2717
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2718
|
+
</button>
|
|
2719
|
+
</span>
|
|
2643
2720
|
</div>
|
|
2644
2721
|
</li>
|
|
2645
2722
|
<li class="pf-c-chip-group__list-item">
|
|
2646
2723
|
<div class="pf-c-chip">
|
|
2647
|
-
<span
|
|
2648
|
-
|
|
2649
|
-
|
|
2650
|
-
|
|
2651
|
-
|
|
2652
|
-
|
|
2653
|
-
|
|
2654
|
-
|
|
2655
|
-
|
|
2656
|
-
|
|
2657
|
-
|
|
2658
|
-
|
|
2659
|
-
|
|
2724
|
+
<span class="pf-c-chip__content">
|
|
2725
|
+
<span
|
|
2726
|
+
class="pf-c-chip__text"
|
|
2727
|
+
id="toolbar-selected-filters-example-chip-group-riskchip-three"
|
|
2728
|
+
>Chip three</span>
|
|
2729
|
+
</span>
|
|
2730
|
+
<span class="pf-c-chip__actions">
|
|
2731
|
+
<button
|
|
2732
|
+
class="pf-c-button pf-m-plain"
|
|
2733
|
+
type="button"
|
|
2734
|
+
aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-three toolbar-selected-filters-example-chip-group-riskchip-three"
|
|
2735
|
+
aria-label="Remove"
|
|
2736
|
+
id="toolbar-selected-filters-example-chip-group-riskremove-chip-three"
|
|
2737
|
+
>
|
|
2738
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2739
|
+
</button>
|
|
2740
|
+
</span>
|
|
2660
2741
|
</div>
|
|
2661
2742
|
</li>
|
|
2662
2743
|
</ul>
|
|
@@ -3104,11 +3185,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
3104
3185
|
class="pf-c-dropdown__toggle-check"
|
|
3105
3186
|
for="toolbar-stacked-example-bulk-select-toggle-check"
|
|
3106
3187
|
>
|
|
3107
|
-
<
|
|
3108
|
-
|
|
3109
|
-
|
|
3110
|
-
|
|
3111
|
-
|
|
3188
|
+
<div class="pf-c-check pf-m-standalone">
|
|
3189
|
+
<input
|
|
3190
|
+
class="pf-c-check__input"
|
|
3191
|
+
type="checkbox"
|
|
3192
|
+
id="toolbar-stacked-example-bulk-select-toggle-check"
|
|
3193
|
+
aria-label="Select all"
|
|
3194
|
+
/>
|
|
3195
|
+
</div>
|
|
3112
3196
|
</label>
|
|
3113
3197
|
|
|
3114
3198
|
<button
|
|
@@ -3617,11 +3701,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
3617
3701
|
class="pf-c-dropdown__toggle-check"
|
|
3618
3702
|
for="toolbar-stacked-collapsed-example-bulk-select-toggle-check"
|
|
3619
3703
|
>
|
|
3620
|
-
<
|
|
3621
|
-
|
|
3622
|
-
|
|
3623
|
-
|
|
3624
|
-
|
|
3704
|
+
<div class="pf-c-check pf-m-standalone">
|
|
3705
|
+
<input
|
|
3706
|
+
class="pf-c-check__input"
|
|
3707
|
+
type="checkbox"
|
|
3708
|
+
id="toolbar-stacked-collapsed-example-bulk-select-toggle-check"
|
|
3709
|
+
aria-label="Select all"
|
|
3710
|
+
/>
|
|
3711
|
+
</div>
|
|
3625
3712
|
</label>
|
|
3626
3713
|
|
|
3627
3714
|
<button
|
|
@@ -3765,11 +3852,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
3765
3852
|
class="pf-c-dropdown__toggle-check"
|
|
3766
3853
|
for="toolbar-expanded-elements-example-bulk-select-toggle-check"
|
|
3767
3854
|
>
|
|
3768
|
-
<
|
|
3769
|
-
|
|
3770
|
-
|
|
3771
|
-
|
|
3772
|
-
|
|
3855
|
+
<div class="pf-c-check pf-m-standalone">
|
|
3856
|
+
<input
|
|
3857
|
+
class="pf-c-check__input"
|
|
3858
|
+
type="checkbox"
|
|
3859
|
+
id="toolbar-expanded-elements-example-bulk-select-toggle-check"
|
|
3860
|
+
aria-label="Select all"
|
|
3861
|
+
/>
|
|
3862
|
+
</div>
|
|
3773
3863
|
</label>
|
|
3774
3864
|
|
|
3775
3865
|
<button
|
|
@@ -3842,7 +3932,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
3842
3932
|
role="listbox"
|
|
3843
3933
|
aria-labelledby="toolbar-expanded-elements-example-select-name-label"
|
|
3844
3934
|
hidden
|
|
3845
|
-
style="width: 175px"
|
|
3846
3935
|
>
|
|
3847
3936
|
<li role="presentation">
|
|
3848
3937
|
<button class="pf-c-select__menu-item" role="option">Running</button>
|
|
@@ -3881,9 +3970,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
3881
3970
|
</span>
|
|
3882
3971
|
<input
|
|
3883
3972
|
class="pf-c-text-input-group__text-input"
|
|
3884
|
-
type="
|
|
3885
|
-
value
|
|
3973
|
+
type="search"
|
|
3886
3974
|
placeholder="Filter by name"
|
|
3975
|
+
value
|
|
3887
3976
|
aria-label="Type to filter"
|
|
3888
3977
|
/>
|
|
3889
3978
|
</span>
|
|
@@ -4193,61 +4282,65 @@ As the toolbar component is a hybrid layout and component, some of its elements
|
|
|
4193
4282
|
|
|
4194
4283
|
### Usage
|
|
4195
4284
|
|
|
4196
|
-
| Class
|
|
4197
|
-
|
|
|
4198
|
-
| `.pf-c-toolbar`
|
|
4199
|
-
| `.pf-c-toolbar__item`
|
|
4200
|
-
| `.pf-c-toolbar__group`
|
|
4201
|
-
| `.pf-c-toolbar__content`
|
|
4202
|
-
| `.pf-c-toolbar__content-section`
|
|
4203
|
-
| `.pf-c-toolbar__expandable-content`
|
|
4204
|
-
| `.pf-m-sticky`
|
|
4205
|
-
| `.pf-m-full-height`
|
|
4206
|
-
| `.pf-m-static`
|
|
4207
|
-
| `.pf-m-expanded`
|
|
4208
|
-
| `.pf-m-bulk-select`
|
|
4209
|
-
| `.pf-m-overflow-menu`
|
|
4210
|
-
| `.pf-m-pagination`
|
|
4211
|
-
| `.pf-m-search-filter`
|
|
4212
|
-
| `.pf-m-chip-group`
|
|
4213
|
-
| `.pf-m-expand-all`
|
|
4214
|
-
| `.pf-m-expanded`
|
|
4215
|
-
| `.pf-m-button-group`
|
|
4216
|
-
| `.pf-m-icon-button-group`
|
|
4217
|
-
| `.pf-m-filter-group`
|
|
4218
|
-
| `.pf-m-hidden{-on-[breakpoint]}`
|
|
4219
|
-
| `.pf-m-visible{-on-[breakpoint]}`
|
|
4220
|
-
| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *`
|
|
4221
|
-
| `.pf-m-align-left{-on-[breakpoint]}`
|
|
4222
|
-
| `.pf-m-
|
|
4223
|
-
| `.pf-m-
|
|
4224
|
-
| `.pf-m-
|
|
4225
|
-
| `.pf-m-
|
|
4226
|
-
| `.pf-m-
|
|
4227
|
-
| `.pf-m-
|
|
4285
|
+
| Class | Applied to | Outcome |
|
|
4286
|
+
| -- | -- | -- |
|
|
4287
|
+
| `.pf-c-toolbar` | `<div>` | Initiates the toolbar component. **Required** |
|
|
4288
|
+
| `.pf-c-toolbar__item` | `<div>` | Initiates a toolbar item. **Required** |
|
|
4289
|
+
| `.pf-c-toolbar__group` | `<div>` | Initiates a toolbar group. |
|
|
4290
|
+
| `.pf-c-toolbar__content` | `<div>` | Initiates a toolbar content container. **Required** |
|
|
4291
|
+
| `.pf-c-toolbar__content-section` | `<div>` | Initiates a toolbar content section. This is used to separate static elements from dynamic elements within a content container. There should be no more than one `.pf-c-toolbar__content-section` per `.pf-c-toolbar__content` **Required** |
|
|
4292
|
+
| `.pf-c-toolbar__expandable-content` | `<div>` | Initiates a toolbar expandable content section. |
|
|
4293
|
+
| `.pf-m-sticky` | `.pf-c-toolbar` | Modifies toolbar component to be sticky to the top of its container. |
|
|
4294
|
+
| `.pf-m-full-height` | `.pf-c-toolbar` | Modifies toolbar component to full height of its container and removes vertical padding. |
|
|
4295
|
+
| `.pf-m-static` | `.pf-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. |
|
|
4296
|
+
| `.pf-m-expanded` | `.pf-c-toolbar__expandable-content` | Modifies expandable content section for the expanded state. |
|
|
4297
|
+
| `.pf-m-bulk-select` | `.pf-c-toolbar__item` | Initiates bulk select spacing. |
|
|
4298
|
+
| `.pf-m-overflow-menu` | `.pf-c-toolbar__item` | Initiates overflow menu spacing. |
|
|
4299
|
+
| `.pf-m-pagination` | `.pf-c-toolbar__item` | Initiates pagination spacing and margin. |
|
|
4300
|
+
| `.pf-m-search-filter` | `.pf-c-toolbar__item` | Initiates search filter spacing. |
|
|
4301
|
+
| `.pf-m-chip-group` | `.pf-c-toolbar__item` | Initiates chip group spacing. |
|
|
4302
|
+
| `.pf-m-expand-all` | `.pf-c-toolbar__item` | Initiates an item for an expand all button. |
|
|
4303
|
+
| `.pf-m-expanded` | `.pf-c-toolbar__item.pf-m-expand-all` | Modifies an expand all button for the expanded state. |
|
|
4304
|
+
| `.pf-m-button-group` | `.pf-c-toolbar__group` | Initiates button group spacing. |
|
|
4305
|
+
| `.pf-m-icon-button-group` | `.pf-c-toolbar__group` | Initiates icon button group spacing. |
|
|
4306
|
+
| `.pf-m-filter-group` | `.pf-c-toolbar__group` | Initiates filter group spacing. |
|
|
4307
|
+
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
4308
|
+
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
4309
|
+
| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
4310
|
+
| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
4311
|
+
| `.pf-m-align-items-center` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies toolbar element to vertically align children to center. |
|
|
4312
|
+
| `.pf-m-align-items-baseline` | `.pf-c-toolbar__group` | Modifies toolbar group to vertically align children to baseline. |
|
|
4313
|
+
| `.pf-m-align-self-center` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to center. |
|
|
4314
|
+
| `.pf-m-align-self-baseline` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to baseline. |
|
|
4315
|
+
| `.pf-m-label` | `.pf-c-toolbar__item` | Modifies toolbar item to label. |
|
|
4316
|
+
| `.pf-m-chip-container` | `.pf-c-toolbar__content`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
|
|
4317
|
+
| `.pf-m-overflow-container` | `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation. |
|
|
4318
|
+
| `.pf-m-expanded` | `.pf-c-toolbar__expandable-content`, `.pf-c-toolbar__toggle` | Modifies the component for the expanded state. |
|
|
4319
|
+
| `.pf-m-wrap` | `.pf-c-toolbar`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies the toolbar element to wrap. |
|
|
4320
|
+
| `.pf-m-nowrap` | `.pf-c-toolbar`, `.pf-c-toolbar__group` | Modifies the toolbar element to nowrap. |
|
|
4228
4321
|
|
|
4229
4322
|
### Accessibility
|
|
4230
4323
|
|
|
4231
|
-
| Attribute
|
|
4232
|
-
|
|
|
4233
|
-
| `hidden`
|
|
4234
|
-
| `aria-expanded="true"`
|
|
4235
|
-
| `aria-expanded="false"`
|
|
4236
|
-
| `aria-controls="[id of expandable content]"` | `.pf-c-toolbar__toggle > .pf-c-button`
|
|
4237
|
-
| `id="[expandable-content_id]"`
|
|
4238
|
-
| `aria-label="Expand all"`
|
|
4239
|
-
| `aria-label="Collapse all"`
|
|
4324
|
+
| Attribute | Applied to | Outcome |
|
|
4325
|
+
| -- | -- | -- |
|
|
4326
|
+
| `hidden` | `.pf-c-toolbar__item`, `.pf-c-toolbar__group`, `.pf-c-toolbar__toggle`, `.pf-c-toolbar__expandable-content` | Indicates that the toolbar element is hidden. **Required** |
|
|
4327
|
+
| `aria-expanded="true"` | `.pf-c-toolbar__toggle > .pf-c-button` | Indicates that the expandable content is visible. **Required** |
|
|
4328
|
+
| `aria-expanded="false"` | `.pf-c-toolbar__toggle > .pf-c-button` | Indicates the the expandable content is hidden. **Required** |
|
|
4329
|
+
| `aria-controls="[id of expandable content]"` | `.pf-c-toolbar__toggle > .pf-c-button` | Identifies the expanded content controlled by the toggle button. **Required** |
|
|
4330
|
+
| `id="[expandable-content_id]"` | `.pf-c-toolbar__expandable-content` | Provides a reference for toggle button description. **Required** |
|
|
4331
|
+
| `aria-label="Expand all"` | `.pf-c-toolbar__item.pf-m-expand-all` | Provides an accessible label for the expand all item button. **Required** |
|
|
4332
|
+
| `aria-label="Collapse all"` | `.pf-c-toolbar__item.pf-m-expand-all.pf-m-expanded` | Provides an accessible label for the expand all item button. **Required** |
|
|
4240
4333
|
|
|
4241
4334
|
### Toggle group usage
|
|
4242
4335
|
|
|
4243
|
-
| Class
|
|
4244
|
-
|
|
|
4245
|
-
| `.pf-m-toggle-group`
|
|
4336
|
+
| Class | Applied to | Outcome |
|
|
4337
|
+
| -- | -- | -- |
|
|
4338
|
+
| `.pf-m-toggle-group` | `.pf-c-toolbar__group` | Modifies toolbar group to control when, and at which breakpoint, filters will be hidden/shown. By default, all filters are hidden until the specified breakpoint is reached. |
|
|
4246
4339
|
| `.pf-m-show{-on-[breakpoint]}` | `.pf-c-toolbar__group.pf-m-toggle-group`, `.pf-c-toolbar__expandable-content` | Modifies toolbar element to hidden at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). This selector must be applied consistently to toggle group and expandable content. |
|
|
4247
4340
|
|
|
4248
4341
|
### Spacer system
|
|
4249
4342
|
|
|
4250
|
-
| Class
|
|
4251
|
-
|
|
|
4252
|
-
| `.pf-m-spacer-{none, sm, md, lg, xl}{-on-[breakpoint]}`
|
|
4253
|
-
| `.pf-m-space-items-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group`
|
|
4343
|
+
| Class | Applied to | Outcome |
|
|
4344
|
+
| -- | -- | -- |
|
|
4345
|
+
| `.pf-m-spacer-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
4346
|
+
| `.pf-m-space-items-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group` | Modifies toolbar group child spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|