From 14c63aebd13b7a5b25ac43a27126fb6e853071a3 Mon Sep 17 00:00:00 2001
From: georgewrmarshall <george.marshall@consensys.net>
Date: Fri, 19 May 2023 07:38:11 +1200
Subject: [PATCH 1/2] Migrating Label component to TS

---
 .../label/__snapshots__/label.test.tsx.snap   | 11 ++++++
 .../component-library/label/index.js          |  1 -
 .../component-library/label/index.ts          |  2 ++
 .../{label.stories.js => label.stories.tsx}   | 25 ++++++-------
 .../label/{label.test.js => label.test.tsx}   |  0
 .../component-library/label/label.tsx         | 35 +++++++++++++++++++
 .../component-library/label/label.types.ts    | 16 +++++++++
 7 files changed, 77 insertions(+), 13 deletions(-)
 create mode 100644 ui/components/component-library/label/__snapshots__/label.test.tsx.snap
 delete mode 100644 ui/components/component-library/label/index.js
 create mode 100644 ui/components/component-library/label/index.ts
 rename ui/components/component-library/label/{label.stories.js => label.stories.tsx} (70%)
 rename ui/components/component-library/label/{label.test.js => label.test.tsx} (100%)
 create mode 100644 ui/components/component-library/label/label.tsx
 create mode 100644 ui/components/component-library/label/label.types.ts

diff --git a/ui/components/component-library/label/__snapshots__/label.test.tsx.snap b/ui/components/component-library/label/__snapshots__/label.test.tsx.snap
new file mode 100644
index 000000000000..f72fcd1f742d
--- /dev/null
+++ b/ui/components/component-library/label/__snapshots__/label.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`label should render text inside the label 1`] = `
+<div>
+  <label
+    class="box mm-text mm-label mm-text--body-md mm-text--font-weight-bold box--display-inline-flex box--flex-direction-row box--align-items-center box--color-text-default"
+  >
+    label
+  </label>
+</div>
+`;
diff --git a/ui/components/component-library/label/index.js b/ui/components/component-library/label/index.js
deleted file mode 100644
index f28365d90fa8..000000000000
--- a/ui/components/component-library/label/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { Label } from './label';
diff --git a/ui/components/component-library/label/index.ts b/ui/components/component-library/label/index.ts
new file mode 100644
index 000000000000..c2db3927398e
--- /dev/null
+++ b/ui/components/component-library/label/index.ts
@@ -0,0 +1,2 @@
+export { Label } from './label';
+export type { LabelProps } from './label.types';
diff --git a/ui/components/component-library/label/label.stories.js b/ui/components/component-library/label/label.stories.tsx
similarity index 70%
rename from ui/components/component-library/label/label.stories.js
rename to ui/components/component-library/label/label.stories.tsx
index 9b6554737cf3..d653db4a1690 100644
--- a/ui/components/component-library/label/label.stories.js
+++ b/ui/components/component-library/label/label.stories.tsx
@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import {
-  DISPLAY,
-  FLEX_DIRECTION,
+  Display,
+  FlexDirection,
   AlignItems,
   IconColor,
 } from '../../../helpers/constants/design-system';
@@ -37,21 +38,21 @@ export default {
   args: {
     children: 'Label',
   },
-};
+} as ComponentMeta<typeof Label>;
 
-const Template = (args) => <Label {...args} />;
+const Template: ComponentStory<typeof Label> = (args) => <Label {...args} />;
 
 export const DefaultStory = Template.bind({});
 DefaultStory.storyName = 'Default';
 
-export const Children = (args) => (
+export const Children: ComponentStory<typeof Label> = (args) => (
   <Box
-    display={DISPLAY.INLINE_FLEX}
-    flexDirection={FLEX_DIRECTION.COLUMN}
+    display={Display.InlineFlex}
+    flexDirection={FlexDirection.Column}
     gap={2}
   >
     <Label {...args}>Plain text</Label>
-    <Label {...args} display={DISPLAY.FLEX} alignItems={AlignItems.flexStart}>
+    <Label {...args} display={Display.Flex} alignItems={AlignItems.flexStart}>
       Text and icon
       <Icon
         color={IconColor.iconAlternative}
@@ -61,8 +62,8 @@ export const Children = (args) => (
     </Label>
     <Label
       {...args}
-      display={DISPLAY.INLINE_FLEX}
-      flexDirection={FLEX_DIRECTION.COLUMN}
+      display={Display.InlineFlex}
+      flexDirection={FlexDirection.Column}
       alignItems={AlignItems.flexStart}
     >
       Label that wraps an input
@@ -71,13 +72,13 @@ export const Children = (args) => (
   </Box>
 );
 
-export const HtmlFor = (args) => {
+export const HtmlFor: ComponentStory<typeof Label> = (args) => {
   const [value, setValue] = useState('');
   const handleOnChange = (e) => {
     setValue(e.target.value);
   };
   return (
-    <Box display={DISPLAY.INLINE_FLEX} flexDirection={FLEX_DIRECTION.COLUMN}>
+    <Box display={Display.InlineFlex} flexDirection={FlexDirection.Column}>
       <Label {...args} />
       <TextField
         id="add-network"
diff --git a/ui/components/component-library/label/label.test.js b/ui/components/component-library/label/label.test.tsx
similarity index 100%
rename from ui/components/component-library/label/label.test.js
rename to ui/components/component-library/label/label.test.tsx
diff --git a/ui/components/component-library/label/label.tsx b/ui/components/component-library/label/label.tsx
new file mode 100644
index 000000000000..ec4b751dd3ee
--- /dev/null
+++ b/ui/components/component-library/label/label.tsx
@@ -0,0 +1,35 @@
+import React, { Ref, forwardRef } from 'react';
+import classnames from 'classnames';
+import { Text, ValidTag } from '../text';
+import {
+  FontWeight,
+  TextVariant,
+  Display,
+  AlignItems,
+} from '../../../helpers/constants/design-system';
+import { LabelProps } from './label.types';
+
+export const Label = forwardRef(function Label(
+  { htmlFor, className, children, ...props }: LabelProps,
+  ref: Ref<HTMLElement>,
+) {
+  return (
+    <Text
+      className={classnames(
+        'mm-label',
+        { 'mm-label--html-for': Boolean(htmlFor) },
+        className ?? '',
+      )}
+      as={ValidTag.Label}
+      htmlFor={htmlFor}
+      variant={TextVariant.bodyMd}
+      fontWeight={FontWeight.Bold}
+      display={Display.InlineFlex}
+      alignItems={AlignItems.center}
+      ref={ref}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+});
diff --git a/ui/components/component-library/label/label.types.ts b/ui/components/component-library/label/label.types.ts
new file mode 100644
index 000000000000..96065e2d0d71
--- /dev/null
+++ b/ui/components/component-library/label/label.types.ts
@@ -0,0 +1,16 @@
+import { TextProps } from '../text';
+
+export interface LabelProps extends TextProps {
+  /**
+   * The id of the input associated with the label
+   */
+  htmlFor?: string;
+  /**
+   * Additional classNames to assign to the Label component
+   */
+  className?: string;
+  /**
+   * The content of the Label component
+   */
+  children: string | React.ReactNode;
+}

From a96c72621a6c35927f0683d8701c1103883ca9e8 Mon Sep 17 00:00:00 2001
From: garrettbear <gwhisten@gmail.com>
Date: Thu, 20 Jul 2023 13:46:05 -0700
Subject: [PATCH 2/2] label TS updates

---
 .../label/__snapshots__/label.test.js.snap    | 11 ----
 .../label/__snapshots__/label.test.tsx.snap   |  2 +-
 .../component-library/label/index.ts          |  2 +-
 .../component-library/label/label.js          | 44 --------------
 .../component-library/label/label.tsx         | 58 ++++++++++---------
 .../component-library/label/label.types.ts    | 12 +++-
 6 files changed, 43 insertions(+), 86 deletions(-)
 delete mode 100644 ui/components/component-library/label/__snapshots__/label.test.js.snap
 delete mode 100644 ui/components/component-library/label/label.js

diff --git a/ui/components/component-library/label/__snapshots__/label.test.js.snap b/ui/components/component-library/label/__snapshots__/label.test.js.snap
deleted file mode 100644
index e2d20a61feff..000000000000
--- a/ui/components/component-library/label/__snapshots__/label.test.js.snap
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`label should render text inside the label 1`] = `
-<div>
-  <label
-    class="mm-box mm-text mm-label mm-text--body-md mm-text--font-weight-medium mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
-  >
-    label
-  </label>
-</div>
-`;
diff --git a/ui/components/component-library/label/__snapshots__/label.test.tsx.snap b/ui/components/component-library/label/__snapshots__/label.test.tsx.snap
index f72fcd1f742d..e2d20a61feff 100644
--- a/ui/components/component-library/label/__snapshots__/label.test.tsx.snap
+++ b/ui/components/component-library/label/__snapshots__/label.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`label should render text inside the label 1`] = `
 <div>
   <label
-    class="box mm-text mm-label mm-text--body-md mm-text--font-weight-bold box--display-inline-flex box--flex-direction-row box--align-items-center box--color-text-default"
+    class="mm-box mm-text mm-label mm-text--body-md mm-text--font-weight-medium mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
   >
     label
   </label>
diff --git a/ui/components/component-library/label/index.ts b/ui/components/component-library/label/index.ts
index c2db3927398e..1a984b62cd71 100644
--- a/ui/components/component-library/label/index.ts
+++ b/ui/components/component-library/label/index.ts
@@ -1,2 +1,2 @@
 export { Label } from './label';
-export type { LabelProps } from './label.types';
+export type { LabelComponent, LabelProps } from './label.types';
diff --git a/ui/components/component-library/label/label.js b/ui/components/component-library/label/label.js
deleted file mode 100644
index 7eca591b224e..000000000000
--- a/ui/components/component-library/label/label.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import {
-  FontWeight,
-  TextVariant,
-  Display,
-  AlignItems,
-} from '../../../helpers/constants/design-system';
-import { Text } from '..';
-
-export const Label = ({ htmlFor, className, children, ...props }) => (
-  <Text
-    className={classnames(
-      'mm-label',
-      { 'mm-label--html-for': htmlFor },
-      className,
-    )}
-    as="label"
-    htmlFor={htmlFor}
-    variant={TextVariant.bodyMd}
-    fontWeight={FontWeight.Medium}
-    display={Display.InlineFlex}
-    alignItems={AlignItems.center}
-    {...props}
-  >
-    {children}
-  </Text>
-);
-
-Label.propTypes = {
-  /**
-   * The content of the label
-   */
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  /**
-   * The id of the input associated with the label
-   */
-  htmlFor: PropTypes.string,
-  /**
-   * Additional classNames to be added to the label component
-   */
-  className: PropTypes.string,
-};
diff --git a/ui/components/component-library/label/label.tsx b/ui/components/component-library/label/label.tsx
index ec4b751dd3ee..4b7cd6e3a1b8 100644
--- a/ui/components/component-library/label/label.tsx
+++ b/ui/components/component-library/label/label.tsx
@@ -1,35 +1,39 @@
-import React, { Ref, forwardRef } from 'react';
+import React from 'react';
 import classnames from 'classnames';
-import { Text, ValidTag } from '../text';
+import { Text } from '../text';
+import type { TextProps } from '../text';
 import {
   FontWeight,
   TextVariant,
   Display,
   AlignItems,
 } from '../../../helpers/constants/design-system';
-import { LabelProps } from './label.types';
+import type { PolymorphicRef } from '../box';
+import { LabelProps, LabelComponent } from './label.types';
 
-export const Label = forwardRef(function Label(
-  { htmlFor, className, children, ...props }: LabelProps,
-  ref: Ref<HTMLElement>,
-) {
-  return (
-    <Text
-      className={classnames(
-        'mm-label',
-        { 'mm-label--html-for': Boolean(htmlFor) },
-        className ?? '',
-      )}
-      as={ValidTag.Label}
-      htmlFor={htmlFor}
-      variant={TextVariant.bodyMd}
-      fontWeight={FontWeight.Bold}
-      display={Display.InlineFlex}
-      alignItems={AlignItems.center}
-      ref={ref}
-      {...props}
-    >
-      {children}
-    </Text>
-  );
-});
+export const Label: LabelComponent = React.forwardRef(
+  <C extends React.ElementType = 'label'>(
+    { htmlFor, className, children, ...props }: LabelProps<C>,
+    ref?: PolymorphicRef<C>,
+  ) => {
+    return (
+      <Text
+        className={classnames(
+          'mm-label',
+          { 'mm-label--html-for': Boolean(htmlFor) },
+          className ?? '',
+        )}
+        as="label"
+        htmlFor={htmlFor}
+        variant={TextVariant.bodyMd}
+        fontWeight={FontWeight.Medium}
+        display={Display.InlineFlex}
+        alignItems={AlignItems.center}
+        ref={ref}
+        {...(props as TextProps<C>)}
+      >
+        {children}
+      </Text>
+    );
+  },
+);
diff --git a/ui/components/component-library/label/label.types.ts b/ui/components/component-library/label/label.types.ts
index 96065e2d0d71..8f897e4450b7 100644
--- a/ui/components/component-library/label/label.types.ts
+++ b/ui/components/component-library/label/label.types.ts
@@ -1,6 +1,7 @@
-import { TextProps } from '../text';
+import type { PolymorphicComponentPropWithRef } from '../box';
+import type { TextStyleUtilityProps } from '../text';
 
-export interface LabelProps extends TextProps {
+export interface LabelStyleUtilityProps extends TextStyleUtilityProps {
   /**
    * The id of the input associated with the label
    */
@@ -14,3 +15,10 @@ export interface LabelProps extends TextProps {
    */
   children: string | React.ReactNode;
 }
+
+export type LabelProps<C extends React.ElementType> =
+  PolymorphicComponentPropWithRef<C, LabelStyleUtilityProps>;
+
+export type LabelComponent = <C extends React.ElementType = 'label'>(
+  props: LabelProps<C>,
+) => React.ReactElement | null;