Merge branch 'release-10.10.0' into progress-bar

Author: emilybrick

modules/primer-buttons/lib/button-group.scss

@@ -5,39 +5,38 @@
 @warn ".BtnGroup-form will be deprecated in version 11. Use .BtnGroup-parent instead.";
 
 .BtnGroup {
-  display: inline-block;
-  vertical-align: middle;
-  @include clearfix();
+  display: inline-flex;
+  align-items: middle;
 
   // Proper spacing for multiple button groups (a la, gollum editor)
   + .BtnGroup,
   + .btn {
-    margin-left: 5px;
+    margin-left: $spacer-2;
   }
 }
 
 .BtnGroup-item {
   position: relative;
-  float: left;
   border-right-width: 0;
   border-radius: 0;
 
   &:first-child {
-    border-top-left-radius: 3px;
-    border-bottom-left-radius: 3px;
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
   }
 
   &:last-child {
-    border-right-width: 1px;
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
+    border-right-width: $border-width;
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
   }
 
   &.selected,
   &:focus,
   &:active,
   &:hover {
-    border-right-width: 1px;
+    z-index: 1;
+    border-right-width: $border-width;
 
     + .BtnGroup-item,
     + .BtnGroup-parent .BtnGroup-item,
@@ -49,17 +48,15 @@
 
 .BtnGroup-parent,
 .BtnGroup-form {
-  float: left;
-
   &:first-child .BtnGroup-item {
-    border-top-left-radius: 3px;
-    border-bottom-left-radius: 3px;
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
   }
 
   &:last-child .BtnGroup-item {
-    border-right-width: 1px;
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
+    border-right-width: $border-width;
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
   }
 
   .BtnGroup-item {
@@ -72,7 +69,7 @@
   &:active,
   &:hover {
     .BtnGroup-item {
-      border-right-width: 1px;
+      border-right-width: $border-width;
     }
 
     + .BtnGroup-item,

modules/primer-buttons/stories.js

@@ -1,63 +1,9 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
+import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown'
 
-storiesOf('Button', module)
-  .add('btn', () => (
-    <button className='btn'>Button</button>
-  ))
-  .add('btn-primary', () => (
-    <div className='p-4 d-flex flex-justify-between'>
-      <button className='btn btn-primary'>Button</button>
-      <button className='btn btn-primary hover'>hover</button>
-      <button className='btn btn-primary focus'>focus</button>
-      <button className='btn btn-primary selected'>selected</button>
-      <button className='btn btn-primary disabled'>disabled</button>
-    </div>
-  ))
-  .add('btn-danger', () => (
-    <div className='p-4 d-flex flex-justify-between'>
-      <button className='btn btn-danger'>Button</button>
-      <button className='btn btn-danger hover'>hover</button>
-      <button className='btn btn-danger focus'>focus</button>
-      <button className='btn btn-danger selected'>selected</button>
-      <button className='btn btn-danger disabled'>disabled</button>
-    </div>
-  ))
-  .add('btn-outline', () => (
-    <div className='p-4 d-flex flex-justify-between'>
-      <button className='btn btn-outline'>Button</button>
-      <button className='btn btn-outline hover'>hover</button>
-      <button className='btn btn-outline focus'>focus</button>
-      <button className='btn btn-outline selected'>selected</button>
-      <button className='btn btn-outline disabled'>disabled</button>
-    </div>
-  ))
-  .add('btn-blue', () => (
-    <div className='p-4 d-flex flex-justify-between'>
-      <button className='btn btn-blue'>Button</button>
-      <button className='btn btn-blue hover'>hover</button>
-      <button className='btn btn-blue focus'>focus</button>
-      <button className='btn btn-blue selected'>selected</button>
-      <button className='btn btn-blue disabled'>disabled</button>
-    </div>
-  ))
-  .add('btn-purple', () => (
-    <div className='p-4 d-flex flex-justify-between'>
-      <button className='btn btn-purple'>Button</button>
-      <button className='btn btn-purple hover'>hover</button>
-      <button className='btn btn-purple focus'>focus</button>
-      <button className='btn btn-purple selected'>selected</button>
-      <button className='btn btn-purple disabled'>disabled</button>
-    </div>
-  ))
-  .add('btn-large', () => (
-    <div className='f3 p-4'>
-      <a className="btn btn-large btn-purple mr-6" href="#url" role="button">Large link button</a>
-      <button className="btn btn-large" type="button">Large button button</button>
-    </div>
-  ))
-  .add('btn-link', () => (
-    <div className='p-4 d-flex flex-justify-between'>
-      <button className='btn-link'>Button</button>
-    </div>
-  ))
+const stories = storiesOf('Button', module)
+
+for (const {title, story} of storiesFromMarkdown(require.context('.', true, /\.md$/))) {
+  stories.add(title, story)
+}