From 0ff144a78717739d81b09d311a1e1f7ddf423310 Mon Sep 17 00:00:00 2001
From: Buni48 <37407974+Buni48@users.noreply.github.com>
Date: Thu, 27 Oct 2022 19:55:20 +0300
Subject: [PATCH] Fixed button group inner border disappears (#980)

* fixed button group inner border disappears

* updated changelog

* show border on active
---
 docs/components/button-group.md        | 2 +-
 docs/resources/changelog.md            | 1 +
 src/components/button/button.styles.ts | 4 +---
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/docs/components/button-group.md b/docs/components/button-group.md
index 936a97775..fd99a8e15 100644
--- a/docs/components/button-group.md
+++ b/docs/components/button-group.md
@@ -86,7 +86,7 @@ const App = () => (
 
 ### Theme Buttons
 
-Theme buttons are supported through the button's `type` attribute.
+Theme buttons are supported through the button's `variant` attribute.
 
 ```html preview
 <sl-button-group>
diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index de32286c2..3018c95c3 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -12,6 +12,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 - Added `button--checked` to `<sl-radio-button>` and `control--checked` to `<sl-radio>` to style just the checked state [#933](https://github.com/shoelace-style/shoelace/pull/933)
 - Fixed a bug in `<sl-card>` that prevented the border radius to apply correctly to the header [#934](https://github.com/shoelace-style/shoelace/pull/934)
+- Fixed a bug in `<sl-button-group>` where the inner border disappeared on focus [#980](https://github.com/shoelace-style/shoelace/pull/980)
 - Improved `<sl-badge>` so it renders relative to the current font size and improved padding
 - Added tests for `<sl-menu-item>` and `<sl-menu-label>` [#935](https://github.com/shoelace-style/shoelace/pull/935)
 
diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts
index ab29bd64c..b51e8d4d8 100644
--- a/src/components/button/button.styles.ts
+++ b/src/components/button/button.styles.ts
@@ -558,8 +558,7 @@ export default css`
   }
 
   /* Add a visual separator between solid buttons */
-  :host(.sl-button-group__button:not(.sl-button-group__button--focus, .sl-button-group__button--first, .sl-button-group__button--radio, [variant='default']):not(:hover, :active, :focus))
-    .button:after {
+  :host(.sl-button-group__button:not(.sl-button-group__button--radio, [variant='default']):not(:hover)) .button:after {
     content: '';
     position: absolute;
     top: 0;
@@ -574,7 +573,6 @@ export default css`
     z-index: 1;
   }
 
-  :host(.sl-button-group__button--focus),
   :host(.sl-button-group__button[checked]) {
     z-index: 2;
   }