@patternfly/patternfly 5.0.0-alpha.14 → 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 -0
- package/components/DataList/data-list.scss +2 -0
- 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 +10 -10
- package/docs/components/AppLauncher/examples/application-launcher.md +34 -34
- 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 +15 -15
- 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 +80 -74
- 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 +9 -9
- 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 +11 -11
- 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 +21 -21
- 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 +6 -6
- package/docs/components/LogViewer/examples/LogViewer.md +69 -69
- package/docs/components/Login/examples/Login.md +22 -22
- package/docs/components/Masthead/examples/masthead.md +9 -9
- package/docs/components/Menu/examples/Menu.md +78 -76
- 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 +22 -22
- package/docs/components/Nav/examples/Navigation.md +36 -36
- package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
- package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +39 -39
- 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 +24 -24
- 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 +11 -11
- 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 +47 -47
- package/docs/demos/DataList/examples/DataList.md +4 -4
- package/docs/demos/Masthead/examples/Masthead.md +6 -6
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +6 -6
- package/docs/demos/Table/examples/Table.md +22 -22
- package/docs/demos/Toolbar/examples/Toolbar.md +8 -8
- 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 -176
- package/patternfly.css +196 -176
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -200,13 +200,13 @@ cssPrefix: pf-c-masthead
|
|
|
200
200
|
|
|
201
201
|
### Usage
|
|
202
202
|
|
|
203
|
-
| Class
|
|
204
|
-
|
|
|
205
|
-
| `.pf-c-masthead`
|
|
206
|
-
| `.pf-c-masthead__main`
|
|
207
|
-
| `.pf-c-masthead__toggle`
|
|
208
|
-
| `.pf-c-masthead__brand`
|
|
209
|
-
| `.pf-c-masthead__content`
|
|
203
|
+
| Class | Applied to | Outcome |
|
|
204
|
+
| -- | -- | -- |
|
|
205
|
+
| `.pf-c-masthead` | `<header>` | Initiates the masthead component. **Required** |
|
|
206
|
+
| `.pf-c-masthead__main` | `<div>` | Initiates the masthead main component. **Required** |
|
|
207
|
+
| `.pf-c-masthead__toggle` | `<span>` | Initiates the masthead toggle component. |
|
|
208
|
+
| `.pf-c-masthead__brand` | `<a>, <div>` | Initiates the masthead content component. |
|
|
209
|
+
| `.pf-c-masthead__content` | `<div>` | Initiates the masthead content component. |
|
|
210
210
|
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-masthead` | Modifies masthead horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
211
|
-
| `.pf-m-light`
|
|
212
|
-
| `.pf-m-light-200`
|
|
211
|
+
| `.pf-m-light` | `.pf-c-masthead` | Modifies a masthead component to have a light theme with a background color of `--pf-global--BackgroundColor--100`. |
|
|
212
|
+
| `.pf-m-light-200` | `.pf-c-masthead` | Modifies a masthead component to have a light theme with a background color of `--pf-global--BackgroundColor--200`. |
|
|
@@ -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 |
|
|
@@ -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. |
|
|
@@ -2404,45 +2404,45 @@ cssPrefix: pf-c-nav
|
|
|
2404
2404
|
|
|
2405
2405
|
The navigation system relies on several different sub-components:
|
|
2406
2406
|
|
|
2407
|
-
|
|
2407
|
+
* `.pf-c-nav__list` - default navigation list. It is the basis for both default and expandable, vertical navigation.
|
|
2408
2408
|
|
|
2409
2409
|
### Accessibility
|
|
2410
2410
|
|
|
2411
|
-
| Attribute
|
|
2412
|
-
|
|
|
2413
|
-
| `aria-label="[landmark description]"`
|
|
2414
|
-
| `aria-label="[section title]"`
|
|
2415
|
-
| `aria-labelledby="[id value of link describing subnav]"` | `.pf-c-nav__subnav`
|
|
2416
|
-
| `aria-expanded="false"`
|
|
2417
|
-
| `aria-expanded="true"`
|
|
2418
|
-
| `hidden`
|
|
2419
|
-
| `disabled`
|
|
2420
|
-
| `aria-current="page"`
|
|
2421
|
-
| `aria-haspopup="true"`
|
|
2411
|
+
| Attribute | Applied to | Outcome |
|
|
2412
|
+
| -- | -- | -- |
|
|
2413
|
+
| `aria-label="[landmark description]"` | `.pf-c-nav` | Describes `<nav>` landmark. |
|
|
2414
|
+
| `aria-label="[section title]"` | `.pf-c-nav__section` | Describes a nav `<section>`, where a `.pf-c-nav__section-title` is not present. |
|
|
2415
|
+
| `aria-labelledby="[id value of link describing subnav]"` | `.pf-c-nav__subnav` | Gives the subnav `<section>` landmark an accessible name by referring to the element that provides the subnav `<section>` landmark title. |
|
|
2416
|
+
| `aria-expanded="false"` | `.pf-c-nav__link` | Indicates that subnav section is hidden. |
|
|
2417
|
+
| `aria-expanded="true"` | `.pf-c-nav__link` | Indicates that subnav section is visible. |
|
|
2418
|
+
| `hidden` | `.pf-c-nav__subnav` | Indicates that the subnav section is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
|
|
2419
|
+
| `disabled` | `.pf-c-nav__scroll-button` | Indicates that a scroll button is disabled, when at the first or last item of a list. **Required when disabled** |
|
|
2420
|
+
| `aria-current="page"` | `.pf-c-nav__link` | Indicates the current page link. Can only occur once on page. |
|
|
2421
|
+
| `aria-haspopup="true"` | `.pf-c-nav__link` | Declares that a nav item has a submenu. |
|
|
2422
2422
|
|
|
2423
2423
|
### Usage
|
|
2424
2424
|
|
|
2425
|
-
| Class
|
|
2426
|
-
|
|
|
2427
|
-
| `.pf-c-nav`
|
|
2428
|
-
| `.pf-c-nav__subnav`
|
|
2429
|
-
| `.pf-c-nav__list`
|
|
2430
|
-
| `.pf-c-nav__item`
|
|
2431
|
-
| `.pf-c-nav__link`
|
|
2432
|
-
| `.pf-c-nav__section`
|
|
2433
|
-
| `.pf-c-nav__section-title` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` | Initiates a nav section title.
|
|
2434
|
-
| `.pf-c-nav__toggle`
|
|
2435
|
-
| `.pf-c-nav__toggle-icon`
|
|
2436
|
-
| `.pf-c-nav__scroll-button` | `<button>`
|
|
2437
|
-
| `.pf-m-horizontal`
|
|
2438
|
-
| `.pf-m-no-title`
|
|
2439
|
-
| `.pf-m-horizontal-subnav`
|
|
2440
|
-
| `.pf-m-tertiary`
|
|
2441
|
-
| `.pf-m-light`
|
|
2442
|
-
| `.pf-m-flyout`
|
|
2443
|
-
| `.pf-m-scrollable`
|
|
2444
|
-
| `.pf-m-expandable`
|
|
2445
|
-
| `.pf-m-expanded`
|
|
2446
|
-
| `.pf-m-current`
|
|
2447
|
-
| `.pf-m-hover`
|
|
2448
|
-
| `.pf-m-start`
|
|
2425
|
+
| Class | Applied to | Outcome |
|
|
2426
|
+
| -- | -- | -- |
|
|
2427
|
+
| `.pf-c-nav` | `<nav>` | Initiates a primary nav element. |
|
|
2428
|
+
| `.pf-c-nav__subnav` | `<section>` | Initiates a subnav section. |
|
|
2429
|
+
| `.pf-c-nav__list` | `<ul>` | Initiates nav list. |
|
|
2430
|
+
| `.pf-c-nav__item` | `<li>` | Initiates nav list item. |
|
|
2431
|
+
| `.pf-c-nav__link` | `<a>` | Initiates nav list link. |
|
|
2432
|
+
| `.pf-c-nav__section` | `<section>` | Initiates a nav section element. |
|
|
2433
|
+
| `.pf-c-nav__section-title` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` | Initiates a nav section title. |
|
|
2434
|
+
| `.pf-c-nav__toggle` | `<span>` | Initiates the nav toggle wrapper. |
|
|
2435
|
+
| `.pf-c-nav__toggle-icon` | `<span>` | Initiates a nav toggle icon wrapper. |
|
|
2436
|
+
| `.pf-c-nav__scroll-button` | `<button>` | Initiates a nav scroll button. **Required for horizontal navs** |
|
|
2437
|
+
| `.pf-m-horizontal` | `.pf-c-nav` | Modifies nav for the horizontal variation. |
|
|
2438
|
+
| `.pf-m-no-title` | `.pf-c-nav__section` | Modifies nav section margin top to 0. |
|
|
2439
|
+
| `.pf-m-horizontal-subnav` | `.pf-c-nav` | Modifies nav for the horizontal subnav variation. |
|
|
2440
|
+
| `.pf-m-tertiary` | `.pf-c-nav` | Modifies nav for the tertiary variation. |
|
|
2441
|
+
| `.pf-m-light` | `.pf-c-nav` | Modifies nav for the light variation. **Note: only for use with vertical navs, and requires `.pf-m-light` on the page component's sidebar element (`.pf-c-page__sidebar`)**. |
|
|
2442
|
+
| `.pf-m-flyout` | `.pf-c-nav__item` | Modifies nav item for the flyout variation. |
|
|
2443
|
+
| `.pf-m-scrollable` | `.pf-c-nav` | Modifies nav for the scrollable state. |
|
|
2444
|
+
| `.pf-m-expandable` | `.pf-c-nav__item` | Modifies for the expandable state. |
|
|
2445
|
+
| `.pf-m-expanded` | `.pf-c-nav__item` | Modifies for the expanded state. |
|
|
2446
|
+
| `.pf-m-current` | `.pf-c-nav__link` | Modifies for the current state. |
|
|
2447
|
+
| `.pf-m-hover` | `.pf-c-nav__link` | Modifies for the hover state. |
|
|
2448
|
+
| `.pf-m-start` | `.pf-c-nav__toggle` | Modifies nav toggle to align left. |
|
|
@@ -214,11 +214,11 @@ Be sure that the component associated with this indicator handles screen reader
|
|
|
214
214
|
|
|
215
215
|
### Usage
|
|
216
216
|
|
|
217
|
-
| Class
|
|
218
|
-
|
|
|
219
|
-
| `.pf-c-notification-badge`
|
|
220
|
-
| `.pf-c-notification-badge__count` | `<span>`
|
|
221
|
-
| `.pf-m-read`
|
|
222
|
-
| `.pf-m-unread`
|
|
223
|
-
| `.pf-m-attention`
|
|
224
|
-
| `.pf-m-expanded`
|
|
217
|
+
| Class | Applied to | Outcome |
|
|
218
|
+
| -- | -- | -- |
|
|
219
|
+
| `.pf-c-notification-badge` | `<div>` | Initiates a notification badge. **Always use it with a modifier class.** |
|
|
220
|
+
| `.pf-c-notification-badge__count` | `<span>` | Initiates a notification badge count. |
|
|
221
|
+
| `.pf-m-read` | `.pf-c-notification-badge` | Applies read notification badge styling. |
|
|
222
|
+
| `.pf-m-unread` | `.pf-c-notification-badge` | Applies unread notification badge styling. |
|
|
223
|
+
| `.pf-m-attention` | `.pf-c-notification-badge` | Applies attention notification badge styling. |
|
|
224
|
+
| `.pf-m-expanded` | `.pf-c-notification-badge` | Applies expanded notification badge styling. |
|