From ffc5111e3e433de9fc74911fd697c82bf85e4ee7 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Tue, 14 Jun 2022 16:24:36 -0400
Subject: [PATCH 1/2] label group TS conversion

---
 .../LabelGroup/examples/LabelGroup.md         | 178 +-----------------
 .../LabelGroup/examples/LabelGroupBasic.tsx   |  15 ++
 .../examples/LabelGroupCategory.tsx           |  15 ++
 .../examples/LabelGroupCategoryRemovable.tsx  |  24 +++
 .../examples/LabelGroupEditableLabels.tsx     |  53 ++++++
 .../examples/LabelGroupOverflow.tsx           |  24 +++
 ...GroupVerticalCategoryOverflowRemovable.tsx |  24 +++
 7 files changed, 161 insertions(+), 172 deletions(-)
 create mode 100644 packages/react-core/src/components/LabelGroup/examples/LabelGroupBasic.tsx
 create mode 100644 packages/react-core/src/components/LabelGroup/examples/LabelGroupCategory.tsx
 create mode 100644 packages/react-core/src/components/LabelGroup/examples/LabelGroupCategoryRemovable.tsx
 create mode 100644 packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableLabels.tsx
 create mode 100644 packages/react-core/src/components/LabelGroup/examples/LabelGroupOverflow.tsx
 create mode 100644 packages/react-core/src/components/LabelGroup/examples/LabelGroupVerticalCategoryOverflowRemovable.tsx

diff --git a/packages/react-core/src/components/LabelGroup/examples/LabelGroup.md b/packages/react-core/src/components/LabelGroup/examples/LabelGroup.md
index ced45c111c7..788c751620a 100644
--- a/packages/react-core/src/components/LabelGroup/examples/LabelGroup.md
+++ b/packages/react-core/src/components/LabelGroup/examples/LabelGroup.md
@@ -13,196 +13,30 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-i
 
 ### Basic
 
-```js
-import React from 'react';
-import { Label, LabelGroup } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-
-<LabelGroup>
-  <Label icon={<InfoCircleIcon />}>Label 1</Label>
-  <Label icon={<InfoCircleIcon />} color="blue">
-    Label 2
-  </Label>
-  <Label icon={<InfoCircleIcon />} color="green">
-    Label 3
-  </Label>
-</LabelGroup>;
+```ts file="LabelGroupBasic.tsx"
 ```
 
 ### Overflow
 
-```js
-import React from 'react';
-import { Label, LabelGroup } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-
-<LabelGroup>
-  <Label icon={<InfoCircleIcon />}>Label 1</Label>
-  <Label icon={<InfoCircleIcon />} color="blue">
-    Label 2
-  </Label>
-  <Label icon={<InfoCircleIcon />} color="green">
-    Label 3
-  </Label>
-  <Label icon={<InfoCircleIcon />} color="orange">
-    Label 4
-  </Label>
-  <Label icon={<InfoCircleIcon />} color="red">
-    Label 5
-  </Label>
-  <Label icon={<InfoCircleIcon />} color="purple">
-    Label 6
-  </Label>
-</LabelGroup>;
+```ts file="LabelGroupOverflow.tsx"
 ```
 
 ### Category
 
-```js
-import React from 'react';
-import { Label, LabelGroup } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-
-<LabelGroup categoryName="Group label">
-  <Label icon={<InfoCircleIcon />}>Label 1</Label>
-  <Label icon={<InfoCircleIcon />} color="blue">
-    Label 2
-  </Label>
-  <Label icon={<InfoCircleIcon />} color="green">
-    Label 3
-  </Label>
-</LabelGroup>;
+```ts file="LabelGroupCategory.tsx"
 ```
 
 ### Category removable
 
-```js
-import React from 'react';
-import { Label, LabelGroup } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-
-CategoryLabelGroupRemovable = () => {
-  const [labels, setLabels] = React.useState([
-    ['Label 1', 'grey'],
-    ['Label 2', 'blue'],
-    ['Label 3', 'green'],
-    ['Label 4', 'orange'],
-    ['Label 5', 'red']
-  ]);
-  const deleteCategory = () => setLabels([]);
-
-  return (
-    <LabelGroup categoryName="Group label" isClosable onClick={deleteCategory}>
-      {labels.map(([labelText, labelColor]) => (
-        <Label icon={<InfoCircleIcon />} color={labelColor} key={labelText}>
-          {labelText}
-        </Label>
-      ))}
-    </LabelGroup>
-  );
-};
+```ts file="LabelGroupCategoryRemovable.tsx"
 ```
 
 ### Vertical category overflow removable
 
-```js
-import React from 'react';
-import { Label, LabelGroup } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-
-VerticalCategoryLabelGroupOverflowRemovable = () => {
-  const [labels, setLabels] = React.useState([
-    ['Label 1', 'grey'],
-    ['Label 2', 'blue'],
-    ['Label 3', 'green'],
-    ['Label 4', 'orange'],
-    ['Label 5', 'red']
-  ]);
-  const deleteCategory = () => setLabels([]);
-
-  return (
-    <LabelGroup categoryName="Group label with a very long name" isVertical isClosable onClick={deleteCategory}>
-      {labels.map(([labelText, labelColor]) => (
-        <Label icon={<InfoCircleIcon />} color={labelColor} key={labelText}>
-          {labelText}
-        </Label>
-      ))}
-    </LabelGroup>
-  );
-};
+```ts file="LabelGroupVerticalCategoryOverflowRemovable.tsx"
 ```
 
 ### Editable labels
 
-```js isBeta
-import React from 'react';
-import { LabelGroup, Label, TextArea } from '@patternfly/react-core';
-
-class EditableLabelGroup extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      label1: 'Editable label',
-      label2: 'Editable label 2',
-      label3: 'Editable label 3'
-    };
-    this.onEditCancel = (prevText, label) => {
-      this.setState({
-        [label]: prevText
-      });
-    };
-    this.onEditComplete = (newText, label) => {
-      this.setState({
-        [label]: newText
-      });
-    };
-  }
-
-  render() {
-    return (
-      <LabelGroup numLabels={5} isEditable>
-        <Label
-          color="blue"
-          onClose={Function.prototype}
-          onEditCancel={prevText => this.onEditCancel(prevText, 'label1')}
-          onEditComplete={newText => this.onEditComplete(newText, 'label1')}
-          isEditable
-          editableProps={{
-            'aria-label': 'Editable text',
-            id: 'editable-label-1'
-          }}
-        >
-          {this.state.label1}
-        </Label>
-        <Label color="green">Static label</Label>
-        <Label
-          color="blue"
-          onClose={Function.prototype}
-          onEditCancel={prevText => this.onEditCancel(prevText, 'label2')}
-          onEditComplete={newText => this.onEditComplete(newText, 'label2')}
-          isEditable
-          editableProps={{
-            'aria-label': 'Editable text 2',
-            id: 'editable-label-2'
-          }}
-        >
-          {this.state.label2}
-        </Label>
-        <Label
-          color="blue"
-          onClose={Function.prototype}
-          onEditCancel={prevText => this.onEditCancel(prevText, 'label3')}
-          onEditComplete={newText => this.onEditComplete(newText, 'label3')}
-          isEditable
-          editableProps={{
-            'aria-label': 'Editable text 3',
-            id: 'editable-label-3'
-          }}
-        >
-          {this.state.label3}
-        </Label>
-      </LabelGroup>
-    );
-  }
-}
+```ts file="LabelGroupEditableLabels.tsx" isBeta
 ```
diff --git a/packages/react-core/src/components/LabelGroup/examples/LabelGroupBasic.tsx b/packages/react-core/src/components/LabelGroup/examples/LabelGroupBasic.tsx
new file mode 100644
index 00000000000..8e0faf8e016
--- /dev/null
+++ b/packages/react-core/src/components/LabelGroup/examples/LabelGroupBasic.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Label, LabelGroup } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelGroupBasic: React.FunctionComponent = () => (
+  <LabelGroup>
+    <Label icon={<InfoCircleIcon />}>Label 1</Label>
+    <Label icon={<InfoCircleIcon />} color="blue">
+      Label 2
+    </Label>
+    <Label icon={<InfoCircleIcon />} color="green">
+      Label 3
+    </Label>
+  </LabelGroup>
+);
diff --git a/packages/react-core/src/components/LabelGroup/examples/LabelGroupCategory.tsx b/packages/react-core/src/components/LabelGroup/examples/LabelGroupCategory.tsx
new file mode 100644
index 00000000000..b1565bfc034
--- /dev/null
+++ b/packages/react-core/src/components/LabelGroup/examples/LabelGroupCategory.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Label, LabelGroup } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelCategory: React.FunctionComponent = () => (
+  <LabelGroup categoryName="Group label">
+    <Label icon={<InfoCircleIcon />}>Label 1</Label>
+    <Label icon={<InfoCircleIcon />} color="blue">
+      Label 2
+    </Label>
+    <Label icon={<InfoCircleIcon />} color="green">
+      Label 3
+    </Label>
+  </LabelGroup>
+);
diff --git a/packages/react-core/src/components/LabelGroup/examples/LabelGroupCategoryRemovable.tsx b/packages/react-core/src/components/LabelGroup/examples/LabelGroupCategoryRemovable.tsx
new file mode 100644
index 00000000000..6859b4f7340
--- /dev/null
+++ b/packages/react-core/src/components/LabelGroup/examples/LabelGroupCategoryRemovable.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Label, LabelGroup, LabelProps } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const CategoryLabelGroupRemovable: React.FunctionComponent = () => {
+  const [labels, setLabels] = React.useState([
+    ['Label 1', 'grey'],
+    ['Label 2', 'blue'],
+    ['Label 3', 'green'],
+    ['Label 4', 'orange'],
+    ['Label 5', 'red']
+  ]);
+  const deleteCategory = () => setLabels([]);
+
+  return (
+    <LabelGroup categoryName="Group label" isClosable onClick={deleteCategory}>
+      {labels.map(([labelText, labelColor]) => (
+        <Label icon={<InfoCircleIcon />} color={labelColor as LabelProps['color']} key={labelText}>
+          {labelText}
+        </Label>
+      ))}
+    </LabelGroup>
+  );
+};
diff --git a/packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableLabels.tsx b/packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableLabels.tsx
new file mode 100644
index 00000000000..c9fbcb7a0cc
--- /dev/null
+++ b/packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableLabels.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { LabelGroup, Label } from '@patternfly/react-core';
+
+export const EditableLabelGroup: React.FunctionComponent = () => {
+  const [label1, setLabel1] = React.useState('Editable label');
+  const [label2, setLabel2] = React.useState('Editable label 2');
+  const [label3, setLabel3] = React.useState('Editable label 3');
+
+  return (
+    <LabelGroup numLabels={5} isEditable>
+      <Label
+        color="blue"
+        onClose={() => Function.prototype}
+        onEditCancel={prevText => setLabel1(prevText)}
+        onEditComplete={newText => setLabel1(newText)}
+        isEditable
+        editableProps={{
+          'aria-label': 'Editable text',
+          id: 'editable-label-1'
+        }}
+      >
+        {label1}
+      </Label>
+      <Label color="green">Static label</Label>
+      <Label
+        color="blue"
+        onClose={() => Function.prototype}
+        onEditCancel={prevText => setLabel2(prevText)}
+        onEditComplete={newText => setLabel2(newText)}
+        isEditable
+        editableProps={{
+          'aria-label': 'Editable text 2',
+          id: 'editable-label-2'
+        }}
+      >
+        {label2}
+      </Label>
+      <Label
+        color="blue"
+        onClose={() => Function.prototype}
+        onEditCancel={prevText => setLabel3(prevText)}
+        onEditComplete={newText => setLabel3(newText)}
+        isEditable
+        editableProps={{
+          'aria-label': 'Editable text 3',
+          id: 'editable-label-3'
+        }}
+      >
+        {label3}
+      </Label>
+    </LabelGroup>
+  );
+};
diff --git a/packages/react-core/src/components/LabelGroup/examples/LabelGroupOverflow.tsx b/packages/react-core/src/components/LabelGroup/examples/LabelGroupOverflow.tsx
new file mode 100644
index 00000000000..dcfeeaf5b4d
--- /dev/null
+++ b/packages/react-core/src/components/LabelGroup/examples/LabelGroupOverflow.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Label, LabelGroup } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelGroupOverflow: React.FunctionComponent = () => (
+  <LabelGroup>
+    <Label icon={<InfoCircleIcon />}>Label 1</Label>
+    <Label icon={<InfoCircleIcon />} color="blue">
+      Label 2
+    </Label>
+    <Label icon={<InfoCircleIcon />} color="green">
+      Label 3
+    </Label>
+    <Label icon={<InfoCircleIcon />} color="orange">
+      Label 4
+    </Label>
+    <Label icon={<InfoCircleIcon />} color="red">
+      Label 5
+    </Label>
+    <Label icon={<InfoCircleIcon />} color="purple">
+      Label 6
+    </Label>
+  </LabelGroup>
+);
diff --git a/packages/react-core/src/components/LabelGroup/examples/LabelGroupVerticalCategoryOverflowRemovable.tsx b/packages/react-core/src/components/LabelGroup/examples/LabelGroupVerticalCategoryOverflowRemovable.tsx
new file mode 100644
index 00000000000..85f650f4e63
--- /dev/null
+++ b/packages/react-core/src/components/LabelGroup/examples/LabelGroupVerticalCategoryOverflowRemovable.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Label, LabelGroup, LabelProps } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const VerticalCategoryLabelGroupOverflowRemovable: React.FunctionComponent = () => {
+  const [labels, setLabels] = React.useState([
+    ['Label 1', 'grey'],
+    ['Label 2', 'blue'],
+    ['Label 3', 'green'],
+    ['Label 4', 'orange'],
+    ['Label 5', 'red']
+  ]);
+  const deleteCategory = () => setLabels([]);
+
+  return (
+    <LabelGroup categoryName="Group label with a very long name" isVertical isClosable onClick={deleteCategory}>
+      {labels.map(([labelText, labelColor]) => (
+        <Label icon={<InfoCircleIcon />} color={labelColor as LabelProps['color']} key={labelText}>
+          {labelText}
+        </Label>
+      ))}
+    </LabelGroup>
+  );
+};

From 4df7e0f9fc4bec461cc31d6c0301cbba6b1244c6 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Wed, 15 Jun 2022 10:22:23 -0400
Subject: [PATCH 2/2] function names

---
 .../src/components/LabelGroup/examples/LabelGroupCategory.tsx   | 2 +-
 .../LabelGroup/examples/LabelGroupCategoryRemovable.tsx         | 2 +-
 .../components/LabelGroup/examples/LabelGroupEditableLabels.tsx | 2 +-
 .../examples/LabelGroupVerticalCategoryOverflowRemovable.tsx    | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-core/src/components/LabelGroup/examples/LabelGroupCategory.tsx b/packages/react-core/src/components/LabelGroup/examples/LabelGroupCategory.tsx
index b1565bfc034..205999b4a69 100644
--- a/packages/react-core/src/components/LabelGroup/examples/LabelGroupCategory.tsx
+++ b/packages/react-core/src/components/LabelGroup/examples/LabelGroupCategory.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Label, LabelGroup } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 
-export const LabelCategory: React.FunctionComponent = () => (
+export const LabelGroupCategory: React.FunctionComponent = () => (
   <LabelGroup categoryName="Group label">
     <Label icon={<InfoCircleIcon />}>Label 1</Label>
     <Label icon={<InfoCircleIcon />} color="blue">
diff --git a/packages/react-core/src/components/LabelGroup/examples/LabelGroupCategoryRemovable.tsx b/packages/react-core/src/components/LabelGroup/examples/LabelGroupCategoryRemovable.tsx
index 6859b4f7340..31e12221da3 100644
--- a/packages/react-core/src/components/LabelGroup/examples/LabelGroupCategoryRemovable.tsx
+++ b/packages/react-core/src/components/LabelGroup/examples/LabelGroupCategoryRemovable.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Label, LabelGroup, LabelProps } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 
-export const CategoryLabelGroupRemovable: React.FunctionComponent = () => {
+export const LabelGroupCategoryRemovable: React.FunctionComponent = () => {
   const [labels, setLabels] = React.useState([
     ['Label 1', 'grey'],
     ['Label 2', 'blue'],
diff --git a/packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableLabels.tsx b/packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableLabels.tsx
index c9fbcb7a0cc..c9f59089869 100644
--- a/packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableLabels.tsx
+++ b/packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableLabels.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { LabelGroup, Label } from '@patternfly/react-core';
 
-export const EditableLabelGroup: React.FunctionComponent = () => {
+export const LabelGroupEditableLabels: React.FunctionComponent = () => {
   const [label1, setLabel1] = React.useState('Editable label');
   const [label2, setLabel2] = React.useState('Editable label 2');
   const [label3, setLabel3] = React.useState('Editable label 3');
diff --git a/packages/react-core/src/components/LabelGroup/examples/LabelGroupVerticalCategoryOverflowRemovable.tsx b/packages/react-core/src/components/LabelGroup/examples/LabelGroupVerticalCategoryOverflowRemovable.tsx
index 85f650f4e63..25f5cb33124 100644
--- a/packages/react-core/src/components/LabelGroup/examples/LabelGroupVerticalCategoryOverflowRemovable.tsx
+++ b/packages/react-core/src/components/LabelGroup/examples/LabelGroupVerticalCategoryOverflowRemovable.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Label, LabelGroup, LabelProps } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 
-export const VerticalCategoryLabelGroupOverflowRemovable: React.FunctionComponent = () => {
+export const LabelGroupVerticalCategoryOverflowRemovable: React.FunctionComponent = () => {
   const [labels, setLabels] = React.useState([
     ['Label 1', 'grey'],
     ['Label 2', 'blue'],