diff --git a/.changeset/cyan-months-think.md b/.changeset/cyan-months-think.md new file mode 100644 index 00000000000..074a4c6df5a --- /dev/null +++ b/.changeset/cyan-months-think.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Added `id` prop to `Text` and `Box` diff --git a/polaris-react/src/components/Box/Box.tsx b/polaris-react/src/components/Box/Box.tsx index 5d98eaca7da..6a8ed44dbd5 100644 --- a/polaris-react/src/components/Box/Box.tsx +++ b/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( borderRadiusTopRight, children, color, + id, maxWidth, padding, paddingBottom, @@ -218,6 +221,7 @@ export const Box = forwardRef( as, { className, + id, ref, style: sanitizeCustomProperties(style), }, diff --git a/polaris-react/src/components/Text/Text.tsx b/polaris-react/src/components/Text/Text.tsx index b61ecf4989d..99533b5ac96 100644 --- a/polaris-react/src/components/Text/Text.tsx +++ b/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 {children}; + return ( + + {children} + + ); };