feat(SegmentedControl): compact prop, custom button styling prop

packages/core/src/components/segmented-control/_segmented-control.scss

@@ -8,6 +8,11 @@
   gap: 3px;
   padding: 3px;
 
+  &.#{$ns}-compact {
+    gap: 0;
+    padding: 0;
+  }
+
   &.#{$ns}-inline {
     display: inline-flex;
   }
@@ -20,7 +25,7 @@
     }
   }
 
-  > .#{$ns}-button:not(.#{$ns}-minimal) {
+  > .#{$ns}-button.#{$ns}-selected {
     &:not(.#{$ns}-intent-primary) {
       background-color: $white;
 

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

@@ -30,13 +30,22 @@ import { Button } from "../button/buttons";
 
 export type SegmentedControlIntent = typeof Intent.NONE | typeof Intent.PRIMARY;
 
+type SegmentedControlButtonProps = Pick<ButtonProps, "className" | "intent" | "active" | "minimal">;
+
 /**
  * SegmentedControl component props.
  */
 export interface SegmentedControlProps
     extends Props,
         ControlledValueProps<string>,
         React.RefAttributes<HTMLDivElement> {
+    /**
+     * Whether the control should use compact styles.
+     *
+     * @default false
+     */
+    compact?: boolean;
+
     /**
      * Whether the control should take up the full width of its container.
      *
@@ -66,6 +75,24 @@ export interface SegmentedControlProps
      */
     options: Array<OptionProps<string>>;
 
+    /**
+     * Style props for the button elements.
+     */
+    buttonProps?: {
+        /**
+         * Props applied to selected button
+         *
+         * @default { className: 'bp5-selected' }
+         */
+        selected?: SegmentedControlButtonProps;
+        /**
+         * Props applied to non-selected buttons
+         *
+         * @default { className: 'bp5-minimal' }
+         */
+        nonSelected?: SegmentedControlButtonProps;
+    };
+
     /**
      * Aria role for the overall component. Child buttons get appropriate roles.
      *
@@ -90,7 +117,9 @@ export interface SegmentedControlProps
  */
 export const SegmentedControl: React.FC<SegmentedControlProps> = React.forwardRef((props, ref) => {
     const {
+        buttonProps,
         className,
+        compact,
         defaultValue,
         fill,
         inline,
@@ -148,10 +177,15 @@ export const SegmentedControl: React.FC<SegmentedControlProps> = React.forwardRe
     );
 
     const classes = classNames(Classes.SEGMENTED_CONTROL, className, {
+        [Classes.COMPACT]: compact,
+        [Classes.BUTTON_GROUP]: compact,
         [Classes.FILL]: fill,
         [Classes.INLINE]: inline,
     });
 
+    const selectedButtonProps = buttonProps?.selected ?? { className: Classes.SELECTED };
+    const nonSelectedButtonProps = buttonProps?.nonSelected ?? { className: Classes.MINIMAL };
+
     const isAnySelected = options.some(option => selectedValue === option.value);
 
     return (
@@ -166,9 +200,9 @@ export const SegmentedControl: React.FC<SegmentedControlProps> = React.forwardRe
                 const isSelected = selectedValue === option.value;
                 return (
                     <SegmentedControlOption
-                        {...option}
                         intent={intent}
-                        isSelected={isSelected}
+                        {...(isSelected ? selectedButtonProps : nonSelectedButtonProps)}
+                        {...option}
                         key={option.value}
                         large={large}
                         onClick={handleOptionClick}
@@ -198,21 +232,16 @@ SegmentedControl.defaultProps = {
 };
 SegmentedControl.displayName = `${DISPLAYNAME_PREFIX}.SegmentedControl`;
 
-interface SegmentedControlOptionProps
-    extends OptionProps<string>,
-        Pick<SegmentedControlProps, "intent" | "small" | "large">,
-        Pick<ButtonProps, "role" | "tabIndex">,
-        React.AriaAttributes {
-    isSelected: boolean;
+interface SegmentedControlOptionProps extends OptionProps<string>, Omit<ButtonProps, "text" | "onClick" | "value"> {
     onClick: (value: string, targetElement: HTMLElement) => void;
 }
 
-function SegmentedControlOption({ isSelected, label, onClick, value, ...buttonProps }: SegmentedControlOptionProps) {
+function SegmentedControlOption({ label, onClick, value, ...buttonProps }: SegmentedControlOptionProps) {
     const handleClick = React.useCallback(
         (event: React.MouseEvent<HTMLElement>) => onClick?.(value, event.currentTarget),
         [onClick, value],
     );
 
-    return <Button {...buttonProps} onClick={handleClick} minimal={!isSelected} text={label} />;
+    return <Button {...buttonProps} onClick={handleClick} text={label} />;
 }
 SegmentedControlOption.displayName = `${DISPLAYNAME_PREFIX}.SegmentedControlOption`;

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

@@ -27,13 +27,15 @@ export const SegmentedControlExample: React.FC<ExampleProps> = props => {
 
     const [fill, setFill] = React.useState<boolean>(false);
     const [inline, setInline] = React.useState<boolean>(false);
+    const [compact, setCompact] = React.useState<boolean>(false);
     const [size, setSize] = React.useState<Size>("small");
 
     const options = (
         <>
             <H5>Props</H5>
             <Switch checked={inline} label="Inline" onChange={handleBooleanChange(setInline)} />
             <Switch checked={fill} label="Fill" onChange={handleBooleanChange(setFill)} />
+            <Switch checked={compact} label="Compact" onChange={handleBooleanChange(setCompact)} />
             <Divider />
             <FormGroup label="Intent">
                 <SegmentedControl
@@ -60,6 +62,7 @@ export const SegmentedControlExample: React.FC<ExampleProps> = props => {
     return (
         <Example options={options} {...props}>
             <SegmentedControl
+                compact={compact}
                 defaultValue="list"
                 fill={fill}
                 inline={inline}