label TS updates

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>

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';

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>
+    );
+  },
+);

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;