Add id prop to Text and Box

.changeset/cyan-months-think.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Added `id` prop to `Text` and `Box`

polaris-react/src/components/Box/Box.tsx

@@ -89,6 +89,8 @@ export interface BoxProps {
   children: ReactNode;
   /** Color of children */
   color?: ColorTokenScale;
+  /** HTML id attribute */
+  id?: string;
   /** Spacing outside of container */
   maxWidth?: string;
   /** Spacing around children */
@@ -122,6 +124,7 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       borderRadiusTopRight,
       children,
       color,
+      id,
       maxWidth,
       padding,
       paddingBottom,
@@ -218,6 +221,7 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       as,
       {
         className,
+        id,
         ref,
         style: sanitizeCustomProperties(style),
       },

polaris-react/src/components/Text/Text.tsx

@@ -50,6 +50,8 @@ export interface TextProps {
   color?: Color;
   /** Adjust weight of text */
   fontWeight?: FontWeight;
+  /** HTML id attribute */
+  id?: string;
   /** Truncate text overflow with ellipsis */
   truncate?: boolean;
   /** Typographic style of text */
@@ -64,6 +66,7 @@ export const Text = ({
   children,
   color,
   fontWeight,
+  id,
   truncate = false,
   variant,
   visuallyHidden = false,
@@ -81,5 +84,9 @@ export const Text = ({
     visuallyHidden && styles.visuallyHidden,
   );
 
-  return <Component className={className}>{children}</Component>;
+  return (
+    <Component className={className} {...(id ? id : null)}>
+      {children}
+    </Component>
+  );
 };