feat: updates to styled-components 4

docs/js/main.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { ThemeProvider, injectGlobal } from 'styled-components';
+import { ThemeProvider, createGlobalStyle } from 'styled-components';
 import styledNormalize from 'styled-normalize';
 
 import '@fortawesome/fontawesome-free/css/all.css';
@@ -14,7 +14,7 @@ import Root from './Root';
 import '../css/demo.scss';
 import '../img/favicon.ico';
 
-(() => injectGlobal`
+const GlobalStyle = createGlobalStyle`
   ${styledNormalize}
 
   /* https://github.com/necolas/normalize.css/issues/694 */
@@ -27,11 +27,14 @@ import '../img/favicon.ico';
     font-family: inherit;
     /* stylelint-enable sh-waqar/declaration-use-variable */
   }
-`)();
+`;
 
 ReactDOM.render(
   <ThemeProvider theme={theme}>
-    <Root />
+    <>
+      <GlobalStyle />
+      <Root />
+    </>
   </ThemeProvider>,
   document.getElementById('demo')
 );

package.json

@@ -54,7 +54,7 @@
     "moment": "^2.0.0",
     "react": "^16.3.0",
     "react-dom": "^16.3.0",
-    "styled-components": "^3.4.0"
+    "styled-components": "^4.3.2"
   },
   "dependencies": {
     "classnames": "2.2.5",
@@ -127,7 +127,7 @@
     "sass-loader": "7.1.0",
     "standard-version": "^4.4.0",
     "style-loader": "0.23.0",
-    "styled-components": "3.4.10",
+    "styled-components": "^4.3.2",
     "styled-normalize": "^2.2.1",
     "stylelint": "9.1.1",
     "stylelint-config-recommended": "2.1.0",

src/components/Code/Code.js

@@ -217,7 +217,7 @@ class Code extends Component {
         <ScrollWrap>
           <Content>
             <Pre
-              innerRef={e => {
+              ref={e => {
                 this.preNode = e;
               }}
             >

src/components/GraphEdge/GraphEdge.js

@@ -16,10 +16,10 @@ const spline = line()
   .x(d => d.x)
   .y(d => d.y);
 
-const EdgeShadow = styled.path.attrs({
+const EdgeShadow = styled.path.attrs(({ thickness }) => ({
   // Animation optimization.
-  style: ({ thickness }) => ({ strokeWidth: 10 * thickness }),
-})`
+  style: { strokeWidth: 10 * thickness },
+}))`
   stroke: ${props => props.theme.colors.blue400};
   stroke-opacity: 0;
   fill: none;
@@ -42,10 +42,10 @@ const EdgeDotted = styled.path`
   fill: none;
 `;
 
-const EdgeLine = styled.path.attrs({
+const EdgeLine = styled.path.attrs(({ thickness }) => ({
   // Animation optimization.
-  style: ({ thickness }) => ({ strokeWidth: thickness }),
-})`
+  style: { strokeWidth: thickness },
+}))`
   stroke: ${props =>
     props.contrastMode
       ? props.theme.colors.black

src/components/GraphNode/_GraphNodeStatic.js

@@ -46,20 +46,24 @@ const GraphNodeWrapper = styled.g`
   cursor: ${props => props.cursorType};
 `;
 
-const SvgTextContainer = styled.g.attrs({
-  transform: props => `translate(0, ${props.y + 85})`,
-})`
+const SvgTextContainer = styled.g.attrs(({ y }) => ({
+  transform: `translate(0, ${y + 85})`,
+}))`
   pointer-events: all;
 `;
 
-const LabelSvg = styled.text.attrs({
-  fill: props =>
-    props.contrastMode
-      ? props.theme.colors.black
-      : props.theme.colors.purple800,
-  textAnchor: 'middle',
-  y: -38,
-})`
+const LabelSvg = styled.text.attrs(
+  ({
+    contrastMode,
+    theme: {
+      colors: { black, purple800 },
+    },
+  }) => ({
+    fill: contrastMode ? black : purple800,
+    textAnchor: 'middle',
+    y: -38,
+  })
+)`
   font-size: ${props => props.theme.fontSizes.normal};
 `;
 

src/components/GraphNode/tags/_TagCamera.js

@@ -1,21 +1,29 @@
 import React from 'react';
 import styled from 'styled-components';
 
-const Rect = styled.rect.attrs({
-  fill: props =>
-    props.contrastMode
-      ? props.theme.colors.black
-      : props.theme.colors.purple800,
-  rx: 5,
-})``;
+const Rect = styled.rect.attrs(
+  ({
+    contrastMode,
+    theme: {
+      colors: { black, purple800 },
+    },
+  }) => ({
+    fill: contrastMode ? black : purple800,
+    rx: 5,
+  })
+)``;
 
-const Circle = styled.circle.attrs({
-  fill: props =>
-    props.contrastMode
-      ? props.theme.colors.black
-      : props.theme.colors.purple800,
-  stroke: props => props.theme.colors.white,
-})``;
+const Circle = styled.circle.attrs(
+  ({
+    contrastMode,
+    theme: {
+      colors: { black, purple800, white },
+    },
+  }) => ({
+    fill: contrastMode ? black : purple800,
+    stroke: white,
+  })
+)``;
 
 export default class TagCamera extends React.Component {
   render() {

src/components/PrometheusGraph/_AxesGrid.js

@@ -6,9 +6,9 @@ import { find, range, round, flatMap, last } from 'lodash';
 
 const AxesGridContainer = styled.div``;
 
-const AxisLine = styled.div.attrs({
-  style: ({ width = 0, height = 0 }) => ({ height, width }),
-})`
+const AxisLine = styled.div.attrs(({ width = 0, height = 0 }) => ({
+  style: { height, width },
+}))`
   border-style: dashed;
   border-color: ${props => props.theme.colors.gray200};
   position: absolute;
@@ -24,9 +24,9 @@ const VerticalLine = styled(AxisLine)`
   border-width: 0 0 0 1px;
 `;
 
-const TickContainer = styled.div.attrs({
-  style: ({ left = 0, top = 0 }) => ({ left, top }),
-})`
+const TickContainer = styled.div.attrs(({ left = 0, top = 0 }) => ({
+  style: { left, top },
+}))`
   position: absolute;
 `;
 

src/components/PrometheusGraph/_Chart.js

@@ -23,13 +23,13 @@ const SeriesLineChart = styled.path.attrs({
   pointer-events: none;
 `;
 
-const SeriesAreaChart = styled.path.attrs({
-  stroke: ({ fill }) => fill,
+const SeriesAreaChart = styled.path.attrs(({ fill, focused }) => ({
+  stroke: fill,
   // Use strokeWidth only on focused area graphs to make sure ultra-thin ones
   // still get visible, but don't use it when multiple series are visible so
   // that it doesn't look like it's other series' border.
-  strokeWidth: ({ focused }) => (focused ? 1 : 0),
-})`
+  strokeWidth: focused ? 1 : 0,
+}))`
   opacity: ${props => (props.faded ? 0.05 : 0.75)};
   pointer-events: none;
 `;
@@ -157,7 +157,7 @@ class Chart extends React.PureComponent {
       <Canvas
         width="100%"
         height="100%"
-        innerRef={this.saveSvgRef}
+        ref={this.saveSvgRef}
         onMouseMove={this.handleGraphMouseMove}
         onMouseLeave={this.handleGraphMouseLeave}
       >

src/components/PrometheusGraph/_DeploymentAnnotations.js

@@ -60,7 +60,7 @@ class DeploymentAnnotations extends React.PureComponent {
             containerHeight={this.props.chartHeight}
             linkTo={this.props.linkBuilder(deployment)}
             onClick={this.props.onClick}
-            onAxis
+            isOnAxis
           />
         ))}
       </DeploymentAnnotationsWrapper>

src/components/PrometheusGraph/_HoverInfo.js

@@ -44,18 +44,18 @@ const TooltipRowValue = styled.span`
   white-space: nowrap;
 `;
 
-const HoverLine = styled.div.attrs({
-  style: ({ left, height }) => ({ height, left }),
-})`
+const HoverLine = styled.div.attrs(({ left, height }) => ({
+  style: { height, left },
+}))`
   border-left: 1px solid ${props => props.theme.colors.gray600};
   pointer-events: none;
   position: absolute;
   top: 0;
 `;
 
-const FocusPoint = styled.span.attrs({
-  style: ({ top }) => ({ top }),
-})`
+const FocusPoint = styled.span.attrs(({ top }) => ({
+  style: { top },
+}))`
   border: 2.5px solid ${props => props.color};
   border-radius: ${props => props.theme.borderRadius.circle};
   background-color: ${props => props.theme.colors.white};

src/components/TimeTravel/_RangeSelector.js

@@ -126,7 +126,7 @@ class RangeSelector extends React.Component {
       : {};
 
     return (
-      <RangeSelectorWrapper innerRef={this.saveNodeRef}>
+      <RangeSelectorWrapper ref={this.saveNodeRef}>
         <SelectedRangeWrapper onClick={this.handleDropDownClick}>
           <SelectedRange>{selectedRangeLabel}</SelectedRange>
           <CaretIconsContainer>

src/components/TimeTravel/_Timeline.js

@@ -298,7 +298,7 @@ class Timeline extends React.PureComponent {
         >
           <TimelineContainer
             panning={isPanning}
-            innerRef={this.saveSvgRef}
+            ref={this.saveSvgRef}
             title="Scroll to zoom, drag to pan"
           >
             {this.state.isAnimated ? (

src/components/TimeTravel/_TimelineLabel.js

@@ -3,9 +3,9 @@ import moment from 'moment';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-const TimelineLabelWrapper = styled.span.attrs({
-  style: ({ x }) => ({ transform: `translateX(${x}px)` }),
-})`
+const TimelineLabelWrapper = styled.span.attrs(({ x }) => ({
+  style: { transform: `translateX(${x}px)` },
+}))`
   position: absolute;
 `;
 

src/components/TimeTravel/_TimelineLoader.js

@@ -19,12 +19,12 @@ const blinking = keyframes`
 `;
 /* stylelint-enable color-no-hex */
 
-const TimelineLoaderOverlay = styled.div.attrs({
-  style: ({ x, width }) => ({
+const TimelineLoaderOverlay = styled.div.attrs(({ x, width }) => ({
+  style: {
     left: `${x}px`,
     width,
-  }),
-})`
+  },
+}))`
   animation: ${blinking} 2s linear infinite;
   pointer-events: none;
   position: absolute;

src/components/TimeTravel/_TimelinePeriodLabels.js

@@ -44,12 +44,12 @@ function linearGradientValue(x, [a, b]) {
   return (x - a) / (b - a);
 }
 
-const TimelineLabels = styled.div.attrs({
-  style: ({ y, opacity }) => ({
+const TimelineLabels = styled.div.attrs(({ y, opacity }) => ({
+  style: {
     opacity,
     transform: `translateY(${y}px)`,
-  }),
-})``;
+  },
+}))``;
 
 // TODO: Tidy up this component.
 class TimelinePeriodLabels extends React.PureComponent {

src/components/TimeTravel/_TimelineRange.js

@@ -3,12 +3,12 @@ import moment from 'moment';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 
-const TimelineRangeOverlay = styled.div.attrs({
-  style: ({ x, width }) => ({
+const TimelineRangeOverlay = styled.div.attrs(({ x, width }) => ({
+  style: {
     transform: `translateX(${x}px)`,
     width,
-  }),
-})`
+  },
+}))`
   background-color: ${props => props.color};
   position: absolute;
   opacity: 0.15;

src/components/_DeploymentAnnotation/DeploymentAnnotation.js

@@ -13,9 +13,9 @@ const DeploymentAnnotationWrapper = styled.div.attrs({
   height: 100%;
 `;
 
-const DeploymentAnnotationContainer = styled.div.attrs({
-  style: ({ x }) => ({ left: x }),
-})`
+const DeploymentAnnotationContainer = styled.div.attrs(({ x }) => ({
+  style: { left: x },
+}))`
   pointer-events: all;
   position: absolute;
   height: 100%;
@@ -33,7 +33,7 @@ const FocusPoint = styled.span`
     margin-top: ${props.radius}px;
     width: ${2 * props.radius}px;
     height: ${2 * props.radius}px;
-    bottom: -${props.onAxis ? props.radius : 0}px;
+    bottom: -${props.isOnAxis ? props.radius : 0}px;
   `};
 `;
 
@@ -99,7 +99,7 @@ class DeploymentAnnotations extends React.PureComponent {
             <FocusPoint
               hoverable
               radius="5"
-              onAxis={this.props.onAxis}
+              isOnAxis={this.props.isOnAxis}
               onMouseMove={this.handleMouseEnter}
               onMouseLeave={this.handleMouseLeave}
               onClick={this.handleClick}
@@ -130,17 +130,17 @@ DeploymentAnnotations.propTypes = {
   action: PropTypes.string.isRequired,
   containerHeight: PropTypes.number.isRequired,
   containerWidth: PropTypes.number.isRequired,
+  isOnAxis: PropTypes.bool,
   linkTo: PropTypes.string,
-  onAxis: PropTypes.bool,
   onClick: PropTypes.func.isRequired,
   serviceIDs: PropTypes.array.isRequired,
   timestamp: PropTypes.string.isRequired,
   x: PropTypes.number.isRequired,
 };
 
 DeploymentAnnotations.defaultProps = {
+  isOnAxis: false,
   linkTo: '',
-  onAxis: false,
 };
 
 export default DeploymentAnnotations;