fix: Modalの挙動と外観を修正

[toshusai]

やったこと

機能の修正

• bottomSheetのコンテンツがオーバーフローした際に適切にスクロール可能になるように修正
• Focusがモーダル内の最後で止まるのを修正
  • useDialogのコンポーネントを分離

外観の修正

• モーダル上下の余白を24pxから40pxに修正
• bottomSheetの時のタイトルの高さを64pxから48pxに修正

Storybook

• 内部スクロールの例を追加

[github-actions]

Size Change: +2.08 kB (0%)

Total Size: 579 kB

Filename	Size	Change
./packages/icons/dist/charcoalIconFiles.d.ts	4.58 kB	+32 B (+1%)
./packages/icons/dist/loaders/CharcoalIconFilesLoader.d.ts	7.25 kB	+52 B (+1%)
./packages/react/dist/components/Checkbox/index.d.ts	787 B	+32 B (+4%)
./packages/react/dist/components/Checkbox/index.story.d.ts	582 B	+22 B (+4%)
./packages/react/dist/components/Icon/index.story.d.ts	5 kB	+32 B (+1%)
./packages/react/dist/components/Modal/index.d.ts	1.93 kB	+261 B (+16%)	⚠️
./packages/react/dist/components/Modal/index.story.d.ts	1.5 kB	+96 B (+7%)	🔍
./packages/react/dist/index.cjs.js	77.6 kB	+671 B (+1%)
./packages/react/dist/index.esm.js	68.6 kB	+692 B (+1%)
./packages/react/dist/components/Modal/__stories__/InternalScrollStory.d.ts	189 B	+189 B (new file)	🆕

ℹ️ 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/index.cjs.js	9.47 kB
./packages/icons/dist/index.d.ts	478 B
./packages/icons/dist/index.esm.js	7.96 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.46 kB
./packages/icons/dist/PixivIcon.story.d.ts	885 B
./packages/icons/dist/PixivIcon.test.d.ts	55 B
./packages/icons/dist/ssr.d.ts	75 B
./packages/react-sandbox/dist/_lib/compat.d.ts	427 B
./packages/react-sandbox/dist/components/Carousel/index.d.ts	1.35 kB
./packages/react-sandbox/dist/components/Carousel/index.story.d.ts	188 B
./packages/react-sandbox/dist/components/CarouselButton/index.d.ts	619 B
./packages/react-sandbox/dist/components/CarouselButton/index.story.d.ts	323 B
./packages/react-sandbox/dist/components/Filter/index.d.ts	1.12 kB
./packages/react-sandbox/dist/components/Filter/index.story.d.ts	374 B
./packages/react-sandbox/dist/components/HintText/index.d.ts	298 B
./packages/react-sandbox/dist/components/HintText/index.story.d.ts	312 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/Layout/index.story.d.ts	402 B
./packages/react-sandbox/dist/components/LeftMenu/index.d.ts	382 B
./packages/react-sandbox/dist/components/MenuListItem/index.d.ts	1.79 kB
./packages/react-sandbox/dist/components/MenuListItem/index.story.d.ts	725 B
./packages/react-sandbox/dist/components/Pager/index.d.ts	529 B
./packages/react-sandbox/dist/components/Pager/index.story.d.ts	1.08 kB
./packages/react-sandbox/dist/components/SwitchCheckbox/index.d.ts	340 B
./packages/react-sandbox/dist/components/SwitchCheckbox/index.story.d.ts	429 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/TextEllipsis/index.story.d.ts	345 B
./packages/react-sandbox/dist/components/WithIcon/index.d.ts	1.07 kB
./packages/react-sandbox/dist/components/WithIcon/index.story.d.ts	609 B
./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	64.5 kB
./packages/react-sandbox/dist/index.d.ts	1.34 kB
./packages/react-sandbox/dist/index.esm.js	55 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.44 kB
./packages/react/dist/_lib/index.d.ts	1.02 kB
./packages/react/dist/components/a11y.test.d.ts	50 B
./packages/react/dist/components/Button/index.d.ts	469 B
./packages/react/dist/components/Button/index.story.d.ts	1.26 kB
./packages/react/dist/components/Button/index.test.d.ts	246 B
./packages/react/dist/components/Checkbox/performance.test.d.ts	252 B
./packages/react/dist/components/Checkbox/snapshot.test.d.ts	76 B
./packages/react/dist/components/Clickable/index.d.ts	747 B
./packages/react/dist/components/Clickable/index.story.d.ts	356 B
./packages/react/dist/components/DropdownSelector/Divider.d.ts	230 B
./packages/react/dist/components/DropdownSelector/DropdownMenuItem.d.ts	308 B
./packages/react/dist/components/DropdownSelector/DropdownPopover.d.ts	486 B
./packages/react/dist/components/DropdownSelector/index.d.ts	555 B
./packages/react/dist/components/DropdownSelector/index.story.d.ts	572 B
./packages/react/dist/components/DropdownSelector/ListItem/index.d.ts	668 B
./packages/react/dist/components/DropdownSelector/ListItem/index.story.d.ts	287 B
./packages/react/dist/components/DropdownSelector/MenuItem/index.d.ts	511 B
./packages/react/dist/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.d.ts	373 B
./packages/react/dist/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.d.ts	483 B
./packages/react/dist/components/DropdownSelector/MenuItemGroup/index.d.ts	476 B
./packages/react/dist/components/DropdownSelector/MenuList/index.d.ts	699 B
./packages/react/dist/components/DropdownSelector/MenuList/index.story.d.ts	390 B
./packages/react/dist/components/DropdownSelector/MenuList/internals/getValuesRecursive.d.ts	348 B
./packages/react/dist/components/DropdownSelector/MenuList/MenuListContext.d.ts	325 B
./packages/react/dist/components/DropdownSelector/Popover/index.d.ts	632 B
./packages/react/dist/components/DropdownSelector/Popover/index.story.d.ts	283 B
./packages/react/dist/components/DropdownSelector/utils/findPreviewRecursive.d.ts	411 B
./packages/react/dist/components/FieldLabel/index.d.ts	470 B
./packages/react/dist/components/Icon/index.d.ts	498 B
./packages/react/dist/components/IconButton/index.d.ts	572 B
./packages/react/dist/components/IconButton/index.story.d.ts	811 B
./packages/react/dist/components/LoadingSpinner/index.d.ts	658 B
./packages/react/dist/components/LoadingSpinner/index.story.d.ts	404 B
./packages/react/dist/components/Modal/ModalPlumbing.d.ts	510 B
./packages/react/dist/components/MultiSelect/context.d.ts	394 B
./packages/react/dist/components/MultiSelect/index.d.ts	1.2 kB
./packages/react/dist/components/MultiSelect/index.story.d.ts	2 kB
./packages/react/dist/components/MultiSelect/index.test.d.ts	51 B
./packages/react/dist/components/Radio/index.d.ts	1.07 kB
./packages/react/dist/components/Radio/index.story.d.ts	1.01 kB
./packages/react/dist/components/Radio/index.test.d.ts	51 B
./packages/react/dist/components/SegmentedControl/index.d.ts	736 B
./packages/react/dist/components/SegmentedControl/index.story.d.ts	500 B
./packages/react/dist/components/SegmentedControl/RadioGroupContext.d.ts	350 B
./packages/react/dist/components/Switch/index.d.ts	512 B
./packages/react/dist/components/Switch/index.story.d.ts	531 B
./packages/react/dist/components/TagItem/index.d.ts	1.2 kB
./packages/react/dist/components/TagItem/index.story.d.ts	1.14 kB
./packages/react/dist/components/TextArea/index.d.ts	1.09 kB
./packages/react/dist/components/TextArea/TextArea.story.d.ts	1.01 kB
./packages/react/dist/components/TextField/index.d.ts	1.15 kB
./packages/react/dist/components/TextField/TextField.story.d.ts	1.08 kB
./packages/react/dist/core/CharcoalProvider.d.ts	656 B
./packages/react/dist/core/ComponentAbstraction.d.ts	933 B
./packages/react/dist/core/OverlayProvider.d.ts	101 B
./packages/react/dist/core/SSRProvider.d.ts	88 B
./packages/react/dist/index.d.ts	2.05 kB
./packages/react/dist/styled.d.ts	12.3 kB
./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	26.7 kB
./packages/styled/dist/index.d.ts	6.24 kB
./packages/styled/dist/index.esm.js	24.2 kB
./packages/styled/dist/index.story.d.ts	561 B
./packages/styled/dist/index.test.d.ts	73 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	299 B
./packages/styled/dist/TokenInjector.d.ts	505 B
./packages/styled/dist/util.d.ts	4.24 kB
./packages/tailwind-config/dist/_lib/compat.d.ts	418 B
./packages/tailwind-config/dist/_lib/TailwindBuild.d.ts	750 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	394 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.story.d.ts	666 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.5 kB
./packages/tailwind-config/dist/index.d.ts	373 B
./packages/tailwind-config/dist/index.esm.js	9.6 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	656 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	815 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/default.d.ts	163 B
./packages/theme/dist/index.cjs.js	5.17 kB
./packages/theme/dist/index.d.ts	121 B
./packages/theme/dist/index.esm.js	3.48 kB
./packages/theme/dist/theme.d.ts	2.87 kB
./packages/utils/dist/index.cjs.js	6.24 kB
./packages/utils/dist/index.d.ts	3.17 kB
./packages/utils/dist/index.esm.js	4.51 kB

_{compressed-size-action}

[github-actions]

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

https://pixiv-charcoal-web--pr389-toshusai-fix-modal-o-rfm0nomo.web.app

_{(expires Fri, 20 Oct 2023 08:05:21 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 314b26d3adca98a761c7e4d9922ebb206ff024a0}