diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md
index f1a63ea87e5..7da8b3f2908 100644
--- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md
+++ b/packages/react-core/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 = [
-
- Item 1
- ,
-
- Item 2
- ,
-
- Item 3
- ,
-
- Item 4
- ,
-
- Item 5
-
- ];
- return (
-
-
- Item
- Item
-
- Item
- Item
- Item
-
-
-
- (
-
-
-
- )}
- isOpen={isOpen}
- onOpenChange={(isOpen) =>
- this.setState({
- isOpen
- })
- }
- >
- {dropdownItems}
-
-
-
- );
- }
-}
```
### 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 = [
-
- Item 1
- ,
-
- Item 2
- ,
-
- Item 3
- ,
-
- Primary
- ,
-
- Secondary
- ,
-
- Tertiary
- ,
-
- Action 1
- ,
-
- Action 2
- ,
-
- Action 3
-
- ];
- return (
-
-
-
- Item
- Item
- Item
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- (
-
-
-
- )}
- isOpen={isOpen}
- onOpenChange={(isOpen) =>
- this.setState({
- isOpen
- })
- }
- >
- {dropdownItems}
-
-
-
- );
- }
-}
```
### 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 = [
-
- Primary
- ,
-
- Secondary
- ,
-
- Tertiary
- ,
-
- Action 4
- ,
-
- Action 5
- ,
-
- Action 6
- ,
-
- Action 7
-
- ];
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- (
-
-
-
- )}
- isOpen={isOpen}
- onOpenChange={(isOpen) =>
- this.setState({
- isOpen
- })
- }
- >
- {dropdownItems}
-
-
-
- );
- }
-}
```
### 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 = [
-
- Secondary
- ,
-
- Tertiary
- ,
-
- Action 4
-
- ];
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- (
-
-
-
- )}
- isOpen={isOpen}
- onOpenChange={(isOpen) =>
- this.setState({
- isOpen
- })
- }
- >
- {dropdownItems}
-
-
-
- );
- }
-}
```
### Breakpoint on container
diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuGroupTypes.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuGroupTypes.tsx
new file mode 100644
index 00000000000..7902995d35e
--- /dev/null
+++ b/packages/react-core/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 = [
+
+ Item 1
+ ,
+
+ Item 2
+ ,
+
+ Item 3
+ ,
+
+ Primary
+ ,
+
+ Secondary
+ ,
+
+ Tertiary
+ ,
+
+ Action 1
+ ,
+
+ Action 2
+ ,
+
+ Action 3
+
+ ];
+
+ return (
+
+
+
+ Item
+ Item
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ (
+
+
+
+ )}
+ isOpen={isOpen}
+ onOpenChange={(isOpen) => setIsOpen(isOpen)}
+ >
+ {dropdownItems}
+
+
+
+ );
+};
diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx
new file mode 100644
index 00000000000..46808b6c3c2
--- /dev/null
+++ b/packages/react-core/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 = [
+
+ Primary
+ ,
+
+ Secondary
+ ,
+
+ Tertiary
+ ,
+
+ Action 4
+ ,
+
+ Action 5
+ ,
+
+ Action 6
+ ,
+
+ Action 7
+
+ ];
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ (
+
+
+
+ )}
+ isOpen={isOpen}
+ onOpenChange={(isOpen) => setIsOpen(isOpen)}
+ >
+ {dropdownItems}
+
+
+
+ );
+};
diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuPersistent.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuPersistent.tsx
new file mode 100644
index 00000000000..794ff820099
--- /dev/null
+++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuPersistent.tsx
@@ -0,0 +1,77 @@
+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';
+
+export const OverflowMenuPersistent: React.FunctionComponent = () => {
+ const [isOpen, setIsOpen] = React.useState(false);
+
+ const onToggle = () => {
+ setIsOpen(!isOpen);
+ };
+
+ const onSelect = () => {
+ setIsOpen(!isOpen);
+ };
+
+ const dropdownItems = [
+
+ Secondary
+ ,
+
+ Tertiary
+ ,
+
+ Action 4
+
+ ];
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ (
+
+
+
+ )}
+ isOpen={isOpen}
+ onOpenChange={(isOpen) => setIsOpen(isOpen)}
+ >
+ {dropdownItems}
+
+
+
+ );
+};
diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuSimple.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuSimple.tsx
new file mode 100644
index 00000000000..a83a7789466
--- /dev/null
+++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuSimple.tsx
@@ -0,0 +1,77 @@
+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';
+
+export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => {
+ const [isOpen, setIsOpen] = React.useState(false);
+
+ const onToggle = () => {
+ setIsOpen(!isOpen);
+ };
+
+ const onSelect = () => {
+ setIsOpen(!isOpen);
+ };
+
+ const dropdownItems = [
+
+ Item 1
+ ,
+
+ Item 2
+ ,
+
+ Item 3
+ ,
+
+ Item 4
+ ,
+
+ Item 5
+
+ ];
+
+ return (
+
+
+ Item
+ Item
+
+ Item
+ Item
+ Item
+
+
+
+ (
+
+
+
+ )}
+ isOpen={isOpen}
+ onOpenChange={(isOpen) => setIsOpen(isOpen)}
+ >
+ {dropdownItems}
+
+
+
+ );
+};