From 90aae13855f6dd463d066a60a2305e90bcb0191f Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Wed, 22 Dec 2021 17:22:49 -0500
Subject: [PATCH 1/2] chore(ActionList): convert examples to
 typescript/functional components

---
 .../ActionList/examples/ActionList.md         | 205 +-----------------
 .../examples/ActionListMultipleGroups.tsx     |  31 +++
 .../examples/ActionListSingleGroup.tsx        |  86 ++++++++
 .../examples/ActionListWithCancelButton.tsx   |  43 ++++
 .../examples/ActionListWithIcons.tsx          |  19 ++
 5 files changed, 183 insertions(+), 201 deletions(-)
 create mode 100644 packages/react-core/src/components/ActionList/examples/ActionListMultipleGroups.tsx
 create mode 100644 packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx
 create mode 100644 packages/react-core/src/components/ActionList/examples/ActionListWithCancelButton.tsx
 create mode 100644 packages/react-core/src/components/ActionList/examples/ActionListWithIcons.tsx

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 = [
-      <DropdownItem key="link">Link</DropdownItem>,
-      <DropdownItem key="action" component="button">
-        Action
-      </DropdownItem>,
-      <DropdownItem key="disabled link" isDisabled>
-        Disabled Link
-      </DropdownItem>,
-      <DropdownItem key="disabled action" isDisabled component="button">
-        Disabled Action
-      </DropdownItem>,
-      <DropdownSeparator key="separator" />,
-      <DropdownItem key="separated link">Separated Link</DropdownItem>,
-      <DropdownItem key="separated action" component="button">
-        Separated Action
-      </DropdownItem>
-    ];
-
-    return (
-      <React.Fragment>
-        <ActionList>
-          <ActionListItem>
-            <Button variant="primary" id="next-button">
-              Next
-            </Button>
-          </ActionListItem>
-          <ActionListItem>
-            <Button variant="secondary" id="back-button">
-              Back
-            </Button>
-          </ActionListItem>
-        </ActionList>
-        <br />
-        With kebab
-        <ActionList>
-          <ActionListItem>
-            <Button variant="primary" id="next-button2">
-              Next
-            </Button>
-          </ActionListItem>
-          <ActionListItem>
-            <Button variant="secondary" id="back-button2">
-              Back
-            </Button>
-          </ActionListItem>
-          <ActionListItem>
-            <Dropdown
-              onSelect={this.onSelect}
-              toggle={<KebabToggle onToggle={this.onToggle} />}
-              isOpen={this.state.isOpen}
-              isPlain
-              dropdownItems={dropdownItems}
-              position="right"
-            />
-          </ActionListItem>
-        </ActionList>
-      </React.Fragment>
-    );
-  }
-}
+```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 (
-      <ActionList isIconList>
-        <ActionListItem>
-          <Button variant="plain" id="times-button" aria-label="times icon button">
-            <TimesIcon />
-          </Button>
-        </ActionListItem>
-        <ActionListItem>
-          <Button variant="plain" id="check-button" aria-label="check icon button">
-            <CheckIcon />
-          </Button>
-        </ActionListItem>
-      </ActionList>
-    );
-  }
-}
+```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 (
-      <ActionList>
-        <ActionListGroup>
-          <ActionListItem>
-            <Button variant="primary" id="next-button">
-              Next
-            </Button>
-          </ActionListItem>
-          <ActionListItem>
-            <Button variant="secondary" id="back-button">
-              Back
-            </Button>
-          </ActionListItem>
-        </ActionListGroup>
-        <ActionListGroup>
-          <ActionListItem>
-            <Button variant="primary" id="submit-button">
-              Submit
-            </Button>
-          </ActionListItem>
-          <ActionListItem>
-            <Button variant="link" id="cancel-button">
-              Cancel
-            </Button>
-          </ActionListItem>
-        </ActionListGroup>
-      </ActionList>
-    );
-  }
-}
+```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 (
-      <React.Fragment>
-        In modals, forms, data lists
-        <ActionList>
-          <ActionListItem>
-            <Button variant="primary" id="save-button">
-              Save
-            </Button>
-          </ActionListItem>
-          <ActionListItem>
-            <Button variant="link" id="cancel-button">
-              Cancel
-            </Button>
-          </ActionListItem>
-        </ActionList>
-        <br />
-        In wizards
-        <ActionList>
-          <ActionListGroup>
-            <ActionListItem>
-              <Button variant="primary" id="next-button">
-                Next
-              </Button>
-            </ActionListItem>
-            <ActionListItem>
-              <Button variant="secondary" id="back-button">
-                Back
-              </Button>
-            </ActionListItem>
-          </ActionListGroup>
-          <ActionListGroup>
-            <ActionListItem>
-              <Button variant="link" id="cancel-button2">
-                Cancel
-              </Button>
-            </ActionListItem>
-          </ActionListGroup>
-        </ActionList>
-      </React.Fragment>
-    );
-  }
-}
+```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..2dfbb7d4844
--- /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 = () => (
+  <ActionList>
+    <ActionListGroup>
+      <ActionListItem>
+        <Button variant="primary" id="next-button">
+          Next
+        </Button>
+      </ActionListItem>
+      <ActionListItem>
+        <Button variant="secondary" id="back-button">
+          Back
+        </Button>
+      </ActionListItem>
+    </ActionListGroup>
+    <ActionListGroup>
+      <ActionListItem>
+        <Button variant="primary" id="submit-button">
+          Submit
+        </Button>
+      </ActionListItem>
+      <ActionListItem>
+        <Button variant="link" id="cancel-button">
+          Cancel
+        </Button>
+      </ActionListItem>
+    </ActionListGroup>
+  </ActionList>
+);
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..b09f4d380c9
--- /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 = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (
+    isOpen: boolean,
+    event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>
+  ) => {
+    event.stopPropagation();
+    setIsOpen(isOpen);
+  };
+
+  const onSelect = (event: React.SyntheticEvent<HTMLDivElement, Event>) => {
+    event.stopPropagation();
+    setIsOpen(!isOpen);
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled>
+      Disabled Link
+    </DropdownItem>,
+    <DropdownItem key="disabled action" isDisabled component="button">
+      Disabled Action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated Link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated Action
+    </DropdownItem>
+  ];
+
+  return (
+    <React.Fragment>
+      <ActionList>
+        <ActionListItem>
+          <Button variant="primary" id="next-button">
+            Next
+          </Button>
+        </ActionListItem>
+        <ActionListItem>
+          <Button variant="secondary" id="back-button">
+            Back
+          </Button>
+        </ActionListItem>
+      </ActionList>
+      <br />
+      With kebab
+      <ActionList>
+        <ActionListItem>
+          <Button variant="primary" id="next-button2">
+            Next
+          </Button>
+        </ActionListItem>
+        <ActionListItem>
+          <Button variant="secondary" id="back-button2">
+            Back
+          </Button>
+        </ActionListItem>
+        <ActionListItem>
+          <Dropdown
+            onSelect={onSelect}
+            toggle={<KebabToggle onToggle={onToggle} />}
+            isOpen={isOpen}
+            isPlain
+            dropdownItems={dropdownItems}
+            position="right"
+          />
+        </ActionListItem>
+      </ActionList>
+    </React.Fragment>
+  );
+};
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..9e6689eb6bb
--- /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.Fragment>
+    In modals, forms, data lists
+    <ActionList>
+      <ActionListItem>
+        <Button variant="primary" id="save-button">
+          Save
+        </Button>
+      </ActionListItem>
+      <ActionListItem>
+        <Button variant="link" id="cancel-button">
+          Cancel
+        </Button>
+      </ActionListItem>
+    </ActionList>
+    <br />
+    In wizards
+    <ActionList>
+      <ActionListGroup>
+        <ActionListItem>
+          <Button variant="primary" id="next-button">
+            Next
+          </Button>
+        </ActionListItem>
+        <ActionListItem>
+          <Button variant="secondary" id="back-button">
+            Back
+          </Button>
+        </ActionListItem>
+      </ActionListGroup>
+      <ActionListGroup>
+        <ActionListItem>
+          <Button variant="link" id="cancel-button2">
+            Cancel
+          </Button>
+        </ActionListItem>
+      </ActionListGroup>
+    </ActionList>
+  </React.Fragment>
+);
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..915950320b6
--- /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 = () => (
+  <ActionList isIconList>
+    <ActionListItem>
+      <Button variant="plain" id="times-button" aria-label="times icon button">
+        <TimesIcon />
+      </Button>
+    </ActionListItem>
+    <ActionListItem>
+      <Button variant="plain" id="check-button" aria-label="check icon button">
+        <CheckIcon />
+      </Button>
+    </ActionListItem>
+  </ActionList>
+);

From cd3966f07a4a795b006fee67a3f96f9e1cc96070 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Thu, 6 Jan 2022 15:53:05 -0500
Subject: [PATCH 2/2] explicitly types function component return values

---
 .../components/ActionList/examples/ActionListMultipleGroups.tsx | 2 +-
 .../components/ActionList/examples/ActionListSingleGroup.tsx    | 2 +-
 .../ActionList/examples/ActionListWithCancelButton.tsx          | 2 +-
 .../src/components/ActionList/examples/ActionListWithIcons.tsx  | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-core/src/components/ActionList/examples/ActionListMultipleGroups.tsx b/packages/react-core/src/components/ActionList/examples/ActionListMultipleGroups.tsx
index 2dfbb7d4844..0cbd8942fd5 100644
--- a/packages/react-core/src/components/ActionList/examples/ActionListMultipleGroups.tsx
+++ b/packages/react-core/src/components/ActionList/examples/ActionListMultipleGroups.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';
 
-export const ActionListMultipleGroups = () => (
+export const ActionListMultipleGroups: React.FunctionComponent = () => (
   <ActionList>
     <ActionListGroup>
       <ActionListItem>
diff --git a/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx b/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx
index b09f4d380c9..0d022998b0f 100644
--- a/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx
+++ b/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx
@@ -9,7 +9,7 @@ import {
   KebabToggle
 } from '@patternfly/react-core';
 
-export const ActionListSingleGroup = () => {
+export const ActionListSingleGroup: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
   const onToggle = (
diff --git a/packages/react-core/src/components/ActionList/examples/ActionListWithCancelButton.tsx b/packages/react-core/src/components/ActionList/examples/ActionListWithCancelButton.tsx
index 9e6689eb6bb..f4fa5b399e1 100644
--- a/packages/react-core/src/components/ActionList/examples/ActionListWithCancelButton.tsx
+++ b/packages/react-core/src/components/ActionList/examples/ActionListWithCancelButton.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';
 
-export const ActionListWithCancelButton = () => (
+export const ActionListWithCancelButton: React.FunctionComponent = () => (
   <React.Fragment>
     In modals, forms, data lists
     <ActionList>
diff --git a/packages/react-core/src/components/ActionList/examples/ActionListWithIcons.tsx b/packages/react-core/src/components/ActionList/examples/ActionListWithIcons.tsx
index 915950320b6..216ddb0dca9 100644
--- a/packages/react-core/src/components/ActionList/examples/ActionListWithIcons.tsx
+++ b/packages/react-core/src/components/ActionList/examples/ActionListWithIcons.tsx
@@ -3,7 +3,7 @@ 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 = () => (
+export const ActionListWithIcons: React.FunctionComponent = () => (
   <ActionList isIconList>
     <ActionListItem>
       <Button variant="plain" id="times-button" aria-label="times icon button">