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/Card/__tests__/CardSelectableActions.test.tsx b/packages/react-core/src/components/Card/__tests__/CardSelectableActions.test.tsx new file mode 100644 index 00000000000..f07d0e95c3e --- /dev/null +++ b/packages/react-core/src/components/Card/__tests__/CardSelectableActions.test.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { CardSelectableActions } from '../CardSelectableActions'; + +test('Matches the snapshot', () => { + const { asFragment } = render(Test); + expect(asFragment()).toMatchSnapshot(); +}); + +test('Renders without children', () => { + render(); + + expect(screen.getByTestId('card-selectable-actions')).toBeVisible(); +}); + +test('Renders children', () => { + render(Test); + + expect(screen.getByText('Test')).toBeVisible(); +}); + +test('Renders with class name pf-v5-c-card__selectable-actions', () => { + render(Test); + + expect(screen.getByText('Test')).toHaveClass('pf-v5-c-card__selectable-actions'); +}); + +test('Renders with custom class names provided via prop', () => { + render(Test); + + expect(screen.getByText('Test')).toHaveClass('test-class'); +}); diff --git a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardSelectableActions.test.tsx.snap b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardSelectableActions.test.tsx.snap new file mode 100644 index 00000000000..d3c07ec4969 --- /dev/null +++ b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardSelectableActions.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Matches the snapshot 1`] = ` + +
+ Test +
+ +`; 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/__tests__/Dropdown.test.tsx b/packages/react-core/src/components/Dropdown/__tests__/Dropdown.test.tsx index 3c21de56481..c01022d93cb 100644 --- a/packages/react-core/src/components/Dropdown/__tests__/Dropdown.test.tsx +++ b/packages/react-core/src/components/Dropdown/__tests__/Dropdown.test.tsx @@ -22,7 +22,11 @@ test('renders dropdown', () => { }); test('passes children', () => { - render( toggle(toggleRef)}>{dropdownChildren}); + render( + toggle(toggleRef)}> + {dropdownChildren} + + ); expect(screen.getByText('Dropdown children')).toBeVisible(); }); @@ -112,7 +116,7 @@ test('passes zIndex to popper', () => { test('does not pass isOpen to popper by default', () => { render( toggle(toggleRef)}>{dropdownChildren}); - expect(screen.getByText('isOpen: undefined')).toBeVisible(); + expect(screen.getByText('isVisible: undefined')).toBeVisible(); }); test('passes isOpen to popper', () => { @@ -122,7 +126,7 @@ test('passes isOpen to popper', () => { ); - expect(screen.getByText('isOpen: true')).toBeVisible(); + expect(screen.getByText('isVisible: true')).toBeVisible(); }); /* no default tests for callback props @@ -134,7 +138,7 @@ test('passes onSelect callback', async () => { const onSelect = jest.fn(); render( - toggle(toggleRef)}> + toggle(toggleRef)}> {dropdownChildren} ); diff --git a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap index 902d054c70b..c2da5ee3693 100644 --- a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap +++ b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap @@ -2,40 +2,62 @@ exports[`match snapshot 1`] = ` -
+
-
+
- Dropdown children +
+ Dropdown children +
+
+ Mock item +
+

+ isPlain: true +

+

+ isScrollable: true +

+

+ minWidth: undefined +

-
- Mock item -

- isPlain: true + zIndex: 9999 +

+

+ isVisible: true +

+

+ enableFlip: undefined

- isScrollable: true + placement: undefined +

+

+ appendTo: undefined +

+

+ distance: undefined +

+

+ flipBehavior: undefined

minWidth: undefined

-
-

- zIndex: 9999 -

-

- isOpen: true -

-
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/ExpandableSection/ExpandableSection.tsx b/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx index 1607d0de06c..4eb9c2e333f 100644 --- a/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx +++ b/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx @@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles'; import lineClamp from '@patternfly/react-tokens/dist/esm/c_expandable_section_m_truncate__content_LineClamp'; import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; import { PickOptional } from '../../helpers/typeUtils'; -import { debounce } from '../../helpers/util'; +import { debounce, getUniqueId } from '../../helpers/util'; import { getResizeObserver } from '../../helpers/resizeObserver'; export enum ExpandableSectionVariant { @@ -23,6 +23,12 @@ export interface ExpandableSectionProps extends React.HTMLProps * property's value should match the contenId property of the expandable section toggle sub-component. */ contentId?: string; + /** Id of the toggle of the expandable section, which provides an accessible name to the + * expandable section content via the aria-labelledby attribute. When the isDetached property + * is also passed in, the value of this property must match the toggleId property of the + * expandable section toggle sub-component. + */ + toggleId?: string; /** Display size variant. Set to "lg" for disclosure styling. */ displaySize?: 'default' | 'lg'; /** Forces active state. */ @@ -102,7 +108,6 @@ export class ExpandableSection extends React.Component onToggle(event, !propOrStateIsExpanded)} > {variant !== ExpandableSectionVariant.truncate && ( @@ -250,7 +268,9 @@ export class ExpandableSection extends React.Component
diff --git a/packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx b/packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx index f9f94de0680..ebb416aca45 100644 --- a/packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx +++ b/packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx @@ -16,6 +16,10 @@ export interface ExpandableSectionToggleProps extends React.HTMLProps onToggle(!isExpanded)} + id={toggleId} > {!hasTruncatedContent && ( { const { asFragment } = render(test ); @@ -14,7 +14,12 @@ test('ExpandableSection', () => { }); test('Renders ExpandableSection expanded', () => { - const { asFragment } = render( test ); + const { asFragment } = render( + + {' '} + test{' '} + + ); expect(asFragment()).toMatchSnapshot(); }); @@ -29,17 +34,22 @@ test('ExpandableSection onToggle called', async () => { }); test('Renders Uncontrolled ExpandableSection', () => { - const { asFragment } = render( test ); + const { asFragment } = render( + + {' '} + test{' '} + + ); expect(asFragment()).toMatchSnapshot(); }); test('Detached ExpandableSection renders successfully', () => { const { asFragment } = render( - + test - + Toggle text @@ -58,7 +68,7 @@ test('Disclosure ExpandableSection', () => { test('Renders ExpandableSection indented', () => { const { asFragment } = render( - + {' '} test{' '} @@ -67,27 +77,56 @@ test('Renders ExpandableSection indented', () => { }); test('Does not render with pf-m-truncate class when variant is not passed', () => { - render(test); + render(test); expect(screen.getByText('test').parentElement).not.toHaveClass('pf-m-truncate'); }); test('Does not render with pf-m-truncate class when variant is not truncate', () => { + render(test); + + expect(screen.getByText('test').parentElement).not.toHaveClass('pf-m-truncate'); +}); + +test('Renders with pf-m-truncate class when variant is truncate', () => { + render(test); + + expect(screen.getByText('test').parentElement).toHaveClass('pf-m-truncate'); +}); + +test('Renders with value passed to contentId', () => { render( - - test + + Test ); - expect(screen.getByText('test').parentElement).not.toHaveClass('pf-m-truncate'); + const wrapper = screen.getByTestId('test-id'); + const content = wrapper.querySelector('#custom-id'); + expect(content).toBeInTheDocument(); }); -test('Renders with pf-m-truncate class when variant is truncate', () => { +test('Renders with value passed to toggleId', () => { render( - - test + + Test ); - expect(screen.getByText('test').parentElement).toHaveClass('pf-m-truncate'); + const wrapper = screen.getByTestId('test-id'); + const toggle = wrapper.querySelector('#custom-id'); + expect(toggle).toBeVisible(); +}); + +test('Renders with ARIA attributes when contentId and toggleId are passed', () => { + render( + + Test + + ); + + const wrapper = screen.getByTestId('test-id'); + + expect(wrapper).toContainHTML('aria-labelledby="toggle-id"'); + expect(wrapper).toContainHTML('aria-controls="content-id"'); }); diff --git a/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap b/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap index 7fbd3c8aab6..d87bc00aaa6 100644 --- a/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap +++ b/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap @@ -6,8 +6,10 @@ exports[`Detached ExpandableSection renders successfully 1`] = ` class="pf-v5-c-expandable-section pf-m-expanded pf-m-detached" >
test
@@ -16,9 +18,10 @@ exports[`Detached ExpandableSection renders successfully 1`] = ` class="pf-v5-c-expandable-section pf-m-expanded pf-m-detached" > @@ -95,7 +102,9 @@ exports[`ExpandableSection 1`] = ` class="pf-v5-c-expandable-section" > @@ -136,8 +147,10 @@ exports[`Renders ExpandableSection expanded 1`] = ` class="pf-v5-c-expandable-section pf-m-expanded" >
test
@@ -177,8 +192,10 @@ exports[`Renders ExpandableSection indented 1`] = ` class="pf-v5-c-expandable-section pf-m-expanded pf-m-indented" >
test
@@ -218,7 +237,9 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = ` class="pf-v5-c-expandable-section" > diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md index 03be97cc34e..f7f3a30f1d4 100644 --- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md +++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md @@ -12,31 +12,39 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle ### Basic ```ts file="ExpandableSectionBasic.tsx" + ``` ### Uncontrolled ```ts file="ExpandableSectionUncontrolled.tsx" + ``` ### Uncontrolled with dynamic toggle text ```ts file="ExpandableSectionUncontrolledDynamicToggleText.tsx" + ``` ### Detached +When passing the `isDetached` property into ``, you must also manually pass in the same `toggleId` and `contentId` properties to both `` and ``. This will link the content to the toggle via ARIA attributes. + ```ts file="ExpandableSectionDetached.tsx" + ``` ### Disclosure variation ```ts file="ExpandableSectionDisclosure.tsx" + ``` ### Indented ```ts file="ExpandableSectionIndented.tsx" + ``` ### With custom toggle content @@ -44,6 +52,7 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle By using the `toggleContent` prop, you can pass in content other than a simple string such as an icon or a badge. When passing in custom content in this way, you should not pass in any interactive element such as a button. ```ts file="ExpandableSectionCustomToggle.tsx" + ``` ### Truncate expansion @@ -51,4 +60,5 @@ By using the `toggleContent` prop, you can pass in content other than a simple s By passing in `variant="truncate"`, the expandable content will be visible up to a maximum number of lines before being truncated, with the toggle revealing or hiding the truncated content. By default the expandable content will truncate after 3 lines, and this can be customized by also passing in the `truncateMaxLines` prop. ```ts file="ExpandableSectionTruncateExpansion.tsx" isBeta + ``` diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx index 178d62ce82d..bcba03935c2 100644 --- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx +++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx @@ -8,16 +8,23 @@ export const ExpandableSectionDetached: React.FunctionComponent = () => { setIsExpanded(isExpanded); }; - const contentId = 'detached-toggle-content'; + const contentId = 'detached-expandable-section-content'; + const toggleId = 'detached-expandable-section-toggle'; return ( - + This content is visible only when the component is expanded. - + {isExpanded ? 'Show less' : 'Show more'} 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/MultipleFileUpload/MultipleFileUploadStatus.tsx b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx index eb832f83140..10ec7937fff 100644 --- a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx +++ b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/MultipleFileUpload/multiple-file-upload'; import { css } from '@patternfly/react-styles'; import { ExpandableSection } from '../ExpandableSection'; +import { GenerateId } from '../../helpers/GenerateId/GenerateId'; import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon'; @@ -65,11 +66,21 @@ export const MultipleFileUploadStatus: React.FunctionComponent - -
      - {children} -
    -     + + {(expandableSectionId) => ( + +
      + {children} +
    +     + )} +
    ); }; diff --git a/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap b/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap index b908d1a93b0..9a7b3827354 100644 --- a/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap +++ b/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap @@ -9,8 +9,10 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = ` class="pf-v5-c-expandable-section pf-m-expanded" >
            = ({ {buildSteps()}
          )} - {isInputVisible && inputPosition === 'aboveThumb' && ( -
          {displayInput()}
          - )} {hasTooltipOverThumb ? ( {thumbComponent} @@ -433,6 +430,9 @@ export const Slider: React.FunctionComponent = ({ ) : ( thumbComponent )} + {isInputVisible && inputPosition === 'aboveThumb' && ( +
          {displayInput()}
          + )}
        {isInputVisible && inputPosition === 'right' &&
        {displayInput()}
        } {rightActions &&
        {rightActions}
        } diff --git a/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap b/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap index c5ab99866f7..23fdc8e4ba3 100644 --- a/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap +++ b/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap @@ -492,6 +492,17 @@ exports[`slider renders slider with input above thumb 1`] = `
    +
    @@ -526,17 +537,6 @@ exports[`slider renders slider with input above thumb 1`] = `
    -
    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 +
    + Tooltip content with animationDuration
    } + > + + + ); } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/WizardDemo/WizardDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/WizardDemo/WizardDemo.tsx index 7211e39f757..cdd9374622b 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/WizardDemo/WizardDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/WizardDemo/WizardDemo.tsx @@ -161,8 +161,99 @@ export class WizardDemo extends React.Component,

    Step 1

    -
    -

    Step 2

    +
    + <> +

    + The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role + of "region", and an aria-label or aria-labelledby to be applied. +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. + Duis lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt + tempor, enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. + Nulla facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci + eu risus posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et + libero a auctor. +

    +

    + Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris + ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec + bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem, + commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non + egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in + odio nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus + dolor. +

    + + <> +

    + The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role + of "region", and an aria-label or aria-labelledby to be applied. +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. + Duis lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt + tempor, enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. + Nulla facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci + eu risus posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et + libero a auctor. +

    +

    + Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris + ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec + bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem, + commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non + egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in + odio nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus + dolor. +

    + + <> +

    + The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role + of "region", and an aria-label or aria-labelledby to be applied. +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. + Duis lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt + tempor, enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. + Nulla facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci + eu risus posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et + libero a auctor. +

    +

    + Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris + ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec + bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem, + commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non + egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in + odio nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus + dolor. +

    + + <> +

    + The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role + of "region", and an aria-label or aria-labelledby to be applied. +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. + Duis lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt + tempor, enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. + Nulla facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci + eu risus posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et + libero a auctor. +

    +

    + Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris + ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec + bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem, + commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non + egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in + odio nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus + dolor. +

    +
    diff --git a/packages/react-integration/demo-app-ts/src/components/demos/WizardDeprecatedDemo/WizardDeprecatedDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/WizardDeprecatedDemo/WizardDeprecatedDemo.tsx index a090bfca972..9852c1be882 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/WizardDeprecatedDemo/WizardDeprecatedDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/WizardDeprecatedDemo/WizardDeprecatedDemo.tsx @@ -75,8 +75,96 @@ export class WizardDeprecatedDemo extends React.Component -

    Step 2

    +
    + <> +

    + The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role of + "region", and an aria-label or aria-labelledby to be applied. +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. Duis + lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor, + enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla + facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus + posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et libero a + auctor. +

    +

    + Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris + ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec + bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem, + commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non + egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in odio + nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus dolor. +

    + + <> +

    + The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role of + "region", and an aria-label or aria-labelledby to be applied. +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. Duis + lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor, + enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla + facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus + posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et libero a + auctor. +

    +

    + Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris + ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec + bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem, + commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non + egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in odio + nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus dolor. +

    + + <> +

    + The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role of + "region", and an aria-label or aria-labelledby to be applied. +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. Duis + lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor, + enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla + facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus + posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et libero a + auctor. +

    +

    + Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris + ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec + bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem, + commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non + egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in odio + nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus dolor. +

    + + <> +

    + The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role of + "region", and an aria-label or aria-labelledby to be applied. +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. Duis + lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor, + enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla + facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus + posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et libero a + auctor. +

    +

    + Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris + ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec + bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem, + commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non + egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in odio + nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus dolor. +

    + +
    ) @@ -122,7 +210,7 @@ export class WizardDeprecatedDemo extends React.Component = ({ {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?.content) { return ( - + {item} ); diff --git a/packages/react-table/src/components/Table/TableTypes.tsx b/packages/react-table/src/components/Table/TableTypes.tsx index 18cb66faebd..0a03be2b382 100644 --- a/packages/react-table/src/components/Table/TableTypes.tsx +++ b/packages/react-table/src/components/Table/TableTypes.tsx @@ -5,6 +5,7 @@ import { DropdownDirection, DropdownPosition } from '@patternfly/react-core/dist 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 = '', @@ -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?: 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', diff --git a/packages/react-tokens/CHANGELOG.md b/packages/react-tokens/CHANGELOG.md index 6d3d3330f8a..88ec52c133e 100644 --- a/packages/react-tokens/CHANGELOG.md +++ b/packages/react-tokens/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. +# 5.0.0-prerelease.9 (2023-07-20) + +**Note:** Version bump only for package @patternfly/react-tokens + # [5.0.0-prerelease.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-tokens@5.0.0-prerelease.7...@patternfly/react-tokens@5.0.0-prerelease.8) (2023-07-14) ### Reverts diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json index 249b5e44f54..858639f71f8 100644 --- a/packages/react-tokens/package.json +++ b/packages/react-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-tokens", - "version": "5.0.0-prerelease.8", + "version": "5.0.0-prerelease.9", "description": "This library provides access to the design tokens of PatternFly 4 from JavaScript", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -29,7 +29,7 @@ "clean": "rimraf dist" }, "devDependencies": { - "@patternfly/patternfly": "5.0.0-prerelease.13", + "@patternfly/patternfly": "5.0.0-prerelease.16", "css": "^2.2.3", "fs-extra": "^11.1.1", "glob": "^7.1.2", diff --git a/yarn.lock b/yarn.lock index 676eb683e25..39b9cc7bf7d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4002,10 +4002,10 @@ acorn-static-class-features "^1.0.0" astring "^1.7.5" -"@patternfly/documentation-framework@^5.0.11": - version "5.0.11" - resolved "https://registry.yarnpkg.com/@patternfly/documentation-framework/-/documentation-framework-5.0.11.tgz#2d02f97786eb55f234badbc0c80df633186678b5" - integrity sha512-la9o4ahsdqwFUoZ+O3yntLumRaJEwdVtLlHBhveMpmoQVc3OFfPUNtpYm0Bmr/jGbabIcFpTwsXUEzkCKB4t7A== +"@patternfly/documentation-framework@^5.0.13": + version "5.0.13" + resolved "https://registry.yarnpkg.com/@patternfly/documentation-framework/-/documentation-framework-5.0.13.tgz#cd7a21fa38b70ff799ef7ad0d8dec7797c01f473" + integrity sha512-o71JfAh6lfoe8yI0Ufzo6iChFyG0c/AV3O7kVVuoMsgnRYa6i6i7zlKXQU9sSOz/+xkl5V5qMNjCYDL/llU5Xw== dependencies: "@babel/core" "7.18.2" "@babel/plugin-proposal-class-properties" "7.17.12" @@ -4091,10 +4091,10 @@ puppeteer-cluster "^0.23.0" xmldoc "^1.1.2" -"@patternfly/patternfly@5.0.0-prerelease.13": - version "5.0.0-prerelease.13" - resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-5.0.0-prerelease.13.tgz#8283890f201f969ba3eed5954b0948e7d22ac61a" - integrity sha512-f8SzqDD1sfU+QTeGfWL1jjJ6qVa57o2sJEMGHed7xk5WKfXbKlOBESpGB0jPq3vSuG4JiwAfEg8yhw++KI+Ykg== +"@patternfly/patternfly@5.0.0-prerelease.16": + version "5.0.0-prerelease.16" + resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-5.0.0-prerelease.16.tgz#63064971002b9b9b2f161bd8c2907cab55bbbebc" + integrity sha512-h5vNqRD9UMJO7ABX7vA3YJNMcsJwA+YUOuiEwcvnokHjv0g6kYNlTvYqIRJDab9wKpscbGmRSYyDgHYZvGO6hg== "@phenomnomnominal/tsquery@4.1.1": version "4.1.1"