Skip to content

Commit

Permalink
feat: allow to manually define button states
Browse files Browse the repository at this point in the history
  • Loading branch information
Federico Zivolo committed Jan 7, 2019
1 parent 21c169e commit 51ff519
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 12 deletions.
27 changes: 18 additions & 9 deletions packages/react-core/src/Button/__snapshots__/index.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -28,19 +28,22 @@ exports[`renders a Button with small size 1`] = `
background-color: #1ED7D1;
}
.emotion-0:hover {
.emotion-0:hover,
.emotion-0[data-state*='hover'] {
background-color: hsl(178.10000000000002,75.5%,43.2%);
}
.emotion-0:active {
.emotion-0:active,
.emotion-0[data-state*='active'] {
background-color: hsl(178.10000000000002,75.5%,38.4%);
}
.emotion-0:focus:not(:focus-visible) {
outline: 0;
}
.emotion-0:focus-visible {
.emotion-0:focus-visible,
.emotion-0[data-state*='focus'] {
outline: 0;
box-shadow: 0 0 0 0.5px #FFFFFF,0 0 2px 2px #1ED7D1;
}
Expand Down Expand Up @@ -98,19 +101,22 @@ exports[`renders a disabled and transparent Button 1`] = `
background-color: transparent;
}
.emotion-0:hover {
.emotion-0:hover,
.emotion-0[data-state*='hover'] {
background-color: hsl(178.10000000000002,75.5%,43.2%);
}
.emotion-0:active {
.emotion-0:active,
.emotion-0[data-state*='active'] {
background-color: hsl(178.10000000000002,75.5%,38.4%);
}
.emotion-0:focus:not(:focus-visible) {
outline: 0;
}
.emotion-0:focus-visible {
.emotion-0:focus-visible,
.emotion-0[data-state*='focus'] {
outline: 0;
box-shadow: 0 0 0 0.5px #FFFFFF,0 0 2px 2px #1ED7D1;
}
Expand Down Expand Up @@ -175,19 +181,22 @@ exports[`renders the expected markup 1`] = `
background-color: #1ED7D1;
}
.emotion-0:hover {
.emotion-0:hover,
.emotion-0[data-state*='hover'] {
background-color: hsl(178.10000000000002,75.5%,43.2%);
}
.emotion-0:active {
.emotion-0:active,
.emotion-0[data-state*='active'] {
background-color: hsl(178.10000000000002,75.5%,38.4%);
}
.emotion-0:focus:not(:focus-visible) {
outline: 0;
}
.emotion-0:focus-visible {
.emotion-0:focus-visible,
.emotion-0[data-state*='focus'] {
outline: 0;
box-shadow: 0 0 0 0.5px #FFFFFF,0 0 2px 2px #1ED7D1;
}
Expand Down
9 changes: 6 additions & 3 deletions packages/react-core/src/Button/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -105,16 +105,19 @@ const Button = styled(
return css`
background-color: ${color};
&:hover {
&:hover,
&[data-state*='hover'] {
background-color: ${hoverMod(color)};
}
&:active {
&:active,
&[data-state*='active'] {
background-color: ${activeMod(color)};
}
&:focus:not(:focus-visible) {
outline: 0;
}
&:focus-visible {
&:focus-visible,
&[data-state*='focus'] {
outline: 0;
box-shadow: 0 0 0 0.5px ${props.theme.background}, 0 0 2px 2px ${color};
}
Expand Down

0 comments on commit 51ff519

Please sign in to comment.