[stepper] Remove createStyleSheet as per mui#7740 (mui#4977)

alexhayes · Sep 7, 2017 · 56881ee · 56881ee
1 parent e86d351
commit 56881ee
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 33 deletions.
diff --git a/src/Stepper/Step.js b/src/Stepper/Step.js
@@ -3,10 +3,9 @@
 import React from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
-import { createStyleSheet } from "jss-theme-reactor";
 import withStyles from "../styles/withStyles";
 
-export const styleSheet = createStyleSheet("MuiStep", theme => ({
+export const styles = theme => ({
   root: {
     flex: "0 0 auto"
   },
@@ -19,7 +18,7 @@ export const styleSheet = createStyleSheet("MuiStep", theme => ({
     position: "relative",
     marginLeft: 0,
   }
-}));
+});
 
 function Step(props) {
   const {
@@ -115,4 +114,4 @@ Step.propTypes = {
   orientation: PropTypes.oneOf(["horizontal", "vertical"]).isRequired,
 };
 
-export default withStyles(styleSheet)(Step);
+export default withStyles(styles)(Step);
diff --git a/src/Stepper/StepButton.js b/src/Stepper/StepButton.js
@@ -3,16 +3,15 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
-import { createStyleSheet } from "jss-theme-reactor";
 import withStyles from "../styles/withStyles";
-import ButtonBase from '../internal/ButtonBase';
+import ButtonBase from '../ButtonBase';
 import StepLabel from './StepLabel';
 
 const isLabel = (child) => {
   return child && child.type && child.type.muiName === 'StepLabel';
 };
 
-export const styleSheet = createStyleSheet("MuiStepButton", theme => ({
+export const styles = theme => ({
   root: {
     display: 'flex',
     alignItems: 'center',
@@ -23,7 +22,7 @@ export const styleSheet = createStyleSheet("MuiStepButton", theme => ({
   alternativeLabelRoot: {
     margin: '0 auto',
   }
-}));
+});
 
 function StepButton(props) {
   const {
@@ -128,4 +127,4 @@ StepButton.propTypes = {
   orientation: PropTypes.oneOf(["horizontal", "vertical"]).isRequired,
 };
 
-export default withStyles(styleSheet)(StepButton);
+export default withStyles(styles)(StepButton);
diff --git a/src/Stepper/StepConnector.js b/src/Stepper/StepConnector.js
@@ -3,10 +3,9 @@
 import React from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
-import { createStyleSheet } from "jss-theme-reactor";
 import withStyles from "../styles/withStyles";
 
-export const styleSheet = createStyleSheet("MuiStepConnector", theme => ({
+export const styles = theme => ({
   root: {
     flex: "1 1 auto"
   },
@@ -37,7 +36,7 @@ export const styleSheet = createStyleSheet("MuiStepConnector", theme => ({
   alternativeLabelLine: {
     marginLeft: 0,
   }
-}));
+});
 
 function StepConnector(props) {
   const {
@@ -92,4 +91,4 @@ StepConnector.propTypes = {
   orientation: PropTypes.oneOf(["horizontal", "vertical"]).isRequired,
 };
 
-export default withStyles(styleSheet)(StepConnector);
+export default withStyles(styles)(StepConnector);
diff --git a/src/Stepper/StepContent.js b/src/Stepper/StepContent.js
@@ -2,15 +2,14 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import warning from 'warning';
 import classNames from "classnames";
-import { createStyleSheet } from "jss-theme-reactor";
 import TransitionComponent from '../internal/ExpandTransition';
 import withStyles from "../styles/withStyles";
 
 function ExpandTransition(props) {
   return <TransitionComponent {...props} />;
 }
 
-export const styleSheet = createStyleSheet("MuiStepContent", theme => ({
+export const styles = theme => ({
   root: {
     marginTop: theme.spacing.unit,
     marginLeft: 12, // half icon
@@ -24,7 +23,7 @@ export const styleSheet = createStyleSheet("MuiStepContent", theme => ({
   last: {
     borderLeft: 'none',
   }
-}));
+});
 
 
 function StepContent(props) {
@@ -111,4 +110,4 @@ StepContent.defaultProps = {
   transitionDuration: 450,
 };
 
-export default withStyles(styleSheet)(StepContent);
+export default withStyles(styles)(StepContent);
diff --git a/src/Stepper/StepIcon.js b/src/Stepper/StepIcon.js
@@ -1,16 +1,15 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { createStyleSheet } from "jss-theme-reactor";
 import CheckCircle from "material-ui-icons/CheckCircle";
 import withStyles from "../styles/withStyles";
 import StepPositionIcon from './StepPositionIcon';
 
-export const styleSheet = createStyleSheet("MuiStepIcon", theme => ({
+export const styles = theme => ({
   root: {
     fill: theme.palette.primary[500],
     display: "block",
   },
-}));
+});
 
 function StepIcon(props) {
   const { completed, icon, active, classes, theme } = props;
@@ -52,4 +51,4 @@ StepIcon.propTypes = {
   ]),
 };
 
-export default withStyles(styleSheet)(StepIcon);
+export default withStyles(styles)(StepIcon);
diff --git a/src/Stepper/StepLabel.js b/src/Stepper/StepLabel.js
@@ -3,12 +3,11 @@
 import React from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
-import { createStyleSheet } from "jss-theme-reactor";
 import withStyles from "../styles/withStyles";
 import Typography from '../Typography';
 import StepIcon from './StepIcon';
 
-export const styleSheet = createStyleSheet("MuiStepLabel", theme => ({
+export const styles = theme => ({
   root: {
     display: 'flex',
     alignItems: 'center',
@@ -50,7 +49,7 @@ export const styleSheet = createStyleSheet("MuiStepLabel", theme => ({
   alternativeLabelIconContainer: {
     alignItems: 'center',
   },
-}));
+});
 
 function StepLabel(props) {
   const {
@@ -158,4 +157,4 @@ StepLabel.propTypes = {
   orientation: PropTypes.oneOf(["horizontal", "vertical"]).isRequired,
 };
 
-export default withStyles(styleSheet)(StepLabel);
+export default withStyles(styles)(StepLabel);
diff --git a/src/Stepper/StepPositionIcon.js b/src/Stepper/StepPositionIcon.js
@@ -1,12 +1,11 @@
 import React from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
-import { createStyleSheet } from "jss-theme-reactor";
 import withStyles from "../styles/withStyles";
 import SvgIcon from "../SvgIcon";
 import { compose } from "recompose";
 
-export const styleSheet = createStyleSheet("MuiStepPositionIcon", theme => ({
+export const styles = theme => ({
   root: {
     fill: theme.palette.action.disabled,
     display: "block",
@@ -18,7 +17,7 @@ export const styleSheet = createStyleSheet("MuiStepPositionIcon", theme => ({
   active: {
     fill: theme.palette.primary[500],
   },
-}));
+});
 
 function StepPositionIcon(props) {
   const { position, classes, active } = props;
@@ -51,4 +50,4 @@ StepPositionIcon.propTypes = {
   position: PropTypes.number.isRequired,
 };
 
-export default withStyles(styleSheet)(StepPositionIcon);
+export default withStyles(styles)(StepPositionIcon);
diff --git a/src/Stepper/Stepper.js b/src/Stepper/Stepper.js
@@ -3,12 +3,11 @@
 import React, { Children } from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
-import { createStyleSheet } from "jss-theme-reactor";
 import withStyles from "../styles/withStyles";
 import Paper from "../Paper";
 import StepConnector from "./StepConnector";
 
-export const styleSheet = createStyleSheet("MuiStepper", theme => ({
+export const styles = theme => ({
   root: {
     display: "flex",
     padding: theme.spacing.unit * 3, // TODO: Question: Guidelines state 24px, should we use `theme.spacing.unit * 3`?
@@ -25,7 +24,7 @@ export const styleSheet = createStyleSheet("MuiStepper", theme => ({
     flexDirection: "column",
     alignItems: "stretch",
   },
-}));
+});
 
 function Stepper(props) {
   const {
@@ -128,4 +127,4 @@ Stepper.defaultProps = {
   orientation: "horizontal",
 };
 
-export default withStyles(styleSheet)(Stepper);
+export default withStyles(styles)(Stepper);