From 80c84943a15698c3392154977538579f54b20418 Mon Sep 17 00:00:00 2001
From: Jan Wright <jawright@redhat.com>
Date: Wed, 5 Oct 2022 17:17:39 -0400
Subject: [PATCH 1/3] chore(SimpleList):convert to typescript

---
 .../SimpleList/examples/SimpleList.md         | 112 +-----------------
 .../SimpleList/examples/SimpleListBasic.tsx   |  16 +++
 .../SimpleList/examples/SimpleListGrouped.tsx |  35 ++++++
 .../examples/SimpleListUncontrolled.tsx       |  28 +++++
 4 files changed, 83 insertions(+), 108 deletions(-)
 create mode 100644 packages/react-core/src/components/SimpleList/examples/SimpleListBasic.tsx
 create mode 100644 packages/react-core/src/components/SimpleList/examples/SimpleListGrouped.tsx
 create mode 100644 packages/react-core/src/components/SimpleList/examples/SimpleListUncontrolled.tsx

diff --git a/packages/react-core/src/components/SimpleList/examples/SimpleList.md b/packages/react-core/src/components/SimpleList/examples/SimpleList.md
index 8f38100ca8e..d1e5eb43817 100644
--- a/packages/react-core/src/components/SimpleList/examples/SimpleList.md
+++ b/packages/react-core/src/components/SimpleList/examples/SimpleList.md
@@ -9,120 +9,16 @@ propComponents: ['SimpleList', 'SimpleListGroup', 'SimpleListItem']
 
 ### Simple list
 
-```js
-import React from 'react';
-import { SimpleList, SimpleListItem } from '@patternfly/react-core';
-
-class SimpleListDemo extends React.Component {
-  onSelect(selectedItem, selectedItemProps) {
-    console.log('new selection SimpleListDemo', selectedItem, selectedItemProps);
-  }
-
-  render() {
-    const items = [
-      <SimpleListItem key="item1" isActive>
-        List item 1
-      </SimpleListItem>,
-      <SimpleListItem key="item2" component="a" href="#">
-        List item 2
-      </SimpleListItem>,
-      <SimpleListItem key="item3">List item 3</SimpleListItem>
-    ];
-
-    return (
-      <SimpleList onSelect={this.onSelect} aria-label="Simple List Example">
-        {items}
-      </SimpleList>
-    );
-  }
-}
+```ts file="SimpleListBasic.tsx"
 ```
 
 ### Grouped list
 
-```js
-import React from 'react';
-import { SimpleList, SimpleListItem, SimpleListGroup } from '@patternfly/react-core';
-
-class SimpleListGroupDemo extends React.Component {
-  onSelect(selectedItem, selectedItemProps) {
-    console.log('new selection SimpleListGroupDemo', selectedItem, selectedItemProps);
-  }
-
-  render() {
-    const group1Items = [
-      <SimpleListItem key="item1" isActive>
-        List item 1
-      </SimpleListItem>,
-      <SimpleListItem key="item2" id="test 2">
-        List item 2
-      </SimpleListItem>,
-      <SimpleListItem key="item3">List item 3</SimpleListItem>,
-      <SimpleListItem key="item4">List item 4</SimpleListItem>
-    ];
-
-    const group2Items = [
-      <SimpleListItem key="item5">List item 1</SimpleListItem>,
-      <SimpleListItem key="item6" component="a" href="#">
-        List item 2
-      </SimpleListItem>,
-      <SimpleListItem key="item7" component="a" href="#">
-        List item 3
-      </SimpleListItem>,
-      <SimpleListItem key="item8">List item 4</SimpleListItem>
-    ];
-
-    return (
-      <SimpleList onSelect={this.onSelect} aria-label="Grouped List Example">
-        <SimpleListGroup title="Group 1" id="group-1">
-          {group1Items}
-        </SimpleListGroup>
-        <SimpleListGroup title="Group 2" id="group-2">
-          {group2Items}
-        </SimpleListGroup>
-      </SimpleList>
-    );
-  }
-}
+```ts file="SimpleListGrouped.tsx"
 ```
 
 ### Uncontrolled simple list
 
-```js
-import React from 'react';
-import { SimpleList, SimpleListItem } from '@patternfly/react-core';
-
-class SimpleListUncontrolledDemo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeItem: 0
-    };
-    this.onSelect = (selectedItem, selectedItemProps) => {
-      console.log('new selection SimpleListUncontrolledDemo', selectedItem, selectedItemProps);
-      this.setState({ activeItem: selectedItemProps.itemId });
-    };
-  }
-
-  render() {
-    const { activeItem } = this.state;
-    const items = [
-      <SimpleListItem key="item1" itemId={0} isActive={activeItem === 0}>
-        List item 1
-      </SimpleListItem>,
-      <SimpleListItem key="item2" itemId={1} isActive={activeItem === 1}>
-        List item 2
-      </SimpleListItem>,
-      <SimpleListItem key="item3" itemId={2} isActive={activeItem === 2}>
-        List item 3
-      </SimpleListItem>
-    ];
-
-    return (
-      <SimpleList onSelect={this.onSelect} isControlled={false} aria-label="Uncontrolled Simple List Example">
-        {items}
-      </SimpleList>
-    );
-  }
-}
+```ts file="SimpleListUncontrolled.tsx"
 ```
+
diff --git a/packages/react-core/src/components/SimpleList/examples/SimpleListBasic.tsx b/packages/react-core/src/components/SimpleList/examples/SimpleListBasic.tsx
new file mode 100644
index 00000000000..3d2707a2963
--- /dev/null
+++ b/packages/react-core/src/components/SimpleList/examples/SimpleListBasic.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { SimpleList, SimpleListItem } from '@patternfly/react-core';
+
+export const SimpleListDemo: React.FunctionComponent = () => {
+  const items = [
+    <SimpleListItem key="item1" isActive>
+      List item 1
+    </SimpleListItem>,
+    <SimpleListItem key="item2" component="a" href="#">
+      List item 2
+    </SimpleListItem>,
+    <SimpleListItem key="item3">List item 3</SimpleListItem>
+  ];
+
+  return <SimpleList aria-label="Simple List Example">{items}</SimpleList>;
+};
diff --git a/packages/react-core/src/components/SimpleList/examples/SimpleListGrouped.tsx b/packages/react-core/src/components/SimpleList/examples/SimpleListGrouped.tsx
new file mode 100644
index 00000000000..5b8d870f0ff
--- /dev/null
+++ b/packages/react-core/src/components/SimpleList/examples/SimpleListGrouped.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { SimpleList, SimpleListItem, SimpleListGroup } from '@patternfly/react-core';
+
+export const SimpleListGroupDemo: React.FunctionComponent = () => {
+  const group1Items = [
+    <SimpleListItem key="item1" isActive>
+      List item 1
+    </SimpleListItem>,
+    <SimpleListItem key="item2">List item 2</SimpleListItem>,
+    <SimpleListItem key="item3">List item 3</SimpleListItem>,
+    <SimpleListItem key="item4">List item 4</SimpleListItem>
+  ];
+
+  const group2Items = [
+    <SimpleListItem key="item5">List item 1</SimpleListItem>,
+    <SimpleListItem key="item6" component="a" href="#">
+      List item 2
+    </SimpleListItem>,
+    <SimpleListItem key="item7" component="a" href="#">
+      List item 3
+    </SimpleListItem>,
+    <SimpleListItem key="item8">List item 4</SimpleListItem>
+  ];
+
+  return (
+    <SimpleList aria-label="Grouped List Example">
+      <SimpleListGroup title="Group 1" id="group-1">
+        {group1Items}
+      </SimpleListGroup>
+      <SimpleListGroup title="Group 2" id="group-2">
+        {group2Items}
+      </SimpleListGroup>
+    </SimpleList>
+  );
+};
diff --git a/packages/react-core/src/components/SimpleList/examples/SimpleListUncontrolled.tsx b/packages/react-core/src/components/SimpleList/examples/SimpleListUncontrolled.tsx
new file mode 100644
index 00000000000..ab6f7218662
--- /dev/null
+++ b/packages/react-core/src/components/SimpleList/examples/SimpleListUncontrolled.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { SimpleList, SimpleListItem } from '@patternfly/react-core';
+
+export const SimpleListUncontrolledDemo: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const onSelect = (selectedItem: any, selectedItemProps: any) => {
+    setActiveItem(selectedItemProps.itemId);
+  };
+
+  const items = [
+    <SimpleListItem key="item1" itemId={0} isActive={activeItem === 0}>
+      List item 1
+    </SimpleListItem>,
+    <SimpleListItem key="item2" itemId={1} isActive={activeItem === 1}>
+      List item 2
+    </SimpleListItem>,
+    <SimpleListItem key="item3" itemId={2} isActive={activeItem === 2}>
+      List item 3
+    </SimpleListItem>
+  ];
+
+  return (
+    <SimpleList onSelect={onSelect} isControlled={false} aria-label="Uncontrolled Simple List Example">
+      {items}
+    </SimpleList>
+  );
+};

From 3fca0f41be4ea1610dae530531088dd0aba3e5b3 Mon Sep 17 00:00:00 2001
From: Jan Wright <jawright@redhat.com>
Date: Thu, 6 Oct 2022 17:18:16 -0400
Subject: [PATCH 2/3] updated types to match onSelect handler

---
 .../SimpleList/examples/SimpleListUncontrolled.tsx         | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/react-core/src/components/SimpleList/examples/SimpleListUncontrolled.tsx b/packages/react-core/src/components/SimpleList/examples/SimpleListUncontrolled.tsx
index ab6f7218662..10360cfad24 100644
--- a/packages/react-core/src/components/SimpleList/examples/SimpleListUncontrolled.tsx
+++ b/packages/react-core/src/components/SimpleList/examples/SimpleListUncontrolled.tsx
@@ -4,8 +4,11 @@ import { SimpleList, SimpleListItem } from '@patternfly/react-core';
 export const SimpleListUncontrolledDemo: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = React.useState(0);
 
-  const onSelect = (selectedItem: any, selectedItemProps: any) => {
-    setActiveItem(selectedItemProps.itemId);
+  const onSelect = (
+    selectedItem: React.RefObject<HTMLButtonElement> | React.RefObject<HTMLAnchorElement>,
+    _selectedItemProps
+  ) => {
+    setActiveItem(_selectedItemProps.itemId);
   };
 
   const items = [

From 7c01b036bb3990757231af4f4fc22f0fc126e816 Mon Sep 17 00:00:00 2001
From: Jan Wright <jawright@redhat.com>
Date: Mon, 17 Oct 2022 17:31:09 -0400
Subject: [PATCH 3/3] updated types to match onSelect handler and various name
 changes

---
 .../components/SimpleList/examples/SimpleListBasic.tsx    | 2 +-
 .../components/SimpleList/examples/SimpleListGrouped.tsx  | 4 ++--
 .../SimpleList/examples/SimpleListUncontrolled.tsx        | 8 ++++----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/react-core/src/components/SimpleList/examples/SimpleListBasic.tsx b/packages/react-core/src/components/SimpleList/examples/SimpleListBasic.tsx
index 3d2707a2963..130782a6d5d 100644
--- a/packages/react-core/src/components/SimpleList/examples/SimpleListBasic.tsx
+++ b/packages/react-core/src/components/SimpleList/examples/SimpleListBasic.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { SimpleList, SimpleListItem } from '@patternfly/react-core';
 
-export const SimpleListDemo: React.FunctionComponent = () => {
+export const SimpleListBasic: React.FunctionComponent = () => {
   const items = [
     <SimpleListItem key="item1" isActive>
       List item 1
diff --git a/packages/react-core/src/components/SimpleList/examples/SimpleListGrouped.tsx b/packages/react-core/src/components/SimpleList/examples/SimpleListGrouped.tsx
index 5b8d870f0ff..25e5f35d594 100644
--- a/packages/react-core/src/components/SimpleList/examples/SimpleListGrouped.tsx
+++ b/packages/react-core/src/components/SimpleList/examples/SimpleListGrouped.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { SimpleList, SimpleListItem, SimpleListGroup } from '@patternfly/react-core';
 
-export const SimpleListGroupDemo: React.FunctionComponent = () => {
+export const SimpleListGrouped: React.FunctionComponent = () => {
   const group1Items = [
     <SimpleListItem key="item1" isActive>
       List item 1
@@ -23,7 +23,7 @@ export const SimpleListGroupDemo: React.FunctionComponent = () => {
   ];
 
   return (
-    <SimpleList aria-label="Grouped List Example">
+    <SimpleList aria-label="Grouped simple list example">
       <SimpleListGroup title="Group 1" id="group-1">
         {group1Items}
       </SimpleListGroup>
diff --git a/packages/react-core/src/components/SimpleList/examples/SimpleListUncontrolled.tsx b/packages/react-core/src/components/SimpleList/examples/SimpleListUncontrolled.tsx
index 10360cfad24..63ed0cc6dac 100644
--- a/packages/react-core/src/components/SimpleList/examples/SimpleListUncontrolled.tsx
+++ b/packages/react-core/src/components/SimpleList/examples/SimpleListUncontrolled.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
-import { SimpleList, SimpleListItem } from '@patternfly/react-core';
+import { SimpleList, SimpleListItem, SimpleListItemProps } from '@patternfly/react-core';
 
-export const SimpleListUncontrolledDemo: React.FunctionComponent = () => {
+export const SimpleListUncontrolled: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = React.useState(0);
 
   const onSelect = (
     selectedItem: React.RefObject<HTMLButtonElement> | React.RefObject<HTMLAnchorElement>,
-    _selectedItemProps
+    selectedItemProps: SimpleListItemProps
   ) => {
-    setActiveItem(_selectedItemProps.itemId);
+    setActiveItem(selectedItemProps.itemId as number);
   };
 
   const items = [