Migrate component to TS: Tag (#20086)

* migrating Tag to TS
---------

Co-authored-by: Garrett Bear <gwhisten@gmail.com>

ui/components/component-library/tag/__snapshots__/tag.test.js.snap

@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Tag should render the label inside the tag and match snapshot 1`] = `
-<div>
-  <div
-    class="box mm-tag box--padding-right-1 box--padding-left-1 box--display-inline-block box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-default box--rounded-pill box--border-color-border-default box--border-width-1 box--border-style-solid"
-    data-testid="tag"
-  >
-    <p
-      class="mm-box mm-text mm-text--body-sm mm-box--color-text-default"
-    >
-      Imported
-    </p>
-  </div>
-</div>
-`;

ui/components/component-library/tag/__snapshots__/tag.test.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tag should render the label inside the tag and match snapshot 1`] = `
+<div>
+  <div
+    class="mm-box mm-tag mm-box--padding-right-1 mm-box--padding-left-1 mm-box--display-inline-block mm-box--justify-content-center mm-box--align-items-center mm-box--background-color-background-default mm-box--rounded-pill mm-box--border-color-border-default mm-box--border-width-1 box--border-style-solid"
+    data-testid="tag"
+  >
+    <p
+      class="mm-box mm-text mm-text--body-sm mm-box--color-text-default"
+    >
+      Imported
+    </p>
+  </div>
+</div>
+`;

ui/components/component-library/tag/index.js

@@ -1 +0,0 @@
-export { Tag } from './tag';

ui/components/component-library/tag/index.ts

@@ -0,0 +1,2 @@
+export { Tag } from './tag';
+export type { TagProps } from './tag.types';

ui/components/component-library/tag/tag.js

@@ -1,55 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import {
-  AlignItems,
-  BackgroundColor,
-  BorderColor,
-  BorderRadius,
-  DISPLAY,
-  JustifyContent,
-  TextVariant,
-} from '../../../helpers/constants/design-system';
-import Box from '../../ui/box/box';
-import { Text } from '..';
-
-export const Tag = ({ label, className, labelProps, ...props }) => {
-  return (
-    <Box
-      className={classnames('mm-tag', className)}
-      backgroundColor={BackgroundColor.backgroundDefault}
-      borderColor={BorderColor.borderDefault}
-      borderWidth={1}
-      justifyContent={JustifyContent.center}
-      alignItems={AlignItems.center}
-      paddingLeft={1}
-      paddingRight={1}
-      borderRadius={BorderRadius.pill}
-      display={DISPLAY.INLINE_BLOCK}
-      {...props}
-    >
-      <Text variant={TextVariant.bodySm} {...labelProps}>
-        {label}
-      </Text>
-    </Box>
-  );
-};
-
-Tag.propTypes = {
-  /**
-   * The text content of the Tag component
-   */
-  label: PropTypes.string,
-  /**
-   * The label props of the component. Most Text component props can be used
-   */
-  labelProps: PropTypes.object,
-  /**
-   * Additional classNames to be added to the Tag component
-   */
-  className: PropTypes.string,
-  /**
-   * Tag also accepts all props from Box
-   */
-  ...Box.propTypes,
-};

ui/components/component-library/tag/tag.stories.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import README from './README.mdx';
+import { StoryFn, Meta } from '@storybook/react';
 import { Tag } from './tag';
+import README from './README.mdx';
 
 export default {
   title: 'Components/ComponentLibrary/Tag',
-
   component: Tag,
   parameters: {
     docs: {
@@ -19,13 +19,13 @@ export default {
   args: {
     label: 'Imported',
   },
-};
+} as Meta<typeof Tag>;
 
-export const DefaultStory = (args) => <Tag {...args} />;
+export const DefaultStory: StoryFn<typeof Tag> = (args) => <Tag {...args} />;
 
 DefaultStory.storyName = 'Default';
 
-export const Label = (args) => <Tag {...args}>Anchor Element</Tag>;
+export const Label: StoryFn<typeof Tag> = (args) => <Tag {...args} />;
 
 Label.args = {
   label: 'Label Story',

ui/components/component-library/tag/tag.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import classnames from 'classnames';
+import { Text, Box } from '..';
+import type { PolymorphicRef, BoxProps } from '../box';
+
+import {
+  AlignItems,
+  BackgroundColor,
+  BorderColor,
+  BorderRadius,
+  Display,
+  JustifyContent,
+  TextVariant,
+} from '../../../helpers/constants/design-system';
+
+import { TagComponent, TagProps } from './tag.types';
+
+export const Tag: TagComponent = React.forwardRef(
+  <C extends React.ElementType = 'div'>(
+    { label, className = '', labelProps, ...props }: TagProps<C>,
+    ref: PolymorphicRef<C>,
+  ) => {
+    return (
+      <Box
+        ref={ref}
+        className={classnames('mm-tag', className)}
+        backgroundColor={BackgroundColor.backgroundDefault}
+        borderColor={BorderColor.borderDefault}
+        borderWidth={1}
+        justifyContent={JustifyContent.center}
+        alignItems={AlignItems.center}
+        paddingLeft={1}
+        paddingRight={1}
+        borderRadius={BorderRadius.pill}
+        display={Display.InlineBlock}
+        {...(props as BoxProps<C>)}
+      >
+        <Text variant={TextVariant.bodySm} {...labelProps}>
+          {label}
+        </Text>
+      </Box>
+    );
+  },
+);

ui/components/component-library/tag/tag.types.ts

@@ -0,0 +1,27 @@
+import { TextProps, ValidTagType } from '../text/text.types';
+import type {
+  StyleUtilityProps,
+  PolymorphicComponentPropWithRef,
+} from '../box';
+
+export interface TagStyleUtilityProps extends StyleUtilityProps {
+  /**
+   * The text content of the Tag component, can either be a string or ReactNode
+   */
+  label?: string | React.ReactNode;
+  /**
+   * The label props of the component. Most Text component props can be used
+   */
+  labelProps?: TextProps<ValidTagType>;
+  /**
+   * Additional classNames to be added to the Tag component
+   */
+  className?: string;
+}
+
+export type TagProps<C extends React.ElementType> =
+  PolymorphicComponentPropWithRef<C, TagStyleUtilityProps>;
+
+export type TagComponent = <C extends React.ElementType = 'div'>(
+  props: TagProps<C>,
+) => React.ReactElement | null;

ui/pages/keyring-snaps/snap-account-detail-page/__snapshots__/snap-account-detail-page.test.tsx.snap

@@ -61,7 +61,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
           />
         </div>
         <div
-          class="box mm-tag box--margin-right-1 box--padding-right-1 box--padding-left-1 box--display-inline-block box--flex-direction-row box--justify-content-center box--align-items-center box--color-info-default box--background-color-info-muted box--rounded-pill box--border-color-info-muted box--border-width-1 box--border-style-solid"
+          class="mm-box mm-tag mm-box--margin-right-1 mm-box--padding-right-1 mm-box--padding-left-1 mm-box--display-inline-block mm-box--justify-content-center mm-box--align-items-center mm-box--color-info-default mm-box--background-color-info-muted mm-box--rounded-pill mm-box--border-color-info-muted mm-box--border-width-1 box--border-style-solid"
         >
           <p
             class="mm-box mm-text mm-text--body-sm mm-box--color-info-default"
@@ -83,7 +83,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
           </p>
         </div>
         <div
-          class="box mm-tag box--padding-right-1 box--padding-left-1 box--display-inline-block box--flex-direction-row box--justify-content-center box--align-items-center box--color-info-default box--background-color-info-muted box--rounded-pill box--border-color-info-muted box--border-width-1 box--border-style-solid"
+          class="mm-box mm-tag mm-box--padding-right-1 mm-box--padding-left-1 mm-box--display-inline-block mm-box--justify-content-center mm-box--align-items-center mm-box--color-info-default mm-box--background-color-info-muted mm-box--rounded-pill mm-box--border-color-info-muted mm-box--border-width-1 box--border-style-solid"
         >
           <p
             class="mm-box mm-text mm-text--body-sm mm-box--color-info-default"
@@ -135,7 +135,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
             Tags
           </p>
           <div
-            class="box mm-tag box--margin-right-1 box--padding-right-1 box--padding-left-1 box--display-inline-block box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-default box--rounded-pill box--border-color-border-default box--border-width-1 box--border-style-solid"
+            class="mm-box mm-tag mm-box--margin-right-1 mm-box--padding-right-1 mm-box--padding-left-1 mm-box--display-inline-block mm-box--justify-content-center mm-box--align-items-center mm-box--background-color-background-default mm-box--rounded-pill mm-box--border-color-border-default mm-box--border-width-1 box--border-style-solid"
           >
             <p
               class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"

ui/pages/keyring-snaps/snap-account-detail-page/header.tsx

@@ -85,8 +85,6 @@ export const SnapDetailHeader = ({
                 labelProps={{
                   color: TextColor.textAlternative,
                 }}
-                className=""
-                height={2}
               />
             )}
           </Box>
@@ -152,7 +150,7 @@ export const SnapDetailHeader = ({
             <Tag
               color={TextColor.infoDefault}
               backgroundColor={BackgroundColor.infoMuted}
-              borderColor={BackgroundColor.infoMuted}
+              borderColor={BorderColor.infoMuted}
               label={
                 <Box
                   display={Display.Flex}
@@ -180,7 +178,7 @@ export const SnapDetailHeader = ({
               className=""
               color={TextColor.infoDefault}
               backgroundColor={BackgroundColor.infoMuted}
-              borderColor={BackgroundColor.infoMuted}
+              borderColor={BorderColor.infoMuted}
               label={
                 <Box
                   display={Display.Flex}