Skip to content

Commit

Permalink
fix(atoms): fix button paddings
Browse files Browse the repository at this point in the history
  • Loading branch information
@ej9x
ej9x committed Jul 9, 2018
1 parent 70a8ea4 commit df499de
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 39 deletions.
7 changes: 3 additions & 4 deletions src/atoms/Button/Button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,22 +52,21 @@ const theme = createTheme(name, (colors: *): * => ({
},
},
},

modifiers: {
size: {
sm: {
height: '3rem',
padding: '0 1rem',
padding: '0 2rem',
borderRadius: '.5rem',
},
md: {
height: '4rem',
padding: '0 2rem',
padding: '0 4rem',
borderRadius: '.5rem',
},
lg: {
height: '5rem',
padding: '0 3rem',
padding: '0 6rem',
borderRadius: '.5rem',
},
},
Expand Down
70 changes: 35 additions & 35 deletions storybook/__tests__/__snapshots__/storyshots.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ exports[`Storyshots ATOMS/Button with children 1`] = `
background-color: #4DA1FF;
color: rgba(255,255,255,1);
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -133,7 +133,7 @@ exports[`Storyshots ATOMS/Button with custom colors and variant 1`] = `
background-color: #4DA1FF;
color: rgba(255,255,255,1);
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -225,7 +225,7 @@ exports[`Storyshots ATOMS/Button with custom colors and variant 1`] = `
background-color: #00bb6e;
color: rgba(255,255,255,1);
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -265,7 +265,7 @@ exports[`Storyshots ATOMS/Button with custom colors and variant 1`] = `
background-color: #eb4235;
color: rgba(255,255,255,1);
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -305,7 +305,7 @@ exports[`Storyshots ATOMS/Button with custom colors and variant 1`] = `
background-color: #FFFFFF;
color: #323c47;
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -344,7 +344,7 @@ exports[`Storyshots ATOMS/Button with custom colors and variant 1`] = `
border-color: #4DA1FF;
color: #323c47;
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -383,7 +383,7 @@ exports[`Storyshots ATOMS/Button with custom colors and variant 1`] = `
border-color: #00bb6e;
color: #323c47;
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -422,7 +422,7 @@ exports[`Storyshots ATOMS/Button with custom colors and variant 1`] = `
border-color: #eb4235;
color: #323c47;
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -461,7 +461,7 @@ exports[`Storyshots ATOMS/Button with custom colors and variant 1`] = `
border-color: #d0d7dd;
color: #323c47;
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -580,7 +580,7 @@ exports[`Storyshots ATOMS/Button with custom sizes 1`] = `
background-color: #4DA1FF;
color: rgba(255,255,255,1);
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -646,7 +646,7 @@ exports[`Storyshots ATOMS/Button with custom sizes 1`] = `
background-color: #4DA1FF;
color: rgba(255,255,255,1);
height: 3rem;
padding: 0 1rem;
padding: 0 2rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -686,7 +686,7 @@ exports[`Storyshots ATOMS/Button with custom sizes 1`] = `
background-color: #4DA1FF;
color: rgba(255,255,255,1);
height: 5rem;
padding: 0 3rem;
padding: 0 6rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -788,7 +788,7 @@ exports[`Storyshots ATOMS/Button with disabled modifiers 1`] = `
background-color: #d0d7dd;
color: #FFFFFF;
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -863,7 +863,7 @@ exports[`Storyshots ATOMS/Button with icon 1`] = `
border-color: #00bb6e;
color: #323c47;
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -950,7 +950,7 @@ exports[`Storyshots ATOMS/Button with loading 1`] = `
position: relative;
pointer-events: none;
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -1010,7 +1010,7 @@ exports[`Storyshots ATOMS/Button with loading 1`] = `
position: relative;
pointer-events: none;
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -1094,7 +1094,7 @@ exports[`Storyshots ATOMS/Button with stretch 1`] = `
background-color: #4DA1FF;
color: rgba(255,255,255,1);
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
width: 100%;
}
Expand Down Expand Up @@ -1153,7 +1153,7 @@ exports[`Storyshots ATOMS/Button with submit type 1`] = `
background-color: #4DA1FF;
color: rgba(255,255,255,1);
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -1211,7 +1211,7 @@ exports[`Storyshots ATOMS/Button with text 1`] = `
background-color: #4DA1FF;
color: rgba(255,255,255,1);
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -7632,7 +7632,7 @@ exports[`Storyshots ATOMS/Dropdown default 1`] = `
background-color: #4DA1FF;
color: rgba(255,255,255,1);
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -7750,7 +7750,7 @@ exports[`Storyshots ATOMS/Dropdown with custom body width 1`] = `
background-color: #4DA1FF;
color: rgba(255,255,255,1);
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -7868,7 +7868,7 @@ exports[`Storyshots ATOMS/Dropdown with custom offset 1`] = `
background-color: #4DA1FF;
color: rgba(255,255,255,1);
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -7986,7 +7986,7 @@ exports[`Storyshots ATOMS/Dropdown with dark background 1`] = `
background-color: #4DA1FF;
color: rgba(255,255,255,1);
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -8105,7 +8105,7 @@ exports[`Storyshots ATOMS/Dropdown with force render 1`] = `
background-color: #4DA1FF;
color: rgba(255,255,255,1);
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -8223,7 +8223,7 @@ exports[`Storyshots ATOMS/Dropdown with pin to right 1`] = `
background-color: #4DA1FF;
color: rgba(255,255,255,1);
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -8341,7 +8341,7 @@ exports[`Storyshots ATOMS/Dropdown with stretch body 1`] = `
background-color: #4DA1FF;
color: rgba(255,255,255,1);
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
width: 100%;
}
Expand Down Expand Up @@ -8434,7 +8434,7 @@ exports[`Storyshots ATOMS/Dropdown with stretch target 1`] = `
background-color: #4DA1FF;
color: rgba(255,255,255,1);
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
width: 100%;
}
Expand Down Expand Up @@ -8553,7 +8553,7 @@ exports[`Storyshots ATOMS/Dropdown without background 1`] = `
background-color: #4DA1FF;
color: rgba(255,255,255,1);
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -8671,7 +8671,7 @@ exports[`Storyshots ATOMS/Dropdown without close on outside click 1`] = `
background-color: #4DA1FF;
color: rgba(255,255,255,1);
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -11482,7 +11482,7 @@ exports[`Storyshots ATOMS/Tabs default 1`] = `
background-color: #4DA1FF;
color: rgba(255,255,255,1);
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -11600,7 +11600,7 @@ exports[`Storyshots ATOMS/Tabs with force render 1`] = `
background-color: #4DA1FF;
color: rgba(255,255,255,1);
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -11727,7 +11727,7 @@ exports[`Storyshots ATOMS/Tabs with selected title 1`] = `
background-color: #4DA1FF;
color: rgba(255,255,255,1);
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -11871,7 +11871,7 @@ exports[`Storyshots MOLECULES/ButtonGroup default 1`] = `
background-color: #4DA1FF;
color: rgba(255,255,255,1);
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -11911,7 +11911,7 @@ exports[`Storyshots MOLECULES/ButtonGroup default 1`] = `
background-color: #00bb6e;
color: rgba(255,255,255,1);
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down Expand Up @@ -11950,7 +11950,7 @@ exports[`Storyshots MOLECULES/ButtonGroup default 1`] = `
border-color: #4DA1FF;
color: #323c47;
height: 4rem;
padding: 0 2rem;
padding: 0 4rem;
border-radius: .5rem;
}
Expand Down

0 comments on commit df499de

Please sign in to comment.