From 0d5ec4fd2b0eda91d3c3a500958996f46541a7e9 Mon Sep 17 00:00:00 2001 From: Titani Labaj <39532947+tlabaj@users.noreply.github.com> Date: Fri, 21 Jul 2023 09:38:06 -0400 Subject: [PATCH] Rebase postv5 (#9393) * chore(deps): bump docs framework (#9370) * chore(docs): Updated screenshots (#9337) * chore(docs): Updated screenshots * updated screenshots after logo update --------- Co-authored-by: Titani * chore(release): releasing packages [ci skip] - @patternfly/react-docs@6.0.0-prerelease.26 * chore(deps): bump to latest chore version (#9389) * chore(deps): bump to latest chore version * bump to 16 * chore(release): releasing packages [ci skip] - @patternfly/react-charts@7.0.0-prerelease.12 - @patternfly/react-code-editor@5.0.0-prerelease.24 - @patternfly/react-core@5.0.0-prerelease.24 - @patternfly/react-docs@6.0.0-prerelease.27 - @patternfly/react-icons@5.0.0-prerelease.9 - demo-app-ts@5.0.0-prerelease.22 - @patternfly/react-styles@5.0.0-prerelease.7 - @patternfly/react-table@5.0.0-prerelease.24 - @patternfly/react-tokens@5.0.0-prerelease.9 * fix(fileupload): use default readonly text input instead of plain (#9387) * fix(fileupload): use default readonly text input instead of plain * chore(build): snaps * fix(CodeEditor): prevent clicks in textarea from opening fileupload (#9385) * fix(toolbar): added chip container class to toolbar content (#9379) * feat(Menu): added support for tooltips to menu (#9382) * fix(whitespace): Update readme to trigger release * chore(release): releasing packages [ci skip] - @patternfly/react-code-editor@5.0.0-prerelease.25 - @patternfly/react-core@5.0.0-prerelease.25 - @patternfly/react-docs@6.0.0-prerelease.28 - demo-app-ts@5.0.0-prerelease.23 - @patternfly/react-table@5.0.0-prerelease.25 * fix(Toolbar): resolved typeerror on full page demo (#9355) * chore(TreeView): converted examples to TS (#9286) * fix(ExpandableSection): added ARIA attributes (#9303) * fix(ExpandableSection): added ARIA attributes * Updated failing snapshots due to mismatching generated ID * chore(Tooltip): updated unit tests (#9295) * chore(Tooltip): updated unit tests * Updated mock and tests * Updated based on Austin feedback * Updated integration tests * Removed unused imports * Updated remaining tests using Popper mock * Removed extraenous snapshot test * Removed test * Split out onTooltipHidden test * chore(Card): added tests for new clickable/selectable (#9262) * chore(Card): added tests for new clickable/selectable * Added tests for clickable cards * Updated card with actions test * fix(Slider): reverted taborder (#9293) * fix(chore): Fix deprecated wizard integration tests (#9312) * fix(chore): Fix deprecated wizard integration tests * updated non deprecated test as well --------- Co-authored-by: Titani --------- Co-authored-by: Titani Co-authored-by: patternfly-build Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com> Co-authored-by: Dallas Co-authored-by: Dana Gutride Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com> --- README.md | 2 +- packages/react-charts/CHANGELOG.md | 4 + packages/react-charts/package.json | 6 +- packages/react-code-editor/CHANGELOG.md | 10 ++ packages/react-code-editor/package.json | 8 +- .../src/components/CodeEditor/CodeEditor.tsx | 2 +- packages/react-core/CHANGELOG.md | 15 +++ packages/react-core/package.json | 10 +- .../src/components/Dropdown/DropdownItem.tsx | 9 ++ .../components/Dropdown/examples/Dropdown.md | 3 +- .../Dropdown/examples/DropdownBasic.tsx | 7 +- .../components/FileUpload/FileUploadField.tsx | 2 +- .../__snapshots__/FileUpload.test.tsx.snap | 2 +- .../FileUploadField.test.tsx.snap | 2 +- .../react-core/src/components/Menu/Menu.tsx | 2 + .../src/components/Menu/MenuItem.tsx | 89 ++++++++++++------ .../src/components/Menu/examples/Menu.md | 3 +- .../components/Menu/examples/MenuBasic.tsx | 6 ++ .../Toolbar/ToolbarChipGroupContent.tsx | 1 + .../ToolbarChipGroupContent.test.tsx.snap | 2 +- .../__snapshots__/Toolbar.test.tsx.snap | 4 +- packages/react-docs/CHANGELOG.md | 12 +++ packages/react-docs/package.json | 20 ++-- ...t-group-toast-with-notification-drawer.png | Bin 0 -> 43243 bytes .../react-demos/using-name-selector.png | Bin 141229 -> 141088 bytes .../background-image/react/basic.png | Bin 27827 -> 26508 bytes .../react-demos/basic-sticky-banner.png | Bin 45793 -> 45660 bytes .../react-demos/top-and-bottom-banner.png | Bin 49254 -> 49088 bytes .../scrollspy-with-subsections.png | Bin 121319 -> 121235 bytes .../jump-links/react-demos/with-drawer.png | Bin 118789 -> 118639 bytes .../components/login-page/react/basic.png | Bin 197681 -> 51383 bytes .../login-page/react/showhide-password.png | Bin 198089 -> 51640 bytes .../react/with-header-utilities.png | Bin 198238 -> 51895 bytes ...-with-utilities-and-user-dropdown-menu.png | Bin 32056 -> 31884 bytes .../navigation/react-demos/default-nav.png | Bin 34241 -> 34150 bytes .../navigation/react-demos/drilldown-nav.png | Bin 20245 -> 20157 bytes .../navigation/react-demos/expandable-nav.png | Bin 37186 -> 36980 bytes .../navigation/react-demos/flyout-nav.png | Bin 20360 -> 20212 bytes .../navigation/react-demos/grouped-nav.png | Bin 32285 -> 32260 bytes .../horizontal-nav-with-horizontal-subnav.png | Bin 41261 -> 40971 bytes .../navigation/react-demos/horizontal-nav.png | Bin 30189 -> 32036 bytes .../react-demos/horizontal-subnav.png | Bin 41705 -> 41603 bytes .../react-demos/light-nav-deprecated.png | Bin 0 -> 29699 bytes .../navigation/react-demos/manual-nav.png | Bin 30912 -> 32408 bytes .../react-demos/tertiary-nav-deprecated.png | Bin 0 -> 31266 bytes .../notification-drawer/react-demos/basic.png | Bin 24621 -> 25956 bytes .../react-demos/grouped.png | Bin 24621 -> 25956 bytes ...ky-section-breadcrumb-with-breakpoints.png | Bin 52961 -> 52391 bytes .../sticky-section-group-alternate-syntax.png | Bin 53051 -> 52482 bytes .../page/react-demos/sticky-section-group.png | Bin 53051 -> 52482 bytes .../components/pagination/react/sticky.png | Bin 57534 -> 57555 bytes .../react-demos/automatic-pagination.png | Bin 0 -> 28202 bytes .../table/react-demos/bulk-select.png | Bin 76630 -> 39130 bytes .../table/react-demos/column-management.png | Bin 63122 -> 63823 bytes .../components/table/react-demos/compact.png | Bin 67406 -> 67210 bytes .../table/react-demos/compound-expansion.png | Bin 45362 -> 45341 bytes .../components/table/react-demos/empty.png | Bin 32912 -> 32930 bytes .../components/table/react-demos/error.png | Bin 32693 -> 32682 bytes .../table/react-demos/expandcollapse-all.png | Bin 42035 -> 41651 bytes .../table/react-demos/filterable.png | Bin 0 -> 48536 bytes .../components/table/react-demos/loading.png | Bin 28830 -> 28667 bytes .../react-demos/sortable---responsive.png | Bin 82636 -> 83216 bytes .../static-bottom-pagination-on-mobile.png | Bin 65999 -> 66280 bytes ...sticky-columns-and-header-with-toolbar.png | Bin 42975 -> 39496 bytes .../table/react-demos/sticky-first-column.png | Bin 69928 -> 69705 bytes .../table/react-demos/sticky-header.png | Bin 67425 -> 65975 bytes .../tabs/react-demos/modal-tabs.png | Bin 43556 -> 43412 bytes .../tabs/react-demos/nested-tabs.png | Bin 49577 -> 49089 bytes .../react-demos/nested-unindented-tabs.png | Bin 42223 -> 41767 bytes .../open-tabs-with-secondary-tabs.png | Bin 44589 -> 44474 bytes .../components/tabs/react-demos/open-tabs.png | Bin 42835 -> 42712 bytes .../tabs/react-demos/tables-and-tabs.png | Bin 56817 -> 56939 bytes .../console-log-viewer-toolbar-demo.png | Bin 25062 -> 7380 bytes ...dal-with-drawer-and-informational-step.png | Bin 31115 -> 32848 bytes .../react-demos/in-modal-with-drawer.png | Bin 26748 -> 27676 bytes .../wizard/react-demos/in-modal.png | Bin 39387 -> 38857 bytes ...age-with-drawer-and-informational-step.png | Bin 32710 -> 32468 bytes .../react-demos/in-page-with-drawer.png | Bin 28656 -> 28826 bytes .../components/wizard/react-demos/in-page.png | Bin 29589 -> 29640 bytes .../card-view/react-demos/card-view.png | Bin 0 -> 78667 bytes .../react-demos/primary-detail-card-view.png | Bin 0 -> 87647 bytes .../primary-detail-content-padding.png | Bin 0 -> 51552 bytes .../primary-detail-data-list-in-card.png | Bin 0 -> 46992 bytes .../react-demos/primary-detail-full-page.png | Bin 0 -> 49969 bytes .../primary-detail-inline-modifier.png | Bin 0 -> 49969 bytes .../primary-detail-simple-list-in-card.png | Bin 0 -> 44026 bytes packages/react-icons/CHANGELOG.md | 4 + packages/react-icons/package.json | 4 +- .../demo-app-ts/CHANGELOG.md | 8 ++ .../demo-app-ts/package.json | 4 +- packages/react-styles/CHANGELOG.md | 4 + packages/react-styles/package.json | 4 +- packages/react-table/CHANGELOG.md | 10 ++ packages/react-table/package.json | 10 +- .../src/components/Table/ActionsColumn.tsx | 6 +- .../src/components/Table/TableTypes.tsx | 9 +- .../src/components/Table/examples/Table.md | 1 - packages/react-tokens/CHANGELOG.md | 4 + packages/react-tokens/package.json | 4 +- yarn.lock | 16 ++-- 100 files changed, 218 insertions(+), 91 deletions(-) create mode 100644 packages/react-docs/patternfly-docs/generated/components/alert/react-demos/alert-group-toast-with-notification-drawer.png create mode 100644 packages/react-docs/patternfly-docs/generated/components/navigation/react-demos/light-nav-deprecated.png create mode 100644 packages/react-docs/patternfly-docs/generated/components/navigation/react-demos/tertiary-nav-deprecated.png create mode 100644 packages/react-docs/patternfly-docs/generated/components/table/react-demos/automatic-pagination.png create mode 100644 packages/react-docs/patternfly-docs/generated/components/table/react-demos/filterable.png create mode 100644 packages/react-docs/patternfly-docs/generated/patterns/card-view/react-demos/card-view.png create mode 100644 packages/react-docs/patternfly-docs/generated/patterns/primary-detail/react-demos/primary-detail-card-view.png create mode 100644 packages/react-docs/patternfly-docs/generated/patterns/primary-detail/react-demos/primary-detail-content-padding.png create mode 100644 packages/react-docs/patternfly-docs/generated/patterns/primary-detail/react-demos/primary-detail-data-list-in-card.png create mode 100644 packages/react-docs/patternfly-docs/generated/patterns/primary-detail/react-demos/primary-detail-full-page.png create mode 100644 packages/react-docs/patternfly-docs/generated/patterns/primary-detail/react-demos/primary-detail-inline-modifier.png create mode 100644 packages/react-docs/patternfly-docs/generated/patterns/primary-detail/react-demos/primary-detail-simple-list-in-card.png diff --git a/README.md b/README.md index 5d0308d31b0..2266457010f 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ This project provides a set of React components for the [PatternFly project](htt 3. [Contribution guidelines](#Contribution-guidelines) 4. [License](#License) -Using PatternFly 3? Take a look at the [PatternFly 3 React component information](https://github.com/patternfly/patternfly-react/blob/patternfly-3/README.md). +Using PatternFly 3? Take a look at the [PatternFly 3 React component information](https://github.com/patternfly/patternfly-react/blob/patternfly-3/README.md). ### PatternFly React packages diff --git a/packages/react-charts/CHANGELOG.md b/packages/react-charts/CHANGELOG.md index cb357fde2f1..95ffb833bc8 100644 --- a/packages/react-charts/CHANGELOG.md +++ b/packages/react-charts/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# 7.0.0-prerelease.12 (2023-07-20) + +**Note:** Version bump only for package @patternfly/react-charts + # [7.0.0-prerelease.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.0.0-prerelease.10...@patternfly/react-charts@7.0.0-prerelease.11) (2023-07-14) **Note:** Version bump only for package @patternfly/react-charts diff --git a/packages/react-charts/package.json b/packages/react-charts/package.json index 7a052e2cb03..5bd1f57531f 100644 --- a/packages/react-charts/package.json +++ b/packages/react-charts/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-charts", - "version": "7.0.0-prerelease.11", + "version": "7.0.0-prerelease.12", "description": "This library provides a set of React chart components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -29,8 +29,8 @@ }, "homepage": "https://github.com/patternfly/patternfly-react#readme", "dependencies": { - "@patternfly/react-styles": "^5.0.0-prerelease.6", - "@patternfly/react-tokens": "^5.0.0-prerelease.8", + "@patternfly/react-styles": "^5.0.0-prerelease.7", + "@patternfly/react-tokens": "^5.0.0-prerelease.9", "hoist-non-react-statics": "^3.3.0", "lodash": "^4.17.19", "tslib": "^2.5.0", diff --git a/packages/react-code-editor/CHANGELOG.md b/packages/react-code-editor/CHANGELOG.md index 88fc3c01698..544d36618f4 100644 --- a/packages/react-code-editor/CHANGELOG.md +++ b/packages/react-code-editor/CHANGELOG.md @@ -3,6 +3,16 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [5.0.0-prerelease.25](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.0.0-prerelease.24...@patternfly/react-code-editor@5.0.0-prerelease.25) (2023-07-20) + +### Bug Fixes + +- **CodeEditor:** prevent clicks in textarea from opening fileupload ([#9385](https://github.com/patternfly/patternfly-react/issues/9385)) ([959bc7e](https://github.com/patternfly/patternfly-react/commit/959bc7ef2723bc3ef57db906ded7b1854b577eee)) + +# 5.0.0-prerelease.24 (2023-07-20) + +**Note:** Version bump only for package @patternfly/react-code-editor + # [5.0.0-prerelease.23](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.0.0-prerelease.22...@patternfly/react-code-editor@5.0.0-prerelease.23) (2023-07-14) **Note:** Version bump only for package @patternfly/react-code-editor diff --git a/packages/react-code-editor/package.json b/packages/react-code-editor/package.json index e011bb5bb23..f5737e1534e 100644 --- a/packages/react-code-editor/package.json +++ b/packages/react-code-editor/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-code-editor", - "version": "5.0.0-prerelease.23", + "version": "5.0.0-prerelease.25", "description": "This package provides a PatternFly wrapper for the Monaco code editor\n", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -30,9 +30,9 @@ "clean": "rimraf dist" }, "dependencies": { - "@patternfly/react-core": "^5.0.0-prerelease.23", - "@patternfly/react-icons": "^5.0.0-prerelease.8", - "@patternfly/react-styles": "^5.0.0-prerelease.6", + "@patternfly/react-core": "^5.0.0-prerelease.25", + "@patternfly/react-icons": "^5.0.0-prerelease.9", + "@patternfly/react-styles": "^5.0.0-prerelease.7", "react-dropzone": "14.2.3", "tslib": "^2.5.0" }, diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx index 7abc5263d7d..9abdd0f13fb 100644 --- a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx +++ b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx @@ -645,7 +645,7 @@ export class CodeEditor extends React.Component event.preventDefault() // Prevents clicking TextArea from opening file dialog + onClick: (event) => event.stopPropagation() // Prevents clicking TextArea from opening file dialog })} className={`pf-v5-c-file-upload ${isDragActive && 'pf-m-drag-hover'} ${isLoading && 'pf-m-loading'}`} > diff --git a/packages/react-core/CHANGELOG.md b/packages/react-core/CHANGELOG.md index a1ee2a387ae..f65f80cabfe 100644 --- a/packages/react-core/CHANGELOG.md +++ b/packages/react-core/CHANGELOG.md @@ -3,6 +3,21 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [5.0.0-prerelease.25](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@5.0.0-prerelease.24...@patternfly/react-core@5.0.0-prerelease.25) (2023-07-20) + +### Bug Fixes + +- **fileupload:** use default readonly text input instead of plain ([#9387](https://github.com/patternfly/patternfly-react/issues/9387)) ([cc8f777](https://github.com/patternfly/patternfly-react/commit/cc8f777364e65dfc883e653d36931e885b56e804)) +- **toolbar:** added chip container class to toolbar content ([#9379](https://github.com/patternfly/patternfly-react/issues/9379)) ([df21278](https://github.com/patternfly/patternfly-react/commit/df2127881a00299e8bf73dab14dfc7482598a14b)) + +### Features + +- **Menu:** added support for tooltips to menu ([#9382](https://github.com/patternfly/patternfly-react/issues/9382)) ([8579096](https://github.com/patternfly/patternfly-react/commit/8579096dbc4ff48217e5e3e71923a589f60cda7f)) + +# 5.0.0-prerelease.24 (2023-07-20) + +**Note:** Version bump only for package @patternfly/react-core + # [5.0.0-prerelease.23](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@5.0.0-prerelease.22...@patternfly/react-core@5.0.0-prerelease.23) (2023-07-14) **Note:** Version bump only for package @patternfly/react-core diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 48fdc77fdfa..c966a9f3025 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-core", - "version": "5.0.0-prerelease.23", + "version": "5.0.0-prerelease.25", "description": "This library provides a set of common React components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -46,15 +46,15 @@ "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json" }, "dependencies": { - "@patternfly/react-icons": "^5.0.0-prerelease.8", - "@patternfly/react-styles": "^5.0.0-prerelease.6", - "@patternfly/react-tokens": "^5.0.0-prerelease.8", + "@patternfly/react-icons": "^5.0.0-prerelease.9", + "@patternfly/react-styles": "^5.0.0-prerelease.7", + "@patternfly/react-tokens": "^5.0.0-prerelease.9", "focus-trap": "7.4.3", "react-dropzone": "^14.2.3", "tslib": "^2.5.0" }, "devDependencies": { - "@patternfly/patternfly": "5.0.0-prerelease.13", + "@patternfly/patternfly": "5.0.0-prerelease.16", "@rollup/plugin-commonjs": "^25.0.0", "@rollup/plugin-node-resolve": "^15.0.2", "@rollup/plugin-replace": "^5.0.2", diff --git a/packages/react-core/src/components/Dropdown/DropdownItem.tsx b/packages/react-core/src/components/Dropdown/DropdownItem.tsx index f33ca517012..d6cf6e127c1 100644 --- a/packages/react-core/src/components/Dropdown/DropdownItem.tsx +++ b/packages/react-core/src/components/Dropdown/DropdownItem.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { css } from '@patternfly/react-styles'; import { MenuItemProps, MenuItem } from '../Menu'; +import { TooltipProps } from '../Tooltip'; import { useOUIAProps, OUIAProps } from '../../helpers'; /** @@ -17,6 +18,8 @@ export interface DropdownItemProps extends Omit, OUIAProps description?: React.ReactNode; /** Render item as disabled option */ isDisabled?: boolean; + /** Render item as aria-disabled option */ + isAriaDisabled?: boolean; /** Identifies the component in the dropdown onSelect callback */ value?: any; /** Callback for item click */ @@ -25,6 +28,8 @@ export interface DropdownItemProps extends Omit, OUIAProps ouiaId?: number | string; /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */ ouiaSafe?: boolean; + /** Props for adding a tooltip to a menu item */ + tooltipProps?: TooltipProps; } const DropdownItemBase: React.FunctionComponent = ({ @@ -32,11 +37,13 @@ const DropdownItemBase: React.FunctionComponent = ({ className, description, isDisabled, + isAriaDisabled, value, onClick, ouiaId, ouiaSafe, innerRef, + tooltipProps, ...props }: DropdownItemProps) => { const ouiaProps = useOUIAProps(DropdownItem.displayName, ouiaId, ouiaSafe); @@ -45,8 +52,10 @@ const DropdownItemBase: React.FunctionComponent = ({ className={css(className)} description={description} isDisabled={isDisabled} + isAriaDisabled={isAriaDisabled} itemId={value} onClick={onClick} + tooltipProps={tooltipProps} ref={innerRef} {...ouiaProps} {...props} diff --git a/packages/react-core/src/components/Dropdown/examples/Dropdown.md b/packages/react-core/src/components/Dropdown/examples/Dropdown.md index e826d27ee64..f7efe1bff52 100644 --- a/packages/react-core/src/components/Dropdown/examples/Dropdown.md +++ b/packages/react-core/src/components/Dropdown/examples/Dropdown.md @@ -11,7 +11,8 @@ propComponents: 'DropdownList', 'MenuToggle', 'DropdownToggleProps', - 'DropdownPopperProps' + 'DropdownPopperProps', + 'TooltipProps' ] --- diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx index 7b9b6b4f1b0..e4a7f9dcc78 100644 --- a/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx +++ b/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx @@ -46,11 +46,14 @@ export const DropdownBasic: React.FunctionComponent = () => { Disabled Link + + Aria-disabled Link + - + Separated Action - ev.preventDefault()}> + ev.preventDefault()}> Separated Link diff --git a/packages/react-core/src/components/FileUpload/FileUploadField.tsx b/packages/react-core/src/components/FileUpload/FileUploadField.tsx index 24dbd13ae9d..1ca3cae4c9a 100644 --- a/packages/react-core/src/components/FileUpload/FileUploadField.tsx +++ b/packages/react-core/src/components/FileUpload/FileUploadField.tsx @@ -132,7 +132,7 @@ export const FileUploadField: React.FunctionComponent = ({ { (navigableElement?.tagName === 'DIV' && navigableElement.querySelector('input')) || // for MenuSearchInput ((navigableElement.firstChild as Element)?.tagName === 'LABEL' && navigableElement.querySelector('input')) || // for MenuItem checkboxes + ((navigableElement.firstChild as Element)?.tagName === 'DIV' && + navigableElement.querySelector('a, button, input')) || // For aria-disabled element that is rendered inside a div with "display: contents" styling (navigableElement.firstChild as Element) } noHorizontalArrowHandling={ diff --git a/packages/react-core/src/components/Menu/MenuItem.tsx b/packages/react-core/src/components/Menu/MenuItem.tsx index f4c48ba2368..6791897b237 100644 --- a/packages/react-core/src/components/Menu/MenuItem.tsx +++ b/packages/react-core/src/components/Menu/MenuItem.tsx @@ -11,6 +11,7 @@ import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon'; import { Checkbox } from '../Checkbox'; import { MenuContext, MenuItemContext } from './MenuContext'; import { MenuItemAction } from './MenuItemAction'; +import { Tooltip, TooltipProps } from '../Tooltip'; import { canUseDOM } from '../../helpers/util'; import { useIsomorphicLayoutEffect } from '../../helpers/useIsomorphicLayout'; import { GenerateId } from '../../helpers/GenerateId/GenerateId'; @@ -40,6 +41,10 @@ export interface MenuItemProps extends Omit, 'onC component?: React.ElementType | React.ComponentType; /** Render item as disabled option */ isDisabled?: boolean; + /** Render item as aria-disabled option */ + isAriaDisabled?: boolean; + /** Props for adding a tooltip to a menu item */ + tooltipProps?: TooltipProps; /** Render item with icon */ icon?: React.ReactNode; /** Render item with one or more actions */ @@ -94,6 +99,7 @@ const MenuItemBase: React.FunctionComponent = ({ onClick = () => {}, component = 'button', isDisabled = false, + isAriaDisabled = false, isExternalLink = false, isSelected = null, isFocused, @@ -106,6 +112,7 @@ const MenuItemBase: React.FunctionComponent = ({ innerRef, id, 'aria-label': ariaLabel, + tooltipProps, ...props }: MenuItemProps) => { const { @@ -225,10 +232,12 @@ const MenuItemBase: React.FunctionComponent = ({ }; const onItemSelect = (event: any, onSelect: any) => { - // Trigger callback for Menu onSelect - onSelect && onSelect(event, itemId); - // Trigger callback for item onClick - onClick && onClick(event); + if (!isAriaDisabled) { + // Trigger callback for Menu onSelect + onSelect && onSelect(event, itemId); + // Trigger callback for item onClick + onClick && onClick(event); + } }; const _isOnPath = (isOnPath && isOnPath) || (drilldownItemPath && drilldownItemPath.includes(itemId)) || false; let drill: (event: React.KeyboardEvent | React.MouseEvent) => void; @@ -252,16 +261,18 @@ const MenuItemBase: React.FunctionComponent = ({ if (Component === 'a') { additionalProps = { href: to, - 'aria-disabled': isDisabled ? true : null, + 'aria-disabled': isDisabled || isAriaDisabled ? true : null, // prevent invalid 'disabled' attribute on tags disabled: null, target: isExternalLink ? '_blank' : null }; } else if (Component === 'button') { additionalProps = { - type: 'button' + type: 'button', + 'aria-disabled': isAriaDisabled ? true : null }; } + if (isOnPath) { additionalProps['aria-expanded'] = true; } else if (hasFlyout) { @@ -300,25 +311,8 @@ const MenuItemBase: React.FunctionComponent = ({ }; const isSelectMenu = menuRole === 'listbox'; - return ( -
  • + const renderItem = ( + <> {(randomId) => ( = ({ ref={innerRef} {...(!hasCheckbox && { onClick: (event: React.KeyboardEvent | React.MouseEvent) => { - onItemSelect(event, onSelect); - drill && drill(event); - flyoutMenu && handleFlyout(event); + if (!isAriaDisabled) { + onItemSelect(event, onSelect); + drill && drill(event); + flyoutMenu && handleFlyout(event); + } else { + event.preventDefault(); + } } })} {...(hasCheckbox && { htmlFor: randomId })} @@ -355,6 +353,7 @@ const MenuItemBase: React.FunctionComponent = ({ isChecked={isSelected || false} onChange={(event) => onItemSelect(event, onSelect)} isDisabled={isDisabled} + aria-disabled={isAriaDisabled} /> )} @@ -402,6 +401,40 @@ const MenuItemBase: React.FunctionComponent = ({ /> )} + + ); + + return ( +
  • { + if (!isAriaDisabled) { + onMouseOver(); + } + }} + {...(flyoutMenu && !isAriaDisabled && { onKeyDown: handleFlyout })} + ref={ref} + role={!hasCheckbox ? 'none' : 'menuitem'} + {...(hasCheckbox && { 'aria-label': ariaLabel })} + {...props} + > + {tooltipProps ? ( + + {renderItem} + + ) : ( + renderItem + )}
    • ); }; diff --git a/packages/react-core/src/components/Menu/examples/Menu.md b/packages/react-core/src/components/Menu/examples/Menu.md index 26f035f7a47..57c1b9486a5 100644 --- a/packages/react-core/src/components/Menu/examples/Menu.md +++ b/packages/react-core/src/components/Menu/examples/Menu.md @@ -14,7 +14,8 @@ propComponents: 'MenuSearchInput', 'MenuGroup', 'MenuContainer', - 'MenuPopperProps' + 'MenuPopperProps', + 'TooltipProps' ] ouia: true --- diff --git a/packages/react-core/src/components/Menu/examples/MenuBasic.tsx b/packages/react-core/src/components/Menu/examples/MenuBasic.tsx index be87ab6143d..b615617f658 100644 --- a/packages/react-core/src/components/Menu/examples/MenuBasic.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuBasic.tsx @@ -33,6 +33,12 @@ export const MenuBasic: React.FunctionComponent = () => { Disabled link + + Aria-disabled action + + + Aria-disabled link + diff --git a/packages/react-core/src/components/Toolbar/ToolbarChipGroupContent.tsx b/packages/react-core/src/components/Toolbar/ToolbarChipGroupContent.tsx index 1987864cff0..1e3448bacda 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarChipGroupContent.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarChipGroupContent.tsx @@ -72,6 +72,7 @@ export class ToolbarChipGroupContent extends React.Component