fix(SegmentedControl): option label defaults to value (#7052)

palantir · Jan 7, 2025 · 1e9da5a · 1e9da5a
1 parent a7d0cd5
commit 1e9da5a
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 38 deletions.
diff --git a/packages/core/src/components/segmented-control/segmentedControl.tsx b/packages/core/src/components/segmented-control/segmentedControl.tsx
@@ -213,6 +213,6 @@ function SegmentedControlOption({ isSelected, label, onClick, value, ...buttonPr
         [onClick, value],
     );
 
-    return <Button {...buttonProps} onClick={handleClick} minimal={!isSelected} text={label} />;
+    return <Button {...buttonProps} onClick={handleClick} minimal={!isSelected} text={label ?? value} />;
 }
 SegmentedControlOption.displayName = `${DISPLAYNAME_PREFIX}.SegmentedControlOption`;
diff --git a/packages/core/test/segmented-control/segmentedControlTests.tsx b/packages/core/test/segmented-control/segmentedControlTests.tsx
@@ -60,6 +60,12 @@ describe("<SegmentedControl>", () => {
         assert.isTrue(wrapper.find(`.${testClassName}`).hostNodes().exists());
     });
 
+    it("button text defaults to value when no label is passed", () => {
+        mountSegmentedControl({ options: [{ value: "val" }] });
+        const optionButtons = containerElement.querySelectorAll("button")!;
+        assert.equal(optionButtons[0].textContent, "val");
+    });
+
     it("when no default value passed, first button gets tabIndex=0, none have aria-checked initially", () => {
         const wrapper = mountSegmentedControl();
         assert.lengthOf(wrapper.find("[tabIndex=0]").hostNodes(), 1);

diff --git a/packages/docs-app/src/examples/core-examples/common/booleanOrUndefinedSelect.tsx b/packages/docs-app/src/examples/core-examples/common/booleanOrUndefinedSelect.tsx
@@ -43,9 +43,9 @@ export const BooleanOrUndefinedSelect: React.FC<BooleanOrUndefinedSelectProps> =
             <SegmentedControl
                 fill={true}
                 options={[
-                    { disabled, label: "undefined", value: "undefined" },
-                    { disabled, label: "true", value: "true" },
-                    { disabled, label: "false", value: "false" },
+                    { disabled, value: "undefined" },
+                    { disabled, value: "true" },
+                    { disabled, value: "false" },
                 ]}
                 onValueChange={handleChange}
                 small={true}

diff --git a/packages/docs-app/src/examples/core-examples/drawerExample.tsx b/packages/docs-app/src/examples/core-examples/drawerExample.tsx
@@ -150,10 +150,10 @@ export class DrawerExample extends React.PureComponent<ExampleProps<BlueprintExa
                     <SegmentedControl
                         fill={true}
                         options={[
-                            { label: Position.TOP, value: Position.TOP },
-                            { label: Position.RIGHT, value: Position.RIGHT },
-                            { label: Position.BOTTOM, value: Position.BOTTOM },
-                            { label: Position.LEFT, value: Position.LEFT },
+                            { value: Position.TOP },
+                            { value: Position.RIGHT },
+                            { value: Position.BOTTOM },
+                            { value: Position.LEFT },
                         ]}
                         onValueChange={this.handlePositionChange}
                         small={true}

diff --git a/packages/docs-app/src/examples/core-examples/menuItemExample.tsx b/packages/docs-app/src/examples/core-examples/menuItemExample.tsx
@@ -79,10 +79,7 @@ export function MenuItemExample(props: ExampleProps) {
             <IntentSelect intent={intent} onChange={setIntent} showClearButton={true} />
             <FormGroup label="Role structure">
                 <SegmentedControl
-                    options={[
-                        { label: "menuitem", value: "menuitem" },
-                        { label: "listoption", value: "listoption" },
-                    ]}
+                    options={[{ value: "menuitem" }, { value: "listoption" }]}
                     onValueChange={handleRoleStructureChange}
                     small={true}
                     value={roleStructure}

diff --git a/packages/docs-app/src/examples/core-examples/multistepDialogExample.tsx b/packages/docs-app/src/examples/core-examples/multistepDialogExample.tsx
@@ -174,7 +174,7 @@ export class MultistepDialogExample extends React.PureComponent<
                     <SegmentedControl
                         fill={true}
                         onValueChange={this.handleNavPositionChange}
-                        options={NAV_POSITIONS.map(p => ({ label: p, value: p }))}
+                        options={NAV_POSITIONS.map(p => ({ value: p }))}
                         small={true}
                         value={navPosition}
                     />

diff --git a/packages/docs-app/src/examples/core-examples/segmentedControlExample.tsx b/packages/docs-app/src/examples/core-examples/segmentedControlExample.tsx
@@ -40,14 +40,8 @@ export const SegmentedControlExample: React.FC<ExampleProps> = props => {
                     defaultValue="none"
                     inline={true}
                     options={[
-                        {
-                            label: "None",
-                            value: "none",
-                        },
-                        {
-                            label: "Primary",
-                            value: "primary",
-                        },
+                        { label: "None", value: "none" },
+                        { label: "Primary", value: "primary" },
                     ]}
                     onValueChange={handleIntentChange}
                     small={true}
@@ -65,23 +59,10 @@ export const SegmentedControlExample: React.FC<ExampleProps> = props => {
                 inline={inline}
                 intent={intent}
                 options={[
-                    {
-                        label: "List",
-                        value: "list",
-                    },
-                    {
-                        label: "Grid",
-                        value: "grid",
-                    },
-                    {
-                        disabled: true,
-                        label: "Disabled",
-                        value: "disabled",
-                    },
-                    {
-                        label: "Gallery",
-                        value: "gallery",
-                    },
+                    { label: "List", value: "list" },
+                    { label: "Grid", value: "grid" },
+                    { disabled: true, label: "Disabled", value: "disabled" },
+                    { label: "Gallery", value: "gallery" },
                 ]}
                 large={size === "large"}
                 small={size === "small"}