Repository: react-materialize/react-materialize
Pull request #805 (2019-04-02 21:34:55)

Add missing knobs to TextInput story
# Description

As per the title

# Checklist:

- [x] I have commented my code, particularly in hard-to-understand areas
- [x] My changes generate no new warnings
- [x] I have not generated a new package version. (the maintainers will handle that)



Patch:
diff --git a/src/Button.js b/src/Button.js
index 3556df1..d1274aa 100644
--- a/src/Button.js
+++ b/src/Button.js
@@ -94,9 +94,7 @@ class Button extends Component {
       <div
         {...other}
         ref={el => (this._floatingActionBtn = el)}
-        className={cx('fixed-action-btn', {
-          toolbar: fab && fab.toolbarEnabled
-        })}
+        className={cx('fixed-action-btn')}
       >
         <a className={classes}>{this.renderIcon()}</a>
         <ul>
diff --git a/src/DatePicker.js b/src/DatePicker.js
index 894720b..b990e38 100644
--- a/src/DatePicker.js
+++ b/src/DatePicker.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import TextInput from './TextInput';
 import idgen from './idgen';
 
@@ -12,13 +13,8 @@ class DatePicker extends React.Component {
 
   componentDidMount() {
     if (typeof M !== 'undefined') {
-      const { onChange } = this.props;
       const elem = document.getElementById(this.id);
-      const options = onChange
-        ? { ...this.props.options, onSelect: onChange }
-        : this.props.options;
-
-      this.instance = M.Datepicker.init(elem, options);
+      this.instance = M.Datepicker.init(elem, this.props.options);
     }
   }
 
@@ -29,10 +25,16 @@ class DatePicker extends React.Component {
   }
 
   render() {
-    const { ...other } = this.props;
+    const { id, onChange, ...other } = this.props;
+    const onSelect = onChange;
 
     return (
-      <TextInput id={this.id} inputClassName="datepicker" {...this.props} />
+      <TextInput
+        id={this.id}
+        inputClassName="datepicker"
+        onSelect={onSelect}
+        {...other}
+      />
     );
   }
 }
@@ -64,7 +66,7 @@ DatePicker.propTypes = {
      * Used to create date object from current input string.
      * @default null
      */
-    parse: PropTypes.func,
+    parse: PropTypes.any,
     /**
      * The initial date to view when first opened.
      * @default null
@@ -84,7 +86,7 @@ DatePicker.propTypes = {
      * Custom function to disable certain days.
      * @default null
      */
-    disableDayFn: PropTypes.func,
+    disableDayFn: PropTypes.any,
     /**
      * First day of week (0: Sunday, 1: Monday etc).
      * @default 0
@@ -104,7 +106,7 @@ DatePicker.propTypes = {
      * Number of years either side, or array of upper/lower range.
      * @default 10
      */
-    yearRange: PropTypes.oneOfType([PropTypes.number, PropTypes.array]),
+    yearRange: PropTypes.oneOf([PropTypes.number, PropTypes.array]),
     /**
      * Changes Datepicker to RTL.
      * @default false
@@ -134,116 +136,33 @@ DatePicker.propTypes = {
      * Internationalization options.
      * @default See i18n documentation.
      */
-    i18n: PropTypes.shape({
-      cancel: PropTypes.string,
-      clear: PropTypes.string,
-      done: PropTypes.string,
-      previousMonth: PropTypes.string,
-      nextMonth: PropTypes.string,
-      months: PropTypes.arrayOf(PropTypes.string),
-      monthsShort: PropTypes.arrayOf(PropTypes.string),
-      weekdays: PropTypes.arrayOf(PropTypes.string),
-      weekdaysShort: PropTypes.arrayOf(PropTypes.string),
-      weekdaysAbbrev: PropTypes.arrayOf(PropTypes.string)
-    }),
+    i18n: PropTypes.any,
     /**
      * An array of string returned by `Date.toDateString()`, indicating there are events in the specified days.
      * @default []
      */
-    events: PropTypes.arrayOf(PropTypes.string),
+    events: PropTypes.array,
     /**
      * Callback function when date is selected, first parameter is the newly selected date.
      * @default null
      */
-    onSelect: PropTypes.func,
+    onSelect: PropTypes.any,
     /**
      * Callback function when Datepicker is opened.
      * @default null
      */
-    onOpen: PropTypes.func,
+    onOpen: PropTypes.any,
     /**
      * Callback function when Datepicker is closed.
      * @default null
      */
-    onClose: PropTypes.func,
+    onClose: PropTypes.any,
     /**
      * Callback function when Datepicker HTML is refreshed.
      * @default null
      */
-    onDraw: PropTypes.func
+    onDraw: PropTypes.any
   })
 };
 
-DatePicker.defaultProps = {
-  options: {
-    autoClose: false,
-    format: 'mmm dd, yyyy',
-    parse: null,
-    defaultDate: null,
-    setDefaultDate: false,
-    disableWeekends: false,
-    disableDayFn: null,
-    firstDay: 0,
-    minDate: null,
-    maxDate: null,
-    yearRange: 10,
-    isRTL: false,
-    showMonthAfterYear: false,
-    showDaysInNextAndPreviousMonths: false,
-    container: null,
-    showClearBtn: false,
-    i18n: {
-      cancel: 'Cancel',
-      clear: 'Clear',
-      done: 'Ok',
-      previousMonth: '‹',
-      nextMonth: '›',
-      months: [
-        'January',
-        'February',
-        'March',
-        'April',
-        'May',
-        'June',
-        'July',
-        'August',
-        'September',
-        'October',
-        'November',
-        'December'
-      ],
-      monthsShort: [
-        'Jan',
-        'Feb',
-        'Mar',
-        'Apr',
-        'May',
-        'Jun',
-        'Jul',
-        'Aug',
-        'Sep',
-        'Oct',
-        'Nov',
-        'Dec'
-      ],
-      weekdays: [
-        'Sunday',
-        'Monday',
-        'Tuesday',
-        'Wednesday',
-        'Thursday',
-        'Friday',
-        'Saturday'
-      ],
-      weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-      weekdaysAbbrev: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
-    },
-    events: [],
-    onSelect: null,
-    onOpen: null,
-    onClose: null,
-    onDraw: null
-  }
-};
-
 export default DatePicker;
diff --git a/src/Textarea.js b/src/Textarea.js
index ce7fd5d..2cf7cc0 100644
--- a/src/Textarea.js
+++ b/src/Textarea.js
@@ -1,9 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
 import idgen from './idgen';
 import Icon from './Icon';
-import constants from './constants';
+import TextInput from './TextInput';
 
 class Textarea extends Component {
   componentDidUpdate() {
@@ -15,36 +14,12 @@ class Textarea extends Component {
   }
 
   render() {
-    const {
-      s,
-      m,
-      l,
-      xl,
-      noLayout,
-      iconClassName,
-      icon,
-      label,
-      id,
-      onChange,
-      ...other
-    } = this.props;
+    const { iconClassName, icon, label, id, onChange, ...other } = this.props;
 
     const computedId = id || idgen();
 
-    const sizes = { s, m, l, xl };
-
-    let responsiveClasses;
-    if (!noLayout) {
-      responsiveClasses = { col: true };
-      constants.SIZES.forEach(size => {
-        responsiveClasses[size + sizes[size]] = sizes[size];
-      });
-    }
-
-    const wrapperClasses = cx('input-field', responsiveClasses);
-
     return (
-      <div className={wrapperClasses}>
+      <div className="input-field">
         {icon && this.renderIcon(icon, iconClassName)}
         <textarea
           ref={input => {
@@ -62,26 +37,6 @@ class Textarea extends Component {
 }
 
 Textarea.propTypes = {
-  /*
- * Strip away all layout classes such as col and sX
- */
-  noLayout: PropTypes.bool,
-  /*
-   * Responsive size for Mobile Devices
-   */
-  s: PropTypes.number,
-  /*
-   * Responsive size for Tablet Devices
-   */
-  m: PropTypes.number,
-  /*
-   * Responsive size for Desktop Devices
-   */
-  l: PropTypes.number,
-  /**
-   *  Responsive size for Large Desktop Devices
-   */
-  xl: PropTypes.number,
   /*
    * render icon next to input
    */
diff --git a/src/TimePicker.js b/src/TimePicker.js
index 1fc21a2..3987fe1 100644
--- a/src/TimePicker.js
+++ b/src/TimePicker.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import TextInput from './TextInput';
 import idgen from './idgen';
 
@@ -12,13 +13,8 @@ class TimePicker extends React.Component {
 
   componentDidMount() {
     if (typeof M !== 'undefined') {
-      const { onChange } = this.props;
       const elem = document.getElementById(this.id);
-      const options = onChange
-        ? { ...this.props.options, onSelect: onChange }
-        : this.props.options;
-
-      this.instance = M.Timepicker.init(elem, options);
+      this.instance = M.Timepicker.init(elem, this.props.options);
     }
   }
 
@@ -29,8 +25,16 @@ class TimePicker extends React.Component {
   }
 
   render() {
+    const { id, onChange, ...other } = this.props;
+    const onSelect = onChange;
+
     return (
-      <TextInput id={this.id} inputClassName="timepicker" {...this.props} />
+      <TextInput
+        id={this.id}
+        inputClassName="timepicker"
+        onSelect={onSelect}
+        {...other}
+      />
     );
   }
 }
@@ -78,11 +82,7 @@ TimePicker.propTypes = {
      * Internationalization options.
      * @default See i18n documentation.
      */
-    i18n: PropTypes.shape({
-      cancel: PropTypes.string,
-      clear: PropTypes.string,
-      done: PropTypes.string
-    }),
+    i18n: PropTypes.any,
     /**
      * Automatically close picker when minute is selected.
      * @default false
@@ -102,51 +102,28 @@ TimePicker.propTypes = {
      * Callback function called before modal is opened.
      * @default null
      */
-    onOpenStart: PropTypes.func,
+    onOpenStart: PropTypes.any,
     /**
      * Callback function called after modal is opened.
      * @default null
      */
-    onOpenEnd: PropTypes.func,
+    onOpenEnd: PropTypes.any,
     /**
      * Callback function called before modal is closed.
      * @default null
      */
-    onCloseStart: PropTypes.func,
+    onCloseStart: PropTypes.any,
     /**
      * Callback function called after modal is closed.
      * @default null
      */
-    onCloseEnd: PropTypes.func,
+    onCloseEnd: PropTypes.any,
     /**
      * Callback function when a time is selected, first parameter is the hour and the second is the minute.
      * @default null
      */
-    onSelect: PropTypes.func
+    onSelect: PropTypes.any
   })
 };
 
-TimePicker.defaultProps = {
-  options: {
-    duration: 350,
-    container: null,
-    showClearBtn: false,
-    defaultTime: 'now',
-    fromNow: 0,
-    i18n: {
-      cancel: 'Cancel',
-      clear: 'Clear',
-      done: 'Ok'
-    },
-    autoClose: false,
-    twelveHour: true,
-    vibrate: true,
-    onOpenStart: null,
-    onOpenEnd: null,
-    onCloseStart: null,
-    onCloseEnd: null,
-    onSelect: null
-  }
-};
-
 export default TimePicker;
diff --git a/src/index.js b/src/index.js
index 29e7d2f..0dffaf3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,6 @@ export { default as Autocomplete } from './Autocomplete';
 export { default as Badge } from './Badge';
 export { default as Breadcrumb } from './Breadcrumb';
 export { default as Button } from './Button';
-export { default as Caption } from './Caption';
 export { default as Card } from './Card';
 export { default as CardPanel } from './CardPanel';
 export { default as CardTitle } from './CardTitle';
diff --git a/stories/Button.stories.js b/stories/Button.stories.js
index 606fe2d..0b9fc9f 100644
--- a/stories/Button.stories.js
+++ b/stories/Button.stories.js
@@ -1,11 +1,9 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { text, select, withKnobs } from '@storybook/addon-knobs';
 import Button from '../src/Button';
 import Icon from '../src/Icon';
 
 const stories = storiesOf('Components|Button', module);
-stories.addDecorator(withKnobs);
 
 stories.addParameters({
   info: {
@@ -94,83 +92,6 @@ stories.add('Link', () => (
   </Button>
 ));
 
-stories.add('Waves', () => (
-  <div>
-    <Button
-      flat
-      waves={select(
-        'waves',
-        ['light', 'red', 'yellow', 'orange', 'purple', 'green', 'teal'],
-        'light'
-      )}
-      style={{ marginRight: '5px' }}
-    >
-      button
-    </Button>
-    <Button
-      floating
-      large
-      waves={select(
-        'waves',
-        ['light', 'red', 'yellow', 'orange', 'purple', 'green', 'teal'],
-        'light'
-      )}
-      icon="add"
-    />
-  </div>
-));
-
-stories.add('Tooltip', () => {
-  const tooltip = text('tooltip', 'I am a tooltip');
-
-  return (
-    <div
-      className="row"
-      style={{
-        margin: '50px 0'
-      }}
-    >
-      <Button
-        className="col l2 offset-l1 offset-s4 s4"
-        waves="ligth"
-        tooltip={tooltip}
-      >
-        BOTTOM
-      </Button>
-      <Button
-        className="col l2 offset-l1 offset-s4 s4"
-        waves="ligth"
-        tooltip={tooltip}
-        tooltipOptions={{
-          position: 'top'
-        }}
-      >
-        TOP
-      </Button>
-      <Button
-        className="col l2 offset-l1 offset-s4 s4"
-        waves="ligth"
-        tooltip={tooltip}
-        tooltipOptions={{
-          position: 'left'
-        }}
-      >
-        LEFT
-      </Button>
-      <Button
-        className="col l2 offset-l1 offset-s4 s4"
-        waves="ligth"
-        tooltip={tooltip}
-        tooltipOptions={{
-          position: 'right'
-        }}
-      >
-        RIGHT
-      </Button>
-    </div>
-  );
-});
-
 const storiesFab = storiesOf('Components|FAB', module);
 const children = [
   <Button key="1" floating icon="insert_chart" className="red" />,
@@ -205,15 +126,3 @@ storiesFab.add('Bottom', () => (
     {children}
   </Button>
 ));
-
-storiesFab.add('Click-only', () => (
-  <Button {...props} fab={{ direction: 'left', hoverEnabled: false }}>
-    {children}
-  </Button>
-));
-
-storiesFab.add('To toolbar', () => (
-  <Button {...props} fab={{ direction: 'top', toolbarEnabled: true }}>
-    {children}
-  </Button>
-));
diff --git a/stories/Collection.stories.js b/stories/Collection.stories.js
index 20dac2a..7cfcfc7 100644
--- a/stories/Collection.stories.js
+++ b/stories/Collection.stories.js
@@ -4,7 +4,6 @@ import Col from '../src/Col';
 import Row from '../src/Row';
 import Collection from '../src/Collection';
 import CollectionItem from '../src/CollectionItem';
-import Icon from '../src/Icon';
 
 const stories = storiesOf('Components|Collection', module);
 
@@ -50,81 +49,3 @@ stories.add('Header', () => (
     <CollectionItem>Alvin</CollectionItem>
   </Collection>
 ));
-
-stories.add('Secondary Content', () => (
-  <Collection header="First Names">
-    <CollectionItem>
-      Alvin
-      <a href="javascript:void(0)" className="secondary-content">
-        <Icon>send</Icon>
-      </a>
-    </CollectionItem>
-    <CollectionItem>
-      Alvin
-      <a href="javascript:void(0)" className="secondary-content">
-        <Icon>send</Icon>
-      </a>
-    </CollectionItem>
-    <CollectionItem>
-      Alvin
-      <a href="javascript:void(0)" className="secondary-content">
-        <Icon>send</Icon>
-      </a>
-    </CollectionItem>
-    <CollectionItem>
-      Alvin
-      <a href="javascript:void(0)" className="secondary-content">
-        <Icon>send</Icon>
-      </a>
-    </CollectionItem>
-  </Collection>
-));
-
-stories.add('Avatar Content', () => (
-  <Collection>
-    <CollectionItem className="avatar">
-      <img
-        src="https://materializecss.com/images/yuna.jpg"
-        alt=""
-        className="circle"
-      />
-      <span className="title">Title</span>
-      <p>
-        First Line <br /> Second Line
-      </p>
-      <a href="javascript:void(0)" className="secondary-content">
-        <Icon>grade</Icon>
-      </a>
-    </CollectionItem>
-    <CollectionItem className="avatar">
-      <Icon className="circle">folder</Icon>
-      <span className="title">Title</span>
-      <p>
-        First Line <br /> Second Line
-      </p>
-      <a href="javascript:void(0)" className="secondary-content">
-        <Icon>grade</Icon>
-      </a>
-    </CollectionItem>
-    <CollectionItem className="avatar">
-      <Icon className="circle green">insert_chart</Icon>
-      <span className="title">Title</span>
-      <p>
-        First Line <br /> Second Line
-      </p>
-      <a href="javascript:void(0)" className="secondary-content">
-        <Icon>grade</Icon>
-      </a>
-    </CollectionItem>
-    <CollectionItem className="avatar">
-      <Icon className="circle red">play_arrow</Icon>
-      <span className="title">Title</span>
-      <p>
-        First Line <br /> Second Line
-      </p>
-      <a href="javascript:void(0)" className="secondary-content">
-        <Icon>grade</Icon>
-      </a>
-    </CollectionItem>
-  </Collection>
-));
diff --git a/stories/Media.stories.js b/stories/Media.stories.js
index 6c08bd4..6a8541d 100644
--- a/stories/Media.stories.js
+++ b/stories/Media.stories.js
@@ -3,7 +3,6 @@ import { storiesOf } from '@storybook/react';
 import MediaBox from '../src/MediaBox';
 import Slider from '../src/Slider';
 import Slide from '../src/Slide';
-import Caption from '../src/Caption';
 
 const stories = storiesOf('Javascript|Media', module);
 
@@ -22,37 +21,50 @@ stories.add('Default', () => (
 
 stories.add('Slider', () => (
   <Slider>
-    <Slide image={<img src="http://lorempixel.com/780/580/nature/1" alt="" />}>
-      <Caption>
+    <Slide
+      image={
+        <MediaBox
+          src="http://lorempixel.com/780/580/nature/1"
+          caption="A demo media box1"
+        />
+      }
+    >
+      <div className="caption center-align">
         <h3>This is our big Tagline!</h3>
         <h5 className="light grey-text text-lighten-3">
           Here's our small slogan.
         </h5>
-      </Caption>
+      </div>
     </Slide>
-    <Slide image={<img src="http://lorempixel.com/780/580/nature/2" alt="" />}>
-      <Caption placement="left">
+    <Slide
+      image={
+        <MediaBox
+          src="http://lorempixel.com/780/580//nature/2"
+          caption="A demo media box1"
+        />
+      }
+    >
+      <div className="caption left-align">
         <h3>Left Aligned Caption</h3>
         <h5 className="light grey-text text-lighten-3">
           Here's our small slogan.
         </h5>
-      </Caption>
+      </div>
     </Slide>
-    <Slide image={<img src="https://lorempixel.com/780/580/nature/3" alt="" />}>
-      <Caption placement="right">
+    <Slide
+      image={
+        <MediaBox
+          src="http://lorempixel.com/780/580//nature/3"
+          caption="A demo media box1"
+        />
+      }
+    >
+      <div className="caption right-align">
         <h3>Right Aligned Caption</h3>
         <h5 className="light grey-text text-lighten-3">
           Here's our small slogan.
         </h5>
-      </Caption>
-    </Slide>
-    <Slide image={<img src="https://lorempixel.com/580/250/nature/4" alt="" />}>
-      <Caption>
-        <h3>This is our big Tagline!</h3>
-        <h5 className="light grey-text text-lighten-3">
-          Here's our small slogan.
-        </h5>
-      </Caption>
+      </div>
     </Slide>
   </Slider>
 ));
diff --git a/stories/TextInput.stories.js b/stories/TextInput.stories.js
index de87337..ec43dd4 100644
--- a/stories/TextInput.stories.js
+++ b/stories/TextInput.stories.js
@@ -1,8 +1,10 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import { text, boolean, withKnobs } from '@storybook/addon-knobs';
 import TextInput from '../src/TextInput';
 
 const stories = storiesOf('Components|TextInput', module);
+stories.addDecorator(withKnobs);
 
 stories.addParameters({
   info: {
@@ -17,26 +19,42 @@ stories.addParameters({
 
 stories.add('Default', () => <TextInput />);
 
-stories.add('Label', () => <TextInput label="First Name" />);
+stories.add('Label', () => <TextInput label={text('label', 'First Name')} />);
 
-stories.add('Placeholder', () => <TextInput placeholder="First Name" />);
+stories.add('Placeholder', () => (
+  <TextInput placeholder={text('placeholder', 'First Name')} />
+));
 
-stories.add('Predefined value', () => <TextInput value="John" />);
+stories.add('Predefined value', () => (
+  <TextInput value={text('value', 'John')} />
+));
 
-stories.add('Disabled', () => <TextInput disabled value="John" />);
+stories.add('Disabled', () => (
+  <TextInput disabled={boolean('disabled', true)} value="John" />
+));
 
-stories.add('Password', () => <TextInput password label="Password" />);
+stories.add('Password', () => (
+  <TextInput password={boolean('password', true)} label="Password" />
+));
 
-stories.add('Email validate', () => <TextInput email validate label="Email" />);
+stories.add('Email validate', () => (
+  <TextInput
+    email={boolean('email', true)}
+    validate={boolean('validate', true)}
+    label="Email"
+  />
+));
 
 stories.add('with custom error/success', () => (
   <TextInput
     email
     validate
     label="Email"
-    error="Wrong Email sir"
-    success="Great"
+    error={text('error', 'Wrong Email sir')}
+    success={text('success', 'Great')}
   />
 ));
 
-stories.add('with Icon', () => <TextInput icon="email" label="Email" />);
+stories.add('with Icon', () => (
+  <TextInput icon={text('icon', 'email')} label="Email" />
+));
diff --git a/stories/Textarea.stories.js b/stories/Textarea.stories.js
index 8481e33..3568c5a 100644
--- a/stories/Textarea.stories.js
+++ b/stories/Textarea.stories.js
@@ -1,11 +1,8 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { text, boolean, number, withKnobs } from '@storybook/addon-knobs';
-import Row from '../src/Row';
 import Textarea from '../src/Textarea';
 
 const stories = storiesOf('Components|Textarea', module);
-stories.addDecorator(withKnobs);
 
 stories.addParameters({
   info: {
@@ -16,40 +13,12 @@ stories.addParameters({
   }
 });
 
-stories.add('Textarea', () => {
-  const defaultValue = 12;
-  const options = {
-    range: true,
-    min: 1,
-    max: 12,
-    step: 1
-  };
+stories.add('Textarea', () => <Textarea />);
 
-  return (
-    <Row>
-      <Textarea
-        s={number('s', defaultValue, options)}
-        m={number('m', defaultValue, options)}
-        l={number('l', defaultValue, options)}
-        xl={number('xl', defaultValue, options)}
-      />
-    </Row>
-  );
-});
-
-stories.add('Disabled', () => (
-  <Textarea
-    value={text('value', 'I was here')}
-    disabled={boolean('disabled', true)}
-  />
-));
+stories.add('Disabled', () => <Textarea value="I was here" disabled />);
 
-stories.add('Placeholder', () => (
-  <Textarea placeholder={text('placeholder', 'I was here')} />
-));
+stories.add('Placeholder', () => <Textarea placeholder="I was here" />);
 
-stories.add('Label', () => (
-  <Textarea label={text('label', 'Write something here...')} />
-));
+stories.add('Label', () => <Textarea label="Write something here..." />);
 
-stories.add('Icon', () => <Textarea icon={text('icon', 'mode_edit')} />);
+stories.add('Icon', () => <Textarea icon="mode_edit" />);


Test patch:
diff --git a/test/DatePicker.spec.js b/test/DatePicker.spec.js
deleted file mode 100644
index d626835..0000000
--- a/test/DatePicker.spec.js
+++ /dev/null
@@ -1,121 +0,0 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import DatePicker from '../src/DatePicker';
-import mocker from './helper/new-mocker';
-
-describe('<DatePicker />', () => {
-  let wrapper;
-
-  test('renders', () => {
-    wrapper = shallow(<DatePicker />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  test('renders with a label', () => {
-    wrapper = shallow(<DatePicker label="DatePicker label" />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  test('accepts external `id` value', () => {
-    wrapper = shallow(<DatePicker id="ID" />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  describe('initialises', () => {
-    const datePickerInitMock = jest.fn();
-    const datePickerInstanceDestroyMock = jest.fn();
-    const datePickerMock = {
-      init: (el, options) => {
-        datePickerInitMock(options);
-        return {
-          destroy: datePickerInstanceDestroyMock
-        };
-      }
-    };
-
-    const restore = mocker('Datepicker', datePickerMock);
-
-    beforeEach(() => {
-      datePickerInitMock.mockClear();
-      datePickerInstanceDestroyMock.mockClear();
-    });
-
-    afterAll(() => {
-      restore();
-    });
-
-    test('uses default options if none are given', () => {
-      wrapper = mount(<DatePicker />);
-
-      expect(datePickerInitMock).toHaveBeenCalledWith({
-        autoClose: false,
-        format: 'mmm dd, yyyy',
-        parse: null,
-        defaultDate: null,
-        setDefaultDate: false,
-        disableWeekends: false,
-        disableDayFn: null,
-        firstDay: 0,
-        minDate: null,
-        maxDate: null,
-        yearRange: 10,
-        isRTL: false,
-        showMonthAfterYear: false,
-        showDaysInNextAndPreviousMonths: false,
-        container: null,
-        showClearBtn: false,
-        i18n: {
-          cancel: 'Cancel',
-          clear: 'Clear',
-          done: 'Ok',
-          previousMonth: '‹',
-          nextMonth: '›',
-          months: [
-            'January',
-            'February',
-            'March',
-            'April',
-            'May',
-            'June',
-            'July',
-            'August',
-            'September',
-            'October',
-            'November',
-            'December'
-          ],
-          monthsShort: [
-            'Jan',
-            'Feb',
-            'Mar',
-            'Apr',
-            'May',
-            'Jun',
-            'Jul',
-            'Aug',
-            'Sep',
-            'Oct',
-            'Nov',
-            'Dec'
-          ],
-          weekdays: [
-            'Sunday',
-            'Monday',
-            'Tuesday',
-            'Wednesday',
-            'Thursday',
-            'Friday',
-            'Saturday'
-          ],
-          weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-          weekdaysAbbrev: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
-        },
-        events: [],
-        onSelect: null,
-        onOpen: null,
-        onClose: null,
-        onDraw: null
-      });
-    });
-  });
-});
diff --git a/test/Textarea.spec.js b/test/Textarea.spec.js
index 7c9b3ab..a3785eb 100644
--- a/test/Textarea.spec.js
+++ b/test/Textarea.spec.js
@@ -10,24 +10,6 @@ describe('<Textarea />', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  test('Handles layout classes', () => {
-    wrapper = shallow(<Textarea s={4} m={6} />);
-
-    expect(wrapper.hasClass('input-field')).toBeTruthy();
-    expect(wrapper.hasClass('col')).toBeTruthy();
-    expect(wrapper.hasClass('s4')).toBeTruthy();
-    expect(wrapper.hasClass('m6')).toBeTruthy();
-  });
-
-  test('Handles removing layout classes', () => {
-    wrapper = shallow(<Textarea s={4} m={6} noLayout />);
-
-    expect(wrapper.hasClass('input-field')).toBeTruthy();
-    expect(wrapper.hasClass('col')).toBeFalsy();
-    expect(wrapper.hasClass('s4')).toBeFalsy();
-    expect(wrapper.hasClass('m6')).toBeFalsy();
-  });
-
   test('Disabled', () => {
     wrapper = shallow(<Textarea value="I was here" disabled />);
     expect(wrapper).toMatchSnapshot();
diff --git a/test/TimePicker.spec.js b/test/TimePicker.spec.js
deleted file mode 100644
index 4d171b4..0000000
--- a/test/TimePicker.spec.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import TimePicker from '../src/TimePicker';
-import mocker from './helper/new-mocker';
-
-describe('<TimePicker />', () => {
-  let wrapper;
-
-  test('renders', () => {
-    wrapper = shallow(<TimePicker />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  test('renders with a label', () => {
-    wrapper = shallow(<TimePicker label="TimePicker label" />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  test('accepts external `id` value', () => {
-    wrapper = shallow(<TimePicker id="ID" />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  describe('initialises', () => {
-    const timePickerInitMock = jest.fn();
-    const timePickerInstanceDestroyMock = jest.fn();
-    const timePickerMock = {
-      init: (el, options) => {
-        timePickerInitMock(options);
-        return {
-          destroy: timePickerInstanceDestroyMock
-        };
-      }
-    };
-
-    const restore = mocker('Timepicker', timePickerMock);
-
-    beforeEach(() => {
-      timePickerInitMock.mockClear();
-      timePickerInstanceDestroyMock.mockClear();
-    });
-
-    afterAll(() => {
-      restore();
-    });
-
-    test('uses default options if none are given', () => {
-      wrapper = mount(<TimePicker />);
-
-      expect(timePickerInitMock).toHaveBeenCalledWith({
-        duration: 350,
-        container: null,
-        showClearBtn: false,
-        defaultTime: 'now',
-        fromNow: 0,
-        i18n: {
-          cancel: 'Cancel',
-          clear: 'Clear',
-          done: 'Ok'
-        },
-        autoClose: false,
-        twelveHour: true,
-        vibrate: true,
-        onOpenStart: null,
-        onOpenEnd: null,
-        onCloseStart: null,
-        onCloseEnd: null,
-        onSelect: null
-      });
-    });
-  });
-});
diff --git a/test/__snapshots__/DatePicker.spec.js.snap b/test/__snapshots__/DatePicker.spec.js.snap
deleted file mode 100644
index dd3d80e..0000000
--- a/test/__snapshots__/DatePicker.spec.js.snap
+++ /dev/null
@@ -1,284 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<DatePicker /> accepts external \`id\` value 1`] = `
-<TextInput
-  id="ID"
-  inputClassName="datepicker"
-  options={
-    Object {
-      "autoClose": false,
-      "container": null,
-      "defaultDate": null,
-      "disableDayFn": null,
-      "disableWeekends": false,
-      "events": Array [],
-      "firstDay": 0,
-      "format": "mmm dd, yyyy",
-      "i18n": Object {
-        "cancel": "Cancel",
-        "clear": "Clear",
-        "done": "Ok",
-        "months": Array [
-          "January",
-          "February",
-          "March",
-          "April",
-          "May",
-          "June",
-          "July",
-          "August",
-          "September",
-          "October",
-          "November",
-          "December",
-        ],
-        "monthsShort": Array [
-          "Jan",
-          "Feb",
-          "Mar",
-          "Apr",
-          "May",
-          "Jun",
-          "Jul",
-          "Aug",
-          "Sep",
-          "Oct",
-          "Nov",
-          "Dec",
-        ],
-        "nextMonth": "›",
-        "previousMonth": "‹",
-        "weekdays": Array [
-          "Sunday",
-          "Monday",
-          "Tuesday",
-          "Wednesday",
-          "Thursday",
-          "Friday",
-          "Saturday",
-        ],
-        "weekdaysAbbrev": Array [
-          "S",
-          "M",
-          "T",
-          "W",
-          "T",
-          "F",
-          "S",
-        ],
-        "weekdaysShort": Array [
-          "Sun",
-          "Mon",
-          "Tue",
-          "Wed",
-          "Thu",
-          "Fri",
-          "Sat",
-        ],
-      },
-      "isRTL": false,
-      "maxDate": null,
-      "minDate": null,
-      "onClose": null,
-      "onDraw": null,
-      "onOpen": null,
-      "onSelect": null,
-      "parse": null,
-      "setDefaultDate": false,
-      "showClearBtn": false,
-      "showDaysInNextAndPreviousMonths": false,
-      "showMonthAfterYear": false,
-      "yearRange": 10,
-    }
-  }
-/>
-`;
-
-exports[`<DatePicker /> renders 1`] = `
-<TextInput
-  id="datepickermockId"
-  inputClassName="datepicker"
-  options={
-    Object {
-      "autoClose": false,
-      "container": null,
-      "defaultDate": null,
-      "disableDayFn": null,
-      "disableWeekends": false,
-      "events": Array [],
-      "firstDay": 0,
-      "format": "mmm dd, yyyy",
-      "i18n": Object {
-        "cancel": "Cancel",
-        "clear": "Clear",
-        "done": "Ok",
-        "months": Array [
-          "January",
-          "February",
-          "March",
-          "April",
-          "May",
-          "June",
-          "July",
-          "August",
-          "September",
-          "October",
-          "November",
-          "December",
-        ],
-        "monthsShort": Array [
-          "Jan",
-          "Feb",
-          "Mar",
-          "Apr",
-          "May",
-          "Jun",
-          "Jul",
-          "Aug",
-          "Sep",
-          "Oct",
-          "Nov",
-          "Dec",
-        ],
-        "nextMonth": "›",
-        "previousMonth": "‹",
-        "weekdays": Array [
-          "Sunday",
-          "Monday",
-          "Tuesday",
-          "Wednesday",
-          "Thursday",
-          "Friday",
-          "Saturday",
-        ],
-        "weekdaysAbbrev": Array [
-          "S",
-          "M",
-          "T",
-          "W",
-          "T",
-          "F",
-          "S",
-        ],
-        "weekdaysShort": Array [
-          "Sun",
-          "Mon",
-          "Tue",
-          "Wed",
-          "Thu",
-          "Fri",
-          "Sat",
-        ],
-      },
-      "isRTL": false,
-      "maxDate": null,
-      "minDate": null,
-      "onClose": null,
-      "onDraw": null,
-      "onOpen": null,
-      "onSelect": null,
-      "parse": null,
-      "setDefaultDate": false,
-      "showClearBtn": false,
-      "showDaysInNextAndPreviousMonths": false,
-      "showMonthAfterYear": false,
-      "yearRange": 10,
-    }
-  }
-/>
-`;
-
-exports[`<DatePicker /> renders with a label 1`] = `
-<TextInput
-  id="datepickermockId"
-  inputClassName="datepicker"
-  label="DatePicker label"
-  options={
-    Object {
-      "autoClose": false,
-      "container": null,
-      "defaultDate": null,
-      "disableDayFn": null,
-      "disableWeekends": false,
-      "events": Array [],
-      "firstDay": 0,
-      "format": "mmm dd, yyyy",
-      "i18n": Object {
-        "cancel": "Cancel",
-        "clear": "Clear",
-        "done": "Ok",
-        "months": Array [
-          "January",
-          "February",
-          "March",
-          "April",
-          "May",
-          "June",
-          "July",
-          "August",
-          "September",
-          "October",
-          "November",
-          "December",
-        ],
-        "monthsShort": Array [
-          "Jan",
-          "Feb",
-          "Mar",
-          "Apr",
-          "May",
-          "Jun",
-          "Jul",
-          "Aug",
-          "Sep",
-          "Oct",
-          "Nov",
-          "Dec",
-        ],
-        "nextMonth": "›",
-        "previousMonth": "‹",
-        "weekdays": Array [
-          "Sunday",
-          "Monday",
-          "Tuesday",
-          "Wednesday",
-          "Thursday",
-          "Friday",
-          "Saturday",
-        ],
-        "weekdaysAbbrev": Array [
-          "S",
-          "M",
-          "T",
-          "W",
-          "T",
-          "F",
-          "S",
-        ],
-        "weekdaysShort": Array [
-          "Sun",
-          "Mon",
-          "Tue",
-          "Wed",
-          "Thu",
-          "Fri",
-          "Sat",
-        ],
-      },
-      "isRTL": false,
-      "maxDate": null,
-      "minDate": null,
-      "onClose": null,
-      "onDraw": null,
-      "onOpen": null,
-      "onSelect": null,
-      "parse": null,
-      "setDefaultDate": false,
-      "showClearBtn": false,
-      "showDaysInNextAndPreviousMonths": false,
-      "showMonthAfterYear": false,
-      "yearRange": 10,
-    }
-  }
-/>
-`;
diff --git a/test/__snapshots__/Textarea.spec.js.snap b/test/__snapshots__/Textarea.spec.js.snap
index ca97ec1..fff9088 100644
--- a/test/__snapshots__/Textarea.spec.js.snap
+++ b/test/__snapshots__/Textarea.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`<Textarea /> Disabled 1`] = `
 <div
-  className="input-field col"
+  className="input-field"
 >
   <textarea
     className="materialize-textarea"
@@ -18,7 +18,7 @@ exports[`<Textarea /> Disabled 1`] = `
 
 exports[`<Textarea /> Icon 1`] = `
 <div
-  className="input-field col"
+  className="input-field"
 >
   <Icon
     className="material-icons prefix"
@@ -37,7 +37,7 @@ exports[`<Textarea /> Icon 1`] = `
 
 exports[`<Textarea /> Label 1`] = `
 <div
-  className="input-field col"
+  className="input-field"
 >
   <textarea
     className="materialize-textarea"
@@ -53,7 +53,7 @@ exports[`<Textarea /> Label 1`] = `
 
 exports[`<Textarea /> Placeholder 1`] = `
 <div
-  className="input-field col"
+  className="input-field"
 >
   <textarea
     className="materialize-textarea"
@@ -68,7 +68,7 @@ exports[`<Textarea /> Placeholder 1`] = `
 
 exports[`<Textarea /> Textarea 1`] = `
 <div
-  className="input-field col"
+  className="input-field"
 >
   <textarea
     className="materialize-textarea"
diff --git a/test/__snapshots__/TimePicker.spec.js.snap b/test/__snapshots__/TimePicker.spec.js.snap
deleted file mode 100644
index a14596b..0000000
--- a/test/__snapshots__/TimePicker.spec.js.snap
+++ /dev/null
@@ -1,89 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<TimePicker /> accepts external \`id\` value 1`] = `
-<TextInput
-  id="ID"
-  inputClassName="timepicker"
-  options={
-    Object {
-      "autoClose": false,
-      "container": null,
-      "defaultTime": "now",
-      "duration": 350,
-      "fromNow": 0,
-      "i18n": Object {
-        "cancel": "Cancel",
-        "clear": "Clear",
-        "done": "Ok",
-      },
-      "onCloseEnd": null,
-      "onCloseStart": null,
-      "onOpenEnd": null,
-      "onOpenStart": null,
-      "onSelect": null,
-      "showClearBtn": false,
-      "twelveHour": true,
-      "vibrate": true,
-    }
-  }
-/>
-`;
-
-exports[`<TimePicker /> renders 1`] = `
-<TextInput
-  id="timepickermockId"
-  inputClassName="timepicker"
-  options={
-    Object {
-      "autoClose": false,
-      "container": null,
-      "defaultTime": "now",
-      "duration": 350,
-      "fromNow": 0,
-      "i18n": Object {
-        "cancel": "Cancel",
-        "clear": "Clear",
-        "done": "Ok",
-      },
-      "onCloseEnd": null,
-      "onCloseStart": null,
-      "onOpenEnd": null,
-      "onOpenStart": null,
-      "onSelect": null,
-      "showClearBtn": false,
-      "twelveHour": true,
-      "vibrate": true,
-    }
-  }
-/>
-`;
-
-exports[`<TimePicker /> renders with a label 1`] = `
-<TextInput
-  id="timepickermockId"
-  inputClassName="timepicker"
-  label="TimePicker label"
-  options={
-    Object {
-      "autoClose": false,
-      "container": null,
-      "defaultTime": "now",
-      "duration": 350,
-      "fromNow": 0,
-      "i18n": Object {
-        "cancel": "Cancel",
-        "clear": "Clear",
-        "done": "Ok",
-      },
-      "onCloseEnd": null,
-      "onCloseStart": null,
-      "onOpenEnd": null,
-      "onOpenStart": null,
-      "onSelect": null,
-      "showClearBtn": false,
-      "twelveHour": true,
-      "vibrate": true,
-    }
-  }
-/>
-`;