Add breakWord prop to Text (#7389)

### WHAT is this pull request doing?

Add `breakWord` prop to `Text` to support functionality offered by the
[`text-breakword`
mixin](https://github.com/Shopify/polaris/blob/main/polaris-react/src/styles/shared/_typography.scss#L143)

Co-authored-by: Lo Kim <[email protected]>

Author: aveline

.changeset/pink-forks-thank.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added `breakWord` prop to `Text`

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;
+}

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

@@ -53,6 +53,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 */
@@ -72,6 +74,7 @@ export interface TextProps {
 export const Text = ({
   alignment,
   as,
+  breakWord,
   children,
   color,
   fontWeight,
@@ -88,6 +91,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,