Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit d71582e

Browse files
codebender828codebender828
committedOct 26, 2019
feat(button): color created base button component
·
v1.0.160.6.0
1 parent b426895 commit d71582e

File tree

8 files changed

+253
-9
lines changed

8 files changed

+253
-9
lines changed
 

‎src/App.vue

+5-5
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@
99
align-items="center"
1010
bg="gray.50"
1111
>
12-
<Button @click="alert" mx="3" variant-color="blue">Solid</Button>
13-
<Button variant="outline" mx="3" variant-color="blue" @click="alert">Outlined</Button>
14-
<Button variant="ghost" mx="3" variant-color="blue" @click="alert">Ghost</Button>
15-
<Button variant="flat" mx="3" variant-color="blue" @click="alert">Flat</Button>
16-
<Button variant="link" mx="3" variant-color="blue" @click="alert">Link</Button>
12+
<Button @click="alert" mx="3" disabled variant-color="green">Solid</Button>
13+
<Button variant="outline" mx="3" variant-color="green">Outlined</Button>
14+
<Button variant="ghost" mx="3" variant-color="green">Ghost</Button>
15+
<Button variant="flat" mx="3" variant-color="green">Flat</Button>
16+
<Button variant="link" mx="3" variant-color="green">Link</Button>
1717
</Box>
1818
</theme-provider>
1919
</template>

‎src/components/Box/index.js

+11
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,15 @@ const clamp = props => {
3535
}
3636
}
3737

38+
const decorate = props => {
39+
console.log({ textDecoration: props.textDecoration, textDecor: props.textDecor })
40+
if (props.textDecoration || props.textDecor) {
41+
return {
42+
'text-decoration': `${props.textDecoration || props.textDecor}`
43+
}
44+
}
45+
}
46+
3847
const system = compose(
3948
layout,
4049
color,
@@ -45,6 +54,7 @@ const system = compose(
4554
grid,
4655
position,
4756
shadow,
57+
decorate,
4858
typography,
4959
flexbox,
5060
propsConfig,
@@ -60,6 +70,7 @@ const Box = styled('div', {
6070
...baseProps
6171
})`
6272
${props => {
73+
console.log(props)
6374
const sanitizedProps = cleanProps(props)
6475
return system(sanitizedProps)
6576
}}

‎src/components/Button/button.style.js

Whitespace-only changes.

‎src/components/Button/button.styles.js

+230
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
import { addOpacity } from '../../lib/utils'
2+
const baseStyles = {
3+
display: 'inline-flex',
4+
appearance: 'none',
5+
alignItems: 'center',
6+
justifyContent: 'center',
7+
transition: 'all 250ms',
8+
userSelect: 'none',
9+
position: 'relative',
10+
whiteSpace: 'nowrap',
11+
verticalAlign: 'middle',
12+
lineHeight: '1.2',
13+
outline: 'none'
14+
}
15+
16+
/**
17+
* Size values
18+
*/
19+
const sizes = {
20+
lg: {
21+
height: 12,
22+
minWidth: 12,
23+
fontSize: 'lg',
24+
px: 6,
25+
py: 4
26+
},
27+
md: {
28+
height: 10,
29+
minWidth: 10,
30+
fontSize: 'md',
31+
px: 4,
32+
py: 3
33+
},
34+
sm: {
35+
height: 8,
36+
minWidth: 8,
37+
fontSize: 'sm',
38+
px: 3,
39+
py: 2
40+
},
41+
xs: {
42+
height: 6,
43+
minWidth: 6,
44+
fontSize: 'xs',
45+
px: 2,
46+
py: 1
47+
}
48+
}
49+
50+
/**
51+
* @description Determines size props
52+
* @param {Object} param0 Props object
53+
* @returns {Object} Size style props
54+
*/
55+
const sizeProps = ({ size }) => sizes[size]
56+
57+
/**
58+
* @description Get solid button style values
59+
* @param {Object} props - Style props object
60+
* @returns {Object} - Solid styles object
61+
*/
62+
const getSolidStyles = ({ color, colorMode }) => {
63+
let style = {
64+
light: {
65+
bg: `${color}.400`,
66+
color: 'white',
67+
_hover: {
68+
bg: `${color}.500`
69+
},
70+
_active: {
71+
bg: `${color}.600`
72+
}
73+
}
74+
}
75+
return style[colorMode]
76+
}
77+
78+
/**
79+
* @description Get ghost button style values
80+
* @param {Object} props - Style Props
81+
* @returns {Object} - Ghost styles object
82+
*/
83+
const getGhostStyles = ({ color, colorMode, theme }) => {
84+
const _theme = theme()
85+
const _color = _theme.colors[color] && _theme.colors[color][200]
86+
let result = {
87+
light: {
88+
color: `${color}.400`,
89+
bg: `${color}.50`,
90+
_hover: {
91+
bg: `${color}.100`
92+
},
93+
_active: {
94+
bg: `${color}.200`
95+
}
96+
},
97+
dark: {
98+
color: `${color}.200`,
99+
bg: 'transparent',
100+
_hover: {
101+
bg: addOpacity(_color, 0.12)
102+
},
103+
_active: {
104+
bg: addOpacity(_color, 0.24)
105+
}
106+
}
107+
}
108+
return result[colorMode]
109+
}
110+
111+
/**
112+
* @description Get flat button style values
113+
* @param {Object} props - Style Props
114+
* @returns {Object} - Ghost styles object
115+
*/
116+
const getFlatStyles = ({ color, colorMode, theme }) => {
117+
const _theme = theme()
118+
const _color = _theme.colors[color] && _theme.colors[color][200]
119+
let result = {
120+
light: {
121+
color: `${color}.400`,
122+
bg: 'transparent',
123+
_hover: {
124+
bg: `${color}.50`
125+
},
126+
_active: {
127+
bg: `${color}.100`
128+
}
129+
},
130+
dark: {
131+
color: `${color}.200`,
132+
bg: 'transparent',
133+
_hover: {
134+
bg: addOpacity(_color, 0.12)
135+
},
136+
_active: {
137+
bg: addOpacity(_color, 0.24)
138+
}
139+
}
140+
}
141+
return result[colorMode]
142+
}
143+
144+
/**
145+
* @description Get outline button style values
146+
* @param {Object} props - Style props object
147+
* @returns {Object} - Solid styles object
148+
*/
149+
const getOutlineStyles = props => {
150+
const { color, colorMode } = props
151+
const borderColor = { light: 'gray.200', dark: 'whiteAlpha.300' }
152+
153+
return {
154+
border: '1px',
155+
borderColor: color === 'gray' ? borderColor[colorMode] : 'current',
156+
...getFlatStyles(props)
157+
}
158+
}
159+
160+
/**
161+
* @description Get link button style values
162+
* @param {Object} props - Style props object
163+
* @returns {Object} - Solid styles object
164+
*/
165+
const getLinkStyles = ({ color, colorMode }) => {
166+
const _color = { light: `${color}.400`, dark: `${color}.200` }
167+
const _activeColor = { light: `${color}.700`, dark: `${color}.500` }
168+
return {
169+
p: 0,
170+
height: 'auto',
171+
lineHeight: 'normal',
172+
color: _color[colorMode],
173+
_hover: {
174+
// TODO: Figure out why styled system doesn't support `textDecoration` property.
175+
textDecoration: 'underline'
176+
},
177+
_active: {
178+
color: _activeColor[colorMode]
179+
}
180+
}
181+
}
182+
183+
/**
184+
* @description Determines styles for a given v
185+
* @param {Object} props - Props Object
186+
* @returns {Object} - Variant styles object
187+
*/
188+
const getVariantStyles = (props) => {
189+
switch (props.variant) {
190+
case 'solid':
191+
return getSolidStyles(props)
192+
case 'outline':
193+
return getOutlineStyles(props)
194+
case 'ghost':
195+
return getGhostStyles(props)
196+
case 'flat':
197+
return getFlatStyles(props)
198+
case 'link':
199+
return getLinkStyles(props)
200+
default:
201+
return {}
202+
}
203+
}
204+
205+
/**
206+
* Button focus styles
207+
*/
208+
const focusStyles = {
209+
_focus: {
210+
outline: 'none',
211+
boxShadow: 'outline'
212+
}
213+
}
214+
215+
/**
216+
* @description Generates Button styles based on passed variant props and theme colors.
217+
* @param {{color: String|Array<String>, theme: Object, colorMode: String, size: String|Array<String>}} props - Style props object
218+
* @returns {Object} Style object to be passed to styled component
219+
* @todo Pass the `theme` from the ThemeProvider context. Will need to create a context provider for theme.
220+
*/
221+
const createButtonStyles = (props) => {
222+
return {
223+
...baseStyles,
224+
...focusStyles,
225+
...sizeProps(props),
226+
...getVariantStyles(props)
227+
}
228+
}
229+
230+
export default createButtonStyles

‎src/components/Button/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import PseudoBox from '../PseudoBox'
22
import styleProps from '../../lib/config/props'
33
import { cleanProps } from '../../lib/utils'
4-
import createButtonStyles from './styles'
4+
import createButtonStyles from './button.styles'
55

66
/**
77
* @description The Button component is an accessible rich component that does what a button does :)

‎src/components/Button/styles.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ const getSolidStyles = ({ color, colorMode }) => {
6363
let style = {
6464
light: {
6565
bg: `${color}.400`,
66-
color: `${color}.50`,
66+
color: 'white',
6767
_hover: {
6868
bg: `${color}.500`
6969
},
@@ -171,6 +171,7 @@ const getLinkStyles = ({ color, colorMode }) => {
171171
lineHeight: 'normal',
172172
color: _color[colorMode],
173173
_hover: {
174+
// TODO: Figure out why styled system doesn't support `textDecoration` property.
174175
textDecoration: 'underline'
175176
},
176177
_active: {

‎src/lib/config/props/props.config.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,9 @@ export const config = {
113113
property: 'border-bottom',
114114
scale: 'borders'
115115
},
116-
textDecoration: true,
116+
textDecoration: {
117+
property: 'textDecoration'
118+
},
117119
overflowX: true,
118120
overflowY: true,
119121
textTransform: true,

‎src/lib/theme/typography.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const typography = {
3232
},
3333
fonts: {
3434
heading: `-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
35-
body: `-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
35+
body: `Rubik, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
3636
mono: `SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace`
3737
},
3838
fontSizes: {

0 commit comments

Comments
 (0)
This repository has been archived.