diff --git a/packages/react-core/src/components/ActionList/examples/ActionList.md b/packages/react-core/src/components/ActionList/examples/ActionList.md
index 752a3e54ff1..c3efc39c11d 100644
--- a/packages/react-core/src/components/ActionList/examples/ActionList.md
+++ b/packages/react-core/src/components/ActionList/examples/ActionList.md
@@ -12,217 +12,20 @@ import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
### Action list single group
-```js
-import React from 'react';
-import {
- ActionList,
- ActionListItem,
- Button,
- Dropdown,
- DropdownItem,
- DropdownSeparator,
- KebabToggle
-} from '@patternfly/react-core';
-
-class BasicActionList extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- isOpen: false
- };
- this.onToggle = (isOpen, event) => {
- event.stopPropagation();
- this.setState({
- isOpen
- });
- };
- this.onSelect = event => {
- event.stopPropagation();
- this.setState({
- isOpen: !this.state.isOpen
- });
- };
- }
-
- render() {
- const dropdownItems = [
- Link,
-
- Action
- ,
-
- Disabled Link
- ,
-
- Disabled Action
- ,
- ,
- Separated Link,
-
- Separated Action
-
- ];
-
- return (
-
-
-
-
-
-
-
-
-
-
- With kebab
-
-
-
-
-
-
-
-
- }
- isOpen={this.state.isOpen}
- isPlain
- dropdownItems={dropdownItems}
- position="right"
- />
-
-
-
- );
- }
-}
+```ts file="ActionListSingleGroup.tsx"
```
### Action list with icons
-```js
-import React from 'react';
-import { ActionList, ActionListItem, Button } from '@patternfly/react-core';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
-
-class IconsActionList extends React.Component {
- render() {
- return (
-
-
-
-
-
-
-
-
- );
- }
-}
+```ts file="./ActionListWithIcons.tsx"
```
### Action list multiple groups
-```js
-import React from 'react';
-import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';
-
-class GroupsActionList extends React.Component {
- render() {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
-}
+```ts file="./ActionListMultipleGroups.tsx"
```
### Action list with cancel button
-```js
-import React from 'react';
-import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';
-
-class CancelActionList extends React.Component {
- render() {
- return (
-
- In modals, forms, data lists
-
-
-
-
-
-
-
-
-
- In wizards
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
-}
+```ts file="./ActionListWithCancelButton.tsx"
```
diff --git a/packages/react-core/src/components/ActionList/examples/ActionListMultipleGroups.tsx b/packages/react-core/src/components/ActionList/examples/ActionListMultipleGroups.tsx
new file mode 100644
index 00000000000..0cbd8942fd5
--- /dev/null
+++ b/packages/react-core/src/components/ActionList/examples/ActionListMultipleGroups.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';
+
+export const ActionListMultipleGroups: React.FunctionComponent = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
diff --git a/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx b/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx
new file mode 100644
index 00000000000..0d022998b0f
--- /dev/null
+++ b/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import {
+ ActionList,
+ ActionListItem,
+ Button,
+ Dropdown,
+ DropdownItem,
+ DropdownSeparator,
+ KebabToggle
+} from '@patternfly/react-core';
+
+export const ActionListSingleGroup: React.FunctionComponent = () => {
+ const [isOpen, setIsOpen] = React.useState(false);
+
+ const onToggle = (
+ isOpen: boolean,
+ event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent | React.MouseEvent
+ ) => {
+ event.stopPropagation();
+ setIsOpen(isOpen);
+ };
+
+ const onSelect = (event: React.SyntheticEvent) => {
+ event.stopPropagation();
+ setIsOpen(!isOpen);
+ };
+
+ const dropdownItems = [
+ Link,
+
+ Action
+ ,
+
+ Disabled Link
+ ,
+
+ Disabled Action
+ ,
+ ,
+ Separated Link,
+
+ Separated Action
+
+ ];
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ With kebab
+
+
+
+
+
+
+
+
+ }
+ isOpen={isOpen}
+ isPlain
+ dropdownItems={dropdownItems}
+ position="right"
+ />
+
+
+
+ );
+};
diff --git a/packages/react-core/src/components/ActionList/examples/ActionListWithCancelButton.tsx b/packages/react-core/src/components/ActionList/examples/ActionListWithCancelButton.tsx
new file mode 100644
index 00000000000..f4fa5b399e1
--- /dev/null
+++ b/packages/react-core/src/components/ActionList/examples/ActionListWithCancelButton.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';
+
+export const ActionListWithCancelButton: React.FunctionComponent = () => (
+
+ In modals, forms, data lists
+
+
+
+
+
+
+
+
+
+ In wizards
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
diff --git a/packages/react-core/src/components/ActionList/examples/ActionListWithIcons.tsx b/packages/react-core/src/components/ActionList/examples/ActionListWithIcons.tsx
new file mode 100644
index 00000000000..216ddb0dca9
--- /dev/null
+++ b/packages/react-core/src/components/ActionList/examples/ActionListWithIcons.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { ActionList, ActionListItem, Button } from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+
+export const ActionListWithIcons: React.FunctionComponent = () => (
+
+
+
+
+
+
+
+
+);