@patternfly/react-core 5.0.0 → 5.1.1-prerelease.1

package/src/components/OverflowMenu/examples/OverflowMenu.md

@@ -22,457 +22,26 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 
 ### Simple (responsive)
 
-```js
-import React from 'react';
-import {
-  OverflowMenu,
-  OverflowMenuControl,
-  OverflowMenuContent,
-  OverflowMenuGroup,
-  OverflowMenuItem,
-  OverflowMenuDropdownItem,
-  MenuToggle,
-  Dropdown,
-  DropdownList
-} from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-
-class SimpleOverflowMenu extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false
-    };
-    this.onToggle = () => {
-      this.setState({
-        isOpen: !this.state.isOpen
-      });
-    };
-    this.onSelect = (event) => {
-      this.setState({
-        isOpen: !this.state.isOpen
-      });
-    };
-  }
+```ts file="./OverflowMenuSimple.tsx"
 
-  render() {
-    const { isOpen } = this.state;
-    const dropdownItems = [
-      <OverflowMenuDropdownItem itemId={0} key="item1" isShared>
-        Item 1
-      </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem itemId={1} key="item2" isShared>
-        Item 2
-      </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem itemId={2} key="item3" isShared>
-        Item 3
-      </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem itemId={3} key="item4" isShared>
-        Item 4
-      </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem itemId={5} key="item5" isShared>
-        Item 5
-      </OverflowMenuDropdownItem>
-    ];
-    return (
-      <OverflowMenu breakpoint="lg">
-        <OverflowMenuContent>
-          <OverflowMenuItem>Item</OverflowMenuItem>
-          <OverflowMenuItem>Item</OverflowMenuItem>
-          <OverflowMenuGroup>
-            <OverflowMenuItem>Item</OverflowMenuItem>
-            <OverflowMenuItem>Item</OverflowMenuItem>
-            <OverflowMenuItem>Item</OverflowMenuItem>
-          </OverflowMenuGroup>
-        </OverflowMenuContent>
-        <OverflowMenuControl>
-          <Dropdown
-            onSelect={this.onSelect}
-            toggle={(toggleRef) => (
-              <MenuToggle
-                ref={toggleRef}
-                aria-label="Simple example overflow menu"
-                variant="plain"
-                onClick={this.onToggle}
-                isExpanded={isOpen}
-              >
-                <EllipsisVIcon />
-              </MenuToggle>
-            )}
-            isOpen={isOpen}
-            onOpenChange={(isOpen) =>
-              this.setState({
-                isOpen
-              })
-            }
-          >
-            <DropdownList>{dropdownItems}</DropdownList>
-          </Dropdown>
-        </OverflowMenuControl>
-      </OverflowMenu>
-    );
-  }
-}
 ```
 
 ### Group types
 
-```js
-import React from 'react';
-import {
-  OverflowMenu,
-  OverflowMenuControl,
-  OverflowMenuContent,
-  OverflowMenuGroup,
-  OverflowMenuItem,
-  OverflowMenuDropdownItem,
-  MenuToggle,
-  Button,
-  ButtonVariant,
-  Dropdown,
-  DropdownList
-} from '@patternfly/react-core';
-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';
-
-class OverflowMenuGroupTypes extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false
-    };
-    this.onToggle = () => {
-      this.setState({
-        isOpen: !this.state.isOpen
-      });
-    };
-    this.onSelect = (event) => {
-      this.setState({
-        isOpen: !this.state.isOpen
-      });
-    };
-  }
+```ts file="./OverflowMenuGroupTypes.tsx"
 
-  render() {
-    const { isOpen } = this.state;
-    const dropdownItems = [
-      <OverflowMenuDropdownItem itemId={0} key="item1" isShared>
-        Item 1
-      </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem itemId={1} key="item2" isShared>
-        Item 2
-      </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem itemId={2} key="item3" isShared>
-        Item 3
-      </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem itemId={3} key="primary" isShared>
-        Primary
-      </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem itemId={4} key="secondary" isShared>
-        Secondary
-      </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem itemId={5} key="tertiary" isShared>
-        Tertiary
-      </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem itemId={6} key="action1" isShared>
-        Action 1
-      </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem itemId={7} key="action2" isShared>
-        Action 2
-      </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem itemId={8} key="action3" isShared>
-        Action 3
-      </OverflowMenuDropdownItem>
-    ];
-    return (
-      <OverflowMenu breakpoint="lg">
-        <OverflowMenuContent>
-          <OverflowMenuGroup>
-            <OverflowMenuItem>Item</OverflowMenuItem>
-            <OverflowMenuItem>Item</OverflowMenuItem>
-            <OverflowMenuItem>Item</OverflowMenuItem>
-          </OverflowMenuGroup>
-          <OverflowMenuGroup groupType="button">
-            <OverflowMenuItem>
-              <Button variant={ButtonVariant.primary}>Primary</Button>
-            </OverflowMenuItem>
-            <OverflowMenuItem>
-              <Button variant={ButtonVariant.secondary}>Secondary</Button>
-            </OverflowMenuItem>
-            <OverflowMenuItem>
-              <Button variant={ButtonVariant.tertiary}>Tertiary</Button>
-            </OverflowMenuItem>
-          </OverflowMenuGroup>
-          <OverflowMenuGroup groupType="icon">
-            <OverflowMenuItem>
-              <Button variant={ButtonVariant.plain} aria-label="Align left">
-                <AlignLeftIcon />
-              </Button>
-            </OverflowMenuItem>
-            <OverflowMenuItem>
-              <Button variant={ButtonVariant.plain} aria-label="Align center">
-                <AlignCenterIcon />
-              </Button>
-            </OverflowMenuItem>
-            <OverflowMenuItem>
-              <Button variant={ButtonVariant.plain} aria-label="Align right">
-                <AlignRightIcon />
-              </Button>
-            </OverflowMenuItem>
-          </OverflowMenuGroup>
-        </OverflowMenuContent>
-        <OverflowMenuControl>
-          <Dropdown
-            onSelect={this.onSelect}
-            toggle={(toggleRef) => (
-              <MenuToggle
-                ref={toggleRef}
-                aria-label="Group example overflow menu"
-                variant="plain"
-                onClick={this.onToggle}
-                isExpanded={isOpen}
-              >
-                <EllipsisVIcon />
-              </MenuToggle>
-            )}
-            isOpen={isOpen}
-            onOpenChange={(isOpen) =>
-              this.setState({
-                isOpen
-              })
-            }
-          >
-            <DropdownList>{dropdownItems}</DropdownList>
-          </Dropdown>
-        </OverflowMenuControl>
-      </OverflowMenu>
-    );
-  }
-}
 ```
 
 ### Multiple groups
 
-```js
-import React from 'react';
-import {
-  OverflowMenu,
-  OverflowMenuControl,
-  OverflowMenuContent,
-  OverflowMenuGroup,
-  OverflowMenuItem,
-  OverflowMenuDropdownItem,
-  MenuToggle,
-  Button,
-  ButtonVariant,
-  Dropdown,
-  DropdownList
-} from '@patternfly/react-core';
-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';
+```ts file="./OverflowMenuMultiGroup.tsx"
 
-class OverflowMenuAdditionalOptions extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false
-    };
-    this.onToggle = () => {
-      this.setState({
-        isOpen: !this.state.isOpen
-      });
-    };
-    this.onSelect = (event) => {
-      this.setState({
-        isOpen: !this.state.isOpen
-      });
-    };
-  }
-
-  render() {
-    const { isOpen } = this.state;
-    const dropdownItems = [
-      <OverflowMenuDropdownItem itemId={0} key="1" isShared>
-        Primary
-      </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem itemId={1} key="2" isShared>
-        Secondary
-      </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem itemId={2} key="3" isShared>
-        Tertiary
-      </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem itemId={3} key="4" isShared>
-        Action 4
-      </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem itemId={4} key="5" isShared>
-        Action 5
-      </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem itemId={5} key="6" isShared>
-        Action 6
-      </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem itemId={6} key="7">
-        Action 7
-      </OverflowMenuDropdownItem>
-    ];
-    return (
-      <OverflowMenu breakpoint="lg">
-        <OverflowMenuContent>
-          <OverflowMenuGroup groupType="button">
-            <OverflowMenuItem>
-              <Button variant={ButtonVariant.primary}>Primary</Button>
-            </OverflowMenuItem>
-            <OverflowMenuItem>
-              <Button variant={ButtonVariant.secondary}>Secondary</Button>
-            </OverflowMenuItem>
-            <OverflowMenuItem>
-              <Button variant={ButtonVariant.tertiary}>Tertiary</Button>
-            </OverflowMenuItem>
-          </OverflowMenuGroup>
-          <OverflowMenuGroup groupType="icon">
-            <OverflowMenuItem>
-              <Button variant={ButtonVariant.plain} aria-label="Align left">
-                <AlignLeftIcon />
-              </Button>
-            </OverflowMenuItem>
-            <OverflowMenuItem>
-              <Button variant={ButtonVariant.plain} aria-label="Align center">
-                <AlignCenterIcon />
-              </Button>
-            </OverflowMenuItem>
-            <OverflowMenuItem>
-              <Button variant={ButtonVariant.plain} aria-label="Align right">
-                <AlignRightIcon />
-              </Button>
-            </OverflowMenuItem>
-          </OverflowMenuGroup>
-        </OverflowMenuContent>
-        <OverflowMenuControl hasAdditionalOptions>
-          <Dropdown
-            onSelect={this.onSelect}
-            toggle={(toggleRef) => (
-              <MenuToggle
-                ref={toggleRef}
-                aria-label="Multiple group example overflow menu"
-                variant="plain"
-                onClick={this.onToggle}
-                isExpanded={isOpen}
-              >
-                <EllipsisVIcon />
-              </MenuToggle>
-            )}
-            isOpen={isOpen}
-            onOpenChange={(isOpen) =>
-              this.setState({
-                isOpen
-              })
-            }
-          >
-            <DropdownList>{dropdownItems}</DropdownList>
-          </Dropdown>
-        </OverflowMenuControl>
-      </OverflowMenu>
-    );
-  }
-}
 ```
 
 ### Persistent
 
-```js
-import React from 'react';
-import {
-  OverflowMenu,
-  OverflowMenuControl,
-  OverflowMenuContent,
-  OverflowMenuGroup,
-  OverflowMenuItem,
-  OverflowMenuDropdownItem,
-  MenuToggle,
-  Button,
-  ButtonVariant,
-  Dropdown,
-  DropdownList
-} from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-
-class OverflowMenuPersist extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false
-    };
-    this.onToggle = () => {
-      this.setState({
-        isOpen: !this.state.isOpen
-      });
-    };
-    this.onSelect = (event, itemId) => {
-      this.setState({
-        isOpen: !this.state.isOpen
-      });
-    };
-  }
+```ts file="./OverflowMenuPersistent.tsx"
 
-  render() {
-    const { isOpen } = this.state;
-    const dropdownItems = [
-      <OverflowMenuDropdownItem itemId={0} key="secondary" isShared>
-        Secondary
-      </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem itemId={1} key="tertiary" isShared>
-        Tertiary
-      </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem itemId={2} key="action">
-        Action 4
-      </OverflowMenuDropdownItem>
-    ];
-    return (
-      <OverflowMenu breakpoint="lg">
-        <OverflowMenuContent isPersistent>
-          <OverflowMenuGroup groupType="button" isPersistent>
-            <OverflowMenuItem isPersistent>
-              <Button variant={ButtonVariant.primary}>Primary</Button>
-            </OverflowMenuItem>
-            <OverflowMenuItem>
-              <Button variant={ButtonVariant.secondary}>Secondary</Button>
-            </OverflowMenuItem>
-            <OverflowMenuItem>
-              <Button variant={ButtonVariant.tertiary}>Tertiary</Button>
-            </OverflowMenuItem>
-          </OverflowMenuGroup>
-        </OverflowMenuContent>
-        <OverflowMenuControl hasAdditionalOptions>
-          <Dropdown
-            onSelect={this.onSelect}
-            toggle={(toggleRef) => (
-              <MenuToggle
-                ref={toggleRef}
-                aria-label="Persistent example overflow menu"
-                variant="plain"
-                onClick={this.onToggle}
-                isExpanded={isOpen}
-              >
-                <EllipsisVIcon />
-              </MenuToggle>
-            )}
-            isOpen={isOpen}
-            onOpenChange={(isOpen) =>
-              this.setState({
-                isOpen
-              })
-            }
-          >
-            <DropdownList>{dropdownItems}</DropdownList>
-          </Dropdown>
-        </OverflowMenuControl>
-      </OverflowMenu>
-    );
-  }
-}
 ```
 
 ### Breakpoint on container

package/src/components/OverflowMenu/examples/OverflowMenuGroupTypes.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import {
+  OverflowMenu,
+  OverflowMenuControl,
+  OverflowMenuContent,
+  OverflowMenuGroup,
+  OverflowMenuItem,
+  OverflowMenuDropdownItem,
+  MenuToggle,
+  Button,
+  ButtonVariant,
+  Dropdown,
+  DropdownList
+} from '@patternfly/react-core';
+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';
+
+export const OverflowMenuGroupTypes: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const dropdownItems = [
+    <OverflowMenuDropdownItem itemId={0} key="item1" isShared>
+      Item 1
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={1} key="item2" isShared>
+      Item 2
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={2} key="item3" isShared>
+      Item 3
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={3} key="primary" isShared>
+      Primary
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={4} key="secondary" isShared>
+      Secondary
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={5} key="tertiary" isShared>
+      Tertiary
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={6} key="action1" isShared>
+      Action 1
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={7} key="action2" isShared>
+      Action 2
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={8} key="action3" isShared>
+      Action 3
+    </OverflowMenuDropdownItem>
+  ];
+
+  return (
+    <OverflowMenu breakpoint="lg">
+      <OverflowMenuContent>
+        <OverflowMenuGroup>
+          <OverflowMenuItem>Item</OverflowMenuItem>
+          <OverflowMenuItem>Item</OverflowMenuItem>
+          <OverflowMenuItem>Item</OverflowMenuItem>
+        </OverflowMenuGroup>
+        <OverflowMenuGroup groupType="button">
+          <OverflowMenuItem>
+            <Button variant={ButtonVariant.primary}>Primary</Button>
+          </OverflowMenuItem>
+          <OverflowMenuItem>
+            <Button variant={ButtonVariant.secondary}>Secondary</Button>
+          </OverflowMenuItem>
+          <OverflowMenuItem>
+            <Button variant={ButtonVariant.tertiary}>Tertiary</Button>
+          </OverflowMenuItem>
+        </OverflowMenuGroup>
+        <OverflowMenuGroup groupType="icon">
+          <OverflowMenuItem>
+            <Button variant={ButtonVariant.plain} aria-label="Align left">
+              <AlignLeftIcon />
+            </Button>
+          </OverflowMenuItem>
+          <OverflowMenuItem>
+            <Button variant={ButtonVariant.plain} aria-label="Align center">
+              <AlignCenterIcon />
+            </Button>
+          </OverflowMenuItem>
+          <OverflowMenuItem>
+            <Button variant={ButtonVariant.plain} aria-label="Align right">
+              <AlignRightIcon />
+            </Button>
+          </OverflowMenuItem>
+        </OverflowMenuGroup>
+      </OverflowMenuContent>
+      <OverflowMenuControl>
+        <Dropdown
+          onSelect={onSelect}
+          toggle={(toggleRef) => (
+            <MenuToggle
+              ref={toggleRef}
+              aria-label="Group example overflow menu"
+              variant="plain"
+              onClick={onToggle}
+              isExpanded={isOpen}
+            >
+              <EllipsisVIcon />
+            </MenuToggle>
+          )}
+          isOpen={isOpen}
+          onOpenChange={(isOpen) => setIsOpen(isOpen)}
+        >
+          <DropdownList>{dropdownItems}</DropdownList>
+        </Dropdown>
+      </OverflowMenuControl>
+    </OverflowMenu>
+  );
+};

package/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import {
+  OverflowMenu,
+  OverflowMenuControl,
+  OverflowMenuContent,
+  OverflowMenuGroup,
+  OverflowMenuItem,
+  OverflowMenuDropdownItem,
+  MenuToggle,
+  Button,
+  ButtonVariant,
+  Dropdown,
+  DropdownList
+} from '@patternfly/react-core';
+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';
+
+export const OverflowMenuMultiGroup: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const dropdownItems = [
+    <OverflowMenuDropdownItem itemId={0} key="1" isShared>
+      Primary
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={1} key="2" isShared>
+      Secondary
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={2} key="3" isShared>
+      Tertiary
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={3} key="4" isShared>
+      Action 4
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={4} key="5" isShared>
+      Action 5
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={5} key="6" isShared>
+      Action 6
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={6} key="7">
+      Action 7
+    </OverflowMenuDropdownItem>
+  ];
+
+  return (
+    <OverflowMenu breakpoint="lg">
+      <OverflowMenuContent>
+        <OverflowMenuGroup groupType="button">
+          <OverflowMenuItem>
+            <Button variant={ButtonVariant.primary}>Primary</Button>
+          </OverflowMenuItem>
+          <OverflowMenuItem>
+            <Button variant={ButtonVariant.secondary}>Secondary</Button>
+          </OverflowMenuItem>
+          <OverflowMenuItem>
+            <Button variant={ButtonVariant.tertiary}>Tertiary</Button>
+          </OverflowMenuItem>
+        </OverflowMenuGroup>
+        <OverflowMenuGroup groupType="icon">
+          <OverflowMenuItem>
+            <Button variant={ButtonVariant.plain} aria-label="Align left">
+              <AlignLeftIcon />
+            </Button>
+          </OverflowMenuItem>
+          <OverflowMenuItem>
+            <Button variant={ButtonVariant.plain} aria-label="Align center">
+              <AlignCenterIcon />
+            </Button>
+          </OverflowMenuItem>
+          <OverflowMenuItem>
+            <Button variant={ButtonVariant.plain} aria-label="Align right">
+              <AlignRightIcon />
+            </Button>
+          </OverflowMenuItem>
+        </OverflowMenuGroup>
+      </OverflowMenuContent>
+      <OverflowMenuControl hasAdditionalOptions>
+        <Dropdown
+          onSelect={onSelect}
+          toggle={(toggleRef) => (
+            <MenuToggle
+              ref={toggleRef}
+              aria-label="Multiple group example overflow menu"
+              variant="plain"
+              onClick={onToggle}
+              isExpanded={isOpen}
+            >
+              <EllipsisVIcon />
+            </MenuToggle>
+          )}
+          isOpen={isOpen}
+          onOpenChange={(isOpen) => setIsOpen(isOpen)}
+        >
+          <DropdownList>{dropdownItems}</DropdownList>
+        </Dropdown>
+      </OverflowMenuControl>
+    </OverflowMenu>
+  );
+};