Skip to content

Commit 0b184b5

Browse files
emortlockemortlock
authored
Refactored tailwind props (#33)
1 parent faa94ed commit 0b184b5

File tree

6 files changed

+173
-71
lines changed

6 files changed

+173
-71
lines changed

‎src/components/button/Button.jsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react'
22
import PropTypes from 'prop-types'
3+
import classnames from 'classnames'
34

45
import { withTheme } from '../theme'
56
import { BaseComponent, getColorShade } from '../tailwind'
@@ -19,14 +20,14 @@ const Button = ({
1920
text,
2021
border,
2122
brand,
23+
className,
2224
...rest
2325
}) => {
2426
const props = {
2527
border: [true, 'transparent'],
2628
leading: 'tight',
2729
p: { x: theme.spacing.md, y: theme.spacing.sm },
2830
rounded: theme.radius,
29-
select: 'none',
3031
noUnderline: true,
3132
}
3233

@@ -82,7 +83,6 @@ const Button = ({
8283
}
8384

8485
if (disabled) {
85-
// TODO: pointer-events-none
8686
props.opacity = 50
8787
}
8888

@@ -97,6 +97,11 @@ const Button = ({
9797
{...props}
9898
disabled={disabled}
9999
aria-disabled={disabled || undefined}
100+
className={classnames(
101+
'select-none',
102+
disabled && 'pointer-events-none',
103+
className,
104+
)}
100105
{...rest}
101106
>
102107
{children}
@@ -119,6 +124,7 @@ Button.propTypes = {
119124
bg: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
120125
text: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
121126
border: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
127+
className: PropTypes.string,
122128
}
123129

124130
Button.defaultProps = {
@@ -135,6 +141,7 @@ Button.defaultProps = {
135141
bg: undefined,
136142
text: undefined,
137143
border: undefined,
144+
className: undefined,
138145
}
139146

140147
export { Button as component }

‎src/components/button/__tests__/__snapshots__/Button.jsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ exports[`Button renders matching snapshot 1`] = `
1010
"transparent",
1111
]
1212
}
13+
className="select-none"
1314
disabled={false}
1415
focusable={true}
1516
is="button"
@@ -22,7 +23,6 @@ exports[`Button renders matching snapshot 1`] = `
2223
}
2324
}
2425
rounded="rounded"
25-
select="none"
2626
text="white"
2727
type="button"
2828
>

‎src/components/form/TextInput.jsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,15 @@ const TextInput = ({
2525
return (
2626
<BaseComponent
2727
is={is}
28-
className={classnames(disabled && 'pointer-events-none', className)}
28+
className={classnames(
29+
'appearance-none',
30+
disabled && 'pointer-events-none',
31+
className,
32+
)}
2933
rounded={theme.radius}
3034
text={theme.textColors.body}
3135
p={{ x: theme.spacing.md, y: theme.spacing.sm }}
3236
m={{ b: theme.spacing.sm }}
33-
appearance="none"
3437
border={!isInvalid ? true : [true, theme.brandColors.danger]}
3538
w="full"
3639
leading="tight"

‎src/components/form/__tests__/__snapshots__/TextInput.jsx.snap‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22

33
exports[`TextInput renders matching snapshot 1`] = `
44
<BaseComponent
5-
appearance="none"
65
border={true}
7-
className=""
6+
className="appearance-none"
87
disabled={false}
98
id="username"
109
is="input"

‎src/components/tailwind/BaseComponent.jsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,8 @@ const BaseComponent = ({ is, children, className, focusable, ...rest }) => {
1717
<Component
1818
{...filterProps(rest, tailwindProps)}
1919
className={classnames(
20-
getTailwindClassNames({
21-
...(isFocusable
22-
? {
23-
'outline-focus': 'none',
24-
'shadow-focus': 'outline',
25-
}
26-
: {}),
27-
...rest,
28-
}),
20+
isFocusable && 'focus:outline-none focus:shadow-outline',
21+
getTailwindClassNames(rest),
2922
className,
3023
)}
3124
>

‎src/components/tailwind/tailwindProps.js‎

Lines changed: 155 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,186 @@
11
/* eslint-disable react/destructuring-assignment */
22
import PropTypes from 'prop-types'
33

4-
export const propTypes = {
5-
absolute: PropTypes.bool,
6-
align: PropTypes.string,
7-
appearance: PropTypes.oneOf(['none']),
4+
const display = {
85
block: PropTypes.bool,
9-
bg: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
10-
border: PropTypes.oneOfType([
11-
PropTypes.string,
6+
hidden: PropTypes.bool,
7+
inlineBlock: PropTypes.bool,
8+
table: PropTypes.bool,
9+
tableCell: PropTypes.bool,
10+
tableRow: PropTypes.bool,
11+
}
12+
13+
const floats = {
14+
clearfix: PropTypes.bool,
15+
float: PropTypes.oneOf(['none', 'right', 'left']),
16+
}
17+
18+
const overflow = {
19+
overflow: PropTypes.oneOf(['hidden', 'auto', 'scroll']),
20+
overflowX: PropTypes.oneOf(['hidden', 'auto', 'scroll']),
21+
overflowY: PropTypes.oneOf(['hidden', 'auto', 'scroll']),
22+
}
23+
24+
const position = {
25+
absolute: PropTypes.bool,
26+
fixed: PropTypes.bool,
27+
pin: PropTypes.oneOfType([
1228
PropTypes.bool,
29+
PropTypes.oneOf(['t', 'r', 'b', 'l', 'y', 'x', 'none']),
1330
PropTypes.array,
1431
]),
32+
relative: PropTypes.bool,
33+
static: PropTypes.bool,
34+
}
35+
36+
const zIndex = {
37+
z: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
38+
}
39+
40+
const typography = {
41+
align: PropTypes.string,
1542
break: PropTypes.oneOf(['words', 'normal']),
1643
capitalize: PropTypes.bool,
17-
content: PropTypes.string,
18-
flex: PropTypes.oneOfType([
19-
PropTypes.string,
20-
PropTypes.bool,
21-
PropTypes.number,
22-
PropTypes.array,
23-
]),
2444
font: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
25-
h: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
26-
hidden: PropTypes.bool,
27-
inlineBlock: PropTypes.bool,
28-
inlineFlex: PropTypes.bool,
2945
italic: PropTypes.bool,
30-
items: PropTypes.string,
31-
justify: PropTypes.string,
46+
text: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
47+
tracking: PropTypes.string,
3248
leading: PropTypes.string,
3349
lineThrough: PropTypes.bool,
3450
lowercase: PropTypes.bool,
51+
normalCase: PropTypes.bool,
52+
noUnderline: PropTypes.bool,
53+
roman: PropTypes.bool,
54+
truncate: PropTypes.bool,
55+
underline: PropTypes.bool,
56+
uppercase: PropTypes.bool,
57+
whitespace: PropTypes.oneOf([
58+
'normal',
59+
'no-wrap',
60+
'pre',
61+
'pre-line',
62+
'pre-wrap',
63+
]),
64+
}
65+
66+
const backgrounds = {
67+
bg: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
68+
}
69+
70+
const borders = {
71+
border: PropTypes.oneOfType([
72+
PropTypes.string,
73+
PropTypes.bool,
74+
PropTypes.array,
75+
]),
76+
borderB: PropTypes.number,
77+
borderL: PropTypes.number,
78+
borderR: PropTypes.number,
79+
borderT: PropTypes.number,
80+
rounded: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
81+
roundedB: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
82+
roundedBl: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
83+
roundedBr: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
84+
roundedL: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
85+
roundedR: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
86+
roundedT: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
87+
roundedTl: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
88+
roundedTr: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
89+
}
90+
91+
const flexValues = [
92+
true,
93+
'row',
94+
'row-reverse',
95+
'col',
96+
'col-reverse',
97+
'no-wrap',
98+
'wrap',
99+
'wrap-reverse',
100+
'initial',
101+
1,
102+
'auto',
103+
'none',
104+
'grow',
105+
'shrink',
106+
'no-grow',
107+
'no-shrink',
108+
]
109+
110+
const flexAlignment = ['start', 'center', 'end']
111+
112+
const flex = {
113+
content: PropTypes.oneOf([...flexAlignment, 'between', 'around']),
114+
flex: PropTypes.oneOfType([
115+
PropTypes.oneOf(flexValues),
116+
PropTypes.arrayOf(PropTypes.oneOf(flexValues)),
117+
]),
118+
inlineFlex: PropTypes.bool,
119+
items: PropTypes.oneOf([...flexAlignment, 'stretch', 'baseline']),
120+
self: PropTypes.oneOf([...flexAlignment, 'auto', 'stretch']),
121+
justify: PropTypes.oneOf([...flexAlignment, 'between', 'around']),
122+
}
123+
124+
const spacingShape = {
125+
t: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
126+
r: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
127+
b: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
128+
l: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
129+
x: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
130+
y: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
131+
}
132+
133+
const spacing = {
35134
m: PropTypes.oneOfType([
36135
PropTypes.string,
37136
PropTypes.number,
38-
PropTypes.object,
137+
PropTypes.shape(spacingShape),
39138
]),
40-
maxH: PropTypes.string,
41-
maxW: PropTypes.string,
42139
nm: PropTypes.oneOfType([
43140
PropTypes.string,
44141
PropTypes.number,
45-
PropTypes.object,
142+
PropTypes.shape(spacingShape),
46143
]),
47-
normalCase: PropTypes.bool,
48-
noUnderline: PropTypes.bool,
49-
opacity: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
50-
outline: PropTypes.oneOf(['none']),
51-
overflow: PropTypes.string,
52144
p: PropTypes.oneOfType([
53145
PropTypes.string,
54146
PropTypes.number,
55-
PropTypes.object,
56-
]),
57-
pin: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
58-
resize: PropTypes.oneOfType([
59-
PropTypes.oneOf(['none', 'y', 'x']),
60-
PropTypes.bool,
61-
]),
62-
roman: PropTypes.bool,
63-
rounded: PropTypes.oneOfType([
64-
PropTypes.string,
65-
PropTypes.bool,
66-
PropTypes.array,
67-
]),
68-
select: PropTypes.oneOf(['none', 'text']),
69-
self: PropTypes.oneOfType([PropTypes.string]),
70-
shadow: PropTypes.oneOfType([
71-
PropTypes.string,
72-
PropTypes.bool,
73-
PropTypes.array,
147+
PropTypes.shape(spacingShape),
74148
]),
75-
text: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
76-
tracking: PropTypes.string,
77-
truncate: PropTypes.bool,
78-
underline: PropTypes.bool,
79-
uppercase: PropTypes.bool,
149+
}
150+
151+
const sizing = {
152+
h: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
153+
maxH: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
154+
minH: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
155+
maxW: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
156+
minW: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
157+
w: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
158+
}
159+
160+
const misc = {
161+
opacity: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
162+
shadow: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
163+
}
164+
165+
const plugins = {
80166
visuallyHidden: PropTypes.bool,
81167
visuallyHiddenFocusable: PropTypes.bool,
82-
w: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
83-
whitespace: PropTypes.string,
168+
}
169+
170+
export const propTypes = {
171+
...display,
172+
...floats,
173+
...overflow,
174+
...position,
175+
...zIndex,
176+
...typography,
177+
...backgrounds,
178+
...borders,
179+
...flex,
180+
...spacing,
181+
...sizing,
182+
...misc,
183+
...plugins,
84184
}
85185

86186
export const variants = ['hover', 'focus', 'hocus', 'sm', 'md', 'lg', 'xl']

0 commit comments

Comments
 (0)