search

square / maker

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

refactor!: some pattern & prop renames, also some default theme changes #441

Closed pretzelhammer closed 2 years ago

pretzelhammer commented 2 years ago

This PR is an aggregate of the following PRs:

Migration Guide: 14.x -> 15.x

Breaking changes that LIKELY affect your app

(1) MButton pattern & variant renames

MButton patterns primary, secondary, and tertiary have been removed since they're identical to variants fill, outline, and ghost respectively. MButton variants primary, secondary, and tertiary have also been renamed to fill, outline, and ghost respectively. Filled button patterns primaryFilled, errorFilled, successFilled, warningFilled, infoFilled have been renamed to primaryFill, errorFill, successFill, warningFill, infoFill. Migration refactor table of examples:

before (14.x) after (15.x)
<m-button> <m-button> (no changes)
<m-button variant="primary"> <m-button variant="fill">
<m-button variant="secondary"> <m-button variant="outline">
<m-button variant="tertiary"> <m-button variant="ghost">
<m-button pattern="primary"> ** <m-button variant="fill">
<m-button pattern="secondary"> ** <m-button variant="outline">
<m-button pattern="tertiary"> ** <m-button variant="ghost">
<m-button pattern="primaryFilled"> <m-button pattern="primaryFill">
<m-button pattern="errorFilled"> <m-button pattern="errorFill">
<m-button pattern="successFilled"> <m-button pattern="successFill">
<m-button pattern="warningFilled"> <m-button pattern="warningFill">
<m-button pattern="infoFilled"> <m-button pattern="infoFill">

Note:** If you were using these deprecated patterns in a custom theme and wish to continue using them, you can update them from this:

button: {
  patterns: {
    primary: {
      /* customizations */
    },
    secondary: {
      /* customizations */
    },
    tertiary: {
      /* customizations */
    },
  },
},

To this:

button: {
  patterns: {
    primary: {
      variant: 'fill',
      /* customizations */
    },
    secondary: {
      variant: 'outline',
      /* customizations */
    },
    tertiary: {
      variant: 'ghost',
      /* customizations */
    },
  },
},

(2) MNotice prop rename

MNotice's variant prop has been renamed to display. Migration refactor table of examples:

before (14.x) after (15.x)
<m-notice> <m-notice> (no changes)
<m-notice variant="inline"> <m-notice display="inline">
<m-notice variant="block"> <m-notice display="block">

Breaking changes that LIKELY DO NOT affect your app

(3) Default theme changes

NOTE: If you're using MTheme at the root of your app and setting an explicit primary color then these changes won't affect your app. These changes only affect people who are using Maker without MTheme or with MTheme but aren't setting an explicit primary color and have been relying on the implicit primary color being #000000.

Within the default theme the primary color has changed from #000000 to #006aff, the derived contextual primary colors have been updated, the overlay color has changed from rgba(0, 0, 0, 0.3) to rgba(0, 0, 0, 0.32). The default parameters within the maker-colors utility function have also been updated accordingly.

If you weren't using MTheme before and relying on the implicit primary color being #000000, e.g.

<template>
  <div id="app">
    <m-button>
      i expect this button to be #000000
      but if i migrate to 15.x it will be #006aff
    </m-button>
  </div>
</template>

You will now have to import MTheme and explicitly set the primary color to #000000, e.g.

<template>
  <div id="app">
    <m-theme :theme="{ colors: { primary: '#000000' }, }">
      <m-button>
        now this button is guaranteed to be
        #000000 in both 14.x and 15.x
      </m-button>
    </m-theme>
  </div>
</template>

Also, if you were previously using the maker-colors utility function and relying on the implicit primary color being #000000 by calling the function with only the first parameter, e.g. makerColors(bgColor), then you now also have to pass #000000 as an explicit 2nd argument to maintain the same appearance in your app migrating to 15.x from 14.x, e.g. makerColors(bgColor, '#000000'). Again, if you were already using the utility function with an explicit 2nd parameter in 14.x, makerColors(bgColor, primaryColor), then you do not have to make any changes when migrating to 15.x.

github-actions[bot] commented 2 years ago

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] commented 2 years ago

📊 Package size report   0.2%↑

File Before After
components/Button/script.js 5.5 kB -0.34%↓5.5 kB
components/Button/styles.css 5.2 kB 0.06%↑5.2 kB
components/Calendar/script.js 7.4 kB -0.08%↓7.4 kB
components/Calendar/styles.css 2.1 kB 0.1%↑2.1 kB
components/PinInput/script.js 5.8 kB -0.07%↓5.8 kB
components/Stepper/script.js 5.7 kB -0.11%↓5.7 kB
components/Theme/script.js 15.9 kB 0.7%↑16.0 kB
utils/maker-colors.js 3.1 kB 23%↑3.8 kB
Total (Includes all files) 1.7 MB 0.2%↑1.7 MB
Tarball size 324.5 kB 0.2%↑325.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/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/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/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/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/major-15/LICENSE) | `552 B` | | [`package.json`](https://github.com/square/maker/blob/major-15/package.json) | `5.3 kB` | | [`README.md`](https://github.com/square/maker/blob/major-15/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/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` | -0.01%↓`55.9 kB` | | `components/ActionBar/styles.css.map` | `18.9 kB` | -0.02%↓`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` | -0.21%↓`24.5 kB` | | `components/Button/styles.css.map` | `10.7 kB` | -0.38%↓`10.7 kB` | | `components/Calendar/script.js.map` | `28.8 kB` | -0.04%↓`28.8 kB` | | `components/Calendar/styles.css.map` | `10.2 kB` | -0.06%↓`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.7 kB` | -0.04%↓`23.6 kB` | | `components/PinInput/styles.css.map` | `7.1 kB` | -0.06%↓`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` | -0.05%↓`22.2 kB` | | `components/Stepper/styles.css.map` | `6.6 kB` | -0.09%↓`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.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` | `49.7 kB` | 0.9%↑`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` | `12.9 kB` | 15%↑`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

github-actions[bot] commented 2 years ago

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] commented 2 years ago

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

The release is available on:

Your semantic-release bot :package::rocket: