feat(button): add props for border, box-shadow and hover styles

[laurenhu]

Describe the problem this PR addresses

Buttons currently do not support custom border, box-shadow, shape and hover styles

Describe the changes in this PR

Adds support to buttons for custom border, box-shadow, shape and hover styles

Other information

[github-actions[bot]]

Deployed Styleguide and Lab.

Notes

1. Links may take a few minutes to update after PR is opened or commit is pushed.
2. Links may become invalidated after PR is merged or closed.
3. Links for all releases and open PRs can be found on the Maker Deploys 🚀 page.

[pretzelhammer]

the Button Customization lab is great! thanks for making it. i played around with it and was impressed how by both the fill variant and the outline variant maintained their character and their accessibility despite my most devious efforts to destroy both. I'm guessing you didn't include the ghost variant because most of the customizations would not apply to it, but it'd still be interesting to see it in context if you don't mind adding it.

this pr was a little difficult to review because it has a lot of extraneous diffs but i did my best :) i look forward to giving it a follow-up review once my initial comments have been resolved and once master has been merged in & merge conflicts are resolved.

[github-actions[bot]]

Deployed Styleguide and Lab.

Notes

1. Links may take a few minutes to update after PR is opened or commit is pushed.
2. Links may become invalidated after PR is merged or closed.
3. Links for all releases and open PRs can be found on the Maker Deploys page.

[github-actions[bot]]

📊 Package size report   1%↑

File	Before	After
components/Button/script.js	5.5 kB	54%↑8.5 kB
components/Button/styles.css	5.2 kB	15%↑6.0 kB
Total (Includes all files)	1.7 MB	1%↑1.7 MB
Tarball size	325.3 kB	2%↑331.3 kB

Unchanged files

| File | Size | | ---------------------------------------------------------------------------------------- | --------: | | `components/Accordion/index.js` | `46 B` | | `components/Accordion/script.js` | `5.2 kB` | | `components/Accordion/styles.css` | `235 B` | | `components/ActionBar/index.js` | `46 B` | | `components/ActionBar/script.js` | `14.6 kB` | | `components/ActionBar/styles.css` | `5.7 kB` | | `components/Badge/index.js` | `46 B` | | `components/Badge/script.js` | `5.9 kB` | | `components/Badge/styles.css` | `1.8 kB` | | `components/Blade/index.js` | `46 B` | | `components/Blade/script.js` | `6.9 kB` | | `components/Blade/styles.css` | `837 B` | | `components/Button/index.js` | `46 B` | | `components/Calendar/index.js` | `46 B` | | `components/Calendar/script.js` | `7.4 kB` | | `components/Calendar/styles.css` | `2.1 kB` | | `components/Card/index.js` | `46 B` | | `components/Card/script.js` | `2.4 kB` | | `components/Card/styles.css` | `603 B` | | `components/Checkbox/index.js` | `46 B` | | `components/Checkbox/script.js` | `3.9 kB` | | `components/Checkbox/styles.css` | `1.4 kB` | | `components/Choice/index.js` | `46 B` | | `components/Choice/script.js` | `5.8 kB` | | `components/Choice/styles.css` | `1.7 kB` | | `components/Container/index.js` | `46 B` | | `components/Container/script.js` | `4.5 kB` | | `components/Container/styles.css` | `1.2 kB` | | `components/Dialog/index.js` | `46 B` | | `components/Dialog/script.js` | `9.2 kB` | | `components/Dialog/styles.css` | `1.5 kB` | | `components/Divider/index.js` | `46 B` | | `components/Divider/script.js` | `1.7 kB` | | `components/Divider/styles.css` | `170 B` | | `components/Icon/index.js` | `46 B` | | `components/Icon/script.js` | `2.7 kB` | | `components/Icon/styles.css` | `153 B` | | `components/Image/index.js` | `46 B` | | `components/Image/script.js` | `6.7 kB` | | `components/Image/styles.css` | `724 B` | | `components/ImageUploader/index.js` | `46 B` | | `components/ImageUploader/script.js` | `11.7 kB` | | `components/ImageUploader/styles.css` | `2.4 kB` | | `components/Input/index.js` | `46 B` | | `components/Input/script.js` | `4.3 kB` | | `components/Input/styles.css` | `2.7 kB` | | `components/Link/index.js` | `46 B` | | `components/Link/script.js` | `3.1 kB` | | `components/Link/styles.css` | `220 B` | | `components/Loading/index.js` | `46 B` | | `components/Loading/script.js` | `2.2 kB` | | `components/Loading/styles.css` | `1.2 kB` | | `components/Menu/index.js` | `46 B` | | `components/Menu/script.js` | `11.0 kB` | | `components/Menu/styles.css` | `4.1 kB` | | `components/Modal/index.js` | `46 B` | | `components/Modal/script.js` | `10.2 kB` | | `components/Modal/styles.css` | `1.1 kB` | | `components/Notice/index.js` | `46 B` | | `components/Notice/script.js` | `4.6 kB` | | `components/Notice/styles.css` | `1.1 kB` | | `components/Pill/index.js` | `46 B` | | `components/Pill/script.js` | `2.8 kB` | | `components/Pill/styles.css` | `370 B` | | `components/PinInput/index.js` | `46 B` | | `components/PinInput/script.js` | `5.8 kB` | | `components/PinInput/styles.css` | `1.6 kB` | | `components/Popover/index.js` | `46 B` | | `components/Popover/script.js` | `10.9 kB` | | `components/Popover/styles.css` | `518 B` | | `components/ProgressBar/index.js` | `46 B` | | `components/ProgressBar/script.js` | `3.5 kB` | | `components/ProgressBar/styles.css` | `1.2 kB` | | `components/ProgressCircle/index.js` | `46 B` | | `components/ProgressCircle/script.js` | `3.9 kB` | | `components/ProgressCircle/styles.css` | `760 B` | | `components/Radio/index.js` | `46 B` | | `components/Radio/script.js` | `3.6 kB` | | `components/Radio/styles.css` | `1.5 kB` | | `components/SegmentedControl/index.js` | `46 B` | | `components/SegmentedControl/script.js` | `3.2 kB` | | `components/SegmentedControl/styles.css` | `1.4 kB` | | `components/Select/index.js` | `46 B` | | `components/Select/script.js` | `5.3 kB` | | `components/Select/styles.css` | `3.6 kB` | | `components/Skeleton/index.js` | `46 B` | | `components/Skeleton/script.js` | `4.3 kB` | | `components/Skeleton/styles.css` | `978 B` | | `components/StarRating/index.js` | `46 B` | | `components/StarRating/script.js` | `6.2 kB` | | `components/StarRating/styles.css` | `322 B` | | `components/Stepper/index.js` | `46 B` | | `components/Stepper/script.js` | `5.7 kB` | | `components/Stepper/styles.css` | `1.2 kB` | | `components/Text/index.js` | `46 B` | | `components/Text/script.js` | `4.6 kB` | | `components/Text/styles.css` | `4.7 kB` | | `components/Textarea/index.js` | `46 B` | | `components/Textarea/script.js` | `3.6 kB` | | `components/Textarea/styles.css` | `1.9 kB` | | `components/TextButton/index.js` | `46 B` | | `components/TextButton/script.js` | `3.9 kB` | | `components/TextButton/styles.css` | `2.1 kB` | | `components/Theme/index.js` | `46 B` | | `components/Theme/script.js` | `16.0 kB` | | `components/Theme/styles.css` | `264 B` | | `components/Toast/index.js` | `46 B` | | `components/Toast/script.js` | `9.1 kB` | | `components/Toast/styles.css` | `2.1 kB` | | `components/Toggle/index.js` | `46 B` | | `components/Toggle/script.js` | `3.5 kB` | | `components/Toggle/styles.css` | `2.7 kB` | | `components/VerticalDivider/index.js` | `46 B` | | `components/VerticalDivider/script.js` | `1.7 kB` | | `components/VerticalDivider/styles.css` | `239 B` | | [`LICENSE`](https://github.com/square/maker/blob/button-customization/LICENSE) | `552 B` | | [`package.json`](https://github.com/square/maker/blob/button-customization/package.json) | `5.3 kB` | | [`README.md`](https://github.com/square/maker/blob/button-customization/README.md) | `357 B` | | `utils/assert.js` | `1.0 kB` | | `utils/BlockFormControlLayout/index.js` | `46 B` | | `utils/BlockFormControlLayout/script.js` | `1.8 kB` | | `utils/BlockFormControlLayout/styles.css` | `234 B` | | `utils/constants.js` | `689 B` | | `utils/css-validator.js` | `933 B` | | `utils/debug.js` | `984 B` | | `utils/get-contrast.js` | `1.4 kB` | | `utils/InlineFormControlLayout/index.js` | `46 B` | | `utils/InlineFormControlLayout/script.js` | `2.5 kB` | | `utils/InlineFormControlLayout/styles.css` | `315 B` | | `utils/maker-colors.js` | `3.8 kB` | | `utils/RenderFn.js` | `766 B` | | `utils/Row/index.js` | `46 B` | | `utils/Row/script.js` | `2.5 kB` | | `utils/Row/styles.css` | `610 B` | | `utils/TouchCapture/index.js` | `25 B` | | `utils/TouchCapture/script.js` | `3.5 kB` | | `utils/Transition/index.js` | `25 B` | | `utils/Transition/script.js` | `2.4 kB` | | `utils/TransitionCollapse/index.js` | `25 B` | | `utils/TransitionCollapse/script.js` | `3.0 kB` | | `utils/TransitionFadeIn/index.js` | `25 B` | | `utils/TransitionFadeIn/script.js` | `2.3 kB` | | `utils/TransitionResize/index.js` | `25 B` | | `utils/TransitionResize/script.js` | `3.6 kB` | | `utils/TransitionResponsive/index.js` | `25 B` | | `utils/TransitionResponsive/script.js` | `2.2 kB` | | `utils/transitions.js` | `4.2 kB` | | `utils/TransitionSpringLeft/index.js` | `25 B` | | `utils/TransitionSpringLeft/script.js` | `2.3 kB` | | `utils/TransitionSpringUp/index.js` | `25 B` | | `utils/TransitionSpringUp/script.js` | `2.3 kB` | | `utils/TransitionStack/index.js` | `25 B` | | `utils/TransitionStack/script.js` | `2.3 kB` | | `utils/TransitionStaggered/index.js` | `25 B` | | `utils/TransitionStaggered/script.js` | `2.5 kB` |

Hidden files

| File | Before | After | | ---------------------------------------------- | --------: | -----------------------: | | `components/Accordion/script.js.map` | `21.3 kB` | `21.3 kB` | | `components/Accordion/styles.css.map` | `5.9 kB` | `5.9 kB` | | `components/ActionBar/script.js.map` | `55.9 kB` | `55.9 kB` | | `components/ActionBar/styles.css.map` | `18.9 kB` | `18.9 kB` | | `components/Badge/script.js.map` | `21.6 kB` | `21.6 kB` | | `components/Badge/styles.css.map` | `5.2 kB` | `5.2 kB` | | `components/Blade/script.js.map` | `26.7 kB` | `26.7 kB` | | `components/Blade/styles.css.map` | `5.0 kB` | `5.0 kB` | | `components/Button/script.js.map` | `24.5 kB` | ^34%↑`32.8 kB` | | `components/Button/styles.css.map` | `10.7 kB` | ^54%↑`16.4 kB` | | `components/Calendar/script.js.map` | `28.8 kB` | `28.8 kB` | | `components/Calendar/styles.css.map` | `10.1 kB` | `10.1 kB` | | `components/Card/script.js.map` | `11.8 kB` | `11.8 kB` | | `components/Card/styles.css.map` | `1.6 kB` | `1.6 kB` | | `components/Checkbox/script.js.map` | `18.6 kB` | `18.6 kB` | | `components/Checkbox/styles.css.map` | `3.7 kB` | `3.7 kB` | | `components/Choice/script.js.map` | `25.4 kB` | `25.4 kB` | | `components/Choice/styles.css.map` | `7.9 kB` | `7.9 kB` | | `components/Container/script.js.map` | `18.1 kB` | `18.1 kB` | | `components/Container/styles.css.map` | `5.0 kB` | `5.0 kB` | | `components/Dialog/script.js.map` | `33.0 kB` | `33.0 kB` | | `components/Dialog/styles.css.map` | `9.2 kB` | `9.2 kB` | | `components/Divider/script.js.map` | `8.8 kB` | `8.8 kB` | | `components/Divider/styles.css.map` | `708 B` | `708 B` | | `components/Icon/script.js.map` | `12.6 kB` | `12.6 kB` | | `components/Icon/styles.css.map` | `1.6 kB` | `1.6 kB` | | `components/Image/script.js.map` | `23.4 kB` | `23.4 kB` | | `components/Image/styles.css.map` | `5.4 kB` | `5.4 kB` | | `components/ImageUploader/script.js.map` | `46.0 kB` | `46.0 kB` | | `components/ImageUploader/styles.css.map` | `20.2 kB` | `20.2 kB` | | `components/Input/script.js.map` | `21.1 kB` | `21.1 kB` | | `components/Input/styles.css.map` | `5.7 kB` | `5.7 kB` | | `components/Link/script.js.map` | `14.2 kB` | `14.2 kB` | | `components/Link/styles.css.map` | `3.4 kB` | `3.4 kB` | | `components/Loading/script.js.map` | `11.0 kB` | `11.0 kB` | | `components/Loading/styles.css.map` | `2.3 kB` | `2.3 kB` | | `components/Menu/script.js.map` | `42.1 kB` | `42.1 kB` | | `components/Menu/styles.css.map` | `13.8 kB` | `13.8 kB` | | `components/Modal/script.js.map` | `35.7 kB` | `35.7 kB` | | `components/Modal/styles.css.map` | `11.0 kB` | `11.0 kB` | | `components/Notice/script.js.map` | `18.4 kB` | `18.4 kB` | | `components/Notice/styles.css.map` | `5.1 kB` | `5.1 kB` | | `components/Pill/script.js.map` | `13.3 kB` | `13.3 kB` | | `components/Pill/styles.css.map` | `2.3 kB` | `2.3 kB` | | `components/PinInput/script.js.map` | `23.6 kB` | `23.6 kB` | | `components/PinInput/styles.css.map` | `7.1 kB` | `7.1 kB` | | `components/Popover/script.js.map` | `38.7 kB` | `38.7 kB` | | `components/Popover/styles.css.map` | `6.9 kB` | `6.9 kB` | | `components/ProgressBar/script.js.map` | `15.6 kB` | `15.6 kB` | | `components/ProgressBar/styles.css.map` | `3.5 kB` | `3.5 kB` | | `components/ProgressCircle/script.js.map` | `17.2 kB` | `17.2 kB` | | `components/ProgressCircle/styles.css.map` | `4.1 kB` | `4.1 kB` | | `components/Radio/script.js.map` | `17.5 kB` | `17.5 kB` | | `components/Radio/styles.css.map` | `3.6 kB` | `3.6 kB` | | `components/SegmentedControl/script.js.map` | `14.8 kB` | `14.8 kB` | | `components/SegmentedControl/styles.css.map` | `3.9 kB` | `3.9 kB` | | `components/Select/script.js.map` | `24.0 kB` | `24.0 kB` | | `components/Select/styles.css.map` | `6.6 kB` | `6.6 kB` | | `components/Skeleton/script.js.map` | `17.8 kB` | `17.8 kB` | | `components/Skeleton/styles.css.map` | `3.0 kB` | `3.0 kB` | | `components/StarRating/script.js.map` | `23.6 kB` | `23.6 kB` | | `components/StarRating/styles.css.map` | `6.8 kB` | `6.8 kB` | | `components/Stepper/script.js.map` | `22.2 kB` | `22.2 kB` | | `components/Stepper/styles.css.map` | `6.5 kB` | `6.5 kB` | | `components/Text/script.js.map` | `22.3 kB` | `22.3 kB` | | `components/Text/styles.css.map` | `11.5 kB` | `11.5 kB` | | `components/Textarea/script.js.map` | `17.9 kB` | `17.9 kB` | | `components/Textarea/styles.css.map` | `4.1 kB` | `4.1 kB` | | `components/TextButton/script.js.map` | `18.1 kB` | `18.1 kB` | | `components/TextButton/styles.css.map` | `5.2 kB` | `5.2 kB` | | `components/Theme/script.js.map` | `50.1 kB` | `50.1 kB` | | `components/Theme/styles.css.map` | `3.8 kB` | `3.8 kB` | | `components/Toast/script.js.map` | `38.7 kB` | `38.7 kB` | | `components/Toast/styles.css.map` | `14.7 kB` | `14.7 kB` | | `components/Toggle/script.js.map` | `18.3 kB` | `18.3 kB` | | `components/Toggle/styles.css.map` | `4.5 kB` | `4.5 kB` | | `components/VerticalDivider/script.js.map` | `8.9 kB` | `8.9 kB` | | `components/VerticalDivider/styles.css.map` | `760 B` | `760 B` | | `utils/assert.js.map` | `3.9 kB` | `3.9 kB` | | `utils/BlockFormControlLayout/script.js.map` | `8.4 kB` | `8.4 kB` | | `utils/BlockFormControlLayout/styles.css.map` | `762 B` | `762 B` | | `utils/constants.js.map` | `2.5 kB` | `2.5 kB` | | `utils/css-validator.js.map` | `3.3 kB` | `3.3 kB` | | `utils/debug.js.map` | `3.4 kB` | `3.4 kB` | | `utils/get-contrast.js.map` | `5.7 kB` | `5.7 kB` | | `utils/InlineFormControlLayout/script.js.map` | `12.6 kB` | `12.6 kB` | | `utils/InlineFormControlLayout/styles.css.map` | `1.4 kB` | `1.4 kB` | | `utils/maker-colors.js.map` | `14.8 kB` | `14.8 kB` | | `utils/RenderFn.js.map` | `2.8 kB` | `2.8 kB` | | `utils/Row/script.js.map` | `11.7 kB` | `11.7 kB` | | `utils/Row/styles.css.map` | `2.0 kB` | `2.0 kB` | | `utils/TouchCapture/script.js.map` | `12.0 kB` | `12.0 kB` | | `utils/Transition/script.js.map` | `10.7 kB` | `10.7 kB` | | `utils/TransitionCollapse/script.js.map` | `13.4 kB` | `13.4 kB` | | `utils/TransitionFadeIn/script.js.map` | `10.4 kB` | `10.4 kB` | | `utils/TransitionResize/script.js.map` | `14.4 kB` | `14.4 kB` | | `utils/TransitionResponsive/script.js.map` | `10.3 kB` | `10.3 kB` | | `utils/transitions.js.map` | `16.9 kB` | `16.9 kB` | | `utils/TransitionSpringLeft/script.js.map` | `10.5 kB` | `10.5 kB` | | `utils/TransitionSpringUp/script.js.map` | `10.5 kB` | `10.5 kB` | | `utils/TransitionStack/script.js.map` | `10.2 kB` | `10.2 kB` | | `utils/TransitionStaggered/script.js.map` | `11.0 kB` | `11.0 kB` |

_{🤖 This report was automatically generated by pkg-size-action}

[pretzelhammer]

I looked through the most recent commit and to be honest I don't think Shimaa would have been a fan of expandable or textPattern props on buttons. Buttons having consistent sizes is important for site layout and site visual cohesiveness/consistency. By adding expandable and textPattern buttons can be made all kinds of weird and odd heights now. Furthermore, I think it was intended for Buttons to always have the label style with the label font family and label font weight... being able to change it to the paragraph style or even the title or headline styles is pretty weird, especially since the button's padding is not responsive to the text changes so any buttons using the title or headline styles look bad/cramped/claustrophobic.

At the end of the day if Website needs it then we'll ship it, but I'd just like to make sure that everyone involved is aware of the negative design implications of these changes.