@charcoal-ui/react 5.2.0 → 5.3.0-beta.2

package/src/components/SegmentedControl/index.story.tsx

@@ -13,6 +13,8 @@ export const StringSegments: StoryObj<typeof SegmentedControl> = {
     disabled: false,
     readonly: false,
     required: false,
+    uniformSegmentWidth: false,
+    fullWidth: false,
   },
 }
 
@@ -28,5 +30,91 @@ export const ObjectSegments: StoryObj<typeof SegmentedControl> = {
     disabled: false,
     readonly: false,
     required: false,
+    uniformSegmentWidth: false,
+    fullWidth: false,
+  },
+}
+
+export const RandomLengthSegments: StoryObj<typeof SegmentedControl> = {
+  args: {
+    name: 'test',
+    data: [
+      { label: 'なが〜〜い選択肢', value: 'option1' },
+      { label: '選', value: 'option2' },
+      { label: '選択肢', value: 'option3' },
+    ],
+    disabled: false,
+    readonly: false,
+    required: false,
+    uniformSegmentWidth: false,
+    fullWidth: false,
+  },
+}
+
+export const UniformWidthSegments: StoryObj<typeof SegmentedControl> = {
+  args: {
+    name: 'test',
+    data: [
+      { label: 'なが〜〜い選択肢', value: 'option1' },
+      { label: '選', value: 'option2' },
+      { label: '選択肢', value: 'option3' },
+    ],
+    disabled: false,
+    readonly: false,
+    required: false,
+    uniformSegmentWidth: true,
+    fullWidth: false,
+  },
+}
+
+export const UniformWidthSegmentsWhenShortLabel: StoryObj<
+  typeof SegmentedControl
+> = {
+  args: {
+    name: 'test',
+    data: [
+      { label: '選', value: 'option1' },
+      { label: '択', value: 'option2' },
+      { label: '肢', value: 'option3' },
+    ],
+    disabled: false,
+    readonly: false,
+    required: false,
+    uniformSegmentWidth: true,
+    fullWidth: false,
+  },
+}
+
+export const FullWidthSegments: StoryObj<typeof SegmentedControl> = {
+  args: {
+    name: 'test',
+    data: [
+      { label: '選択肢1', value: 'option1' },
+      { label: '選択肢2', value: 'option2' },
+      { label: '選択肢3', value: 'option3' },
+    ],
+    disabled: false,
+    readonly: false,
+    required: false,
+    uniformSegmentWidth: false,
+    fullWidth: true,
+  },
+}
+
+export const UniformWidthAndFullWidthSegments: StoryObj<
+  typeof SegmentedControl
+> = {
+  args: {
+    name: 'test',
+    data: [
+      { label: 'なが〜〜い選択肢', value: 'option1' },
+      { label: '選', value: 'option2' },
+      { label: '選択肢', value: 'option3' },
+    ],
+    disabled: false,
+    readonly: false,
+    required: false,
+    uniformSegmentWidth: true,
+    fullWidth: true,
   },
 }

package/src/components/SegmentedControl/index.tsx

@@ -25,6 +25,8 @@ export type SegmentedControlProps = {
   readonly readonly?: boolean
   readonly required?: boolean
   readonly className?: string
+  readonly uniformSegmentWidth?: boolean
+  readonly fullWidth?: boolean
 
   readonly value?: string
   readonly defaultValue?: string
@@ -60,13 +62,20 @@ const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
     }, [props.data])
 
     return (
-      <div ref={ref} {...radioGroupProps} className={className}>
+      <div
+        ref={ref}
+        {...radioGroupProps}
+        className={className}
+        data-uniform-segment-width={props.uniformSegmentWidth}
+        data-full-width={props.fullWidth}
+      >
         <RadioProvider value={state}>
           {segmentedControlItems.map((item) => (
             <Segmented
               key={item.value}
               value={item.value}
               disabled={item.disabled}
+              uniformSegmentWidth={props.uniformSegmentWidth}
             >
               {item.label}
             </Segmented>
@@ -83,6 +92,8 @@ type RadioProps = {
   value: string
   disabled?: boolean
   children?: ReactNode
+  uniformSegmentWidth?: boolean
+  fullWidth?: boolean
 }
 
 const Segmented = (props: RadioProps) => {
@@ -108,6 +119,8 @@ const Segmented = (props: RadioProps) => {
       className="charcoal-segmented-control-radio__label"
       aria-disabled={isDisabled || state.isReadOnly}
       data-checked={isSelected}
+      data-uniform-segment-width={props.uniformSegmentWidth}
+      data-full-width={props.fullWidth}
     >
       <input
         className="charcoal-segmented-control-radio__input"