fix(radio-option, checkbox, switch): move data-attributes to input (#423)

* chore: fix proptype warnings

* fix: move data attributes on toggle, radio and checkbox to their input

* chore: fix for typo

* chore: fix test proptype warnings

Author: montezume

src/components/inputs/async-creatable-select-input/async-creatable-select-input.spec.js

@@ -18,6 +18,9 @@ class TestComponent extends React.Component {
             props,
             ...rest
           ),
+    loadOptions: PropTypes.func,
+    defaultOptions: PropTypes.bool,
+    isSearchable: PropTypes.bool,
     onChange: PropTypes.func,
   };
   static defaultProps = {

src/components/inputs/async-select-input/async-select-input.spec.js

@@ -9,6 +9,8 @@ class TestComponent extends React.Component {
   static displayName = 'TestComponent';
   static propTypes = {
     id: PropTypes.string,
+    defaultOptions: PropTypes.bool.isRequired,
+    loadOptions: PropTypes.func.isRequired,
     value: (props, ...rest) =>
       props.isMulti
         ? PropTypes.arrayOf(PropTypes.object).isRequired(props, ...rest)

src/components/inputs/creatable-select-input/creatable-select-input.spec.js

@@ -18,6 +18,12 @@ class TestComponent extends React.Component {
             props,
             ...rest
           ),
+    options: PropTypes.arrayOf(
+      PropTypes.shape({
+        value: PropTypes.string,
+        label: PropTypes.string,
+      })
+    ),
     onChange: PropTypes.func,
   };
   static defaultProps = {

src/components/inputs/date-range-input/date-range-input.js

@@ -81,7 +81,9 @@ class DateRangeCalendar extends React.Component {
   static propTypes = {
     intl: PropTypes.shape({
       locale: PropTypes.string.isRequired,
+      formatMessage: PropTypes.func.isRequired,
     }).isRequired,
+    horizontalConstraint: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'scale']),
     value: PropTypes.arrayOf(PropTypes.string).isRequired,
     onChange: PropTypes.func.isRequired,
     onFocus: PropTypes.func,

src/components/inputs/date-time-input/date-time-input.js

@@ -56,7 +56,9 @@ class DateTimeInput extends React.Component {
   static propTypes = {
     intl: PropTypes.shape({
       locale: PropTypes.string.isRequired,
+      formatMessage: PropTypes.func.isRequired,
     }).isRequired,
+    horizontalConstraint: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'scale']),
     value: PropTypes.string.isRequired,
     onChange: PropTypes.func.isRequired,
     onFocus: PropTypes.func,

src/components/inputs/localized-money-input/localized-money-input.spec.js

@@ -10,7 +10,7 @@ class TestComponent extends React.Component {
   static propTypes = {
     id: PropTypes.string,
     value: PropTypes.objectOf(PropTypes.string).isRequired,
-    onChange: PropTypes.func,
+    handleChange: PropTypes.func,
     selectedCurrency: PropTypes.string.isRequired,
   };
   static defaultProps = {

src/components/inputs/select-input/select-input.spec.js

@@ -14,6 +14,12 @@ class TestComponent extends React.Component {
         ? PropTypes.arrayOf(PropTypes.string).isRequired(props, ...rest)
         : PropTypes.string(props, ...rest),
     onChange: PropTypes.func,
+    options: PropTypes.arrayOf(
+      PropTypes.shape({
+        value: PropTypes.string,
+        label: PropTypes.string,
+      })
+    ),
   };
   static defaultProps = {
     id: 'some-id',

src/components/inputs/time-input/time-input-body.js

@@ -59,6 +59,7 @@ export default class TimeInputBody extends React.Component {
     onClear: PropTypes.func,
     onChange: PropTypes.func.isRequired,
     onBlur: PropTypes.func.isRequired,
+    onFocus: PropTypes.func,
     placeholder: PropTypes.string,
     horizontalConstraint: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'scale']),
   };

src/components/internals/calendar-body/calendar-body.js

@@ -30,12 +30,24 @@ export default class CalendarBody extends React.PureComponent {
 
   static propTypes = {
     inputRef: PropTypes.object.isRequired,
+    icon: PropTypes.string,
     id: PropTypes.string,
+    inputProps: PropTypes.shape({
+      onBlur: PropTypes.func,
+      onFocus: PropTypes.func,
+    }),
+    toggleButtonProps: PropTypes.shape({
+      onBlur: PropTypes.func,
+      onFocus: PropTypes.func,
+    }),
     value: PropTypes.string,
     isDisabled: PropTypes.bool,
     isOpen: PropTypes.bool,
+    hasSelection: PropTypes.bool,
+    hasWarning: PropTypes.bool,
     hasError: PropTypes.bool,
     onClearPicker: PropTypes.func,
+    onClear: PropTypes.func,
     placeholder: PropTypes.string,
     horizontalConstraint: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'scale']),
   };

src/components/internals/calendar-menu/calendar-menu.js

@@ -11,6 +11,7 @@ export default class CalendarMenu extends Component {
     hasFooter: PropTypes.bool,
     hasError: PropTypes.bool,
     hasWarning: PropTypes.bool,
+    footer: PropTypes.node,
   };
   render() {
     return (

src/components/switches/checkbox/checkbox.js

@@ -52,7 +52,7 @@ export class Checkbox extends React.PureComponent {
 
   render() {
     return (
-      <div {...filterDataAttributes(this.props)}>
+      <div>
         <label
           htmlFor={this.state.id}
           className={classnames(styles.labelWrapper, {
@@ -94,6 +94,7 @@ export class Checkbox extends React.PureComponent {
               disabled={this.props.isDisabled}
               checked={this.props.isChecked && !this.props.isIndeterminate}
               type="checkbox"
+              {...filterDataAttributes(this.props)}
             />
           </Spacings.Inline>
         </label>

src/components/switches/radio/radio-option.js

@@ -31,7 +31,7 @@ export class Option extends React.PureComponent {
 
   render() {
     return (
-      <div {...filterDataAttributes(this.props)}>
+      <div>
         <label
           className={classnames(styles.labelWrapper, {
             [styles.labelWrapperDisabled]: this.props.isDisabled,
@@ -68,6 +68,7 @@ export class Option extends React.PureComponent {
               disabled={this.props.isDisabled}
               checked={this.props.isChecked}
               type="radio"
+              {...filterDataAttributes(this.props)}
             />
           </Spacings.Inline>
         </label>

src/components/switches/toggle/toggle.js

@@ -28,11 +28,9 @@ export class Toggle extends React.PureComponent {
         className={classnames(styles.labelWrapper, {
           [styles.labelWrapperDisabled]: this.props.isDisabled,
         })}
-        {...filterDataAttributes(this.props)}
       >
         <ToggleSwitch
           size={this.props.size}
-          isMouseOver={this.props.isMouseOver}
           isChecked={this.props.isChecked}
           isDisabled={this.props.isDisabled}
         />
@@ -44,6 +42,7 @@ export class Toggle extends React.PureComponent {
           disabled={this.props.isDisabled}
           checked={this.props.isChecked}
           type="checkbox"
+          {...filterDataAttributes(this.props)}
         />
       </label>
     );