Skip to content
This repository has been archived by the owner on Jun 17, 2021. It is now read-only.

Upgrade to styled-components v4.2.0 #374

Open
wants to merge 18 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions .storybook/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,14 @@ import { configure, addDecorator } from '@storybook/react';
import { COLORS } from '../src/constants';
import Wrapper from './components/Wrapper';

import '../src/global-styles';
import GlobalStyles from '../src/components/GlobalStyles';

const WrapperDecorator = storyFn => <Wrapper>{storyFn()}</Wrapper>;
const WrapperDecorator = storyFn => (
<Fragment>
<GlobalStyles />
<Wrapper>{storyFn()}</Wrapper>
</Fragment>
);

addDecorator(WrapperDecorator);

Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@
"eslint-plugin-react": "7.11.1",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.6",
"flow-bin": "0.83.0",
"flow-bin": "0.95.1",
"foreman": "2.0.0",
"fs-extra": "5.0.0",
"graphql": "0.12.3",
Expand Down Expand Up @@ -158,7 +158,7 @@
"sass-loader": "7.0.0",
"slug": "0.9.1",
"style-loader": "0.19.1",
"styled-components": "3.2.6",
"styled-components": "4.2.0",
"svgr": "1.8.1",
"sw-precache-webpack-plugin": "0.11.4",
"thread-loader": "1.1.2",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ class SelectStarterList extends PureComponent<Props> {

return (
<MainContent isVisible={isVisible}>
<ScrollContainer innerRef={node => (this.node = node)}>
<ScrollContainer ref={node => (this.node = node)}>
<StarterList>
{starters.map((starter, index) => (
<StarterItem key={index}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ describe('ProjectStarterSelection component', () => {
});

it('should add node reference to ScrollContainer', () => {
// Mount required so innerRef will be set
// Mount required so ref will be set
const mountedWrapper = mount(
<SelectStarterList
starters={starters}
Expand Down
8 changes: 4 additions & 4 deletions src/components/CreateNewProjectWizard/MainPane.js
Original file line number Diff line number Diff line change
Expand Up @@ -191,11 +191,11 @@ class MainPane extends PureComponent<Props> {
}
}

const Wrapper = animated(styled.div.attrs({
style: props => ({
const Wrapper = animated(styled.div.attrs(props => ({
style: {
transform: `translateY(${props.translateY}px)`,
}),
})`
},
}))`
height: 75vh;
will-change: transform;
`);
Expand Down
10 changes: 5 additions & 5 deletions src/components/CreateNewProjectWizard/ProjectName.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,13 @@ class ProjectName extends PureComponent<Props, State> {
showRandomizeTooltip: false,
};

node: HTMLElement;
node: ?HTMLElement;
timeoutId: number;

componentDidMount() {
this.node.focus();
if (this.node) {
this.node.focus();
}

this.timeoutId = window.setTimeout(() => {
this.setState({ showRandomizeTooltip: true });
Expand Down Expand Up @@ -157,8 +159,6 @@ class ProjectName extends PureComponent<Props, State> {
}
};

setRef = (node: HTMLElement) => (this.node = node);

render() {
const {
name,
Expand All @@ -178,7 +178,7 @@ class ProjectName extends PureComponent<Props, State> {
spacing={15}
>
<TextInput
innerRef={this.setRef}
ref={node => (this.node = node)}
type="text"
value={randomizedOverrideName || name}
isFocused={isFocused}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ class AddDependencyInitialScreen extends Component<Props> {
}
}

export const InstructionsParagraph = Paragraph.extend`
export const InstructionsParagraph = styled(Paragraph)`
font-size: 1.4rem;
color: ${COLORS.gray[600]};
`;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* with styled-components. Just gonna override the provided global styles.
*/
import React, { Component } from 'react';
import styled, { injectGlobal } from 'styled-components';
import styled, { createGlobalStyle } from 'styled-components';
import { SearchBox } from 'react-instantsearch/dom';

import { COLORS } from '../../constants';
Expand All @@ -18,6 +18,7 @@ class AddDependencySearchBox extends Component<Props> {
render() {
return (
<Wrapper>
<SearchBoxGlobalStyle />
<SearchBox
onChange={this.props.onChange}
autoFocus={true}
Expand All @@ -33,7 +34,7 @@ const Wrapper = styled.div`
width: 100%;
`;

injectGlobal`
const SearchBoxGlobalStyle = createGlobalStyle`
.ais-SearchBox {
/* width: 100%; */
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// @flow
import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import styled, { injectGlobal } from 'styled-components';
import styled, { createGlobalStyle } from 'styled-components';
import moment from 'moment';
import IconBase from 'react-icons-kit';
import { u1F4C8 as barGraphIcon } from 'react-icons-kit/noto_emoji_regular/u1F4C8';
Expand Down Expand Up @@ -137,6 +137,7 @@ export class AddDependencySearchResult extends PureComponent<Props> {

return (
<Wrapper>
<SearchResultGlobalStyle />
<Header>
<Title>
<ExternalLink display="inline" href={npmLink}>
Expand Down Expand Up @@ -235,7 +236,7 @@ const NoActionAvailable = styled.div`

// TODO: I should be able to reuse the existing button component with
// `connectInfiniteHits`
injectGlobal`
const SearchResultGlobalStyle = createGlobalStyle`
.ais-InfiniteHits-loadMore {
padding: 10px 30px;
margin-top: 45px;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -148,10 +148,11 @@ const DependencyLocationLabel = styled.span`

// TODO: Feels gross to be doing this manually when `tr:first-child td`
// would work.
const FirstCell = Cell.extend`
const FirstCell = styled(Cell)`
padding-top: 0;
`;
const LastCell = Cell.extend`

const LastCell = styled(Cell)`
padding-bottom: 0;
border-bottom: none;
`;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,7 @@ const Wrapper = styled.div`
max-height: 475px;
`;

export const DependencyList = Card.extend`
export const DependencyList = styled(Card)`
flex: 6;
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -339,7 +339,7 @@ const DependencyVersion = styled.span`
: COLORS.transparentBlack[400]}};
`;

export const MainContent = Card.extend`
export const MainContent = styled(Card)`
flex: 12;
margin-left: 15px;
padding: 0;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ export class DevelopmentServerPane extends PureComponent<Props> {
}
}

const Wrapper = Card.extend`
const Wrapper = styled(Card)`
display: flex;

@media ${BREAKPOINTS.sm} {
Expand Down
11 changes: 10 additions & 1 deletion src/components/ExternalLink/ExternalLink.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ type Props = {
hoverColor?: string,
showUnderline?: boolean,
display: string,
className?: string,
};

class ExternalLink extends Component<Props> {
Expand All @@ -29,11 +30,19 @@ class ExternalLink extends Component<Props> {
};

render() {
const { href, color, hoverColor, children, display } = this.props;
const {
href,
color,
hoverColor,
children,
display,
className,
} = this.props;

return (
<Anchor
style={{ display }}
className={className}
href={href}
color={color}
hoverColor={hoverColor}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
// @flow
import { injectGlobal } from 'styled-components';
import { createGlobalStyle } from 'styled-components';
import 'react-tippy/dist/tippy.css';
import { COLORS } from './constants';
import './fonts.css';
import './base.css';
import { COLORS } from '../../constants';
import '../../fonts.css';
import '../../base.css';

injectGlobal`
const GlobalStyles = createGlobalStyle`
html,
body,
input,
Expand All @@ -20,3 +20,5 @@ injectGlobal`
background: ${COLORS.gray[50]};
}
`;

export default GlobalStyles;
2 changes: 2 additions & 0 deletions src/components/GlobalStyles/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
// @flow
export { default } from './GlobalStyles';
16 changes: 8 additions & 8 deletions src/components/Heading/Heading.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,14 @@ class Heading extends Component<Props> {
case 'xsmall':
return <HeadingXSmall {...delegated} />;
case 'small':
return <HeadingSmall {...delegated} />;
return <HeadingSmall as="h3" {...delegated} />;
case 'medium':
default:
return <HeadingMedium {...delegated} />;
return <HeadingMedium as="h3" {...delegated} />;
case 'large':
return <HeadingLarge {...delegated} />;
return <HeadingLarge as="h1" {...delegated} />;
case 'xlarge':
return <HeadingXLarge {...delegated} />;
return <HeadingXLarge as="h1" {...delegated} />;
}
}
}
Expand All @@ -40,21 +40,21 @@ const HeadingXSmall = styled.h6`
color: ${COLORS.gray[800]};
`;

const HeadingSmall = HeadingXSmall.withComponent('h3').extend`
const HeadingSmall = styled(HeadingXSmall)`
font-size: 26px;
`;

const HeadingMedium = HeadingSmall.withComponent('h3').extend`
const HeadingMedium = styled(HeadingSmall)`
font-size: 32px;
letter-spacing: -0.5px;
`;

const HeadingLarge = HeadingSmall.withComponent('h1').extend`
const HeadingLarge = styled(HeadingSmall)`
font-size: 42px;
letter-spacing: -1px;
`;

const HeadingXLarge = HeadingSmall.withComponent('h1').extend`
const HeadingXLarge = styled(HeadingSmall)`
font-size: 60px;
letter-spacing: -2px;
`;
Expand Down
16 changes: 8 additions & 8 deletions src/components/LargeLED/LargeLED.js
Original file line number Diff line number Diff line change
Expand Up @@ -90,8 +90,8 @@ const fadeInOut = keyframes`
100% { opacity: 0.25 }
`;

const LED = styled.div.attrs({
style: props => ({
const LED = styled.div.attrs(props => ({
style: {
backgroundImage: `
radial-gradient(
farthest-corner at 10px 5px,
Expand All @@ -103,8 +103,8 @@ const LED = styled.div.attrs({
inset 1px 1px 5px ${props.colors.shadowLight},
inset -3px -3px 10px -2px ${props.colors.shadowDark}
`,
}),
})`
},
}))`
display: inline-block;
position: relative;
width: ${props => props.size}px;
Expand All @@ -124,17 +124,17 @@ const OutlineSvg = styled.svg`
overflow: visible;
`;

const Pulser = styled.div.attrs({
style: props => ({
const Pulser = styled.div.attrs(props => ({
style: {
backgroundImage: `
radial-gradient(
farthest-corner at 10px 5px,
${props.colors.pulseHighlight} 0%,
${props.colors.pulseBase} 100%
)
`,
}),
})`
},
}))`
position: absolute;
z-index: 1;
top: 0;
Expand Down
16 changes: 8 additions & 8 deletions src/components/Modal/Modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -129,12 +129,12 @@ class Modal extends PureComponent<Props, State> {
}
}

const Wrapper = animated(styled.div.attrs({
style: props => ({
const Wrapper = animated(styled.div.attrs(props => ({
style: {
opacity: props.opacity,
pointerEvents: props.clickable ? 'auto' : 'none',
}),
})`
},
}))`
position: fixed;
z-index: ${Z_INDICES.modal};
top: 0;
Expand Down Expand Up @@ -162,13 +162,13 @@ const Backdrop = styled.div`
background: rgba(230, 230, 230, 0.8);
`;

const PaneWrapper = animated(styled.div.attrs({
style: props => ({
const PaneWrapper = animated(styled.div.attrs(props => ({
style: {
width: props.width,
height: props.height,
transform: `translateY(${props.translateY}px)`,
}),
})`
},
}))`
position: relative;
z-index: 2;
max-width: 100%;
Expand Down
2 changes: 1 addition & 1 deletion src/components/Planet/Orbit.js
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ class PlanetCloud extends Component<Props> {
const { duration, delay, planetSize, children, ...delegated } = this.props;

return (
<Orbiter innerRef={node => (this.node = node)} {...delegated}>
<Orbiter ref={node => (this.node = node)} {...delegated}>
{children}
</Orbiter>
);
Expand Down
Loading