diff --git a/.changeset/pink-forks-thank.md b/.changeset/pink-forks-thank.md new file mode 100644 index 00000000000..f663571a2c6 --- /dev/null +++ b/.changeset/pink-forks-thank.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': minor +--- + +Added `breakWord` prop to `Text` diff --git a/polaris-react/src/components/Text/Text.scss b/polaris-react/src/components/Text/Text.scss index e7f8029df67..c9c210570d6 100644 --- a/polaris-react/src/components/Text/Text.scss +++ b/polaris-react/src/components/Text/Text.scss @@ -121,3 +121,7 @@ font-size: var(--p-font-size-200); line-height: var(--p-font-line-height-2); } + +.break { + overflow-wrap: break-word; +} diff --git a/polaris-react/src/components/Text/Text.tsx b/polaris-react/src/components/Text/Text.tsx index b61ecf4989d..ebbb3d0f7f0 100644 --- a/polaris-react/src/components/Text/Text.tsx +++ b/polaris-react/src/components/Text/Text.tsx @@ -44,6 +44,8 @@ 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 */ @@ -61,6 +63,7 @@ export interface TextProps { export const Text = ({ alignment, as, + breakWord, children, color, fontWeight, @@ -76,6 +79,7 @@ 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,