fix: Selection button props split between container and input elements (#207)

Author: tassoevan

packages/fuselage/src/components/CheckBox/index.js

@@ -6,12 +6,22 @@ import { Box } from '../Box';
 import { Label } from '../Label';
 
 export const CheckBox = forwardRef(function CheckBox({
-  className,
-  hidden,
+  autoComplete,
+  checked,
+  defaultChecked,
+  disabled,
+  form,
+  id,
   indeterminate,
-  invisible,
-  style,
+  name,
+  required,
+  tabIndex,
+  value,
+  qa,
+  'data-qa': dataQa,
   onChange,
+  onInput,
+  onInvalid,
   ...props
 }, ref) {
   const innerRef = useRef();
@@ -26,12 +36,46 @@ export const CheckBox = forwardRef(function CheckBox({
     onChange && onChange.call(innerRef.current, event);
   }, [innerRef, indeterminate, onChange]);
 
-  return <Box is={Label} componentClassName='rcx-check-box' className={className} hidden={hidden} invisible={invisible} style={style}>
-    <Box is='input' componentClassName='rcx-check-box__input' ref={mergedRef} type='checkbox' onChange={handleChange} {...props} />
+  return <Box is={Label} componentClassName='rcx-check-box' {...props}>
+    <Box
+      is='input'
+      componentClassName='rcx-check-box__input'
+      autoComplete={autoComplete}
+      checked={checked}
+      defaultChecked={defaultChecked}
+      disabled={disabled}
+      form={form}
+      id={id}
+      name={name}
+      required={required}
+      tabIndex={tabIndex}
+      type='checkbox'
+      value={value}
+      data-qa={dataQa || qa}
+      ref={mergedRef}
+      onChange={handleChange}
+      onInput={onInput}
+      onInvalid={onInvalid}
+    />
     <Box is='i' componentClassName='rcx-check-box__fake' aria-hidden='true' />
   </Box>;
 });
 
 CheckBox.propTypes = {
+  autoComplete: PropTypes.string,
+  checked: PropTypes.bool,
+  defaultChecked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  form: PropTypes.string,
+  id: PropTypes.string,
   indeterminate: PropTypes.bool,
+  name: PropTypes.string,
+  required: PropTypes.bool,
+  tabIndex: PropTypes.number,
+  value: PropTypes.string,
+  qa: PropTypes.string,
+  'data-qa': PropTypes.string,
+  onChange: PropTypes.func,
+  onInput: PropTypes.func,
+  onInvalid: PropTypes.func,
 };

packages/fuselage/src/components/RadioButton/index.js

@@ -1,17 +1,66 @@
+import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
 
 import { Box } from '../Box';
 import { Label } from '../Label';
 
 export const RadioButton = forwardRef(function RadioButton({
-  className,
-  hidden,
-  invisible,
-  style,
+  autoComplete,
+  checked,
+  defaultChecked,
+  disabled,
+  form,
+  id,
+  name,
+  required,
+  tabIndex,
+  value,
+  qa,
+  'data-qa': dataQa,
+  onChange,
+  onInput,
+  onInvalid,
   ...props
 }, ref) {
-  return <Box is={Label} componentClassName='rcx-radio-button' className={className} hidden={hidden} invisible={invisible} style={style}>
-    <Box is='input' componentClassName='rcx-radio-button__input' ref={ref} type='radio' {...props} />
+  return <Box is={Label} componentClassName='rcx-radio-button' {...props}>
+    <Box
+      is='input'
+      componentClassName='rcx-radio-button__input'
+      autoComplete={autoComplete}
+      checked={checked}
+      defaultChecked={defaultChecked}
+      disabled={disabled}
+      form={form}
+      id={id}
+      name={name}
+      required={required}
+      tabIndex={tabIndex}
+      type='radio'
+      value={value}
+      data-qa={dataQa || qa}
+      ref={ref}
+      onChange={onChange}
+      onInput={onInput}
+      onInvalid={onInvalid}
+    />
     <Box is='i' componentClassName='rcx-radio-button__fake' aria-hidden='true' />
   </Box>;
 });
+
+RadioButton.propTypes = {
+  autoComplete: PropTypes.string,
+  checked: PropTypes.bool,
+  defaultChecked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  form: PropTypes.string,
+  id: PropTypes.string,
+  name: PropTypes.string,
+  required: PropTypes.bool,
+  tabIndex: PropTypes.number,
+  value: PropTypes.string,
+  qa: PropTypes.string,
+  'data-qa': PropTypes.string,
+  onChange: PropTypes.func,
+  onInput: PropTypes.func,
+  onInvalid: PropTypes.func,
+};

packages/fuselage/src/components/ToggleSwitch/index.js

@@ -1,18 +1,66 @@
+import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
 
 import { Label } from '../Label';
 import { Box } from '../Box';
 
 export const ToggleSwitch = forwardRef(function ToggleSwitch({
-  className,
-  hidden,
-  invisible,
-  style,
-  onClick,
+  autoComplete,
+  checked,
+  defaultChecked,
+  disabled,
+  form,
+  id,
+  name,
+  required,
+  tabIndex,
+  value,
+  qa,
+  'data-qa': dataQa,
+  onChange,
+  onInput,
+  onInvalid,
   ...props
 }, ref) {
-  return <Box is={Label} componentClassName='rcx-toggle-switch' className={className} hidden={hidden} invisible={invisible} style={style} onClick={onClick}>
-    <Box is='input' componentClassName='rcx-toggle-switch__input' ref={ref} type='checkbox' {...props} />
+  return <Box is={Label} componentClassName='rcx-toggle-switch' {...props}>
+    <Box
+      is='input'
+      componentClassName='rcx-toggle-switch__input'
+      autoComplete={autoComplete}
+      checked={checked}
+      defaultChecked={defaultChecked}
+      disabled={disabled}
+      form={form}
+      id={id}
+      name={name}
+      required={required}
+      tabIndex={tabIndex}
+      type='checkbox'
+      value={value}
+      data-qa={dataQa || qa}
+      ref={ref}
+      onChange={onChange}
+      onInput={onInput}
+      onInvalid={onInvalid}
+    />
     <Box is='i' componentClassName='rcx-toggle-switch__fake' aria-hidden='true' />
   </Box>;
 });
+
+ToggleSwitch.propTypes = {
+  autoComplete: PropTypes.string,
+  checked: PropTypes.bool,
+  defaultChecked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  form: PropTypes.string,
+  id: PropTypes.string,
+  name: PropTypes.string,
+  required: PropTypes.bool,
+  tabIndex: PropTypes.number,
+  value: PropTypes.string,
+  qa: PropTypes.string,
+  'data-qa': PropTypes.string,
+  onChange: PropTypes.func,
+  onInput: PropTypes.func,
+  onInvalid: PropTypes.func,
+};