Skip to content
This repository has been archived by the owner on Oct 20, 2022. It is now read-only.

Commit

Permalink
fix(Button): Fix focus styling
Browse files Browse the repository at this point in the history 
Also fix default color of link and disabled styling.
  • Loading branch information
Andreas Broström committed May 17, 2017
1 parent a5e0f0b commit 2b499f7
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 59 deletions.
64 changes: 47 additions & 17 deletions src/components/button/button-styles.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ const buttonModifierFn = (variant, color, colorFocus, colorDisabled) => {
borderColor: colorDisabled,
color: '#fff',
},

'&:focus': {
boxShadow: `0 0 0 2px ${colorFocus}`,
},
},

secondary: {
Expand All @@ -36,6 +40,10 @@ const buttonModifierFn = (variant, color, colorFocus, colorDisabled) => {
color: colorDisabled,
borderColor: colorDisabled,
},

'&:focus': {
boxShadow: `0 0 0 2px ${colorFocus}`,
},
},

link: {
Expand All @@ -44,11 +52,14 @@ const buttonModifierFn = (variant, color, colorFocus, colorDisabled) => {
'&:hover': {
color: colorFocus,
},

'&:focus&::after': {
boxShadow: `0 4px 0 -2px ${colorFocus}`,
},
},
};

return {
outlineColor: color,
...variantDict[variant],
};
};
Expand All @@ -73,9 +84,13 @@ export default createStyleSheet('Button', theme => {
cursor: 'not-allowed',
},

'&:hover': {
'&:hover:not(:disabled)': {
cursor: 'pointer',
},

'&:focus': {
outline: 'none',
},
},

block: {
Expand Down Expand Up @@ -121,11 +136,10 @@ export default createStyleSheet('Button', theme => {
background: palette.background.muted,
border: `2px solid ${palette.background.muted}`,
color: palette.text.muted,
},

'&:hover': {
background: palette.background.muted,
borderColor: palette.background.muted,
},
'&:focus': {
boxShadow: `0 0 0 2px ${focusColor(palette.background.secondary)}`,
},

'&.action': buttonModifierFn(
Expand Down Expand Up @@ -170,11 +184,10 @@ export default createStyleSheet('Button', theme => {
'&:disabled': {
border: `2px solid ${palette.background.muted}`,
color: palette.background.muted,
},

'&:hover': {
color: palette.background.muted,
borderColor: palette.background.muted,
},
'&:focus': {
boxShadow: `0 0 0 2px ${c(palette.color.gray).darken(0.1).hex()}`,
},

'&.xs,&.sm': {
Expand Down Expand Up @@ -211,26 +224,43 @@ export default createStyleSheet('Button', theme => {
},

link: {
position: 'relative',
background: 'none',
paddingLeft: 0,
paddingRight: 0,
color: palette.background.secondary,
borderRadius: 0,
color: palette.text.default,
border: '2px solid transparent',
fontWeight: 600,
cursor: 'pointer',

'&:hover': {
color: c(palette.background.secondary).darken(0.2).hex(), // was $color-primary-dark
'&::after': {
position: 'absolute',
content: '""',
left: 0,
right: 0,
bottom: 0,
top: 0,
marginBottom: 3,
transition: transitions.create(),
},

'&:disabled': {
color: palette.background.muted,
'&:focus': {
boxShadow: 'none',

'&:hover': {
color: palette.background.muted,
'&::after': {
boxShadow: `0 4px 0 -2px ${palette.background.secondary}`,
},
},

'&:hover': {
color: palette.color.grayDark, // was $color-primary-dark
},

'&:disabled': {
color: palette.color.gray,
},

'&.action': buttonModifierFn('link', palette.variant.primary, focusColor(palette.variant.primary)),
'&.success': buttonModifierFn('link', palette.variant.success, focusColor(palette.variant.success)),
'&.warning': buttonModifierFn('link', palette.variant.warning, focusColor(palette.variant.warning)),
Expand Down
63 changes: 21 additions & 42 deletions src/components/button/button.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,46 +31,13 @@ Secondary button:
const style = {
marginRight: 16,
};
const groupstyle = {
marginTop: 16,
};

<div>
<div style={groupstyle}>
<div>size: xs</div>
<Button size="xs" variant="secondary" style={ style }>Click Me</Button>
<Button size="xs" variant="secondary" modifier="action" style={ style }>Click Me</Button>
<Button size="xs" variant="secondary" modifier="danger" style={ style }>Click Me</Button>
<Button size="xs" variant="secondary" modifier="warning" style={ style }>Click Me</Button>
<Button size="xs" variant="secondary" modifier="success" style={ style }>Click Me</Button>
</div>

<div style={groupstyle}>
<div>size: sm</div>
<Button size="sm" variant="secondary" style={ style }>Click Me</Button>
<Button size="sm" variant="secondary" modifier="action" style={ style }>Click Me</Button>
<Button size="sm" variant="secondary" modifier="danger" style={ style }>Click Me</Button>
<Button size="sm" variant="secondary" modifier="warning" style={ style }>Click Me</Button>
<Button size="sm" variant="secondary" modifier="success" style={ style }>Click Me</Button>
</div>

<div style={groupstyle}>
<div>size: md</div>
<Button size="md" variant="secondary" style={ style }>Click Me</Button>
<Button size="md" variant="secondary" modifier="action" style={ style }>Click Me</Button>
<Button size="md" variant="secondary" modifier="danger" style={ style }>Click Me</Button>
<Button size="md" variant="secondary" modifier="warning" style={ style }>Click Me</Button>
<Button size="md" variant="secondary" modifier="success" style={ style }>Click Me</Button>
</div>

<div style={groupstyle}>
<div>size: lg</div>
<Button size="lg" variant="secondary" style={ style }>Click Me</Button>
<Button size="lg" variant="secondary" modifier="action" style={ style }>Click Me</Button>
<Button size="lg" variant="secondary" modifier="danger" style={ style }>Click Me</Button>
<Button size="lg" variant="secondary" modifier="warning" style={ style }>Click Me</Button>
<Button size="lg" variant="secondary" modifier="success" style={ style }>Click Me</Button>
</div>
<Button variant="secondary" style={ style }>Click Me</Button>
<Button variant="secondary" modifier="action" style={ style }>Click Me</Button>
<Button variant="secondary" modifier="danger" style={ style }>Click Me</Button>
<Button variant="secondary" modifier="warning" style={ style }>Click Me</Button>
<Button variant="secondary" modifier="success" style={ style }>Click Me</Button>
</div>

Secondary, disabled:
Expand Down Expand Up @@ -108,9 +75,21 @@ Sizes:
verticalAlign: 'bottom',
};

const groupstyle = {
marginTop: 16,
};

<div>
<Button variant="primary" size="xs" style= { style }>Button xs</Button>
<Button variant="primary" size="sm" style= { style }>Button sm (Default)</Button>
<Button variant="primary" size="md" style= { style }>Button md</Button>
<Button variant="primary" size="lg" style= { style }>Button lg</Button>
<div style={groupstyle}>
<Button variant="primary" size="xs" style= { style }>Button xs</Button>
<Button variant="primary" size="sm" style= { style }>Button sm (Default)</Button>
<Button variant="primary" size="md" style= { style }>Button md</Button>
<Button variant="primary" size="lg" style= { style }>Button lg</Button>
</div>
<div style={groupstyle}>
<Button variant="secondary" size="xs" style= { style }>Button xs</Button>
<Button variant="secondary" size="sm" style= { style }>Button sm (Default)</Button>
<Button variant="secondary" size="md" style= { style }>Button md</Button>
<Button variant="secondary" size="lg" style= { style }>Button lg</Button>
</div>
</div>
1 change: 1 addition & 0 deletions src/styles/color.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export default {
blueDarker: '#2B417A', // Used together with dark in header gradient
green: '#26A699', // Plus performance, success
red: '#D54E16', // Minus performance, error
redLight: '#DA6E42', // Sell

yellow: '#E5AA4C', // Notification Logo
yellowLight: '#FFF1DD', // Notification
Expand Down

0 comments on commit 2b499f7

Please sign in to comment.