From 60c795902c503769ce1319ea62f6e821e9856ac3 Mon Sep 17 00:00:00 2001
From: Jon Ambas <jon@jonambas.com>
Date: Mon, 25 Sep 2017 17:55:51 -0400
Subject: [PATCH] Fix Button group border radius and focus

---
 src/components/Button/Button.module.scss | 9 +++++++--
 src/components/Button/Group.js           | 2 ++
 stories/Button.js                        | 8 ++++++++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
index 450254376..da16f7551 100644
--- a/src/components/Button/Button.module.scss
+++ b/src/components/Button/Button.module.scss
@@ -2,6 +2,7 @@
 
 .Button,
 .Button:visited {
+  display: inline-block;
   padding: rem(5) rem(12);
   border: none;
   margin-bottom: 0;
@@ -29,11 +30,13 @@
     border-radius: 0;
 
     &:first-child {
-      border-radius: border-radius() 0 0 border-radius();
+      border-top-left-radius: border-radius();
+      border-bottom-left-radius: border-radius();
     }
 
     &:last-child {
-      border-radius: 0 border-radius() border-radius() 0;
+      border-top-right-radius: border-radius();
+      border-bottom-right-radius: border-radius();
     }
   }
 
@@ -54,6 +57,8 @@
   }
 
   &:focus {
+    position: relative;
+    z-index: 1;
     outline: 0;
     border: 1px solid color(blue);
     box-shadow: 0 0 0 1px color(blue);
diff --git a/src/components/Button/Group.js b/src/components/Button/Group.js
index bd3fedc2e..75e945a05 100644
--- a/src/components/Button/Group.js
+++ b/src/components/Button/Group.js
@@ -16,4 +16,6 @@ Group.propTypes = {
   ]).isRequired
 };
 
+Group.displayName = 'Button.Group';
+
 export default Group;
diff --git a/stories/Button.js b/stories/Button.js
index 3f4d7fcfd..836d6724e 100644
--- a/stories/Button.js
+++ b/stories/Button.js
@@ -79,4 +79,12 @@ export default storiesOf('Button', module)
 
   .addWithInfo('External', () => (
       <Button to='http://google.com'>Google</Button>
+  ))
+
+  .addWithInfo('Group', () => (
+      <Button.Group>
+        <Button>Linear</Button>
+        <Button>Log</Button>
+        <Button disabled>Sq Rt</Button>
+      </Button.Group>
   ));