Fix border overlap between Buttons in outlined ButtonGroup (#6966)

palantir · Sep 16, 2024 · 5410094 · 5410094 · svc-palantir-github · Sep 16, 2024
1 parent 73da785
commit 5410094
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 3 deletions.
diff --git a/packages/core/src/components/button/_button-group.scss b/packages/core/src/components/button/_button-group.scss
@@ -142,17 +142,26 @@ Styleguide button-group
   }
 
   &.#{$ns}-outlined {
+    > .#{$ns}-popover-target > .#{$ns}-button,
     > .#{$ns}-button {
       @include pt-button-outlined();
     }
 
     &:not(.#{$ns}-vertical) {
+      > .#{$ns}-popover-target:not(:last-child) > .#{$ns}-button,
       > .#{$ns}-button:not(:last-child) {
         border-right: none;
       }
     }
   }
 
+  &:not(.#{$ns}-vertical) {
+    > .#{$ns}-popover-target:not(:last-child) .#{$ns}-button.#{$ns}-outlined,
+    > .#{$ns}-button.#{$ns}-outlined:not(:last-child) {
+      border-right: none;
+    }
+  }
+
   .#{$ns}-popover-wrapper,
   .#{$ns}-popover-target {
     display: flex;
@@ -252,10 +261,16 @@ Styleguide button-group
     }
 
     &.#{$ns}-outlined {
+      > .#{$ns}-popover-target:not(:last-child) .#{$ns}-button,
       > .#{$ns}-button:not(:last-child) {
         border-bottom: none;
       }
     }
+
+    > .#{$ns}-popover-target:not(:last-child) .#{$ns}-button.#{$ns}-outlined,
+    > .#{$ns}-button.#{$ns}-outlined:not(:last-child) {
+      border-bottom: none;
+    }
   }
 
   &.#{$ns}-align-left .#{$ns}-button {

diff --git a/packages/core/src/components/popover/_popover-in-button-group.scss b/packages/core/src/components/popover/_popover-in-button-group.scss
@@ -15,7 +15,12 @@
     > .#{$ns}-popover-target:not(:last-child) .#{$ns}-button {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
-      margin-right: -$button-border-width;
+    }
+
+    &:not(.#{$ns}-outlined) {
+      > .#{$ns}-popover-target:not(:last-child) .#{$ns}-button:not(.#{$ns}-outlined) {
+        margin-right: -$button-border-width;
+      }
     }
   }
 
@@ -34,8 +39,10 @@
         border-radius: 0 0 $pt-border-radius $pt-border-radius;
       }
 
-      > .#{$ns}-popover-target:not(:last-child) .#{$ns}-button {
-        margin-bottom: -$button-border-width;
+      &:not(.#{$ns}-outlined) {
+        > .#{$ns}-popover-target:not(:last-child) .#{$ns}-button:not(.#{$ns}-outlined) {
+          margin-bottom: -$button-border-width;
+        }
       }
     }
   }

diff --git a/packages/docs-app/src/examples/core-examples/buttonGroupPopoverExample.tsx b/packages/docs-app/src/examples/core-examples/buttonGroupPopoverExample.tsx
@@ -27,6 +27,7 @@ export interface ButtonGroupPopoverExampleState {
     fill: boolean;
     large: boolean;
     minimal: boolean;
+    outlined: boolean;
     vertical: boolean;
 }
 
@@ -36,6 +37,7 @@ export class ButtonGroupPopoverExample extends React.PureComponent<ExampleProps,
         fill: false,
         large: false,
         minimal: false,
+        outlined: false,
         vertical: false,
     };
 
@@ -45,6 +47,8 @@ export class ButtonGroupPopoverExample extends React.PureComponent<ExampleProps,
 
     private handleMinimalChange = handleBooleanChange(minimal => this.setState({ minimal }));
 
+    private handleOutlinedChange = handleBooleanChange(outlined => this.setState({ outlined }));
+
     private handleVerticalChange = handleBooleanChange(vertical => this.setState({ vertical }));
 
     public render() {
@@ -54,6 +58,7 @@ export class ButtonGroupPopoverExample extends React.PureComponent<ExampleProps,
                 <Switch label="Fill" checked={this.state.fill} onChange={this.handleFillChange} />
                 <Switch label="Large" checked={this.state.large} onChange={this.handleLargeChange} />
                 <Switch label="Minimal" checked={this.state.minimal} onChange={this.handleMinimalChange} />
+                <Switch label="Outlined" checked={this.state.outlined} onChange={this.handleOutlinedChange} />
                 <Switch label="Vertical" checked={this.state.vertical} onChange={this.handleVerticalChange} />
                 <AlignmentSelect align={this.state.alignText} label="Align text" onChange={this.handleAlignChange} />
             </>