Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

segmented control に token v2 の hover, active を追加 #656

Open
wants to merge 3 commits into
base: revert-663-revert-604-naporitan/replace-token1
Choose a base branch
from

Conversation

naporin0624
Copy link
Member

やったこと

  • segmented contorl に token v2 を利用した focus, active の style を追加

動作確認環境

  • storybook

チェックリスト

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

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

Copy link

github-actions bot commented Nov 27, 2024

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

https://pixiv-charcoal-web--pr656-chore-segmented-cont-fcbp6vdq.web.app

(expires Wed, 01 Jan 2025 08:03:01 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: 314b26d3adca98a761c7e4d9922ebb206ff024a0

Copy link

github-actions bot commented Nov 27, 2024

Size Change: 0 B

Total Size: 541 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.05 kB
./packages/styled/dist/index.cjs.js 31 kB
./packages/styled/dist/index.d.ts 6.88 kB
./packages/styled/dist/index.esm.js 27.7 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 306 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 7.06 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

@naporin0624 naporin0624 marked this pull request as ready for review November 27, 2024 06:58
@naporin0624 naporin0624 self-assigned this Nov 27, 2024
@naporin0624 naporin0624 requested review from yue4u and mimokmt December 4, 2024 05:42
Comment on lines 25 to 29
.charcoal-segmented-control-radio__label:hover {
background-color: var(--charcoal-color-container-hover-a);
}
.charcoal-segmented-control-radio__label:active {
background-color: var(--charcoal-color-container-press-a);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

aria-disabledなものに対してhover/activeないほうが自然な気がします

Comment on lines 37 to 50
.charcoal-segmented-control-radio__label[data-checked='true']:hover {
background-color: var(--charcoal-color-container-primary-hover);
}
.charcoal-segmented-control-radio__label[data-checked='true']:active {
background-color: var(--charcoal-color-container-primary-press);
}

.charcoal-segmented-control-radio__label[aria-disabled]:not(
[aria-disabled='false']
) {
cursor: default;
opacity: 0.32;
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

data-checked='true'なものに対してhover,activeなくてもいい気がするが確認が必要かもしれないです

@naporin0624 naporin0624 changed the base branch from v4.0.0 to revert-663-revert-604-naporitan/replace-token1 December 25, 2024 07:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants