From 3883be319396fc34f53a3a5641c4668be909d2ac Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 23 Dec 2020 08:48:48 -0500
Subject: [PATCH] Add visual separators for solid buttons

---
 docs/components/button-group.md               | 42 +++++++++++++++++--
 docs/components/button.md                     | 18 --------
 docs/getting-started/changelog.md             |  1 +
 .../button-group/button-group.light-dom.scss  | 10 +++++
 4 files changed, 49 insertions(+), 22 deletions(-)

diff --git a/docs/components/button-group.md b/docs/components/button-group.md
index 757212f7..3dd594d8 100644
--- a/docs/components/button-group.md
+++ b/docs/components/button-group.md
@@ -44,7 +44,7 @@ All button sizes are supported, but avoid mixing sizes within the same button gr
 
 ### Theme Buttons
 
-Theme buttons are supported through the button's `type` attribute. Types can be mixed as needed.
+Theme buttons are supported through the button's `type` attribute.
 
 ```html preview
 <sl-button-group>
@@ -55,6 +55,14 @@ Theme buttons are supported through the button's `type` attribute. Types can be
 
 <br><br>
 
+<sl-button-group>
+  <sl-button type="success">Left</sl-button>
+  <sl-button type="success">Center</sl-button>
+  <sl-button type="success">Right</sl-button>
+</sl-button-group>
+
+<br><br>
+
 <sl-button-group>
   <sl-button type="info">Left</sl-button>
   <sl-button type="info">Center</sl-button>
@@ -64,9 +72,17 @@ Theme buttons are supported through the button's `type` attribute. Types can be
 <br><br>
 
 <sl-button-group>
-  <sl-button>Create</sl-button>
-  <sl-button>Edit</sl-button>
-  <sl-button type="danger">Destroy</sl-button>
+  <sl-button type="warning">Left</sl-button>
+  <sl-button type="warning">Center</sl-button>
+  <sl-button type="warning">Right</sl-button>
+</sl-button-group>
+
+<br><br>
+
+<sl-button-group>
+  <sl-button type="danger">Left</sl-button>
+  <sl-button type="danger">Center</sl-button>
+  <sl-button type="danger">Right</sl-button>
 </sl-button-group>
 ```
 
@@ -117,6 +133,24 @@ Dropdowns can be placed inside button groups as long as the trigger is a `<sl-bu
 </sl-button-group>
 ```
 
+### Split Buttons
+
+Create a split button using a button and a dropdown.
+
+```html preview
+<sl-button-group> 
+  <sl-button type="primary">Save</sl-button>
+  <sl-dropdown placement="bottom-end">
+    <sl-button slot="trigger" type="primary"caret></sl-button>
+    <sl-menu>
+      <sl-menu-item>Save</sl-menu-item>
+      <sl-menu-item>Save as&hellip;</sl-menu-item>
+      <sl-menu-item>Save all</sl-menu-item>
+    </sl-menu>
+  </sl-dropdown>
+</sl-button-group>
+```
+
 ### Tooltips in Button Groups
 
 Buttons can be wrapped in tooltips to provide more detail when the user interacts with them.
diff --git a/docs/components/button.md b/docs/components/button.md
index 544f12c2..3c065f7a 100644
--- a/docs/components/button.md
+++ b/docs/components/button.md
@@ -180,22 +180,4 @@ Use the `disabled` prop to disable a button. Clicks will be suppressed until the
 <sl-button type="danger" disabled>Danger</sl-button>
 ```
 
-### Split Buttons
-
-Create a split button using a [button group](/components/button-group) and a [dropdown](/components/dropdown).
-
-```html preview
-<sl-button-group> 
-  <sl-button>Save</sl-button>
-  <sl-dropdown placement="bottom-end">
-    <sl-button slot="trigger" caret></sl-button>
-    <sl-menu>
-      <sl-menu-item>Save</sl-menu-item>
-      <sl-menu-item>Save as&hellip;</sl-menu-item>
-      <sl-menu-item>Save all</sl-menu-item>
-    </sl-menu>
-  </sl-dropdown>
-</sl-button-group>
-```
-
 [component-metadata:sl-button]
diff --git a/docs/getting-started/changelog.md b/docs/getting-started/changelog.md
index 7e09f249..fb4740cc 100644
--- a/docs/getting-started/changelog.md
+++ b/docs/getting-started/changelog.md
@@ -20,6 +20,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
   - Removed `input`, `prefix` and `suffix` parts
 - 🚨 BREAKING CHANGE: Removed `copy-button` part from `sl-color-picker` since copying is now done by clicking the preview
 - Added `getFormattedValue()` method to `sl-color-picker` so you can retrieve the current value in any format
+- Added visual separators between solid buttons in `sl-button-group`
 - Fixed a bug where moving the mouse while `sl-dropdown` is closing would remove focus from the trigger
 - Fixed a bug where `sl-menu-item` didn't set a default color in the dark theme
 - Fixed a bug where `sl-color-picker` preview wouldn't update in Safari
diff --git a/src/components/button-group/button-group.light-dom.scss b/src/components/button-group/button-group.light-dom.scss
index 35833f3a..87b94f9d 100644
--- a/src/components/button-group/button-group.light-dom.scss
+++ b/src/components/button-group/button-group.light-dom.scss
@@ -34,6 +34,16 @@ sl-button-group {
   > sl-dropdown:not(:first-child) > sl-button[slot='trigger'],
   > sl-tooltip:not(:first-child) > sl-button {
     margin-left: calc(-1 * var(--sl-input-border-width));
+
+    // Add a visual separator between solid buttons
+    &:not([type='default'])::part(base):not(:hover):not(:active):not(:focus)::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      border-left: solid 1px #ffffff40;
+    }
   }
 
   // Hover