From 45dcee754f667144779bdc0ffa4cb0b75ad44508 Mon Sep 17 00:00:00 2001 From: Titani Date: Thu, 10 Nov 2022 14:45:00 -0500 Subject: [PATCH 01/21] feat(OverflowMenu): Use next dropdown --- .../OverflowMenu/OverflowMenuDropdownItem.tsx | 11 +- .../OverflowMenuDropdownItem.test.tsx.snap | 20 ++- .../OverflowMenu/examples/OverflowMenu.md | 169 +++++++++++------- .../OverflowMenuBreakpointOnContainer.tsx | 37 ++-- 4 files changed, 149 insertions(+), 88 deletions(-) diff --git a/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx b/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx index d44260b1b3d..40f02d0d7a9 100644 --- a/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx +++ b/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx @@ -1,28 +1,25 @@ import * as React from 'react'; -import { DropdownItem, DropdownItemProps } from '../Dropdown'; +import { DropdownItem, DropdownItemProps } from '../../next/components/Dropdown'; import { OverflowMenuContext } from './OverflowMenuContext'; -export interface OverflowMenuDropdownItemProps extends DropdownItemProps { +export interface OverflowMenuDropdownItemProps extends Omit { /** Indicates when a dropdown item shows and hides the corresponding list item */ isShared?: boolean; - /** Indicates the index of the list item */ - index?: number; } export const OverflowMenuDropdownItem: React.FunctionComponent = ({ children, isShared = false, - index, ...additionalProps }: OverflowMenuDropdownItemProps) => ( {value => (!isShared || value.isBelowBreakpoint) && ( - + {children} ) } ); -OverflowMenuDropdownItem.displayName = 'OverflowMenuDropdownItem'; +OverflowMenuDropdownItem.displayName = 'OverflowMenuItem'; 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 095afd9ab46..4fa128180ae 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 @@ -3,19 +3,27 @@ exports[`OverflowMenuDropdownItem should match snapshot 1`] = `
    • diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md index def06f678b9..f89bc81ff65 100644 --- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md +++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md @@ -16,6 +16,7 @@ propComponents: import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon'; import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon'; import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; ## Examples @@ -29,9 +30,11 @@ import { OverflowMenuContent, OverflowMenuGroup, OverflowMenuItem, - OverflowMenuDropdownItem + OverflowMenuDropdownItem, + MenuToggle } from '@patternfly/react-core'; -import { Dropdown, KebabToggle } from '@patternfly/react-core'; +import { Dropdown } from '@patternfly/react-core/next'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; class SimpleOverflowMenu extends React.Component { constructor(props) { @@ -41,7 +44,7 @@ class SimpleOverflowMenu extends React.Component { }; this.onToggle = (_event, isOpen) => { this.setState({ - isOpen + isOpen: !this.state.isOpen }); }; this.onSelect = event => { @@ -54,19 +57,19 @@ class SimpleOverflowMenu extends React.Component { render() { const { isOpen } = this.state; const dropdownItems = [ - + Item 1 , - + Item 2 , - + Item 3 , - + Item 4 , - + Item 5 ]; @@ -84,13 +87,21 @@ class SimpleOverflowMenu extends React.Component { } + toggle={toggleRef => ( + + + + )} isOpen={isOpen} - isPlain - dropdownItems={dropdownItems} - isFlipEnabled - menuAppendTo="parent" - /> + > + {dropdownItems} + ); @@ -108,9 +119,13 @@ import { OverflowMenuContent, OverflowMenuGroup, OverflowMenuItem, - OverflowMenuDropdownItem + OverflowMenuDropdownItem, + MenuToggle, + Button, + ButtonVariant } from '@patternfly/react-core'; -import { Dropdown, KebabToggle, Button, ButtonVariant } from '@patternfly/react-core'; +import { Dropdown } from '@patternfly/react-core/next'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon'; import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon'; import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon'; @@ -123,7 +138,7 @@ class OverflowMenuGroupTypes extends React.Component { }; this.onToggle = (_event, isOpen) => { this.setState({ - isOpen + isOpen: !this.state.isOpen }); }; this.onSelect = event => { @@ -136,31 +151,31 @@ class OverflowMenuGroupTypes extends React.Component { render() { const { isOpen } = this.state; const dropdownItems = [ - + Item 1 , - + Item 2 , - + Item 3 , - + Primary , - + Secondary , - + Tertiary , - + Action 1 , - + Action 2 , - + Action 3 ]; @@ -204,13 +219,21 @@ class OverflowMenuGroupTypes extends React.Component { } + toggle={toggleRef => ( + + + + )} isOpen={isOpen} - isPlain - dropdownItems={dropdownItems} - isFlipEnabled - menuAppendTo="parent" - /> + > + {dropdownItems} + ); @@ -228,9 +251,13 @@ import { OverflowMenuContent, OverflowMenuGroup, OverflowMenuItem, - OverflowMenuDropdownItem + OverflowMenuDropdownItem, + MenuToggle, + Button, + ButtonVariant } from '@patternfly/react-core'; -import { Dropdown, KebabToggle, Button, ButtonVariant } from '@patternfly/react-core'; +import { Dropdown } from '@patternfly/react-core/next'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon'; import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon'; import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon'; @@ -243,7 +270,7 @@ class OverflowMenuAdditionalOptions extends React.Component { }; this.onToggle = (_event, isOpen) => { this.setState({ - isOpen + isOpen: !this.state.isOpen }); }; this.onSelect = event => { @@ -256,25 +283,25 @@ class OverflowMenuAdditionalOptions extends React.Component { render() { const { isOpen } = this.state; const dropdownItems = [ - + Primary , - + Secondary , - + Tertiary , - + Action 4 , - + Action 5 , - + Action 6 , - Action 7 + Action 7 ]; return ( @@ -311,13 +338,21 @@ class OverflowMenuAdditionalOptions extends React.Component { } + toggle={toggleRef => ( + + + + )} isOpen={isOpen} - isPlain - dropdownItems={dropdownItems} - isFlipEnabled - menuAppendTo="parent" - /> + > + {dropdownItems} + ); @@ -335,9 +370,13 @@ import { OverflowMenuContent, OverflowMenuGroup, OverflowMenuItem, - OverflowMenuDropdownItem + OverflowMenuDropdownItem, + MenuToggle, + Button, + ButtonVariant } from '@patternfly/react-core'; -import { Dropdown, KebabToggle, Button, ButtonVariant } from '@patternfly/react-core'; +import { Dropdown } from '@patternfly/react-core/next'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; class OverflowMenuPersist extends React.Component { constructor(props) { @@ -347,10 +386,10 @@ class OverflowMenuPersist extends React.Component { }; this.onToggle = (_event, isOpen) => { this.setState({ - isOpen + isOpen: !this.state.isOpen }); }; - this.onSelect = event => { + this.onSelect = (event, itemId) => { this.setState({ isOpen: !this.state.isOpen }); @@ -360,13 +399,13 @@ class OverflowMenuPersist extends React.Component { render() { const { isOpen } = this.state; const dropdownItems = [ - + Secondary , - + Tertiary , - Action 4 + Action 4 ]; return ( @@ -386,13 +425,21 @@ class OverflowMenuPersist extends React.Component { } + toggle={toggleRef => ( + + + + )} isOpen={isOpen} - isPlain - dropdownItems={dropdownItems} - isFlipEnabled - menuAppendTo="parent" - /> + > + {dropdownItems} + ); diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx index a8fd7513a14..6dffd008481 100644 --- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx +++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx @@ -6,17 +6,18 @@ import { OverflowMenuGroup, OverflowMenuItem, OverflowMenuDropdownItem, - Dropdown, - KebabToggle, + MenuToggle, Slider } from '@patternfly/react-core'; +import { Dropdown } from '@patternfly/react-core/next'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); const [containerWidth, setContainerWidth] = React.useState(100); const containerRef = React.useRef(null); - const onToggle = (_event: any, isOpen: boolean) => { + const onToggle = (_event: any) => { setIsOpen(isOpen); }; @@ -36,19 +37,19 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => }; const dropdownItems = [ - + Item 1 , - + Item 2 , - + Item 3 , - + Item 4 , - + Item 5 ]; @@ -85,13 +86,21 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => } + toggle={toggleRef => ( + + + + )} isOpen={isOpen} - isPlain - dropdownItems={dropdownItems} - isFlipEnabled - menuAppendTo="parent" - /> + > + {dropdownItems} + From f5b087b1276a9f1c7a8f7ce1eff9d16b9ba546cd Mon Sep 17 00:00:00 2001 From: Titani Date: Mon, 19 Dec 2022 13:29:42 -0500 Subject: [PATCH 02/21] updates aria-labels --- .../components/OverflowMenu/OverflowMenuDropdownItem.tsx | 2 +- .../src/components/OverflowMenu/examples/OverflowMenu.md | 8 ++++---- .../examples/OverflowMenuBreakpointOnContainer.tsx | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx b/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx index 40f02d0d7a9..d0c57b95f23 100644 --- a/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx +++ b/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx @@ -22,4 +22,4 @@ export const OverflowMenuDropdownItem: React.FunctionComponent ); -OverflowMenuDropdownItem.displayName = 'OverflowMenuItem'; +OverflowMenuDropdownItem.displayName = 'OverflowMenuDropdownItem'; diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md index f89bc81ff65..1ac9aa770fd 100644 --- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md +++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md @@ -90,7 +90,7 @@ class SimpleOverflowMenu extends React.Component { toggle={toggleRef => ( ( ( ( toggle={toggleRef => ( Date: Mon, 9 Jan 2023 10:21:18 -0500 Subject: [PATCH 03/21] add item id --- .../src/components/OverflowMenu/OverflowMenuDropdownItem.tsx | 5 ++++- .../__tests__/Generated/OverflowMenuDropdownItem.test.tsx | 5 +---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx b/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx index d0c57b95f23..b846afefcc9 100644 --- a/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx +++ b/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx @@ -5,17 +5,20 @@ import { OverflowMenuContext } from './OverflowMenuContext'; export interface OverflowMenuDropdownItemProps extends Omit { /** Indicates when a dropdown item shows and hides the corresponding list item */ isShared?: boolean; + /** Identifies the component in the dropdown onSelect callback */ + itemId?: string; } export const OverflowMenuDropdownItem: React.FunctionComponent = ({ children, isShared = false, + itemId, ...additionalProps }: OverflowMenuDropdownItemProps) => ( {value => (!isShared || value.isBelowBreakpoint) && ( - + {children} ) diff --git a/packages/react-core/src/components/OverflowMenu/__tests__/Generated/OverflowMenuDropdownItem.test.tsx b/packages/react-core/src/components/OverflowMenu/__tests__/Generated/OverflowMenuDropdownItem.test.tsx index 49799c8747d..e3ecf91b55a 100644 --- a/packages/react-core/src/components/OverflowMenu/__tests__/Generated/OverflowMenuDropdownItem.test.tsx +++ b/packages/react-core/src/components/OverflowMenu/__tests__/Generated/OverflowMenuDropdownItem.test.tsx @@ -3,14 +3,11 @@ import React from 'react'; import { render } from '@testing-library/react'; import { OverflowMenuDropdownItem } from '../../OverflowMenuDropdownItem'; -import { DropdownArrowContext } from '../../../Dropdown'; describe('OverflowMenuDropdownItem', () => { it('should match snapshot', () => { const { asFragment } = render( - - - + ); expect(asFragment()).toMatchSnapshot(); }); From 6dcefc978276deace2141ad8bb0619783593d5ff Mon Sep 17 00:00:00 2001 From: Titani Date: Mon, 9 Jan 2023 16:32:54 -0500 Subject: [PATCH 04/21] update type for itemId --- .../src/components/OverflowMenu/OverflowMenuDropdownItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx b/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx index b846afefcc9..28f857511df 100644 --- a/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx +++ b/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx @@ -6,7 +6,7 @@ export interface OverflowMenuDropdownItemProps extends Omit = ({ From 5f698b72bf16cad0cff53b400c730511d8856b18 Mon Sep 17 00:00:00 2001 From: Titani Date: Thu, 12 Jan 2023 16:26:28 -0500 Subject: [PATCH 05/21] add dropdownlist and update integration tests --- .../OverflowMenu/examples/OverflowMenu.md | 24 ++- .../OverflowMenuBreakpointOnContainer.tsx | 4 +- .../cypress/integration/overflowmenu.spec.ts | 20 ++- .../OverflowMenuDemo/OverflowMenuDemo.tsx | 164 +++++++++++------- 4 files changed, 133 insertions(+), 79 deletions(-) diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md index 1ac9aa770fd..4f9a53a32d5 100644 --- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md +++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md @@ -33,7 +33,7 @@ import { OverflowMenuDropdownItem, MenuToggle } from '@patternfly/react-core'; -import { Dropdown } from '@patternfly/react-core/next'; +import { Dropdown, DropdownList } from '@patternfly/react-core/next'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; class SimpleOverflowMenu extends React.Component { @@ -100,7 +100,9 @@ class SimpleOverflowMenu extends React.Component { )} isOpen={isOpen} > - {dropdownItems} + + {dropdownItems} + @@ -124,7 +126,7 @@ import { Button, ButtonVariant } from '@patternfly/react-core'; -import { Dropdown } from '@patternfly/react-core/next'; +import { Dropdown, DropdownList } from '@patternfly/react-core/next'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon'; import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon'; @@ -232,7 +234,9 @@ class OverflowMenuGroupTypes extends React.Component { )} isOpen={isOpen} > - {dropdownItems} + + {dropdownItems} + @@ -256,7 +260,7 @@ import { Button, ButtonVariant } from '@patternfly/react-core'; -import { Dropdown } from '@patternfly/react-core/next'; +import { Dropdown, DropdownList } from '@patternfly/react-core/next'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon'; import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon'; @@ -351,7 +355,9 @@ class OverflowMenuAdditionalOptions extends React.Component { )} isOpen={isOpen} > - {dropdownItems} + + {dropdownItems} + @@ -375,7 +381,7 @@ import { Button, ButtonVariant } from '@patternfly/react-core'; -import { Dropdown } from '@patternfly/react-core/next'; +import { Dropdown, DropdownList } from '@patternfly/react-core/next'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; class OverflowMenuPersist extends React.Component { @@ -438,7 +444,9 @@ class OverflowMenuPersist extends React.Component { )} isOpen={isOpen} > - {dropdownItems} + + {dropdownItems} + diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx index 2fa69b1a05a..e369a1462aa 100644 --- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx +++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx @@ -9,7 +9,7 @@ import { MenuToggle, Slider } from '@patternfly/react-core'; -import { Dropdown } from '@patternfly/react-core/next'; +import { Dropdown, DropdownList } from '@patternfly/react-core/next'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => { @@ -99,7 +99,7 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => )} isOpen={isOpen} > - {dropdownItems} + {dropdownItems} diff --git a/packages/react-integration/cypress/integration/overflowmenu.spec.ts b/packages/react-integration/cypress/integration/overflowmenu.spec.ts index 7e2e18bc784..35bb7fb4dea 100644 --- a/packages/react-integration/cypress/integration/overflowmenu.spec.ts +++ b/packages/react-integration/cypress/integration/overflowmenu.spec.ts @@ -26,14 +26,15 @@ describe('OverflowMenu Demo Test', () => { }); it('Verify toggle dropdown', () => { - cy.get('#simple-overflow-menu button').should('have.class', 'pf-c-dropdown__toggle'); + cy.get('#simple-overflow-menu button').should('have.class', 'pf-c-menu-toggle'); }); it('Verify dropdown menu expanded', () => { cy.get('#simple-overflow-menu button') .last() .click({ force: true }); - cy.get('#simple-overflow-menu .pf-c-dropdown').should('have.class', 'pf-m-expanded'); + cy.get('#simple-overflow-menu .pf-c-menu-toggle').should('have.class', 'pf-m-expanded'); + cy.get('#simple-overflow-menu .pf-c-menu').should('be.visible'); // close overflow menu again cy.get('#simple-overflow-menu button') .last() @@ -66,14 +67,15 @@ describe('OverflowMenu Demo Test', () => { }); it('Verify toggle dropdown', () => { - cy.get('#additional-options-overflow-menu button').should('have.class', 'pf-c-dropdown__toggle'); + cy.get('#additional-options-overflow-menu button').should('have.class', 'pf-c-menu-toggle'); }); it('Verify dropdown menu expanded', () => { cy.get('#additional-options-overflow-menu button') .last() .click({ force: true }); - cy.get('#additional-options-overflow-menu .pf-c-dropdown').should('have.class', 'pf-m-expanded'); + cy.get('#additional-options-overflow-menu .pf-c-menu-toggle').should('have.class', 'pf-m-expanded'); + cy.get('#additional-options-overflow-menu .pf-c-menu').should('be.visible'); }); }); }); @@ -105,14 +107,15 @@ describe('OverflowMenu Demo Test', () => { }); it('Verify toggle dropdown', () => { - cy.get('#persist-overflow-menu button').should('have.class', 'pf-c-dropdown__toggle'); + cy.get('#persist-overflow-menu button').should('have.class', 'pf-c-menu-toggle'); }); it('Verify dropdown menu expanded', () => { cy.get('#persist-overflow-menu button') .last() .click({ force: true }); - cy.get('#persist-overflow-menu .pf-c-dropdown').should('have.class', 'pf-m-expanded'); + cy.get('#persist-overflow-menu .pf-c-menu-toggle').should('have.class', 'pf-m-expanded'); + cy.get('#persist-overflow-menu .pf-c-menu').should('be.visible'); }); }); }); @@ -141,14 +144,15 @@ describe('OverflowMenu Demo Test', () => { }); it('Verify toggle dropdown', () => { - cy.get('#container-breakpoint-overflow-menu button').should('have.class', 'pf-c-dropdown__toggle'); + cy.get('#container-breakpoint-overflow-menu button').should('have.class', 'pf-c-menu-toggle'); }); it('Verify dropdown menu expanded', () => { cy.get('#container-breakpoint-overflow-menu button') .last() .click({ force: true }); - cy.get('#container-breakpoint-overflow-menu .pf-c-dropdown').should('have.class', 'pf-m-expanded'); + cy.get('#container-breakpoint-overflow-menu .pf-c-menu-toggle').should('have.class', 'pf-m-expanded'); + cy.get('#container-breakpoint-overflow-menu .pf-c-menu').should('be.visible'); // close overflow menu again cy.get('#container-breakpoint-overflow-menu button') .last() diff --git a/packages/react-integration/demo-app-ts/src/components/demos/OverflowMenuDemo/OverflowMenuDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/OverflowMenuDemo/OverflowMenuDemo.tsx index 114f26fd270..b78a22e7d88 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/OverflowMenuDemo/OverflowMenuDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/OverflowMenuDemo/OverflowMenuDemo.tsx @@ -6,13 +6,15 @@ import { OverflowMenuGroup, OverflowMenuItem, OverflowMenuDropdownItem, - Dropdown, - KebabToggle, + MenuToggle, Button } from '@patternfly/react-core'; +import { Dropdown, DropdownList } from '@patternfly/react-core/next'; import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon'; import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon'; import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; + export class OverflowMenuDemo extends React.Component { static displayName = 'OverflowMenuDemo'; state = { @@ -29,14 +31,14 @@ export class OverflowMenuDemo extends React.Component { marginBottom: '2rem' }; - onSimpleToggle = (_event: any, isSimpleOpen: boolean) => { + onSimpleToggle = (_event: any) => { this.setState({ - isSimpleOpen + isSimpleOpen: !this.state.isSimpleOpen }); }; // eslint-disable-next-line @typescript-eslint/no-unused-vars - onSimpleSelect = (_event?: React.SyntheticEvent) => { + onSimpleSelect = () => { this.setState({ isSimpleOpen: !this.state.isSimpleOpen }); @@ -45,20 +47,22 @@ export class OverflowMenuDemo extends React.Component { renderSimpleOverflowMenu() { const { isSimpleOpen } = this.state; const dropdownItems = [ - Action, - + + Action + , + Item 1 , - + Item 2 , - + Item 3 , - + Item 4 , - + Item 5 ]; @@ -76,26 +80,34 @@ export class OverflowMenuDemo extends React.Component { } + toggle={toggleRef => ( + + + + )} isOpen={isSimpleOpen} - isPlain - dropdownItems={dropdownItems} - isFlipEnabled - menuAppendTo="parent" - /> + > + {dropdownItems} + ); } - onAdditionalOptionsToggle = (_event: any, isAdditionalOptionsOpen: boolean) => { + onAdditionalOptionsToggle = (_event: any) => { this.setState({ - isAdditionalOptionsOpen + isAdditionalOptionsOpen: !this.state.isAdditionalOptionsOpen }); }; // eslint-disable-next-line @typescript-eslint/no-unused-vars - onAdditionalOptionsSelect = (_event?: React.SyntheticEvent) => { + onAdditionalOptionsSelect = () => { this.setState({ isAdditionalOptionsOpen: !this.state.isAdditionalOptionsOpen }); @@ -104,25 +116,27 @@ export class OverflowMenuDemo extends React.Component { renderOverflowMenuAdditionalOptions() { const { isAdditionalOptionsOpen } = this.state; const dropdownItems = [ - + Primary , - + Secondary , - + Tertiary , - + Action 4 , - + Action 5 , - + Action 6 , - Action 7 + + Action 7 + ]; return ( @@ -159,26 +173,34 @@ export class OverflowMenuDemo extends React.Component { } + toggle={toggleRef => ( + + + + )} isOpen={isAdditionalOptionsOpen} - isPlain - dropdownItems={dropdownItems} - isFlipEnabled - menuAppendTo="parent" - /> + > + {dropdownItems} + ); } - onPersistToggle = (_event: any, isPersistOpen: boolean) => { + onPersistToggle = () => { this.setState({ - isPersistOpen + isPersistOpen: !this.state.isPersistOpen }); }; // eslint-disable-next-line @typescript-eslint/no-unused-vars - onPersistSelect = (_event?: React.SyntheticEvent) => { + onPersistSelect = () => { this.setState({ isPersistOpen: !this.state.isPersistOpen }); @@ -187,16 +209,18 @@ export class OverflowMenuDemo extends React.Component { renderOverflowMenuPersist() { const { isPersistOpen } = this.state; const dropdownItems = [ - + Primary , - + Secondary , - + Tertiary , - Action 4 + + Action 4 + ]; return ( @@ -216,26 +240,34 @@ export class OverflowMenuDemo extends React.Component { } + toggle={toggleRef => ( + + + + )} isOpen={isPersistOpen} - isPlain - dropdownItems={dropdownItems} - isFlipEnabled - menuAppendTo="parent" - /> + > + {dropdownItems} + ); } - onContainerBreakpointToggle = (_event: any, isContainerBreakpointOpen: boolean) => { + onContainerBreakpointToggle = () => { this.setState({ - isContainerBreakpointOpen + isContainerBreakpointOpen: !this.state.isContainerBreakpointOpen }); }; // eslint-disable-next-line @typescript-eslint/no-unused-vars - onContainerBreakpointSelect = (_event?: React.SyntheticEvent) => { + onContainerBreakpointSelect = () => { this.setState({ isContainerBreakpointOpen: !this.state.isContainerBreakpointOpen }); @@ -244,20 +276,22 @@ export class OverflowMenuDemo extends React.Component { renderContainerBreakpointOverflowMenu() { const { isContainerBreakpointOpen } = this.state; const dropdownItems = [ - Action, - + + Action + , + Item 1 , - + Item 2 , - + Item 3 , - + Item 4 , - + Item 5 ]; @@ -281,13 +315,21 @@ export class OverflowMenuDemo extends React.Component { } + toggle={toggleRef => ( + + + + )} isOpen={isContainerBreakpointOpen} - isPlain - dropdownItems={dropdownItems} - isFlipEnabled - menuAppendTo="parent" - /> + > + {dropdownItems} + From ef93a7fdab9ce5eeae14c53590e79a5bd05215e1 Mon Sep 17 00:00:00 2001 From: Titani Date: Fri, 13 Jan 2023 10:28:51 -0500 Subject: [PATCH 06/21] update example that use overflowmenu --- .../OverflowMenu/examples/OverflowMenu.md | 6 +-- .../OverflowMenuBreakpointOnContainer.tsx | 2 +- packages/react-core/src/demos/Card/Card.md | 43 ++++++++++++------- .../src/demos/examples/Tabs/TabsAndTable.tsx | 22 +++++++--- .../OverflowMenuDemo/OverflowMenuDemo.tsx | 2 +- 5 files changed, 49 insertions(+), 26 deletions(-) diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md index 4f9a53a32d5..0795817ff82 100644 --- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md +++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md @@ -33,7 +33,7 @@ import { OverflowMenuDropdownItem, MenuToggle } from '@patternfly/react-core'; -import { Dropdown, DropdownList } from '@patternfly/react-core/next'; +import { Dropdown, DropdownList } from '@patternfly/react-core/dist/esm/next/index'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; class SimpleOverflowMenu extends React.Component { @@ -126,7 +126,7 @@ import { Button, ButtonVariant } from '@patternfly/react-core'; -import { Dropdown, DropdownList } from '@patternfly/react-core/next'; +import { Dropdown, DropdownList } from '@patternfly/react-core/dist/esm/next/index'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon'; import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon'; @@ -381,7 +381,7 @@ import { Button, ButtonVariant } from '@patternfly/react-core'; -import { Dropdown, DropdownList } from '@patternfly/react-core/next'; +import { Dropdown, DropdownList } from '@patternfly/react-core/dist/esm/next/index'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; class OverflowMenuPersist extends React.Component { diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx index e369a1462aa..7852320e473 100644 --- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx +++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx @@ -9,7 +9,7 @@ import { MenuToggle, Slider } from '@patternfly/react-core'; -import { Dropdown, DropdownList } from '@patternfly/react-core/next'; +import { Dropdown, DropdownList } from '@patternfly/react-core/dist/esm/next/index'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => { diff --git a/packages/react-core/src/demos/Card/Card.md b/packages/react-core/src/demos/Card/Card.md index 41a0bda9036..a9b5ae9ee18 100644 --- a/packages/react-core/src/demos/Card/Card.md +++ b/packages/react-core/src/demos/Card/Card.md @@ -49,6 +49,7 @@ import { EmptyStateActions, Gallery, KebabToggle, + MenuToggle, OverflowMenu, OverflowMenuControl, OverflowMenuDropdownItem, @@ -67,6 +68,8 @@ import { ToolbarFilter, ToolbarContent } from '@patternfly/react-core'; +import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/dist/esm/next/index'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; @@ -120,9 +123,9 @@ class CardViewBasic extends React.Component { })); }; - this.onToolbarKebabDropdownToggle = (_event, isLowerToolbarKebabDropdownOpen) => { + this.onToolbarKebabDropdownToggle = () => { this.setState({ - isLowerToolbarKebabDropdownOpen + isOpen: !this.state.isLowerToolbarKebabDropdownOpen }); }; @@ -495,19 +498,19 @@ class CardViewBasic extends React.Component { } = this.state; const toolbarKebabDropdownItems = [ - Link, - + Link, + Action , - + Disabled Link , - + Disabled Action , - , - Separated Link, - + , + Separated Link, + Separated Action ]; @@ -522,15 +525,23 @@ class CardViewBasic extends React.Component { - } + toggle={toggleRef => ( + + + + )} isOpen={isLowerToolbarKebabDropdownOpen} - isPlain - dropdownItems={toolbarKebabDropdownItems} - isFlipEnabled - menuAppendTo="parent" - /> + > + {toolbarKebabDropdownItems} + diff --git a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx index fc856f274f0..b76e34ccf9c 100644 --- a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx +++ b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx @@ -11,12 +11,12 @@ import { DrawerActions, DrawerCloseButton, DrawerPanelBody, - Dropdown, Flex, FlexItem, KebabToggle, Label, LabelGroup, + MenuToggle, OptionsMenu, OptionsMenuToggle, OverflowMenu, @@ -52,6 +52,8 @@ import { ActionsColumn, CustomActionsToggleProps } from '@patternfly/react-table'; +import { Dropdown, DropdownList } from '@patternfly/react-core/dist/esm/next/index'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; @@ -188,11 +190,21 @@ export const TablesAndTabs = () => { {}} - toggle={ {}} />} + toggle={toggleRef => ( + {}} + isExpanded={false} + > + + + )} isOpen={false} - isPlain - dropdownItems={[]} - /> + > + {[]} + diff --git a/packages/react-integration/demo-app-ts/src/components/demos/OverflowMenuDemo/OverflowMenuDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/OverflowMenuDemo/OverflowMenuDemo.tsx index b78a22e7d88..b48f317a184 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/OverflowMenuDemo/OverflowMenuDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/OverflowMenuDemo/OverflowMenuDemo.tsx @@ -9,7 +9,7 @@ import { MenuToggle, Button } from '@patternfly/react-core'; -import { Dropdown, DropdownList } from '@patternfly/react-core/next'; +import { Dropdown, DropdownList } from '@patternfly/react-core/dist/esm/next/index'; import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon'; import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon'; import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon'; From 8e46f28a920295cc3cee76e7b93aee42dff1a83c Mon Sep 17 00:00:00 2001 From: Titani Date: Wed, 1 Feb 2023 17:50:51 -0500 Subject: [PATCH 07/21] update import --- .../src/components/OverflowMenu/examples/OverflowMenu.md | 7 ++++--- .../examples/OverflowMenuBreakpointOnContainer.tsx | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md index 0795817ff82..01e0d629ec7 100644 --- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md +++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md @@ -17,6 +17,7 @@ import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-ico import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon'; import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import { Dropdown, DropdownList } from '@patternfly/react-core/next'; ## Examples @@ -33,7 +34,7 @@ import { OverflowMenuDropdownItem, MenuToggle } from '@patternfly/react-core'; -import { Dropdown, DropdownList } from '@patternfly/react-core/dist/esm/next/index'; +import { Dropdown, DropdownList } from '@patternfly/react-core/next'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; class SimpleOverflowMenu extends React.Component { @@ -126,7 +127,7 @@ import { Button, ButtonVariant } from '@patternfly/react-core'; -import { Dropdown, DropdownList } from '@patternfly/react-core/dist/esm/next/index'; +import { Dropdown, DropdownList } from '@patternfly/react-core/next'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon'; import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon'; @@ -381,7 +382,7 @@ import { Button, ButtonVariant } from '@patternfly/react-core'; -import { Dropdown, DropdownList } from '@patternfly/react-core/dist/esm/next/index'; +import { Dropdown, DropdownList } from '@patternfly/react-core/next'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; class OverflowMenuPersist extends React.Component { diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx index 7852320e473..e369a1462aa 100644 --- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx +++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx @@ -9,7 +9,7 @@ import { MenuToggle, Slider } from '@patternfly/react-core'; -import { Dropdown, DropdownList } from '@patternfly/react-core/dist/esm/next/index'; +import { Dropdown, DropdownList } from '@patternfly/react-core/next'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => { From 73f7bfea4992b9ec20b4687fb80264d2e99db7b2 Mon Sep 17 00:00:00 2001 From: Titani Date: Wed, 1 Feb 2023 18:12:57 -0500 Subject: [PATCH 08/21] fix example imports --- .../OverflowMenu/examples/OverflowMenu.md | 26 +++++++++---------- .../components/Toolbar/examples/Toolbar.md | 2 ++ 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md index 01e0d629ec7..550509e6200 100644 --- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md +++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md @@ -17,7 +17,7 @@ import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-ico import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon'; import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; -import { Dropdown, DropdownList } from '@patternfly/react-core/next'; +import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next'; ## Examples @@ -34,7 +34,7 @@ import { OverflowMenuDropdownItem, MenuToggle } from '@patternfly/react-core'; -import { Dropdown, DropdownList } from '@patternfly/react-core/next'; +import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; class SimpleOverflowMenu extends React.Component { @@ -86,7 +86,7 @@ class SimpleOverflowMenu extends React.Component { - ( {dropdownItems} - + ); @@ -127,7 +127,7 @@ import { Button, ButtonVariant } from '@patternfly/react-core'; -import { Dropdown, DropdownList } from '@patternfly/react-core/next'; +import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon'; import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon'; @@ -220,7 +220,7 @@ class OverflowMenuGroupTypes extends React.Component { - ( {dropdownItems} - + ); @@ -261,7 +261,7 @@ import { Button, ButtonVariant } from '@patternfly/react-core'; -import { Dropdown, DropdownList } from '@patternfly/react-core/next'; +import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon'; import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon'; @@ -341,7 +341,7 @@ class OverflowMenuAdditionalOptions extends React.Component { - ( {dropdownItems} - + ); @@ -382,7 +382,7 @@ import { Button, ButtonVariant } from '@patternfly/react-core'; -import { Dropdown, DropdownList } from '@patternfly/react-core/next'; +import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; class OverflowMenuPersist extends React.Component { @@ -430,7 +430,7 @@ class OverflowMenuPersist extends React.Component { - ( {dropdownItems} - + ); diff --git a/packages/react-core/src/components/Toolbar/examples/Toolbar.md b/packages/react-core/src/components/Toolbar/examples/Toolbar.md index 491f1e3503c..0aca895f11f 100644 --- a/packages/react-core/src/components/Toolbar/examples/Toolbar.md +++ b/packages/react-core/src/components/Toolbar/examples/Toolbar.md @@ -10,6 +10,8 @@ import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon'; import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon'; import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next'; ## Examples From 889ff0667a39b0d2172639fcaac19fcf715ceec8 Mon Sep 17 00:00:00 2001 From: Titani Date: Fri, 10 Feb 2023 16:22:02 -0500 Subject: [PATCH 09/21] remove alias --- .../OverflowMenu/examples/OverflowMenu.md | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md index 550509e6200..01e0d629ec7 100644 --- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md +++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md @@ -17,7 +17,7 @@ import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-ico import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon'; import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; -import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next'; +import { Dropdown, DropdownList } from '@patternfly/react-core/next'; ## Examples @@ -34,7 +34,7 @@ import { OverflowMenuDropdownItem, MenuToggle } from '@patternfly/react-core'; -import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next'; +import { Dropdown, DropdownList } from '@patternfly/react-core/next'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; class SimpleOverflowMenu extends React.Component { @@ -86,7 +86,7 @@ class SimpleOverflowMenu extends React.Component { - ( {dropdownItems} - + ); @@ -127,7 +127,7 @@ import { Button, ButtonVariant } from '@patternfly/react-core'; -import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next'; +import { Dropdown, DropdownList } from '@patternfly/react-core/next'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon'; import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon'; @@ -220,7 +220,7 @@ class OverflowMenuGroupTypes extends React.Component { - ( {dropdownItems} - + ); @@ -261,7 +261,7 @@ import { Button, ButtonVariant } from '@patternfly/react-core'; -import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next'; +import { Dropdown, DropdownList } from '@patternfly/react-core/next'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon'; import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon'; @@ -341,7 +341,7 @@ class OverflowMenuAdditionalOptions extends React.Component { - ( {dropdownItems} - + ); @@ -382,7 +382,7 @@ import { Button, ButtonVariant } from '@patternfly/react-core'; -import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next'; +import { Dropdown, DropdownList } from '@patternfly/react-core/next'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; class OverflowMenuPersist extends React.Component { @@ -430,7 +430,7 @@ class OverflowMenuPersist extends React.Component { - ( {dropdownItems} - + ); From c31de210a98fb0aaeca2ab1317dda36cb2385e61 Mon Sep 17 00:00:00 2001 From: Titani Date: Fri, 10 Feb 2023 16:53:52 -0500 Subject: [PATCH 10/21] fix rebase --- .../OverflowMenu/examples/OverflowMenu.md | 8 ++--- .../OverflowMenuBreakpointOnContainer.tsx | 4 +-- .../Toolbar/examples/ToolbarStacked.tsx | 30 ++++++++++++------- 3 files changed, 26 insertions(+), 16 deletions(-) diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md index 01e0d629ec7..36c8c144c2c 100644 --- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md +++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md @@ -43,7 +43,7 @@ class SimpleOverflowMenu extends React.Component { this.state = { isOpen: false }; - this.onToggle = (_event, isOpen) => { + this.onToggle = () => { this.setState({ isOpen: !this.state.isOpen }); @@ -139,7 +139,7 @@ class OverflowMenuGroupTypes extends React.Component { this.state = { isOpen: false }; - this.onToggle = (_event, isOpen) => { + this.onToggle = () => { this.setState({ isOpen: !this.state.isOpen }); @@ -273,7 +273,7 @@ class OverflowMenuAdditionalOptions extends React.Component { this.state = { isOpen: false }; - this.onToggle = (_event, isOpen) => { + this.onToggle = () => { this.setState({ isOpen: !this.state.isOpen }); @@ -391,7 +391,7 @@ class OverflowMenuPersist extends React.Component { this.state = { isOpen: false }; - this.onToggle = (_event, isOpen) => { + this.onToggle = () => { this.setState({ isOpen: !this.state.isOpen }); diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx index e369a1462aa..148fc95e561 100644 --- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx +++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx @@ -17,8 +17,8 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => const [containerWidth, setContainerWidth] = React.useState(100); const containerRef = React.useRef(null); - const onToggle = (_event: any) => { - setIsOpen(isOpen); + const onToggle = () => { + setIsOpen(!isOpen); }; const onSelect = () => { diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx index ef19b4b1ea7..a65bc8f21e5 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { Button, ButtonVariant, - KebabToggle, Select, SelectOption, SelectOptionObject, @@ -13,8 +12,8 @@ import { DropdownToggle, DropdownToggleCheckbox, DropdownItem, - DropdownPosition, Divider, + MenuToggle, OverflowMenu, OverflowMenuContent, OverflowMenuControl, @@ -25,7 +24,9 @@ import { ToolbarToggleGroup, ToolbarItem } from '@patternfly/react-core'; +import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/dist/esm/next/index'; import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const ToolbarStacked: React.FunctionComponent = () => { // toggle group - three option menus with labels, two icon buttons, Kebab menu - right aligned @@ -192,14 +193,23 @@ export const ToolbarStacked: React.FunctionComponent = () => { - } - isOpen={kebabIsOpen} - isPlain - dropdownItems={dropdownItems} - position={DropdownPosition.right} - /> + ( + + + + )} + isOpen={kebabIsOpen} + > + {dropdownItems} + From 7b7d7cf5c490ac0b071f28420b3697614369077c Mon Sep 17 00:00:00 2001 From: Titani Date: Mon, 13 Feb 2023 11:13:24 -0500 Subject: [PATCH 11/21] fix conflicts --- .../src/components/Toolbar/examples/ToolbarStacked.tsx | 8 ++++---- .../components/Toolbar/examples/ToolbarWithFilters.tsx | 4 ++-- packages/react-core/src/demos/Card/Card.md | 2 +- .../react-core/src/demos/examples/Tabs/TabsAndTable.tsx | 2 +- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx index a65bc8f21e5..8c395cb9f5f 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx @@ -24,7 +24,7 @@ import { ToolbarToggleGroup, ToolbarItem } from '@patternfly/react-core'; -import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/dist/esm/next/index'; +import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next'; import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; @@ -53,8 +53,8 @@ export const ToolbarStacked: React.FunctionComponent = () => { const [page, setPage] = React.useState(1); const [perPage, setPerPage] = React.useState(20); - const onKebabToggle = (_event: any, isOpen: boolean) => { - setKebabIsOpen(isOpen); + const onKebabToggle = () => { + setKebabIsOpen(!kebabIsOpen); }; const onResourceToggle = (_event: any, isExpanded: boolean) => { @@ -66,7 +66,7 @@ export const ToolbarStacked: React.FunctionComponent = () => { setResourceIsExpanded(false); }; - const onResourceSelectDropdown = (event: React.SyntheticEvent | undefined) => { + const onResourceSelectDropdown = (event: React.MouseEvent| undefined) => { setResourceSelected(event?.target); setResourceIsExpanded(false); }; diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx index 9b9e19b4f0e..1012ce9852b 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx @@ -88,8 +88,8 @@ export const ToolbarWithFilters: React.FunctionComponent = () => { setRiskIsExpanded(isExpanded); }; - const onKebabToggle = (_event: any, isOpen: boolean) => { - setKebabIsOpen(isOpen); + const onKebabToggle = () => { + setKebabIsOpen(!kebabIsOpen); }; const statusMenuItems = [ diff --git a/packages/react-core/src/demos/Card/Card.md b/packages/react-core/src/demos/Card/Card.md index a9b5ae9ee18..cbb4190cf31 100644 --- a/packages/react-core/src/demos/Card/Card.md +++ b/packages/react-core/src/demos/Card/Card.md @@ -68,7 +68,7 @@ import { ToolbarFilter, ToolbarContent } from '@patternfly/react-core'; -import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/dist/esm/next/index'; +import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; diff --git a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx index b76e34ccf9c..f1100e96e0c 100644 --- a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx +++ b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx @@ -52,7 +52,7 @@ import { ActionsColumn, CustomActionsToggleProps } from '@patternfly/react-table'; -import { Dropdown, DropdownList } from '@patternfly/react-core/dist/esm/next/index'; +import { Dropdown, DropdownList } from '@patternfly/react-core/next'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; From c6789d6ba6f30e7bd56c8c9c578f75bd7b2add3b Mon Sep 17 00:00:00 2001 From: Titani Date: Mon, 13 Feb 2023 15:22:06 -0500 Subject: [PATCH 12/21] revert merge issue --- .../src/components/Toolbar/examples/ToolbarWithFilters.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx index 1012ce9852b..9b9e19b4f0e 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx @@ -88,8 +88,8 @@ export const ToolbarWithFilters: React.FunctionComponent = () => { setRiskIsExpanded(isExpanded); }; - const onKebabToggle = () => { - setKebabIsOpen(!kebabIsOpen); + const onKebabToggle = (_event: any, isOpen: boolean) => { + setKebabIsOpen(isOpen); }; const statusMenuItems = [ From 9b0bf3c80794d89ec6c3971a3d09fa78876ad963 Mon Sep 17 00:00:00 2001 From: Titani Date: Mon, 13 Feb 2023 18:49:16 -0500 Subject: [PATCH 13/21] add back aliases --- .../OverflowMenu/examples/OverflowMenu.md | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md index 36c8c144c2c..9bc5ca3788e 100644 --- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md +++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md @@ -17,7 +17,7 @@ import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-ico import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon'; import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; -import { Dropdown, DropdownList } from '@patternfly/react-core/next'; +import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next'; ## Examples @@ -34,7 +34,7 @@ import { OverflowMenuDropdownItem, MenuToggle } from '@patternfly/react-core'; -import { Dropdown, DropdownList } from '@patternfly/react-core/next'; +import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; class SimpleOverflowMenu extends React.Component { @@ -86,7 +86,7 @@ class SimpleOverflowMenu extends React.Component { - ( {dropdownItems} - + ); @@ -127,7 +127,7 @@ import { Button, ButtonVariant } from '@patternfly/react-core'; -import { Dropdown, DropdownList } from '@patternfly/react-core/next'; +import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon'; import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon'; @@ -220,7 +220,7 @@ class OverflowMenuGroupTypes extends React.Component { - ( {dropdownItems} - + ); @@ -261,7 +261,7 @@ import { Button, ButtonVariant } from '@patternfly/react-core'; -import { Dropdown, DropdownList } from '@patternfly/react-core/next'; +import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon'; import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon'; @@ -341,7 +341,7 @@ class OverflowMenuAdditionalOptions extends React.Component { - ( {dropdownItems} - + ); @@ -382,7 +382,7 @@ import { Button, ButtonVariant } from '@patternfly/react-core'; -import { Dropdown, DropdownList } from '@patternfly/react-core/next'; +import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; class OverflowMenuPersist extends React.Component { @@ -430,7 +430,7 @@ class OverflowMenuPersist extends React.Component { - ( {dropdownItems} - + ); From 06f4dba897296bdaf6629312546a4b3b8b90a00e Mon Sep 17 00:00:00 2001 From: Titani Date: Wed, 15 Feb 2023 14:31:03 -0500 Subject: [PATCH 14/21] add onOpenChange to examples --- .../src/components/OverflowMenu/examples/OverflowMenu.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md index 9bc5ca3788e..80c9da3e6c9 100644 --- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md +++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md @@ -100,6 +100,7 @@ class SimpleOverflowMenu extends React.Component { )} isOpen={isOpen} + onOpenChange={isOpen => setIsOpen(isOpen)} > {dropdownItems} @@ -234,6 +235,7 @@ class OverflowMenuGroupTypes extends React.Component { )} isOpen={isOpen} + onOpenChange={isOpen => setIsOpen(isOpen)} > {dropdownItems} @@ -355,6 +357,7 @@ class OverflowMenuAdditionalOptions extends React.Component { )} isOpen={isOpen} + onOpenChange={isOpen => setIsOpen(isOpen)} > {dropdownItems} @@ -444,6 +447,7 @@ class OverflowMenuPersist extends React.Component { )} isOpen={isOpen} + onOpenChange={isOpen => setIsOpen(isOpen)} > {dropdownItems} From 7e97b02b7cafef0e822a6fba08e68a709b19c5ee Mon Sep 17 00:00:00 2001 From: Titani Date: Fri, 3 Mar 2023 16:22:26 -0500 Subject: [PATCH 15/21] updates from comments --- .../OverflowMenu/examples/OverflowMenu.md | 73 +++++++++++-------- .../OverflowMenuBreakpointOnContainer.tsx | 1 + 2 files changed, 44 insertions(+), 30 deletions(-) diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md index 80c9da3e6c9..616e9893291 100644 --- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md +++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md @@ -9,7 +9,7 @@ propComponents: 'OverflowMenuControl', 'OverflowMenuDropdownItem', 'OverflowMenuGroup', - 'OverflowMenuItem', + 'OverflowMenuItem' ] --- @@ -48,7 +48,7 @@ class SimpleOverflowMenu extends React.Component { isOpen: !this.state.isOpen }); }; - this.onSelect = event => { + this.onSelect = (event) => { this.setState({ isOpen: !this.state.isOpen }); @@ -88,7 +88,7 @@ class SimpleOverflowMenu extends React.Component { ( + toggle={(toggleRef) => ( )} isOpen={isOpen} - onOpenChange={isOpen => setIsOpen(isOpen)} + onOpenChange={(isOpen) => + this.setState({ + isOpen + }) + } > - - {dropdownItems} - - + {dropdownItems} + ); @@ -145,7 +147,7 @@ class OverflowMenuGroupTypes extends React.Component { isOpen: !this.state.isOpen }); }; - this.onSelect = event => { + this.onSelect = (event) => { this.setState({ isOpen: !this.state.isOpen }); @@ -223,7 +225,7 @@ class OverflowMenuGroupTypes extends React.Component { ( + toggle={(toggleRef) => ( )} isOpen={isOpen} - onOpenChange={isOpen => setIsOpen(isOpen)} + onOpenChange={(isOpen) => + this.setState({ + isOpen + }) + } > - - {dropdownItems} - - + {dropdownItems} + ); @@ -280,7 +284,7 @@ class OverflowMenuAdditionalOptions extends React.Component { isOpen: !this.state.isOpen }); }; - this.onSelect = event => { + this.onSelect = (event) => { this.setState({ isOpen: !this.state.isOpen }); @@ -308,7 +312,9 @@ class OverflowMenuAdditionalOptions extends React.Component { Action 6 , - Action 7 + + Action 7 + ]; return ( @@ -345,7 +351,7 @@ class OverflowMenuAdditionalOptions extends React.Component { ( + toggle={(toggleRef) => ( )} isOpen={isOpen} - onOpenChange={isOpen => setIsOpen(isOpen)} + onOpenChange={(isOpen) => + this.setState({ + isOpen + }) + } > - - {dropdownItems} - - + {dropdownItems} + ); @@ -415,7 +423,9 @@ class OverflowMenuPersist extends React.Component { Tertiary , - Action 4 + + Action 4 + ]; return ( @@ -435,7 +445,7 @@ class OverflowMenuPersist extends React.Component { ( + toggle={(toggleRef) => ( )} isOpen={isOpen} - onOpenChange={isOpen => setIsOpen(isOpen)} + onOpenChange={(isOpen) => + this.setState({ + isOpen + }) + } > - - {dropdownItems} - - + {dropdownItems} + ); @@ -467,4 +479,5 @@ By passing in the `breakpointReference` property, the overflow menu's breakpoint You can change the container width in this example by adjusting the slider. As the container width changes, the overflow menu will change between a horizontal menu and a vertical dropdown despite the viewport width not changing. ```ts file="./OverflowMenuBreakpointOnContainer.tsx" + ``` diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx index 148fc95e561..a50e60f40c7 100644 --- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx +++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx @@ -98,6 +98,7 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => )} isOpen={isOpen} + onOpenChange={isOpen => setIsOpen(isOpen)} > {dropdownItems} From eb760aab541e021865036d1e890905683de3fa7e Mon Sep 17 00:00:00 2001 From: Titani Date: Tue, 7 Mar 2023 08:46:32 -0500 Subject: [PATCH 16/21] add alias --- .../examples/OverflowMenuBreakpointOnContainer.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx index a50e60f40c7..75f231cb5bb 100644 --- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx +++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx @@ -9,7 +9,7 @@ import { MenuToggle, Slider } from '@patternfly/react-core'; -import { Dropdown, DropdownList } from '@patternfly/react-core/next'; +import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => { @@ -84,7 +84,7 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => - ( onOpenChange={isOpen => setIsOpen(isOpen)} > {dropdownItems} - + From 3f6b75316cb4b296c4085d59ea0c0163940c8996 Mon Sep 17 00:00:00 2001 From: Titani Date: Tue, 7 Mar 2023 16:48:34 -0500 Subject: [PATCH 17/21] update failing test --- .../Timestamp/__tests__/__snapshots__/Timestamp.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Timestamp/__tests__/__snapshots__/Timestamp.test.tsx.snap b/packages/react-core/src/components/Timestamp/__tests__/__snapshots__/Timestamp.test.tsx.snap index 9b9cfe43e0d..6eaa5d032d2 100644 --- a/packages/react-core/src/components/Timestamp/__tests__/__snapshots__/Timestamp.test.tsx.snap +++ b/packages/react-core/src/components/Timestamp/__tests__/__snapshots__/Timestamp.test.tsx.snap @@ -9,7 +9,7 @@ exports[`Matches snapshot 1`] = ` class="pf-c-timestamp__text" datetime="2022-01-01T00:00:00.000Z" > - 1/1/2022, 12:00:00 AM + 1/1/2022, 12:00:00 AM From 69f11a701173b93a9e0ab908f82181e78815ff8c Mon Sep 17 00:00:00 2001 From: Titani Date: Tue, 7 Mar 2023 16:48:34 -0500 Subject: [PATCH 18/21] Revert "update failing test" This reverts commit 92ff72c45a36a876dfecc69fd29fb664a5f7001e. --- .../Timestamp/__tests__/__snapshots__/Timestamp.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Timestamp/__tests__/__snapshots__/Timestamp.test.tsx.snap b/packages/react-core/src/components/Timestamp/__tests__/__snapshots__/Timestamp.test.tsx.snap index 6eaa5d032d2..9b9cfe43e0d 100644 --- a/packages/react-core/src/components/Timestamp/__tests__/__snapshots__/Timestamp.test.tsx.snap +++ b/packages/react-core/src/components/Timestamp/__tests__/__snapshots__/Timestamp.test.tsx.snap @@ -9,7 +9,7 @@ exports[`Matches snapshot 1`] = ` class="pf-c-timestamp__text" datetime="2022-01-01T00:00:00.000Z" > - 1/1/2022, 12:00:00 AM + 1/1/2022, 12:00:00 AM From f5c9f94a6de3352f14d5bdec9ff2ac4ab18e0224 Mon Sep 17 00:00:00 2001 From: Titani Date: Wed, 15 Mar 2023 16:08:55 -0400 Subject: [PATCH 19/21] fix demo --- packages/react-core/src/demos/Card/Card.md | 3 +++ packages/react-core/src/demos/Tabs.md | 3 +++ .../react-core/src/demos/examples/Tabs/TabsAndTable.tsx | 6 +++--- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/react-core/src/demos/Card/Card.md b/packages/react-core/src/demos/Card/Card.md index cbb4190cf31..304fd36aab5 100644 --- a/packages/react-core/src/demos/Card/Card.md +++ b/packages/react-core/src/demos/Card/Card.md @@ -18,6 +18,9 @@ import sparkIcon from './camel-spark_200x150.png'; import swaggerIcon from './camel-swagger-java_200x150.png'; import azureIcon from './FuseConnector_Icons_AzureServices.png'; import restIcon from './FuseConnector_Icons_REST.png'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; + +import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next'; ## Demos diff --git a/packages/react-core/src/demos/Tabs.md b/packages/react-core/src/demos/Tabs.md index c6aeeae04be..12dfc92b295 100644 --- a/packages/react-core/src/demos/Tabs.md +++ b/packages/react-core/src/demos/Tabs.md @@ -11,6 +11,9 @@ import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-i import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next'; + ## Demos diff --git a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx index f1100e96e0c..3962a1f56b9 100644 --- a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx +++ b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx @@ -52,7 +52,7 @@ import { ActionsColumn, CustomActionsToggleProps } from '@patternfly/react-table'; -import { Dropdown, DropdownList } from '@patternfly/react-core/next'; +import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; @@ -188,7 +188,7 @@ export const TablesAndTabs = () => { - {}} toggle={toggleRef => ( { isOpen={false} > {[]} - + From 35339e18ab60b8f0aaae02a4bd7b90ad022fe0e1 Mon Sep 17 00:00:00 2001 From: Titani Date: Thu, 16 Mar 2023 17:02:12 -0400 Subject: [PATCH 20/21] fix toolbar example --- .../components/Toolbar/examples/Toolbar.md | 2 +- .../Toolbar/examples/ToolbarStacked.tsx | 25 +++++++++---------- 2 files changed, 13 insertions(+), 14 deletions(-) diff --git a/packages/react-core/src/components/Toolbar/examples/Toolbar.md b/packages/react-core/src/components/Toolbar/examples/Toolbar.md index 0aca895f11f..3ae904b69b6 100644 --- a/packages/react-core/src/components/Toolbar/examples/Toolbar.md +++ b/packages/react-core/src/components/Toolbar/examples/Toolbar.md @@ -11,7 +11,7 @@ import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon'; import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; -import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next'; +import { Dropdown as DropdownNext, DropdownItem as DropdownItemNext, DropdownList } from '@patternfly/react-core/next'; ## Examples diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx index 8c395cb9f5f..1ab9f847903 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx @@ -8,7 +8,6 @@ import { SelectVariant, Pagination, Dropdown, - DropdownSeparator, DropdownToggle, DropdownToggleCheckbox, DropdownItem, @@ -24,7 +23,7 @@ import { ToolbarToggleGroup, ToolbarItem } from '@patternfly/react-core'; -import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next'; +import { Dropdown as DropdownNext, DropdownItem as DropdownItemNext, DropdownList } from '@patternfly/react-core/next'; import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; @@ -102,21 +101,21 @@ export const ToolbarStacked: React.FunctionComponent = () => { }; const dropdownItems = [ - Link, - + Link, + Action - , - + , + Disabled Link - , - + , + Disabled Action - , - , - Separated Link, - + , + , + Separated Link, + Separated Action - + ]; const splitButtonDropdownItems = [ From f6953d7f934b7b8eb1d093907c5c9a62aefc7b35 Mon Sep 17 00:00:00 2001 From: Titani Date: Fri, 17 Mar 2023 10:02:03 -0400 Subject: [PATCH 21/21] update table overflow actions example --- .../examples/ComposableTable.md | 3 ++ .../ComposableTableActionsOverflow.tsx | 45 +++++++++++-------- 2 files changed, 30 insertions(+), 18 deletions(-) diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTable.md b/packages/react-table/src/components/TableComposable/examples/ComposableTable.md index 87b51b323a6..4e9f5bb2071 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTable.md +++ b/packages/react-table/src/components/TableComposable/examples/ComposableTable.md @@ -53,9 +53,12 @@ import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon'; import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon'; import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon'; import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/Table/table'; +import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next'; + ## TableComposable examples diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableActionsOverflow.tsx b/packages/react-table/src/components/TableComposable/examples/ComposableTableActionsOverflow.tsx index 80e5b96dcba..c3298d18b5b 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableActionsOverflow.tsx +++ b/packages/react-table/src/components/TableComposable/examples/ComposableTableActionsOverflow.tsx @@ -8,10 +8,11 @@ import { OverflowMenuGroup, OverflowMenuItem, OverflowMenuDropdownItem, - Dropdown, - KebabToggle + MenuToggle } from '@patternfly/react-core'; import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; +import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; interface Repository { name: string; @@ -43,13 +44,13 @@ export const ComposableTableActions: React.FunctionComponent = () => { }; const dropdownItems = [ - + Pimary , - + Secondary , - + Tertiary ]; @@ -68,7 +69,7 @@ export const ComposableTableActions: React.FunctionComponent = () => { - {repos.map(repo => ( + {repos.map((repo) => ( {repo.name} {repo.branches} @@ -91,22 +92,30 @@ export const ComposableTableActions: React.FunctionComponent = () => { - - setRepos(repos.map(r => (r.name !== repo.name ? r : { ...r, isMenuOpen: !r.isMenuOpen }))) + setRepos(repos.map((r) => (r.name !== repo.name ? r : { ...r, isMenuOpen: !r.isMenuOpen }))) } - toggle={ - - setRepos(repos.map(r => (r.name !== repo.name ? r : { ...r, isMenuOpen: open }))) + toggle={(toggleRef) => ( + + setRepos(repos.map((r) => (r.name !== repo.name ? r : { ...r, isMenuOpen: !r.isMenuOpen }))) } - /> - } + isExpanded={repo.isMenuOpen} + > + + + )} isOpen={repo.isMenuOpen} - isPlain - dropdownItems={dropdownItems} - /> + onOpenChange={(isOpen) => + setRepos(repos.map((r) => (r.name !== repo.name ? r : { ...r, isMenuOpen: isOpen }))) + } + > + {dropdownItems} +