Skip to content

Button Group fixes #601

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Nov 15, 2018
Merged

Button Group fixes #601

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
28cf2b9
get stories from markdown
shawnbot Nov 15, 2018
683b841
use 2x spacer between button groups
shawnbot Nov 15, 2018
c6c5d98
use variables in button-group.scss
shawnbot Nov 15, 2018
5aaf67c
use inline-flex in button groups
shawnbot Nov 15, 2018
a14762d
add z-index: 1 to active button group items
shawnbot Nov 15, 2018
5e0cabd
lint
shawnbot Nov 15, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 16 additions & 19 deletions modules/primer-buttons/lib/button-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 {
Expand All @@ -72,7 +69,7 @@
&:active,
&:hover {
.BtnGroup-item {
border-right-width: 1px;
border-right-width: $border-width;
}

+ .BtnGroup-item,
Expand Down
66 changes: 6 additions & 60 deletions modules/primer-buttons/stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
}