added validTag string literal union (#19258)

* added validTag string literal union

* Adding deprecation message

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
Co-authored-by: Garrett Bear <gwhisten@gmail.com>

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

@@ -1,3 +1,3 @@
 export { Text } from './text';
 export { ValidTag, TextDirection, InvisibleCharacter } from './text.types';
-export type { TextProps } from './text.types';
+export type { TextProps, ValidTagType } from './text.types';

ui/components/component-library/text/text.test.tsx

@@ -10,7 +10,7 @@ import {
   TextVariant,
   Color,
 } from '../../../helpers/constants/design-system';
-import { TextDirection, ValidTag } from './text.types';
+import { TextDirection } from './text.types';
 import { Text } from '.';
 
 describe('Text', () => {
@@ -21,20 +21,20 @@ describe('Text', () => {
   it('should render the Text with correct html elements', () => {
     const { getByText, container } = render(
       <>
-        <Text as={ValidTag.P}>p</Text>
-        <Text as={ValidTag.H1}>h1</Text>
-        <Text as={ValidTag.H2}>h2</Text>
-        <Text as={ValidTag.H3}>h3</Text>
-        <Text as={ValidTag.H4}>h4</Text>
-        <Text as={ValidTag.H5}>h5</Text>
-        <Text as={ValidTag.H6}>h6</Text>
-        <Text as={ValidTag.Span}>span</Text>
-        <Text as={ValidTag.Strong}>strong</Text>
-        <Text as={ValidTag.Em}>em</Text>
-        <Text as={ValidTag.Li}>li</Text>
-        <Text as={ValidTag.Div}>div</Text>
-        <Text as={ValidTag.Dt}>dt</Text>
-        <Text as={ValidTag.Dd}>dd</Text>
+        <Text as="p">p</Text>
+        <Text as="h1">h1</Text>
+        <Text as="h2">h2</Text>
+        <Text as="h3">h3</Text>
+        <Text as="h4">h4</Text>
+        <Text as="h5">h5</Text>
+        <Text as="h6">h6</Text>
+        <Text as="span">span</Text>
+        <Text as="strong">strong</Text>
+        <Text as="em">em</Text>
+        <Text as="li">li</Text>
+        <Text as="div">div</Text>
+        <Text as="dt">dt</Text>
+        <Text as="dd">dd</Text>
       </>,
     );
     expect(container.querySelector('p')).toBeDefined();

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

@@ -6,23 +6,23 @@ import {
   TextVariant,
   TextColor,
 } from '../../../helpers/constants/design-system';
-import { TextProps, ValidTag } from './text.types';
+import { TextProps } from './text.types';
 
 const getTextElementDefault = (variant: TextVariant) => {
   switch (variant) {
     case TextVariant.displayMd:
-      return ValidTag.H1;
+      return 'h1';
     case TextVariant.headingLg:
-      return ValidTag.H2;
+      return 'h2';
     case TextVariant.headingMd:
-      return ValidTag.H3;
+      return 'h3';
     case TextVariant.headingSm:
-      return ValidTag.H4;
+      return 'h4';
     case TextVariant.inherit:
-      return ValidTag.Span;
+      return 'span';
     // TextVariant.bodyLgMedium, TextVariant.bodyMd, TextVariant.bodyMdBold, TextVariant.bodySm, TextVariant.bodySmBold, TextVariant.bodyXs use default 'p' tag
     default:
-      return ValidTag.P;
+      return 'p';
   }
 };
 

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

@@ -23,6 +23,14 @@ export enum TextDirection {
  */
 export const InvisibleCharacter = '\u200B';
 
+/**
+ * @deprecated ValidTag enum is deprecated in favour of a union of strings.
+ * To change the root html element tag of the Text component, use the `as` prop and string value.
+ * e.g. `<Text as="h1">Hello World</Text>`
+ *
+ * Contribute to replacing the enum with a union of string by submitting a PR
+ */
+
 export enum ValidTag {
   Dd = 'dd',
   Div = 'div',
@@ -44,11 +52,31 @@ export enum ValidTag {
   Header = 'header',
 }
 
+export type ValidTagType =
+  | 'dd'
+  | 'div'
+  | 'dt'
+  | 'em'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'li'
+  | 'p'
+  | 'span'
+  | 'strong'
+  | 'ul'
+  | 'label'
+  | 'input'
+  | 'header';
+
 export interface TextProps extends BoxProps {
   /**
    * The text content of the Text component
    */
-  children: React.ReactNode;
+  children?: React.ReactNode;
   /**
    * The variation of font styles including sizes and weights of the Text component
    * Possible values:
@@ -107,7 +135,7 @@ export interface TextProps extends BoxProps {
   /**
    * Changes the root html element tag of the Text component.
    */
-  as?: ValidTag;
+  as?: ValidTagType;
   /**
    * Additional className to assign the Text component
    */