search

square / maker

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

feat(notice): more themable notices #322

Closed pretzelhammer closed 2 years ago

pretzelhammer commented 2 years ago

Describe the problem this PR addresses

contextual colors for notices / text buttons

Describe the changes in this PR

read diff

Other information

https://square.github.io/maker/styleguide/theme-notices/#/Notice

github-actions[bot] commented 2 years ago

Styleguide deployed to https://square.github.io/maker/styleguide/theme-notices/#/

github-actions[bot] commented 2 years ago

📊 Package size report   0.4%↑

File Before After
components/Notice/script.js 4.7 kB 8%↑5.1 kB
components/Notice/styles.css 1.1 kB -0.18%↓1.1 kB
components/TextButton/script.js 3.7 kB 1%↑3.8 kB
components/Theme/script.js 7.6 kB 11%↑8.4 kB
Total (Includes all files) 1.4 MB 0.4%↑1.4 MB
Tarball size 256.3 kB 0.5%↑257.5 kB
Unchanged files | File | Size | | --------------------------------------------------------------------------------- | --------: | | `components/ActionBar/index.js` | `46 B` | | `components/ActionBar/script.js` | `14.5 kB` | | `components/ActionBar/styles.css` | `5.7 kB` | | `components/Blade/index.js` | `46 B` | | `components/Blade/script.js` | `6.2 kB` | | `components/Blade/styles.css` | `740 B` | | `components/Button/index.js` | `46 B` | | `components/Button/script.js` | `6.3 kB` | | `components/Button/styles.css` | `3.9 kB` | | `components/Calendar/index.js` | `46 B` | | `components/Calendar/script.js` | `7.7 kB` | | `components/Calendar/styles.css` | `2.2 kB` | | `components/Card/index.js` | `46 B` | | `components/Card/script.js` | `2.4 kB` | | `components/Card/styles.css` | `632 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.4 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` | `7.4 kB` | | `components/Dialog/styles.css` | `1.2 kB` | | `components/Divider/index.js` | `46 B` | | `components/Divider/script.js` | `1.7 kB` | | `components/Divider/styles.css` | `172 B` | | `components/Image/index.js` | `46 B` | | `components/Image/script.js` | `3.8 kB` | | `components/Image/styles.css` | `608 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.1 kB` | | `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` | `10.9 kB` | | `components/Menu/styles.css` | `3.0 kB` | | `components/Modal/index.js` | `46 B` | | `components/Modal/script.js` | `9.8 kB` | | `components/Modal/styles.css` | `1.1 kB` | | `components/Notice/index.js` | `46 B` | | `components/PinInput/index.js` | `46 B` | | `components/PinInput/script.js` | `5.8 kB` | | `components/PinInput/styles.css` | `1.4 kB` | | `components/Popover/index.js` | `46 B` | | `components/Popover/script.js` | `10.6 kB` | | `components/Popover/styles.css` | `549 B` | | `components/ProgressBar/index.js` | `46 B` | | `components/ProgressBar/script.js` | `2.9 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.5 kB` | | `components/SegmentedControl/index.js` | `46 B` | | `components/SegmentedControl/script.js` | `3.2 kB` | | `components/SegmentedControl/styles.css` | `1.5 kB` | | `components/Select/index.js` | `46 B` | | `components/Select/script.js` | `5.3 kB` | | `components/Select/styles.css` | `2.5 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` | `5.9 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.5 kB` | | `components/TextButton/index.js` | `46 B` | | `components/TextButton/styles.css` | `1.6 kB` | | `components/Theme/index.js` | `46 B` | | `components/Theme/styles.css` | `242 B` | | `components/Toggle/index.js` | `46 B` | | `components/Toggle/script.js` | `3.7 kB` | | `components/Toggle/styles.css` | `3.5 kB` | | `components/TouchCapture/index.js` | `25 B` | | `components/TouchCapture/script.js` | `3.5 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.6 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.5 kB` | | [`LICENSE`](https://github.com/square/maker/blob/theme-notices/LICENSE) | `552 B` | | [`package.json`](https://github.com/square/maker/blob/theme-notices/package.json) | `5.1 kB` | | [`README.md`](https://github.com/square/maker/blob/theme-notices/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/constants.js` | `689 B` | | `utils/css-validator.js` | `933 B` | | `utils/debug.js` | `1.0 kB` | | `utils/get-contrast.js` | `1.1 kB` | | `utils/InlineFormControlLayout/index.js` | `46 B` | | `utils/InlineFormControlLayout/script.js` | `2.5 kB` | | `utils/InlineFormControlLayout/styles.css` | `315 B` | | `utils/Row/index.js` | `46 B` | | `utils/Row/script.js` | `2.4 kB` | | `utils/Row/styles.css` | `610 B` | | `utils/Transition/index.js` | `25 B` | | `utils/Transition/script.js` | `2.4 kB` | | `utils/TransitionResponsive/index.js` | `25 B` | | `utils/TransitionResponsive/script.js` | `2.2 kB` | | `utils/transitions.js` | `4.2 kB` |
Hidden files | File | Before | After | | ----------------------------------------------- | --------: | ----------------------: | | `components/ActionBar/script.js.map` | `55.6 kB` | `55.6 kB` | | `components/ActionBar/styles.css.map` | `18.6 kB` | `18.6 kB` | | `components/Blade/script.js.map` | `23.3 kB` | `23.3 kB` | | `components/Blade/styles.css.map` | `3.9 kB` | `3.9 kB` | | `components/Button/script.js.map` | `25.5 kB` | `25.5 kB` | | `components/Button/styles.css.map` | `11.2 kB` | `11.2 kB` | | `components/Calendar/script.js.map` | `29.7 kB` | `29.7 kB` | | `components/Calendar/styles.css.map` | `10.5 kB` | `10.5 kB` | | `components/Card/script.js.map` | `11.9 kB` | `11.9 kB` | | `components/Card/styles.css.map` | `1.6 kB` | `1.6 kB` | | `components/Checkbox/script.js.map` | `18.7 kB` | `18.7 kB` | | `components/Checkbox/styles.css.map` | `3.8 kB` | `3.8 kB` | | `components/Choice/script.js.map` | `20.8 kB` | `20.8 kB` | | `components/Choice/styles.css.map` | `6.5 kB` | `6.5 kB` | | `components/Container/script.js.map` | `18.2 kB` | `18.2 kB` | | `components/Container/styles.css.map` | `5.1 kB` | `5.1 kB` | | `components/Dialog/script.js.map` | `28.6 kB` | `28.6 kB` | | `components/Dialog/styles.css.map` | `6.8 kB` | `6.8 kB` | | `components/Divider/script.js.map` | `8.8 kB` | `8.8 kB` | | `components/Divider/styles.css.map` | `735 B` | `735 B` | | `components/Image/script.js.map` | `15.6 kB` | `15.6 kB` | | `components/Image/styles.css.map` | `3.7 kB` | `3.7 kB` | | `components/ImageUploader/script.js.map` | `46.1 kB` | `46.1 kB` | | `components/ImageUploader/styles.css.map` | `20.3 kB` | `20.3 kB` | | `components/Input/script.js.map` | `20.3 kB` | `20.3 kB` | | `components/Input/styles.css.map` | `4.9 kB` | `4.9 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` | `41.3 kB` | `41.3 kB` | | `components/Menu/styles.css.map` | `13.1 kB` | `13.1 kB` | | `components/Modal/script.js.map` | `34.9 kB` | `34.9 kB` | | `components/Modal/styles.css.map` | `10.7 kB` | `10.7 kB` | | `components/Notice/script.js.map` | `18.7 kB` | 5%↑`19.7 kB` | | `components/Notice/styles.css.map` | `4.3 kB` | 18%↑`5.1 kB` | | `components/PinInput/script.js.map` | `23.4 kB` | `23.4 kB` | | `components/PinInput/styles.css.map` | `6.9 kB` | `6.9 kB` | | `components/Popover/script.js.map` | `37.6 kB` | `37.6 kB` | | `components/Popover/styles.css.map` | `6.9 kB` | `6.9 kB` | | `components/ProgressBar/script.js.map` | `13.4 kB` | `13.4 kB` | | `components/ProgressBar/styles.css.map` | `2.7 kB` | `2.7 kB` | | `components/Radio/script.js.map` | `17.6 kB` | `17.6 kB` | | `components/Radio/styles.css.map` | `3.7 kB` | `3.7 kB` | | `components/SegmentedControl/script.js.map` | `14.9 kB` | `14.9 kB` | | `components/SegmentedControl/styles.css.map` | `4.0 kB` | `4.0 kB` | | `components/Select/script.js.map` | `23.9 kB` | `23.9 kB` | | `components/Select/styles.css.map` | `6.1 kB` | `6.1 kB` | | `components/Skeleton/script.js.map` | `17.8 kB` | `17.8 kB` | | `components/Skeleton/styles.css.map` | `3.1 kB` | `3.1 kB` | | `components/StarRating/script.js.map` | `22.3 kB` | `22.3 kB` | | `components/StarRating/styles.css.map` | `6.3 kB` | `6.3 kB` | | `components/Stepper/script.js.map` | `22.2 kB` | `22.2 kB` | | `components/Stepper/styles.css.map` | `6.6 kB` | `6.6 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.7 kB` | `17.7 kB` | | `components/Textarea/styles.css.map` | `3.9 kB` | `3.9 kB` | | `components/TextButton/script.js.map` | `17.0 kB` | 1%↑`17.2 kB` | | `components/TextButton/styles.css.map` | `4.3 kB` | 4%↑`4.5 kB` | | `components/Theme/script.js.map` | `28.0 kB` | 7%↑`30.0 kB` | | `components/Theme/styles.css.map` | `3.1 kB` | `3.1 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.4 kB` | `14.4 kB` | | `components/TransitionSpringLeft/script.js.map` | `10.5 kB` | `10.5 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.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.6 kB` | `3.6 kB` | | `utils/get-contrast.js.map` | `4.9 kB` | `4.9 kB` | | `utils/InlineFormControlLayout/script.js.map` | `12.6 kB` | `12.6 kB` | | `utils/InlineFormControlLayout/styles.css.map` | `1.4 kB` | `1.4 kB` | | `utils/Row/script.js.map` | `11.5 kB` | `11.5 kB` | | `utils/Row/styles.css.map` | `1.8 kB` | `1.8 kB` | | `utils/Transition/script.js.map` | `10.7 kB` | `10.7 kB` | | `utils/TransitionResponsive/script.js.map` | `10.3 kB` | `10.3 kB` | | `utils/transitions.js.map` | `16.8 kB` | `16.8 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/theme-notices/#/

github-actions[bot] commented 2 years ago

Styleguide deployed to https://square.github.io/maker/styleguide/theme-notices/#/

github-actions[bot] commented 2 years ago

Styleguide deployed to https://square.github.io/maker/styleguide/theme-notices/#/

github-actions[bot] commented 2 years ago

Styleguide deployed to https://square.github.io/maker/styleguide/theme-notices/#/

landondurnan commented 2 years ago

The dark theme preview and showing how notices work with different backgrounds is a really nice touch. Showing how we support light / dark backgrounds and the full range of different background colors is a very unique aspect to Maker.

Since we're also talking about moving our contrast methods internally for neutral colors generated, it's very similar to checks and output being done in the notice demo. While we can support manually passing different values, likely the ideal state for all generated colors is to get Maker to do it for the consumer. That way a Maker theme / user can pass the least amount of data possible.

Would it be possible to build in the contrast logic and color generation inside of the Notice component as a start to that optimization? We could have the same demo of how Notices work with different background colors, but we internalize some of the JS code we're documenting as an external requirement to automatically happen internally. Then the demo could show what happens with just changing the background color.

github-actions[bot] commented 2 years ago

Styleguide deployed to https://square.github.io/maker/styleguide/theme-notices/#/

pretzelhammer commented 2 years ago

@landondurnan both Lauren and I would like to move more of the color generation code from Website to Maker. We're thinking for starters to expose more util functions from Maker which would generate stuff like neutrals and contextual colors given a background color (similarly to how we do so in the ThemeTest lab). That's not within the scope of this PR though. I think the sequencing would likely be:

  1. Merge & release this PR
  2. Update Maker in Website to use the new themeable contextual MNotices
  3. Implement MVP Pill component
  4. Update Maker in Website to use new MPill component (which will also support contextual colors)
  5. Move Website color generation code into Maker, export the logic as util functions
  6. Update Maker in Website, remove all of Website's color generation code and replace it with Maker's
github-actions[bot] commented 2 years ago

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

The release is available on:

Your semantic-release bot :package::rocket: