@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.41
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 +4 -4
- package/RELEASE-NOTES.md +18 -1
- package/assets/icons/iconUnicodes.json +1 -0
- package/assets/images/pfbg-icon.svg +1 -0
- package/assets/pficon/pficon.scss +7 -2
- 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/_fa-icons.scss +1 -2
- package/base/_fonts.scss +22 -27
- package/base/_globals.scss +92 -86
- package/base/_icons.scss +1 -28
- package/base/_svg-icons.scss +6 -0
- package/base/_variables.scss +4 -4
- package/base/patternfly-common.css +0 -10
- package/base/patternfly-fa-icons.css +1 -1
- package/base/patternfly-fonts.css +17 -17
- package/base/patternfly-globals.css +35 -41
- package/base/patternfly-icons.css +8 -22
- package/base/patternfly-pf-icons.css +6 -2
- package/base/patternfly-themes.css +0 -42
- package/base/patternfly-variables.css +3 -3
- package/base/themes/dark/_globals.scss +1 -1
- package/base/themes/dark/_variables.scss +1 -1
- package/components/AboutModalBox/about-modal-box.css +20 -50
- package/components/AboutModalBox/about-modal-box.scss +22 -14
- package/components/Accordion/accordion.css +2 -0
- package/components/Accordion/accordion.scss +2 -0
- package/components/Alert/alert.css +17 -8
- package/components/Alert/alert.scss +21 -7
- package/components/Alert/themes/dark/alert.scss +1 -1
- 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/BackgroundImage/background-image.css +8 -35
- package/components/BackgroundImage/background-image.scss +17 -43
- package/components/Banner/banner.css +14 -52
- 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 +115 -50
- package/components/Card/card.scss +164 -63
- 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 +13 -6
- package/components/ContextSelector/context-selector.scss +14 -7
- package/components/DataList/data-list-grid.css +7 -7
- package/components/DataList/data-list-grid.scss +1 -1
- package/components/DataList/data-list.css +46 -40
- package/components/DataList/data-list.scss +37 -28
- package/components/DatePicker/date-picker.css +0 -8
- package/components/DatePicker/date-picker.scss +0 -9
- 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 +26 -25
- package/components/Dropdown/dropdown.scss +17 -18
- 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 +14 -12
- package/components/Form/form.scss +9 -7
- package/components/FormControl/form-control.css +2 -5
- package/components/FormControl/themes/dark/form-control.scss +2 -6
- package/components/HelperText/helper-text.css +4 -0
- package/components/HelperText/helper-text.scss +5 -0
- package/components/Hint/hint.css +2 -2
- package/components/Hint/hint.scss +2 -2
- package/components/Icon/icon.css +3 -3
- package/components/Icon/icon.scss +3 -3
- package/components/InputGroup/input-group.css +61 -85
- package/components/InputGroup/input-group.scss +55 -61
- package/components/InputGroup/themes/dark/input-group.scss +11 -25
- package/components/Label/label.css +49 -36
- package/components/Label/label.scss +53 -38
- package/components/Label/themes/dark/label.scss +2 -2
- package/components/LabelGroup/label-group.css +26 -22
- package/components/LabelGroup/label-group.scss +31 -26
- package/components/LogViewer/log-viewer.css +0 -38
- package/components/Login/login.css +20 -60
- package/components/Login/login.scss +16 -18
- package/components/Login/themes/dark/login.scss +4 -0
- package/components/Masthead/masthead.css +4 -42
- 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 +12 -11
- package/components/ModalBox/modal-box.scss +14 -14
- 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 +8 -8
- package/components/NotificationDrawer/notification-drawer.scss +8 -8
- package/components/OptionsMenu/options-menu.css +8 -10
- package/components/OptionsMenu/options-menu.scss +9 -11
- package/components/Page/page.css +101 -122
- package/components/Page/page.scss +49 -21
- package/components/Pagination/pagination.css +2 -110
- package/components/Pagination/pagination.scss +0 -6
- package/components/Popover/popover.css +31 -37
- package/components/Popover/popover.scss +32 -37
- package/components/Popover/themes/dark/popover.scss +3 -9
- 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 -133
- package/components/Spinner/spinner.scss +4 -173
- 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 +67 -65
- package/components/Table/table.scss +65 -62
- 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 -39
- package/components/Wizard/wizard.scss +20 -2
- package/docs/components/AboutModalBox/examples/AboutModalBox.md +20 -14
- 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 +29 -29
- package/docs/components/AlertGroup/examples/AlertGroup.md +15 -15
- package/docs/components/AppLauncher/examples/application-launcher.md +52 -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 +13 -29
- 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 +51 -55
- package/docs/components/CalendarMonth/examples/CalendarMonth.md +301 -284
- package/docs/components/Card/examples/Card.md +676 -116
- package/docs/components/Check/examples/Check.md +16 -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 +87 -80
- package/docs/components/DataList/examples/DataList.md +239 -202
- package/docs/components/DatePicker/examples/DatePicker.md +139 -104
- 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 +125 -100
- 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 +150 -110
- package/docs/components/Form/examples/Form.md +152 -130
- package/docs/components/FormControl/examples/FormControl.md +21 -20
- package/docs/components/HelperText/examples/HelperText.md +24 -35
- package/docs/components/Hint/examples/Hint.md +7 -7
- package/docs/components/Icon/examples/Icon.md +11 -12
- package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
- package/docs/components/InputGroup/examples/InputGroup.md +229 -179
- 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 -74
- package/docs/components/Login/examples/Login.md +103 -181
- package/docs/components/Masthead/examples/masthead.md +9 -9
- package/docs/components/Menu/examples/Menu.md +93 -85
- package/docs/components/MenuToggle/examples/MenuToggle.md +29 -28
- package/docs/components/ModalBox/examples/ModalBox.md +113 -92
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +27 -26
- 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 +64 -64
- package/docs/components/NumberInput/examples/NumberInput.md +311 -239
- package/docs/components/OptionsMenu/examples/options-menu.md +28 -28
- package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
- package/docs/components/Page/examples/Page.css +7 -1
- package/docs/components/Page/examples/Page.md +81 -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 +206 -149
- package/docs/components/Progress/examples/Progress.md +32 -61
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -39
- package/docs/components/Radio/examples/Radio.md +12 -11
- package/docs/components/SearchInput/examples/SearchInput.md +185 -148
- package/docs/components/Select/examples/Select.md +372 -318
- 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 +84 -62
- package/docs/components/Spinner/examples/Spinner.md +18 -67
- 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 +5212 -5750
- package/docs/components/Tabs/examples/Tabs.md +155 -155
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +523 -406
- package/docs/components/Tile/examples/Tile.md +16 -17
- 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 +848 -726
- 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 -5
- package/docs/components/Wizard/examples/Wizard.md +119 -127
- package/docs/demos/AboutModal/examples/AboutModal.md +4 -5
- package/docs/demos/Alert/examples/Alert.md +118 -71
- package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
- package/docs/demos/Banner/examples/Banner.md +8 -9
- package/docs/demos/Button/examples/Button.md +10 -5
- package/docs/demos/Card/examples/Card.md +246 -168
- package/docs/demos/CardView/examples/CardView.md +57 -30
- package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
- package/docs/demos/Dashboard/examples/Dashboard.md +61 -38
- package/docs/demos/DataList/examples/DataList.md +312 -255
- 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 +220 -213
- package/docs/demos/HelperText/examples/HelperText.md +16 -14
- package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
- package/docs/demos/Masthead/examples/Masthead.md +302 -284
- 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 +70 -58
- package/docs/demos/Page/examples/Page.md +982 -51
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +22 -18
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +121 -106
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +345 -311
- package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
- package/docs/demos/Table/examples/Table.md +3373 -1333
- package/docs/demos/Tabs/examples/Tabs.md +141 -90
- package/docs/demos/Toolbar/examples/Toolbar.md +1994 -329
- 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 +5 -5
- package/docs/utilities/Alignment/examples/Alignment.md +7 -7
- package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +13 -13
- package/docs/utilities/BoxShadow/examples/box-shadow.md +23 -23
- package/docs/utilities/Display/examples/Display.md +12 -12
- package/docs/utilities/Flex/examples/Flex.md +35 -35
- package/docs/utilities/Float/examples/Float.md +5 -5
- package/docs/utilities/Sizing/examples/Sizing.md +51 -51
- package/docs/utilities/Spacing/examples/Spacing.md +35 -35
- package/docs/utilities/Text/examples/Text.md +31 -31
- 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 +60 -66
- package/patternfly-addons.css +48 -48
- package/{patternfly-base-no-reset.css → patternfly-base-no-globals.css} +28 -73
- package/{patternfly-base-no-reset.scss → patternfly-base-no-globals.scss} +1 -0
- package/patternfly-base.css +63 -114
- package/{patternfly-no-reset.css → patternfly-no-globals.css} +1206 -2449
- package/{patternfly-no-reset.scss → patternfly-no-globals.scss} +1 -0
- package/patternfly.css +1234 -2483
- 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/placeholders.scss +0 -23
- package/sass-utilities/scss-variables.scss +5 -6
- package/sass-utilities/themes/dark/placeholders.scss +0 -22
- package/sass-utilities/themes/dark/scss-variables.scss +1 -1
- package/utilities/Spacing/spacing.scss +2 -2
- package/utilities/Text/text.css +48 -48
- package/utilities/Text/text.scss +6 -6
- package/utilities/Text/themes/dark/text.scss +2 -2
- package/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff +0 -0
- package/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff +0 -0
- package/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff +0 -0
- package/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff +0 -0
- package/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff +0 -0
- package/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff +0 -0
- package/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff +0 -0
- package/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff +0 -0
- package/assets/fonts/RedHatText/RedHatText-Bold.woff +0 -0
- package/assets/fonts/RedHatText/RedHatText-BoldItalic.woff +0 -0
- package/assets/fonts/RedHatText/RedHatText-Italic.woff +0 -0
- package/assets/fonts/RedHatText/RedHatText-Medium.woff +0 -0
- package/assets/fonts/RedHatText/RedHatText-MediumItalic.woff +0 -0
- package/assets/fonts/RedHatText/RedHatText-Regular.woff +0 -0
- package/assets/fonts/webfonts/fa-solid-900.woff +0 -0
- package/assets/pficon/pficon.woff +0 -0
- 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
- package/sass-utilities/bs-variables.scss +0 -709
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
id: Menu
|
|
3
3
|
section: components
|
|
4
|
+
subsection: menus
|
|
4
5
|
cssPrefix: pf-c-menu
|
|
5
6
|
---import './Menu.css'
|
|
6
7
|
|
|
@@ -178,9 +179,9 @@ cssPrefix: pf-c-menu
|
|
|
178
179
|
<input
|
|
179
180
|
class="pf-c-check__input"
|
|
180
181
|
type="checkbox"
|
|
182
|
+
disabled
|
|
181
183
|
id="with-checkbox-example-check-3"
|
|
182
184
|
name="with-checkbox-example-check-3"
|
|
183
|
-
disabled
|
|
184
185
|
/>
|
|
185
186
|
</span>
|
|
186
187
|
</span>
|
|
@@ -4140,7 +4141,7 @@ cssPrefix: pf-c-menu
|
|
|
4140
4141
|
>
|
|
4141
4142
|
<div class="pf-c-menu__breadcrumb">
|
|
4142
4143
|
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
4143
|
-
<ol class="pf-c-breadcrumb__list">
|
|
4144
|
+
<ol class="pf-c-breadcrumb__list" role="list">
|
|
4144
4145
|
<li class="pf-c-breadcrumb__item">
|
|
4145
4146
|
<span class="pf-c-breadcrumb__item-divider">
|
|
4146
4147
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
@@ -4334,7 +4335,7 @@ cssPrefix: pf-c-menu
|
|
|
4334
4335
|
>
|
|
4335
4336
|
<div class="pf-c-menu__breadcrumb">
|
|
4336
4337
|
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
4337
|
-
<ol class="pf-c-breadcrumb__list">
|
|
4338
|
+
<ol class="pf-c-breadcrumb__list" role="list">
|
|
4338
4339
|
<li class="pf-c-breadcrumb__item">
|
|
4339
4340
|
<span class="pf-c-breadcrumb__item-divider">
|
|
4340
4341
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
@@ -4564,7 +4565,7 @@ cssPrefix: pf-c-menu
|
|
|
4564
4565
|
>
|
|
4565
4566
|
<div class="pf-c-menu__breadcrumb">
|
|
4566
4567
|
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
4567
|
-
<ol class="pf-c-breadcrumb__list">
|
|
4568
|
+
<ol class="pf-c-breadcrumb__list" role="list">
|
|
4568
4569
|
<li class="pf-c-breadcrumb__item">
|
|
4569
4570
|
<span class="pf-c-breadcrumb__item-divider">
|
|
4570
4571
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
@@ -4932,17 +4933,18 @@ cssPrefix: pf-c-menu
|
|
|
4932
4933
|
<div class="pf-c-menu pf-m-scrollable">
|
|
4933
4934
|
<div class="pf-c-menu__search">
|
|
4934
4935
|
<div class="pf-c-menu__search-input">
|
|
4935
|
-
<div class="pf-c-
|
|
4936
|
-
<div class="pf-c-
|
|
4937
|
-
<span class="pf-c-
|
|
4938
|
-
<span class="pf-c-
|
|
4939
|
-
<i class="fas fa-
|
|
4936
|
+
<div class="pf-c-text-input-group">
|
|
4937
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
4938
|
+
<span class="pf-c-text-input-group__text">
|
|
4939
|
+
<span class="pf-c-text-input-group__icon">
|
|
4940
|
+
<i class="fas fa-fw fa-search"></i>
|
|
4940
4941
|
</span>
|
|
4941
4942
|
<input
|
|
4942
|
-
class="pf-c-
|
|
4943
|
-
type="
|
|
4943
|
+
class="pf-c-text-input-group__text-input"
|
|
4944
|
+
type="search"
|
|
4944
4945
|
placeholder="Search"
|
|
4945
|
-
|
|
4946
|
+
value
|
|
4947
|
+
aria-label="Filter menu items"
|
|
4946
4948
|
/>
|
|
4947
4949
|
</span>
|
|
4948
4950
|
</div>
|
|
@@ -5051,17 +5053,18 @@ cssPrefix: pf-c-menu
|
|
|
5051
5053
|
<div class="pf-c-menu">
|
|
5052
5054
|
<div class="pf-c-menu__search">
|
|
5053
5055
|
<div class="pf-c-menu__search-input">
|
|
5054
|
-
<div class="pf-c-
|
|
5055
|
-
<div class="pf-c-
|
|
5056
|
-
<span class="pf-c-
|
|
5057
|
-
<span class="pf-c-
|
|
5058
|
-
<i class="fas fa-
|
|
5056
|
+
<div class="pf-c-text-input-group">
|
|
5057
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
5058
|
+
<span class="pf-c-text-input-group__text">
|
|
5059
|
+
<span class="pf-c-text-input-group__icon">
|
|
5060
|
+
<i class="fas fa-fw fa-search"></i>
|
|
5059
5061
|
</span>
|
|
5060
5062
|
<input
|
|
5061
|
-
class="pf-c-
|
|
5062
|
-
type="
|
|
5063
|
+
class="pf-c-text-input-group__text-input"
|
|
5064
|
+
type="search"
|
|
5063
5065
|
placeholder="Search"
|
|
5064
|
-
|
|
5066
|
+
value
|
|
5067
|
+
aria-label="Filter menu items"
|
|
5065
5068
|
/>
|
|
5066
5069
|
</span>
|
|
5067
5070
|
</div>
|
|
@@ -5710,15 +5713,20 @@ cssPrefix: pf-c-menu
|
|
|
5710
5713
|
</a>
|
|
5711
5714
|
</li>
|
|
5712
5715
|
<li class="pf-c-menu__list-item pf-m-loading" role="none">
|
|
5713
|
-
<
|
|
5716
|
+
<svg
|
|
5714
5717
|
class="pf-c-spinner pf-m-lg"
|
|
5715
5718
|
role="progressbar"
|
|
5719
|
+
viewBox="0 0 100 100"
|
|
5716
5720
|
aria-label="Loading items"
|
|
5717
5721
|
>
|
|
5718
|
-
<
|
|
5719
|
-
|
|
5720
|
-
|
|
5721
|
-
|
|
5722
|
+
<circle
|
|
5723
|
+
class="pf-c-spinner__path"
|
|
5724
|
+
cx="50"
|
|
5725
|
+
cy="50"
|
|
5726
|
+
r="45"
|
|
5727
|
+
fill="none"
|
|
5728
|
+
/>
|
|
5729
|
+
</svg>
|
|
5722
5730
|
</li>
|
|
5723
5731
|
</ul>
|
|
5724
5732
|
</div>
|
|
@@ -6063,66 +6071,66 @@ cssPrefix: pf-c-menu
|
|
|
6063
6071
|
|
|
6064
6072
|
### Accessibility
|
|
6065
6073
|
|
|
6066
|
-
| Attribute
|
|
6067
|
-
|
|
|
6068
|
-
| `role="menu"`
|
|
6069
|
-
| `disabled`
|
|
6070
|
-
| `role="menuitem"`
|
|
6071
|
-
| `role="none"`
|
|
6072
|
-
| `aria-disabled="true"`
|
|
6073
|
-
| `tabindex="-1"`
|
|
6074
|
-
| `aria-hidden="true"`
|
|
6075
|
-
| `aria-label="Not starred"` | `.pf-c-menu__item-action-icon.pf-m-favorite`
|
|
6076
|
-
| `aria-label="Starred"`
|
|
6074
|
+
| Attribute | Applied | Outcome |
|
|
6075
|
+
| -- | -- | -- |
|
|
6076
|
+
| `role="menu"` | `.pf-c-menu__list` | Declares `.pf-c-menu__list` as a menu. |
|
|
6077
|
+
| `disabled` | `button.pf-c-menu__item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
|
|
6078
|
+
| `role="menuitem"` | `.pf-c-menu__item`, `.pf-c-menu__list-item` (checkbox) | Assigns `.pf-c-menu__item` as an option in a set of choices contained by a menu. |
|
|
6079
|
+
| `role="none"` | `.pf-c-menu__list-item` | Removes semantic meaning from `.pf-c-menu__list-item`. |
|
|
6080
|
+
| `aria-disabled="true"` | `a.pf-c-menu__item` | When the menu item uses a link element, removes it from keyboard focus. |
|
|
6081
|
+
| `tabindex="-1"` | `a.pf-c-menu__item` | When the menu item uses a link element, removes it from keyboard focus. |
|
|
6082
|
+
| `aria-hidden="true"` | `.pf-c-menu__item-icon`, `.pf-c-menu__item-action-icon`, `.pf-c-menu__item-external-icon`, `.pf-c-menu__item-toggle-icon`, `.pf-c-menu__item-select-icon` | Hides the icon from assistive technologies. |
|
|
6083
|
+
| `aria-label="Not starred"` | `.pf-c-menu__item-action-icon.pf-m-favorite` | Provides an accessible label indicating that the favorite action is not selected. |
|
|
6084
|
+
| `aria-label="Starred"` | `.pf-c-menu__item-action-icon.pf-m-favorite.pf-m-favorited` | Provides an accessible label indicating that the favorite action is selected. |
|
|
6077
6085
|
|
|
6078
6086
|
### Usage
|
|
6079
6087
|
|
|
6080
|
-
| Class
|
|
6081
|
-
|
|
|
6082
|
-
| `.pf-c-menu`
|
|
6083
|
-
| `.pf-c-menu__header`
|
|
6084
|
-
| `.pf-c-menu__search`
|
|
6085
|
-
| `.pf-c-menu__search-input`
|
|
6086
|
-
| `.pf-c-menu__content`
|
|
6087
|
-
| `.pf-c-menu__list`
|
|
6088
|
-
| `.pf-c-menu__list-item`
|
|
6089
|
-
| `.pf-c-menu__item`
|
|
6090
|
-
| `.pf-c-menu__item-main`
|
|
6091
|
-
| `.pf-c-menu__item-text`
|
|
6092
|
-
| `.pf-c-menu__item-check`
|
|
6093
|
-
| `.pf-c-menu__item-description`
|
|
6094
|
-
| `.pf-c-menu__item-group`
|
|
6095
|
-
| `.pf-c-menu__item-group-title`
|
|
6096
|
-
| `.pf-c-menu__item-icon`
|
|
6097
|
-
| `.pf-c-menu__item-toggle-icon`
|
|
6098
|
-
| `.pf-c-menu__item-select-icon`
|
|
6099
|
-
| `.pf-c-menu__item-action`
|
|
6100
|
-
| `.pf-c-menu__item-action-icon`
|
|
6101
|
-
| `.pf-c-menu__item-external-icon`
|
|
6102
|
-
| `.pf-c-menu__footer`
|
|
6103
|
-
| `.pf-m-hidden{-on-[breakpoint]}`
|
|
6104
|
-
| `.pf-m-visible{-on-[breakpoint]}`
|
|
6105
|
-
| `.pf-m-favorite`
|
|
6106
|
-
| `.pf-m-favorited`
|
|
6107
|
-
| `.pf-m-selected`
|
|
6108
|
-
| `.pf-m-drill-up`
|
|
6109
|
-
| `.pf-m-flyout`
|
|
6110
|
-
| `.pf-m-nav`
|
|
6111
|
-
| `.pf-m-top`
|
|
6112
|
-
| `.pf-m-left`
|
|
6113
|
-
| `.pf-m-plain`
|
|
6114
|
-
| `.pf-m-scrollable`
|
|
6115
|
-
| `.pf-m-current`
|
|
6116
|
-
| `.pf-m-load`
|
|
6117
|
-
| `.pf-m-loading`
|
|
6118
|
-
| `.pf-m-drilldown`
|
|
6119
|
-
| `.pf-m-current-path`
|
|
6120
|
-
| `.pf-m-drilled-in`
|
|
6121
|
-
| `.pf-m-static`
|
|
6122
|
-
| `.pf-m-danger`
|
|
6123
|
-
| `--pf-c-menu--Width: {width}`
|
|
6124
|
-
| `--pf-c-menu__content--MaxHeight: {height}`
|
|
6125
|
-
| `--pf-c-menu__content--Height: {height}`
|
|
6126
|
-
| `--pf-c-menu--m-flyout__menu--top-offset`
|
|
6127
|
-
| `--pf-c-menu--m-flyout__menu--left-offset`
|
|
6128
|
-
| `--pf-c-menu--m-flyout__menu--m-left--right-offset` | `.pf-c-menu.pf-m-flyout > .pf-c-menu`
|
|
6088
|
+
| Class | Applied to | Outcome |
|
|
6089
|
+
| -- | -- | -- |
|
|
6090
|
+
| `.pf-c-menu` | `<div>` | Initiates the menu. **Required** |
|
|
6091
|
+
| `.pf-c-menu__header` | `<div>` | Initiates the menu header container. |
|
|
6092
|
+
| `.pf-c-menu__search` | `<div>` | Initiates the menu search container. Use for filtering. |
|
|
6093
|
+
| `.pf-c-menu__search-input` | `<div>` | Initiates the menu search input container. |
|
|
6094
|
+
| `.pf-c-menu__content` | `<div>` | Initiates the menu content. Use for lists. **Required** |
|
|
6095
|
+
| `.pf-c-menu__list` | `<ul>` | Initiates the menu list. **Required** |
|
|
6096
|
+
| `.pf-c-menu__list-item` | `<li>` | Initiates the menu list item. **Required** |
|
|
6097
|
+
| `.pf-c-menu__item` | `<button>`, `<a>`, `<div>`, `<label>` | Initiates the menu item. **Required** |
|
|
6098
|
+
| `.pf-c-menu__item-main` | `<span>` | Initiates the menu item main container. **Required** |
|
|
6099
|
+
| `.pf-c-menu__item-text` | `<span>` | Initiates the menu item text. **Required** |
|
|
6100
|
+
| `.pf-c-menu__item-check` | `<span>` | Initiates a menu label. |
|
|
6101
|
+
| `.pf-c-menu__item-description` | `<span>` | Initiates the menu item description. |
|
|
6102
|
+
| `.pf-c-menu__item-group` | `<section>` | Initiates the menu item group. |
|
|
6103
|
+
| `.pf-c-menu__item-group-title` | `<h1>` | Initiates the menu item group title. |
|
|
6104
|
+
| `.pf-c-menu__item-icon` | `<span>` | Initiates the menu item icon. |
|
|
6105
|
+
| `.pf-c-menu__item-toggle-icon` | `<span>` | Initiates the menu item toggle icon. |
|
|
6106
|
+
| `.pf-c-menu__item-select-icon` | `<span>` | Initiates the menu item select icon. |
|
|
6107
|
+
| `.pf-c-menu__item-action` | `<button>` | Initiates the menu item action. |
|
|
6108
|
+
| `.pf-c-menu__item-action-icon` | `<span>` | Initiates the menu item action icon. |
|
|
6109
|
+
| `.pf-c-menu__item-external-icon` | `<span>` | Initiates the menu item external icon. |
|
|
6110
|
+
| `.pf-c-menu__footer` | `<div>` | Initiates the menu footer. |
|
|
6111
|
+
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-menu__list`, `.pf-c-menu__list-item`, `.pf-c-menu__group` | Modifies a menu element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
6112
|
+
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-menu__list`, `.pf-c-menu__list-item`, `.pf-c-menu__group` | Modifies a menu element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
6113
|
+
| `.pf-m-favorite` | `.pf-c-menu__item-action` | Modifies the menu item action to handle the favorite icon. |
|
|
6114
|
+
| `.pf-m-favorited` | `.pf-c-menu__item-action.pf-m-favorite` | Modifies the menu item action icon to be favorited. |
|
|
6115
|
+
| `.pf-m-selected` | `.pf-c-menu__item` | Modifies the menu item to be selected. |
|
|
6116
|
+
| `.pf-m-drill-up` | `.pf-c-menu__list-item` | Flags the menu item as a drill up button. |
|
|
6117
|
+
| `.pf-m-flyout` | `.pf-c-menu` | Modifies the menu so that all nested `.pf-c-menu` elements "flyout". |
|
|
6118
|
+
| `.pf-m-nav` | `.pf-c-menu` | Modifies the menu for nav variant. |
|
|
6119
|
+
| `.pf-m-top` | `.pf-c-menu` | Modifies a flyout menu to expand to the top. |
|
|
6120
|
+
| `.pf-m-left` | `.pf-c-menu` | Modifies a flyout menu to expand to the left. |
|
|
6121
|
+
| `.pf-m-plain` | `.pf-c-menu` | Modifies the menu component for use in the page instead of as a dropdown. |
|
|
6122
|
+
| `.pf-m-scrollable` | `.pf-c-menu` | Modifies the menu component content for scrollable styles. Scrollable content height can be customized by setting `--pf-c-menu__content--MaxHeight`. |
|
|
6123
|
+
| `.pf-m-current` | `.pf-c-menu__list-item` | Modifies a list item for current styles. |
|
|
6124
|
+
| `.pf-m-load` | `.pf-c-menu__list-item` | Modifies a list item for "load more" styles. |
|
|
6125
|
+
| `.pf-m-loading` | `.pf-c-menu__list-item` | Modifies a list item for loading styles. |
|
|
6126
|
+
| `.pf-m-drilldown` | `.pf-c-menu` | Modifies the menu so that all nested `.pf-c-menu` elements "drill down". |
|
|
6127
|
+
| `.pf-m-current-path` | `.pf-c-menu.pf-m-drilldown .pf-c-menu__list-item` | Modifies the menu list item for current path state. |
|
|
6128
|
+
| `.pf-m-drilled-in` | `.pf-c-menu.pf-m-drilldown, .pf-c-menu.pf-m-drilldown .pf-c-menu` | Modifies the menu list for drilled in state. |
|
|
6129
|
+
| `.pf-m-static` | `.pf-c-menu.pf-m-drilldown .pf-c-menu` | Modifies the menu list for drilled static state. |
|
|
6130
|
+
| `.pf-m-danger` | `pf-c-menu__item-text` | Modifies a list item for danger styles. |
|
|
6131
|
+
| `--pf-c-menu--Width: {width}` | `.pf-c-menu` | Modifies the width of the menu. The default value is `auto`. |
|
|
6132
|
+
| `--pf-c-menu__content--MaxHeight: {height}` | `.pf-c-menu__content` | Modifies the height of the menu content. Update this value when header and/or footer elements are intended to be fixed. |
|
|
6133
|
+
| `--pf-c-menu__content--Height: {height}` | `.pf-c-menu` | Modifies the height of the drilldown menu content. The default value is `auto`. |
|
|
6134
|
+
| `--pf-c-menu--m-flyout__menu--top-offset` | `.pf-c-menu` | Modifies the menu to allow for an offset to the top positioning. |
|
|
6135
|
+
| `--pf-c-menu--m-flyout__menu--left-offset` | `.pf-c-menu` | Modifies the menu to allow for an offset to the left positioning. |
|
|
6136
|
+
| `--pf-c-menu--m-flyout__menu--m-left--right-offset` | `.pf-c-menu.pf-m-flyout > .pf-c-menu` | Modifies the menu to allow for an offset to the right positioning. |
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
id: 'Menu toggle'
|
|
3
3
|
section: components
|
|
4
|
+
subsection: menus
|
|
4
5
|
cssPrefix: pf-c-menu-toggle
|
|
5
6
|
---import './MenuToggle.css'
|
|
6
7
|
|
|
@@ -273,10 +274,10 @@ cssPrefix: pf-c-menu-toggle
|
|
|
273
274
|
<input
|
|
274
275
|
class="pf-c-check__input"
|
|
275
276
|
type="checkbox"
|
|
277
|
+
disabled
|
|
276
278
|
id="split-button-checkbox-disabled-example-input"
|
|
277
279
|
name="split-button-checkbox-disabled-example-input"
|
|
278
280
|
aria-label="Standalone input"
|
|
279
|
-
disabled
|
|
280
281
|
/>
|
|
281
282
|
</label>
|
|
282
283
|
<button
|
|
@@ -358,9 +359,9 @@ cssPrefix: pf-c-menu-toggle
|
|
|
358
359
|
<input
|
|
359
360
|
class="pf-c-check__input"
|
|
360
361
|
type="checkbox"
|
|
362
|
+
disabled
|
|
361
363
|
id="split-button-checkbox-with-toggle-text-disabled-example-input"
|
|
362
364
|
name="split-button-checkbox-with-toggle-text-disabled-example-input"
|
|
363
|
-
disabled
|
|
364
365
|
/>
|
|
365
366
|
<span class="pf-c-check__label pf-m-disabled">10 selected</span>
|
|
366
367
|
</label>
|
|
@@ -449,9 +450,9 @@ cssPrefix: pf-c-menu-toggle
|
|
|
449
450
|
<input
|
|
450
451
|
class="pf-c-check__input"
|
|
451
452
|
type="checkbox"
|
|
453
|
+
disabled
|
|
452
454
|
id="split-button-checkbox-primary-disabled-example-input"
|
|
453
455
|
name="split-button-checkbox-primary-disabled-example-input"
|
|
454
|
-
disabled
|
|
455
456
|
/>
|
|
456
457
|
<span class="pf-c-check__label pf-m-disabled">10 selected</span>
|
|
457
458
|
</label>
|
|
@@ -537,9 +538,9 @@ cssPrefix: pf-c-menu-toggle
|
|
|
537
538
|
<input
|
|
538
539
|
class="pf-c-check__input"
|
|
539
540
|
type="checkbox"
|
|
541
|
+
disabled
|
|
540
542
|
id="split-button-checkbox-secondary-disabled-example-input"
|
|
541
543
|
name="split-button-checkbox-secondary-disabled-example-input"
|
|
542
|
-
disabled
|
|
543
544
|
/>
|
|
544
545
|
<span class="pf-c-check__label pf-m-disabled">10 selected</span>
|
|
545
546
|
</label>
|
|
@@ -958,30 +959,30 @@ cssPrefix: pf-c-menu-toggle
|
|
|
958
959
|
|
|
959
960
|
### Accessibility
|
|
960
961
|
|
|
961
|
-
| Class
|
|
962
|
-
|
|
|
963
|
-
| `aria-expanded="true"`
|
|
964
|
-
| `aria-expanded="false"`
|
|
965
|
-
| `aria-label="Descriptive text"` | `.pf-c-menu-toggle.pf-m-plain`
|
|
966
|
-
| `disabled`
|
|
962
|
+
| Class | Applied to | Outcome |
|
|
963
|
+
| -- | -- | -- |
|
|
964
|
+
| `aria-expanded="true"` | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is in the expanded state. |
|
|
965
|
+
| `aria-expanded="false"` | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is in the collapsed state. |
|
|
966
|
+
| `aria-label="Descriptive text"` | `.pf-c-menu-toggle.pf-m-plain` | Gives the plain menu toggle component an accessible label. |
|
|
967
|
+
| `disabled` | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is disabled. |
|
|
967
968
|
|
|
968
969
|
### Usage
|
|
969
970
|
|
|
970
|
-
| Class
|
|
971
|
-
|
|
|
972
|
-
| `.pf-c-menu-toggle`
|
|
973
|
-
| `.pf-c-menu-toggle__icon`
|
|
974
|
-
| `.pf-c-menu-toggle__text`
|
|
975
|
-
| `.pf-c-menu-toggle__count`
|
|
976
|
-
| `.pf-c-menu-toggle__controls`
|
|
977
|
-
| `.pf-c-menu-toggle__toggle-icon` | `<span>`
|
|
978
|
-
| `.pf-c-menu-toggle__button`
|
|
979
|
-
| `.pf-m-split-button`
|
|
980
|
-
| `.pf-m-action`
|
|
981
|
-
| `.pf-m-disabled`
|
|
982
|
-
| `.pf-m-primary`
|
|
983
|
-
| `.pf-m-secondary`
|
|
984
|
-
| `.pf-m-text`
|
|
985
|
-
| `.pf-m-plain`
|
|
986
|
-
| `.pf-m-expanded`
|
|
987
|
-
| `.pf-m-full-height`
|
|
971
|
+
| Class | Applied | Outcome |
|
|
972
|
+
| -- | -- | -- |
|
|
973
|
+
| `.pf-c-menu-toggle` | `<button>` | Initiates the menu toggle component. |
|
|
974
|
+
| `.pf-c-menu-toggle__icon` | `<span>` | Defines the menu toggle component icon/image. |
|
|
975
|
+
| `.pf-c-menu-toggle__text` | `<span>` | Defines the menu toggle component text. |
|
|
976
|
+
| `.pf-c-menu-toggle__count` | `<span>` | Defines the menu toggle component count. |
|
|
977
|
+
| `.pf-c-menu-toggle__controls` | `<span>` | Defines the menu toggle component controls. |
|
|
978
|
+
| `.pf-c-menu-toggle__toggle-icon` | `<span>` | Defines the menu toggle component toggle/arrow icon. |
|
|
979
|
+
| `.pf-c-menu-toggle__button` | `<button>` | Initiates the menu toggle button. |
|
|
980
|
+
| `.pf-m-split-button` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the split button variation. |
|
|
981
|
+
| `.pf-m-action` | `.pf-c-menu-toggle.pf-m-split-button` | Modifies the menu toggle component for the action, split button variation. |
|
|
982
|
+
| `.pf-m-disabled` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the disabled variation. |
|
|
983
|
+
| `.pf-m-primary` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the primary variation. |
|
|
984
|
+
| `.pf-m-secondary` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the secondary variation. |
|
|
985
|
+
| `.pf-m-text` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the text variation. |
|
|
986
|
+
| `.pf-m-plain` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the plain variation. |
|
|
987
|
+
| `.pf-m-expanded` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
|
|
988
|
+
| `.pf-m-full-height` | `.pf-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |
|