From bd29bf08049dbe5f5fb99024bc73f9135fa7ddb5 Mon Sep 17 00:00:00 2001 From: aveline Date: Thu, 6 Oct 2022 10:08:07 -0700 Subject: [PATCH 1/4] Add `id` and `breakWord` props to `Text` --- polaris-react/src/components/Text/Text.scss | 6 ++++++ polaris-react/src/components/Text/Text.tsx | 13 ++++++++++++- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/polaris-react/src/components/Text/Text.scss b/polaris-react/src/components/Text/Text.scss index e7f8029df67..8a293e134a6 100644 --- a/polaris-react/src/components/Text/Text.scss +++ b/polaris-react/src/components/Text/Text.scss @@ -121,3 +121,9 @@ font-size: var(--p-font-size-200); line-height: var(--p-font-line-height-2); } + +.break { + word-wrap: break-word; + word-break: break-word; + overflow-wrap: break-word; +} diff --git a/polaris-react/src/components/Text/Text.tsx b/polaris-react/src/components/Text/Text.tsx index b61ecf4989d..183079fcfd2 100644 --- a/polaris-react/src/components/Text/Text.tsx +++ b/polaris-react/src/components/Text/Text.tsx @@ -44,12 +44,16 @@ export interface TextProps { alignment?: Alignment; /** The element type */ as: Element; + /** Prevent text from overflowing */ + breakWord?: boolean; /** Text to display */ children: ReactNode; /** Adjust color of text */ color?: Color; /** Adjust weight of text */ fontWeight?: FontWeight; + /** HTML id attribute */ + id?: string; /** Truncate text overflow with ellipsis */ truncate?: boolean; /** Typographic style of text */ @@ -61,9 +65,11 @@ export interface TextProps { export const Text = ({ alignment, as, + breakWord, children, color, fontWeight, + id, truncate = false, variant, visuallyHidden = false, @@ -76,10 +82,15 @@ export const Text = ({ fontWeight ? styles[fontWeight] : styles[VariantFontWeightMapping[variant]], (alignment || truncate) && styles.block, alignment && styles[alignment], + breakWord && styles.break, color && styles[color], truncate && styles.truncate, visuallyHidden && styles.visuallyHidden, ); - return {children}; + return ( + + {children} + + ); }; From de45089ae51ba93601f572c94b4994aa1d9d3b99 Mon Sep 17 00:00:00 2001 From: aveline Date: Thu, 6 Oct 2022 10:08:25 -0700 Subject: [PATCH 2/4] Add `id` prop to `Box` --- polaris-react/src/components/Box/Box.tsx | 4 ++++ 1 file changed, 4 insertions(+) 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), }, From d5618ae1af6a458e010b6ab334f4b33ff69f5e3f Mon Sep 17 00:00:00 2001 From: aveline Date: Wed, 12 Oct 2022 12:06:05 -0700 Subject: [PATCH 3/4] Move `breakWord` change to a new PR --- polaris-react/src/components/Text/Text.scss | 6 ------ polaris-react/src/components/Text/Text.tsx | 4 ---- 2 files changed, 10 deletions(-) diff --git a/polaris-react/src/components/Text/Text.scss b/polaris-react/src/components/Text/Text.scss index 8a293e134a6..e7f8029df67 100644 --- a/polaris-react/src/components/Text/Text.scss +++ b/polaris-react/src/components/Text/Text.scss @@ -121,9 +121,3 @@ font-size: var(--p-font-size-200); line-height: var(--p-font-line-height-2); } - -.break { - word-wrap: break-word; - word-break: break-word; - overflow-wrap: break-word; -} diff --git a/polaris-react/src/components/Text/Text.tsx b/polaris-react/src/components/Text/Text.tsx index 183079fcfd2..99533b5ac96 100644 --- a/polaris-react/src/components/Text/Text.tsx +++ b/polaris-react/src/components/Text/Text.tsx @@ -44,8 +44,6 @@ export interface TextProps { alignment?: Alignment; /** The element type */ as: Element; - /** Prevent text from overflowing */ - breakWord?: boolean; /** Text to display */ children: ReactNode; /** Adjust color of text */ @@ -65,7 +63,6 @@ export interface TextProps { export const Text = ({ alignment, as, - breakWord, children, color, fontWeight, @@ -82,7 +79,6 @@ export const Text = ({ fontWeight ? styles[fontWeight] : styles[VariantFontWeightMapping[variant]], (alignment || truncate) && styles.block, alignment && styles[alignment], - breakWord && styles.break, color && styles[color], truncate && styles.truncate, visuallyHidden && styles.visuallyHidden, From 23f02a7135d7b58c1f9c0b2781a7237414572e3b Mon Sep 17 00:00:00 2001 From: aveline Date: Wed, 12 Oct 2022 12:11:49 -0700 Subject: [PATCH 4/4] changeset --- .changeset/cyan-months-think.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/cyan-months-think.md 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`