feat(SegmentedControl): Add disabled option to control (#7454)

Author: ggdouglas

packages/core/src/components/segmented-control/segmentedControl.tsx

@@ -42,6 +42,11 @@ export interface SegmentedControlProps
     extends Props,
         ControlledValueProps<string>,
         React.RefAttributes<HTMLDivElement> {
+    /**
+     * Whether this control should be disabled.
+     */
+    disabled?: boolean;
+
     /**
      * Whether the control should take up the full width of its container.
      *
@@ -111,6 +116,7 @@ export const SegmentedControl: React.FC<SegmentedControlProps> = React.forwardRe
     const {
         className,
         defaultValue,
+        disabled,
         fill,
         inline,
         intent = Intent.NONE,
@@ -199,6 +205,7 @@ export const SegmentedControl: React.FC<SegmentedControlProps> = React.forwardRe
                 return (
                     <SegmentedControlOption
                         {...option}
+                        disabled={option.disabled || disabled}
                         intent={intent}
                         isSelected={isSelected}
                         key={option.value}

packages/core/test/segmented-control/segmentedControlTests.tsx

@@ -14,9 +14,12 @@
  * limitations under the License.
  */
 
-import { assert } from "chai";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { assert, expect } from "chai";
 import { mount } from "enzyme";
 import * as React from "react";
+import sinon from "sinon";
 
 import { IconNames } from "@blueprintjs/icons";
 
@@ -108,4 +111,41 @@ describe("<SegmentedControl>", () => {
         radioGroup.simulate("keydown", { key: "ArrowLeft" });
         assert.equal(document.activeElement, optionButtons[0], "move left and skip disabled");
     });
+
+    it("should select the correct option when clicked", () => {
+        const onValueChange = sinon.spy();
+        render(<SegmentedControl onValueChange={onValueChange} options={OPTIONS} />);
+        const listButton = screen.getByRole("radio", { name: /list/i });
+
+        userEvent.click(listButton);
+
+        expect(onValueChange.called).to.be.true;
+        expect(onValueChange.args[0][0]).to.equal("list");
+        expect(listButton.getAttribute("aria-checked")).to.equal("true");
+    });
+
+    it("should not allow disabled options to be selected", () => {
+        const onValueChange = sinon.spy();
+        render(<SegmentedControl onValueChange={onValueChange} options={OPTIONS} />);
+        const gridButton = screen.getByRole("radio", { name: /grid/i });
+
+        userEvent.click(gridButton);
+
+        expect(onValueChange.called).to.be.false;
+        expect(gridButton.getAttribute("aria-checked")).to.equal("false");
+    });
+
+    it("should not allow any options to be selected when disabled", () => {
+        const onValueChange = sinon.spy();
+        render(<SegmentedControl onValueChange={onValueChange} options={OPTIONS} disabled={true} />);
+        const listButton = screen.getByRole("radio", { name: /list/i });
+        const gridButton = screen.getByRole("radio", { name: /grid/i });
+
+        userEvent.click(listButton);
+        userEvent.click(gridButton);
+
+        expect(onValueChange.called).to.be.false;
+        expect(listButton.getAttribute("aria-checked")).to.equal("false");
+        expect(gridButton.getAttribute("aria-checked")).to.equal("false");
+    });
 });

packages/docs-app/src/examples/core-examples/segmentedControlExample.tsx

@@ -31,6 +31,7 @@ import { IconNames } from "@blueprintjs/icons";
 import { SizeSelect } from "./common/sizeSelect";
 
 export const SegmentedControlExample: React.FC<ExampleProps> = props => {
+    const [disabled, setDisabled] = React.useState(false);
     const [fill, setFill] = React.useState(false);
     const [inline, setInline] = React.useState(false);
     const [intent, setIntent] = React.useState<SegmentedControlIntent>("none");
@@ -48,6 +49,7 @@ export const SegmentedControlExample: React.FC<ExampleProps> = props => {
             <Switch checked={inline} label="Inline" onChange={handleBooleanChange(setInline)} />
             <Switch checked={fill} label="Fill" onChange={handleBooleanChange(setFill)} />
             <Switch checked={withIcons} label="Icons" onChange={handleBooleanChange(setWithIcons)} />
+            <Switch checked={disabled} label="Disabled" onChange={handleBooleanChange(setDisabled)} />
             <Divider />
             <FormGroup label="Intent">
                 <SegmentedControl
@@ -69,6 +71,7 @@ export const SegmentedControlExample: React.FC<ExampleProps> = props => {
         <Example options={options} {...props}>
             <SegmentedControl
                 defaultValue="list"
+                disabled={disabled}
                 fill={fill}
                 inline={inline}
                 intent={intent}