@patternfly/patternfly 5.0.0-alpha.13 → 5.0.0-alpha.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/pficon/pficon.woff +0 -0
- package/assets/pficon/pficon.woff2 +0 -0
- package/components/Accordion/accordion.css +2 -0
- package/components/Accordion/accordion.scss +2 -0
- package/components/AppLauncher/app-launcher.css +2 -0
- package/components/AppLauncher/app-launcher.scss +2 -0
- package/components/Breadcrumb/breadcrumb.css +2 -0
- package/components/Breadcrumb/breadcrumb.scss +2 -0
- package/components/ContextSelector/context-selector.css +5 -1
- package/components/ContextSelector/context-selector.scss +6 -2
- package/components/DataList/data-list.css +2 -1
- package/components/DataList/data-list.scss +2 -1
- package/components/Drawer/drawer.css +13 -13
- package/components/Dropdown/dropdown.css +12 -10
- package/components/Dropdown/dropdown.scss +2 -0
- package/components/ExpandableSection/expandable-section.css +2 -0
- package/components/ExpandableSection/expandable-section.scss +2 -0
- package/components/Label/label.css +2 -0
- package/components/Label/label.scss +2 -0
- package/components/Login/login.css +1 -1
- package/components/Menu/menu.css +2 -0
- package/components/Menu/menu.scss +2 -0
- package/components/MenuToggle/menu-toggle.css +2 -0
- package/components/MenuToggle/menu-toggle.scss +2 -0
- package/components/Page/page.css +60 -60
- package/components/Pagination/pagination.css +2 -2
- package/components/SearchInput/search-input.css +2 -0
- package/components/SearchInput/search-input.scss +2 -0
- package/components/Table/table-grid.css +28 -28
- package/components/Table/table-tree-view.css +4 -4
- package/components/TextInputGroup/text-input-group.css +4 -2
- package/components/TextInputGroup/text-input-group.scss +4 -3
- package/components/Toolbar/toolbar.css +35 -35
- package/components/TreeView/tree-view.css +7 -15
- package/components/TreeView/tree-view.scss +7 -18
- package/components/Wizard/wizard.css +2 -0
- package/components/Wizard/wizard.scss +2 -0
- 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 +27 -27
- package/docs/components/Check/examples/Check.md +13 -13
- package/docs/components/Chip/examples/Chip.md +13 -13
- package/docs/components/ChipGroup/examples/ChipGroup.md +15 -15
- 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 +56 -33
- package/docs/components/Content/examples/Content.md +10 -10
- 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 +83 -83
- 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 +50 -50
- package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
- package/docs/components/EmptyState/examples/EmptyState.md +19 -19
- 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 +24 -24
- 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 +31 -31
- package/docs/components/LabelGroup/examples/LabelGroup.md +22 -22
- package/docs/components/List/examples/List.md +18 -18
- package/docs/components/LogViewer/examples/LogViewer.md +69 -69
- 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 +81 -79
- package/docs/components/MenuToggle/examples/MenuToggle.md +24 -24
- package/docs/components/ModalBox/examples/ModalBox.md +35 -35
- 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 +34 -34
- package/docs/components/Progress/examples/Progress.md +31 -31
- 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 +143 -143
- package/docs/components/Sidebar/examples/Sidebar.md +14 -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.md +155 -155
- package/docs/components/Tabs/examples/Tabs.md +47 -47
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +19 -19
- 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 +113 -113
- 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 +59 -59
- 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 -8
- package/docs/demos/Card/examples/Card.md +7 -7
- package/docs/demos/CardView/examples/CardView.md +7 -7
- package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
- package/docs/demos/Dashboard/examples/Dashboard.md +9 -5
- package/docs/demos/DataList/examples/DataList.md +22 -22
- package/docs/demos/DescriptionList/examples/DescriptionList.md +12 -12
- package/docs/demos/Drawer/examples/Drawer.md +20 -20
- package/docs/demos/HelperText/examples/HelperText.md +8 -8
- package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
- package/docs/demos/Masthead/examples/Masthead.md +29 -29
- package/docs/demos/Modal/examples/Modal.md +24 -24
- 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 +36 -36
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +32 -32
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +36 -36
- package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
- package/docs/demos/Table/examples/Table.md +78 -78
- package/docs/demos/Tabs/examples/Tabs.md +25 -25
- package/docs/demos/Toolbar/examples/Toolbar.md +16 -16
- package/docs/demos/Wizard/examples/Wizard.md +54 -54
- 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} +1 -1
- package/layouts/Grid/grid.css +5 -5
- package/package.json +56 -61
- package/patternfly-no-reset.css +196 -177
- package/patternfly.css +196 -177
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -4140,7 +4140,7 @@ cssPrefix: pf-c-menu
|
|
|
4140
4140
|
>
|
|
4141
4141
|
<div class="pf-c-menu__breadcrumb">
|
|
4142
4142
|
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
4143
|
-
<ol class="pf-c-breadcrumb__list">
|
|
4143
|
+
<ol class="pf-c-breadcrumb__list" role="list">
|
|
4144
4144
|
<li class="pf-c-breadcrumb__item">
|
|
4145
4145
|
<span class="pf-c-breadcrumb__item-divider">
|
|
4146
4146
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
@@ -4334,7 +4334,7 @@ cssPrefix: pf-c-menu
|
|
|
4334
4334
|
>
|
|
4335
4335
|
<div class="pf-c-menu__breadcrumb">
|
|
4336
4336
|
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
4337
|
-
<ol class="pf-c-breadcrumb__list">
|
|
4337
|
+
<ol class="pf-c-breadcrumb__list" role="list">
|
|
4338
4338
|
<li class="pf-c-breadcrumb__item">
|
|
4339
4339
|
<span class="pf-c-breadcrumb__item-divider">
|
|
4340
4340
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
@@ -4564,7 +4564,7 @@ cssPrefix: pf-c-menu
|
|
|
4564
4564
|
>
|
|
4565
4565
|
<div class="pf-c-menu__breadcrumb">
|
|
4566
4566
|
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
4567
|
-
<ol class="pf-c-breadcrumb__list">
|
|
4567
|
+
<ol class="pf-c-breadcrumb__list" role="list">
|
|
4568
4568
|
<li class="pf-c-breadcrumb__item">
|
|
4569
4569
|
<span class="pf-c-breadcrumb__item-divider">
|
|
4570
4570
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
@@ -4932,17 +4932,18 @@ cssPrefix: pf-c-menu
|
|
|
4932
4932
|
<div class="pf-c-menu pf-m-scrollable">
|
|
4933
4933
|
<div class="pf-c-menu__search">
|
|
4934
4934
|
<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-
|
|
4935
|
+
<div class="pf-c-text-input-group">
|
|
4936
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
4937
|
+
<span class="pf-c-text-input-group__text">
|
|
4938
|
+
<span class="pf-c-text-input-group__icon">
|
|
4939
|
+
<i class="fas fa-fw fa-search"></i>
|
|
4940
4940
|
</span>
|
|
4941
4941
|
<input
|
|
4942
|
-
class="pf-c-
|
|
4943
|
-
type="
|
|
4942
|
+
class="pf-c-text-input-group__text-input"
|
|
4943
|
+
type="search"
|
|
4944
4944
|
placeholder="Search"
|
|
4945
|
-
|
|
4945
|
+
value
|
|
4946
|
+
aria-label="Filter menu items"
|
|
4946
4947
|
/>
|
|
4947
4948
|
</span>
|
|
4948
4949
|
</div>
|
|
@@ -5051,17 +5052,18 @@ cssPrefix: pf-c-menu
|
|
|
5051
5052
|
<div class="pf-c-menu">
|
|
5052
5053
|
<div class="pf-c-menu__search">
|
|
5053
5054
|
<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-
|
|
5055
|
+
<div class="pf-c-text-input-group">
|
|
5056
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
5057
|
+
<span class="pf-c-text-input-group__text">
|
|
5058
|
+
<span class="pf-c-text-input-group__icon">
|
|
5059
|
+
<i class="fas fa-fw fa-search"></i>
|
|
5059
5060
|
</span>
|
|
5060
5061
|
<input
|
|
5061
|
-
class="pf-c-
|
|
5062
|
-
type="
|
|
5062
|
+
class="pf-c-text-input-group__text-input"
|
|
5063
|
+
type="search"
|
|
5063
5064
|
placeholder="Search"
|
|
5064
|
-
|
|
5065
|
+
value
|
|
5066
|
+
aria-label="Filter menu items"
|
|
5065
5067
|
/>
|
|
5066
5068
|
</span>
|
|
5067
5069
|
</div>
|
|
@@ -6063,66 +6065,66 @@ cssPrefix: pf-c-menu
|
|
|
6063
6065
|
|
|
6064
6066
|
### Accessibility
|
|
6065
6067
|
|
|
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"`
|
|
6068
|
+
| Attribute | Applied | Outcome |
|
|
6069
|
+
| -- | -- | -- |
|
|
6070
|
+
| `role="menu"` | `.pf-c-menu__list` | Declares `.pf-c-menu__list` as a menu. |
|
|
6071
|
+
| `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. |
|
|
6072
|
+
| `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. |
|
|
6073
|
+
| `role="none"` | `.pf-c-menu__list-item` | Removes semantic meaning from `.pf-c-menu__list-item`. |
|
|
6074
|
+
| `aria-disabled="true"` | `a.pf-c-menu__item` | When the menu item uses a link element, removes it from keyboard focus. |
|
|
6075
|
+
| `tabindex="-1"` | `a.pf-c-menu__item` | When the menu item uses a link element, removes it from keyboard focus. |
|
|
6076
|
+
| `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. |
|
|
6077
|
+
| `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. |
|
|
6078
|
+
| `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
6079
|
|
|
6078
6080
|
### Usage
|
|
6079
6081
|
|
|
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`
|
|
6082
|
+
| Class | Applied to | Outcome |
|
|
6083
|
+
| -- | -- | -- |
|
|
6084
|
+
| `.pf-c-menu` | `<div>` | Initiates the menu. **Required** |
|
|
6085
|
+
| `.pf-c-menu__header` | `<div>` | Initiates the menu header container. |
|
|
6086
|
+
| `.pf-c-menu__search` | `<div>` | Initiates the menu search container. Use for filtering. |
|
|
6087
|
+
| `.pf-c-menu__search-input` | `<div>` | Initiates the menu search input container. |
|
|
6088
|
+
| `.pf-c-menu__content` | `<div>` | Initiates the menu content. Use for lists. **Required** |
|
|
6089
|
+
| `.pf-c-menu__list` | `<ul>` | Initiates the menu list. **Required** |
|
|
6090
|
+
| `.pf-c-menu__list-item` | `<li>` | Initiates the menu list item. **Required** |
|
|
6091
|
+
| `.pf-c-menu__item` | `<button>`, `<a>`, `<div>`, `<label>` | Initiates the menu item. **Required** |
|
|
6092
|
+
| `.pf-c-menu__item-main` | `<span>` | Initiates the menu item main container. **Required** |
|
|
6093
|
+
| `.pf-c-menu__item-text` | `<span>` | Initiates the menu item text. **Required** |
|
|
6094
|
+
| `.pf-c-menu__item-check` | `<span>` | Initiates a menu label. |
|
|
6095
|
+
| `.pf-c-menu__item-description` | `<span>` | Initiates the menu item description. |
|
|
6096
|
+
| `.pf-c-menu__item-group` | `<section>` | Initiates the menu item group. |
|
|
6097
|
+
| `.pf-c-menu__item-group-title` | `<h1>` | Initiates the menu item group title. |
|
|
6098
|
+
| `.pf-c-menu__item-icon` | `<span>` | Initiates the menu item icon. |
|
|
6099
|
+
| `.pf-c-menu__item-toggle-icon` | `<span>` | Initiates the menu item toggle icon. |
|
|
6100
|
+
| `.pf-c-menu__item-select-icon` | `<span>` | Initiates the menu item select icon. |
|
|
6101
|
+
| `.pf-c-menu__item-action` | `<button>` | Initiates the menu item action. |
|
|
6102
|
+
| `.pf-c-menu__item-action-icon` | `<span>` | Initiates the menu item action icon. |
|
|
6103
|
+
| `.pf-c-menu__item-external-icon` | `<span>` | Initiates the menu item external icon. |
|
|
6104
|
+
| `.pf-c-menu__footer` | `<div>` | Initiates the menu footer. |
|
|
6105
|
+
| `.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). |
|
|
6106
|
+
| `.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). |
|
|
6107
|
+
| `.pf-m-favorite` | `.pf-c-menu__item-action` | Modifies the menu item action to handle the favorite icon. |
|
|
6108
|
+
| `.pf-m-favorited` | `.pf-c-menu__item-action.pf-m-favorite` | Modifies the menu item action icon to be favorited. |
|
|
6109
|
+
| `.pf-m-selected` | `.pf-c-menu__item` | Modifies the menu item to be selected. |
|
|
6110
|
+
| `.pf-m-drill-up` | `.pf-c-menu__list-item` | Flags the menu item as a drill up button. |
|
|
6111
|
+
| `.pf-m-flyout` | `.pf-c-menu` | Modifies the menu so that all nested `.pf-c-menu` elements "flyout". |
|
|
6112
|
+
| `.pf-m-nav` | `.pf-c-menu` | Modifies the menu for nav variant. |
|
|
6113
|
+
| `.pf-m-top` | `.pf-c-menu` | Modifies a flyout menu to expand to the top. |
|
|
6114
|
+
| `.pf-m-left` | `.pf-c-menu` | Modifies a flyout menu to expand to the left. |
|
|
6115
|
+
| `.pf-m-plain` | `.pf-c-menu` | Modifies the menu component for use in the page instead of as a dropdown. |
|
|
6116
|
+
| `.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`. |
|
|
6117
|
+
| `.pf-m-current` | `.pf-c-menu__list-item` | Modifies a list item for current styles. |
|
|
6118
|
+
| `.pf-m-load` | `.pf-c-menu__list-item` | Modifies a list item for "load more" styles. |
|
|
6119
|
+
| `.pf-m-loading` | `.pf-c-menu__list-item` | Modifies a list item for loading styles. |
|
|
6120
|
+
| `.pf-m-drilldown` | `.pf-c-menu` | Modifies the menu so that all nested `.pf-c-menu` elements "drill down". |
|
|
6121
|
+
| `.pf-m-current-path` | `.pf-c-menu.pf-m-drilldown .pf-c-menu__list-item` | Modifies the menu list item for current path state. |
|
|
6122
|
+
| `.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. |
|
|
6123
|
+
| `.pf-m-static` | `.pf-c-menu.pf-m-drilldown .pf-c-menu` | Modifies the menu list for drilled static state. |
|
|
6124
|
+
| `.pf-m-danger` | `pf-c-menu__item-text` | Modifies a list item for danger styles. |
|
|
6125
|
+
| `--pf-c-menu--Width: {width}` | `.pf-c-menu` | Modifies the width of the menu. The default value is `auto`. |
|
|
6126
|
+
| `--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. |
|
|
6127
|
+
| `--pf-c-menu__content--Height: {height}` | `.pf-c-menu` | Modifies the height of the drilldown menu content. The default value is `auto`. |
|
|
6128
|
+
| `--pf-c-menu--m-flyout__menu--top-offset` | `.pf-c-menu` | Modifies the menu to allow for an offset to the top positioning. |
|
|
6129
|
+
| `--pf-c-menu--m-flyout__menu--left-offset` | `.pf-c-menu` | Modifies the menu to allow for an offset to the left positioning. |
|
|
6130
|
+
| `--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. |
|
|
@@ -958,30 +958,30 @@ cssPrefix: pf-c-menu-toggle
|
|
|
958
958
|
|
|
959
959
|
### Accessibility
|
|
960
960
|
|
|
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`
|
|
961
|
+
| Class | Applied to | Outcome |
|
|
962
|
+
| -- | -- | -- |
|
|
963
|
+
| `aria-expanded="true"` | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is in the expanded state. |
|
|
964
|
+
| `aria-expanded="false"` | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is in the collapsed state. |
|
|
965
|
+
| `aria-label="Descriptive text"` | `.pf-c-menu-toggle.pf-m-plain` | Gives the plain menu toggle component an accessible label. |
|
|
966
|
+
| `disabled` | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is disabled. |
|
|
967
967
|
|
|
968
968
|
### Usage
|
|
969
969
|
|
|
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`
|
|
970
|
+
| Class | Applied | Outcome |
|
|
971
|
+
| -- | -- | -- |
|
|
972
|
+
| `.pf-c-menu-toggle` | `<button>` | Initiates the menu toggle component. |
|
|
973
|
+
| `.pf-c-menu-toggle__icon` | `<span>` | Defines the menu toggle component icon/image. |
|
|
974
|
+
| `.pf-c-menu-toggle__text` | `<span>` | Defines the menu toggle component text. |
|
|
975
|
+
| `.pf-c-menu-toggle__count` | `<span>` | Defines the menu toggle component count. |
|
|
976
|
+
| `.pf-c-menu-toggle__controls` | `<span>` | Defines the menu toggle component controls. |
|
|
977
|
+
| `.pf-c-menu-toggle__toggle-icon` | `<span>` | Defines the menu toggle component toggle/arrow icon. |
|
|
978
|
+
| `.pf-c-menu-toggle__button` | `<button>` | Initiates the menu toggle button. |
|
|
979
|
+
| `.pf-m-split-button` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the split button variation. |
|
|
980
|
+
| `.pf-m-action` | `.pf-c-menu-toggle.pf-m-split-button` | Modifies the menu toggle component for the action, split button variation. |
|
|
981
|
+
| `.pf-m-disabled` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the disabled variation. |
|
|
982
|
+
| `.pf-m-primary` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the primary variation. |
|
|
983
|
+
| `.pf-m-secondary` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the secondary variation. |
|
|
984
|
+
| `.pf-m-text` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the text variation. |
|
|
985
|
+
| `.pf-m-plain` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the plain variation. |
|
|
986
|
+
| `.pf-m-expanded` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
|
|
987
|
+
| `.pf-m-full-height` | `.pf-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |
|
|
@@ -458,41 +458,41 @@ A modal box is a generic rectangular container that can be used to build modals.
|
|
|
458
458
|
|
|
459
459
|
### Accessibility
|
|
460
460
|
|
|
461
|
-
| Attribute
|
|
462
|
-
|
|
|
463
|
-
| `role="dialog"`
|
|
464
|
-
| `aria-labelledby="[id value of .pf-c-modal-box__title or custom modal title]"` | `.pf-c-modal-box`
|
|
465
|
-
| `aria-label="[title of modal]"`
|
|
466
|
-
| `aria-describedby="[id value of applicable content]"`
|
|
467
|
-
| `aria-modal="true"`
|
|
468
|
-
| `aria-label="Close"`
|
|
469
|
-
| `aria-hidden="true"`
|
|
470
|
-
| `form="[id of form in modal body]"`
|
|
471
|
-
| `tabindex="0"`
|
|
461
|
+
| Attribute | Applies to | Outcome |
|
|
462
|
+
| -- | -- | -- |
|
|
463
|
+
| `role="dialog"` | `.pf-c-modal-box` | Identifies the element that serves as the modal container. **Required** |
|
|
464
|
+
| `aria-labelledby="[id value of .pf-c-modal-box__title or custom modal title]"` | `.pf-c-modal-box` | Gives the modal an accessible name by referring to the element that provides the dialog title. **Required when .pf-c-title is present** |
|
|
465
|
+
| `aria-label="[title of modal]"` | `.pf-c-modal-box` | Gives the modal an accessible name. **Required when `.pf-c-modal-box__title` is *not* present** |
|
|
466
|
+
| `aria-describedby="[id value of applicable content]"` | `.pf-c-modal-box` | Gives the modal an accessible description by referring to the modal content that describes the primary message or purpose of the dialog. Not used if there is no static text that describes the modal. |
|
|
467
|
+
| `aria-modal="true"` | `.pf-c-modal-box` | Tells assistive technologies that the windows underneath the current modal are not available for interaction. **Required**|
|
|
468
|
+
| `aria-label="Close"` | `.pf-c-modal-box__close .pf-c-button` | Provides an accessible name for the close button as it uses an icon instead of text. **Required**|
|
|
469
|
+
| `aria-hidden="true"` | Parent element containing the page contents when modal is open | Hides main contents of the page from screen readers. The element with `.pf-c-modal-box` must not be a descendent of the element with `aria-hidden="true"`. For more info see [trapping focus](/accessibility/product-development-guide#trapping-focus). **Required** |
|
|
470
|
+
| `form="[id of form in modal body]"` | `.pf-c-modal-box__footer .pf-c-button` | Associates a submit button in the modal footer with a form in the modal body. For use when the submit button is outside of the `<form>` that the button submits. |
|
|
471
|
+
| `tabindex="0"` | `.pf-c-modal-box__body` | If a modal box body has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the body must include either a focusable element within the scrollable region or the body itself must be focusable by adding `tabindex="0"`. |
|
|
472
472
|
|
|
473
473
|
### Usage
|
|
474
474
|
|
|
475
|
-
| Class
|
|
476
|
-
|
|
|
477
|
-
| `.pf-c-modal-box`
|
|
478
|
-
| `.pf-c-button.pf-m-plain`
|
|
479
|
-
| `.pf-c-modal-box__header`
|
|
480
|
-
| `.pf-c-modal-box__header-main` | `<div>`
|
|
481
|
-
| `.pf-c-modal-box__header-help` | `<div>`
|
|
482
|
-
| `.pf-c-modal-box__title`
|
|
483
|
-
| `.pf-c-modal-box__title-icon`
|
|
484
|
-
| `.pf-c-modal-box__title-text`
|
|
485
|
-
| `.pf-c-modal-box__description` | `<div>`
|
|
486
|
-
| `.pf-c-modal-box__body`
|
|
487
|
-
| `.pf-c-modal-box__footer`
|
|
488
|
-
| `.pf-m-sm`
|
|
489
|
-
| `.pf-m-md`
|
|
490
|
-
| `.pf-m-lg`
|
|
491
|
-
| `.pf-m-align-top`
|
|
492
|
-
| `.pf-m-icon`
|
|
493
|
-
| `.pf-m-default`
|
|
494
|
-
| `.pf-m-info`
|
|
495
|
-
| `.pf-m-success`
|
|
496
|
-
| `.pf-m-warning`
|
|
497
|
-
| `.pf-m-danger`
|
|
498
|
-
| `.pf-m-help`
|
|
475
|
+
| Class | Applied | Outcome |
|
|
476
|
+
| -- | -- | -- |
|
|
477
|
+
| `.pf-c-modal-box` | `<div>` | Initiates a modal box. **Required** |
|
|
478
|
+
| `.pf-c-button.pf-m-plain` | `<button>` | Initiates a modal box close button. |
|
|
479
|
+
| `.pf-c-modal-box__header` | `<header>` | Initiates a modal box header. **Required** if using a `.pf-c-modal-box__title`. |
|
|
480
|
+
| `.pf-c-modal-box__header-main` | `<div>` | Initiates a modal box header main container. **Required** when `pf-c-modal-box__header-help` is used. |
|
|
481
|
+
| `.pf-c-modal-box__header-help` | `<div>` | Initiates the help button container in the modal box header actions. |
|
|
482
|
+
| `.pf-c-modal-box__title` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`, `<div>` | Initiates a modal box title. **Required** if using a modal description. |
|
|
483
|
+
| `.pf-c-modal-box__title-icon` | `<span>` | Initiates a container for the modal box title icon. |
|
|
484
|
+
| `.pf-c-modal-box__title-text` | `<span>` | Initiates a container for the modal box title text. |
|
|
485
|
+
| `.pf-c-modal-box__description` | `<div>` | Initiates a modal box description. |
|
|
486
|
+
| `.pf-c-modal-box__body` | `<div>` | Initiates a modal box body. |
|
|
487
|
+
| `.pf-c-modal-box__footer` | `<footer>` | Initiates a modal box footer. |
|
|
488
|
+
| `.pf-m-sm` | `.pf-c-modal-box` | Modifies for a small modal box width. |
|
|
489
|
+
| `.pf-m-md` | `.pf-c-modal-box` | Modifies for a medium modal box width. |
|
|
490
|
+
| `.pf-m-lg` | `.pf-c-modal-box` | Modifies for a large modal box width. |
|
|
491
|
+
| `.pf-m-align-top` | `.pf-c-modal-box` | Modifies for top alignment. |
|
|
492
|
+
| `.pf-m-icon` | `.pf-c-modal-box__title` | Modifies the title layout to accommodate an icon. |
|
|
493
|
+
| `.pf-m-default` | `.pf-c-modal-box` | Modifies for the default alert state. |
|
|
494
|
+
| `.pf-m-info` | `.pf-c-modal-box` | Modifies for the info alert state. |
|
|
495
|
+
| `.pf-m-success` | `.pf-c-modal-box` | Modifies for the success alert state. |
|
|
496
|
+
| `.pf-m-warning` | `.pf-c-modal-box` | Modifies for the warning alert state. |
|
|
497
|
+
| `.pf-m-danger` | `.pf-c-modal-box` | Modifies for the danger alert state. |
|
|
498
|
+
| `.pf-m-help` | `.pf-c-modal-box__header` | Modifies the modal box header to support the help action |
|
|
@@ -147,7 +147,7 @@ cssPrefix: pf-c-multiple-file-upload
|
|
|
147
147
|
</span>
|
|
148
148
|
</button>
|
|
149
149
|
<div class="pf-c-expandable-section__content" hidden>
|
|
150
|
-
<ul class="pf-c-multiple-file-upload__status-list">
|
|
150
|
+
<ul class="pf-c-multiple-file-upload__status-list" role="list">
|
|
151
151
|
<li class="pf-c-multiple-file-upload__status-item">
|
|
152
152
|
<div class="pf-c-multiple-file-upload__status-item-icon">
|
|
153
153
|
<i class="fas fa-file" aria-hidden="true"></i>
|
|
@@ -340,7 +340,7 @@ cssPrefix: pf-c-multiple-file-upload
|
|
|
340
340
|
</span>
|
|
341
341
|
</button>
|
|
342
342
|
<div class="pf-c-expandable-section__content">
|
|
343
|
-
<ul class="pf-c-multiple-file-upload__status-list">
|
|
343
|
+
<ul class="pf-c-multiple-file-upload__status-list" role="list">
|
|
344
344
|
<li class="pf-c-multiple-file-upload__status-item">
|
|
345
345
|
<div class="pf-c-multiple-file-upload__status-item-icon">
|
|
346
346
|
<i class="fas fa-file" aria-hidden="true"></i>
|
|
@@ -533,7 +533,7 @@ cssPrefix: pf-c-multiple-file-upload
|
|
|
533
533
|
</span>
|
|
534
534
|
</button>
|
|
535
535
|
<div class="pf-c-expandable-section__content">
|
|
536
|
-
<ul class="pf-c-multiple-file-upload__status-list">
|
|
536
|
+
<ul class="pf-c-multiple-file-upload__status-list" role="list">
|
|
537
537
|
<li class="pf-c-multiple-file-upload__status-item">
|
|
538
538
|
<div class="pf-c-multiple-file-upload__status-item-icon">
|
|
539
539
|
<i class="fas fa-file" aria-hidden="true"></i>
|
|
@@ -687,25 +687,25 @@ cssPrefix: pf-c-multiple-file-upload
|
|
|
687
687
|
|
|
688
688
|
### Usage
|
|
689
689
|
|
|
690
|
-
| Class
|
|
691
|
-
|
|
|
692
|
-
| `.pf-c-multiple-file-upload`
|
|
693
|
-
| `.pf-c-multiple-file-upload__main`
|
|
694
|
-
| `.pf-c-multiple-file-upload__title`
|
|
695
|
-
| `.pf-c-multiple-file-upload__title-icon`
|
|
696
|
-
| `.pf-c-multiple-file-upload__title-text`
|
|
697
|
-
| `.pf-c-multiple-file-upload__title-text-separator`
|
|
698
|
-
| `.pf-c-multiple-file-upload__upload`
|
|
699
|
-
| `.pf-c-multiple-file-upload__info`
|
|
700
|
-
| `.pf-c-multiple-file-upload__status`
|
|
701
|
-
| `.pf-c-multiple-file-upload__status-progress`
|
|
702
|
-
| `.pf-c-multiple-file-upload__status-progress-icon`
|
|
703
|
-
| `.pf-c-multiple-file-upload__status-progress-text`
|
|
704
|
-
| `.pf-c-multiple-file-upload__status-list`
|
|
705
|
-
| `.pf-c-multiple-file-upload__status-item`
|
|
706
|
-
| `.pf-c-multiple-file-upload__status-item-icon`
|
|
707
|
-
| `.pf-c-multiple-file-upload__status-item-main`
|
|
708
|
-
| `.pf-c-multiple-file-upload__status-item-close`
|
|
709
|
-
| `.pf-c-multiple-file-upload__status-item-progress`
|
|
710
|
-
| `.pf-c-multiple-file-upload__status-item-progress-text` | `<div>` | Defines the status item progress description text.
|
|
711
|
-
| `.pf-c-multiple-file-upload__status-item-progress-size` | `<div>` | Defines the status item progress description size.
|
|
690
|
+
| Class | Applied | Outcome |
|
|
691
|
+
| -- | -- | -- |
|
|
692
|
+
| `.pf-c-multiple-file-upload` | `<div>` | Initiates the multiple file upload component. **Required** |
|
|
693
|
+
| `.pf-c-multiple-file-upload__main` | `<div>` | Defines the main section. |
|
|
694
|
+
| `.pf-c-multiple-file-upload__title` | `<div>` | Defines the title. |
|
|
695
|
+
| `.pf-c-multiple-file-upload__title-icon` | `<div>` | Defines the title icon. |
|
|
696
|
+
| `.pf-c-multiple-file-upload__title-text` | `<div>` | Defines the title text. |
|
|
697
|
+
| `.pf-c-multiple-file-upload__title-text-separator` | `<div>` | Defines the title text separator. |
|
|
698
|
+
| `.pf-c-multiple-file-upload__upload` | `<div>` | Defines the upload button. |
|
|
699
|
+
| `.pf-c-multiple-file-upload__info` | `<div>` | Defines the info section. |
|
|
700
|
+
| `.pf-c-multiple-file-upload__status` | `<div>` | Defines the status section. |
|
|
701
|
+
| `.pf-c-multiple-file-upload__status-progress` | `<div>` | Defines the status toggle progress. |
|
|
702
|
+
| `.pf-c-multiple-file-upload__status-progress-icon` | `<div>` | Defines the status toggle progress icon. |
|
|
703
|
+
| `.pf-c-multiple-file-upload__status-progress-text` | `<div>` | Defines the status toggle progress text. |
|
|
704
|
+
| `.pf-c-multiple-file-upload__status-list` | `<div>` | Defines the status item list. |
|
|
705
|
+
| `.pf-c-multiple-file-upload__status-item` | `<div>` | Defines a status item. |
|
|
706
|
+
| `.pf-c-multiple-file-upload__status-item-icon` | `<div>` | Defines the status item icon. |
|
|
707
|
+
| `.pf-c-multiple-file-upload__status-item-main` | `<div>` | Defines the status item main progress section. |
|
|
708
|
+
| `.pf-c-multiple-file-upload__status-item-close` | `<div>` | Defines the status item close button. |
|
|
709
|
+
| `.pf-c-multiple-file-upload__status-item-progress` | `<div>` | Defines the status item progress description. |
|
|
710
|
+
| `.pf-c-multiple-file-upload__status-item-progress-text` | `<div>` | Defines the status item progress description text. |
|
|
711
|
+
| `.pf-c-multiple-file-upload__status-item-progress-size` | `<div>` | Defines the status item progress description size. |
|