Add labelWrap prop to Button (#4527)

* add new prop

* Create ninety-mice-rush.md

* add fallbacks

* snappies

* removes ellipsis truncation option

* fixes changeset

---------

Co-authored-by: Mike Perrotti <mperrotti@github.com>

.changeset/ninety-mice-rush.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Add `truncation` prop to `Button` to allow for ellipses overflow or text wrapping for long button labels

packages/react/src/Button/Button.docs.json

@@ -82,6 +82,12 @@
       "type": "'default'\n| 'primary'\n| 'danger'\n| 'invisible'",
       "defaultValue": "'default'",
       "description": "Change the visual style of the button."
+    },
+    {
+      "name": "labelWrap",
+      "type": "boolean",
+      "defaultValue": "false",
+      "description": "Whether the button label should wrap to multiple lines of it is longer than the button width."
     }
   ],
   "passthrough": {

packages/react/src/Button/Button.features.stories.tsx

@@ -1,8 +1,9 @@
 import {EyeIcon, TriangleDownIcon, HeartIcon} from '@primer/octicons-react'
 import React, {useState} from 'react'
 import {Button} from '.'
-import {announce} from '@primer/live-region-element'
+import {Stack} from '../Stack/Stack'
 import Link from '../Link'
+import {announce} from '@primer/live-region-element'
 
 export default {
   title: 'Components/Button/Features',
@@ -135,3 +136,23 @@ export const Small = () => <Button size="small">Default</Button>
 export const Medium = () => <Button size="medium">Default</Button>
 
 export const Large = () => <Button size="large">Default</Button>
+
+export const LabelWrap = () => {
+  return (
+    <Stack style={{width: '200px'}}>
+      <Button labelWrap>This button label will wrap if the label is too long</Button>
+      <Button size="small" labelWrap>
+        This small button label will wrap if the label is too long
+      </Button>
+      <Button size="large" labelWrap>
+        This large button label will wrap if the label is too long
+      </Button>
+      <Button labelWrap leadingVisual={HeartIcon} trailingVisual={EyeIcon}>
+        This button label will wrap if the label is too long
+      </Button>
+      <Button labelWrap trailingAction={TriangleDownIcon}>
+        This button label will wrap if the label is too long
+      </Button>
+    </Stack>
+  )
+}

packages/react/src/Button/Button.stories.tsx

@@ -48,6 +48,11 @@ Playground.argTypes = {
       type: 'boolean',
     },
   },
+  labelWrap: {
+    control: {
+      type: 'boolean',
+    },
+  },
   leadingVisual: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]),
   trailingVisual: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]),
   trailingAction: OcticonArgType([TriangleDownIcon]),
@@ -62,6 +67,7 @@ Playground.args = {
   trailingVisual: null,
   leadingVisual: null,
   trailingAction: null,
+  labelWrap: false,
 }
 
 export const Default = () => <Button>Default</Button>

packages/react/src/Button/ButtonBase.tsx

@@ -25,6 +25,7 @@ const ButtonBase = forwardRef(
       alignContent = 'center',
       block = false,
       inactive,
+      labelWrap,
       ...rest
     } = props
 
@@ -73,6 +74,7 @@ const ButtonBase = forwardRef(
         data-size={size === 'small' || size === 'large' ? size : undefined}
         data-no-visuals={!LeadingVisual && !TrailingVisual && !TrailingAction ? true : undefined}
         data-inactive={inactive ? true : undefined}
+        data-label-wrap={labelWrap}
       >
         {Icon ? (
           <Icon />