diff --git a/packages/core/src/components/segmented-control/segmentedControl.tsx b/packages/core/src/components/segmented-control/segmentedControl.tsx
index a893f1d08f..ff432a50de 100644
--- 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 ;
+ return ;
}
SegmentedControlOption.displayName = `${DISPLAYNAME_PREFIX}.SegmentedControlOption`;
diff --git a/packages/core/test/segmented-control/segmentedControlTests.tsx b/packages/core/test/segmented-control/segmentedControlTests.tsx
index d13ea95653..e3cd1621d7 100644
--- a/packages/core/test/segmented-control/segmentedControlTests.tsx
+++ b/packages/core/test/segmented-control/segmentedControlTests.tsx
@@ -60,6 +60,12 @@ describe("", () => {
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
index 3148bf99db..010c65990a 100644
--- 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 =
({ 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
index 272a5ca519..b01dc784a8 100644
--- 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 = 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 = 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"}