From 6aae6268f31e664359e2c47f33ada5e9d9d6dfa0 Mon Sep 17 00:00:00 2001 From: hara-kazunari Date: Wed, 19 Apr 2023 18:26:11 +0900 Subject: [PATCH 1/7] ci: build token on ci --- .github/workflows/build.yml | 1 + .github/workflows/deploy-ui-catalog.yml | 1 + .github/workflows/deploy-ui-preview.yml | 1 + .github/workflows/test.yml | 1 + .github/workflows/visual-regression-test.yml | 1 + 5 files changed, 5 insertions(+) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 7056e969a..957303569 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -27,5 +27,6 @@ jobs: - name: build application run: | yarn lerna run --scope @openameba/spindle-hooks build + yarn lerna run --scope @openameba/spindle-tokens build yarn lerna run --scope @openameba/spindle-ui storybook:build yarn lerna run --scope @openameba/spindle-ui build diff --git a/.github/workflows/deploy-ui-catalog.yml b/.github/workflows/deploy-ui-catalog.yml index 0f00a8fd6..eebe3ca66 100644 --- a/.github/workflows/deploy-ui-catalog.yml +++ b/.github/workflows/deploy-ui-catalog.yml @@ -30,5 +30,6 @@ jobs: FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }} run: | yarn lerna run --scope @openameba/spindle-hooks build + yarn lerna run --scope @openameba/spindle-tokens build yarn lerna run --scope @openameba/spindle-ui storybook:build npx lerna run --scope @openameba/spindle-ui storybook:deploy -- --token $FIREBASE_TOKEN diff --git a/.github/workflows/deploy-ui-preview.yml b/.github/workflows/deploy-ui-preview.yml index 60ad09946..546d328a5 100644 --- a/.github/workflows/deploy-ui-preview.yml +++ b/.github/workflows/deploy-ui-preview.yml @@ -40,6 +40,7 @@ jobs: - run: npx lerna bootstrap -- --frozen-lockfile - run: | yarn lerna run --scope @openameba/spindle-hooks build + yarn lerna run --scope @openameba/spindle-tokens build yarn lerna run --scope @openameba/spindle-ui storybook:build - name: deploy to preview channel uses: FirebaseExtended/action-hosting-deploy@v0 diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 5a0c8748e..d1680c45f 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -27,4 +27,5 @@ jobs: - run: npx lerna bootstrap -- --frozen-lockfile - run: | yarn lerna run --scope @openameba/spindle-hooks build + yarn lerna run --scope @openameba/spindle-tokens build yarn test diff --git a/.github/workflows/visual-regression-test.yml b/.github/workflows/visual-regression-test.yml index 384868c8a..f23d85136 100644 --- a/.github/workflows/visual-regression-test.yml +++ b/.github/workflows/visual-regression-test.yml @@ -68,6 +68,7 @@ jobs: - run: npx lerna bootstrap -- --frozen-lockfile - run: | yarn lerna run --scope @openameba/spindle-hooks build + yarn lerna run --scope @openameba/spindle-tokens build yarn lerna run --scope @openameba/spindle-ui storybook:build - run: | npx lerna add --scope @openameba/spindle-ui --dev reg-keygen-git-hash-plugin From 94e5babeef199b1e62f93366bc186e9fc2f6cddc Mon Sep 17 00:00:00 2001 From: Kazunari Hara Date: Wed, 19 Apr 2023 11:59:42 +0900 Subject: [PATCH 2/7] feat(spindle-ui): use animation token --- packages/spindle-ui/package.json | 1 + packages/spindle-ui/src/Button/Button.css | 3 +- packages/spindle-ui/src/Dialog/Dialog.css | 17 +++++++-- .../src/DropdownMenu/DropdownMenu.css | 9 +++-- .../spindle-ui/src/Form/InvalidMessage.css | 3 +- packages/spindle-ui/src/Form/TextArea.css | 3 +- packages/spindle-ui/src/Form/TextField.css | 3 +- packages/spindle-ui/src/Form/ToggleSwitch.css | 3 +- .../spindle-ui/src/IconButton/IconButton.css | 3 +- .../spindle-ui/src/LinkButton/LinkButton.css | 3 +- packages/spindle-ui/src/List/MoreLink.css | 3 +- packages/spindle-ui/src/Modal/AppealModal.css | 17 +++++++-- packages/spindle-ui/src/Modal/SemiModal.css | 38 ++++++++++++++----- packages/spindle-ui/src/SnackBar/SnackBar.css | 8 +++- packages/spindle-ui/src/Toast/Toast.css | 8 +++- packages/spindle-ui/src/index.css | 1 + 16 files changed, 90 insertions(+), 33 deletions(-) diff --git a/packages/spindle-ui/package.json b/packages/spindle-ui/package.json index 04e0e6716..49e94e718 100644 --- a/packages/spindle-ui/package.json +++ b/packages/spindle-ui/package.json @@ -53,6 +53,7 @@ }, "dependencies": { "@openameba/spindle-hooks": "^0.14.0", + "@openameba/spindle-tokens": "^0.10.0", "ameba-color-palette.css": "^4.9.0", "react-merge-refs": "^1.1.0" }, diff --git a/packages/spindle-ui/src/Button/Button.css b/packages/spindle-ui/src/Button/Button.css index 5822c0db5..5915df26c 100644 --- a/packages/spindle-ui/src/Button/Button.css +++ b/packages/spindle-ui/src/Button/Button.css @@ -46,7 +46,8 @@ margin: 0; -webkit-tap-highlight-color: var(--Button-tapHighlightColor); text-align: center; - transition: background-color 0.3s; + transition: background-color var(--animation-content-change-duration) + var(--animation-content-change-easing); } .spui-Button:disabled { diff --git a/packages/spindle-ui/src/Dialog/Dialog.css b/packages/spindle-ui/src/Dialog/Dialog.css index 1a73e96c8..0c5e65683 100644 --- a/packages/spindle-ui/src/Dialog/Dialog.css +++ b/packages/spindle-ui/src/Dialog/Dialog.css @@ -34,14 +34,23 @@ } /* NOTE: set no animations to the dialog-polyfill browsers for stability */ -.spui-Dialog[open]:not(.spui-Dialog--closing), +/* CSS custom property seems not to work with ::backdrop */ .spui-Dialog[open]:not(.spui-Dialog--closing).spui-Dialog::backdrop { - animation: 0.35s cubic-bezier(0, 0, 0, 1) spui-Dialog-fade-in; + animation: spui-Dialog-fade-in 0.35s cubic-bezier(0.5, 0, 0.5, 1); +} + +.spui-Dialog[open]:not(.spui-Dialog--closing) { + animation: spui-Dialog-fade-in var(--animation-appear-in-duration) + var(--animation-appear-in-easing); } -.spui-Dialog--closing, .spui-Dialog--closing.spui-Dialog::backdrop { - animation: 0.15s cubic-bezier(0, 0, 0, 1) spui-Dialog-fade-out; + animation: spui-Dialog-fade-out 0.15s cubic-bezier(0.5, 0, 0.5, 1); +} + +.spui-Dialog--closing { + animation: spui-Dialog-fade-out var(--animation-disappear-duration) + var(--animation-disappear-easing); } @media (prefers-reduced-motion: reduce) { diff --git a/packages/spindle-ui/src/DropdownMenu/DropdownMenu.css b/packages/spindle-ui/src/DropdownMenu/DropdownMenu.css index 017babcf2..9b44af8ea 100644 --- a/packages/spindle-ui/src/DropdownMenu/DropdownMenu.css +++ b/packages/spindle-ui/src/DropdownMenu/DropdownMenu.css @@ -13,7 +13,8 @@ } .spui-DropdownMenu-menu { - animation: 0.3s spui-DropdownMenu-fade-in; + animation: spui-DropdownMenu-fade-in var(--animation-appear-in-duration) + var(--animation-appear-in-easing); background-color: var(--color-surface-primary); border-radius: 12px; box-shadow: 0px 11px 28px rgba(8, 18, 26, 0.12); @@ -28,7 +29,8 @@ /* stylelint-disable-next-line plugin/selector-bem-pattern */ .spui-DropdownMenu-menu.is-fade-out { - animation: 0.3s spui-DropdownMenu-fade-out; + animation: spui-DropdownMenu-fade-out var(--animation-disappear-duration) + var(--animation-disappear-easing); opacity: 0; } @@ -85,7 +87,8 @@ display: flex; font-size: 1em; position: relative; - transition: background-color 0.3s; + transition: background-color var(--animation-content-change-duration) + var(--animation-content-change-easing); width: 100%; } diff --git a/packages/spindle-ui/src/Form/InvalidMessage.css b/packages/spindle-ui/src/Form/InvalidMessage.css index 87ee61efd..df320901a 100644 --- a/packages/spindle-ui/src/Form/InvalidMessage.css +++ b/packages/spindle-ui/src/Form/InvalidMessage.css @@ -9,7 +9,8 @@ line-height: 1.4; margin: 8px 0 0; min-height: 1.1em; - transition: height 0.3s; + transition: height var(--animation-appear-in-duration) + var(--animation-appear-in-easing); } .spui-InvalidMessage[hidden] { diff --git a/packages/spindle-ui/src/Form/TextArea.css b/packages/spindle-ui/src/Form/TextArea.css index 492f967aa..d1d216db8 100644 --- a/packages/spindle-ui/src/Form/TextArea.css +++ b/packages/spindle-ui/src/Form/TextArea.css @@ -13,7 +13,8 @@ min-height: 92px; outline: none; padding: 12px 16px; - transition: box-shadow 0.3s; + transition: box-shadow var(--animation-content-change-duration) + var(--animation-content-change-easing); width: 100%; } diff --git a/packages/spindle-ui/src/Form/TextField.css b/packages/spindle-ui/src/Form/TextField.css index ffe8bff77..40947fec9 100644 --- a/packages/spindle-ui/src/Form/TextField.css +++ b/packages/spindle-ui/src/Form/TextField.css @@ -11,7 +11,8 @@ margin: 0; outline: none; padding: 0 16px; - transition: box-shadow 0.3s; + transition: box-shadow var(--animation-content-change-duration) + var(--animation-content-change-easing); width: 100%; } diff --git a/packages/spindle-ui/src/Form/ToggleSwitch.css b/packages/spindle-ui/src/Form/ToggleSwitch.css index 22da75345..ff46a7dd7 100644 --- a/packages/spindle-ui/src/Form/ToggleSwitch.css +++ b/packages/spindle-ui/src/Form/ToggleSwitch.css @@ -53,7 +53,8 @@ left: 4px; position: absolute; top: 4px; - transition: transform ease-out 0.3s; + transition: transform var(--animation-move-easing) + var(--animation-move-duration); width: 24px; } diff --git a/packages/spindle-ui/src/IconButton/IconButton.css b/packages/spindle-ui/src/IconButton/IconButton.css index 0cd347df6..1946a6e4b 100644 --- a/packages/spindle-ui/src/IconButton/IconButton.css +++ b/packages/spindle-ui/src/IconButton/IconButton.css @@ -47,7 +47,8 @@ padding: 0; -webkit-tap-highlight-color: var(--IconButton-tapHighlightColor); text-align: center; - transition: background-color 0.3s; + transition: background-color var(--animation-content-change-duration) + var(--animation-content-change-easing); } .spui-IconButton:disabled { diff --git a/packages/spindle-ui/src/LinkButton/LinkButton.css b/packages/spindle-ui/src/LinkButton/LinkButton.css index 155554103..751ec583a 100644 --- a/packages/spindle-ui/src/LinkButton/LinkButton.css +++ b/packages/spindle-ui/src/LinkButton/LinkButton.css @@ -48,7 +48,8 @@ -webkit-tap-highlight-color: var(--LinkButton-tapHighlightColor); text-align: center; text-decoration: none; - transition: background-color 0.3s; + transition: background-color var(--animation-content-change-duration) + var(--animation-content-change-easing); } .spui-LinkButton:focus { diff --git a/packages/spindle-ui/src/List/MoreLink.css b/packages/spindle-ui/src/List/MoreLink.css index d0d7c2149..d5477cba3 100644 --- a/packages/spindle-ui/src/List/MoreLink.css +++ b/packages/spindle-ui/src/List/MoreLink.css @@ -26,7 +26,8 @@ padding: 16px; -webkit-tap-highlight-color: var(--MoreLink-tapHighlightColor); text-decoration: none; - transition: background-color 0.3s; + transition: background-color var(--animation-content-change-duration) + var(--animation-content-change-easing); } .spui-MoreLink:focus { diff --git a/packages/spindle-ui/src/Modal/AppealModal.css b/packages/spindle-ui/src/Modal/AppealModal.css index 90a3ab54c..1a992c4e5 100644 --- a/packages/spindle-ui/src/Modal/AppealModal.css +++ b/packages/spindle-ui/src/Modal/AppealModal.css @@ -22,14 +22,23 @@ /* stylelint-disable plugin/selector-bem-pattern */ /* NOTE: set no animations to the dialog-polyfill browsers for stability */ -.spui-AppealModal[open]:not(.spui-AppealModal--closing), +/* CSS custom property seems not to work with ::backdrop */ .spui-AppealModal[open]:not(.spui-AppealModal--closing).spui-AppealModal::backdrop { - animation: 0.5s cubic-bezier(0, 0, 0, 1) spui-AppealModal-fade-in; + animation: spui-AppealModal-fade-in 0.35s cubic-bezier(0.5, 0, 0.5, 1); +} + +.spui-AppealModal[open]:not(.spui-AppealModal--closing) { + animation: spui-AppealModal-fade-in var(--animation-appear-in-duration) + var(--animation-appear-in-easing); } -.spui-AppealModal--closing, .spui-AppealModal--closing.spui-AppealModal::backdrop { - animation: 0.3s cubic-bezier(0, 0, 0, 1) spui-AppealModal-fade-out; + animation: spui-AppealModal-fade-out 0.15s cubic-bezier(0.5, 0, 0.5, 1); +} + +.spui-AppealModal--closing { + animation: spui-AppealModal-fade-out var(--animation-disappear-duration) + var(--animation-disappear-easing); } @media (prefers-reduced-motion: reduce) { diff --git a/packages/spindle-ui/src/Modal/SemiModal.css b/packages/spindle-ui/src/Modal/SemiModal.css index 976541897..091261b05 100644 --- a/packages/spindle-ui/src/Modal/SemiModal.css +++ b/packages/spindle-ui/src/Modal/SemiModal.css @@ -1,4 +1,5 @@ @import '../IconButton/IconButton.css'; + /* * SemiModal * NOTE: Styles can be overridden with "--SemiModal-*" variables @@ -31,24 +32,41 @@ /* stylelint-disable plugin/selector-bem-pattern */ /* NOTE: set no animations to the dialog-polyfill browsers for stability */ -.spui-SemiModal[data-type='popup'][open]:not(.spui-SemiModal--closing), -.spui-SemiModal[data-type='popup'][open]:not(.spui-SemiModal--closing).spui-SemiModal::backdrop, -.spui-SemiModal[data-type='sheet'][open]:not(.spui-SemiModal--closing).spui-SemiModal::backdrop { - animation: 350ms cubic-bezier(0, 0, 0, 1) spui-SemiModal-fade-in; +/* CSS custom property seems not to work with ::backdrop */ +.spui-SemiModal[data-type='popup'][open]:not(.spui-SemiModal--closing).spui-SemiModal::backdrop { + animation: spui-SemiModal-fade-in 0.35s cubic-bezier(0.5, 0, 0.5, 1); } -.spui-SemiModal--closing.spui-SemiModal[data-type='popup'], -.spui-SemiModal--closing[data-type='popup'].spui-SemiModal::backdrop, -.spui-SemiModal--closing[data-type='sheet'].spui-SemiModal::backdrop { - animation: 350ms cubic-bezier(0, 0, 0, 1) spui-SemiModal-fade-out; +.spui-SemiModal[data-type='popup'][open]:not(.spui-SemiModal--closing) { + animation: spui-SemiModal-fade-in var(--animation-appear-in-duration) + var(--animation-appear-in-easing); +} + +.spui-SemiModal--closing[data-type='popup'].spui-SemiModal::backdrop { + animation: spui-SemiModal-fade-out 0.15s cubic-bezier(0.5, 0, 0.5, 1); +} + +.spui-SemiModal--closing.spui-SemiModal[data-type='popup'] { + animation: spui-SemiModal-fade-out var(--animation-disappear-duration) + var(--animation-disappear-easing); +} + +.spui-SemiModal[data-type='sheet'][open]:not(.spui-SemiModal--closing).spui-SemiModal::backdrop { + animation: spui-SemiModal-fade-in 350ms cubic-bezier(0, 0, 0, 1) both; } .spui-SemiModal[data-type='sheet'][open]:not(.spui-SemiModal--closing, button) { - animation: both 350ms cubic-bezier(0, 0, 0, 1) spui-SemiModal-slide-in; + animation: spui-SemiModal-slide-in var(--animation-in-view-duration) + var(--animation-in-view-easing) both; +} + +.spui-SemiModal--closing[data-type='sheet'].spui-SemiModal::backdrop { + animation: spui-SemiModal-fade-out 350ms cubic-bezier(0, 0, 0, 1) both; } .spui-SemiModal--closing.spui-SemiModal[data-type='sheet'] { - animation: both 350ms cubic-bezier(0, 0, 0, 1) spui-SemiModal-slide-out; + animation: spui-SemiModal-slide-out var(--animation-out-of-view-duration) + var(--animation-out-of-view-easing) both; } @media (prefers-reduced-motion: reduce) { diff --git a/packages/spindle-ui/src/SnackBar/SnackBar.css b/packages/spindle-ui/src/SnackBar/SnackBar.css index 9b0961dfb..4e528cd48 100644 --- a/packages/spindle-ui/src/SnackBar/SnackBar.css +++ b/packages/spindle-ui/src/SnackBar/SnackBar.css @@ -90,7 +90,9 @@ } .spui-SnackBar--slide { - transition: transform 0.3s ease, opacity 0.3s ease; + transition: transform var(--animation-in-view-duration) + var(--animation-in-view-easing), + opacity var(--animation-in-view-duration) var(--animation-in-view-easing); } .spui-SnackBar--hidden { @@ -99,7 +101,9 @@ .spui-SnackBar-slide--in { opacity: 1; - transition: transform 0.5s ease, opacity 0.5s ease; + transition: transform var(--animation-duration-slow) + var(--animation-in-view-easing), + opacity var(--animation-duration-slow) var(--animation-in-view-easing); } .spui-SnackBar-slide--in.spui-SnackBar--top { diff --git a/packages/spindle-ui/src/Toast/Toast.css b/packages/spindle-ui/src/Toast/Toast.css index 6150623c1..c6980481a 100644 --- a/packages/spindle-ui/src/Toast/Toast.css +++ b/packages/spindle-ui/src/Toast/Toast.css @@ -60,7 +60,9 @@ } .spui-Toast--slide { - transition: transform 0.3s ease, opacity 0.3s ease; + transition: transform var(--animation-in-view-duration) + var(--animation-in-view-easing), + opacity var(--animation-in-view-duration) var(--animation-in-view-easing); } .spui-Toast--hidden { @@ -69,7 +71,9 @@ .spui-Toast-slide--in { opacity: 1; - transition: transform 0.5s ease, opacity 0.5s ease; + transition: transform var(--animation-duration-slow) + var(--animation-in-view-easing), + opacity var(--animation-duration-slow) var(--animation-in-view-easing); } .spui-Toast-slide--in.spui-Toast--top { diff --git a/packages/spindle-ui/src/index.css b/packages/spindle-ui/src/index.css index b45bb3450..0c8348d22 100644 --- a/packages/spindle-ui/src/index.css +++ b/packages/spindle-ui/src/index.css @@ -1,5 +1,6 @@ /* stylelint-disable plugin/selector-bem-pattern */ @import 'ameba-color-palette.css'; +@import '@openameba/spindle-tokens/dist/css/spindle-tokens-animation.css'; @import './Breadcrumb/Breadcrumb.css'; @import './BottomButton/BottomButton.css'; @import './Button/Button.css'; From 9cb15e9bfa401a9fac50b9e6f94a967d28e8ed45 Mon Sep 17 00:00:00 2001 From: Kazunari Hara Date: Thu, 20 Apr 2023 10:37:57 +0900 Subject: [PATCH 3/7] chore(spindle-ui): set node_module path --- .eslintignore | 1 + packages/spindle-ui/.storybook/main.js | 1 + packages/spindle-ui/package.json | 1 + packages/spindle-ui/postcss.config.js | 7 ++++++- yarn.lock | 23 ++++++++++++++++++++++- 5 files changed, 31 insertions(+), 2 deletions(-) diff --git a/.eslintignore b/.eslintignore index 8776ee690..4ce4e7d76 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,3 +1,4 @@ dist/ public/ packages/spindle-tokens/lib/*.js +postcss.config.js diff --git a/packages/spindle-ui/.storybook/main.js b/packages/spindle-ui/.storybook/main.js index eef0d0a4b..c7da82e24 100644 --- a/packages/spindle-ui/.storybook/main.js +++ b/packages/spindle-ui/.storybook/main.js @@ -6,6 +6,7 @@ module.exports = { '@storybook/addon-backgrounds', '@storybook/addon-docs', '@storybook/addon-viewport', + '@storybook/addon-postcss', ], staticDirs: ['../assets'], core: { diff --git a/packages/spindle-ui/package.json b/packages/spindle-ui/package.json index 49e94e718..f0b09f73e 100644 --- a/packages/spindle-ui/package.json +++ b/packages/spindle-ui/package.json @@ -63,6 +63,7 @@ "@storybook/addon-actions": "^6.5.9", "@storybook/addon-backgrounds": "^6.5.9", "@storybook/addon-docs": "^6.5.9", + "@storybook/addon-postcss": "^2.0.0", "@storybook/addon-viewport": "^6.5.9", "@storybook/builder-webpack5": "^6.5.9", "@storybook/manager-webpack5": "^6.5.9", diff --git a/packages/spindle-ui/postcss.config.js b/packages/spindle-ui/postcss.config.js index cba66fccf..f6fbbf723 100644 --- a/packages/spindle-ui/postcss.config.js +++ b/packages/spindle-ui/postcss.config.js @@ -1,3 +1,5 @@ +const path = require('path'); + module.exports = { /** * TODO: create .browserslistrc @@ -6,7 +8,10 @@ module.exports = { */ plugins: [ require('autoprefixer'), - require('postcss-import'), + require('postcss-import')({ + root: path.resolve(__dirname, '../../'), + path: ['node_modules', 'packages/*/node_modules'], + }), require('cssnano'), ], }; diff --git a/yarn.lock b/yarn.lock index 3f9ff2a82..96b3b1252 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4602,6 +4602,17 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" +"@storybook/addon-postcss@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@storybook/addon-postcss/-/addon-postcss-2.0.0.tgz#ec61cb9bb2662f408072b35c466c7df801c28498" + integrity sha512-Nt82A7e9zJH4+A+VzLKKswUfru+T6FJTakj4dccP0i8DSn7a0CkzRPrLuZBq8tg4voV6gD74bcDf3gViCVBGtA== + dependencies: + "@storybook/node-logger" "^6.1.14" + css-loader "^3.6.0" + postcss "^7.0.35" + postcss-loader "^4.2.0" + style-loader "^1.3.0" + "@storybook/addon-viewport@^6.5.9": version "6.5.9" resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-6.5.9.tgz#fc390ccebea56d2e874ed2fda085c09fe04dd240" @@ -5148,6 +5159,17 @@ npmlog "^5.0.1" pretty-hrtime "^1.0.3" +"@storybook/node-logger@^6.1.14": + version "6.5.16" + resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.5.16.tgz#d57fd6204c2abfbc297551d98ad5475dd73207cc" + integrity sha512-YjhBKrclQtjhqFNSO+BZK+RXOx6EQypAELJKoLFaawg331e8VUfvUuRCNB3fcEWp8G9oH13PQQte0OTjLyyOYg== + dependencies: + "@types/npmlog" "^4.1.2" + chalk "^4.1.0" + core-js "^3.8.2" + npmlog "^5.0.1" + pretty-hrtime "^1.0.3" + "@storybook/postinstall@6.5.9": version "6.5.9" resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-6.5.9.tgz#a5a2565808e9d7bc310e78c279b09ce337fe3457" @@ -24238,7 +24260,6 @@ textlint-rule-prefer-tari-tari@^1.0.3: textlint-rule-preset-ameba@openameba/textlint-rule-preset-ameba#v0.2.0: version "0.2.0" - uid "112f1c2b6412a5bdb99670150910ab2d8a515dab" resolved "https://codeload.github.com/openameba/textlint-rule-preset-ameba/tar.gz/112f1c2b6412a5bdb99670150910ab2d8a515dab" dependencies: "@textlint-ja/textlint-rule-no-dropping-i" "^1.0.0" From 177e8f4d1ed54095b587c8427aa3cb3367ff4739 Mon Sep 17 00:00:00 2001 From: Kazunari Hara Date: Thu, 20 Apr 2023 10:50:44 +0900 Subject: [PATCH 4/7] chore(spindle-ui): increase size budget for modal css --- packages/spindle-ui/bundlesize.config.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/spindle-ui/bundlesize.config.json b/packages/spindle-ui/bundlesize.config.json index 09c5941cf..9ba6c8ac1 100644 --- a/packages/spindle-ui/bundlesize.config.json +++ b/packages/spindle-ui/bundlesize.config.json @@ -42,7 +42,7 @@ }, { "path": "./dist/Modal/!(index).css", - "maxSize": "2.0 kB" + "maxSize": "2.1 kB" }, { "path": "./dist/SnackBar/!(index).css", From 51a2051e17f8cad0b75c2d69347416447c7f17f6 Mon Sep 17 00:00:00 2001 From: hara-kazunari Date: Fri, 21 Apr 2023 13:58:20 +0900 Subject: [PATCH 5/7] refactor(spindle-ui): load animation token via link --- packages/spindle-ui/.storybook/preview-head.html | 2 ++ packages/spindle-ui/src/index.css | 1 - 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/spindle-ui/.storybook/preview-head.html b/packages/spindle-ui/.storybook/preview-head.html index cea073813..236833123 100644 --- a/packages/spindle-ui/.storybook/preview-head.html +++ b/packages/spindle-ui/.storybook/preview-head.html @@ -1,3 +1,5 @@ + +