From a84b9f32864799e690b774ff5dc7c73c48d615e2 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Tue, 8 Mar 2022 14:58:51 -0500
Subject: [PATCH 1/2] chore(Chip): convert examples to TypeScript/functional
 components

---
 .../src/components/Chip/examples/Chip.md      | 74 +------------------
 .../components/Chip/examples/ChipSingle.tsx   | 68 +++++++++++++++++
 2 files changed, 69 insertions(+), 73 deletions(-)
 create mode 100644 packages/react-core/src/components/Chip/examples/ChipSingle.tsx

diff --git a/packages/react-core/src/components/Chip/examples/Chip.md b/packages/react-core/src/components/Chip/examples/Chip.md
index aae5468e6d4..94c1c6cc6f2 100644
--- a/packages/react-core/src/components/Chip/examples/Chip.md
+++ b/packages/react-core/src/components/Chip/examples/Chip.md
@@ -10,77 +10,5 @@ ouia: true
 
 ### Default
 
-```js
-import React from 'react';
-import { Badge, Chip } from '@patternfly/react-core';
-
-class SingleChip extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      chip: {
-        name: 'Chip 1'
-      },
-      longchip: {
-        name: 'Really long chip that goes on and on'
-      },
-      badgechip: {
-        name: 'Chip',
-        isRead: true,
-        count: 7
-      },
-      readonlychip: {
-        name: 'Read-only chip'
-      },
-      overflowchip: {
-        name: 'Overflow chip'
-      }
-    };
-    this.deleteItem = id => {
-      this.setState({ [id]: null });
-    };
-  }
-
-  render() {
-    const { chip, longchip, badgechip, readonlychip, overflowchip } = this.state;
-    return (
-      <React.Fragment>
-        {chip && (
-          <React.Fragment>
-            <Chip key="chip1" onClick={() => this.deleteItem('chip')}>
-              {chip.name}
-            </Chip>
-            <br /> <br />
-          </React.Fragment>
-        )}
-        {longchip && (
-          <React.Fragment>
-            <Chip key="chip2" onClick={() => this.deleteItem('longchip')}>
-              {longchip.name}
-            </Chip>
-            <br /> <br />
-          </React.Fragment>
-        )}
-        {badgechip && (
-          <React.Fragment>
-            <Chip key="chip3" onClick={() => this.deleteItem('badgechip')}>
-              {badgechip.name}
-              <Badge isRead={badgechip.isRead}>{badgechip.count}</Badge>
-            </Chip>
-            <br /> <br />
-          </React.Fragment>
-        )}
-        <Chip key="chip4" onClick={() => this.deleteItem('readonlychip')} isReadOnly>
-          {readonlychip.name}
-        </Chip>
-        <br /> <br />
-        {overflowchip && (
-          <Chip key="chip5" component="button" onClick={() => this.deleteItem('overflowchip')} isOverflowChip>
-            {overflowchip.name}
-          </Chip>
-        )}
-      </React.Fragment>
-    );
-  }
-}
+```ts file='./ChipSingle.tsx'
 ```
diff --git a/packages/react-core/src/components/Chip/examples/ChipSingle.tsx b/packages/react-core/src/components/Chip/examples/ChipSingle.tsx
new file mode 100644
index 00000000000..f9ec73a8639
--- /dev/null
+++ b/packages/react-core/src/components/Chip/examples/ChipSingle.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { Badge, Chip } from '@patternfly/react-core';
+
+export const ChipSingle: React.FunctionComponent = () => {
+  const [chips, setChips] = React.useState({
+    chip: {
+      name: 'Chip 1'
+    },
+    longchip: {
+      name: 'Really long chip that goes on and on'
+    },
+    badgechip: {
+      name: 'Chip',
+      isRead: true,
+      count: 7
+    },
+    readonlychip: {
+      name: 'Read-only chip'
+    },
+    overflowchip: {
+      name: 'Overflow chip'
+    }
+  });
+
+  const deleteItem = (id: string) => {
+    setChips({ ...chips, [id]: null });
+  };
+
+  const { chip, longchip, badgechip, readonlychip, overflowchip } = chips;
+  return (
+    <React.Fragment>
+      {chip && (
+        <React.Fragment>
+          <Chip key="chip1" onClick={() => deleteItem('chip')}>
+            {chip.name}
+          </Chip>
+          <br /> <br />
+        </React.Fragment>
+      )}
+      {longchip && (
+        <React.Fragment>
+          <Chip key="chip2" onClick={() => deleteItem('longchip')}>
+            {longchip.name}
+          </Chip>
+          <br /> <br />
+        </React.Fragment>
+      )}
+      {badgechip && (
+        <React.Fragment>
+          <Chip key="chip3" onClick={() => deleteItem('badgechip')}>
+            {badgechip.name}
+            <Badge isRead={badgechip.isRead}>{badgechip.count}</Badge>
+          </Chip>
+          <br /> <br />
+        </React.Fragment>
+      )}
+      <Chip key="chip4" onClick={() => deleteItem('readonlychip')} isReadOnly>
+        {readonlychip.name}
+      </Chip>
+      <br /> <br />
+      {overflowchip && (
+        <Chip key="chip5" component="button" onClick={() => deleteItem('overflowchip')} isOverflowChip>
+          {overflowchip.name}
+        </Chip>
+      )}
+    </React.Fragment>
+  );
+};

From 2f5b24501df0b2d5fe2d92f19180c409facdb8a6 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Tue, 15 Mar 2022 08:38:38 -0400
Subject: [PATCH 2/2] Rename example file

---
 packages/react-core/src/components/Chip/examples/Chip.md        | 2 +-
 .../Chip/examples/{ChipSingle.tsx => ChipDefault.tsx}           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename packages/react-core/src/components/Chip/examples/{ChipSingle.tsx => ChipDefault.tsx} (96%)

diff --git a/packages/react-core/src/components/Chip/examples/Chip.md b/packages/react-core/src/components/Chip/examples/Chip.md
index 94c1c6cc6f2..c740435a418 100644
--- a/packages/react-core/src/components/Chip/examples/Chip.md
+++ b/packages/react-core/src/components/Chip/examples/Chip.md
@@ -10,5 +10,5 @@ ouia: true
 
 ### Default
 
-```ts file='./ChipSingle.tsx'
+```ts file='./ChipDefault.tsx'
 ```
diff --git a/packages/react-core/src/components/Chip/examples/ChipSingle.tsx b/packages/react-core/src/components/Chip/examples/ChipDefault.tsx
similarity index 96%
rename from packages/react-core/src/components/Chip/examples/ChipSingle.tsx
rename to packages/react-core/src/components/Chip/examples/ChipDefault.tsx
index f9ec73a8639..5411b30e91f 100644
--- a/packages/react-core/src/components/Chip/examples/ChipSingle.tsx
+++ b/packages/react-core/src/components/Chip/examples/ChipDefault.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Badge, Chip } from '@patternfly/react-core';
 
-export const ChipSingle: React.FunctionComponent = () => {
+export const ChipDefault: React.FunctionComponent = () => {
   const [chips, setChips] = React.useState({
     chip: {
       name: 'Chip 1'