Use emotion

babel.config.js

@@ -12,6 +12,7 @@ module.exports = api => {
         },
       ],
       '@babel/preset-react',
+      '@emotion/babel-preset-css-prop',
     ],
     plugins: [
       [
@@ -22,7 +23,7 @@ module.exports = api => {
       ],
       ['@babel/plugin-proposal-class-properties', { loose: true }],
       ['@babel/plugin-proposal-object-rest-spread', { loose: true }],
-      ['@babel/transform-runtime', { useESModules: isTest ? false : true }],
+      ['@babel/transform-runtime', { useESModules: !isTest }],
       '@babel/plugin-transform-react-constant-elements',
     ],
   }

docs/components.md

@@ -0,0 +1,14 @@
+- [Buttons] (#/Components/Buttons)
+- [Forms] (#/Components/Forms)
+- [Typography] (#/Components/Typography)
+- [Grid] (#/Components/Grid)
+- [Icon] (#/Components/Icon)
+- [SVGIcon] (#/Components/SVGIcon)
+- [Link] (#/Components/Link)
+- [Loading] (#/Components/Loading)
+- [Menus] (#/Components/Menus)
+- [NavigationPills] (#/Components/NavigationPills)
+- [Pill] (#/Components/Pill)
+- [ScrollTrack] (#/Components/ScrollTrack)
+- [Tooltip] (#/Components/Tooltip)
+- [Transitions] (#/Components/Transitions)

lib/styleguide/Wrapper.js

@@ -1,14 +1,11 @@
-import React, { Component } from 'react';
-import { StyleRoot } from 'radium'
+import React from 'react'
 import SetStyles from '../../src/styles/SetStyles'
 
-export default class Wrapper extends Component {
-  render() {
-    return (
-      <StyleRoot>
-        <SetStyles assetsUrl={'src/fonts'} />
-        { this.props.children }
-      </StyleRoot>
-    )
-  }
+export default function Wrapper(props) {
+  return (
+    <>
+      <SetStyles assetsUrl={'src/fonts'} />
+      {props.children}
+    </>
+  )
 }

package.json

@@ -51,6 +51,7 @@
     "@babel/plugin-transform-runtime": "7.4.4",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "@emotion/babel-preset-css-prop": "10.0.9",
     "@instacart/eslint-config": "0.1.9",
     "@instacart/prettier-config": "0.1.1",
     "@svgr/cli": "4.3.0",
@@ -68,7 +69,6 @@
     "jest": "^24.8.0",
     "prettier": "1.16.4",
     "prompt": "^1.0.0",
-    "radium": "^0.22.0",
     "react": "16.4.2",
     "react-dom": "16.4.2",
     "react-styleguidist": "9.0.9",
@@ -83,6 +83,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.1.2",
+    "@emotion/core": "10.0.10",
     "js-yaml": "3.13.1",
     "lodash.isequal": "^4.5.0",
     "react-text-mask": "^5.3.0",
@@ -94,7 +95,6 @@
   },
   "peerDependencies": {
     "prop-types": "^15.0.0 || ^16.0.0",
-    "radium": ">=0.18.0",
     "react": "^15.0.0 || ^16.0.0",
     "react-dom": "^15.0.0 || ^16.0.0",
     "react-transition-group": "^2.2.1"

src/base/RadioCheckboxBase.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Radium from 'radium'
 import colors from '../styles/colors'
 import withTheme from '../styles/themer/withTheme'
 import { themePropTypes } from '../styles/themer/utils'
@@ -113,13 +112,13 @@ class RadioCheckboxBase extends React.PureComponent {
     const internalStyle = getStyles(this.props)
 
     return (
-      <div style={{ ...internalStyle.button, ...style.button }}>
+      <div css={{ ...internalStyle.button, ...style.button }}>
         {renderInputButton(isSelected, getInputStyles(this.props, this.state))}
         <input
           id={id}
           type={btnType}
           onChange={this.handleChange}
-          style={{ ...internalStyle.inputBtn, ...style.inputBtn }}
+          css={{ ...internalStyle.inputBtn, ...style.inputBtn }}
           value={value}
           checked={isSelected}
           disabled={isDisabled}
@@ -142,12 +141,9 @@ class RadioCheckboxBase extends React.PureComponent {
     // ensure both text and id are supplied so the button and label are correctly associated
     if (labelText && id) {
       return (
-        <Element style={{ ...internalStyle.wrapEl, ...style.wrapEl }}>
+        <Element css={{ ...internalStyle.wrapEl, ...style.wrapEl }}>
           {this.renderInputBtn()}
-          <label
-            htmlFor={id}
-            style={{ ...internalStyle.label, ...style.label, ...isDisabledStyle }}
-          >
+          <label htmlFor={id} css={{ ...internalStyle.label, ...style.label, ...isDisabledStyle }}>
             {labelText}
           </label>
         </Element>
@@ -158,4 +154,4 @@ class RadioCheckboxBase extends React.PureComponent {
   }
 }
 
-export default withTheme(Radium(RadioCheckboxBase))
+export default withTheme(RadioCheckboxBase)

src/components/Buttons/Button.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Radium from 'radium'
 import Icon from '../Icon/Icon'
 import withTheme from '../../styles/themer/withTheme'
 import { themePropTypes } from '../../styles/themer/utils'
@@ -213,7 +212,7 @@ const Button = props => {
     disabled: props.disabled,
     tabIndex: props.tabIndex,
     type: props.type,
-    style: [
+    css: [
       baseStyles,
       sizeStyles[props.size],
       snacksStyles[props.snacksStyle][props.disabled ? 'disabled' : 'base'],
@@ -249,7 +248,7 @@ const Button = props => {
     return (
       <ElementType {...finalProps}>
         {icon}
-        <span style={{ ...spacing.MARGIN_RIGHT_XS }} />
+        <span css={{ ...spacing.MARGIN_RIGHT_XS }} />
         {props.children}
       </ElementType>
     )
@@ -259,7 +258,7 @@ const Button = props => {
     return (
       <ElementType {...finalProps}>
         {props.children}
-        <span style={{ ...spacing.MARGIN_LEFT_XS }} />
+        <span css={{ ...spacing.MARGIN_LEFT_XS }} />
         {icon}
       </ElementType>
     )
@@ -333,4 +332,4 @@ Button.defaultProps = {
   elementAttributes: {},
 }
 
-export default withTheme(Radium(Button))
+export default withTheme(Button)

src/components/Buttons/Checkbox.js

@@ -6,7 +6,7 @@ import checkboxSelectedSvg from '../../assets/checkboxSelected.svg'
 
 const renderInputButton = (isSelected, style) => {
   const SvgComponent = isSelected ? checkboxSelectedSvg : checkboxBaseSvg
-  return <SvgComponent aria-hidden="true" style={style} />
+  return <SvgComponent aria-hidden="true" css={style} />
 }
 
 const Checkbox = props => {

src/components/Buttons/CircleButton.js

@@ -3,7 +3,6 @@
  *
  * @author [Dominic Cocchiarella ](https://github.com/docchia)
  */
-import Radium from 'radium'
 import React from 'react'
 import PropTypes from 'prop-types'
 import responsive from '../../styles/responsive'
@@ -34,14 +33,15 @@ const CircleButton = props => {
 
   return (
     <button
+      className={props.className}
       onClick={e => {
         if (props.onClick) {
           e.preventDefault()
           props.onClick()
         }
       }}
       aria-label={props.ariaLabel}
-      style={[
+      css={[
         styles.default,
         {
           backgroundColor: action,
@@ -69,6 +69,7 @@ CircleButton.propTypes = {
   /** Label to be used by screen readers */
   ariaLabel: PropTypes.string,
   children: PropTypes.node,
+  className: PropTypes.string,
   /** Bool to disable click/touch listeners */
   disabled: PropTypes.bool,
   /** Callback function called after button click */
@@ -79,4 +80,4 @@ CircleButton.propTypes = {
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
 }
 
-export default withTheme(Radium(CircleButton))
+export default withTheme(CircleButton)

src/components/Buttons/Radio.js

@@ -6,7 +6,7 @@ import radioSelectedSvg from '../../assets/radioSelected.svg'
 
 const renderInputButton = (isSelected, style) => {
   const SvgComponent = isSelected ? radioSelectedSvg : radioBaseSvg
-  return <SvgComponent aria-hidden="true" style={style} />
+  return <SvgComponent aria-hidden="true" css={style} />
 }
 
 const Radio = props => {

src/components/Buttons/RadioGroup.js

@@ -66,7 +66,7 @@ class RadioGroup extends React.Component {
       })
     })
 
-    return <Element style={{ ...STYLE.wrapEl, ...style.wrapEl }}>{childrenWithProps}</Element>
+    return <Element css={{ ...STYLE.wrapEl, ...style.wrapEl }}>{childrenWithProps}</Element>
   }
 }
 

src/components/Buttons/Switch.js

@@ -43,10 +43,10 @@ const STYLES = {
 
 const renderInputButton = (isSelected, style, displayOnOffLabel) => {
   return (
-    <div style={[style, { backgroundColor: style.fill }, STYLES.background]}>
-      {displayOnOffLabel && isSelected && <OneSvg style={STYLES.one} />}
-      {displayOnOffLabel && !isSelected && <ZeroSvg style={STYLES.zero} />}
-      <div style={[STYLES.toggle.default, isSelected && STYLES.toggle.selected]} />
+    <div css={[style, { backgroundColor: style.fill }, STYLES.background]}>
+      {displayOnOffLabel && isSelected && <OneSvg css={STYLES.one} />}
+      {displayOnOffLabel && !isSelected && <ZeroSvg css={STYLES.zero} />}
+      <div css={[STYLES.toggle.default, isSelected && STYLES.toggle.selected]} />
     </div>
   )
 }

src/components/Forms/FloatingLabel.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import Radium from 'radium'
 import { colors } from '../../styles'
 import withTheme from '../../styles/themer/withTheme'
 import { themePropTypes } from '../../styles/themer/utils'
@@ -46,7 +45,6 @@ const getSnackStyles = snacksTheme => {
 }
 
 @withTheme
-@Radium
 class FloatingLabel extends Component {
   static propTypes = {
     /** Disabled styling for the label */
@@ -61,6 +59,7 @@ class FloatingLabel extends Component {
     isActive: PropTypes.bool,
     /** Override styles */
     style: PropTypes.object,
+    className: PropTypes.string,
     /** Label text */
     text: PropTypes.string,
     /** Snacks theme attributes provided by `Themer` */
@@ -72,7 +71,17 @@ class FloatingLabel extends Component {
   }
 
   render() {
-    const { float, disabled, hasError, htmlFor, isActive, style, text, snacksTheme } = this.props
+    const {
+      className,
+      float,
+      disabled,
+      hasError,
+      htmlFor,
+      isActive,
+      style,
+      text,
+      snacksTheme,
+    } = this.props
 
     const snacksStyles = getSnackStyles(snacksTheme)
 
@@ -86,7 +95,7 @@ class FloatingLabel extends Component {
     ]
 
     return (
-      <label htmlFor={htmlFor} style={inputStyles}>
+      <label htmlFor={htmlFor} css={inputStyles} className={className}>
         {text}
       </label>
     )

src/components/Forms/HelperText.js

@@ -10,7 +10,7 @@ const style = {
   width: '100%',
 }
 
-const HelperText = ({ helperText }) => (helperText ? <div style={style}>{helperText}</div> : null)
+const HelperText = ({ helperText }) => (helperText ? <div css={style}>{helperText}</div> : null)
 
 HelperText.propTypes = {
   /** Text */

src/components/Forms/MaskedTextField.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Radium from 'radium'
 import MaskedTextInput from 'react-text-mask'
 import { colors } from '../../styles'
 import withTheme from '../../styles/themer/withTheme'
@@ -162,7 +161,6 @@ export const maskedTextFieldPropTypes = {
 
 @withTheme
 @FormComponent
-@Radium
 class MaskedTextField extends React.Component {
   static propTypes = maskedTextFieldPropTypes
 
@@ -256,24 +254,19 @@ class MaskedTextField extends React.Component {
 
     return (
       <div
-        style={[
-          styles.wrapper,
-          fullWidth && styles.fullWidth,
-          halfWidth && styles.halfWidth,
-          style,
-        ]}
+        css={[styles.wrapper, fullWidth && styles.fullWidth, halfWidth && styles.halfWidth, style]}
       >
         {serverError && !disabled && !isValid && <ServerError text={serverError} />}
 
-        <div style={styles.inputContainer}>
+        <div css={styles.inputContainer}>
           <FloatingLabel
             text={floatingLabelText}
             float={isFocused || hasValue}
             disabled={disabled}
             isActive={isFocused}
             hasError={hasError}
             htmlFor={inputId}
-            style={{ pointerEvents: 'none' }}
+            css={{ pointerEvents: 'none' }}
             snacksTheme={snacksTheme}
           />
 
@@ -309,7 +302,7 @@ class MaskedTextField extends React.Component {
                   this.input = input
                   ref(input)
                 }}
-                style={getInputSyles({
+                css={getInputSyles({
                   props: this.props,
                   theme: snacksTheme,
                   isFocused,