fix(Toast): fix long words overflowing toast container

Author: reidbarber

packages/@react-spectrum/s2/src/Toast.tsx

@@ -296,7 +296,10 @@ const toastContent = style({
   alignItems: 'baseline',
   gridArea: 'content',
   cursor: 'default',
-  width: 'fit'
+  width: 'fit',
+  overflowWrap: 'break-word',
+  wordBreak: 'break-word',
+  minWidth: 0
 });
 
 const controls = style({

packages/@react-spectrum/s2/stories/Toast.stories.tsx

@@ -79,6 +79,11 @@ export const Example: Story = {
           variant="accent">
           Show Long Toast
         </Button>
+        <Button
+          onPress={() => UNSTABLE_ToastQueue.info('LoremipsumdolorsitametconsecteturadipiscingelitseddoeiusmodtemporincididuntutlaboreetdoloremagnaaliquaUtenimaminimveniamquisnostrudexercitationullamcolaborisnisiutaliquipeacommodoconsequat.', {...args, onClose: action('onClose')})}
+          variant="accent">
+          Show Long Word Toast
+        </Button>
       </ButtonGroup>
     </>
   )

packages/@react-spectrum/s2/style/spectrum-theme.ts

@@ -828,7 +828,7 @@ export const style = createTheme({
     hyphens: ['none', 'manual', 'auto'] as const,
     whiteSpace: ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'] as const,
     textWrap: ['wrap', 'nowrap', 'balance', 'pretty'] as const,
-    wordBreak: ['normal', 'break-all', 'keep-all'] as const,
+    wordBreak: ['normal', 'break-all', 'keep-all', 'break-word'] as const,
     overflowWrap: ['normal', 'anywhere', 'break-word'] as const,
     boxDecorationBreak: ['slice', 'clone'] as const,