@patternfly/patternfly 5.0.0-alpha.14 → 5.0.0-alpha.19
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/Progress/progress.css +5 -2
- package/components/Progress/progress.scss +5 -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 -60
- 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 -51
- 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 +201 -178
- package/patternfly.css +201 -178
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -10,32 +10,32 @@ Toolbar relies on groups (`.pf-c-toolbar__group`) and items (`.pf-c-toolbar__ite
|
|
|
10
10
|
|
|
11
11
|
### Default spacing for items and groups:
|
|
12
12
|
|
|
13
|
-
| Class
|
|
14
|
-
|
|
|
15
|
-
| `.pf-c-toolbar__item`
|
|
16
|
-
| `.pf-c-toolbar__group` | `--pf-c-toolbar__group--spacer` | `16px`
|
|
13
|
+
| Class | CSS Variable | Computed Value |
|
|
14
|
+
| -- | -- | -- |
|
|
15
|
+
| `.pf-c-toolbar__item` | `--pf-c-toolbar__item--spacer` | `16px` |
|
|
16
|
+
| `.pf-c-toolbar__group` | `--pf-c-toolbar__group--spacer` | `16px` |
|
|
17
17
|
|
|
18
18
|
### Toolbar item types
|
|
19
19
|
|
|
20
|
-
| Class
|
|
21
|
-
|
|
|
22
|
-
| `.pf-m-bulk-select`
|
|
23
|
-
| `.pf-m-overflow-menu` | `.pf-c-toolbar__item` | Initiates overflow menu spacing. Spacer value is set to `var(--pf-c-toolbar--m-overflow-menu--spacer)`.
|
|
24
|
-
| `.pf-m-pagination`
|
|
25
|
-
| `.pf-m-search-filter` | `.pf-c-toolbar__item` | Initiates search filter spacing. Spacer value is set to `var(--pf-c-toolbar--m-search-filter--spacer)`.
|
|
20
|
+
| Class | Applied to | Outcome |
|
|
21
|
+
| -- | -- | -- |
|
|
22
|
+
| `.pf-m-bulk-select` | `.pf-c-toolbar__item` | Initiates bulk select spacing. Spacer value is set to `var(--pf-c-toolbar--m-bulk-select--spacer)`. |
|
|
23
|
+
| `.pf-m-overflow-menu` | `.pf-c-toolbar__item` | Initiates overflow menu spacing. Spacer value is set to `var(--pf-c-toolbar--m-overflow-menu--spacer)`. |
|
|
24
|
+
| `.pf-m-pagination` | `.pf-c-toolbar__item` | Initiates pagination spacing and margin. Spacer value is set to `var(--pf-c-toolbar--m-pagination--spacer)`. |
|
|
25
|
+
| `.pf-m-search-filter` | `.pf-c-toolbar__item` | Initiates search filter spacing. Spacer value is set to `var(--pf-c-toolbar--m-search-filter--spacer)`. |
|
|
26
26
|
|
|
27
27
|
### Modifiers
|
|
28
28
|
|
|
29
|
-
| Class
|
|
30
|
-
|
|
|
31
|
-
| `.pf-m-hidden{-on-[breakpoint]}`
|
|
32
|
-
| `.pf-m-visible{-on-[breakpoint]}`
|
|
33
|
-
| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *`
|
|
34
|
-
| `.pf-m-align-left{-on-[breakpoint]}`
|
|
35
|
-
| `.pf-m-align-items-center`
|
|
36
|
-
| `.pf-m-align-items-baseline`
|
|
37
|
-
| `.pf-m-align-self-center`
|
|
38
|
-
| `.pf-m-align-self-baseline`
|
|
29
|
+
| Class | Applied to | Outcome |
|
|
30
|
+
| -- | -- | -- |
|
|
31
|
+
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
32
|
+
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
33
|
+
| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
34
|
+
| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
35
|
+
| `.pf-m-align-items-center` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies toolbar element to vertically align children to center. |
|
|
36
|
+
| `.pf-m-align-items-baseline` | `.pf-c-toolbar__group` | Modifies toolbar group to vertically align children to baseline. |
|
|
37
|
+
| `.pf-m-align-self-center` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to center. |
|
|
38
|
+
| `.pf-m-align-self-baseline` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to baseline. |
|
|
39
39
|
|
|
40
40
|
### Special notes
|
|
41
41
|
|
|
@@ -72,10 +72,10 @@ Several components in the following examples do not include functional and/or ac
|
|
|
72
72
|
|
|
73
73
|
### Item types
|
|
74
74
|
|
|
75
|
-
| Class
|
|
76
|
-
|
|
|
77
|
-
| `.pf-c-toolbar__item`
|
|
78
|
-
| `.pf-c-toolbar__group` | `<div>`
|
|
75
|
+
| Class | Applied to | Outcome |
|
|
76
|
+
| -- | -- | -- |
|
|
77
|
+
| `.pf-c-toolbar__item` | `<div>` | Initiates the toolbar component item. **Required** |
|
|
78
|
+
| `.pf-c-toolbar__group` | `<div>` | Initiates the toolbar component group. |
|
|
79
79
|
|
|
80
80
|
### Spacers
|
|
81
81
|
|
|
@@ -168,12 +168,12 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
168
168
|
|
|
169
169
|
### Toolbar spacers and insets
|
|
170
170
|
|
|
171
|
-
| Class
|
|
172
|
-
|
|
|
173
|
-
| `.pf-m-page-insets`
|
|
174
|
-
| `.pf-m-spacer-{none, sm, md, lg}{-on-[breakpoint]}`
|
|
175
|
-
| `.pf-m-space-items-{none, sm, md, lg}{-on-[breakpoint]}`
|
|
176
|
-
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-toolbar`
|
|
171
|
+
| Class | Applied to | Outcome |
|
|
172
|
+
| -- | -- | -- |
|
|
173
|
+
| `.pf-m-page-insets` | `.pf-c-toolbar` | Modifies toolbar insets to match page section, table, page header or any other component whose inset shifts from `--pf-global--spacer--md` to `--pf-global--spacer--lg` at the `xl` breakpoint. |
|
|
174
|
+
| `.pf-m-spacer-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
175
|
+
| `.pf-m-space-items-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-c-toolbar__group` | Modifies toolbar group child spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
176
|
+
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-toolbar` | Modifies toolbar horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
177
177
|
|
|
178
178
|
### Width control
|
|
179
179
|
|
|
@@ -199,10 +199,10 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
199
199
|
|
|
200
200
|
### Width control usage
|
|
201
201
|
|
|
202
|
-
| Class
|
|
203
|
-
|
|
|
204
|
-
| `--pf-c-toolbar__item--Width{-on-[breakpoint]}: {width}`
|
|
205
|
-
| `--pf-c-toolbar__item--MinWidth{-on-[breakpoint]}: {width}` | `.pf-c-toolbar__item` |
|
|
202
|
+
| Class | Applied to | Outcome |
|
|
203
|
+
| -- | -- | -- |
|
|
204
|
+
| `--pf-c-toolbar__item--Width{-on-[breakpoint]}: {width}` | `.pf-c-toolbar__item` | Modifies the width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
205
|
+
| `--pf-c-toolbar__item--MinWidth{-on-[breakpoint]}: {width}` | `.pf-c-toolbar__item` | Modifies the min width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
206
206
|
|
|
207
207
|
### Group types
|
|
208
208
|
|
|
@@ -437,11 +437,11 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
437
437
|
|
|
438
438
|
### Toolbar group types
|
|
439
439
|
|
|
440
|
-
| Class
|
|
441
|
-
|
|
|
442
|
-
| `.pf-m-filter-group`
|
|
440
|
+
| Class | Applied to | Outcome |
|
|
441
|
+
| -- | -- | -- |
|
|
442
|
+
| `.pf-m-filter-group` | `.pf-c-toolbar__group` | Modifies toolbar group spacing. Spacer value is set to `var(--pf-c-toolbar__group--m-filter-group--spacer)`. Child spacer value is set to `var(--pf-c-toolbar__group--m-filter-group--space-items)`. |
|
|
443
443
|
| `.pf-m-icon-button-group` | `.pf-c-toolbar__group` | Modifies toolbar group spacing. Spacer value is set to `var(--pf-c-toolbar__group--m-toggle-group--spacer)`. Child spacer value is set to `var(--pf-c-toolbar__group--m-icon-button-group--space-items)`. |
|
|
444
|
-
| `.pf-m-button-group`
|
|
444
|
+
| `.pf-m-button-group` | `.pf-c-toolbar__group` | Modifies toolbar group spacing. Spacer value is set to `var(--pf-c-toolbar__group--m-toggle-group--spacer)`. Child spacer value is set to `var(--pf-c-toolbar__group--m-button-group--space-items)`. |
|
|
445
445
|
|
|
446
446
|
### Toggle group
|
|
447
447
|
|
|
@@ -531,9 +531,9 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
531
531
|
</span>
|
|
532
532
|
<input
|
|
533
533
|
class="pf-c-text-input-group__text-input"
|
|
534
|
-
type="
|
|
535
|
-
value
|
|
534
|
+
type="search"
|
|
536
535
|
placeholder="Filter by name"
|
|
536
|
+
value
|
|
537
537
|
aria-label="Type to filter"
|
|
538
538
|
/>
|
|
539
539
|
</span>
|
|
@@ -851,9 +851,9 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
851
851
|
</span>
|
|
852
852
|
<input
|
|
853
853
|
class="pf-c-text-input-group__text-input"
|
|
854
|
-
type="
|
|
855
|
-
value
|
|
854
|
+
type="search"
|
|
856
855
|
placeholder="Filter by name"
|
|
856
|
+
value
|
|
857
857
|
aria-label="Type to filter"
|
|
858
858
|
/>
|
|
859
859
|
</span>
|
|
@@ -1077,27 +1077,27 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1077
1077
|
|
|
1078
1078
|
### Accessibility
|
|
1079
1079
|
|
|
1080
|
-
| Attribute
|
|
1081
|
-
|
|
|
1082
|
-
| `hidden`
|
|
1083
|
-
| `aria-expanded="true"`
|
|
1084
|
-
| `aria-expanded="false"`
|
|
1085
|
-
| `aria-controls="[id of expandable content]"` | `.pf-c-toolbar__toggle > .pf-c-button`
|
|
1086
|
-
| `id="[expandable-content_id]"`
|
|
1080
|
+
| Attribute | Applied to | Outcome |
|
|
1081
|
+
| -- | -- | -- |
|
|
1082
|
+
| `hidden` | `.pf-c-toolbar__item`, `.pf-c-toolbar__group`, `.pf-c-toolbar__toggle`, `.pf-c-toolbar__expandable-content` | Indicates that the toggle group element is hidden. **Required** |
|
|
1083
|
+
| `aria-expanded="true"` | `.pf-c-toolbar__toggle > .pf-c-button` | Indicates that the expandable content is visible. **Required** |
|
|
1084
|
+
| `aria-expanded="false"` | `.pf-c-toolbar__toggle > .pf-c-button` | Indicates the the expandable content is hidden. **Required** |
|
|
1085
|
+
| `aria-controls="[id of expandable content]"` | `.pf-c-toolbar__toggle > .pf-c-button` | Identifies the expanded content controlled by the toggle button. **Required** |
|
|
1086
|
+
| `id="[expandable-content_id]"` | `.pf-c-toolbar__expandable-content` | Provides a reference for toggle button description. **Required** |
|
|
1087
1087
|
|
|
1088
1088
|
### Responsive attributes
|
|
1089
1089
|
|
|
1090
|
-
| Attribute
|
|
1091
|
-
|
|
|
1090
|
+
| Attribute | Applied to | Outcome |
|
|
1091
|
+
| -- | -- | -- |
|
|
1092
1092
|
| `aria-haspopup="true"` | `.pf-c-toolbar__toggle > .pf-c-button` | When expandable content appears above content (mobile viewport), `aria-haspopup="true"` should be applied to indicate that focus should be trapped. **Required** |
|
|
1093
1093
|
|
|
1094
1094
|
### Usage
|
|
1095
1095
|
|
|
1096
|
-
| Class
|
|
1097
|
-
|
|
|
1096
|
+
| Class | Applied to | Outcome |
|
|
1097
|
+
| -- | -- | -- |
|
|
1098
1098
|
| `.pf-m-show{-on-[breakpoint]}` | `.pf-c-toolbar__group.pf-m-toggle-group`, `.pf-c-toolbar__expandable-content` | Modifies toolbar element visibility at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). This selector must be applied consistently to toggle group and expandable content. |
|
|
1099
|
-
| `.pf-m-chip-container`
|
|
1100
|
-
| `.pf-m-expanded`
|
|
1099
|
+
| `.pf-m-chip-container` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
|
|
1100
|
+
| `.pf-m-expanded` | `.pf-c-toolbar__expandable-content`, `.pf-c-toolbar__toggle` | Modifies the component for the expanded state. |
|
|
1101
1101
|
|
|
1102
1102
|
### Selected
|
|
1103
1103
|
|
|
@@ -1235,9 +1235,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1235
1235
|
</span>
|
|
1236
1236
|
<input
|
|
1237
1237
|
class="pf-c-text-input-group__text-input"
|
|
1238
|
-
type="
|
|
1239
|
-
value
|
|
1238
|
+
type="search"
|
|
1240
1239
|
placeholder="Filter by name"
|
|
1240
|
+
value
|
|
1241
1241
|
aria-label="Type to filter"
|
|
1242
1242
|
/>
|
|
1243
1243
|
</span>
|
|
@@ -1819,9 +1819,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1819
1819
|
</span>
|
|
1820
1820
|
<input
|
|
1821
1821
|
class="pf-c-text-input-group__text-input"
|
|
1822
|
-
type="
|
|
1823
|
-
value
|
|
1822
|
+
type="search"
|
|
1824
1823
|
placeholder="Filter by name"
|
|
1824
|
+
value
|
|
1825
1825
|
aria-label="Type to filter"
|
|
1826
1826
|
/>
|
|
1827
1827
|
</span>
|
|
@@ -3898,9 +3898,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
3898
3898
|
</span>
|
|
3899
3899
|
<input
|
|
3900
3900
|
class="pf-c-text-input-group__text-input"
|
|
3901
|
-
type="
|
|
3902
|
-
value
|
|
3901
|
+
type="search"
|
|
3903
3902
|
placeholder="Filter by name"
|
|
3903
|
+
value
|
|
3904
3904
|
aria-label="Type to filter"
|
|
3905
3905
|
/>
|
|
3906
3906
|
</span>
|
|
@@ -4210,65 +4210,65 @@ As the toolbar component is a hybrid layout and component, some of its elements
|
|
|
4210
4210
|
|
|
4211
4211
|
### Usage
|
|
4212
4212
|
|
|
4213
|
-
| Class
|
|
4214
|
-
|
|
|
4215
|
-
| `.pf-c-toolbar`
|
|
4216
|
-
| `.pf-c-toolbar__item`
|
|
4217
|
-
| `.pf-c-toolbar__group`
|
|
4218
|
-
| `.pf-c-toolbar__content`
|
|
4219
|
-
| `.pf-c-toolbar__content-section`
|
|
4220
|
-
| `.pf-c-toolbar__expandable-content`
|
|
4221
|
-
| `.pf-m-sticky`
|
|
4222
|
-
| `.pf-m-full-height`
|
|
4223
|
-
| `.pf-m-static`
|
|
4224
|
-
| `.pf-m-expanded`
|
|
4225
|
-
| `.pf-m-bulk-select`
|
|
4226
|
-
| `.pf-m-overflow-menu`
|
|
4227
|
-
| `.pf-m-pagination`
|
|
4228
|
-
| `.pf-m-search-filter`
|
|
4229
|
-
| `.pf-m-chip-group`
|
|
4230
|
-
| `.pf-m-expand-all`
|
|
4231
|
-
| `.pf-m-expanded`
|
|
4232
|
-
| `.pf-m-button-group`
|
|
4233
|
-
| `.pf-m-icon-button-group`
|
|
4234
|
-
| `.pf-m-filter-group`
|
|
4235
|
-
| `.pf-m-hidden{-on-[breakpoint]}`
|
|
4236
|
-
| `.pf-m-visible{-on-[breakpoint]}`
|
|
4237
|
-
| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *`
|
|
4238
|
-
| `.pf-m-align-left{-on-[breakpoint]}`
|
|
4239
|
-
| `.pf-m-align-items-center`
|
|
4240
|
-
| `.pf-m-align-items-baseline`
|
|
4241
|
-
| `.pf-m-align-self-center`
|
|
4242
|
-
| `.pf-m-align-self-baseline`
|
|
4243
|
-
| `.pf-m-label`
|
|
4244
|
-
| `.pf-m-chip-container`
|
|
4245
|
-
| `.pf-m-overflow-container`
|
|
4246
|
-
| `.pf-m-expanded`
|
|
4247
|
-
| `.pf-m-wrap`
|
|
4248
|
-
| `.pf-m-nowrap`
|
|
4213
|
+
| Class | Applied to | Outcome |
|
|
4214
|
+
| -- | -- | -- |
|
|
4215
|
+
| `.pf-c-toolbar` | `<div>` | Initiates the toolbar component. **Required** |
|
|
4216
|
+
| `.pf-c-toolbar__item` | `<div>` | Initiates a toolbar item. **Required** |
|
|
4217
|
+
| `.pf-c-toolbar__group` | `<div>` | Initiates a toolbar group. |
|
|
4218
|
+
| `.pf-c-toolbar__content` | `<div>` | Initiates a toolbar content container. **Required** |
|
|
4219
|
+
| `.pf-c-toolbar__content-section` | `<div>` | Initiates a toolbar content section. This is used to separate static elements from dynamic elements within a content container. There should be no more than one `.pf-c-toolbar__content-section` per `.pf-c-toolbar__content` **Required** |
|
|
4220
|
+
| `.pf-c-toolbar__expandable-content` | `<div>` | Initiates a toolbar expandable content section. |
|
|
4221
|
+
| `.pf-m-sticky` | `.pf-c-toolbar` | Modifies toolbar component to be sticky to the top of its container. |
|
|
4222
|
+
| `.pf-m-full-height` | `.pf-c-toolbar` | Modifies toolbar component to full height of its container and removes vertical padding. |
|
|
4223
|
+
| `.pf-m-static` | `.pf-c-toolbar` | Modifies expandable content section to position itself to the nearest absolutely positioned parent outside of the toolbar component. This is used primarily for masthead toolbar. |
|
|
4224
|
+
| `.pf-m-expanded` | `.pf-c-toolbar__expandable-content` | Modifies expandable content section for the expanded state. |
|
|
4225
|
+
| `.pf-m-bulk-select` | `.pf-c-toolbar__item` | Initiates bulk select spacing. |
|
|
4226
|
+
| `.pf-m-overflow-menu` | `.pf-c-toolbar__item` | Initiates overflow menu spacing. |
|
|
4227
|
+
| `.pf-m-pagination` | `.pf-c-toolbar__item` | Initiates pagination spacing and margin. |
|
|
4228
|
+
| `.pf-m-search-filter` | `.pf-c-toolbar__item` | Initiates search filter spacing. |
|
|
4229
|
+
| `.pf-m-chip-group` | `.pf-c-toolbar__item` | Initiates chip group spacing. |
|
|
4230
|
+
| `.pf-m-expand-all` | `.pf-c-toolbar__item` | Initiates an item for an expand all button. |
|
|
4231
|
+
| `.pf-m-expanded` | `.pf-c-toolbar__item.pf-m-expand-all` | Modifies an expand all button for the expanded state. |
|
|
4232
|
+
| `.pf-m-button-group` | `.pf-c-toolbar__group` | Initiates button group spacing. |
|
|
4233
|
+
| `.pf-m-icon-button-group` | `.pf-c-toolbar__group` | Initiates icon button group spacing. |
|
|
4234
|
+
| `.pf-m-filter-group` | `.pf-c-toolbar__group` | Initiates filter group spacing. |
|
|
4235
|
+
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
4236
|
+
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
4237
|
+
| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
4238
|
+
| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
4239
|
+
| `.pf-m-align-items-center` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies toolbar element to vertically align children to center. |
|
|
4240
|
+
| `.pf-m-align-items-baseline` | `.pf-c-toolbar__group` | Modifies toolbar group to vertically align children to baseline. |
|
|
4241
|
+
| `.pf-m-align-self-center` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to center. |
|
|
4242
|
+
| `.pf-m-align-self-baseline` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to baseline. |
|
|
4243
|
+
| `.pf-m-label` | `.pf-c-toolbar__item` | Modifies toolbar item to label. |
|
|
4244
|
+
| `.pf-m-chip-container` | `.pf-c-toolbar__content`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
|
|
4245
|
+
| `.pf-m-overflow-container` | `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation. |
|
|
4246
|
+
| `.pf-m-expanded` | `.pf-c-toolbar__expandable-content`, `.pf-c-toolbar__toggle` | Modifies the component for the expanded state. |
|
|
4247
|
+
| `.pf-m-wrap` | `.pf-c-toolbar`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies the toolbar element to wrap. |
|
|
4248
|
+
| `.pf-m-nowrap` | `.pf-c-toolbar`, `.pf-c-toolbar__group` | Modifies the toolbar element to nowrap. |
|
|
4249
4249
|
|
|
4250
4250
|
### Accessibility
|
|
4251
4251
|
|
|
4252
|
-
| Attribute
|
|
4253
|
-
|
|
|
4254
|
-
| `hidden`
|
|
4255
|
-
| `aria-expanded="true"`
|
|
4256
|
-
| `aria-expanded="false"`
|
|
4257
|
-
| `aria-controls="[id of expandable content]"` | `.pf-c-toolbar__toggle > .pf-c-button`
|
|
4258
|
-
| `id="[expandable-content_id]"`
|
|
4259
|
-
| `aria-label="Expand all"`
|
|
4260
|
-
| `aria-label="Collapse all"`
|
|
4252
|
+
| Attribute | Applied to | Outcome |
|
|
4253
|
+
| -- | -- | -- |
|
|
4254
|
+
| `hidden` | `.pf-c-toolbar__item`, `.pf-c-toolbar__group`, `.pf-c-toolbar__toggle`, `.pf-c-toolbar__expandable-content` | Indicates that the toolbar element is hidden. **Required** |
|
|
4255
|
+
| `aria-expanded="true"` | `.pf-c-toolbar__toggle > .pf-c-button` | Indicates that the expandable content is visible. **Required** |
|
|
4256
|
+
| `aria-expanded="false"` | `.pf-c-toolbar__toggle > .pf-c-button` | Indicates the the expandable content is hidden. **Required** |
|
|
4257
|
+
| `aria-controls="[id of expandable content]"` | `.pf-c-toolbar__toggle > .pf-c-button` | Identifies the expanded content controlled by the toggle button. **Required** |
|
|
4258
|
+
| `id="[expandable-content_id]"` | `.pf-c-toolbar__expandable-content` | Provides a reference for toggle button description. **Required** |
|
|
4259
|
+
| `aria-label="Expand all"` | `.pf-c-toolbar__item.pf-m-expand-all` | Provides an accessible label for the expand all item button. **Required** |
|
|
4260
|
+
| `aria-label="Collapse all"` | `.pf-c-toolbar__item.pf-m-expand-all.pf-m-expanded` | Provides an accessible label for the expand all item button. **Required** |
|
|
4261
4261
|
|
|
4262
4262
|
### Toggle group usage
|
|
4263
4263
|
|
|
4264
|
-
| Class
|
|
4265
|
-
|
|
|
4266
|
-
| `.pf-m-toggle-group`
|
|
4264
|
+
| Class | Applied to | Outcome |
|
|
4265
|
+
| -- | -- | -- |
|
|
4266
|
+
| `.pf-m-toggle-group` | `.pf-c-toolbar__group` | Modifies toolbar group to control when, and at which breakpoint, filters will be hidden/shown. By default, all filters are hidden until the specified breakpoint is reached. |
|
|
4267
4267
|
| `.pf-m-show{-on-[breakpoint]}` | `.pf-c-toolbar__group.pf-m-toggle-group`, `.pf-c-toolbar__expandable-content` | Modifies toolbar element to hidden at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). This selector must be applied consistently to toggle group and expandable content. |
|
|
4268
4268
|
|
|
4269
4269
|
### Spacer system
|
|
4270
4270
|
|
|
4271
|
-
| Class
|
|
4272
|
-
|
|
|
4273
|
-
| `.pf-m-spacer-{none, sm, md, lg, xl}{-on-[breakpoint]}`
|
|
4274
|
-
| `.pf-m-space-items-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group`
|
|
4271
|
+
| Class | Applied to | Outcome |
|
|
4272
|
+
| -- | -- | -- |
|
|
4273
|
+
| `.pf-m-spacer-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
4274
|
+
| `.pf-m-space-items-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group` | Modifies toolbar group child spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
@@ -128,13 +128,13 @@ A tooltip is used to provide contextual information for another component on hov
|
|
|
128
128
|
|
|
129
129
|
### Usage
|
|
130
130
|
|
|
131
|
-
| Class
|
|
132
|
-
|
|
|
133
|
-
| `.pf-c-tooltip`
|
|
134
|
-
| `.pf-c-tooltip__arrow`
|
|
135
|
-
| `.pf-c-tooltip__content`
|
|
136
|
-
| `.pf-m-left{-top/bottom}`
|
|
137
|
-
| `.pf-m-right{-top/bottom}`
|
|
138
|
-
| `.pf-m-top{-left/right}`
|
|
139
|
-
| `.pf-m-bottom{-left/right}` | `.pf-c-tooltip`
|
|
140
|
-
| `.pf-m-text-align-left`
|
|
131
|
+
| Class | Applied to | Outcome |
|
|
132
|
+
| -- | -- | -- |
|
|
133
|
+
| `.pf-c-tooltip` | `<div>` | Creates a tooltip. Always use with a modifier class that positions the tooltip relative to the element it describes. **Required**|
|
|
134
|
+
| `.pf-c-tooltip__arrow` | `<div>` | Creates an arrow pointing towards the element the tooltip describes. **Required** |
|
|
135
|
+
| `.pf-c-tooltip__content` | `<div>` | Creates the body of the tooltip. **Required** |
|
|
136
|
+
| `.pf-m-left{-top/bottom}` | `.pf-c-tooltip` | Positions the tooltip to the left (or left top/left bottom) of the element. |
|
|
137
|
+
| `.pf-m-right{-top/bottom}` | `.pf-c-tooltip` | Positions the tooltip to the right (or right top/right bottom) of the element. |
|
|
138
|
+
| `.pf-m-top{-left/right}` | `.pf-c-tooltip` | Positions the tooltip to the top (or top left/top right) of the element. |
|
|
139
|
+
| `.pf-m-bottom{-left/right}` | `.pf-c-tooltip` | Positions the tooltip to the bottom (or bottom left/bottom right) of the element. |
|
|
140
|
+
| `.pf-m-text-align-left` | `.pf-c-tooltip__content` | Modifies tooltip content to text align left. |
|
|
@@ -3356,40 +3356,40 @@ cssPrefix: pf-c-tree-view
|
|
|
3356
3356
|
|
|
3357
3357
|
### Accessibility
|
|
3358
3358
|
|
|
3359
|
-
| Attribute
|
|
3360
|
-
|
|
|
3361
|
-
| `role="tree"`
|
|
3362
|
-
| `role="group"`
|
|
3363
|
-
| `role="treeitem"`
|
|
3364
|
-
| `aria-expanded="false"`
|
|
3365
|
-
| `aria-expanded="true"`
|
|
3366
|
-
| `tabindex="-1"`
|
|
3367
|
-
| `tabindex="0"`
|
|
3368
|
-
| `aria-label="[button label text]"` | `.pf-c-tree-view__action`
|
|
3359
|
+
| Attribute | Applied to | Outcome |
|
|
3360
|
+
| -- | -- | -- |
|
|
3361
|
+
| `role="tree"` | `.pf-c-tree-view__list` | Identifies the `ul` as a tree widget. **Place on the outermost `ul` only** |
|
|
3362
|
+
| `role="group"` | `.pf-c-tree-view__list` | Identifies the `ul` element as a container of treeitem elements that form a branch of the tree. **Place on all `ul`s except the first `ul`** |
|
|
3363
|
+
| `role="treeitem"` | `.pf-c-tree-view__list-item` | Hides the implicit listitem role of the li element from assistive technologies. |
|
|
3364
|
+
| `aria-expanded="false"` | `.pf-c-tree-view__list-item` | For an expandable item, indicates the parent node is closed, i.e., the descendant elements are not visible. |
|
|
3365
|
+
| `aria-expanded="true"` | `.pf-c-tree-view__list-item.pf-m-expanded` | Indicates the parent node is open, i.e., the descendant elements are visible. |
|
|
3366
|
+
| `tabindex="-1"` | `.pf-c-tree-view__list-item` | Makes the element with the treeitem role focusable without including it in the tab sequence of the page. |
|
|
3367
|
+
| `tabindex="0"` | `.pf-c-tree-view__list-item` | Includes the element with the treeitem role in the tab sequence. Only one treeitem in the tree has tabindex="0". When the user moves focus in the tree, the element included in the tab sequence changes to the element with focus. |
|
|
3368
|
+
| `aria-label="[button label text]"` | `.pf-c-tree-view__action` | Provides an accessible name for the button when an icon is used instead of text. **Required when icon is used with no supporting text** |
|
|
3369
3369
|
|
|
3370
3370
|
### Usage
|
|
3371
3371
|
|
|
3372
|
-
| Class
|
|
3373
|
-
|
|
|
3374
|
-
| `.pf-c-tree-view`
|
|
3375
|
-
| `.pf-c-tree-view__list`
|
|
3376
|
-
| `.pf-c-tree-view__list-item`
|
|
3377
|
-
| `.pf-c-tree-view__content`
|
|
3378
|
-
| `.pf-c-tree-view__node`
|
|
3379
|
-
| `.pf-c-tree-view__node-container`
|
|
3380
|
-
| `.pf-c-tree-view__node-content`
|
|
3381
|
-
| `.pf-c-tree-view__node-count`
|
|
3382
|
-
| `.pf-c-tree-view__node-toggle`
|
|
3383
|
-
| `.pf-c-tree-view__node-toggle-icon` | `<span>`
|
|
3384
|
-
| `.pf-c-tree-view__node-title`
|
|
3385
|
-
| `.pf-c-tree-view__node-text`
|
|
3386
|
-
| `.pf-c-tree-view__node-icon`
|
|
3387
|
-
| `.pf-c-tree-view__node-check`
|
|
3388
|
-
| `.pf-c-tree-view__action`
|
|
3389
|
-
| `.pf-c-tree-view__search`
|
|
3390
|
-
| `.pf-m-guides`
|
|
3391
|
-
| `.pf-m-compact`
|
|
3392
|
-
| `.pf-m-no-background`
|
|
3393
|
-
| `.pf-m-current`
|
|
3394
|
-
| `.pf-m-selectable`
|
|
3395
|
-
| `.pf-m-truncate`
|
|
3372
|
+
| Class | Applied | Outcome |
|
|
3373
|
+
| -- | -- | -- |
|
|
3374
|
+
| `.pf-c-tree-view` | `<div>` | Initiates the tree view container. **Required** |
|
|
3375
|
+
| `.pf-c-tree-view__list` | `<ul>` | Initiates a tree view list. **Required** |
|
|
3376
|
+
| `.pf-c-tree-view__list-item` | `<li>` | Initiates a tree view list item. **Required** |
|
|
3377
|
+
| `.pf-c-tree-view__content` | `<div>` | Initiates a tree view node. **Required** |
|
|
3378
|
+
| `.pf-c-tree-view__node` | `<button>`, `<label>` | Initiates a tree view node. **Required** |
|
|
3379
|
+
| `.pf-c-tree-view__node-container` | `<span>` | Initiates a tree view node container. **Required for compact variant** |
|
|
3380
|
+
| `.pf-c-tree-view__node-content` | `<span>` | Initiates a tree view node content container used to stack elements. |
|
|
3381
|
+
| `.pf-c-tree-view__node-count` | `<span>` | Initiates a tree view node count. |
|
|
3382
|
+
| `.pf-c-tree-view__node-toggle` | `<span>`, `<button>` | Initiates a tree view toggle. |
|
|
3383
|
+
| `.pf-c-tree-view__node-toggle-icon` | `<span>` | Initiates a tree view toggle icon. |
|
|
3384
|
+
| `.pf-c-tree-view__node-title` | `<span>` | Initiates a tree view node title. |
|
|
3385
|
+
| `.pf-c-tree-view__node-text` | `<span>`, `<button>` | Initiates tree view text. **Note:** Use a `<button>` when the node is expandable and selectable. |
|
|
3386
|
+
| `.pf-c-tree-view__node-icon` | `<span>` | Initiates a tree view icon. |
|
|
3387
|
+
| `.pf-c-tree-view__node-check` | `<span>` | Initiates a tree view check. |
|
|
3388
|
+
| `.pf-c-tree-view__action` | `<div>` | Initiates a tree view action wrapper. |
|
|
3389
|
+
| `.pf-c-tree-view__search` | `<div>` | Initiates a tree view search wrapper. |
|
|
3390
|
+
| `.pf-m-guides` | `.pf-c-tree-view` | Modifies the tree view to the guides presentation. |
|
|
3391
|
+
| `.pf-m-compact` | `.pf-c-tree-view` | Modifies the tree view to the compact presentation. |
|
|
3392
|
+
| `.pf-m-no-background` | `.pf-c-tree-view.pf-m-compact` | Modifies the tree view compact variant node containers to have a transparent background. |
|
|
3393
|
+
| `.pf-m-current` | `.pf-c-tree-view__node` | Modifies the tree view node to be current. |
|
|
3394
|
+
| `.pf-m-selectable` | `.pf-c-tree-view__node` | For use on nodes that are expandable and selectable, when the default click action on the node selects it instead of expanding it. |
|
|
3395
|
+
| `.pf-m-truncate` | `.pf-c-tree-view`, `.pf-c-tree-view__node-title`, `.pf-c-tree-view__node-text` | Modifies the tree view title or text to truncate. |
|
|
@@ -55,8 +55,8 @@ The truncate component contains two child elements, `.pf-c-truncate__start` and
|
|
|
55
55
|
|
|
56
56
|
### Usage
|
|
57
57
|
|
|
58
|
-
| Class
|
|
59
|
-
|
|
|
60
|
-
| `.pf-c-truncate`
|
|
58
|
+
| Class | Applied | Outcome |
|
|
59
|
+
| -- | -- | -- |
|
|
60
|
+
| `.pf-c-truncate` | `<span>` | Initiates the truncate component. |
|
|
61
61
|
| `.pf-c-truncate__start` | `<span>` | Defines the truncate component starting text. |
|
|
62
|
-
| `.pf-c-truncate__end`
|
|
62
|
+
| `.pf-c-truncate__end` | `<span>` | Defines the truncate component ending text. |
|