search

square / maker

Maker Design System by Square
https://square.github.io/maker/styleguide/latest-stable/
Other
63 stars 14 forks source link

docs: add discouraging comments re explicit CSS values #251

Closed bashunaimiroy closed 2 years ago

bashunaimiroy commented 2 years ago

Describe the problem this PR addresses

@laurenhu raised a good point in another PR using the recently added fontSize prop:

I don't want developers who are not aware that these are reasoned exceptions to start passing in css font size values in places where type scale and base font size should make a impact.

This simply adds some documenting comments, to raise dev awareness that while you can use this to pass in CSS font size values, this essentially disables type scaling on the component.

Describe the changes in this PR

Adds info to prop documentation comments for Heading and Text. Note, they are somewhat terse because ESLint is enforcing 100character max-length, and splitting the comment to multiple lines messes with the API Table generation. If it's too terse, we can disable the ESLint rule there.

github-actions[bot] commented 2 years ago

Styleguide deployed to https://square.github.io/maker/styleguide/fontsize-lineheight/#/

bashunaimiroy commented 2 years ago

thanks for PR title change @pretzelhammer

github-actions[bot] commented 2 years ago

📊 Package size report   0.01%↑

File Before After
Total (Includes all files) 1.3 MB 0.01%↑1.3 MB
Tarball size 234.0 kB 0.01%↑234.0 kB
Unchanged files | File | Size | | --------------------------------------------------------------------------------------- | --------: | | `components/ActionBar/index.js` | `46 B` | | `components/ActionBar/script.js` | `14.6 kB` | | `components/ActionBar/styles.css` | `5.5 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/Button/script.js` | `6.3 kB` | | `components/Button/styles.css` | `3.6 kB` | | `components/Calendar/index.js` | `46 B` | | `components/Calendar/script.js` | `7.9 kB` | | `components/Calendar/styles.css` | `2.0 kB` | | `components/Card/index.js` | `46 B` | | `components/Card/script.js` | `1.7 kB` | | `components/Card/styles.css` | `196 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` | `4.7 kB` | | `components/Choice/styles.css` | `1.2 kB` | | `components/Container/index.js` | `46 B` | | `components/Container/script.js` | `4.6 kB` | | `components/Container/styles.css` | `1.0 kB` | | `components/Dialog/index.js` | `46 B` | | `components/Dialog/script.js` | `7.7 kB` | | `components/Dialog/styles.css` | `1.3 kB` | | `components/Divider/index.js` | `46 B` | | `components/Divider/script.js` | `1.7 kB` | | `components/Divider/styles.css` | `166 B` | | `components/Heading/index.js` | `46 B` | | `components/Heading/script.js` | `4.7 kB` | | `components/Heading/styles.css` | `5.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.3 kB` | | `components/Input/index.js` | `46 B` | | `components/Input/script.js` | `4.3 kB` | | `components/Input/styles.css` | `2.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.9 kB` | | `components/Modal/styles.css` | `1.1 kB` | | `components/Notice/index.js` | `46 B` | | `components/Notice/script.js` | `4.8 kB` | | `components/Notice/styles.css` | `998 B` | | `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.6 kB` | | `components/Radio/styles.css` | `1.4 kB` | | `components/SegmentedControl/index.js` | `46 B` | | `components/SegmentedControl/script.js` | `3.1 kB` | | `components/SegmentedControl/styles.css` | `880 B` | | `components/Select/index.js` | `46 B` | | `components/Select/script.js` | `5.1 kB` | | `components/Select/styles.css` | `2.0 kB` | | `components/Skeleton/index.js` | `46 B` | | `components/Skeleton/script.js` | `4.4 kB` | | `components/Skeleton/styles.css` | `889 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` | `4.3 kB` | | `components/Stepper/styles.css` | `402 B` | | `components/Text/index.js` | `46 B` | | `components/Text/script.js` | `4.3 kB` | | `components/Text/styles.css` | `2.6 kB` | | `components/Textarea/index.js` | `46 B` | | `components/Textarea/script.js` | `3.7 kB` | | `components/Textarea/styles.css` | `1.4 kB` | | `components/TextButton/index.js` | `46 B` | | `components/TextButton/script.js` | `3.8 kB` | | `components/TextButton/styles.css` | `1.4 kB` | | `components/Theme/index.js` | `46 B` | | `components/Theme/script.js` | `5.6 kB` | | `components/Theme/styles.css` | `136 B` | | `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/fontsize-lineheight/LICENSE) | `552 B` | | [`package.json`](https://github.com/square/maker/blob/fontsize-lineheight/package.json) | `5.0 kB` | | [`README.md`](https://github.com/square/maker/blob/fontsize-lineheight/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` | `234 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.6 kB` | | `utils/InlineFormControlLayout/styles.css` | `380 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` | `55.4 kB` | `55.4 kB` | | `components/ActionBar/styles.css.map` | `18.3 kB` | `18.3 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` | `24.7 kB` | `24.7 kB` | | `components/Button/styles.css.map` | `10.5 kB` | `10.5 kB` | | `components/Calendar/script.js.map` | `29.6 kB` | `29.6 kB` | | `components/Calendar/styles.css.map` | `10.3 kB` | `10.3 kB` | | `components/Card/script.js.map` | `8.9 kB` | `8.9 kB` | | `components/Card/styles.css.map` | `711 B` | `711 B` | | `components/Checkbox/script.js.map` | `18.6 kB` | `18.6 kB` | | `components/Checkbox/styles.css.map` | `3.6 kB` | `3.6 kB` | | `components/Choice/script.js.map` | `19.7 kB` | `19.7 kB` | | `components/Choice/styles.css.map` | `5.9 kB` | `5.9 kB` | | `components/Container/script.js.map` | `18.2 kB` | `18.2 kB` | | `components/Container/styles.css.map` | `4.9 kB` | `4.9 kB` | | `components/Dialog/script.js.map` | `29.0 kB` | `29.0 kB` | | `components/Dialog/styles.css.map` | `7.0 kB` | `7.0 kB` | | `components/Divider/script.js.map` | `8.8 kB` | `8.8 kB` | | `components/Divider/styles.css.map` | `723 B` | `723 B` | | `components/Heading/script.js.map` | `22.7 kB` | 0.1%↑`22.7 kB` | | `components/Heading/styles.css.map` | `11.5 kB` | 0.2%↑`11.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.0 kB` | `46.0 kB` | | `components/ImageUploader/styles.css.map` | `20.2 kB` | `20.2 kB` | | `components/Input/script.js.map` | `20.1 kB` | `20.1 kB` | | `components/Input/styles.css.map` | `4.9 kB` | `4.9 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` | `35.0 kB` | `35.0 kB` | | `components/Modal/styles.css.map` | `10.7 kB` | `10.7 kB` | | `components/Notice/script.js.map` | `18.7 kB` | `18.7 kB` | | `components/Notice/styles.css.map` | `4.2 kB` | `4.2 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.5 kB` | `17.5 kB` | | `components/Radio/styles.css.map` | `3.5 kB` | `3.5 kB` | | `components/SegmentedControl/script.js.map` | `14.2 kB` | `14.2 kB` | | `components/SegmentedControl/styles.css.map` | `3.3 kB` | `3.3 kB` | | `components/Select/script.js.map` | `23.0 kB` | `23.0 kB` | | `components/Select/styles.css.map` | `5.7 kB` | `5.7 kB` | | `components/Skeleton/script.js.map` | `17.7 kB` | `17.7 kB` | | `components/Skeleton/styles.css.map` | `3.0 kB` | `3.0 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` | `17.4 kB` | `17.4 kB` | | `components/Stepper/styles.css.map` | `3.8 kB` | `3.8 kB` | | `components/Text/script.js.map` | `18.9 kB` | 0.1%↑`18.9 kB` | | `components/Text/styles.css.map` | `7.9 kB` | 0.3%↑`7.9 kB` | | `components/Textarea/script.js.map` | `17.6 kB` | `17.6 kB` | | `components/Textarea/styles.css.map` | `3.8 kB` | `3.8 kB` | | `components/TextButton/script.js.map` | `16.9 kB` | `16.9 kB` | | `components/TextButton/styles.css.map` | `4.2 kB` | `4.2 kB` | | `components/Theme/script.js.map` | `21.4 kB` | `21.4 kB` | | `components/Theme/styles.css.map` | `2.2 kB` | `2.2 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` | `762 B` | `762 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` | `12.9 kB` | `12.9 kB` | | `utils/InlineFormControlLayout/styles.css.map` | `1.5 kB` | `1.5 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] commented 2 years ago

Styleguide deployed to https://square.github.io/maker/styleguide/fontsize-lineheight/#/

github-actions[bot] commented 2 years ago

Styleguide deployed to https://square.github.io/maker/styleguide/fontsize-lineheight/#/

github-actions[bot] commented 2 years ago

Styleguide deployed to https://square.github.io/maker/styleguide/fontsize-lineheight/#/

github-actions[bot] commented 2 years ago

Styleguide deployed to https://square.github.io/maker/styleguide/fontsize-lineheight/#/

github-actions[bot] commented 2 years ago

:tada: This PR is included in version 8.0.0-beta.2 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

github-actions[bot] commented 2 years ago

:tada: This PR is included in version 9.0.0-beta.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket: