className everywhere

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

@@ -76,7 +76,13 @@ CircleButton.propTypes = {
   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]),
 }
 

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
   }
 }

src/components/Buttons/RadioGroup.js

@@ -11,6 +11,7 @@ let initHasSelectedRadio
 
 class RadioGroup extends React.Component {
   static propTypes = {
+    className: PropTypes.string,
     children: PropTypes.arrayOf((propValue, key) => {
       const child = propValue[key]
 
@@ -30,6 +31,14 @@ class RadioGroup extends React.Component {
     selectedBtn: PropTypes.instanceOf(Radio),
     onChange: PropTypes.func,
     wrapEl: PropTypes.string,
+
+    /**
+     * Optional style overrides merged into emotion css
+     *
+     * @deprecated
+     * This prop exists for backwards compatibility and will be
+     * removed in a future version
+     */
     style: PropTypes.shape({
       wrapEl: PropTypes.object,
     }),
@@ -55,7 +64,7 @@ class RadioGroup extends React.Component {
   }
 
   render() {
-    const { children, style, wrapEl: Element } = this.props
+    const { children, className, style, wrapEl: Element } = this.props
     const childrenWithProps = React.Children.map(children, child => {
       const { selectedBtn } = this.state
 
@@ -66,7 +75,11 @@ class RadioGroup extends React.Component {
       })
     })
 
-    return <Element css={{ ...STYLE.wrapEl, ...style.wrapEl }}>{childrenWithProps}</Element>
+    return (
+      <Element className={className} css={{ ...STYLE.wrapEl, ...style.wrapEl }}>
+        {childrenWithProps}
+      </Element>
+    )
   }
 }
 

src/components/Forms/FloatingLabel.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react'
+import { Interpolation } from '@emotion/core'
 import { WithThemeInjectedProps, ApplyWithTheme } from '../../styles/themer/withTheme'
-import { RadiumStyles } from '../..'
 
 export interface FloatingLabelProps extends WithThemeInjectedProps {
+  children?: React.ReactNode
+
   /** Disabled styling for the label */
   disabled?: boolean
 
@@ -18,8 +20,14 @@ export interface FloatingLabelProps extends WithThemeInjectedProps {
   /** Is the input in an active state */
   isActive?: boolean
 
-  /** Override styles */
-  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
 
   /** Label text */
   text?: string

src/components/Forms/FloatingLabel.js

@@ -57,7 +57,13 @@ class FloatingLabel extends Component {
     htmlFor: PropTypes.string,
     /** Is the input in an active state */
     isActive: PropTypes.bool,
-    /** Override styles */
+    /**
+     * 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,
     /** Label text */

src/components/Forms/MaskedTextField.d.ts

@@ -1,13 +1,15 @@
 import * as React from 'react'
 import { MaskedInputProps } from 'react-text-mask'
+import { Interpolation } from '@emotion/core'
 import { FormComponentInjectedProps, ApplyFormComponent } from './FormComponent'
 import { WithThemeInjectedProps, ApplyWithTheme } from '../../styles/themer/withTheme'
-import { RadiumStyles } from '../..'
 
 export interface MaskedTextFieldProps
   extends FormComponentInjectedProps,
     WithThemeInjectedProps,
     Pick<React.ComponentProps<'input'>, 'onFocus' | 'onBlur' | 'onKeyDown'> {
+  className?: string
+
   /** Name of the field */
   name: string
 
@@ -62,7 +64,7 @@ export interface MaskedTextFieldProps
   id: string
 
   /** Style for input */
-  inputStyle: RadiumStyles
+  inputStyle: Interpolation
 
   /** Set by FormComponent by default.   */
   isValid: boolean
@@ -86,8 +88,14 @@ export interface MaskedTextFieldProps
   /** Error from server to show ServerError message */
   serverError: string | null
 
-  /** Wrapper styles */
-  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
 
   /** Text to show for validation error  */
   validationErrorText?: string

src/components/Forms/MaskedTextField.js

@@ -91,6 +91,7 @@ const getInputSyles = ({ props, theme, isFocused }) => {
 }
 
 export const maskedTextFieldPropTypes = {
+  className: PropTypes.string,
   /** Name of the field */
   name: PropTypes.string.isRequired,
   /** Transforms the raw value from the input
@@ -149,7 +150,13 @@ export const maskedTextFieldPropTypes = {
   required: PropTypes.bool,
   /** Error from server to show ServerError message */
   serverError: PropTypes.string,
-  /** Wrapper styles */
+  /**
+   * 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,
   /** Text to show for validation error  */
   validationErrorText: PropTypes.string,
@@ -228,6 +235,7 @@ class MaskedTextField extends React.Component {
 
   render() {
     const {
+      className,
       mask,
       pipe,
       maskHint,
@@ -254,6 +262,7 @@ class MaskedTextField extends React.Component {
 
     return (
       <div
+        className={className}
         css={[styles.wrapper, fullWidth && styles.fullWidth, halfWidth && styles.halfWidth, style]}
       >
         {serverError && !disabled && !isValid && <ServerError text={serverError} />}

src/components/Forms/Select.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react'
+import { Interpolation } from '@emotion/core'
 import { FormComponentInjectedProps, ApplyFormComponent } from './FormComponent'
 import { WithThemeInjectedProps, ApplyWithTheme } from '../../styles/themer/withTheme'
-import { RadiumStyles } from '../..'
 
 export type Option<TValue = string | number | boolean> = {
   label: string
@@ -12,6 +12,8 @@ export interface SelectProps extends FormComponentInjectedProps, WithThemeInject
   /** Name of the field */
   name: string
 
+  className?: string
+
   /** Children are passed to Menu and should be MenuItems or MenuDivider */
   children?: React.ReactNode
 
@@ -66,8 +68,14 @@ export interface SelectProps extends FormComponentInjectedProps, WithThemeInject
   /** Error from server to show ServerError message */
   serverError: string | null
 
-  /** Wrapper styles, mainly used for custom width */
-  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
 
   /** Text to show for validation error  */
   validationErrorText?: string

src/components/Forms/Select.js

@@ -127,6 +127,7 @@ class Select extends React.PureComponent {
   static propTypes = {
     /** Name of the field */
     name: PropTypes.string.isRequired,
+    className: PropTypes.string,
     /** Children are passed to Menu and should be MenuItems or MenuDivider */
     children: PropTypes.node,
     /** DefaultOption */
@@ -169,7 +170,13 @@ class Select extends React.PureComponent {
     }),
     /** Error from server to show ServerError message */
     serverError: PropTypes.string,
-    /** Wrapper styles, mainly used for custom width */
+    /**
+     * 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,
     /** Text to show for validation error  */
     validationErrorText: PropTypes.string,
@@ -240,7 +247,15 @@ class Select extends React.PureComponent {
   }
 
   renderTrigger() {
-    const { disabled, required, hasError, hintText, floatingLabelText, snacksTheme } = this.props
+    const {
+      className,
+      disabled,
+      required,
+      hasError,
+      hintText,
+      floatingLabelText,
+      snacksTheme,
+    } = this.props
 
     const snacksStyles = getSnackStyles(snacksTheme)
 
@@ -257,6 +272,7 @@ class Select extends React.PureComponent {
         ref={node => (this.trigger = node)}
       >
         <div
+          className={className}
           css={[
             styles.trigger,
             disabled && styles.triggerDisabled,

src/components/Forms/ServerError.d.ts

@@ -1,8 +1,17 @@
 import * as React from 'react'
-import { RadiumStyles } from '../..'
+import { Interpolation } from '@emotion/core'
 
 export interface ServerErrorProps {
-  style?: RadiumStyles
+  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
 
   /** Error text */
   text?: React.ReactNode

src/components/Forms/ServerError.js

@@ -18,17 +18,24 @@ const styles = {
 
 class ServerError extends Component {
   static propTypes = {
-    /** Override styles */
+    className: PropTypes.string,
+    /**
+     * 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,
     /** Error text */
     text: PropTypes.string,
   }
 
   render() {
-    const { style, text } = this.props
+    const { className, style, text } = this.props
 
     return (
-      <div css={[styles.root, style]} aria-live={'assertive'} aria-atomic>
+      <div className={className} css={[styles.root, style]} aria-live={'assertive'} aria-atomic>
         {text}
       </div>
     )