Merge pull request #1 from bendera/split-buttons

Split buttons

Author: a-stewart

dev/vscode-button-group.html

@@ -22,25 +22,39 @@
       <h2>Basic example</h2>
 
       <vscode-demo>
-        <vscode-button-group>
-          <vscode-button secondary id="button-1">Hello World</vscode-button>
-          <vscode-button
-            secondary
-            icon="chevron-down"
-            id="button-2"
-          ></vscode-button>
-        </vscode-button-group>
+        <p>
+          <vscode-button-group>
+            <vscode-button secondary id="button-1">Hello World</vscode-button>
+            <vscode-button
+              secondary
+              icon="chevron-down"
+              id="button-2"
+            ></vscode-button>
+          </vscode-button-group>
+        </p>
 
-        <vscode-button-group>
-          <vscode-button secondary>Left</vscode-button>
-          <vscode-button secondary icon="arrow-swap"></vscode-button>
-          <vscode-button secondary>Right</vscode-button>
-        </vscode-button-group>
+        <p>
+          <vscode-button-group>
+            <vscode-button secondary>Left</vscode-button>
+            <vscode-button secondary icon="arrow-swap"></vscode-button>
+            <vscode-button secondary>Right</vscode-button>
+          </vscode-button-group>
+        </p>
 
-        <vscode-button-group>
-          <vscode-button>Primary</vscode-button>
-          <vscode-button secondary>Secondary</vscode-button>
-        </vscode-button-group>
+        <p>
+          <vscode-button-group>
+            <vscode-button>Left</vscode-button>
+            <vscode-button icon="arrow-swap"></vscode-button>
+            <vscode-button>Right</vscode-button>
+          </vscode-button-group>
+        </p>
+
+        <p>
+          <vscode-button-group>
+            <vscode-button>Primary</vscode-button>
+            <vscode-button secondary>Secondary</vscode-button>
+          </vscode-button-group>
+        </p>
       </vscode-demo>
     </main>
   </body>

src/vscode-button-group/vscode-button-group.styles.ts

@@ -19,10 +19,16 @@ const styles: CSSResultGroup = [
     }
 
     ::slotted(vscode-button:not(:last-child)) {
+      --divider-display: block;
+
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
       border-right-width: 0;
     }
+
+    ::slotted(vscode-button:focus) {
+      z-index: 1;
+    }
   `,
 ];
 

src/vscode-button/vscode-button.styles.ts

@@ -147,10 +147,16 @@ const styles: CSSResultGroup = [
     }
 
     .divider > div {
-      background-color: var(--vscode-button-separator);
+      background-color: var(--vscode-button-separator, rgba(255, 255, 255, 0.4));
+      height: 100%;
       width: 1px;
       margin: 0;
     }
+
+    :host([secondary]) .divider > div {
+      background-color: var(--vscode-button-secondaryForeground, #cccccc);
+      opacity: 0.4;
+    }
   `,
 ];