refactor(text-button)!: extract `TextButton` out of `Button`

[ashjtan]

Describe the problem this PR addresses

See #238. The TextButton was in the same dir as Button, making it difficult to find and muddying up the the docs for both.

Describe the changes in this PR

• extracted TextButton out of Button and into its own dir (and consequently, styleguide page)

• added a link in Button docs to TextButton for better discoverability

  

• cleaned up some of the TextButton docs

Migration Guide / Breaking Changes from 6.x to 7.x

• the MTextButton component has been moved from @square/maker/components/Button to @square/maker/components/TextButton so you will need to update all the MTextButton imports in your repo.

[github-actions[bot]]

Styleguide deployed to https://square.github.io/maker/styleguide/extract-text-button/#/

[github-actions[bot]]

📊 Package size report   1%↑

File	Before	After
components/Button/script.js	7.4 kB	-20.2%↓5.9 kB
components/Button/styles.css	5.0 kB	-28.1%↓3.6 kB
components/TextButton/index.js	—	46 B
components/TextButton/script.js	—	3.5 kB
components/TextButton/styles.css	—	1.4 kB
Total (Includes all files)	1.2 MB	1%↑1.2 MB
Tarball size	217.4 kB	0.9%↑219.4 kB

Unchanged files

| File | Size | | --------------------------------------------------------------------------------------- | --------: | | `components/ActionBar/index.js` | `46 B` | | `components/ActionBar/script.js` | `14.1 kB` | | `components/ActionBar/styles.css` | `5.4 kB` | | `components/Blade/index.js` | `46 B` | | `components/Blade/script.js` | `6.3 kB` | | `components/Blade/styles.css` | `756 B` | | `components/Button/index.js` | `46 B` | | `components/Calendar/index.js` | `46 B` | | `components/Calendar/script.js` | `7.5 kB` | | `components/Calendar/styles.css` | `2.5 kB` | | `components/Card/index.js` | `46 B` | | `components/Card/script.js` | `1.7 kB` | | `components/Card/styles.css` | `154 B` | | `components/Checkbox/index.js` | `46 B` | | `components/Checkbox/script.js` | `3.8 kB` | | `components/Checkbox/styles.css` | `1.7 kB` | | `components/Choice/index.js` | `46 B` | | `components/Choice/script.js` | `4.3 kB` | | `components/Choice/styles.css` | `1.3 kB` | | `components/Container/index.js` | `46 B` | | `components/Container/script.js` | `4.3 kB` | | `components/Container/styles.css` | `1.0 kB` | | `components/Dialog/index.js` | `46 B` | | `components/Dialog/script.js` | `7.0 kB` | | `components/Dialog/styles.css` | `1.1 kB` | | `components/Divider/index.js` | `46 B` | | `components/Divider/script.js` | `1.7 kB` | | `components/Divider/styles.css` | `148 B` | | `components/Heading/index.js` | `46 B` | | `components/Heading/script.js` | `2.6 kB` | | `components/Heading/styles.css` | `3.1 kB` | | `components/Image/index.js` | `46 B` | | `components/Image/script.js` | `3.4 kB` | | `components/Image/styles.css` | `254 B` | | `components/ImageUploader/index.js` | `46 B` | | `components/ImageUploader/script.js` | `11.9 kB` | | `components/ImageUploader/styles.css` | `2.5 kB` | | `components/Input/index.js` | `46 B` | | `components/Input/script.js` | `4.3 kB` | | `components/Input/styles.css` | `3.1 kB` | | `components/Loading/index.js` | `46 B` | | `components/Loading/script.js` | `2.3 kB` | | `components/Loading/styles.css` | `1.2 kB` | | `components/Modal/index.js` | `46 B` | | `components/Modal/script.js` | `9.3 kB` | | `components/Modal/styles.css` | `1.0 kB` | | `components/Notice/index.js` | `46 B` | | `components/Notice/script.js` | `4.3 kB` | | `components/Notice/styles.css` | `1.0 kB` | | `components/PinInput/index.js` | `46 B` | | `components/PinInput/script.js` | `4.5 kB` | | `components/PinInput/styles.css` | `1.2 kB` | | `components/Popover/index.js` | `46 B` | | `components/Popover/script.js` | `10.1 kB` | | `components/Popover/styles.css` | `401 B` | | `components/ProgressBar/index.js` | `46 B` | | `components/ProgressBar/script.js` | `3.0 kB` | | `components/ProgressBar/styles.css` | `1.1 kB` | | `components/Radio/index.js` | `46 B` | | `components/Radio/script.js` | `3.5 kB` | | `components/Radio/styles.css` | `1.6 kB` | | `components/SegmentedControl/index.js` | `46 B` | | `components/SegmentedControl/script.js` | `3.1 kB` | | `components/SegmentedControl/styles.css` | `813 B` | | `components/Select/index.js` | `46 B` | | `components/Select/script.js` | `5.1 kB` | | `components/Select/styles.css` | `2.5 kB` | | `components/Skeleton/index.js` | `46 B` | | `components/Skeleton/script.js` | `4.4 kB` | | `components/Skeleton/styles.css` | `817 B` | | `components/StarRating/index.js` | `46 B` | | `components/StarRating/script.js` | `6.0 kB` | | `components/StarRating/styles.css` | `322 B` | | `components/Stepper/index.js` | `46 B` | | `components/Stepper/script.js` | `3.8 kB` | | `components/Stepper/styles.css` | `384 B` | | `components/Text/index.js` | `46 B` | | `components/Text/script.js` | `2.1 kB` | | `components/Text/styles.css` | `1.0 kB` | | `components/Textarea/index.js` | `46 B` | | `components/Textarea/script.js` | `3.7 kB` | | `components/Textarea/styles.css` | `2.2 kB` | | `components/Theme/index.js` | `25 B` | | `components/Theme/script.js` | `2.3 kB` | | `components/Toggle/index.js` | `46 B` | | `components/Toggle/script.js` | `3.8 kB` | | `components/Toggle/styles.css` | `3.6 kB` | | `components/TouchCapture/index.js` | `25 B` | | `components/TouchCapture/script.js` | `3.6 kB` | | `components/TransitionFadeIn/index.js` | `25 B` | | `components/TransitionFadeIn/script.js` | `2.3 kB` | | `components/TransitionResize/index.js` | `25 B` | | `components/TransitionResize/script.js` | `3.7 kB` | | `components/TransitionSpringLeft/index.js` | `25 B` | | `components/TransitionSpringLeft/script.js` | `2.3 kB` | | `components/TransitionSpringUp/index.js` | `25 B` | | `components/TransitionSpringUp/script.js` | `2.3 kB` | | `components/TransitionStaggered/index.js` | `25 B` | | `components/TransitionStaggered/script.js` | `2.6 kB` | | [`LICENSE`](https://github.com/square/maker/blob/extract-text-button/LICENSE) | `552 B` | | [`package.json`](https://github.com/square/maker/blob/extract-text-button/package.json) | `5.0 kB` | | [`README.md`](https://github.com/square/maker/blob/extract-text-button/README.md) | `327 B` | | `utils/assert.js` | `1.1 kB` | | `utils/BlockFormControlLayout/index.js` | `46 B` | | `utils/BlockFormControlLayout/script.js` | `1.8 kB` | | `utils/BlockFormControlLayout/styles.css` | `333 B` | | `utils/debug.js` | `1.1 kB` | | `utils/get-contrast.js` | `1.2 kB` | | `utils/InlineFormControlLayout/index.js` | `46 B` | | `utils/InlineFormControlLayout/script.js` | `2.5 kB` | | `utils/InlineFormControlLayout/styles.css` | `355 B` | | `utils/Transition/index.js` | `25 B` | | `utils/Transition/script.js` | `2.5 kB` | | `utils/TransitionResponsive/index.js` | `25 B` | | `utils/TransitionResponsive/script.js` | `2.3 kB` | | `utils/transitions.js` | `4.7 kB` |

Hidden files

| File | Before | After | | ----------------------------------------------- | --------: | --------------------------: | | `components/ActionBar/script.js.map` | `54.0 kB` | `54.0 kB` | | `components/ActionBar/styles.css.map` | `17.4 kB` | `17.4 kB` | | `components/Blade/script.js.map` | `23.4 kB` | `23.4 kB` | | `components/Blade/styles.css.map` | `3.9 kB` | `3.9 kB` | | `components/Button/script.js.map` | `31.0 kB` | ^-23.1%↓`23.8 kB` | | `components/Button/styles.css.map` | `14.0 kB` | ^-27.5%↓`10.2 kB` | | `components/Calendar/script.js.map` | `29.0 kB` | `29.0 kB` | | `components/Calendar/styles.css.map` | `10.4 kB` | `10.4 kB` | | `components/Card/script.js.map` | `8.8 kB` | `8.8 kB` | | `components/Card/styles.css.map` | `668 B` | `668 B` | | `components/Checkbox/script.js.map` | `18.4 kB` | `18.4 kB` | | `components/Checkbox/styles.css.map` | `3.9 kB` | `3.9 kB` | | `components/Choice/script.js.map` | `19.1 kB` | `19.1 kB` | | `components/Choice/styles.css.map` | `5.7 kB` | `5.7 kB` | | `components/Container/script.js.map` | `17.0 kB` | `17.0 kB` | | `components/Container/styles.css.map` | `4.6 kB` | `4.6 kB` | | `components/Dialog/script.js.map` | `25.6 kB` | `25.6 kB` | | `components/Dialog/styles.css.map` | `5.9 kB` | `5.9 kB` | | `components/Divider/script.js.map` | `8.8 kB` | `8.8 kB` | | `components/Divider/styles.css.map` | `704 B` | `704 B` | | `components/Heading/script.js.map` | `13.5 kB` | `13.5 kB` | | `components/Heading/styles.css.map` | `5.5 kB` | `5.5 kB` | | `components/Image/script.js.map` | `14.1 kB` | `14.1 kB` | | `components/Image/styles.css.map` | `2.9 kB` | `2.9 kB` | | `components/ImageUploader/script.js.map` | `46.3 kB` | `46.3 kB` | | `components/ImageUploader/styles.css.map` | `20.5 kB` | `20.5 kB` | | `components/Input/script.js.map` | `21.1 kB` | `21.1 kB` | | `components/Input/styles.css.map` | `6.1 kB` | `6.1 kB` | | `components/Loading/script.js.map` | `11.1 kB` | `11.1 kB` | | `components/Loading/styles.css.map` | `2.3 kB` | `2.3 kB` | | `components/Modal/script.js.map` | `33.3 kB` | `33.3 kB` | | `components/Modal/styles.css.map` | `9.8 kB` | `9.8 kB` | | `components/Notice/script.js.map` | `17.4 kB` | `17.4 kB` | | `components/Notice/styles.css.map` | `3.8 kB` | `3.8 kB` | | `components/PinInput/script.js.map` | `18.5 kB` | `18.5 kB` | | `components/PinInput/styles.css.map` | `7.0 kB` | `7.0 kB` | | `components/Popover/script.js.map` | `35.1 kB` | `35.1 kB` | | `components/Popover/styles.css.map` | `5.7 kB` | `5.7 kB` | | `components/ProgressBar/script.js.map` | `13.3 kB` | `13.3 kB` | | `components/ProgressBar/styles.css.map` | `2.6 kB` | `2.6 kB` | | `components/Radio/script.js.map` | `17.2 kB` | `17.2 kB` | | `components/Radio/styles.css.map` | `3.7 kB` | `3.7 kB` | | `components/SegmentedControl/script.js.map` | `14.1 kB` | `14.1 kB` | | `components/SegmentedControl/styles.css.map` | `3.3 kB` | `3.3 kB` | | `components/Select/script.js.map` | `23.7 kB` | `23.7 kB` | | `components/Select/styles.css.map` | `6.5 kB` | `6.5 kB` | | `components/Skeleton/script.js.map` | `17.7 kB` | `17.7 kB` | | `components/Skeleton/styles.css.map` | `2.9 kB` | `2.9 kB` | | `components/StarRating/script.js.map` | `22.4 kB` | `22.4 kB` | | `components/StarRating/styles.css.map` | `6.3 kB` | `6.3 kB` | | `components/Stepper/script.js.map` | `16.1 kB` | `16.1 kB` | | `components/Stepper/styles.css.map` | `3.3 kB` | `3.3 kB` | | `components/Text/script.js.map` | `10.4 kB` | `10.4 kB` | | `components/Text/styles.css.map` | `2.7 kB` | `2.7 kB` | | `components/Textarea/script.js.map` | `18.5 kB` | `18.5 kB` | | `components/Textarea/styles.css.map` | `4.8 kB` | `4.8 kB` | | `components/TextButton/script.js.map` | — | `16.2 kB` | | `components/TextButton/styles.css.map` | — | `4.0 kB` | | `components/Theme/script.js.map` | `10.8 kB` | `10.8 kB` | | `components/Toggle/script.js.map` | `19.6 kB` | `19.6 kB` | | `components/Toggle/styles.css.map` | `5.4 kB` | `5.4 kB` | | `components/TouchCapture/script.js.map` | `12.0 kB` | `12.0 kB` | | `components/TransitionFadeIn/script.js.map` | `10.5 kB` | `10.5 kB` | | `components/TransitionResize/script.js.map` | `14.5 kB` | `14.5 kB` | | `components/TransitionSpringLeft/script.js.map` | `10.6 kB` | `10.6 kB` | | `components/TransitionSpringUp/script.js.map` | `10.5 kB` | `10.5 kB` | | `components/TransitionStaggered/script.js.map` | `11.1 kB` | `11.1 kB` | | `utils/assert.js.map` | `4.2 kB` | `4.2 kB` | | `utils/BlockFormControlLayout/script.js.map` | `8.5 kB` | `8.5 kB` | | `utils/BlockFormControlLayout/styles.css.map` | `902 B` | `902 B` | | `utils/debug.js.map` | `3.6 kB` | `3.6 kB` | | `utils/get-contrast.js.map` | `5.0 kB` | `5.0 kB` | | `utils/InlineFormControlLayout/script.js.map` | `11.9 kB` | `11.9 kB` | | `utils/InlineFormControlLayout/styles.css.map` | `1.2 kB` | `1.2 kB` | | `utils/Transition/script.js.map` | `10.8 kB` | `10.8 kB` | | `utils/TransitionResponsive/script.js.map` | `10.3 kB` | `10.3 kB` | | `utils/transitions.js.map` | `16.9 kB` | `16.9 kB` |

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

[github-actions[bot]]

Styleguide deployed to https://square.github.io/maker/styleguide/extract-text-button/#/

[github-actions[bot]]

Styleguide deployed to https://square.github.io/maker/styleguide/extract-text-button/#/

[github-actions[bot]]

Styleguide deployed to https://square.github.io/maker/styleguide/extract-text-button/#/

[github-actions[bot]]

Styleguide deployed to https://square.github.io/maker/styleguide/extract-text-button/#/

[pretzelhammer]

@ashjtan you originally worked on TextButton, right? Can you remind we why we originally put both components in the same directory? Or was it just an arbitrary decision?

[pretzelhammer]

@ashjtan whenever making a breaking change you should write a Migration Guide at the bottom of your PR description like shown in this PR here. I've added it for you this time but please review it and update it if I got anything wrong or missed anything.

[ashjtan]

@pretzelhammer i think it was just an arbitrary decision. the first idea was to add TextButton as a variant, then we scrapped that in favor of making a separate component; i think the separate component but in the same dir was just the next closest idea at the time, so i didn't think of separating the component even further.

thanks for adding the migration guide! totally slipped my mind.

[github-actions[bot]]

:tada: This PR is included in version 7.0.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: