Add icon support to Segment Control options (#7435)

Author: mattskrobola

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

@@ -31,6 +31,10 @@ import { Button } from "../button/buttons";
 
 export type SegmentedControlIntent = typeof Intent.NONE | typeof Intent.PRIMARY;
 
+interface SegmentedControlOptionProps extends OptionProps<string> {
+    icon?: ButtonProps["icon"];
+}
+
 /**
  * SegmentedControl component props.
  */
@@ -66,7 +70,7 @@ export interface SegmentedControlProps
     /**
      * List of available options.
      */
-    options: Array<OptionProps<string>>;
+    options: SegmentedControlOptionProps[];
 
     /**
      * Aria role for the overall component (container).
@@ -225,16 +229,22 @@ export const SegmentedControl: React.FC<SegmentedControlProps> = React.forwardRe
 });
 SegmentedControl.displayName = `${DISPLAYNAME_PREFIX}.SegmentedControl`;
 
-interface SegmentedControlOptionProps
+interface SegmentedControlOptionComponentProps
     extends OptionProps<string>,
         Pick<SegmentedControlProps, "intent" | "small" | "large" | "size">,
-        Pick<ButtonProps, "role" | "tabIndex">,
+        Pick<ButtonProps, "role" | "tabIndex" | "icon">,
         React.AriaAttributes {
     isSelected: boolean;
     onClick: (value: string, targetElement: HTMLElement) => void;
 }
 
-function SegmentedControlOption({ isSelected, label, onClick, value, ...buttonProps }: SegmentedControlOptionProps) {
+function SegmentedControlOption({
+    isSelected,
+    label,
+    onClick,
+    value,
+    ...buttonProps
+}: SegmentedControlOptionComponentProps) {
     const handleClick = React.useCallback(
         (event: React.MouseEvent<HTMLElement>) => onClick?.(value, event.currentTarget),
         [onClick, value],

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

@@ -18,6 +18,8 @@ import { assert } from "chai";
 import { mount } from "enzyme";
 import * as React from "react";
 
+import { IconNames } from "@blueprintjs/icons";
+
 import { Classes, type OptionProps, SegmentedControl, type SegmentedControlProps } from "../../src";
 
 const OPTIONS: Array<OptionProps<string>> = [
@@ -60,6 +62,12 @@ describe("<SegmentedControl>", () => {
         assert.isTrue(wrapper.find(`.${testClassName}`).hostNodes().exists());
     });
 
+    it("supports icon", () => {
+        const wrapper = mountSegmentedControl({ options: [{ icon: IconNames.GRID, value: "grid" }] });
+        assert.isTrue(wrapper.find(`.${Classes.ICON}`).hostNodes().exists());
+        assert.isTrue(wrapper.find(`[data-icon="${IconNames.GRID}"]`).exists());
+    });
+
     it("button text defaults to value when no label is passed", () => {
         mountSegmentedControl({ options: [{ value: "val" }] });
         const optionButtons = containerElement.querySelectorAll("button")!;

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

@@ -26,6 +26,7 @@ import {
     Switch,
 } from "@blueprintjs/core";
 import { Example, type ExampleProps, handleBooleanChange } from "@blueprintjs/docs-theme";
+import { IconNames } from "@blueprintjs/icons";
 
 import { SizeSelect } from "./common/sizeSelect";
 
@@ -34,6 +35,7 @@ export const SegmentedControlExample: React.FC<ExampleProps> = props => {
     const [inline, setInline] = React.useState(false);
     const [intent, setIntent] = React.useState<SegmentedControlIntent>("none");
     const [size, setSize] = React.useState<Size>("medium");
+    const [withIcons, setWithIcons] = React.useState(false);
 
     const handleIntentChange = React.useCallback(
         (newIntent: string) => setIntent(newIntent as SegmentedControlIntent),
@@ -45,6 +47,7 @@ export const SegmentedControlExample: React.FC<ExampleProps> = props => {
             <H5>Props</H5>
             <Switch checked={inline} label="Inline" onChange={handleBooleanChange(setInline)} />
             <Switch checked={fill} label="Fill" onChange={handleBooleanChange(setFill)} />
+            <Switch checked={withIcons} label="Icons" onChange={handleBooleanChange(setWithIcons)} />
             <Divider />
             <FormGroup label="Intent">
                 <SegmentedControl
@@ -70,10 +73,15 @@ 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" },
+                    { icon: withIcons ? IconNames.LIST : undefined, label: "List", value: "list" },
+                    { icon: withIcons ? IconNames.GRID : undefined, label: "Grid", value: "grid" },
+                    {
+                        disabled: true,
+                        icon: withIcons ? IconNames.DISABLE : undefined,
+                        label: "Disabled",
+                        value: "disabled",
+                    },
+                    { icon: withIcons ? IconNames.MEDIA : undefined, label: "Gallery", value: "gallery" },
                 ]}
                 size={size}
             />