[WIP] Emotion

babel.config.js

@@ -19,6 +19,7 @@ module.exports = api => {
         },
       ],
       '@babel/preset-react',
+      '@emotion/babel-preset-css-prop',
     ],
     plugins: [
       [

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

@@ -13,13 +13,13 @@
     "release:build": "babel-node scripts/release/build_release.js",
     "release:verifyBuild": "babel-node scripts/release/verify_build.js",
     "release:publish": "babel-node scripts/release/publish_release.js",
-    "lint": "eslint src --ext .js,.jsx --ignore-pattern '*.spec.js'",
+    "lint": "eslint src --ext .js,.jsx,.ts,.tsx --ignore-pattern '*.spec.js'",
     "lint:fix": "npm run lint -- --fix",
     "test:lint": "npm run lint -- --quiet",
     "start": "webpack --progress --watch --config webpack.config.js",
     "styleguide": "styleguidist server",
     "styleguide:build": "styleguidist build && node scripts/moveBuildAssets.js",
-    "test:watch": "npm test -- --watch --bail",
+    "test:watch": "jest --watch --bail",
     "test": "jest --silent && npm run test:lint",
     "test:ci": "jest --silent --maxWorkers=2 && npm run test:lint",
     "test:generate-coverage-report": "codecov"
@@ -52,6 +52,8 @@
     "@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",
+    "@emotion/core": "10.0.10",
     "@instacart/eslint-config": "0.1.9",
     "@instacart/prettier-config": "0.1.1",
     "@instacart/tsconfig": "0.1.1",
@@ -62,21 +64,21 @@
     "babel-loader": "^8.0.0",
     "codecov": "^3.5.0",
     "coveralls": "^3.0.5",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
-    "enzyme-to-json": "^3.3.3",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
+    "enzyme-to-json": "^3.4.0",
     "eslint": "5.16.0",
     "eslint-import-resolver-webpack": "0.11.0",
     "fs-extra": "^5.0.0",
     "glob": "7.1.4",
     "jest": "^24.8.0",
+    "jest-emotion": "10.0.14",
     "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",
-    "react-test-renderer": "^16.2.0",
+    "react-test-renderer": "16.4.2",
     "react-transition-group": "^2.2.1",
     "sinon": "^7.3.2",
     "typescript": "^3.2.2",
@@ -88,7 +90,6 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.1.2",
-    "@types/radium": "0.24.2",
     "@types/react-text-mask": "5.4.4",
     "@types/react-transition-group": "2.9.1",
     "@types/validator": "10.11.0",
@@ -102,16 +103,17 @@
     "validator": "^9.1.1"
   },
   "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",
+    "@emotion/core": "^10.0.10",
+    "prop-types": "^15.0.0",
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0",
     "react-transition-group": "^2.2.1"
   },
   "jest": {
     "transform": {
       "^.+\\.js$": "babel-jest"
     },
+    "snapshotSerializers": ["jest-emotion"],
     "coverageDirectory": "./coverage/",
     "testURL": "http://localhost",
     "collectCoverage": true,

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.d.ts

@@ -1,10 +1,13 @@
 import * as React from 'react'
-import { RadiumStyles, ElementAttributes } from '../..'
+import { Interpolation } from '@emotion/core'
+import { ElementAttributes } from '../..'
 import { WithThemeInjectedProps, ApplyWithTheme } from '../../styles/themer/withTheme'
 
 export interface ButtonProps extends WithThemeInjectedProps {
   children?: React.ReactNode
 
+  className?: string
+
   /** Whether or not the button is disabled. */
   disabled?: boolean
 
@@ -14,8 +17,14 @@ export interface ButtonProps extends WithThemeInjectedProps {
   /** Snacks button variants. */
   snacksStyle?: 'primary' | 'secondary' | 'flat' | 'coupon'
 
-  /** Optional style overrides. */
-  style?: RadiumStyles
+  /**
+   * Optional style overrides merged into emotion css
+   *
+   * @deprecated
+   * This prop exists for backwards compatibility and will be
+   * removed in a future version
+   */
+  style?: Interpolation
 
   /** An optional icon. Can be a an icon name or a Snacks `Icon` component. */
   icon?: string | React.ReactElement<any> // eslint-disable-line @typescript-eslint/no-explicit-any

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,8 @@ const Button = props => {
     disabled: props.disabled,
     tabIndex: props.tabIndex,
     type: props.type,
-    style: [
+    className: props.className,
+    css: [
       baseStyles,
       sizeStyles[props.size],
       snacksStyles[props.snacksStyle][props.disabled ? 'disabled' : 'base'],
@@ -249,7 +249,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 +259,7 @@ const Button = props => {
     return (
       <ElementType {...finalProps}>
         {props.children}
-        <span style={{ ...spacing.MARGIN_LEFT_XS }} />
+        <span css={{ ...spacing.MARGIN_LEFT_XS }} />
         {icon}
       </ElementType>
     )
@@ -275,9 +275,17 @@ Button.propTypes = {
   /** Snacks button variants. */
   snacksStyle: PropTypes.oneOf(['primary', 'secondary', 'flat', 'coupon']),
 
-  /** Optional style overrides. */
+  /**
+   * Optional style overrides merged into emotion css
+   *
+   * @deprecated
+   * This prop exists for backwards compatibility and will be
+   * removed in a future version
+   */
   style: PropTypes.object,
 
+  className: PropTypes.string,
+
   /** Whether or not the button is disabled. */
   disabled: PropTypes.bool,
 
@@ -333,4 +341,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.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { Interpolation } from '@emotion/core'
 import { WithThemeInjectedProps, ApplyWithTheme } from '../../styles/themer/withTheme'
 
 export interface CircleButtonProps
@@ -7,6 +8,17 @@ export interface CircleButtonProps
   ariaLabel?: string
   children?: React.ReactNode
 
+  className?: string
+
+  /**
+   * Optional style overrides merged into emotion css
+   *
+   * @deprecated
+   * This prop exists for backwards compatibility and will be
+   * removed in a future version
+   */
+  style?: Interpolation
+
   /** Bool to disable click/touch listeners */
   disabled?: boolean
 }

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,14 +69,21 @@ 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 */
   onClick: PropTypes.func,
   /** snacks theme attributes */
   snacksTheme: themePropTypes,
-  /** Optional style overrides */
+  /**
+   * Optional style overrides merged into emotion css
+   *
+   * @deprecated
+   * This prop exists for backwards compatibility and will be
+   * removed in a future version
+   */
   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.d.ts

@@ -2,12 +2,21 @@ import * as React from 'react'
 import { RadioProps } from './Radio'
 
 export interface RadioGroupProps {
+  className?: string
   children: React.ReactElement<RadioProps>[]
   name: string
   selectedBtn?: React.ReactElement<RadioProps>
   onChange(value: string, inputBtnProps: RadioProps): void
   wrapEl: keyof JSX.IntrinsicElements
-  style: {
+
+  /**
+   * Optional style overrides merged into emotion css
+   *
+   * @deprecated
+   * This prop exists for backwards compatibility and will be
+   * removed in a future version
+   */
+  style?: {
     wrapEl: React.CSSProperties
   }
 }