From 9fb69c310499c33769d84f26b9b7cf075d4bee15 Mon Sep 17 00:00:00 2001 From: Titani Date: Wed, 19 Jul 2023 13:38:52 -0400 Subject: [PATCH 01/10] feat(Menu): Added support for tooltips to menu --- .../src/components/Menu/MenuItem.tsx | 74 +++++++++++++------ .../components/Menu/examples/MenuBasic.tsx | 2 +- 2 files changed, 52 insertions(+), 24 deletions(-) diff --git a/packages/react-core/src/components/Menu/MenuItem.tsx b/packages/react-core/src/components/Menu/MenuItem.tsx index f4c48ba2368..5392421a2db 100644 --- a/packages/react-core/src/components/Menu/MenuItem.tsx +++ b/packages/react-core/src/components/Menu/MenuItem.tsx @@ -11,10 +11,18 @@ 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 } from '../Tooltip'; import { canUseDOM } from '../../helpers/util'; import { useIsomorphicLayoutEffect } from '../../helpers/useIsomorphicLayout'; import { GenerateId } from '../../helpers/GenerateId/GenerateId'; +export interface tooltipPropsObject { + /** Tooltip to display when hovered over the item */ + tooltip?: React.ReactNode; + /** Additional tooltip props forwarded to the tooltip component */ + tooltipProps?: any; +} + export interface MenuItemProps extends Omit, 'onClick'> { /** Content rendered inside the menu list item. */ children?: React.ReactNode; @@ -40,6 +48,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?: tooltipPropsObject; /** Render item with icon */ icon?: React.ReactNode; /** Render item with one or more actions */ @@ -94,6 +106,7 @@ const MenuItemBase: React.FunctionComponent = ({ onClick = () => {}, component = 'button', isDisabled = false, + isAriaDisabled = false, isExternalLink = false, isSelected = null, isFocused, @@ -106,6 +119,7 @@ const MenuItemBase: React.FunctionComponent = ({ innerRef, id, 'aria-label': ariaLabel, + tooltipProps, ...props }: MenuItemProps) => { const { @@ -252,16 +266,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') { + } else if (Component === 'button' && isDisabled) { additionalProps = { - type: 'button' + type: 'button', + 'aria-disabled': isAriaDisabled ? true : null }; } + if (isOnPath) { additionalProps['aria-expanded'] = true; } else if (hasFlyout) { @@ -300,30 +316,13 @@ const MenuItemBase: React.FunctionComponent = ({ }; const isSelectMenu = menuRole === 'listbox'; - return ( -
  • + const renderItem = ( + <> {(randomId) => ( = ({ /> )} + + ); + + return ( +
  • + {tooltipProps ? ( + + {renderItem} + + ) : ( + renderItem + )}
    • ); }; diff --git a/packages/react-core/src/components/Menu/examples/MenuBasic.tsx b/packages/react-core/src/components/Menu/examples/MenuBasic.tsx index be87ab6143d..2a4528b3479 100644 --- a/packages/react-core/src/components/Menu/examples/MenuBasic.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuBasic.tsx @@ -30,7 +30,7 @@ export const MenuBasic: React.FunctionComponent = () => { Link Disabled action - + Disabled link From 19b547cc4be43e08d0a8f5793bd11659d4426823 Mon Sep 17 00:00:00 2001 From: Titani Date: Wed, 19 Jul 2023 14:09:53 -0400 Subject: [PATCH 02/10] updated snapshots, added tootip props to docs --- .../__tests__/__snapshots__/DataList.test.tsx.snap | 2 -- packages/react-core/src/components/Menu/MenuItem.tsx | 8 ++++---- packages/react-core/src/components/Menu/examples/Menu.md | 3 ++- .../__snapshots__/OverflowMenuDropdownItem.test.tsx.snap | 1 - 4 files changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap index 7b8b6990649..ccb39901305 100644 --- a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap +++ b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap @@ -184,7 +184,6 @@ exports[`DataList DataListAction dropdown 1`] = ` class="pf-v5-c-menu__item" role="menuitem" tabindex="0" - type="button" > ; } export interface MenuItemProps extends Omit, 'onClick'> { @@ -51,7 +51,7 @@ export interface MenuItemProps extends Omit, 'onC /** Render item as aria-disabled option */ isAriaDisabled?: boolean; /** Props for adding a tooltip to a menu item */ - tooltipProps?: tooltipPropsObject; + tooltipProps?: MenuItemTooltipPropsObject; /** Render item with icon */ icon?: React.ReactNode; /** Render item with one or more actions */ diff --git a/packages/react-core/src/components/Menu/examples/Menu.md b/packages/react-core/src/components/Menu/examples/Menu.md index 26f035f7a47..6686c94253d 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', + 'MenuItemTooltipPropsObject' ] ouia: true --- diff --git a/packages/react-core/src/components/OverflowMenu/__tests__/Generated/__snapshots__/OverflowMenuDropdownItem.test.tsx.snap b/packages/react-core/src/components/OverflowMenu/__tests__/Generated/__snapshots__/OverflowMenuDropdownItem.test.tsx.snap index 7cf4438d23e..d074f7b27c2 100644 --- a/packages/react-core/src/components/OverflowMenu/__tests__/Generated/__snapshots__/OverflowMenuDropdownItem.test.tsx.snap +++ b/packages/react-core/src/components/OverflowMenu/__tests__/Generated/__snapshots__/OverflowMenuDropdownItem.test.tsx.snap @@ -13,7 +13,6 @@ exports[`OverflowMenuDropdownItem should match snapshot 1`] = ` class="pf-v5-c-menu__item" role="menuitem" tabindex="-1" - type="button" > Date: Wed, 19 Jul 2023 18:56:12 -0400 Subject: [PATCH 03/10] Updates fron review comments and after updates core --- .../src/components/Dropdown/DropdownItem.tsx | 10 +++++++++- .../components/Dropdown/examples/Dropdown.md | 3 ++- .../Dropdown/examples/DropdownBasic.tsx | 7 +++++-- .../react-core/src/components/Menu/Menu.tsx | 4 ++-- .../src/components/Menu/MenuItem.tsx | 18 +++++++++++------- .../src/components/Menu/examples/MenuBasic.tsx | 8 +++++++- 6 files changed, 36 insertions(+), 14 deletions(-) diff --git a/packages/react-core/src/components/Dropdown/DropdownItem.tsx b/packages/react-core/src/components/Dropdown/DropdownItem.tsx index f33ca517012..d5aca98a4df 100644 --- a/packages/react-core/src/components/Dropdown/DropdownItem.tsx +++ b/packages/react-core/src/components/Dropdown/DropdownItem.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { css } from '@patternfly/react-styles'; -import { MenuItemProps, MenuItem } from '../Menu'; +import { MenuItemProps, MenuItem, MenuItemTooltipPropsObject } from '../Menu'; import { useOUIAProps, OUIAProps } from '../../helpers'; /** @@ -17,6 +17,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 +27,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?: MenuItemTooltipPropsObject; } const DropdownItemBase: React.FunctionComponent = ({ @@ -32,11 +36,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 +51,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..02313e7ab4f 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', + 'MenuItemTooltipPropsObject' ] --- diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx index 7b9b6b4f1b0..0d33f841da7 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/Menu/Menu.tsx b/packages/react-core/src/components/Menu/Menu.tsx index e428fed4571..41e2d168490 100644 --- a/packages/react-core/src/components/Menu/Menu.tsx +++ b/packages/react-core/src/components/Menu/Menu.tsx @@ -163,7 +163,7 @@ class MenuBase extends React.Component { return; } const nextTarget = nextMenuChildren.filter( - (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider)) + (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-m-aria-disabled') || el.classList.contains(styles.divider)) )[0].firstChild; (nextTarget as HTMLElement).focus(); @@ -205,7 +205,7 @@ class MenuBase extends React.Component { if (activeElement.nextElementSibling && activeElement.nextElementSibling.classList.contains(styles.menu)) { const childItems = Array.from( activeElement.nextElementSibling.getElementsByTagName('UL')[0].children - ).filter((el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider))); + ).filter((el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-m-aria-disabled') || el.classList.contains(styles.divider))); (activeElement as HTMLElement).tabIndex = -1; (childItems[0].firstChild as HTMLElement).tabIndex = 0; diff --git a/packages/react-core/src/components/Menu/MenuItem.tsx b/packages/react-core/src/components/Menu/MenuItem.tsx index 4deeb474929..c09f4a630b3 100644 --- a/packages/react-core/src/components/Menu/MenuItem.tsx +++ b/packages/react-core/src/components/Menu/MenuItem.tsx @@ -239,10 +239,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; @@ -271,7 +273,7 @@ const MenuItemBase: React.FunctionComponent = ({ disabled: null, target: isExternalLink ? '_blank' : null }; - } else if (Component === 'button' && isDisabled) { + } else if (Component === 'button') { additionalProps = { type: 'button', 'aria-disabled': isAriaDisabled ? true : null @@ -322,7 +324,7 @@ const MenuItemBase: React.FunctionComponent = ({ {(randomId) => ( = ({ isChecked={isSelected || false} onChange={(event) => onItemSelect(event, onSelect)} isDisabled={isDisabled} + aria-disabled={isAriaDisabled} /> )} @@ -408,7 +411,8 @@ const MenuItemBase: React.FunctionComponent = ({
  • { Link Disabled action - + Disabled link + + Aria-disabled link + + + Aria-disabled link + From 8981872d5241f9e2d08fdd040a79d7dabe9fff9e Mon Sep 17 00:00:00 2001 From: Titani Date: Wed, 19 Jul 2023 19:18:31 -0400 Subject: [PATCH 04/10] Additionl update to fix keyboard handeling --- .../react-core/src/components/Menu/Menu.tsx | 39 ++++++++++++++----- 1 file changed, 30 insertions(+), 9 deletions(-) diff --git a/packages/react-core/src/components/Menu/Menu.tsx b/packages/react-core/src/components/Menu/Menu.tsx index 41e2d168490..96270791ca1 100644 --- a/packages/react-core/src/components/Menu/Menu.tsx +++ b/packages/react-core/src/components/Menu/Menu.tsx @@ -163,7 +163,11 @@ class MenuBase extends React.Component { return; } const nextTarget = nextMenuChildren.filter( - (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-m-aria-disabled') || el.classList.contains(styles.divider)) + (el) => + !( + (el.classList.contains('pf-m-disabled') && !el.classList.contains('pf-m-aria-disabled')) || + el.classList.contains(styles.divider) + ) )[0].firstChild; (nextTarget as HTMLElement).focus(); @@ -205,7 +209,13 @@ class MenuBase extends React.Component { if (activeElement.nextElementSibling && activeElement.nextElementSibling.classList.contains(styles.menu)) { const childItems = Array.from( activeElement.nextElementSibling.getElementsByTagName('UL')[0].children - ).filter((el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-m-aria-disabled') || el.classList.contains(styles.divider))); + ).filter( + (el) => + !( + (el.classList.contains('pf-m-disabled') && !el.classList.contains('pf-m-aria-disabled')) || + el.classList.contains(styles.divider) + ) + ); (activeElement as HTMLElement).tabIndex = -1; (childItems[0].firstChild as HTMLElement).tabIndex = 0; @@ -223,13 +233,21 @@ class MenuBase extends React.Component { if (isDrilldown) { return this.activeMenu ? Array.from(this.activeMenu.getElementsByTagName('UL')[0].children).filter( - (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider)) + (el) => + !( + (el.classList.contains('pf-m-disabled') && !el.classList.contains('pf-m-aria-disabled')) || + el.classList.contains(styles.divider) + ) ) : []; } else { return this.menuRef.current ? Array.from(this.menuRef.current.getElementsByTagName('LI')).filter( - (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider)) + (el) => + !( + (el.classList.contains('pf-m-disabled') && !el.classList.contains('pf-m-aria-disabled')) || + el.classList.contains(styles.divider) + ) ) : []; } @@ -298,11 +316,14 @@ class MenuBase extends React.Component { document.activeElement.closest(`.${styles.menuSearch}`) === element || // if element is a MenuSearch (document.activeElement.closest('ol') && document.activeElement.closest('ol').firstChild === element) } - getFocusableElement={(navigableElement: Element) => - (navigableElement?.tagName === 'DIV' && navigableElement.querySelector('input')) || // for MenuSearchInput - ((navigableElement.firstChild as Element)?.tagName === 'LABEL' && - navigableElement.querySelector('input')) || // for MenuItem checkboxes - (navigableElement.firstChild as Element) + getFocusableElement={ + (navigableElement: Element) => + (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')) || // For aria-disabled element that is rendered inside a div with "display: contents" styling + (navigableElement.firstChild as Element) } noHorizontalArrowHandling={ document.activeElement && From fa769fef8fc08a0bc6c4dc4730fc7e0e0ed6bcee Mon Sep 17 00:00:00 2001 From: Titani Date: Wed, 19 Jul 2023 20:11:45 -0400 Subject: [PATCH 05/10] prevent the link click deafult behviour when aria-disabled --- packages/react-core/src/components/Menu/MenuItem.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/react-core/src/components/Menu/MenuItem.tsx b/packages/react-core/src/components/Menu/MenuItem.tsx index c09f4a630b3..58a1548514d 100644 --- a/packages/react-core/src/components/Menu/MenuItem.tsx +++ b/packages/react-core/src/components/Menu/MenuItem.tsx @@ -333,9 +333,14 @@ const MenuItemBase: React.FunctionComponent = ({ 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 })} From b5d7c6c487892f1aecf6ce3afd0e3bb2aba5aae3 Mon Sep 17 00:00:00 2001 From: Titani Date: Thu, 20 Jul 2023 09:16:14 -0400 Subject: [PATCH 06/10] update snapshots --- .../DataList/__tests__/__snapshots__/DataList.test.tsx.snap | 2 ++ .../__snapshots__/OverflowMenuDropdownItem.test.tsx.snap | 1 + 2 files changed, 3 insertions(+) diff --git a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap index ccb39901305..7b8b6990649 100644 --- a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap +++ b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap @@ -184,6 +184,7 @@ exports[`DataList DataListAction dropdown 1`] = ` class="pf-v5-c-menu__item" role="menuitem" tabindex="0" + type="button" > Date: Thu, 20 Jul 2023 10:01:32 -0400 Subject: [PATCH 07/10] Update table IActions, updates from reviews. --- .../react-core/src/components/Menu/Menu.tsx | 41 +++++-------------- .../src/components/Menu/MenuItem.tsx | 11 +++-- .../src/components/Table/TableTypes.tsx | 9 ++-- 3 files changed, 23 insertions(+), 38 deletions(-) diff --git a/packages/react-core/src/components/Menu/Menu.tsx b/packages/react-core/src/components/Menu/Menu.tsx index 96270791ca1..fb6b91c9e00 100644 --- a/packages/react-core/src/components/Menu/Menu.tsx +++ b/packages/react-core/src/components/Menu/Menu.tsx @@ -163,11 +163,7 @@ class MenuBase extends React.Component { return; } const nextTarget = nextMenuChildren.filter( - (el) => - !( - (el.classList.contains('pf-m-disabled') && !el.classList.contains('pf-m-aria-disabled')) || - el.classList.contains(styles.divider) - ) + (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider)) )[0].firstChild; (nextTarget as HTMLElement).focus(); @@ -209,13 +205,7 @@ class MenuBase extends React.Component { if (activeElement.nextElementSibling && activeElement.nextElementSibling.classList.contains(styles.menu)) { const childItems = Array.from( activeElement.nextElementSibling.getElementsByTagName('UL')[0].children - ).filter( - (el) => - !( - (el.classList.contains('pf-m-disabled') && !el.classList.contains('pf-m-aria-disabled')) || - el.classList.contains(styles.divider) - ) - ); + ).filter((el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider))); (activeElement as HTMLElement).tabIndex = -1; (childItems[0].firstChild as HTMLElement).tabIndex = 0; @@ -233,21 +223,13 @@ class MenuBase extends React.Component { if (isDrilldown) { return this.activeMenu ? Array.from(this.activeMenu.getElementsByTagName('UL')[0].children).filter( - (el) => - !( - (el.classList.contains('pf-m-disabled') && !el.classList.contains('pf-m-aria-disabled')) || - el.classList.contains(styles.divider) - ) + (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider)) ) : []; } else { return this.menuRef.current ? Array.from(this.menuRef.current.getElementsByTagName('LI')).filter( - (el) => - !( - (el.classList.contains('pf-m-disabled') && !el.classList.contains('pf-m-aria-disabled')) || - el.classList.contains(styles.divider) - ) + (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider)) ) : []; } @@ -316,14 +298,13 @@ class MenuBase extends React.Component { document.activeElement.closest(`.${styles.menuSearch}`) === element || // if element is a MenuSearch (document.activeElement.closest('ol') && document.activeElement.closest('ol').firstChild === element) } - getFocusableElement={ - (navigableElement: Element) => - (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')) || // For aria-disabled element that is rendered inside a div with "display: contents" styling - (navigableElement.firstChild as Element) + getFocusableElement={(navigableElement: Element) => + (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={ document.activeElement && diff --git a/packages/react-core/src/components/Menu/MenuItem.tsx b/packages/react-core/src/components/Menu/MenuItem.tsx index 58a1548514d..c5ce4528d00 100644 --- a/packages/react-core/src/components/Menu/MenuItem.tsx +++ b/packages/react-core/src/components/Menu/MenuItem.tsx @@ -337,8 +337,7 @@ const MenuItemBase: React.FunctionComponent = ({ onItemSelect(event, onSelect); drill && drill(event); flyoutMenu && handleFlyout(event); - } - else { + } else { event.preventDefault(); } } @@ -425,8 +424,12 @@ const MenuItemBase: React.FunctionComponent = ({ isDanger && styles.modifiers.danger, className )} - onMouseOver={onMouseOver} - {...(flyoutMenu && { onKeyDown: handleFlyout })} + onMouseOver={() => { + if (!isAriaDisabled) { + onMouseOver(); + } + }} + {...(flyoutMenu && !isAriaDisabled && { onKeyDown: handleFlyout })} ref={ref} role={!hasCheckbox ? 'none' : 'menuitem'} {...(hasCheckbox && { 'aria-label': ariaLabel })} diff --git a/packages/react-table/src/components/Table/TableTypes.tsx b/packages/react-table/src/components/Table/TableTypes.tsx index 18cb66faebd..554b27cf302 100644 --- a/packages/react-table/src/components/Table/TableTypes.tsx +++ b/packages/react-table/src/components/Table/TableTypes.tsx @@ -2,6 +2,7 @@ import { formatterValueType, ColumnType, RowType, RowKeyType, HeaderType } from import { SortByDirection } from './SortColumn'; import { DropdownItemProps } from '@patternfly/react-core/dist/esm/components/Dropdown'; import { DropdownDirection, DropdownPosition } from '@patternfly/react-core/dist/esm/deprecated/components/Dropdown'; +import { MenuItemTooltipPropsObject } from '@patternfly/react-core/dist/esm/components/Menu'; import * as React from 'react'; import { CustomActionsToggleProps } from './ActionsColumn'; import { ButtonProps } from '@patternfly/react-core/dist/esm/components/Button'; @@ -154,10 +155,10 @@ export interface IAction extends Omit, P itemKey?: string; /** Content to display in the actions menu item */ title?: string | React.ReactNode; - /** Tooltip to display when hovered over the item */ - tooltip?: React.ReactNode; - /** Additional props forwarded to the tooltip component */ - tooltipProps?: any; + /** Render item as aria-disabled option */ + isAriaDisabled?: boolean; + /** Props for adding a tooltip to a menu item. This is used to display tooltip when hovered over the item */ + tooltipProps?: MenuItemTooltipPropsObject; /** Click handler for the actions menu item */ onClick?: (event: React.MouseEvent, rowIndex: number, rowData: IRowData, extraData: IExtraData) => void; /** Flag indicating this action should be placed outside the actions menu, beside the toggle */ From 1c519f7c20d595ebd15a96d9c81ce957c0c198ba Mon Sep 17 00:00:00 2001 From: Titani Date: Thu, 20 Jul 2023 10:19:04 -0400 Subject: [PATCH 08/10] fix table actions tooltip logic --- packages/react-core/src/components/Menu/MenuItem.tsx | 2 +- packages/react-table/src/components/Table/ActionsColumn.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-core/src/components/Menu/MenuItem.tsx b/packages/react-core/src/components/Menu/MenuItem.tsx index c5ce4528d00..f7cc5a63e5a 100644 --- a/packages/react-core/src/components/Menu/MenuItem.tsx +++ b/packages/react-core/src/components/Menu/MenuItem.tsx @@ -18,7 +18,7 @@ import { GenerateId } from '../../helpers/GenerateId/GenerateId'; export interface MenuItemTooltipPropsObject { /** Tooltip to display when hovered over the item */ - tooltip?: React.ReactNode; + tooltip: React.ReactNode; /** Additional tooltip props forwarded to the tooltip component */ tooltipProps?: Partial; } diff --git a/packages/react-table/src/components/Table/ActionsColumn.tsx b/packages/react-table/src/components/Table/ActionsColumn.tsx index c2004b7f2e9..d642cc1572f 100644 --- a/packages/react-table/src/components/Table/ActionsColumn.tsx +++ b/packages/react-table/src/components/Table/ActionsColumn.tsx @@ -114,7 +114,7 @@ const ActionsColumnBase: React.FunctionComponent = ({ {items .filter((item) => !item.isOutsideDropdown) - .map(({ title, itemKey, onClick, tooltip, tooltipProps, isSeparator, ...props }, index) => { + .map(({ title, itemKey, onClick, tooltipProps, isSeparator, ...props }, index) => { if (isSeparator) { return ; } @@ -133,9 +133,9 @@ const ActionsColumnBase: React.FunctionComponent = ({ ); - if (tooltip) { + if (tooltipProps.tooltip) { return ( - + {item} ); From 6a289f32b79072a341ec92b731821bebf48c6a37 Mon Sep 17 00:00:00 2001 From: Titani Date: Thu, 20 Jul 2023 10:51:19 -0400 Subject: [PATCH 09/10] fixed failing test and docs build --- packages/react-table/src/components/Table/ActionsColumn.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-table/src/components/Table/ActionsColumn.tsx b/packages/react-table/src/components/Table/ActionsColumn.tsx index d642cc1572f..d5e724520a9 100644 --- a/packages/react-table/src/components/Table/ActionsColumn.tsx +++ b/packages/react-table/src/components/Table/ActionsColumn.tsx @@ -133,7 +133,7 @@ const ActionsColumnBase: React.FunctionComponent = ({ ); - if (tooltipProps.tooltip) { + if (tooltipProps?.tooltip) { return ( {item} From 2b47b94bf1b423844255396916cc1504d49ccf9c Mon Sep 17 00:00:00 2001 From: Titani Date: Thu, 20 Jul 2023 11:58:14 -0400 Subject: [PATCH 10/10] Updates from review comments --- .../src/components/Dropdown/DropdownItem.tsx | 5 +++-- .../src/components/Dropdown/examples/Dropdown.md | 2 +- .../components/Dropdown/examples/DropdownBasic.tsx | 2 +- packages/react-core/src/components/Menu/MenuItem.tsx | 11 ++--------- .../react-core/src/components/Menu/examples/Menu.md | 2 +- .../src/components/Menu/examples/MenuBasic.tsx | 6 +++--- .../src/components/Table/ActionsColumn.tsx | 4 ++-- .../react-table/src/components/Table/TableTypes.tsx | 4 ++-- .../src/components/Table/examples/Table.md | 1 - 9 files changed, 15 insertions(+), 22 deletions(-) diff --git a/packages/react-core/src/components/Dropdown/DropdownItem.tsx b/packages/react-core/src/components/Dropdown/DropdownItem.tsx index d5aca98a4df..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, MenuItemTooltipPropsObject } from '../Menu'; +import { MenuItemProps, MenuItem } from '../Menu'; +import { TooltipProps } from '../Tooltip'; import { useOUIAProps, OUIAProps } from '../../helpers'; /** @@ -28,7 +29,7 @@ export interface DropdownItemProps extends Omit, OUIAProps /** 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?: MenuItemTooltipPropsObject; + tooltipProps?: TooltipProps; } const DropdownItemBase: React.FunctionComponent = ({ diff --git a/packages/react-core/src/components/Dropdown/examples/Dropdown.md b/packages/react-core/src/components/Dropdown/examples/Dropdown.md index 02313e7ab4f..f7efe1bff52 100644 --- a/packages/react-core/src/components/Dropdown/examples/Dropdown.md +++ b/packages/react-core/src/components/Dropdown/examples/Dropdown.md @@ -12,7 +12,7 @@ propComponents: 'MenuToggle', 'DropdownToggleProps', 'DropdownPopperProps', - 'MenuItemTooltipPropsObject' + 'TooltipProps' ] --- diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx index 0d33f841da7..e4a7f9dcc78 100644 --- a/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx +++ b/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx @@ -46,7 +46,7 @@ export const DropdownBasic: React.FunctionComponent = () => { Disabled Link - + Aria-disabled Link diff --git a/packages/react-core/src/components/Menu/MenuItem.tsx b/packages/react-core/src/components/Menu/MenuItem.tsx index f7cc5a63e5a..6791897b237 100644 --- a/packages/react-core/src/components/Menu/MenuItem.tsx +++ b/packages/react-core/src/components/Menu/MenuItem.tsx @@ -16,13 +16,6 @@ import { canUseDOM } from '../../helpers/util'; import { useIsomorphicLayoutEffect } from '../../helpers/useIsomorphicLayout'; import { GenerateId } from '../../helpers/GenerateId/GenerateId'; -export interface MenuItemTooltipPropsObject { - /** Tooltip to display when hovered over the item */ - tooltip: React.ReactNode; - /** Additional tooltip props forwarded to the tooltip component */ - tooltipProps?: Partial; -} - export interface MenuItemProps extends Omit, 'onClick'> { /** Content rendered inside the menu list item. */ children?: React.ReactNode; @@ -51,7 +44,7 @@ export interface MenuItemProps extends Omit, 'onC /** Render item as aria-disabled option */ isAriaDisabled?: boolean; /** Props for adding a tooltip to a menu item */ - tooltipProps?: MenuItemTooltipPropsObject; + tooltipProps?: TooltipProps; /** Render item with icon */ icon?: React.ReactNode; /** Render item with one or more actions */ @@ -436,7 +429,7 @@ const MenuItemBase: React.FunctionComponent = ({ {...props} > {tooltipProps ? ( - + {renderItem} ) : ( diff --git a/packages/react-core/src/components/Menu/examples/Menu.md b/packages/react-core/src/components/Menu/examples/Menu.md index 6686c94253d..57c1b9486a5 100644 --- a/packages/react-core/src/components/Menu/examples/Menu.md +++ b/packages/react-core/src/components/Menu/examples/Menu.md @@ -15,7 +15,7 @@ propComponents: 'MenuGroup', 'MenuContainer', 'MenuPopperProps', - 'MenuItemTooltipPropsObject' + '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 300a630de45..b615617f658 100644 --- a/packages/react-core/src/components/Menu/examples/MenuBasic.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuBasic.tsx @@ -33,10 +33,10 @@ export const MenuBasic: React.FunctionComponent = () => { Disabled link - - Aria-disabled link + + Aria-disabled action - + Aria-disabled link diff --git a/packages/react-table/src/components/Table/ActionsColumn.tsx b/packages/react-table/src/components/Table/ActionsColumn.tsx index d5e724520a9..bf67032d406 100644 --- a/packages/react-table/src/components/Table/ActionsColumn.tsx +++ b/packages/react-table/src/components/Table/ActionsColumn.tsx @@ -133,9 +133,9 @@ const ActionsColumnBase: React.FunctionComponent = ({ ); - if (tooltipProps?.tooltip) { + if (tooltipProps?.content) { return ( - + {item} ); diff --git a/packages/react-table/src/components/Table/TableTypes.tsx b/packages/react-table/src/components/Table/TableTypes.tsx index 554b27cf302..0a03be2b382 100644 --- a/packages/react-table/src/components/Table/TableTypes.tsx +++ b/packages/react-table/src/components/Table/TableTypes.tsx @@ -2,10 +2,10 @@ import { formatterValueType, ColumnType, RowType, RowKeyType, HeaderType } from import { SortByDirection } from './SortColumn'; import { DropdownItemProps } from '@patternfly/react-core/dist/esm/components/Dropdown'; import { DropdownDirection, DropdownPosition } from '@patternfly/react-core/dist/esm/deprecated/components/Dropdown'; -import { MenuItemTooltipPropsObject } from '@patternfly/react-core/dist/esm/components/Menu'; import * as React from 'react'; import { CustomActionsToggleProps } from './ActionsColumn'; import { ButtonProps } from '@patternfly/react-core/dist/esm/components/Button'; +import { TooltipProps } from '@patternfly/react-core/dist/esm/components/Tooltip'; export enum TableGridBreakpoint { none = '', @@ -158,7 +158,7 @@ export interface IAction extends Omit, P /** Render item as aria-disabled option */ isAriaDisabled?: boolean; /** Props for adding a tooltip to a menu item. This is used to display tooltip when hovered over the item */ - tooltipProps?: MenuItemTooltipPropsObject; + tooltipProps?: TooltipProps; /** Click handler for the actions menu item */ onClick?: (event: React.MouseEvent, rowIndex: number, rowData: IRowData, extraData: IExtraData) => void; /** Flag indicating this action should be placed outside the actions menu, beside the toggle */ diff --git a/packages/react-table/src/components/Table/examples/Table.md b/packages/react-table/src/components/Table/examples/Table.md index 745d166b786..4cb3c7875d5 100644 --- a/packages/react-table/src/components/Table/examples/Table.md +++ b/packages/react-table/src/components/Table/examples/Table.md @@ -17,7 +17,6 @@ propComponents: 'ThSelectType', 'TdTreeRowType', 'ActionsColumn', - 'IActions', 'TdCompoundExpandType', 'TdFavoritesType', 'TdDraggableType',