@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -2
- package/assets/fontawesome/_animated.scss +1 -0
- package/assets/fontawesome/_bordered-pulled.scss +1 -0
- package/assets/fontawesome/_core.scss +2 -0
- package/assets/fontawesome/_fixed-width.scss +2 -0
- package/assets/fontawesome/_icons.scss +1 -0
- package/assets/fontawesome/_index.scss +12 -0
- package/assets/fontawesome/_larger.scss +4 -2
- package/assets/fontawesome/_list.scss +4 -2
- package/assets/fontawesome/_rotated-flipped.scss +2 -0
- package/assets/fontawesome/_screen-reader.scss +1 -0
- package/assets/fontawesome/_stacked.scss +3 -1
- package/assets/fontawesome/_variables.scss +3 -2
- package/assets/fontawesome/fontawesome.scss +12 -12
- package/assets/icons/iconUnicodes.json +6 -0
- package/assets/images/img_avatar-dark.svg +22 -16
- package/assets/images/img_avatar-light.svg +25 -18
- package/assets/images/pf-background.svg +21 -21
- package/assets/images/pf_logo.svg +11 -11
- package/assets/images/pf_logo_white.svg +16 -17
- package/assets/pficon/pf-v6-pficon.woff2 +0 -0
- package/assets/pficon/pficon.scss +310 -271
- package/base/_index.scss +10 -0
- package/base/{_globals.scss → normalize.scss} +15 -48
- package/base/patternfly-common.css +14 -0
- package/base/patternfly-common.scss +68 -2
- package/base/patternfly-fa-icons.css +1 -1
- package/base/patternfly-fa-icons.scss +35 -2
- package/base/patternfly-fonts.css +10 -80
- package/base/patternfly-fonts.scss +49 -2
- package/base/patternfly-pf-icons.css +158 -134
- package/base/patternfly-pf-icons.scss +1 -2
- package/base/patternfly-svg-icons.css +5 -0
- package/base/{_svg-icons.scss → patternfly-svg-icons.scss} +2 -0
- package/base/patternfly-variables.css +1082 -1206
- package/base/patternfly-variables.scss +20 -2
- package/base/reset.scss +33 -0
- package/base/tokens/_index.scss +6 -0
- package/base/tokens/tokens-charts-dark.scss +173 -0
- package/base/tokens/{_tokens-charts.scss → tokens-charts.scss} +162 -148
- package/base/tokens/{_tokens-dark.scss → tokens-dark.scss} +307 -294
- package/base/tokens/{_tokens-default.scss → tokens-default.scss} +574 -447
- package/base/tokens/{_tokens-font.scss → tokens-local.scss} +13 -34
- package/base/tokens/{_tokens-palette.scss → tokens-palette.scss} +69 -70
- package/components/AboutModalBox/about-modal-box.css +86 -81
- package/components/AboutModalBox/about-modal-box.scss +80 -82
- package/components/Accordion/accordion.css +44 -43
- package/components/Accordion/accordion.scss +52 -52
- package/components/ActionList/action-list.css +6 -5
- package/components/ActionList/action-list.scss +7 -5
- package/components/Alert/alert-group.css +72 -19
- package/components/Alert/alert-group.scss +105 -18
- package/components/Alert/alert.css +52 -59
- package/components/Alert/alert.scss +56 -65
- package/components/Avatar/avatar.css +42 -41
- package/components/Avatar/avatar.scss +8 -7
- package/components/BackToTop/back-to-top.css +19 -17
- package/components/BackToTop/back-to-top.scss +17 -17
- package/components/Backdrop/backdrop.css +1 -1
- package/components/Backdrop/backdrop.scss +3 -4
- package/components/BackgroundImage/background-image.scss +3 -4
- package/components/Badge/badge.css +29 -7
- package/components/Badge/badge.scss +33 -9
- package/components/Banner/banner.css +30 -37
- package/components/Banner/banner.scss +30 -43
- package/components/Brand/brand.css +14 -10
- package/components/Brand/brand.scss +8 -5
- package/components/Breadcrumb/breadcrumb.css +23 -24
- package/components/Breadcrumb/breadcrumb.scss +25 -28
- package/components/Button/button.css +150 -128
- package/components/Button/button.scss +155 -130
- package/components/CalendarMonth/calendar-month.css +46 -46
- package/components/CalendarMonth/calendar-month.scss +49 -50
- package/components/Card/card.css +110 -93
- package/components/Card/card.scss +118 -92
- package/components/Check/check.css +5 -5
- package/components/Check/check.scss +7 -8
- package/components/ClipboardCopy/clipboard-copy.css +33 -41
- package/components/ClipboardCopy/clipboard-copy.scss +35 -44
- package/components/CodeBlock/code-block.css +21 -20
- package/components/CodeBlock/code-block.scss +21 -21
- package/components/CodeEditor/code-editor.css +35 -34
- package/components/CodeEditor/code-editor.scss +35 -35
- package/components/Content/content.css +167 -153
- package/components/Content/content.scss +204 -145
- package/components/DataList/data-list-grid.css +117 -117
- package/components/DataList/data-list-grid.scss +22 -20
- package/components/DataList/data-list.css +308 -312
- package/components/DataList/data-list.scss +145 -152
- package/components/DatePicker/date-picker.css +17 -17
- package/components/DatePicker/date-picker.scss +17 -18
- package/components/DescriptionList/description-list-order.css +5 -5
- package/components/DescriptionList/description-list-order.scss +3 -1
- package/components/DescriptionList/description-list.css +46 -44
- package/components/DescriptionList/description-list.scss +26 -31
- package/components/Divider/divider.css +104 -107
- package/components/Divider/divider.scss +19 -19
- package/components/DragDrop/drag-drop.css +4 -2
- package/components/DragDrop/drag-drop.scss +3 -3
- package/components/Drawer/drawer.css +115 -114
- package/components/Drawer/drawer.scss +136 -134
- package/components/DualListSelector/dual-list-selector.css +64 -61
- package/components/DualListSelector/dual-list-selector.scss +54 -51
- package/components/EmptyState/empty-state.css +38 -37
- package/components/EmptyState/empty-state.scss +39 -39
- package/components/ExpandableSection/expandable-section.css +27 -86
- package/components/ExpandableSection/expandable-section.scss +32 -101
- package/components/FileUpload/file-upload.css +2 -2
- package/components/FileUpload/file-upload.scss +2 -3
- package/components/Form/form.css +173 -115
- package/components/Form/form.scss +117 -103
- package/components/FormControl/form-control.css +57 -57
- package/components/FormControl/form-control.scss +69 -67
- package/components/HelperText/helper-text.css +5 -4
- package/components/HelperText/helper-text.scss +8 -6
- package/components/Hint/hint.css +25 -25
- package/components/Hint/hint.scss +25 -27
- package/components/Icon/icon.css +10 -10
- package/components/Icon/icon.scss +11 -12
- package/components/InlineEdit/inline-edit.css +12 -12
- package/components/InlineEdit/inline-edit.scss +12 -13
- package/components/InputGroup/input-group.css +16 -16
- package/components/InputGroup/input-group.scss +18 -19
- package/components/JumpLinks/jump-links.css +80 -96
- package/components/JumpLinks/jump-links.scss +80 -100
- package/components/Label/label-group.css +28 -28
- package/components/Label/label-group.scss +29 -30
- package/components/Label/label.css +102 -87
- package/components/Label/label.scss +113 -94
- package/components/List/list.css +44 -47
- package/components/List/list.scss +51 -58
- package/components/Login/login.css +122 -118
- package/components/Login/login.scss +105 -112
- package/components/Masthead/masthead.css +273 -175
- package/components/Masthead/masthead.scss +102 -68
- package/components/Menu/menu.css +151 -95
- package/components/Menu/menu.scss +59 -40
- package/components/MenuToggle/menu-toggle.css +129 -108
- package/components/MenuToggle/menu-toggle.scss +150 -128
- package/components/ModalBox/modal-box.css +53 -45
- package/components/ModalBox/modal-box.scss +52 -46
- package/components/MultipleFileUpload/multiple-file-upload.css +37 -37
- package/components/MultipleFileUpload/multiple-file-upload.scss +38 -39
- package/components/Nav/nav.css +33 -9
- package/components/Nav/nav.scss +46 -13
- package/components/NotificationDrawer/notification-drawer.css +50 -51
- package/components/NotificationDrawer/notification-drawer.scss +58 -57
- package/components/NumberInput/number-input.css +7 -11
- package/components/NumberInput/number-input.scss +5 -7
- package/components/OverflowMenu/overflow-menu.css +2 -1
- package/components/OverflowMenu/overflow-menu.scss +3 -1
- package/components/Page/page.css +175 -519
- package/components/Page/page.scss +155 -386
- package/components/Pagination/pagination.css +82 -79
- package/components/Pagination/pagination.scss +43 -40
- package/components/Panel/panel.css +33 -30
- package/components/Panel/panel.scss +35 -33
- package/components/Popover/popover.css +54 -52
- package/components/Popover/popover.scss +55 -54
- package/components/Progress/progress.css +8 -4
- package/components/Progress/progress.scss +14 -11
- package/components/ProgressStepper/progress-stepper.css +246 -245
- package/components/ProgressStepper/progress-stepper.scss +118 -118
- package/components/Radio/radio.css +7 -7
- package/components/Radio/radio.scss +9 -10
- package/components/Sidebar/sidebar.css +139 -139
- package/components/Sidebar/sidebar.scss +61 -61
- package/components/SimpleList/simple-list.css +21 -20
- package/components/SimpleList/simple-list.scss +22 -23
- package/components/Skeleton/skeleton.css +4 -4
- package/components/Skeleton/skeleton.scss +7 -8
- package/components/SkipToContent/skip-to-content.css +7 -6
- package/components/SkipToContent/skip-to-content.scss +7 -7
- package/components/Slider/slider.css +31 -31
- package/components/Slider/slider.scss +54 -55
- package/components/Spinner/spinner.scss +4 -5
- package/components/Switch/switch.css +4 -10
- package/components/Switch/switch.scss +8 -17
- package/components/TabContent/tab-content.css +25 -25
- package/components/TabContent/tab-content.scss +28 -28
- package/components/Table/table-grid.css +434 -508
- package/components/Table/table-grid.scss +131 -150
- package/components/Table/table-scrollable.css +31 -34
- package/components/Table/table-scrollable.scss +44 -41
- package/components/Table/table-tree-view.css +287 -279
- package/components/Table/table-tree-view.scss +84 -84
- package/components/Table/table.css +316 -279
- package/components/Table/table.scss +346 -301
- package/components/Tabs/tabs.css +215 -240
- package/components/Tabs/tabs.scss +130 -162
- package/components/TextInputGroup/text-input-group.css +122 -64
- package/components/TextInputGroup/text-input-group.scss +144 -87
- package/components/Tile/tile.css +15 -15
- package/components/Tile/tile.scss +16 -17
- package/components/Timestamp/timestamp.css +13 -19
- package/components/Timestamp/timestamp.scss +16 -22
- package/components/Title/title.css +14 -13
- package/components/Title/title.scss +15 -15
- package/components/ToggleGroup/toggle-group.css +37 -37
- package/components/ToggleGroup/toggle-group.scss +38 -41
- package/components/Toolbar/toolbar.css +547 -1431
- package/components/Toolbar/toolbar.scss +159 -123
- package/components/Tooltip/tooltip.css +28 -27
- package/components/Tooltip/tooltip.scss +31 -30
- package/components/TreeView/tree-view.css +184 -184
- package/components/TreeView/tree-view.scss +133 -133
- package/components/Truncate/truncate.css +2 -2
- package/components/Truncate/truncate.scss +7 -8
- package/components/Wizard/wizard.css +190 -154
- package/components/Wizard/wizard.scss +211 -165
- package/components/_index.css +22378 -0
- package/components/_index.scss +82 -0
- package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
- package/docs/components/Accordion/examples/Accordion.md +1 -1
- package/docs/components/ActionList/examples/ActionList.md +64 -24
- package/docs/components/Alert/examples/Alert.md +116 -74
- package/docs/components/BackToTop/examples/BackToTop.md +1 -1
- package/docs/components/Badge/examples/Badge.md +6 -16
- package/docs/components/Banner/examples/Banner.md +16 -10
- package/docs/components/Brand/examples/Brand.md +2 -2
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +19 -59
- package/docs/components/Button/examples/Button.md +537 -368
- package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
- package/docs/components/Card/examples/Card.md +372 -658
- package/docs/components/Check/examples/Check.md +10 -15
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +92 -47
- package/docs/components/CodeBlock/examples/CodeBlock.md +51 -28
- package/docs/components/CodeEditor/examples/CodeEditor.md +41 -22
- package/docs/components/Content/examples/Content.md +600 -60
- package/docs/components/DataList/examples/DataList.md +291 -1028
- package/docs/components/DatePicker/examples/DatePicker.md +18 -6
- package/docs/components/DescriptionList/examples/DescriptionList.md +80 -55
- package/docs/components/Drawer/examples/Drawer.md +60 -21
- package/docs/components/DualListSelector/examples/DualListSelector.md +364 -996
- package/docs/components/EmptyState/examples/EmptyState.md +123 -53
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
- package/docs/components/FileUpload/examples/FileUpload.md +42 -14
- package/docs/components/Form/examples/Form.md +100 -26
- package/docs/components/Hint/examples/Hint.md +54 -164
- package/docs/components/InlineEdit/examples/InlineEdit.md +132 -45
- package/docs/components/InputGroup/examples/InputGroup.md +38 -62
- package/docs/components/JumpLinks/examples/JumpLinks.md +189 -72
- package/docs/components/Label/examples/Label.md +2577 -406
- package/docs/components/Login/examples/Login.md +372 -334
- package/docs/components/Masthead/examples/masthead.md +515 -484
- package/docs/components/Menu/examples/Menu.md +77 -138
- package/docs/components/MenuToggle/examples/MenuToggle.md +289 -39
- package/docs/components/ModalBox/examples/ModalBox.md +158 -100
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +137 -97
- package/docs/components/Nav/examples/Navigation.css +2 -7
- package/docs/components/Nav/examples/Navigation.md +337 -270
- package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +515 -2076
- package/docs/components/NumberInput/examples/NumberInput.md +96 -48
- package/docs/components/OverflowMenu/examples/overflow-menu.css +4 -28
- package/docs/components/OverflowMenu/examples/overflow-menu.md +104 -159
- package/docs/components/Page/examples/Page.css +5 -9
- package/docs/components/Page/examples/Page.md +254 -181
- package/docs/components/Pagination/examples/Pagination.md +336 -756
- package/docs/components/Panel/examples/Panel.md +3 -2
- package/docs/components/Popover/examples/Popover.md +60 -15
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
- package/docs/components/Sidebar/examples/Sidebar.css +4 -2
- package/docs/components/Sidebar/examples/Sidebar.md +3 -3
- package/docs/components/Skeleton/examples/Skeleton.css +1 -1
- package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
- package/docs/components/Slider/examples/Slider.md +53 -45
- package/docs/components/Spinner/examples/Spinner.md +1 -1
- package/docs/components/Switch/examples/Switch.md +33 -148
- package/docs/components/Table/examples/Table.css +11 -6
- package/docs/components/Table/examples/Table.md +5302 -2464
- package/docs/components/Tabs/examples/Tabs.md +1267 -607
- package/docs/components/TextInputGroup/examples/TextInputGroup.css +8 -3
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +469 -278
- package/docs/components/Tile/examples/Tile.css +5 -5
- package/docs/components/Timestamp/examples/Timestamp.md +7 -1
- package/docs/components/ToggleGroup/examples/toggle-group.md +1 -3
- package/docs/components/Toolbar/examples/Toolbar.css +50 -39
- package/docs/components/Toolbar/examples/Toolbar.md +1562 -1200
- package/docs/components/Tooltip/examples/Tooltip.css +1 -1
- package/docs/components/TreeView/examples/TreeView.md +627 -49
- package/docs/components/Truncate/examples/Truncate.css +1 -2
- package/docs/components/Wizard/examples/Wizard.md +1595 -126
- package/docs/demos/AboutModal/examples/AboutModal.md +191 -198
- package/docs/demos/Alert/examples/Alert.md +924 -909
- package/docs/demos/BackToTop/examples/BackToTop.md +318 -327
- package/docs/demos/Banner/examples/Banner.md +641 -659
- package/docs/demos/Button/examples/Button.md +8 -8
- package/docs/demos/Card/examples/Card.css +6 -6
- package/docs/demos/Card/examples/Card.md +419 -606
- package/docs/demos/CardView/examples/CardView.md +822 -1435
- package/docs/demos/Dashboard/examples/Dashboard.md +1308 -1442
- package/docs/demos/DataList/examples/DataList.md +3210 -3424
- package/docs/demos/DescriptionList/examples/DescriptionList.md +899 -937
- package/docs/demos/Drawer/examples/Drawer.md +1165 -1176
- package/docs/demos/Form/examples/BasicForms.md +153 -88
- package/docs/demos/JumpLinks/examples/JumpLinks.md +1710 -1602
- package/docs/demos/Masthead/examples/Masthead.md +1719 -1583
- package/docs/demos/Modal/examples/Modal.md +1231 -1235
- package/docs/demos/Nav/examples/Nav.md +1216 -1230
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1910 -4577
- package/docs/demos/Page/examples/Page.css +11 -0
- package/docs/demos/Page/examples/Page.md +3753 -2540
- package/docs/demos/Panel/Panel.md +88 -0
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +16 -48
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5150 -6255
- package/docs/demos/Skeleton/examples/Skeleton.md +297 -304
- package/docs/demos/Table/examples/Table.md +14272 -15154
- package/docs/demos/Tabs/examples/Tabs.md +2821 -2891
- package/docs/demos/Toolbar/examples/Toolbar.css +10 -18
- package/docs/demos/Toolbar/examples/Toolbar.md +2487 -2663
- package/docs/demos/Wizard/examples/Wizard.md +3021 -2784
- package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
- package/docs/layouts/Flex/examples/Flex.css +4 -4
- package/docs/layouts/Flex/examples/Flex.md +50 -50
- package/docs/layouts/Gallery/examples/Gallery.css +4 -4
- package/docs/layouts/Gallery/examples/Gallery.md +6 -6
- package/docs/layouts/Grid/examples/Grid.css +3 -3
- package/docs/layouts/Grid/examples/Grid.md +33 -33
- package/docs/layouts/Level/examples/Level.css +5 -5
- package/docs/layouts/Split/examples/Split.css +4 -4
- package/docs/layouts/Stack/examples/Stack.css +5 -5
- package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
- package/docs/utilities/Alignment/examples/Alignment.css +6 -6
- package/docs/utilities/Alignment/examples/Alignment.md +5 -5
- package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
- package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
- package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
- package/docs/utilities/Display/examples/Display.css +3 -10
- package/docs/utilities/Display/examples/Display.md +21 -12
- package/docs/utilities/Flex/examples/Flex.css +7 -7
- package/docs/utilities/Flex/examples/Flex.md +82 -40
- package/docs/utilities/Float/examples/Float.css +5 -5
- package/docs/utilities/Float/examples/Float.md +6 -6
- package/docs/utilities/Sizing/examples/Sizing.css +6 -6
- package/docs/utilities/Sizing/examples/Sizing.md +60 -60
- package/docs/utilities/Spacing/examples/Spacing.css +3 -3
- package/docs/utilities/Spacing/examples/Spacing.md +37 -37
- package/docs/utilities/Text/examples/Text.md +78 -77
- package/icons/pficons.mjs +6 -0
- package/layouts/Bullseye/bullseye.css +4 -0
- package/layouts/Bullseye/bullseye.scss +5 -1
- package/layouts/Flex/flex.css +241 -237
- package/layouts/Flex/flex.scss +48 -44
- package/layouts/Gallery/gallery.css +15 -11
- package/layouts/Gallery/gallery.scss +9 -5
- package/layouts/Grid/grid.css +20 -16
- package/layouts/Grid/grid.scss +12 -8
- package/layouts/Level/level.css +5 -1
- package/layouts/Level/level.scss +6 -2
- package/layouts/Split/split.css +5 -1
- package/layouts/Split/split.scss +6 -2
- package/layouts/Stack/stack.css +5 -1
- package/layouts/Stack/stack.scss +6 -2
- package/layouts/_index.css +3461 -0
- package/layouts/_index.scss +8 -0
- package/package.json +39 -39
- package/patternfly-addons.css +2071 -2648
- package/patternfly-addons.scss +2 -12
- package/patternfly-base-no-globals.css +1429 -1645
- package/patternfly-base-no-globals.scss +5 -3
- package/patternfly-base.css +1511 -1723
- package/patternfly-base.scss +2 -6
- package/patternfly-charts.css +579 -240
- package/patternfly-charts.scss +352 -337
- package/patternfly-no-globals.css +19895 -23410
- package/patternfly-no-globals.scss +5 -4
- package/patternfly.css +19999 -23510
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/patternfly.scss +3 -4
- package/sass-utilities/_index.scss +6 -0
- package/sass-utilities/functions.scss +25 -25
- package/sass-utilities/{_init.scss → init.scss} +6 -6
- package/sass-utilities/mixins.scss +108 -72
- package/sass-utilities/{component-namespaces.scss → namespaces-components.scss} +3 -27
- package/sass-utilities/{layout-namespaces.scss → namespaces-layouts.scss} +3 -1
- package/sass-utilities/scss-variables.scss +49 -261
- package/utilities/Accessibility/accessibility.css +15 -15
- package/utilities/Accessibility/accessibility.scss +8 -6
- package/utilities/Alignment/alignment.css +29 -29
- package/utilities/Alignment/alignment.scss +6 -4
- package/utilities/BackgroundColor/background-color.css +67 -0
- package/utilities/BackgroundColor/background-color.scss +16 -0
- package/utilities/BoxShadow/box-shadow.css +15 -39
- package/utilities/BoxShadow/box-shadow.scss +19 -28
- package/utilities/Display/display.css +43 -5
- package/utilities/Display/display.scss +7 -4
- package/utilities/Flex/flex.css +50 -50
- package/utilities/Flex/flex.scss +21 -20
- package/utilities/Float/float.css +29 -29
- package/utilities/Float/float.scss +6 -6
- package/utilities/Sizing/sizing.css +58 -58
- package/utilities/Sizing/sizing.scss +23 -21
- package/utilities/Spacing/spacing.css +1372 -1372
- package/utilities/Spacing/spacing.scss +6 -6
- package/utilities/Text/text.css +419 -662
- package/utilities/Text/text.scss +81 -107
- package/utilities/_index.css +7815 -0
- package/utilities/_index.scss +10 -0
- package/assets/images/pf-logo-small.svg +0 -23
- package/assets/images/pf_logo_white.hbs +0 -35
- package/assets/images/pfbg-icon.svg +0 -1
- package/assets/pficon/pf-v5-pficon.woff2 +0 -0
- package/base/_base.scss +0 -2
- package/base/_chart-globals.scss +0 -415
- package/base/_common.scss +0 -50
- package/base/_fa-icons.scss +0 -33
- package/base/_fonts.scss +0 -136
- package/base/_icons.scss +0 -3
- package/base/_pficons.scss +0 -2
- package/base/_themes.scss +0 -43
- package/base/_variables.scss +0 -299
- package/base/patternfly-globals.css +0 -120
- package/base/patternfly-globals.scss +0 -2
- package/base/patternfly-icons.css +0 -4728
- package/base/patternfly-icons.scss +0 -2
- package/base/patternfly-themes.css +0 -82
- package/base/patternfly-themes.scss +0 -2
- package/base/themes/dark/_chart-globals.scss +0 -42
- package/base/themes/dark/_globals.scss +0 -5
- package/base/tokens/_workspace-overrides.scss +0 -7
- package/components/AppLauncher/app-launcher.css +0 -244
- package/components/AppLauncher/app-launcher.scss +0 -308
- package/components/AppLauncher/themes/dark/app-launcher.scss +0 -13
- package/components/Chip/chip-group.css +0 -93
- package/components/Chip/chip-group.scss +0 -98
- package/components/Chip/chip.css +0 -122
- package/components/Chip/chip.scss +0 -140
- package/components/Chip/themes/dark/chip.scss +0 -9
- package/components/ContextSelector/context-selector.css +0 -336
- package/components/ContextSelector/context-selector.scss +0 -384
- package/components/ContextSelector/themes/dark/context-selector.scss +0 -24
- package/components/Dropdown/dropdown.css +0 -686
- package/components/Dropdown/dropdown.scss +0 -820
- package/components/Dropdown/themes/dark/dropdown.scss +0 -32
- package/components/LogViewer/log-viewer.css +0 -197
- package/components/LogViewer/log-viewer.scss +0 -226
- package/components/LogViewer/themes/dark/log-viewer.scss +0 -7
- package/components/NotificationBadge/notification-badge.css +0 -87
- package/components/NotificationBadge/notification-badge.scss +0 -108
- package/components/OptionsMenu/options-menu.css +0 -279
- package/components/OptionsMenu/options-menu.scss +0 -332
- package/components/OptionsMenu/themes/dark/options-menu.scss +0 -21
- package/components/Select/select.css +0 -599
- package/components/Select/select.scss +0 -713
- package/components/Select/themes/dark/select.scss +0 -23
- package/components/_all.scss +0 -91
- package/docs/components/AppLauncher/deprecated/application-launcher.css +0 -25
- package/docs/components/AppLauncher/deprecated/application-launcher.md +0 -792
- package/docs/components/Breadcrumb/examples/Breadcrumb.css +0 -3
- package/docs/components/Chip/examples/Chip.md +0 -846
- package/docs/components/ContextSelector/deprecated/context-selector.css +0 -7
- package/docs/components/ContextSelector/deprecated/context-selector.md +0 -909
- package/docs/components/Dropdown/deprecated/Dropdown.css +0 -64
- package/docs/components/Dropdown/deprecated/Dropdown.md +0 -2920
- package/docs/components/LogViewer/examples/LogViewer.css +0 -17
- package/docs/components/LogViewer/examples/LogViewer.md +0 -5936
- package/docs/components/NotificationBadge/examples/NotificationBadge.md +0 -222
- package/docs/components/OptionsMenu/deprecated/options-menu.css +0 -25
- package/docs/components/OptionsMenu/deprecated/options-menu.md +0 -1014
- package/docs/components/Page/deprecated/PageHeader.css +0 -17
- package/docs/components/Page/deprecated/PageHeader.md +0 -261
- package/docs/components/Pagination/examples/Pagination.css +0 -3
- package/docs/components/Select/deprecated/Select.css +0 -56
- package/docs/components/Select/deprecated/Select.md +0 -3525
- package/docs/components/Tabs/examples/Tabs.css +0 -10
- package/docs/components/ToggleGroup/examples/toggle-group.css +0 -4
- package/docs/demos/ContextSelector/examples/ContextSelector.md +0 -1712
- package/docs/demos/Page/examples/Penta.md +0 -821
- package/docs/utilities/Text/examples/Text.css +0 -0
- package/layouts/_all.scss +0 -7
- package/patternfly-base-no-globals-theme-dark-unversioned.css +0 -6276
- package/patternfly-base-no-globals-theme-dark-unversioned.scss +0 -11
- package/patternfly-base-theme-dark-unversioned.css +0 -6393
- package/patternfly-base-theme-dark-unversioned.scss +0 -5
- package/patternfly-charts-theme-dark-unversioned.css +0 -70
- package/patternfly-charts-theme-dark-unversioned.scss +0 -8
- package/patternfly-charts-theme-dark.css +0 -70
- package/patternfly-charts-theme-dark.scss +0 -8
- package/patternfly-theme-dark-unversioned.css +0 -35533
- package/patternfly-theme-dark-unversioned.scss +0 -6
- package/patternfly-theme-dark.css +0 -0
- package/patternfly-theme-dark.scss +0 -1
- package/sass-utilities/_all.scss +0 -9
- package/sass-utilities/colors.scss +0 -82
- package/sass-utilities/div.import.scss +0 -3
- package/sass-utilities/div.scss +0 -4
- package/sass-utilities/placeholders.scss +0 -72
- package/sass-utilities/themes/dark/_all.scss +0 -4
- package/sass-utilities/themes/dark/colors.scss +0 -16
- package/sass-utilities/themes/dark/mixins.scss +0 -7
- package/sass-utilities/themes/dark/placeholders.scss +0 -5
- package/sass-utilities/themes/dark/scss-variables.scss +0 -92
- package/themes/dark/_patternfly-charts-theme-dark.scss +0 -98
- package/utilities/BackgroundColor/BackgroundColor.css +0 -414
- package/utilities/BackgroundColor/BackgroundColor.scss +0 -64
- package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
- package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
- package/utilities/Text/themes/dark/text.css +0 -0
- package/utilities/Text/themes/dark/text.scss +0 -33
|
@@ -4,14 +4,19 @@ section: components
|
|
|
4
4
|
cssPrefix: pf-v6-c-tree-view
|
|
5
5
|
---## Examples
|
|
6
6
|
|
|
7
|
-
###
|
|
7
|
+
### Single selectable
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
10
|
<div class="pf-v6-c-tree-view">
|
|
11
|
-
<ul
|
|
11
|
+
<ul
|
|
12
|
+
class="pf-v6-c-tree-view__list"
|
|
13
|
+
role="tree"
|
|
14
|
+
aria-label="Tree View single selectable example"
|
|
15
|
+
>
|
|
12
16
|
<li
|
|
13
17
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
14
18
|
role="treeitem"
|
|
19
|
+
aria-selected="false"
|
|
15
20
|
aria-expanded="true"
|
|
16
21
|
tabindex="0"
|
|
17
22
|
>
|
|
@@ -31,6 +36,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
31
36
|
<li
|
|
32
37
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
33
38
|
role="treeitem"
|
|
39
|
+
aria-selected="false"
|
|
34
40
|
aria-expanded="true"
|
|
35
41
|
tabindex="0"
|
|
36
42
|
>
|
|
@@ -50,6 +56,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
50
56
|
<li
|
|
51
57
|
class="pf-v6-c-tree-view__list-item"
|
|
52
58
|
role="treeitem"
|
|
59
|
+
aria-selected="false"
|
|
53
60
|
tabindex="-1"
|
|
54
61
|
>
|
|
55
62
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -63,6 +70,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
63
70
|
<li
|
|
64
71
|
class="pf-v6-c-tree-view__list-item"
|
|
65
72
|
role="treeitem"
|
|
73
|
+
aria-selected="true"
|
|
66
74
|
tabindex="-1"
|
|
67
75
|
>
|
|
68
76
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -76,6 +84,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
76
84
|
<li
|
|
77
85
|
class="pf-v6-c-tree-view__list-item"
|
|
78
86
|
role="treeitem"
|
|
87
|
+
aria-selected="false"
|
|
79
88
|
aria-expanded="false"
|
|
80
89
|
tabindex="0"
|
|
81
90
|
>
|
|
@@ -97,6 +106,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
97
106
|
<li
|
|
98
107
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
99
108
|
role="treeitem"
|
|
109
|
+
aria-selected="false"
|
|
100
110
|
aria-expanded="true"
|
|
101
111
|
tabindex="0"
|
|
102
112
|
>
|
|
@@ -116,6 +126,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
116
126
|
<li
|
|
117
127
|
class="pf-v6-c-tree-view__list-item"
|
|
118
128
|
role="treeitem"
|
|
129
|
+
aria-selected="false"
|
|
119
130
|
tabindex="-1"
|
|
120
131
|
>
|
|
121
132
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -129,6 +140,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
129
140
|
<li
|
|
130
141
|
class="pf-v6-c-tree-view__list-item"
|
|
131
142
|
role="treeitem"
|
|
143
|
+
aria-selected="false"
|
|
132
144
|
aria-expanded="false"
|
|
133
145
|
tabindex="0"
|
|
134
146
|
>
|
|
@@ -148,6 +160,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
148
160
|
<li
|
|
149
161
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
150
162
|
role="treeitem"
|
|
163
|
+
aria-selected="false"
|
|
151
164
|
aria-expanded="true"
|
|
152
165
|
tabindex="0"
|
|
153
166
|
>
|
|
@@ -167,6 +180,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
167
180
|
<li
|
|
168
181
|
class="pf-v6-c-tree-view__list-item"
|
|
169
182
|
role="treeitem"
|
|
183
|
+
aria-selected="false"
|
|
170
184
|
aria-expanded="false"
|
|
171
185
|
tabindex="0"
|
|
172
186
|
>
|
|
@@ -186,6 +200,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
186
200
|
<li
|
|
187
201
|
class="pf-v6-c-tree-view__list-item"
|
|
188
202
|
role="treeitem"
|
|
203
|
+
aria-selected="false"
|
|
189
204
|
tabindex="-1"
|
|
190
205
|
>
|
|
191
206
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -199,6 +214,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
199
214
|
<li
|
|
200
215
|
class="pf-v6-c-tree-view__list-item"
|
|
201
216
|
role="treeitem"
|
|
217
|
+
aria-selected="false"
|
|
202
218
|
tabindex="-1"
|
|
203
219
|
>
|
|
204
220
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -218,6 +234,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
218
234
|
<li
|
|
219
235
|
class="pf-v6-c-tree-view__list-item"
|
|
220
236
|
role="treeitem"
|
|
237
|
+
aria-selected="false"
|
|
221
238
|
aria-expanded="false"
|
|
222
239
|
tabindex="0"
|
|
223
240
|
>
|
|
@@ -237,6 +254,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
237
254
|
<li
|
|
238
255
|
class="pf-v6-c-tree-view__list-item"
|
|
239
256
|
role="treeitem"
|
|
257
|
+
aria-selected="false"
|
|
240
258
|
aria-expanded="false"
|
|
241
259
|
tabindex="0"
|
|
242
260
|
>
|
|
@@ -256,6 +274,304 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
256
274
|
<li
|
|
257
275
|
class="pf-v6-c-tree-view__list-item"
|
|
258
276
|
role="treeitem"
|
|
277
|
+
aria-selected="false"
|
|
278
|
+
aria-expanded="false"
|
|
279
|
+
tabindex="0"
|
|
280
|
+
>
|
|
281
|
+
<div class="pf-v6-c-tree-view__content">
|
|
282
|
+
<button class="pf-v6-c-tree-view__node">
|
|
283
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
284
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
285
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
286
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
287
|
+
</span>
|
|
288
|
+
</span>
|
|
289
|
+
<span
|
|
290
|
+
class="pf-v6-c-tree-view__node-text"
|
|
291
|
+
>This is a really really really long folder name that overflows from the width of the container.</span>
|
|
292
|
+
</span>
|
|
293
|
+
</button>
|
|
294
|
+
</div>
|
|
295
|
+
</li>
|
|
296
|
+
</ul>
|
|
297
|
+
</div>
|
|
298
|
+
|
|
299
|
+
```
|
|
300
|
+
|
|
301
|
+
### Multiselectable
|
|
302
|
+
|
|
303
|
+
A tree view can be setup to allow multiple nodes to be selected. When a tree view is intended to allow multiple selection, `aria-multiselectable="true"` must be passed to the root `ul[role="tree"]` element.
|
|
304
|
+
|
|
305
|
+
```html
|
|
306
|
+
<div class="pf-v6-c-tree-view">
|
|
307
|
+
<ul
|
|
308
|
+
class="pf-v6-c-tree-view__list"
|
|
309
|
+
role="tree"
|
|
310
|
+
aria-multiselectable="true"
|
|
311
|
+
aria-label="Tree View multiselectable example"
|
|
312
|
+
>
|
|
313
|
+
<li
|
|
314
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
315
|
+
role="treeitem"
|
|
316
|
+
aria-selected="false"
|
|
317
|
+
aria-expanded="true"
|
|
318
|
+
tabindex="0"
|
|
319
|
+
>
|
|
320
|
+
<div class="pf-v6-c-tree-view__content">
|
|
321
|
+
<button class="pf-v6-c-tree-view__node">
|
|
322
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
323
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
324
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
325
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
326
|
+
</span>
|
|
327
|
+
</span>
|
|
328
|
+
<span class="pf-v6-c-tree-view__node-text">Application launcher</span>
|
|
329
|
+
</span>
|
|
330
|
+
</button>
|
|
331
|
+
</div>
|
|
332
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
333
|
+
<li
|
|
334
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
335
|
+
role="treeitem"
|
|
336
|
+
aria-selected="false"
|
|
337
|
+
aria-expanded="true"
|
|
338
|
+
tabindex="0"
|
|
339
|
+
>
|
|
340
|
+
<div class="pf-v6-c-tree-view__content">
|
|
341
|
+
<button class="pf-v6-c-tree-view__node">
|
|
342
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
343
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
344
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
345
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
346
|
+
</span>
|
|
347
|
+
</span>
|
|
348
|
+
<span class="pf-v6-c-tree-view__node-text">Application 1</span>
|
|
349
|
+
</span>
|
|
350
|
+
</button>
|
|
351
|
+
</div>
|
|
352
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
353
|
+
<li
|
|
354
|
+
class="pf-v6-c-tree-view__list-item"
|
|
355
|
+
role="treeitem"
|
|
356
|
+
aria-selected="false"
|
|
357
|
+
tabindex="-1"
|
|
358
|
+
>
|
|
359
|
+
<div class="pf-v6-c-tree-view__content">
|
|
360
|
+
<button class="pf-v6-c-tree-view__node">
|
|
361
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
362
|
+
<span class="pf-v6-c-tree-view__node-text">Settings</span>
|
|
363
|
+
</span>
|
|
364
|
+
</button>
|
|
365
|
+
</div>
|
|
366
|
+
</li>
|
|
367
|
+
<li
|
|
368
|
+
class="pf-v6-c-tree-view__list-item"
|
|
369
|
+
role="treeitem"
|
|
370
|
+
aria-selected="true"
|
|
371
|
+
tabindex="-1"
|
|
372
|
+
>
|
|
373
|
+
<div class="pf-v6-c-tree-view__content">
|
|
374
|
+
<button class="pf-v6-c-tree-view__node pf-m-current">
|
|
375
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
376
|
+
<span class="pf-v6-c-tree-view__node-text">Current</span>
|
|
377
|
+
</span>
|
|
378
|
+
</button>
|
|
379
|
+
</div>
|
|
380
|
+
</li>
|
|
381
|
+
<li
|
|
382
|
+
class="pf-v6-c-tree-view__list-item"
|
|
383
|
+
role="treeitem"
|
|
384
|
+
aria-selected="false"
|
|
385
|
+
aria-expanded="false"
|
|
386
|
+
tabindex="0"
|
|
387
|
+
>
|
|
388
|
+
<div class="pf-v6-c-tree-view__content">
|
|
389
|
+
<button class="pf-v6-c-tree-view__node">
|
|
390
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
391
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
392
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
393
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
394
|
+
</span>
|
|
395
|
+
</span>
|
|
396
|
+
<span class="pf-v6-c-tree-view__node-text">Loader</span>
|
|
397
|
+
</span>
|
|
398
|
+
</button>
|
|
399
|
+
</div>
|
|
400
|
+
</li>
|
|
401
|
+
</ul>
|
|
402
|
+
</li>
|
|
403
|
+
<li
|
|
404
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
405
|
+
role="treeitem"
|
|
406
|
+
aria-selected="false"
|
|
407
|
+
aria-expanded="true"
|
|
408
|
+
tabindex="0"
|
|
409
|
+
>
|
|
410
|
+
<div class="pf-v6-c-tree-view__content">
|
|
411
|
+
<button class="pf-v6-c-tree-view__node">
|
|
412
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
413
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
414
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
415
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
416
|
+
</span>
|
|
417
|
+
</span>
|
|
418
|
+
<span class="pf-v6-c-tree-view__node-text">Application 2</span>
|
|
419
|
+
</span>
|
|
420
|
+
</button>
|
|
421
|
+
</div>
|
|
422
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
423
|
+
<li
|
|
424
|
+
class="pf-v6-c-tree-view__list-item"
|
|
425
|
+
role="treeitem"
|
|
426
|
+
aria-selected="false"
|
|
427
|
+
tabindex="-1"
|
|
428
|
+
>
|
|
429
|
+
<div class="pf-v6-c-tree-view__content">
|
|
430
|
+
<button class="pf-v6-c-tree-view__node">
|
|
431
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
432
|
+
<span class="pf-v6-c-tree-view__node-text">Settings</span>
|
|
433
|
+
</span>
|
|
434
|
+
</button>
|
|
435
|
+
</div>
|
|
436
|
+
</li>
|
|
437
|
+
<li
|
|
438
|
+
class="pf-v6-c-tree-view__list-item"
|
|
439
|
+
role="treeitem"
|
|
440
|
+
aria-selected="false"
|
|
441
|
+
aria-expanded="false"
|
|
442
|
+
tabindex="0"
|
|
443
|
+
>
|
|
444
|
+
<div class="pf-v6-c-tree-view__content">
|
|
445
|
+
<button class="pf-v6-c-tree-view__node">
|
|
446
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
447
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
448
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
449
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
450
|
+
</span>
|
|
451
|
+
</span>
|
|
452
|
+
<span class="pf-v6-c-tree-view__node-text">Settings</span>
|
|
453
|
+
</span>
|
|
454
|
+
</button>
|
|
455
|
+
</div>
|
|
456
|
+
</li>
|
|
457
|
+
<li
|
|
458
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
459
|
+
role="treeitem"
|
|
460
|
+
aria-selected="false"
|
|
461
|
+
aria-expanded="true"
|
|
462
|
+
tabindex="0"
|
|
463
|
+
>
|
|
464
|
+
<div class="pf-v6-c-tree-view__content">
|
|
465
|
+
<button class="pf-v6-c-tree-view__node">
|
|
466
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
467
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
468
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
469
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
470
|
+
</span>
|
|
471
|
+
</span>
|
|
472
|
+
<span class="pf-v6-c-tree-view__node-text">Loader</span>
|
|
473
|
+
</span>
|
|
474
|
+
</button>
|
|
475
|
+
</div>
|
|
476
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
477
|
+
<li
|
|
478
|
+
class="pf-v6-c-tree-view__list-item"
|
|
479
|
+
role="treeitem"
|
|
480
|
+
aria-selected="false"
|
|
481
|
+
aria-expanded="false"
|
|
482
|
+
tabindex="0"
|
|
483
|
+
>
|
|
484
|
+
<div class="pf-v6-c-tree-view__content">
|
|
485
|
+
<button class="pf-v6-c-tree-view__node">
|
|
486
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
487
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
488
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
489
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
490
|
+
</span>
|
|
491
|
+
</span>
|
|
492
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 1</span>
|
|
493
|
+
</span>
|
|
494
|
+
</button>
|
|
495
|
+
</div>
|
|
496
|
+
</li>
|
|
497
|
+
<li
|
|
498
|
+
class="pf-v6-c-tree-view__list-item"
|
|
499
|
+
role="treeitem"
|
|
500
|
+
aria-selected="true"
|
|
501
|
+
tabindex="-1"
|
|
502
|
+
>
|
|
503
|
+
<div class="pf-v6-c-tree-view__content">
|
|
504
|
+
<button class="pf-v6-c-tree-view__node pf-m-current">
|
|
505
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
506
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 2</span>
|
|
507
|
+
</span>
|
|
508
|
+
</button>
|
|
509
|
+
</div>
|
|
510
|
+
</li>
|
|
511
|
+
<li
|
|
512
|
+
class="pf-v6-c-tree-view__list-item"
|
|
513
|
+
role="treeitem"
|
|
514
|
+
aria-selected="false"
|
|
515
|
+
tabindex="-1"
|
|
516
|
+
>
|
|
517
|
+
<div class="pf-v6-c-tree-view__content">
|
|
518
|
+
<button class="pf-v6-c-tree-view__node">
|
|
519
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
520
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 3</span>
|
|
521
|
+
</span>
|
|
522
|
+
</button>
|
|
523
|
+
</div>
|
|
524
|
+
</li>
|
|
525
|
+
</ul>
|
|
526
|
+
</li>
|
|
527
|
+
</ul>
|
|
528
|
+
</li>
|
|
529
|
+
</ul>
|
|
530
|
+
</li>
|
|
531
|
+
<li
|
|
532
|
+
class="pf-v6-c-tree-view__list-item"
|
|
533
|
+
role="treeitem"
|
|
534
|
+
aria-selected="false"
|
|
535
|
+
aria-expanded="false"
|
|
536
|
+
tabindex="0"
|
|
537
|
+
>
|
|
538
|
+
<div class="pf-v6-c-tree-view__content">
|
|
539
|
+
<button class="pf-v6-c-tree-view__node">
|
|
540
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
541
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
542
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
543
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
544
|
+
</span>
|
|
545
|
+
</span>
|
|
546
|
+
<span class="pf-v6-c-tree-view__node-text">Cost management</span>
|
|
547
|
+
</span>
|
|
548
|
+
</button>
|
|
549
|
+
</div>
|
|
550
|
+
</li>
|
|
551
|
+
<li
|
|
552
|
+
class="pf-v6-c-tree-view__list-item"
|
|
553
|
+
role="treeitem"
|
|
554
|
+
aria-selected="false"
|
|
555
|
+
aria-expanded="false"
|
|
556
|
+
tabindex="0"
|
|
557
|
+
>
|
|
558
|
+
<div class="pf-v6-c-tree-view__content">
|
|
559
|
+
<button class="pf-v6-c-tree-view__node">
|
|
560
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
561
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
562
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
563
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
564
|
+
</span>
|
|
565
|
+
</span>
|
|
566
|
+
<span class="pf-v6-c-tree-view__node-text">Sources</span>
|
|
567
|
+
</span>
|
|
568
|
+
</button>
|
|
569
|
+
</div>
|
|
570
|
+
</li>
|
|
571
|
+
<li
|
|
572
|
+
class="pf-v6-c-tree-view__list-item"
|
|
573
|
+
role="treeitem"
|
|
574
|
+
aria-selected="false"
|
|
259
575
|
aria-expanded="false"
|
|
260
576
|
tabindex="0"
|
|
261
577
|
>
|
|
@@ -281,6 +597,8 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
281
597
|
|
|
282
598
|
### With search
|
|
283
599
|
|
|
600
|
+
A search input can be used to filter tree view items. It is recommended that a tree view with more than 7 nodes includes a search input.
|
|
601
|
+
|
|
284
602
|
```html
|
|
285
603
|
<div class="pf-v6-c-tree-view">
|
|
286
604
|
<div class="pf-v6-c-tree-view__search">
|
|
@@ -302,10 +620,15 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
302
620
|
</div>
|
|
303
621
|
</div>
|
|
304
622
|
<hr class="pf-v6-c-divider" />
|
|
305
|
-
<ul
|
|
623
|
+
<ul
|
|
624
|
+
class="pf-v6-c-tree-view__list"
|
|
625
|
+
role="tree"
|
|
626
|
+
aria-label="Tree View with search example"
|
|
627
|
+
>
|
|
306
628
|
<li
|
|
307
629
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
308
630
|
role="treeitem"
|
|
631
|
+
aria-selected="false"
|
|
309
632
|
aria-expanded="true"
|
|
310
633
|
tabindex="0"
|
|
311
634
|
>
|
|
@@ -325,6 +648,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
325
648
|
<li
|
|
326
649
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
327
650
|
role="treeitem"
|
|
651
|
+
aria-selected="false"
|
|
328
652
|
aria-expanded="true"
|
|
329
653
|
tabindex="0"
|
|
330
654
|
>
|
|
@@ -344,6 +668,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
344
668
|
<li
|
|
345
669
|
class="pf-v6-c-tree-view__list-item"
|
|
346
670
|
role="treeitem"
|
|
671
|
+
aria-selected="false"
|
|
347
672
|
tabindex="-1"
|
|
348
673
|
>
|
|
349
674
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -357,6 +682,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
357
682
|
<li
|
|
358
683
|
class="pf-v6-c-tree-view__list-item"
|
|
359
684
|
role="treeitem"
|
|
685
|
+
aria-selected="true"
|
|
360
686
|
tabindex="-1"
|
|
361
687
|
>
|
|
362
688
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -372,6 +698,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
372
698
|
<li
|
|
373
699
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
374
700
|
role="treeitem"
|
|
701
|
+
aria-selected="false"
|
|
375
702
|
aria-expanded="true"
|
|
376
703
|
tabindex="0"
|
|
377
704
|
>
|
|
@@ -391,6 +718,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
391
718
|
<li
|
|
392
719
|
class="pf-v6-c-tree-view__list-item"
|
|
393
720
|
role="treeitem"
|
|
721
|
+
aria-selected="false"
|
|
394
722
|
aria-expanded="false"
|
|
395
723
|
tabindex="0"
|
|
396
724
|
>
|
|
@@ -410,6 +738,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
410
738
|
<li
|
|
411
739
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
412
740
|
role="treeitem"
|
|
741
|
+
aria-selected="false"
|
|
413
742
|
aria-expanded="true"
|
|
414
743
|
tabindex="0"
|
|
415
744
|
>
|
|
@@ -429,6 +758,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
429
758
|
<li
|
|
430
759
|
class="pf-v6-c-tree-view__list-item"
|
|
431
760
|
role="treeitem"
|
|
761
|
+
aria-selected="false"
|
|
432
762
|
aria-expanded="false"
|
|
433
763
|
tabindex="0"
|
|
434
764
|
>
|
|
@@ -448,6 +778,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
448
778
|
<li
|
|
449
779
|
class="pf-v6-c-tree-view__list-item"
|
|
450
780
|
role="treeitem"
|
|
781
|
+
aria-selected="false"
|
|
451
782
|
tabindex="-1"
|
|
452
783
|
>
|
|
453
784
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -461,6 +792,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
461
792
|
<li
|
|
462
793
|
class="pf-v6-c-tree-view__list-item"
|
|
463
794
|
role="treeitem"
|
|
795
|
+
aria-selected="false"
|
|
464
796
|
tabindex="-1"
|
|
465
797
|
>
|
|
466
798
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -480,6 +812,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
480
812
|
<li
|
|
481
813
|
class="pf-v6-c-tree-view__list-item"
|
|
482
814
|
role="treeitem"
|
|
815
|
+
aria-selected="false"
|
|
483
816
|
aria-expanded="false"
|
|
484
817
|
tabindex="0"
|
|
485
818
|
>
|
|
@@ -499,6 +832,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
499
832
|
<li
|
|
500
833
|
class="pf-v6-c-tree-view__list-item"
|
|
501
834
|
role="treeitem"
|
|
835
|
+
aria-selected="false"
|
|
502
836
|
aria-expanded="false"
|
|
503
837
|
tabindex="0"
|
|
504
838
|
>
|
|
@@ -518,6 +852,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
518
852
|
<li
|
|
519
853
|
class="pf-v6-c-tree-view__list-item"
|
|
520
854
|
role="treeitem"
|
|
855
|
+
aria-selected="false"
|
|
521
856
|
aria-expanded="false"
|
|
522
857
|
tabindex="0"
|
|
523
858
|
>
|
|
@@ -545,10 +880,15 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
545
880
|
|
|
546
881
|
```html
|
|
547
882
|
<div class="pf-v6-c-tree-view">
|
|
548
|
-
<ul
|
|
883
|
+
<ul
|
|
884
|
+
class="pf-v6-c-tree-view__list"
|
|
885
|
+
role="tree"
|
|
886
|
+
aria-label="Tree View with checkboxes example"
|
|
887
|
+
>
|
|
549
888
|
<li
|
|
550
889
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
551
890
|
role="treeitem"
|
|
891
|
+
aria-checked="false"
|
|
552
892
|
aria-expanded="true"
|
|
553
893
|
tabindex="0"
|
|
554
894
|
>
|
|
@@ -591,6 +931,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
591
931
|
<li
|
|
592
932
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
593
933
|
role="treeitem"
|
|
934
|
+
aria-checked="true"
|
|
594
935
|
aria-expanded="true"
|
|
595
936
|
tabindex="0"
|
|
596
937
|
>
|
|
@@ -634,6 +975,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
634
975
|
<li
|
|
635
976
|
class="pf-v6-c-tree-view__list-item"
|
|
636
977
|
role="treeitem"
|
|
978
|
+
aria-checked="true"
|
|
637
979
|
tabindex="-1"
|
|
638
980
|
>
|
|
639
981
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -666,6 +1008,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
666
1008
|
<li
|
|
667
1009
|
class="pf-v6-c-tree-view__list-item"
|
|
668
1010
|
role="treeitem"
|
|
1011
|
+
aria-checked="true"
|
|
669
1012
|
tabindex="-1"
|
|
670
1013
|
>
|
|
671
1014
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -698,6 +1041,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
698
1041
|
<li
|
|
699
1042
|
class="pf-v6-c-tree-view__list-item"
|
|
700
1043
|
role="treeitem"
|
|
1044
|
+
aria-checked="true"
|
|
701
1045
|
aria-expanded="false"
|
|
702
1046
|
tabindex="0"
|
|
703
1047
|
>
|
|
@@ -743,6 +1087,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
743
1087
|
<li
|
|
744
1088
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
745
1089
|
role="treeitem"
|
|
1090
|
+
aria-checked="false"
|
|
746
1091
|
aria-expanded="true"
|
|
747
1092
|
tabindex="0"
|
|
748
1093
|
>
|
|
@@ -785,6 +1130,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
785
1130
|
<li
|
|
786
1131
|
class="pf-v6-c-tree-view__list-item"
|
|
787
1132
|
role="treeitem"
|
|
1133
|
+
aria-checked="false"
|
|
788
1134
|
aria-expanded="false"
|
|
789
1135
|
tabindex="0"
|
|
790
1136
|
>
|
|
@@ -827,6 +1173,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
827
1173
|
<li
|
|
828
1174
|
class="pf-v6-c-tree-view__list-item"
|
|
829
1175
|
role="treeitem"
|
|
1176
|
+
aria-checked="false"
|
|
830
1177
|
tabindex="-1"
|
|
831
1178
|
>
|
|
832
1179
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -858,6 +1205,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
858
1205
|
<li
|
|
859
1206
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
860
1207
|
role="treeitem"
|
|
1208
|
+
aria-checked="false"
|
|
861
1209
|
aria-expanded="true"
|
|
862
1210
|
tabindex="0"
|
|
863
1211
|
>
|
|
@@ -900,6 +1248,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
900
1248
|
<li
|
|
901
1249
|
class="pf-v6-c-tree-view__list-item"
|
|
902
1250
|
role="treeitem"
|
|
1251
|
+
aria-checked="true"
|
|
903
1252
|
aria-expanded="false"
|
|
904
1253
|
tabindex="0"
|
|
905
1254
|
>
|
|
@@ -925,6 +1274,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
925
1274
|
<input
|
|
926
1275
|
class="pf-v6-c-check__input"
|
|
927
1276
|
type="checkbox"
|
|
1277
|
+
checked
|
|
928
1278
|
id="check-tree-view-checkboxes-10"
|
|
929
1279
|
aria-label="Select"
|
|
930
1280
|
aria-labelledby="check-tree-view-checkboxes-10 text-tree-view-checkboxes-10"
|
|
@@ -942,6 +1292,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
942
1292
|
<li
|
|
943
1293
|
class="pf-v6-c-tree-view__list-item"
|
|
944
1294
|
role="treeitem"
|
|
1295
|
+
aria-checked="true"
|
|
945
1296
|
tabindex="-1"
|
|
946
1297
|
>
|
|
947
1298
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -974,6 +1325,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
974
1325
|
<li
|
|
975
1326
|
class="pf-v6-c-tree-view__list-item"
|
|
976
1327
|
role="treeitem"
|
|
1328
|
+
aria-checked="false"
|
|
977
1329
|
tabindex="-1"
|
|
978
1330
|
>
|
|
979
1331
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -1011,6 +1363,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1011
1363
|
<li
|
|
1012
1364
|
class="pf-v6-c-tree-view__list-item"
|
|
1013
1365
|
role="treeitem"
|
|
1366
|
+
aria-checked="false"
|
|
1014
1367
|
aria-expanded="false"
|
|
1015
1368
|
tabindex="0"
|
|
1016
1369
|
>
|
|
@@ -1053,6 +1406,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1053
1406
|
<li
|
|
1054
1407
|
class="pf-v6-c-tree-view__list-item"
|
|
1055
1408
|
role="treeitem"
|
|
1409
|
+
aria-checked="false"
|
|
1056
1410
|
aria-expanded="false"
|
|
1057
1411
|
tabindex="0"
|
|
1058
1412
|
>
|
|
@@ -1095,6 +1449,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1095
1449
|
<li
|
|
1096
1450
|
class="pf-v6-c-tree-view__list-item"
|
|
1097
1451
|
role="treeitem"
|
|
1452
|
+
aria-checked="true"
|
|
1098
1453
|
aria-expanded="false"
|
|
1099
1454
|
tabindex="0"
|
|
1100
1455
|
>
|
|
@@ -1144,10 +1499,15 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1144
1499
|
|
|
1145
1500
|
```html
|
|
1146
1501
|
<div class="pf-v6-c-tree-view">
|
|
1147
|
-
<ul
|
|
1502
|
+
<ul
|
|
1503
|
+
class="pf-v6-c-tree-view__list"
|
|
1504
|
+
role="tree"
|
|
1505
|
+
aria-label="Tree View with icons example"
|
|
1506
|
+
>
|
|
1148
1507
|
<li
|
|
1149
1508
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1150
1509
|
role="treeitem"
|
|
1510
|
+
aria-selected="false"
|
|
1151
1511
|
aria-expanded="true"
|
|
1152
1512
|
tabindex="0"
|
|
1153
1513
|
>
|
|
@@ -1170,6 +1530,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1170
1530
|
<li
|
|
1171
1531
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1172
1532
|
role="treeitem"
|
|
1533
|
+
aria-selected="false"
|
|
1173
1534
|
aria-expanded="true"
|
|
1174
1535
|
tabindex="0"
|
|
1175
1536
|
>
|
|
@@ -1192,6 +1553,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1192
1553
|
<li
|
|
1193
1554
|
class="pf-v6-c-tree-view__list-item"
|
|
1194
1555
|
role="treeitem"
|
|
1556
|
+
aria-selected="false"
|
|
1195
1557
|
tabindex="-1"
|
|
1196
1558
|
>
|
|
1197
1559
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -1208,6 +1570,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1208
1570
|
<li
|
|
1209
1571
|
class="pf-v6-c-tree-view__list-item"
|
|
1210
1572
|
role="treeitem"
|
|
1573
|
+
aria-selected="true"
|
|
1211
1574
|
tabindex="-1"
|
|
1212
1575
|
>
|
|
1213
1576
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -1226,6 +1589,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1226
1589
|
<li
|
|
1227
1590
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1228
1591
|
role="treeitem"
|
|
1592
|
+
aria-selected="false"
|
|
1229
1593
|
aria-expanded="true"
|
|
1230
1594
|
tabindex="0"
|
|
1231
1595
|
>
|
|
@@ -1248,6 +1612,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1248
1612
|
<li
|
|
1249
1613
|
class="pf-v6-c-tree-view__list-item"
|
|
1250
1614
|
role="treeitem"
|
|
1615
|
+
aria-selected="false"
|
|
1251
1616
|
aria-expanded="false"
|
|
1252
1617
|
tabindex="0"
|
|
1253
1618
|
>
|
|
@@ -1270,6 +1635,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1270
1635
|
<li
|
|
1271
1636
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1272
1637
|
role="treeitem"
|
|
1638
|
+
aria-selected="false"
|
|
1273
1639
|
aria-expanded="true"
|
|
1274
1640
|
tabindex="0"
|
|
1275
1641
|
>
|
|
@@ -1292,6 +1658,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1292
1658
|
<li
|
|
1293
1659
|
class="pf-v6-c-tree-view__list-item"
|
|
1294
1660
|
role="treeitem"
|
|
1661
|
+
aria-selected="false"
|
|
1295
1662
|
aria-expanded="false"
|
|
1296
1663
|
tabindex="0"
|
|
1297
1664
|
>
|
|
@@ -1314,6 +1681,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1314
1681
|
<li
|
|
1315
1682
|
class="pf-v6-c-tree-view__list-item"
|
|
1316
1683
|
role="treeitem"
|
|
1684
|
+
aria-selected="false"
|
|
1317
1685
|
tabindex="-1"
|
|
1318
1686
|
>
|
|
1319
1687
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -1330,6 +1698,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1330
1698
|
<li
|
|
1331
1699
|
class="pf-v6-c-tree-view__list-item"
|
|
1332
1700
|
role="treeitem"
|
|
1701
|
+
aria-selected="false"
|
|
1333
1702
|
tabindex="-1"
|
|
1334
1703
|
>
|
|
1335
1704
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -1352,6 +1721,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1352
1721
|
<li
|
|
1353
1722
|
class="pf-v6-c-tree-view__list-item"
|
|
1354
1723
|
role="treeitem"
|
|
1724
|
+
aria-selected="false"
|
|
1355
1725
|
aria-expanded="false"
|
|
1356
1726
|
tabindex="0"
|
|
1357
1727
|
>
|
|
@@ -1374,6 +1744,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1374
1744
|
<li
|
|
1375
1745
|
class="pf-v6-c-tree-view__list-item"
|
|
1376
1746
|
role="treeitem"
|
|
1747
|
+
aria-selected="false"
|
|
1377
1748
|
aria-expanded="false"
|
|
1378
1749
|
tabindex="0"
|
|
1379
1750
|
>
|
|
@@ -1396,6 +1767,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1396
1767
|
<li
|
|
1397
1768
|
class="pf-v6-c-tree-view__list-item"
|
|
1398
1769
|
role="treeitem"
|
|
1770
|
+
aria-selected="false"
|
|
1399
1771
|
aria-expanded="false"
|
|
1400
1772
|
tabindex="0"
|
|
1401
1773
|
>
|
|
@@ -1426,10 +1798,15 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1426
1798
|
|
|
1427
1799
|
```html
|
|
1428
1800
|
<div class="pf-v6-c-tree-view">
|
|
1429
|
-
<ul
|
|
1801
|
+
<ul
|
|
1802
|
+
class="pf-v6-c-tree-view__list"
|
|
1803
|
+
role="tree"
|
|
1804
|
+
aria-label="Tree View with badges example"
|
|
1805
|
+
>
|
|
1430
1806
|
<li
|
|
1431
1807
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1432
1808
|
role="treeitem"
|
|
1809
|
+
aria-selected="false"
|
|
1433
1810
|
aria-expanded="true"
|
|
1434
1811
|
tabindex="0"
|
|
1435
1812
|
>
|
|
@@ -1452,6 +1829,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1452
1829
|
<li
|
|
1453
1830
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1454
1831
|
role="treeitem"
|
|
1832
|
+
aria-selected="false"
|
|
1455
1833
|
aria-expanded="true"
|
|
1456
1834
|
tabindex="0"
|
|
1457
1835
|
>
|
|
@@ -1474,6 +1852,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1474
1852
|
<li
|
|
1475
1853
|
class="pf-v6-c-tree-view__list-item"
|
|
1476
1854
|
role="treeitem"
|
|
1855
|
+
aria-selected="false"
|
|
1477
1856
|
tabindex="-1"
|
|
1478
1857
|
>
|
|
1479
1858
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -1487,6 +1866,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1487
1866
|
<li
|
|
1488
1867
|
class="pf-v6-c-tree-view__list-item"
|
|
1489
1868
|
role="treeitem"
|
|
1869
|
+
aria-selected="true"
|
|
1490
1870
|
tabindex="-1"
|
|
1491
1871
|
>
|
|
1492
1872
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -1502,6 +1882,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1502
1882
|
<li
|
|
1503
1883
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1504
1884
|
role="treeitem"
|
|
1885
|
+
aria-selected="false"
|
|
1505
1886
|
aria-expanded="true"
|
|
1506
1887
|
tabindex="0"
|
|
1507
1888
|
>
|
|
@@ -1524,6 +1905,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1524
1905
|
<li
|
|
1525
1906
|
class="pf-v6-c-tree-view__list-item"
|
|
1526
1907
|
role="treeitem"
|
|
1908
|
+
aria-selected="false"
|
|
1527
1909
|
aria-expanded="false"
|
|
1528
1910
|
tabindex="0"
|
|
1529
1911
|
>
|
|
@@ -1546,6 +1928,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1546
1928
|
<li
|
|
1547
1929
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1548
1930
|
role="treeitem"
|
|
1931
|
+
aria-selected="false"
|
|
1549
1932
|
aria-expanded="true"
|
|
1550
1933
|
tabindex="0"
|
|
1551
1934
|
>
|
|
@@ -1568,6 +1951,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1568
1951
|
<li
|
|
1569
1952
|
class="pf-v6-c-tree-view__list-item"
|
|
1570
1953
|
role="treeitem"
|
|
1954
|
+
aria-selected="false"
|
|
1571
1955
|
aria-expanded="false"
|
|
1572
1956
|
tabindex="0"
|
|
1573
1957
|
>
|
|
@@ -1590,6 +1974,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1590
1974
|
<li
|
|
1591
1975
|
class="pf-v6-c-tree-view__list-item"
|
|
1592
1976
|
role="treeitem"
|
|
1977
|
+
aria-selected="false"
|
|
1593
1978
|
tabindex="-1"
|
|
1594
1979
|
>
|
|
1595
1980
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -1603,6 +1988,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1603
1988
|
<li
|
|
1604
1989
|
class="pf-v6-c-tree-view__list-item"
|
|
1605
1990
|
role="treeitem"
|
|
1991
|
+
aria-selected="false"
|
|
1606
1992
|
tabindex="-1"
|
|
1607
1993
|
>
|
|
1608
1994
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -1622,6 +2008,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1622
2008
|
<li
|
|
1623
2009
|
class="pf-v6-c-tree-view__list-item"
|
|
1624
2010
|
role="treeitem"
|
|
2011
|
+
aria-selected="false"
|
|
1625
2012
|
aria-expanded="false"
|
|
1626
2013
|
tabindex="0"
|
|
1627
2014
|
>
|
|
@@ -1644,6 +2031,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1644
2031
|
<li
|
|
1645
2032
|
class="pf-v6-c-tree-view__list-item"
|
|
1646
2033
|
role="treeitem"
|
|
2034
|
+
aria-selected="false"
|
|
1647
2035
|
aria-expanded="false"
|
|
1648
2036
|
tabindex="0"
|
|
1649
2037
|
>
|
|
@@ -1666,6 +2054,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1666
2054
|
<li
|
|
1667
2055
|
class="pf-v6-c-tree-view__list-item"
|
|
1668
2056
|
role="treeitem"
|
|
2057
|
+
aria-selected="false"
|
|
1669
2058
|
aria-expanded="false"
|
|
1670
2059
|
tabindex="0"
|
|
1671
2060
|
>
|
|
@@ -1696,10 +2085,15 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1696
2085
|
|
|
1697
2086
|
```html
|
|
1698
2087
|
<div class="pf-v6-c-tree-view">
|
|
1699
|
-
<ul
|
|
2088
|
+
<ul
|
|
2089
|
+
class="pf-v6-c-tree-view__list"
|
|
2090
|
+
role="tree"
|
|
2091
|
+
aria-label="Tree View with action item example"
|
|
2092
|
+
>
|
|
1700
2093
|
<li
|
|
1701
2094
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1702
2095
|
role="treeitem"
|
|
2096
|
+
aria-selected="false"
|
|
1703
2097
|
aria-expanded="true"
|
|
1704
2098
|
tabindex="0"
|
|
1705
2099
|
>
|
|
@@ -1720,8 +2114,11 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1720
2114
|
class="pf-v6-c-button pf-m-plain"
|
|
1721
2115
|
type="button"
|
|
1722
2116
|
aria-label="Actions"
|
|
2117
|
+
tabindex="-1"
|
|
1723
2118
|
>
|
|
1724
|
-
<
|
|
2119
|
+
<span class="pf-v6-c-button__icon">
|
|
2120
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
2121
|
+
</span>
|
|
1725
2122
|
</button>
|
|
1726
2123
|
</div>
|
|
1727
2124
|
</div>
|
|
@@ -1729,6 +2126,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1729
2126
|
<li
|
|
1730
2127
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1731
2128
|
role="treeitem"
|
|
2129
|
+
aria-selected="false"
|
|
1732
2130
|
aria-expanded="true"
|
|
1733
2131
|
tabindex="0"
|
|
1734
2132
|
>
|
|
@@ -1749,8 +2147,11 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1749
2147
|
class="pf-v6-c-button pf-m-plain"
|
|
1750
2148
|
type="button"
|
|
1751
2149
|
aria-label="Copy"
|
|
2150
|
+
tabindex="-1"
|
|
1752
2151
|
>
|
|
1753
|
-
<
|
|
2152
|
+
<span class="pf-v6-c-button__icon">
|
|
2153
|
+
<i class="fas fa-clipboard" aria-hidden="true"></i>
|
|
2154
|
+
</span>
|
|
1754
2155
|
</button>
|
|
1755
2156
|
</div>
|
|
1756
2157
|
</div>
|
|
@@ -1758,6 +2159,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1758
2159
|
<li
|
|
1759
2160
|
class="pf-v6-c-tree-view__list-item"
|
|
1760
2161
|
role="treeitem"
|
|
2162
|
+
aria-selected="false"
|
|
1761
2163
|
tabindex="-1"
|
|
1762
2164
|
>
|
|
1763
2165
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -1771,6 +2173,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1771
2173
|
<li
|
|
1772
2174
|
class="pf-v6-c-tree-view__list-item"
|
|
1773
2175
|
role="treeitem"
|
|
2176
|
+
aria-selected="true"
|
|
1774
2177
|
tabindex="-1"
|
|
1775
2178
|
>
|
|
1776
2179
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -1786,6 +2189,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1786
2189
|
<li
|
|
1787
2190
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1788
2191
|
role="treeitem"
|
|
2192
|
+
aria-selected="false"
|
|
1789
2193
|
aria-expanded="true"
|
|
1790
2194
|
tabindex="0"
|
|
1791
2195
|
>
|
|
@@ -1806,8 +2210,11 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1806
2210
|
class="pf-v6-c-button pf-m-plain"
|
|
1807
2211
|
type="button"
|
|
1808
2212
|
aria-label="Action"
|
|
2213
|
+
tabindex="-1"
|
|
1809
2214
|
>
|
|
1810
|
-
<
|
|
2215
|
+
<span class="pf-v6-c-button__icon">
|
|
2216
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
2217
|
+
</span>
|
|
1811
2218
|
</button>
|
|
1812
2219
|
</div>
|
|
1813
2220
|
</div>
|
|
@@ -1815,6 +2222,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1815
2222
|
<li
|
|
1816
2223
|
class="pf-v6-c-tree-view__list-item"
|
|
1817
2224
|
role="treeitem"
|
|
2225
|
+
aria-selected="false"
|
|
1818
2226
|
aria-expanded="false"
|
|
1819
2227
|
tabindex="0"
|
|
1820
2228
|
>
|
|
@@ -1834,6 +2242,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1834
2242
|
<li
|
|
1835
2243
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1836
2244
|
role="treeitem"
|
|
2245
|
+
aria-selected="false"
|
|
1837
2246
|
aria-expanded="true"
|
|
1838
2247
|
tabindex="0"
|
|
1839
2248
|
>
|
|
@@ -1853,6 +2262,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1853
2262
|
<li
|
|
1854
2263
|
class="pf-v6-c-tree-view__list-item"
|
|
1855
2264
|
role="treeitem"
|
|
2265
|
+
aria-selected="false"
|
|
1856
2266
|
aria-expanded="false"
|
|
1857
2267
|
tabindex="0"
|
|
1858
2268
|
>
|
|
@@ -1872,6 +2282,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1872
2282
|
<li
|
|
1873
2283
|
class="pf-v6-c-tree-view__list-item"
|
|
1874
2284
|
role="treeitem"
|
|
2285
|
+
aria-selected="false"
|
|
1875
2286
|
tabindex="-1"
|
|
1876
2287
|
>
|
|
1877
2288
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -1885,6 +2296,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1885
2296
|
<li
|
|
1886
2297
|
class="pf-v6-c-tree-view__list-item"
|
|
1887
2298
|
role="treeitem"
|
|
2299
|
+
aria-selected="false"
|
|
1888
2300
|
tabindex="-1"
|
|
1889
2301
|
>
|
|
1890
2302
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -1904,6 +2316,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1904
2316
|
<li
|
|
1905
2317
|
class="pf-v6-c-tree-view__list-item"
|
|
1906
2318
|
role="treeitem"
|
|
2319
|
+
aria-selected="false"
|
|
1907
2320
|
aria-expanded="false"
|
|
1908
2321
|
tabindex="0"
|
|
1909
2322
|
>
|
|
@@ -1923,6 +2336,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1923
2336
|
<li
|
|
1924
2337
|
class="pf-v6-c-tree-view__list-item"
|
|
1925
2338
|
role="treeitem"
|
|
2339
|
+
aria-selected="false"
|
|
1926
2340
|
aria-expanded="false"
|
|
1927
2341
|
tabindex="0"
|
|
1928
2342
|
>
|
|
@@ -1942,6 +2356,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1942
2356
|
<li
|
|
1943
2357
|
class="pf-v6-c-tree-view__list-item"
|
|
1944
2358
|
role="treeitem"
|
|
2359
|
+
aria-selected="false"
|
|
1945
2360
|
aria-expanded="false"
|
|
1946
2361
|
tabindex="0"
|
|
1947
2362
|
>
|
|
@@ -1964,8 +2379,11 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1964
2379
|
class="pf-v6-c-button pf-m-plain"
|
|
1965
2380
|
type="button"
|
|
1966
2381
|
aria-label="Actions"
|
|
2382
|
+
tabindex="-1"
|
|
1967
2383
|
>
|
|
1968
|
-
<
|
|
2384
|
+
<span class="pf-v6-c-button__icon">
|
|
2385
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
2386
|
+
</span>
|
|
1969
2387
|
</button>
|
|
1970
2388
|
</div>
|
|
1971
2389
|
</div>
|
|
@@ -1979,10 +2397,15 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1979
2397
|
|
|
1980
2398
|
```html
|
|
1981
2399
|
<div class="pf-v6-c-tree-view">
|
|
1982
|
-
<ul
|
|
2400
|
+
<ul
|
|
2401
|
+
class="pf-v6-c-tree-view__list"
|
|
2402
|
+
role="tree"
|
|
2403
|
+
aria-label="Tree View with non-expandable top level nodes example"
|
|
2404
|
+
>
|
|
1983
2405
|
<li
|
|
1984
2406
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1985
2407
|
role="treeitem"
|
|
2408
|
+
aria-selected="false"
|
|
1986
2409
|
aria-expanded="true"
|
|
1987
2410
|
tabindex="0"
|
|
1988
2411
|
>
|
|
@@ -2002,6 +2425,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2002
2425
|
<li
|
|
2003
2426
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2004
2427
|
role="treeitem"
|
|
2428
|
+
aria-selected="false"
|
|
2005
2429
|
aria-expanded="true"
|
|
2006
2430
|
tabindex="0"
|
|
2007
2431
|
>
|
|
@@ -2021,6 +2445,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2021
2445
|
<li
|
|
2022
2446
|
class="pf-v6-c-tree-view__list-item"
|
|
2023
2447
|
role="treeitem"
|
|
2448
|
+
aria-selected="false"
|
|
2024
2449
|
tabindex="-1"
|
|
2025
2450
|
>
|
|
2026
2451
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2034,6 +2459,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2034
2459
|
<li
|
|
2035
2460
|
class="pf-v6-c-tree-view__list-item"
|
|
2036
2461
|
role="treeitem"
|
|
2462
|
+
aria-selected="true"
|
|
2037
2463
|
tabindex="-1"
|
|
2038
2464
|
>
|
|
2039
2465
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2047,6 +2473,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2047
2473
|
<li
|
|
2048
2474
|
class="pf-v6-c-tree-view__list-item"
|
|
2049
2475
|
role="treeitem"
|
|
2476
|
+
aria-selected="false"
|
|
2050
2477
|
aria-expanded="false"
|
|
2051
2478
|
tabindex="0"
|
|
2052
2479
|
>
|
|
@@ -2068,6 +2495,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2068
2495
|
<li
|
|
2069
2496
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2070
2497
|
role="treeitem"
|
|
2498
|
+
aria-selected="false"
|
|
2071
2499
|
aria-expanded="true"
|
|
2072
2500
|
tabindex="0"
|
|
2073
2501
|
>
|
|
@@ -2087,6 +2515,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2087
2515
|
<li
|
|
2088
2516
|
class="pf-v6-c-tree-view__list-item"
|
|
2089
2517
|
role="treeitem"
|
|
2518
|
+
aria-selected="false"
|
|
2090
2519
|
tabindex="-1"
|
|
2091
2520
|
>
|
|
2092
2521
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2100,6 +2529,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2100
2529
|
<li
|
|
2101
2530
|
class="pf-v6-c-tree-view__list-item"
|
|
2102
2531
|
role="treeitem"
|
|
2532
|
+
aria-selected="false"
|
|
2103
2533
|
aria-expanded="false"
|
|
2104
2534
|
tabindex="0"
|
|
2105
2535
|
>
|
|
@@ -2119,6 +2549,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2119
2549
|
<li
|
|
2120
2550
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2121
2551
|
role="treeitem"
|
|
2552
|
+
aria-selected="false"
|
|
2122
2553
|
aria-expanded="true"
|
|
2123
2554
|
tabindex="0"
|
|
2124
2555
|
>
|
|
@@ -2138,6 +2569,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2138
2569
|
<li
|
|
2139
2570
|
class="pf-v6-c-tree-view__list-item"
|
|
2140
2571
|
role="treeitem"
|
|
2572
|
+
aria-selected="false"
|
|
2141
2573
|
aria-expanded="false"
|
|
2142
2574
|
tabindex="0"
|
|
2143
2575
|
>
|
|
@@ -2157,6 +2589,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2157
2589
|
<li
|
|
2158
2590
|
class="pf-v6-c-tree-view__list-item"
|
|
2159
2591
|
role="treeitem"
|
|
2592
|
+
aria-selected="false"
|
|
2160
2593
|
tabindex="-1"
|
|
2161
2594
|
>
|
|
2162
2595
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2170,6 +2603,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2170
2603
|
<li
|
|
2171
2604
|
class="pf-v6-c-tree-view__list-item"
|
|
2172
2605
|
role="treeitem"
|
|
2606
|
+
aria-selected="false"
|
|
2173
2607
|
tabindex="-1"
|
|
2174
2608
|
>
|
|
2175
2609
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2186,7 +2620,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2186
2620
|
</li>
|
|
2187
2621
|
</ul>
|
|
2188
2622
|
</li>
|
|
2189
|
-
<li
|
|
2623
|
+
<li
|
|
2624
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2625
|
+
role="treeitem"
|
|
2626
|
+
aria-selected="false"
|
|
2627
|
+
tabindex="-1"
|
|
2628
|
+
>
|
|
2190
2629
|
<div class="pf-v6-c-tree-view__content">
|
|
2191
2630
|
<button class="pf-v6-c-tree-view__node">
|
|
2192
2631
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -2198,6 +2637,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2198
2637
|
<li
|
|
2199
2638
|
class="pf-v6-c-tree-view__list-item"
|
|
2200
2639
|
role="treeitem"
|
|
2640
|
+
aria-selected="false"
|
|
2201
2641
|
aria-expanded="false"
|
|
2202
2642
|
tabindex="0"
|
|
2203
2643
|
>
|
|
@@ -2214,7 +2654,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2214
2654
|
</button>
|
|
2215
2655
|
</div>
|
|
2216
2656
|
</li>
|
|
2217
|
-
<li
|
|
2657
|
+
<li
|
|
2658
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2659
|
+
role="treeitem"
|
|
2660
|
+
aria-selected="false"
|
|
2661
|
+
tabindex="-1"
|
|
2662
|
+
>
|
|
2218
2663
|
<div class="pf-v6-c-tree-view__content">
|
|
2219
2664
|
<button class="pf-v6-c-tree-view__node">
|
|
2220
2665
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -2234,10 +2679,15 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2234
2679
|
|
|
2235
2680
|
```html
|
|
2236
2681
|
<div class="pf-v6-c-tree-view">
|
|
2237
|
-
<ul
|
|
2682
|
+
<ul
|
|
2683
|
+
class="pf-v6-c-tree-view__list"
|
|
2684
|
+
role="tree"
|
|
2685
|
+
aria-label="Tree View with selectable, expandable nodes example"
|
|
2686
|
+
>
|
|
2238
2687
|
<li
|
|
2239
2688
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2240
2689
|
role="treeitem"
|
|
2690
|
+
aria-selected="false"
|
|
2241
2691
|
aria-expanded="true"
|
|
2242
2692
|
tabindex="0"
|
|
2243
2693
|
>
|
|
@@ -2271,6 +2721,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2271
2721
|
<li
|
|
2272
2722
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2273
2723
|
role="treeitem"
|
|
2724
|
+
aria-selected="false"
|
|
2274
2725
|
aria-expanded="true"
|
|
2275
2726
|
tabindex="0"
|
|
2276
2727
|
>
|
|
@@ -2304,6 +2755,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2304
2755
|
<li
|
|
2305
2756
|
class="pf-v6-c-tree-view__list-item"
|
|
2306
2757
|
role="treeitem"
|
|
2758
|
+
aria-selected="false"
|
|
2307
2759
|
tabindex="-1"
|
|
2308
2760
|
>
|
|
2309
2761
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2317,6 +2769,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2317
2769
|
<li
|
|
2318
2770
|
class="pf-v6-c-tree-view__list-item"
|
|
2319
2771
|
role="treeitem"
|
|
2772
|
+
aria-selected="false"
|
|
2320
2773
|
tabindex="-1"
|
|
2321
2774
|
>
|
|
2322
2775
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2330,6 +2783,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2330
2783
|
<li
|
|
2331
2784
|
class="pf-v6-c-tree-view__list-item"
|
|
2332
2785
|
role="treeitem"
|
|
2786
|
+
aria-selected="false"
|
|
2333
2787
|
aria-expanded="false"
|
|
2334
2788
|
tabindex="0"
|
|
2335
2789
|
>
|
|
@@ -2365,6 +2819,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2365
2819
|
<li
|
|
2366
2820
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2367
2821
|
role="treeitem"
|
|
2822
|
+
aria-selected="false"
|
|
2368
2823
|
aria-expanded="true"
|
|
2369
2824
|
tabindex="0"
|
|
2370
2825
|
>
|
|
@@ -2398,6 +2853,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2398
2853
|
<li
|
|
2399
2854
|
class="pf-v6-c-tree-view__list-item"
|
|
2400
2855
|
role="treeitem"
|
|
2856
|
+
aria-selected="false"
|
|
2401
2857
|
tabindex="-1"
|
|
2402
2858
|
>
|
|
2403
2859
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2411,6 +2867,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2411
2867
|
<li
|
|
2412
2868
|
class="pf-v6-c-tree-view__list-item"
|
|
2413
2869
|
role="treeitem"
|
|
2870
|
+
aria-selected="false"
|
|
2414
2871
|
aria-expanded="false"
|
|
2415
2872
|
tabindex="0"
|
|
2416
2873
|
>
|
|
@@ -2444,6 +2901,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2444
2901
|
<li
|
|
2445
2902
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2446
2903
|
role="treeitem"
|
|
2904
|
+
aria-selected="false"
|
|
2447
2905
|
aria-expanded="true"
|
|
2448
2906
|
tabindex="0"
|
|
2449
2907
|
>
|
|
@@ -2477,6 +2935,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2477
2935
|
<li
|
|
2478
2936
|
class="pf-v6-c-tree-view__list-item"
|
|
2479
2937
|
role="treeitem"
|
|
2938
|
+
aria-selected="true"
|
|
2480
2939
|
aria-expanded="false"
|
|
2481
2940
|
tabindex="0"
|
|
2482
2941
|
>
|
|
@@ -2510,6 +2969,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2510
2969
|
<li
|
|
2511
2970
|
class="pf-v6-c-tree-view__list-item"
|
|
2512
2971
|
role="treeitem"
|
|
2972
|
+
aria-selected="false"
|
|
2513
2973
|
tabindex="-1"
|
|
2514
2974
|
>
|
|
2515
2975
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2523,6 +2983,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2523
2983
|
<li
|
|
2524
2984
|
class="pf-v6-c-tree-view__list-item"
|
|
2525
2985
|
role="treeitem"
|
|
2986
|
+
aria-selected="false"
|
|
2526
2987
|
tabindex="-1"
|
|
2527
2988
|
>
|
|
2528
2989
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2542,6 +3003,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2542
3003
|
<li
|
|
2543
3004
|
class="pf-v6-c-tree-view__list-item"
|
|
2544
3005
|
role="treeitem"
|
|
3006
|
+
aria-selected="false"
|
|
2545
3007
|
aria-expanded="false"
|
|
2546
3008
|
tabindex="0"
|
|
2547
3009
|
>
|
|
@@ -2575,6 +3037,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2575
3037
|
<li
|
|
2576
3038
|
class="pf-v6-c-tree-view__list-item"
|
|
2577
3039
|
role="treeitem"
|
|
3040
|
+
aria-selected="false"
|
|
2578
3041
|
aria-expanded="false"
|
|
2579
3042
|
tabindex="0"
|
|
2580
3043
|
>
|
|
@@ -2608,6 +3071,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2608
3071
|
<li
|
|
2609
3072
|
class="pf-v6-c-tree-view__list-item"
|
|
2610
3073
|
role="treeitem"
|
|
3074
|
+
aria-selected="false"
|
|
2611
3075
|
aria-expanded="false"
|
|
2612
3076
|
tabindex="0"
|
|
2613
3077
|
>
|
|
@@ -2647,10 +3111,15 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2647
3111
|
|
|
2648
3112
|
```html
|
|
2649
3113
|
<div class="pf-v6-c-tree-view pf-m-guides">
|
|
2650
|
-
<ul
|
|
3114
|
+
<ul
|
|
3115
|
+
class="pf-v6-c-tree-view__list"
|
|
3116
|
+
role="tree"
|
|
3117
|
+
aria-label="Tree View guides example"
|
|
3118
|
+
>
|
|
2651
3119
|
<li
|
|
2652
3120
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2653
3121
|
role="treeitem"
|
|
3122
|
+
aria-selected="false"
|
|
2654
3123
|
aria-expanded="true"
|
|
2655
3124
|
tabindex="0"
|
|
2656
3125
|
>
|
|
@@ -2670,6 +3139,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2670
3139
|
<li
|
|
2671
3140
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2672
3141
|
role="treeitem"
|
|
3142
|
+
aria-selected="false"
|
|
2673
3143
|
aria-expanded="true"
|
|
2674
3144
|
tabindex="0"
|
|
2675
3145
|
>
|
|
@@ -2689,6 +3159,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2689
3159
|
<li
|
|
2690
3160
|
class="pf-v6-c-tree-view__list-item"
|
|
2691
3161
|
role="treeitem"
|
|
3162
|
+
aria-selected="false"
|
|
2692
3163
|
tabindex="-1"
|
|
2693
3164
|
>
|
|
2694
3165
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2702,6 +3173,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2702
3173
|
<li
|
|
2703
3174
|
class="pf-v6-c-tree-view__list-item"
|
|
2704
3175
|
role="treeitem"
|
|
3176
|
+
aria-selected="true"
|
|
2705
3177
|
tabindex="-1"
|
|
2706
3178
|
>
|
|
2707
3179
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2715,6 +3187,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2715
3187
|
<li
|
|
2716
3188
|
class="pf-v6-c-tree-view__list-item"
|
|
2717
3189
|
role="treeitem"
|
|
3190
|
+
aria-selected="false"
|
|
2718
3191
|
aria-expanded="false"
|
|
2719
3192
|
tabindex="0"
|
|
2720
3193
|
>
|
|
@@ -2736,6 +3209,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2736
3209
|
<li
|
|
2737
3210
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2738
3211
|
role="treeitem"
|
|
3212
|
+
aria-selected="false"
|
|
2739
3213
|
aria-expanded="true"
|
|
2740
3214
|
tabindex="0"
|
|
2741
3215
|
>
|
|
@@ -2755,6 +3229,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2755
3229
|
<li
|
|
2756
3230
|
class="pf-v6-c-tree-view__list-item"
|
|
2757
3231
|
role="treeitem"
|
|
3232
|
+
aria-selected="false"
|
|
2758
3233
|
tabindex="-1"
|
|
2759
3234
|
>
|
|
2760
3235
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2768,6 +3243,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2768
3243
|
<li
|
|
2769
3244
|
class="pf-v6-c-tree-view__list-item"
|
|
2770
3245
|
role="treeitem"
|
|
3246
|
+
aria-selected="false"
|
|
2771
3247
|
aria-expanded="false"
|
|
2772
3248
|
tabindex="0"
|
|
2773
3249
|
>
|
|
@@ -2787,6 +3263,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2787
3263
|
<li
|
|
2788
3264
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2789
3265
|
role="treeitem"
|
|
3266
|
+
aria-selected="false"
|
|
2790
3267
|
aria-expanded="true"
|
|
2791
3268
|
tabindex="0"
|
|
2792
3269
|
>
|
|
@@ -2806,6 +3283,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2806
3283
|
<li
|
|
2807
3284
|
class="pf-v6-c-tree-view__list-item"
|
|
2808
3285
|
role="treeitem"
|
|
3286
|
+
aria-selected="false"
|
|
2809
3287
|
aria-expanded="false"
|
|
2810
3288
|
tabindex="0"
|
|
2811
3289
|
>
|
|
@@ -2825,6 +3303,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2825
3303
|
<li
|
|
2826
3304
|
class="pf-v6-c-tree-view__list-item"
|
|
2827
3305
|
role="treeitem"
|
|
3306
|
+
aria-selected="false"
|
|
2828
3307
|
tabindex="-1"
|
|
2829
3308
|
>
|
|
2830
3309
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2838,6 +3317,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2838
3317
|
<li
|
|
2839
3318
|
class="pf-v6-c-tree-view__list-item"
|
|
2840
3319
|
role="treeitem"
|
|
3320
|
+
aria-selected="false"
|
|
2841
3321
|
tabindex="-1"
|
|
2842
3322
|
>
|
|
2843
3323
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2857,6 +3337,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2857
3337
|
<li
|
|
2858
3338
|
class="pf-v6-c-tree-view__list-item"
|
|
2859
3339
|
role="treeitem"
|
|
3340
|
+
aria-selected="false"
|
|
2860
3341
|
aria-expanded="false"
|
|
2861
3342
|
tabindex="0"
|
|
2862
3343
|
>
|
|
@@ -2876,6 +3357,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2876
3357
|
<li
|
|
2877
3358
|
class="pf-v6-c-tree-view__list-item"
|
|
2878
3359
|
role="treeitem"
|
|
3360
|
+
aria-selected="false"
|
|
2879
3361
|
aria-expanded="false"
|
|
2880
3362
|
tabindex="0"
|
|
2881
3363
|
>
|
|
@@ -2895,6 +3377,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2895
3377
|
<li
|
|
2896
3378
|
class="pf-v6-c-tree-view__list-item"
|
|
2897
3379
|
role="treeitem"
|
|
3380
|
+
aria-selected="false"
|
|
2898
3381
|
aria-expanded="false"
|
|
2899
3382
|
tabindex="0"
|
|
2900
3383
|
>
|
|
@@ -2922,8 +3405,17 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2922
3405
|
|
|
2923
3406
|
```html
|
|
2924
3407
|
<div class="pf-v6-c-tree-view pf-m-compact">
|
|
2925
|
-
<ul
|
|
2926
|
-
|
|
3408
|
+
<ul
|
|
3409
|
+
class="pf-v6-c-tree-view__list"
|
|
3410
|
+
role="tree"
|
|
3411
|
+
aria-label="Tree View compact example"
|
|
3412
|
+
>
|
|
3413
|
+
<li
|
|
3414
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3415
|
+
role="treeitem"
|
|
3416
|
+
aria-selected="false"
|
|
3417
|
+
tabindex="-1"
|
|
3418
|
+
>
|
|
2927
3419
|
<div class="pf-v6-c-tree-view__content">
|
|
2928
3420
|
<button class="pf-v6-c-tree-view__node">
|
|
2929
3421
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -2937,7 +3429,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2937
3429
|
</button>
|
|
2938
3430
|
</div>
|
|
2939
3431
|
</li>
|
|
2940
|
-
<li
|
|
3432
|
+
<li
|
|
3433
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3434
|
+
role="treeitem"
|
|
3435
|
+
aria-selected="false"
|
|
3436
|
+
tabindex="-1"
|
|
3437
|
+
>
|
|
2941
3438
|
<div class="pf-v6-c-tree-view__content">
|
|
2942
3439
|
<button class="pf-v6-c-tree-view__node">
|
|
2943
3440
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -2951,7 +3448,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2951
3448
|
</button>
|
|
2952
3449
|
</div>
|
|
2953
3450
|
</li>
|
|
2954
|
-
<li
|
|
3451
|
+
<li
|
|
3452
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3453
|
+
role="treeitem"
|
|
3454
|
+
aria-selected="false"
|
|
3455
|
+
tabindex="-1"
|
|
3456
|
+
>
|
|
2955
3457
|
<div class="pf-v6-c-tree-view__content">
|
|
2956
3458
|
<button class="pf-v6-c-tree-view__node">
|
|
2957
3459
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -2968,6 +3470,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2968
3470
|
<li
|
|
2969
3471
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2970
3472
|
role="treeitem"
|
|
3473
|
+
aria-selected="false"
|
|
2971
3474
|
aria-expanded="true"
|
|
2972
3475
|
tabindex="0"
|
|
2973
3476
|
>
|
|
@@ -2989,7 +3492,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2989
3492
|
</button>
|
|
2990
3493
|
</div>
|
|
2991
3494
|
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
2992
|
-
<li
|
|
3495
|
+
<li
|
|
3496
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3497
|
+
role="treeitem"
|
|
3498
|
+
aria-selected="false"
|
|
3499
|
+
tabindex="-1"
|
|
3500
|
+
>
|
|
2993
3501
|
<div class="pf-v6-c-tree-view__content">
|
|
2994
3502
|
<button class="pf-v6-c-tree-view__node">
|
|
2995
3503
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3003,7 +3511,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3003
3511
|
</button>
|
|
3004
3512
|
</div>
|
|
3005
3513
|
</li>
|
|
3006
|
-
<li
|
|
3514
|
+
<li
|
|
3515
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3516
|
+
role="treeitem"
|
|
3517
|
+
aria-selected="false"
|
|
3518
|
+
tabindex="-1"
|
|
3519
|
+
>
|
|
3007
3520
|
<div class="pf-v6-c-tree-view__content">
|
|
3008
3521
|
<button class="pf-v6-c-tree-view__node">
|
|
3009
3522
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3017,7 +3530,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3017
3530
|
</button>
|
|
3018
3531
|
</div>
|
|
3019
3532
|
</li>
|
|
3020
|
-
<li
|
|
3533
|
+
<li
|
|
3534
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3535
|
+
role="treeitem"
|
|
3536
|
+
aria-selected="false"
|
|
3537
|
+
tabindex="-1"
|
|
3538
|
+
>
|
|
3021
3539
|
<div class="pf-v6-c-tree-view__content">
|
|
3022
3540
|
<button class="pf-v6-c-tree-view__node">
|
|
3023
3541
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3033,7 +3551,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3033
3551
|
</button>
|
|
3034
3552
|
</div>
|
|
3035
3553
|
</li>
|
|
3036
|
-
<li
|
|
3554
|
+
<li
|
|
3555
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3556
|
+
role="treeitem"
|
|
3557
|
+
aria-selected="false"
|
|
3558
|
+
tabindex="-1"
|
|
3559
|
+
>
|
|
3037
3560
|
<div class="pf-v6-c-tree-view__content">
|
|
3038
3561
|
<button class="pf-v6-c-tree-view__node">
|
|
3039
3562
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3047,7 +3570,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3047
3570
|
</button>
|
|
3048
3571
|
</div>
|
|
3049
3572
|
</li>
|
|
3050
|
-
<li
|
|
3573
|
+
<li
|
|
3574
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3575
|
+
role="treeitem"
|
|
3576
|
+
aria-selected="false"
|
|
3577
|
+
tabindex="-1"
|
|
3578
|
+
>
|
|
3051
3579
|
<div class="pf-v6-c-tree-view__content">
|
|
3052
3580
|
<button class="pf-v6-c-tree-view__node">
|
|
3053
3581
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3066,6 +3594,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3066
3594
|
<li
|
|
3067
3595
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
3068
3596
|
role="treeitem"
|
|
3597
|
+
aria-selected="false"
|
|
3069
3598
|
aria-expanded="true"
|
|
3070
3599
|
tabindex="0"
|
|
3071
3600
|
>
|
|
@@ -3090,6 +3619,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3090
3619
|
<li
|
|
3091
3620
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
3092
3621
|
role="treeitem"
|
|
3622
|
+
aria-selected="false"
|
|
3093
3623
|
aria-expanded="true"
|
|
3094
3624
|
tabindex="0"
|
|
3095
3625
|
>
|
|
@@ -3116,6 +3646,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3116
3646
|
<li
|
|
3117
3647
|
class="pf-v6-c-tree-view__list-item"
|
|
3118
3648
|
role="treeitem"
|
|
3649
|
+
aria-selected="false"
|
|
3119
3650
|
tabindex="-1"
|
|
3120
3651
|
>
|
|
3121
3652
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -3138,6 +3669,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3138
3669
|
<li
|
|
3139
3670
|
class="pf-v6-c-tree-view__list-item"
|
|
3140
3671
|
role="treeitem"
|
|
3672
|
+
aria-selected="false"
|
|
3141
3673
|
tabindex="-1"
|
|
3142
3674
|
>
|
|
3143
3675
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -3155,7 +3687,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3155
3687
|
</li>
|
|
3156
3688
|
</ul>
|
|
3157
3689
|
</li>
|
|
3158
|
-
<li
|
|
3690
|
+
<li
|
|
3691
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3692
|
+
role="treeitem"
|
|
3693
|
+
aria-selected="false"
|
|
3694
|
+
tabindex="-1"
|
|
3695
|
+
>
|
|
3159
3696
|
<div class="pf-v6-c-tree-view__content">
|
|
3160
3697
|
<button class="pf-v6-c-tree-view__node">
|
|
3161
3698
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3180,8 +3717,17 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3180
3717
|
|
|
3181
3718
|
```html
|
|
3182
3719
|
<div class="pf-v6-c-tree-view pf-m-compact pf-m-no-background">
|
|
3183
|
-
<ul
|
|
3184
|
-
|
|
3720
|
+
<ul
|
|
3721
|
+
class="pf-v6-c-tree-view__list"
|
|
3722
|
+
role="tree"
|
|
3723
|
+
aria-label="Tree View compact no background example"
|
|
3724
|
+
>
|
|
3725
|
+
<li
|
|
3726
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3727
|
+
role="treeitem"
|
|
3728
|
+
aria-selected="false"
|
|
3729
|
+
tabindex="-1"
|
|
3730
|
+
>
|
|
3185
3731
|
<div class="pf-v6-c-tree-view__content">
|
|
3186
3732
|
<button class="pf-v6-c-tree-view__node">
|
|
3187
3733
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3195,7 +3741,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3195
3741
|
</button>
|
|
3196
3742
|
</div>
|
|
3197
3743
|
</li>
|
|
3198
|
-
<li
|
|
3744
|
+
<li
|
|
3745
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3746
|
+
role="treeitem"
|
|
3747
|
+
aria-selected="false"
|
|
3748
|
+
tabindex="-1"
|
|
3749
|
+
>
|
|
3199
3750
|
<div class="pf-v6-c-tree-view__content">
|
|
3200
3751
|
<button class="pf-v6-c-tree-view__node">
|
|
3201
3752
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3209,7 +3760,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3209
3760
|
</button>
|
|
3210
3761
|
</div>
|
|
3211
3762
|
</li>
|
|
3212
|
-
<li
|
|
3763
|
+
<li
|
|
3764
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3765
|
+
role="treeitem"
|
|
3766
|
+
aria-selected="false"
|
|
3767
|
+
tabindex="-1"
|
|
3768
|
+
>
|
|
3213
3769
|
<div class="pf-v6-c-tree-view__content">
|
|
3214
3770
|
<button class="pf-v6-c-tree-view__node">
|
|
3215
3771
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3226,6 +3782,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3226
3782
|
<li
|
|
3227
3783
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
3228
3784
|
role="treeitem"
|
|
3785
|
+
aria-selected="false"
|
|
3229
3786
|
aria-expanded="true"
|
|
3230
3787
|
tabindex="0"
|
|
3231
3788
|
>
|
|
@@ -3247,7 +3804,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3247
3804
|
</button>
|
|
3248
3805
|
</div>
|
|
3249
3806
|
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
3250
|
-
<li
|
|
3807
|
+
<li
|
|
3808
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3809
|
+
role="treeitem"
|
|
3810
|
+
aria-selected="false"
|
|
3811
|
+
tabindex="-1"
|
|
3812
|
+
>
|
|
3251
3813
|
<div class="pf-v6-c-tree-view__content">
|
|
3252
3814
|
<button class="pf-v6-c-tree-view__node">
|
|
3253
3815
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3261,7 +3823,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3261
3823
|
</button>
|
|
3262
3824
|
</div>
|
|
3263
3825
|
</li>
|
|
3264
|
-
<li
|
|
3826
|
+
<li
|
|
3827
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3828
|
+
role="treeitem"
|
|
3829
|
+
aria-selected="false"
|
|
3830
|
+
tabindex="-1"
|
|
3831
|
+
>
|
|
3265
3832
|
<div class="pf-v6-c-tree-view__content">
|
|
3266
3833
|
<button class="pf-v6-c-tree-view__node">
|
|
3267
3834
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3275,7 +3842,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3275
3842
|
</button>
|
|
3276
3843
|
</div>
|
|
3277
3844
|
</li>
|
|
3278
|
-
<li
|
|
3845
|
+
<li
|
|
3846
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3847
|
+
role="treeitem"
|
|
3848
|
+
aria-selected="false"
|
|
3849
|
+
tabindex="-1"
|
|
3850
|
+
>
|
|
3279
3851
|
<div class="pf-v6-c-tree-view__content">
|
|
3280
3852
|
<button class="pf-v6-c-tree-view__node">
|
|
3281
3853
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3291,7 +3863,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3291
3863
|
</button>
|
|
3292
3864
|
</div>
|
|
3293
3865
|
</li>
|
|
3294
|
-
<li
|
|
3866
|
+
<li
|
|
3867
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3868
|
+
role="treeitem"
|
|
3869
|
+
aria-selected="false"
|
|
3870
|
+
tabindex="-1"
|
|
3871
|
+
>
|
|
3295
3872
|
<div class="pf-v6-c-tree-view__content">
|
|
3296
3873
|
<button class="pf-v6-c-tree-view__node">
|
|
3297
3874
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3305,7 +3882,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3305
3882
|
</button>
|
|
3306
3883
|
</div>
|
|
3307
3884
|
</li>
|
|
3308
|
-
<li
|
|
3885
|
+
<li
|
|
3886
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3887
|
+
role="treeitem"
|
|
3888
|
+
aria-selected="false"
|
|
3889
|
+
tabindex="-1"
|
|
3890
|
+
>
|
|
3309
3891
|
<div class="pf-v6-c-tree-view__content">
|
|
3310
3892
|
<button class="pf-v6-c-tree-view__node">
|
|
3311
3893
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3324,6 +3906,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3324
3906
|
<li
|
|
3325
3907
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
3326
3908
|
role="treeitem"
|
|
3909
|
+
aria-selected="false"
|
|
3327
3910
|
aria-expanded="true"
|
|
3328
3911
|
tabindex="0"
|
|
3329
3912
|
>
|
|
@@ -3348,6 +3931,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3348
3931
|
<li
|
|
3349
3932
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
3350
3933
|
role="treeitem"
|
|
3934
|
+
aria-selected="false"
|
|
3351
3935
|
aria-expanded="true"
|
|
3352
3936
|
tabindex="0"
|
|
3353
3937
|
>
|
|
@@ -3374,6 +3958,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3374
3958
|
<li
|
|
3375
3959
|
class="pf-v6-c-tree-view__list-item"
|
|
3376
3960
|
role="treeitem"
|
|
3961
|
+
aria-selected="false"
|
|
3377
3962
|
tabindex="-1"
|
|
3378
3963
|
>
|
|
3379
3964
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -3396,6 +3981,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3396
3981
|
<li
|
|
3397
3982
|
class="pf-v6-c-tree-view__list-item"
|
|
3398
3983
|
role="treeitem"
|
|
3984
|
+
aria-selected="false"
|
|
3399
3985
|
tabindex="-1"
|
|
3400
3986
|
>
|
|
3401
3987
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -3413,7 +3999,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3413
3999
|
</li>
|
|
3414
4000
|
</ul>
|
|
3415
4001
|
</li>
|
|
3416
|
-
<li
|
|
4002
|
+
<li
|
|
4003
|
+
class="pf-v6-c-tree-view__list-item"
|
|
4004
|
+
role="treeitem"
|
|
4005
|
+
aria-selected="false"
|
|
4006
|
+
tabindex="-1"
|
|
4007
|
+
>
|
|
3417
4008
|
<div class="pf-v6-c-tree-view__content">
|
|
3418
4009
|
<button class="pf-v6-c-tree-view__node">
|
|
3419
4010
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3436,19 +4027,6 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3436
4027
|
|
|
3437
4028
|
## Documentation
|
|
3438
4029
|
|
|
3439
|
-
### Accessibility
|
|
3440
|
-
|
|
3441
|
-
| Attribute | Applied to | Outcome |
|
|
3442
|
-
| -- | -- | -- |
|
|
3443
|
-
| `role="tree"` | `.pf-v6-c-tree-view__list` | Identifies the `ul` as a tree widget. **Place on the outermost `ul` only** |
|
|
3444
|
-
| `role="group"` | `.pf-v6-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`** |
|
|
3445
|
-
| `role="treeitem"` | `.pf-v6-c-tree-view__list-item` | Hides the implicit listitem role of the li element from assistive technologies. |
|
|
3446
|
-
| `aria-expanded="false"` | `.pf-v6-c-tree-view__list-item` | For an expandable item, indicates the parent node is closed, i.e., the descendant elements are not visible. |
|
|
3447
|
-
| `aria-expanded="true"` | `.pf-v6-c-tree-view__list-item.pf-m-expanded` | Indicates the parent node is open, i.e., the descendant elements are visible. |
|
|
3448
|
-
| `tabindex="-1"` | `.pf-v6-c-tree-view__list-item` | Makes the element with the treeitem role focusable without including it in the tab sequence of the page. |
|
|
3449
|
-
| `tabindex="0"` | `.pf-v6-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. |
|
|
3450
|
-
| `aria-label="[button label text]"` | `.pf-v6-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** |
|
|
3451
|
-
|
|
3452
4030
|
### Usage
|
|
3453
4031
|
|
|
3454
4032
|
| Class | Applied | Outcome |
|