fix: update design token usage #652

yue4u · 2024-11-13T04:41:42Z

やったこと

tokenの使用ケースを更新しました
デザイン側の調整まだ必要なためdisable/readonly系を透過を使う形に戻しました

動作確認環境

チェックリスト

不要なチェック項目は消して構いません

破壊的変更がある場合には、対象のパッケージのメジャーバージョンが上がっていることを確認した
追加したコンポーネントが index.ts から再 export されている
README やドキュメントに影響があることを確認した

github-actions · 2024-11-13T04:44:21Z

Visit the preview URL for this PR (updated for commit df4f644):

https://pixiv-charcoal-web--pr652-yue-replace-token1-m-g5770as6.web.app

_{(expires Wed, 27 Nov 2024 06:42:36 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 314b26d3adca98a761c7e4d9922ebb206ff024a0}

github-actions · 2024-11-13T04:45:16Z

Size Change: 0 B

Total Size: 540 kB

ℹ️ View Unchanged

Filename	Size
`./packages/foundation/dist/border-radius.d.ts`	692 B
`./packages/foundation/dist/breakpoint.d.ts`	225 B
`./packages/foundation/dist/color.d.ts`	171 B
`./packages/foundation/dist/effect.d.ts`	1.08 kB
`./packages/foundation/dist/grid.d.ts`	396 B
`./packages/foundation/dist/index.cjs.js`	2.82 kB
`./packages/foundation/dist/index.d.ts`	230 B
`./packages/foundation/dist/index.esm.js`	1.44 kB
`./packages/foundation/dist/spacing.d.ts`	305 B
`./packages/foundation/dist/typography.d.ts`	790 B
`./packages/icons-cli/dist/index.js`	20.3 kB
`./packages/icons/dist/charcoalIconFiles.d.ts`	4.74 kB
`./packages/icons/dist/index.cjs.js`	9.38 kB
`./packages/icons/dist/index.d.ts`	478 B
`./packages/icons/dist/index.esm.js`	7.93 kB
`./packages/icons/dist/loaders/CharcoalIconFilesLoader.d.ts`	7.49 kB
`./packages/icons/dist/loaders/CustomIconLoader.d.ts`	417 B
`./packages/icons/dist/loaders/index.d.ts`	181 B
`./packages/icons/dist/loaders/Loadable.d.ts`	98 B
`./packages/icons/dist/loaders/PixivIconLoadError.d.ts`	153 B
`./packages/icons/dist/PixivIcon.d.ts`	1.55 kB
`./packages/icons/dist/PixivIcon.story.d.ts`	428 B
`./packages/icons/dist/PixivIcon.test.d.ts`	55 B
`./packages/icons/dist/ssr.d.ts`	75 B
`./packages/pullrequest-cli/dist/index.js`	6.9 kB
`./packages/react-sandbox/dist/_lib/compat.d.ts`	427 B
`./packages/react-sandbox/dist/_lib/ComponentAbstraction.d.ts`	933 B
`./packages/react-sandbox/dist/components/Carousel/index.d.ts`	1.35 kB
`./packages/react-sandbox/dist/components/CarouselButton/index.d.ts`	619 B
`./packages/react-sandbox/dist/components/Filter/index.d.ts`	1.12 kB
`./packages/react-sandbox/dist/components/HintText/index.d.ts`	298 B
`./packages/react-sandbox/dist/components/icons/Base.d.ts`	706 B
`./packages/react-sandbox/dist/components/icons/DotsIcon.d.ts`	282 B
`./packages/react-sandbox/dist/components/icons/InfoIcon.d.ts`	87 B
`./packages/react-sandbox/dist/components/icons/NextIcon.d.ts`	281 B
`./packages/react-sandbox/dist/components/icons/WedgeIcon.d.ts`	462 B
`./packages/react-sandbox/dist/components/Layout/index.d.ts`	2.07 kB
`./packages/react-sandbox/dist/components/LeftMenu/index.d.ts`	382 B
`./packages/react-sandbox/dist/components/MenuListItem/index.d.ts`	1.8 kB
`./packages/react-sandbox/dist/components/Pager/index.d.ts`	529 B
`./packages/react-sandbox/dist/components/SwitchCheckbox/index.d.ts`	340 B
`./packages/react-sandbox/dist/components/TextEllipsis/helper.d.ts`	235 B
`./packages/react-sandbox/dist/components/TextEllipsis/index.d.ts`	381 B
`./packages/react-sandbox/dist/components/WithIcon/index.d.ts`	1.07 kB
`./packages/react-sandbox/dist/foundation/constants.d.ts`	208 B
`./packages/react-sandbox/dist/foundation/hooks.d.ts`	1.04 kB
`./packages/react-sandbox/dist/foundation/support.d.ts`	131 B
`./packages/react-sandbox/dist/foundation/utils.d.ts`	613 B
`./packages/react-sandbox/dist/hooks/index.d.ts`	148 B
`./packages/react-sandbox/dist/index.cjs.js`	63.4 kB
`./packages/react-sandbox/dist/index.d.ts`	1.38 kB
`./packages/react-sandbox/dist/index.esm.js`	53.6 kB
`./packages/react-sandbox/dist/misc/storybook-helper.d.ts`	343 B
`./packages/react-sandbox/dist/styled.d.ts`	12.3 kB
`./packages/react/dist/_lib/compat.d.ts`	1.19 kB
`./packages/react/dist/_lib/createDivComponent.d.ts`	565 B
`./packages/react/dist/_lib/index.d.ts`	1.02 kB
`./packages/react/dist/_lib/useClassNames.d.ts`	192 B
`./packages/react/dist/_lib/useForwardedRef.d.ts`	169 B
`./packages/react/dist/components/Button/index.d.ts`	692 B
`./packages/react/dist/components/Checkbox/CheckboxInput/index.d.ts`	628 B
`./packages/react/dist/components/Checkbox/CheckboxWithLabel.d.ts`	307 B
`./packages/react/dist/components/Checkbox/index.d.ts`	668 B
`./packages/react/dist/components/Clickable/index.d.ts`	516 B
`./packages/react/dist/components/DropdownSelector/Divider/index.d.ts`	105 B
`./packages/react/dist/components/DropdownSelector/DropdownMenuItem/index.d.ts`	313 B
`./packages/react/dist/components/DropdownSelector/DropdownPopover.d.ts`	486 B
`./packages/react/dist/components/DropdownSelector/index.d.ts`	703 B
`./packages/react/dist/components/DropdownSelector/ListItem/index.d.ts`	490 B
`./packages/react/dist/components/DropdownSelector/MenuItem/index.d.ts`	771 B
`./packages/react/dist/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.d.ts`	373 B
`./packages/react/dist/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.d.ts`	480 B
`./packages/react/dist/components/DropdownSelector/MenuItemGroup/index.d.ts`	414 B
`./packages/react/dist/components/DropdownSelector/MenuList/index.d.ts`	540 B
`./packages/react/dist/components/DropdownSelector/MenuList/internals/getValuesRecursive.d.ts`	412 B
`./packages/react/dist/components/DropdownSelector/MenuList/MenuListContext.d.ts`	405 B
`./packages/react/dist/components/DropdownSelector/Popover/index.d.ts`	630 B
`./packages/react/dist/components/DropdownSelector/Popover/usePreventScroll.d.ts`	140 B
`./packages/react/dist/components/DropdownSelector/utils/findPreviewRecursive.d.ts`	411 B
`./packages/react/dist/components/FieldLabel/index.d.ts`	492 B
`./packages/react/dist/components/Icon/index.d.ts`	498 B
`./packages/react/dist/components/IconButton/index.d.ts`	630 B
`./packages/react/dist/components/LoadingSpinner/index.d.ts`	678 B
`./packages/react/dist/components/Modal/Dialog/index.d.ts`	418 B
`./packages/react/dist/components/Modal/index.d.ts`	2.09 kB
`./packages/react/dist/components/Modal/ModalBackgroundContext.d.ts`	231 B
`./packages/react/dist/components/Modal/ModalPlumbing.d.ts`	1.57 kB
`./packages/react/dist/components/Modal/useCustomModalOverlay.d.ts`	689 B
`./packages/react/dist/components/Radio/index.d.ts`	494 B
`./packages/react/dist/components/Radio/RadioGroup/index.d.ts`	699 B
`./packages/react/dist/components/Radio/RadioGroupContext.d.ts`	339 B
`./packages/react/dist/components/Radio/RadioInput/index.d.ts`	584 B
`./packages/react/dist/components/SegmentedControl/index.d.ts`	758 B
`./packages/react/dist/components/SegmentedControl/RadioGroupContext.d.ts`	362 B
`./packages/react/dist/components/Switch/index.d.ts`	452 B
`./packages/react/dist/components/Switch/SwitchInput/index.d.ts`	482 B
`./packages/react/dist/components/Switch/SwitchWithLabel.d.ts`	308 B
`./packages/react/dist/components/TagItem/index.d.ts`	730 B
`./packages/react/dist/components/TextArea/index.d.ts`	1.32 kB
`./packages/react/dist/components/TextField/AssistiveText/index.d.ts`	543 B
`./packages/react/dist/components/TextField/index.d.ts`	1.44 kB
`./packages/react/dist/components/TextField/useFocusWithClick.d.ts`	242 B
`./packages/react/dist/core/CharcoalProvider.d.ts`	242 B
`./packages/react/dist/core/OverlayProvider.d.ts`	101 B
`./packages/react/dist/core/SSRProvider.d.ts`	242 B
`./packages/react/dist/index.cjs.js`	52.7 kB
`./packages/react/dist/index.d.ts`	2.05 kB
`./packages/react/dist/index.esm.js`	47.3 kB
`./packages/styled/dist/addThemeUtils.story.d.ts`	302 B
`./packages/styled/dist/builders/border.d.ts`	685 B
`./packages/styled/dist/builders/borderRadius.d.ts`	440 B
`./packages/styled/dist/builders/colors.d.ts`	1.3 kB
`./packages/styled/dist/builders/elementEffect.d.ts`	533 B
`./packages/styled/dist/builders/o.d.ts`	5.91 kB
`./packages/styled/dist/builders/outline.d.ts`	638 B
`./packages/styled/dist/builders/size.d.ts`	1.19 kB
`./packages/styled/dist/builders/spacing.d.ts`	1.17 kB
`./packages/styled/dist/builders/transition.d.ts`	287 B
`./packages/styled/dist/builders/typography.d.ts`	624 B
`./packages/styled/dist/defineThemeVariables.test.d.ts`	66 B
`./packages/styled/dist/factories/lib.d.ts`	3.96 kB
`./packages/styled/dist/helper.d.ts`	2.01 kB
`./packages/styled/dist/index.cjs.js`	30.9 kB
`./packages/styled/dist/index.d.ts`	6.82 kB
`./packages/styled/dist/index.esm.js`	27.6 kB
`./packages/styled/dist/index.test.d.ts`	204 B
`./packages/styled/dist/internals/index.d.ts`	1.6 kB
`./packages/styled/dist/SetThemeScript.d.ts`	905 B
`./packages/styled/dist/storyHelper.d.ts`	386 B
`./packages/styled/dist/styles/assertiveRingCss.d.ts`	141 B
`./packages/styled/dist/styles/disabledCss.d.ts`	131 B
`./packages/styled/dist/styles/focusVisibleFocusRingCss.d.ts`	318 B
`./packages/styled/dist/TokenInjector.d.ts`	505 B
`./packages/styled/dist/util.d.ts`	4.24 kB
`./packages/styled/dist/utils/addThemeUtils.d.ts`	383 B
`./packages/styled/dist/utils/CharcoalStyledTheme.d.ts`	1.43 kB
`./packages/styled/dist/utils/gap.d.ts`	473 B
`./packages/styled/dist/utils/helpers/pxIfNum.d.ts`	99 B
`./packages/styled/dist/utils/helpers/SpacingType.d.ts`	137 B
`./packages/styled/dist/utils/margin.d.ts`	905 B
`./packages/styled/dist/utils/padding.d.ts`	935 B
`./packages/styled/dist/utils/typographyCss.d.ts`	207 B
`./packages/tailwind-config/dist/_lib/compat.d.ts`	423 B
`./packages/tailwind-config/dist/_lib/TailwindBuild.d.ts`	755 B
`./packages/tailwind-config/dist/colors/plugin.d.ts`	443 B
`./packages/tailwind-config/dist/colors/plugin.test.d.ts`	52 B
`./packages/tailwind-config/dist/colors/toTailwindConfig.d.ts`	399 B
`./packages/tailwind-config/dist/colors/toTailwindConfig.test.d.ts`	62 B
`./packages/tailwind-config/dist/colors/utils.d.ts`	347 B
`./packages/tailwind-config/dist/docs/borderRadius/BorderRadius.d.ts`	119 B
`./packages/tailwind-config/dist/docs/borderRadius/index.d.ts`	175 B
`./packages/tailwind-config/dist/docs/colors/Colors.d.ts`	107 B
`./packages/tailwind-config/dist/docs/colors/index.d.ts`	201 B
`./packages/tailwind-config/dist/docs/colors/TextBgColor.d.ts`	175 B
`./packages/tailwind-config/dist/docs/colors/TextBgColor.story.d.ts`	298 B
`./packages/tailwind-config/dist/docs/colors/TextColors.d.ts`	115 B
`./packages/tailwind-config/dist/docs/gradient/Gradients.d.ts`	113 B
`./packages/tailwind-config/dist/docs/gradient/index.d.ts`	433 B
`./packages/tailwind-config/dist/docs/gradient/utils.d.ts`	120 B
`./packages/tailwind-config/dist/docs/index.d.ts`	360 B
`./packages/tailwind-config/dist/docs/screens/index.d.ts`	160 B
`./packages/tailwind-config/dist/docs/screens/Screens.d.ts`	109 B
`./packages/tailwind-config/dist/docs/spacing/index.d.ts`	160 B
`./packages/tailwind-config/dist/docs/spacing/Spacing.d.ts`	109 B
`./packages/tailwind-config/dist/docs/typography/HalfLeading.d.ts`	117 B
`./packages/tailwind-config/dist/docs/typography/index.d.ts`	346 B
`./packages/tailwind-config/dist/docs/typography/Sizes.d.ts`	105 B
`./packages/tailwind-config/dist/foundation.d.ts`	360 B
`./packages/tailwind-config/dist/gradient/plugin.d.ts`	816 B
`./packages/tailwind-config/dist/gradient/plugin.test.d.ts`	52 B
`./packages/tailwind-config/dist/index.cjs.js`	11.4 kB
`./packages/tailwind-config/dist/index.d.ts`	378 B
`./packages/tailwind-config/dist/index.esm.js`	9.56 kB
`./packages/tailwind-config/dist/index.test.d.ts`	51 B
`./packages/tailwind-config/dist/types.d.ts`	855 B
`./packages/tailwind-config/dist/typography/plugin.d.ts`	146 B
`./packages/tailwind-config/dist/util.d.ts`	661 B
`./packages/tailwind-diff/dist/commands/check.d.ts`	296 B
`./packages/tailwind-diff/dist/commands/check.js`	4.37 kB
`./packages/tailwind-diff/dist/commands/dump.d.ts`	185 B
`./packages/tailwind-diff/dist/commands/dump.js`	1.26 kB
`./packages/tailwind-diff/dist/defer.d.ts`	164 B
`./packages/tailwind-diff/dist/defer.js`	792 B
`./packages/tailwind-diff/dist/index.d.ts`	46 B
`./packages/tailwind-diff/dist/index.js`	1.84 kB
`./packages/tailwind-diff/dist/packageManager.d.ts`	323 B
`./packages/tailwind-diff/dist/packageManager.js`	1.85 kB
`./packages/tailwind-diff/dist/style.d.ts`	436 B
`./packages/tailwind-diff/dist/style.js`	2.68 kB
`./packages/tailwind-diff/dist/withPackages.d.ts`	464 B
`./packages/tailwind-diff/dist/withPackages.js`	3.24 kB
`./packages/theme/dist/abstract-theme.d.ts`	1.19 kB
`./packages/theme/dist/css/_variables_dark.css.d.ts`	26 B
`./packages/theme/dist/css/_variables_light.css.d.ts`	26 B
`./packages/theme/dist/default.d.ts`	163 B
`./packages/theme/dist/index.cjs.js`	5.49 kB
`./packages/theme/dist/index.d.ts`	121 B
`./packages/theme/dist/index.esm.js`	3.49 kB
`./packages/theme/dist/theme.d.ts`	2.87 kB
`./packages/theme/dist/token-object/helpers/changecase-keys.d.ts`	554 B
`./packages/theme/dist/token-object/helpers/changecase-keys.test-d.d.ts`	63 B
`./packages/theme/dist/token-object/helpers/changecase-keys.test.d.ts`	61 B
`./packages/theme/dist/token-object/helpers/is-empty-array.d.ts`	119 B
`./packages/theme/dist/token-object/helpers/nest-object.d.ts`	397 B
`./packages/theme/dist/token-object/helpers/nest-object.test.d.ts`	57 B
`./packages/theme/dist/token-object/index.cjs.js`	4.9 kB
`./packages/theme/dist/token-object/index.d.ts`	2.15 kB
`./packages/theme/dist/token-object/index.esm.js`	3.3 kB
`./packages/theme/dist/token-object/reference-token.d.ts`	299 B
`./packages/theme/dist/token-object/reference-token.test.d.ts`	61 B
`./packages/theme/dist/token-object/to-token-object.d.ts`	828 B
`./packages/theme/dist/token-object/token-object.bench.d.ts`	59 B
`./packages/theme/dist/token-object/token-object.test.d.ts`	58 B
`./packages/theme/dist/token-object/types.d.ts`	614 B
`./packages/token-cli/dist/index.js`	6.78 kB
`./packages/utils/dist/index.cjs.js`	6.81 kB
`./packages/utils/dist/index.d.ts`	3.17 kB
`./packages/utils/dist/index.esm.js`	4.67 kB

_{compressed-size-action}

yue4u · 2024-11-13T10:33:48Z

packages/react/src/components/Clickable/index.story.tsx

+  render: () => (
+    <Clickable
+      style={{
+        color: 'var(--charcoal-color-text-secondary-default)',


Clickable自体はinherentで問題がないがstroybookのためtext-secondaryにする

yue4u · 2024-11-13T10:34:38Z

packages/react/src/components/DropdownSelector/index.story.tsx

+          placeholder="Placeholder"
+          label="Label"


移行時たりてなかったようでした

yue4u · 2024-11-13T10:35:26Z

packages/react/src/components/Radio/index.story.tsx

  render: function Render(args) {
    const [value, setValue] = useState<Option>(options[0])
-
+    const id = useId()


defaultが同じページに2回レンダリングされるので、別のidにしないと壊れます

naporin0624

修正ありがとうございます！

いくつか漏れがあったようでそこも直していただきありがとうございました:bow:

一点コメントしましたが、外部から children がさされない環境なので問題ないものなので approve します！

naporin0624 · 2024-11-20T05:25:10Z

packages/react/src/components/Checkbox/CheckboxInput/index.css


-.charcoal-checkbox-input:checked:not(:disabled):hover {
+.charcoal-checkbox-input:checked:not(:disabled, :read-only):hover {


NITS
明示的に readonly 属性がついているときのみ動作する [readonly] selector のほうが好ましいのかなと思いました

[readonly]にすると <input readonly="false"/>が選択されそうな気がしたけどHTML的にそもそも不正でreadonly扱いしたね。

naporin0624 · 2024-11-20T05:25:18Z

packages/react/src/components/Checkbox/index.css

+  opacity: 0.32;
+}
+
+.charcoal-checkbox__label:has(input:read-only) {


NITS
明示的に readonly 属性がついているときのみ動作する [readonly] selector のほうが好ましいのかなと思いました

yue4u temporarily deployed to preview-channel November 13, 2024 04:41 — with GitHub Actions Inactive

yue4u added the major label Nov 13, 2024

yue4u changed the base branch from v4.0.0 to naporitan/replace-token1 November 13, 2024 04:43

fix: update design token usage

371efbc

yue4u force-pushed the yue/replace-token1-modify branch from d413775 to 371efbc Compare November 13, 2024 04:46

yue4u added 2 commits November 13, 2024 16:45

fix: remove pr target limits

ed9db94

fix: check bundle-size for owned packages only

e26d751

yue4u force-pushed the yue/replace-token1-modify branch from 665ba02 to e26d751 Compare November 13, 2024 07:46

yue4u temporarily deployed to preview-channel November 13, 2024 07:46 — with GitHub Actions Inactive

yue4u added the image snapshots update Pull requests that update image snapshots label Nov 13, 2024

yue4u temporarily deployed to preview-channel November 13, 2024 10:31 — with GitHub Actions Inactive

yue4u commented Nov 13, 2024

View reviewed changes

fix: revert disabled and readonly ui to opacity

5aff40b

yue4u force-pushed the yue/replace-token1-modify branch from 3ad21b8 to 5aff40b Compare November 13, 2024 10:39

yue4u temporarily deployed to preview-channel November 13, 2024 10:40 — with GitHub Actions Inactive

yue4u requested review from mimokmt and naporin0624 November 18, 2024 03:15

naporin0624 approved these changes Nov 20, 2024

View reviewed changes

fix: use input[readonly]

df4f644

yue4u deployed to preview-channel November 20, 2024 06:40 — with GitHub Actions View deployment

yue4u merged commit ce5294c into naporitan/replace-token1 Nov 20, 2024
12 checks passed

yue4u deleted the yue/replace-token1-modify branch November 20, 2024 06:51

yue4u mentioned this pull request Nov 20, 2024

Update Design Tokens, Add CSS Variables Tests, and Introduce Custom CSS Variables for @charcoal-ui/react #604

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: update design token usage #652

fix: update design token usage #652

yue4u commented Nov 13, 2024 •

edited

Loading

github-actions bot commented Nov 13, 2024 •

edited

Loading

github-actions bot commented Nov 13, 2024 •

edited

Loading

yue4u Nov 13, 2024

yue4u Nov 13, 2024

yue4u Nov 13, 2024

naporin0624 left a comment

naporin0624 Nov 20, 2024

yue4u Nov 20, 2024

yue4u Nov 20, 2024

naporin0624 Nov 20, 2024


		.charcoal-checkbox-input:checked:not(:disabled):hover {
		.charcoal-checkbox-input:checked:not(:disabled, :read-only):hover {

fix: update design token usage #652

fix: update design token usage #652

Conversation

yue4u commented Nov 13, 2024 • edited Loading

やったこと

動作確認環境

チェックリスト

github-actions bot commented Nov 13, 2024 • edited Loading

github-actions bot commented Nov 13, 2024 • edited Loading

yue4u Nov 13, 2024

Choose a reason for hiding this comment

yue4u Nov 13, 2024

Choose a reason for hiding this comment

yue4u Nov 13, 2024

Choose a reason for hiding this comment

naporin0624 left a comment

Choose a reason for hiding this comment

naporin0624 Nov 20, 2024

Choose a reason for hiding this comment

yue4u Nov 20, 2024

Choose a reason for hiding this comment

yue4u Nov 20, 2024

Choose a reason for hiding this comment

naporin0624 Nov 20, 2024

Choose a reason for hiding this comment

yue4u commented Nov 13, 2024 •

edited

Loading

github-actions bot commented Nov 13, 2024 •

edited

Loading

github-actions bot commented Nov 13, 2024 •

edited

Loading