Skip to content

Commit 8f2a115

Browse files
kamleshchandnaniwhilelucky
kamleshchandnani
authored and
whilelucky
committed
feat(styled-components): upgrade styled-components to v4 (#190)
* feat(styled-components): upgrade styled-components to v4 * fix(DateRangePickerInput): remove comments * fix(styled-components): rename files and restructure directory * fix(DatePickerStyles): disable no-descending-specificity rule for one block * fix(THead): replace sc-custom with sc-selector
1 parent f7c6474 commit 8f2a115

File tree

21 files changed

+326
-322
lines changed

21 files changed

+326
-322
lines changed

Diff for: ‎.stylelintrc

+18-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,22 @@
11
{
2-
"processors": ["stylelint-processor-styled-components"],
2+
"processors": [
3+
["stylelint-processor-styled-components", {
4+
"parserPlugins": [
5+
"jsx",
6+
"objectRestSpread",
7+
["decorators", { "decoratorsBeforeExport": true }],
8+
"classProperties",
9+
"exportExtensions",
10+
"asyncGenerators",
11+
"functionBind",
12+
"functionSent",
13+
"dynamicImport",
14+
"optionalCatchBinding",
15+
"optionalChaining",
16+
"exportDefaultFrom"
17+
]
18+
}],
19+
],
320
"extends": [
421
"stylelint-config-standard",
522
"stylelint-config-styled-components"

Diff for: ‎README.md

+2-3
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,12 @@ Wrap your App component with ThemeProvider and pass it the leaf-ui theme (or ove
2020
import React from 'react';
2121
import ReactDOM from 'react-dom';
2222
import { ThemeProvider } from 'styled-components';
23-
import leafUiTheme, { injectBaseStyles } from 'leaf-ui/theme';
23+
import leafUiTheme, { BaseStyles } from 'leaf-ui/theme/web';
2424
import App from './App';
2525

26-
injectBaseStyles(leafUiTheme);
27-
2826
ReactDOM.render(
2927
<ThemeProvider theme={leafUiTheme}>
28+
<BaseStyles/>
3029
<App />
3130
</ThemeProvider>,
3231
document.getElementById('root'),

Diff for: ‎package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -78,16 +78,16 @@
7878
"npm-run-all": "4.1.5",
7979
"prop-types": "15.6.2",
8080
"raw-loader": "0.5.1",
81-
"react": "16.7.0",
82-
"react-dom": "16.7.0",
81+
"react": "16.8.5",
82+
"react-dom": "16.8.5",
8383
"react-native": "0.57.8",
8484
"rimraf": "2.6.3",
8585
"semantic-release": "11.0.2",
86-
"styled-components": "3.2.6",
86+
"styled-components": "4.2.0",
8787
"stylelint": "9.10.1",
8888
"stylelint-config-standard": "18.2.0",
8989
"stylelint-config-styled-components": "0.1.1",
90-
"stylelint-processor-styled-components": "1.3.2"
90+
"stylelint-processor-styled-components": "1.5.2"
9191
},
9292
"peerDependencies": {
9393
"react": "^16.2.0",

Diff for: ‎src/Button/web/Button.js

+1
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,7 @@ const StyledButton = styled(
120120
size,
121121
shape,
122122
block,
123+
isLoading,
123124
...props
124125
}) => <button {...props} />,
125126
)`

Diff for: ‎src/DatePickerInput/web/DatePickerInput.js

+63-66
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import Size from '../../Size/web';
1111
import View from '../../View/web';
1212
import TextInput from '../../TextInput/web';
1313
import DatePickerNavbar from './DatePickerNavbar';
14-
import injectDatePickerStyles from './injectDatePickerStyles';
14+
import DatePickerStyles from './DatePickerStyles';
1515

1616
class DatePickerInput extends React.Component {
1717
constructor(props) {
@@ -25,11 +25,6 @@ class DatePickerInput extends React.Component {
2525
this.timeout = {};
2626
}
2727

28-
componentWillMount = () => {
29-
const { theme } = this.props;
30-
injectDatePickerStyles(theme);
31-
}
32-
3328
componentDidMount() {
3429
const { selectedDay } = this.state;
3530
const { name } = this.props;
@@ -143,67 +138,70 @@ class DatePickerInput extends React.Component {
143138
}
144139

145140
return (
146-
<Size
147-
className={className}
148-
width={size}
149-
>
150-
<View>
151-
<TextInput
152-
inputRef={this.storeInputRef}
153-
label={label}
154-
value={this.formatDayForInput(selectedDay)}
155-
placeholder={placeholder}
156-
disabled={disabled}
157-
size="100%"
158-
onFocus={this.onInputFocus}
159-
onBlur={this.onInputBlur}
160-
autoComplete="off"
161-
error={errorMessage}
162-
hint={hint}
163-
required={required}
164-
/>
165-
{
166-
isOpen ? (
167-
<Position position="relative">
168-
<View>
169-
<Position
170-
position="absolute"
171-
top={0}
172-
left={0}
173-
>
174-
<View
175-
tabIndex={0}
176-
onFocus={this.onDatePickerFocus}
177-
onBlur={this.onDatePickerBlur}
141+
<React.Fragment>
142+
<DatePickerStyles />
143+
<Size
144+
className={className}
145+
width={size}
146+
>
147+
<View>
148+
<TextInput
149+
inputRef={this.storeInputRef}
150+
label={label}
151+
value={this.formatDayForInput(selectedDay)}
152+
placeholder={placeholder}
153+
disabled={disabled}
154+
size="100%"
155+
onFocus={this.onInputFocus}
156+
onBlur={this.onInputBlur}
157+
autoComplete="off"
158+
error={errorMessage}
159+
hint={hint}
160+
required={required}
161+
/>
162+
{
163+
isOpen ? (
164+
<Position position="relative">
165+
<View>
166+
<Position
167+
position="absolute"
168+
top={0}
169+
left={0}
178170
>
179-
<Card
180-
borderStyle="none"
181-
elevated
171+
<View
172+
tabIndex={0}
173+
onFocus={this.onDatePickerFocus}
174+
onBlur={this.onDatePickerBlur}
182175
>
183-
<DayPicker
184-
numberOfMonths={1}
185-
fromMonth={fromMonth}
186-
toMonth={toMonth}
187-
month={selectedDay}
188-
selectedDays={[selectedDay]}
189-
disabledDays={disabledDays}
190-
modifiers={{
191-
start: [selectedDay],
192-
}}
193-
navbarElement={DatePickerNavbar}
194-
captionElement={() => null}
195-
renderDay={renderDay}
196-
onDayClick={this.onDayClick}
197-
/>
198-
</Card>
199-
</View>
200-
</Position>
201-
</View>
202-
</Position>
203-
) : null
204-
}
205-
</View>
206-
</Size>
176+
<Card
177+
borderStyle="none"
178+
elevated
179+
>
180+
<DayPicker
181+
numberOfMonths={1}
182+
fromMonth={fromMonth}
183+
toMonth={toMonth}
184+
month={selectedDay}
185+
selectedDays={[selectedDay]}
186+
disabledDays={disabledDays}
187+
modifiers={{
188+
start: [selectedDay],
189+
}}
190+
navbarElement={DatePickerNavbar}
191+
captionElement={() => null}
192+
renderDay={renderDay}
193+
onDayClick={this.onDayClick}
194+
/>
195+
</Card>
196+
</View>
197+
</Position>
198+
</View>
199+
</Position>
200+
) : null
201+
}
202+
</View>
203+
</Size>
204+
</React.Fragment>
207205
);
208206
}
209207
}
@@ -227,7 +225,6 @@ DatePickerInput.propTypes = {
227225
toMonth: PropTypes.instanceOf(Date),
228226
renderDay: PropTypes.func,
229227
onDateChange: PropTypes.func,
230-
theme: PropTypes.object,
231228
disabledDays: PropTypes.oneOfType([
232229
PropTypes.array,
233230
PropTypes.object,

Diff for: ‎src/DatePickerInput/web/DatePickerStyles.js

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { createGlobalStyle } from 'styled-components';
2+
import reactDayPickerStyles from '!!raw-loader!react-day-picker/lib/style.css'; // eslint-disable-line
3+
4+
const DatePickerStyles = createGlobalStyle`
5+
${reactDayPickerStyles}
6+
7+
.DayPicker {
8+
background: ${(props) => props.theme.color.white};
9+
position: relative;
10+
outline: none;
11+
z-index: 1;
12+
13+
&-wrapper {
14+
&& {
15+
padding: ${(props) => props.theme.px(4)};
16+
outline: none;
17+
}
18+
}
19+
20+
&-Month {
21+
&& {
22+
margin: 0;
23+
}
24+
25+
& + & {
26+
margin-left: ${(props) => props.theme.px(4)};
27+
}
28+
}
29+
30+
&-Weekday {
31+
&& {
32+
padding: ${(props) => props.theme.px(1)};
33+
font-size: ${(props) => props.theme.fontSize.s};
34+
}
35+
}
36+
37+
&-Day {
38+
border-radius: 0 !important;
39+
40+
&& {
41+
padding: ${(props) => props.theme.px(1)};
42+
font-weight: ${(props) => props.theme.fontWeight.normal};
43+
font-size: ${(props) => props.theme.fontSize.s};
44+
outline: none;
45+
}
46+
47+
&:not(&--disabled):not(&--selected):not(&--outside):hover {
48+
&& {
49+
background-color: ${(props) => props.theme.color.primaryLighter};
50+
}
51+
}
52+
53+
&--today:not(&--disabled):not(&--outside) {
54+
&& {
55+
color: ${(props) => props.theme.color.greyDarker};
56+
}
57+
}
58+
/* stylelint-disable no-descending-specificity */
59+
&--selected:not(&--disabled):not(&--outside) {
60+
&& {
61+
color: ${(props) => props.theme.color.white};
62+
background-color: ${(props) => props.theme.color.primary};
63+
}
64+
}
65+
66+
&--selected:not(&--start):not(&--end):not(&--disabled):not(&--outside) {
67+
&& {
68+
color: ${(props) => props.theme.color.greyDarker};
69+
background-color: ${(props) => props.theme.color.primaryLighter};
70+
}
71+
}
72+
/* stylelint-enable no-descending-specificity */
73+
}
74+
}
75+
`;
76+
77+
export default DatePickerStyles;

Diff for: ‎src/DatePickerInput/web/injectDatePickerStyles.js

-76
This file was deleted.

0 commit comments

Comments
 (0)