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