[Button Group] Add outlined prop (#6788)

Co-authored-by: Leslie Lin <llin@palantir.com>
Co-authored-by: svc-changelog <svc-changelog@palantir.com>

packages/core/changelog/@unreleased/pr-6788.v2.yml

@@ -0,0 +1,5 @@
+type: improvement
+improvement:
+  description: '[Button Group] Add outlined prop'
+  links:
+  - https://github.com/palantir/blueprint/pull/6788

packages/core/src/components/button/_button-group.scss

@@ -35,6 +35,7 @@ Markup:
 .#{$ns}-fill - Buttons expand equally to fill container
 .#{$ns}-large - Use large buttons
 .#{$ns}-minimal - Use minimal buttons
+.#{$ns}-outlined - Use outlined buttons
 .#{$ns}-vertical - Vertical layout
 
 Styleguide button-group
@@ -96,7 +97,7 @@ Styleguide button-group
   }
 
   // support wrapping buttons in a tooltip, which adds a wrapper element
-  &:not(.#{$ns}-minimal) {
+  &:not(.#{$ns}-minimal), &.#{$ns}-outlined {
     > .#{$ns}-popover-wrapper:not(:first-child) .#{$ns}-button,
     > .#{$ns}-button:not(:first-child) {
       border-bottom-left-radius: 0;
@@ -107,11 +108,17 @@ Styleguide button-group
     > .#{$ns}-button:not(:last-child) {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
+    }
+  }
+
+  &:not(.#{$ns}-minimal):not(.#{$ns}-outlined) {
+    > .#{$ns}-popover-wrapper:not(:last-child) .#{$ns}-button,
+    > .#{$ns}-button:not(:last-child) {
       margin-right: -$button-border-width;
     }
   }
 
-  &.#{$ns}-minimal {
+  &.#{$ns}-minimal, &.#{$ns}-outlined {
     .#{$ns}-button {
       @include pt-button-minimal();
     }
@@ -134,6 +141,18 @@ Styleguide button-group
     }
   }
 
+  &.#{$ns}-outlined {
+    > .#{$ns}-button {
+      @include pt-button-outlined();
+    }
+
+    &:not(.#{$ns}-vertical) {
+      > .#{$ns}-button:not(:last-child) {
+        border-right: none;
+      }
+    }
+  }
+
   .#{$ns}-popover-wrapper,
   .#{$ns}-popover-target {
     display: flex;
@@ -213,7 +232,7 @@ Styleguide button-group
       width: 100%;
     }
 
-    &:not(.#{$ns}-minimal) {
+    &:not(.#{$ns}-minimal), &.#{$ns}-outlined {
       > .#{$ns}-popover-wrapper:first-child .#{$ns}-button,
       > .#{$ns}-button:first-child {
         border-radius: $pt-border-radius $pt-border-radius 0 0;
@@ -223,12 +242,20 @@ Styleguide button-group
       > .#{$ns}-button:last-child {
         border-radius: 0 0 $pt-border-radius $pt-border-radius;
       }
+    }
 
+    &:not(.#{$ns}-minimal):not(.#{$ns}-outlined) {
       > .#{$ns}-popover-wrapper:not(:last-child) .#{$ns}-button,
       > .#{$ns}-button:not(:last-child) {
         margin-bottom: -$button-border-width;
       }
     }
+
+    &.#{$ns}-outlined {
+      > .#{$ns}-button:not(:last-child) {
+        border-bottom: none;
+      }
+    }
   }
 
   &.#{$ns}-align-left .#{$ns}-button {

packages/core/src/components/button/buttonGroup.tsx

@@ -46,6 +46,13 @@ export interface ButtonGroupProps extends Props, HTMLDivProps, React.RefAttribut
      */
     minimal?: boolean;
 
+    /**
+     * Whether the child buttons should use outlined styles.
+     *
+     * @default false
+     */
+    outlined?: boolean;
+
     /**
      * Whether the child buttons should appear with large styling.
      *
@@ -70,13 +77,14 @@ export interface ButtonGroupProps extends Props, HTMLDivProps, React.RefAttribut
  */
 export const ButtonGroup: React.FC<ButtonGroupProps> = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
     (props, ref) => {
-        const { alignText, className, fill, minimal, large, vertical, ...htmlProps } = props;
+        const { alignText, className, fill, minimal, outlined, large, vertical, ...htmlProps } = props;
         const buttonGroupClasses = classNames(
             Classes.BUTTON_GROUP,
             {
                 [Classes.FILL]: fill,
                 [Classes.LARGE]: large,
                 [Classes.MINIMAL]: minimal,
+                [Classes.OUTLINED]: outlined,
                 [Classes.VERTICAL]: vertical,
             },
             Classes.alignmentClass(alignText),

packages/docs-app/changelog/@unreleased/pr-6788.v2.yml

@@ -0,0 +1,5 @@
+type: improvement
+improvement:
+  description: '[Button Group] Add outlined prop'
+  links:
+  - https://github.com/palantir/blueprint/pull/6788

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

@@ -39,6 +39,7 @@ export interface ButtonGroupExampleState {
     iconOnly: boolean;
     intent: Intent;
     minimal: boolean;
+    outlined: boolean;
     large: boolean;
     vertical: boolean;
 }
@@ -51,6 +52,7 @@ export class ButtonGroupExample extends React.PureComponent<ExampleProps, Button
         intent: Intent.NONE,
         large: false,
         minimal: false,
+        outlined: false,
         vertical: false,
     };
 
@@ -64,6 +66,8 @@ export class ButtonGroupExample extends React.PureComponent<ExampleProps, Button
 
     private handleMinimalChange = handleBooleanChange(minimal => this.setState({ minimal }));
 
+    private handleOutlinedChange = handleBooleanChange(outlined => this.setState({ outlined }));
+
     private handleVerticalChange = handleBooleanChange(vertical => this.setState({ vertical }));
 
     public render() {
@@ -96,6 +100,7 @@ export class ButtonGroupExample extends React.PureComponent<ExampleProps, Button
                 <Switch checked={this.state.fill} label="Fill" onChange={this.handleFillChange} />
                 <Switch checked={this.state.large} label="Large" onChange={this.handleLargeChange} />
                 <Switch checked={this.state.minimal} label="Minimal" onChange={this.handleMinimalChange} />
+                <Switch checked={this.state.outlined} label="Outlined" onChange={this.handleOutlinedChange} />
                 <Switch checked={this.state.vertical} label="Vertical" onChange={this.handleVerticalChange} />
                 <IntentSelect intent={this.state.intent} label={intentLabelInfo} onChange={this.handleIntentChange} />
                 <AlignmentSelect align={this.state.alignText} onChange={this.handleAlignChange} />