Add uniform width and full width props in SegmentedControl #834

mimokmt · 2026-01-16T04:24:28Z

やったこと

要素の大きさを揃える uniformWidth prop を追加しました
width: 100%を指定する fullWidth prop を追加しました

動作確認環境

Storybook

チェックリスト

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

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

github-actions · 2026-01-16T04:25:52Z

Size Change: +486 B (+0.13%)

Total Size: 377 kB

Filename	Size	Change
`./packages/react/dist/components/SegmentedControl/index.d.ts`	836 B	+78 B (+10.29%)	⚠️
`./packages/react/dist/index.cjs`	27.5 kB	+204 B (+0.75%)
`./packages/react/dist/index.js`	24.3 kB	+204 B (+0.85%)

ℹ️ View Unchanged

Filename	Size
`./packages/foundation/dist/index.cjs`	749 B
`./packages/foundation/dist/index.d.ts`	3.56 kB
`./packages/foundation/dist/index.js`	703 B
`./packages/icons-cli/dist/index.js`	20.6 kB
`./packages/icons/dist/index.cjs`	9.88 kB
`./packages/icons/dist/index.d.ts`	14 kB
`./packages/icons/dist/index.js`	8.72 kB
`./packages/react-sandbox/dist/_lib/compat.d.ts`	427 B
`./packages/react-sandbox/dist/_lib/ComponentAbstraction.d.ts`	967 B
`./packages/react-sandbox/dist/components/Carousel/index.d.ts`	1.38 kB
`./packages/react-sandbox/dist/components/CarouselButton/index.d.ts`	515 B
`./packages/react-sandbox/dist/components/Filter/index.d.ts`	1.05 kB
`./packages/react-sandbox/dist/components/HintText/index.d.ts`	386 B
`./packages/react-sandbox/dist/components/icons/Base.d.ts`	762 B
`./packages/react-sandbox/dist/components/icons/DotsIcon.d.ts`	226 B
`./packages/react-sandbox/dist/components/icons/InfoIcon.d.ts`	115 B
`./packages/react-sandbox/dist/components/icons/NextIcon.d.ts`	309 B
`./packages/react-sandbox/dist/components/icons/WedgeIcon.d.ts`	345 B
`./packages/react-sandbox/dist/components/Layout/index.d.ts`	2.18 kB
`./packages/react-sandbox/dist/components/LeftMenu/index.d.ts`	438 B
`./packages/react-sandbox/dist/components/MenuListItem/index.d.ts`	1.91 kB
`./packages/react-sandbox/dist/components/Pager/index.d.ts`	557 B
`./packages/react-sandbox/dist/components/SwitchCheckbox/index.d.ts`	340 B
`./packages/react-sandbox/dist/components/TextEllipsis/helper.d.ts`	230 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`	33.5 kB
`./packages/react-sandbox/dist/index.d.ts`	1.38 kB
`./packages/react-sandbox/dist/index.js`	31 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`	614 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`	766 B
`./packages/react/dist/components/Button/styledButtonTypeTest.d.d.ts`	63 B
`./packages/react/dist/components/Checkbox/CheckboxInput/index.d.ts`	628 B
`./packages/react/dist/components/Checkbox/CheckboxWithLabel.d.ts`	271 B
`./packages/react/dist/components/Checkbox/index.d.ts`	592 B
`./packages/react/dist/components/Clickable/index.d.ts`	681 B
`./packages/react/dist/components/DropdownSelector/Divider/index.d.ts`	133 B
`./packages/react/dist/components/DropdownSelector/DropdownMenuItem/index.d.ts`	341 B
`./packages/react/dist/components/DropdownSelector/DropdownPopover.d.ts`	514 B
`./packages/react/dist/components/DropdownSelector/index.d.ts`	731 B
`./packages/react/dist/components/DropdownSelector/ListItem/index.d.ts`	485 B
`./packages/react/dist/components/DropdownSelector/MenuItem/index.d.ts`	639 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`	442 B
`./packages/react/dist/components/DropdownSelector/MenuList/index.d.ts`	568 B
`./packages/react/dist/components/DropdownSelector/MenuList/internals/getValuesRecursive.d.ts`	412 B
`./packages/react/dist/components/DropdownSelector/MenuList/MenuListContext.d.ts`	412 B
`./packages/react/dist/components/DropdownSelector/Popover/index.d.ts`	672 B
`./packages/react/dist/components/DropdownSelector/Popover/usePreventScroll.d.ts`	159 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/HintText/index.d.ts`	382 B
`./packages/react/dist/components/Icon/index.d.ts`	498 B
`./packages/react/dist/components/IconButton/index.d.ts`	639 B
`./packages/react/dist/components/LoadingSpinner/index.d.ts`	678 B
`./packages/react/dist/components/Modal/Dialog/index.d.ts`	373 B
`./packages/react/dist/components/Modal/index.d.ts`	2.13 kB
`./packages/react/dist/components/Modal/ModalBackgroundContext.d.ts`	231 B
`./packages/react/dist/components/Modal/ModalPlumbing.d.ts`	1.75 kB
`./packages/react/dist/components/Modal/useCustomModalOverlay.d.ts`	797 B
`./packages/react/dist/components/MultiSelect/context.d.ts`	394 B
`./packages/react/dist/components/MultiSelect/index.d.ts`	1.25 kB
`./packages/react/dist/components/Radio/index.d.ts`	482 B
`./packages/react/dist/components/Radio/RadioGroup/index.d.ts`	733 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/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`	272 B
`./packages/react/dist/components/TagItem/index.d.ts`	716 B
`./packages/react/dist/components/TextArea/index.d.ts`	1.12 kB
`./packages/react/dist/components/TextField/AssistiveText/index.d.ts`	592 B
`./packages/react/dist/components/TextField/index.d.ts`	1.25 kB
`./packages/react/dist/components/TextField/useFocusWithClick.d.ts`	256 B
`./packages/react/dist/core/CharcoalProvider.d.ts`	270 B
`./packages/react/dist/core/OverlayProvider.d.ts`	101 B
`./packages/react/dist/core/SetThemeScript.d.ts`	890 B
`./packages/react/dist/core/SSRProvider.d.ts`	335 B
`./packages/react/dist/core/themeHelper.d.ts`	2.05 kB
`./packages/react/dist/index.d.ts`	2.37 kB
`./packages/styled/dist/addThemeUtils.story.d.ts`	330 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.28 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.12 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/index.cjs`	11.8 kB
`./packages/styled/dist/index.d.ts`	6.9 kB
`./packages/styled/dist/index.js`	10.3 kB
`./packages/styled/dist/index.test.d.ts`	204 B
`./packages/styled/dist/internals/index.d.ts`	1.6 kB
`./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`	533 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/index.d.ts`	6.34 kB
`./packages/tailwind-config/dist/index.js`	17.5 kB
`./packages/tailwind-diff/dist/commands/check.d.ts`	296 B
`./packages/tailwind-diff/dist/commands/check.js`	4.35 kB
`./packages/tailwind-diff/dist/commands/dump.d.ts`	185 B
`./packages/tailwind-diff/dist/commands/dump.js`	1.24 kB
`./packages/tailwind-diff/dist/defer.d.ts`	164 B
`./packages/tailwind-diff/dist/defer.js`	762 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.81 kB
`./packages/tailwind-diff/dist/style.d.ts`	436 B
`./packages/tailwind-diff/dist/style.js`	2.6 kB
`./packages/tailwind-diff/dist/withPackages.d.ts`	464 B
`./packages/tailwind-diff/dist/withPackages.js`	3.34 kB
`./packages/theme/dist/index.cjs`	3.19 kB
`./packages/theme/dist/index.d.ts`	3.72 kB
`./packages/theme/dist/index.js`	3.17 kB
`./packages/theme/dist/unstable-css/_variables_dark.css.d.ts`	26 B
`./packages/theme/dist/unstable-css/_variables_light.css.d.ts`	26 B
`./packages/theme/dist/unstable-token-object/index.cjs`	4.22 kB
`./packages/theme/dist/unstable-token-object/index.d.ts`	1.65 kB
`./packages/theme/dist/unstable-token-object/index.js`	3.05 kB
`./packages/token-cli/dist/index.js`	6.63 kB
`./packages/utils/dist/index.cjs`	3.15 kB
`./packages/utils/dist/index.d.ts`	4.48 kB
`./packages/utils/dist/index.js`	2.38 kB

_{compressed-size-action}

github-actions · 2026-01-16T04:26:58Z

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

https://pixiv-charcoal-web--pr834-mimo-add-isometric-s-lldddj5z.web.app

_{(expires Tue, 03 Feb 2026 05:51:36 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 314b26d3adca98a761c7e4d9922ebb206ff024a0}

yue4u

5.3.0-betaのブランチを作って、https://github.com/pixiv/charcoal/pull/838/changes と混ぜてリリースするといいかもです

yue4u · 2026-01-26T07:25:03Z

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

+    widthUniform: false,
+    fullWidth: false,


fullWidthと合わせてuniformWidth or uniformSegmentWidth がいいかもです

yue4u · 2026-01-26T07:25:59Z

package.json

    "@types/yargs": "^17.0.8",
    "@typescript/native-preview": "7.0.0-dev.20250930.1",
    "@vitejs/plugin-react": "^4.2.1",
+    "@vueless/storybook-dark-mode": "^10.0.6",


rebase漏れ？

yue4u · 2026-01-26T07:32:22Z

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

+.charcoal-segmented-control[data-width-uniform='true'],
+.charcoal-segmented-control[data-full-width='true'] {
+  display: inline-grid;
+  grid-auto-columns: minmax(80px, 1fr);


一つのタブが長すぎて+100%の時に破綻するが、エッジケースなので要望があったら対応する形でも良さそう。

mimokmt added the minor label Jan 16, 2026

mimokmt temporarily deployed to preview-channel January 16, 2026 04:24 — with GitHub Actions Inactive

mimokmt deployed to preview-channel January 16, 2026 04:29 — with GitHub Actions View deployment

mimokmt requested a review from yue4u January 19, 2026 04:41

mimokmt self-assigned this Jan 19, 2026

yue4u approved these changes Jan 26, 2026

View reviewed changes

mimokmt temporarily deployed to preview-channel January 27, 2026 03:03 — with GitHub Actions Inactive

mimokmt added 4 commits January 27, 2026 12:03

feat(react): add uniform width proop in segmented control

7ab0a17

chore(react): update snapshot

d62cd3b

chore: rename props

9e42d85

chore: update snapshot

586e4a9

mimokmt force-pushed the mimo/add-isometric-segmented-control branch from 90cd936 to 586e4a9 Compare January 27, 2026 03:03

mimokmt temporarily deployed to preview-channel January 27, 2026 03:03 — with GitHub Actions Inactive

chore: rename to segment

80a6ebb

mimokmt temporarily deployed to preview-channel January 27, 2026 05:44 — with GitHub Actions Inactive

chore: update snapshot

d09947c

mimokmt deployed to preview-channel January 27, 2026 05:49 — with GitHub Actions View deployment

yue4u approved these changes Jan 27, 2026

View reviewed changes

mimokmt changed the base branch from main to beta/5-3-0 January 27, 2026 06:06

mimokmt merged commit 793e256 into beta/5-3-0 Jan 27, 2026
15 checks passed

mimokmt mentioned this pull request Jan 27, 2026

5.3.0 Release #839

Open

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add uniform width and full width props in SegmentedControl #834

Add uniform width and full width props in SegmentedControl #834

Uh oh!

mimokmt commented Jan 16, 2026

Uh oh!

github-actions bot commented Jan 16, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Jan 16, 2026 •

edited

Loading

Uh oh!

yue4u left a comment

Uh oh!

yue4u Jan 26, 2026

Uh oh!

yue4u Jan 26, 2026

Uh oh!

yue4u Jan 26, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Add uniform width and full width props in SegmentedControl #834

Add uniform width and full width props in SegmentedControl #834

Uh oh!

Conversation

mimokmt commented Jan 16, 2026

やったこと

動作確認環境

チェックリスト

Uh oh!

github-actions bot commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yue4u left a comment

Choose a reason for hiding this comment

Uh oh!

yue4u Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

yue4u Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

yue4u Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions bot commented Jan 16, 2026 •

edited

Loading

github-actions bot commented Jan 16, 2026 •

edited

Loading