Fix Button group border radius and focus

SparkPost · Sep 25, 2017 · 60c7959 · 60c7959
1 parent a9550d4
commit 60c7959
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git 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
@@ -16,4 +16,6 @@ Group.propTypes = {
   ]).isRequired
 };
 
+Group.displayName = 'Button.Group';
+
 export default Group;
diff --git 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>
   ));