From ce8d204b0cd00050315c6ee417f7dbefb4732555 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Tue, 21 Apr 2020 23:06:47 -0300
Subject: [PATCH 1/2] Use title prop in container

---
 packages/fuselage/src/components/CheckBox/index.js   | 11 ++++++++++-
 .../fuselage/src/components/RadioButton/index.js     | 11 ++++++++++-
 .../fuselage/src/components/ToggleSwitch/index.js    | 12 +++++++++++-
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/packages/fuselage/src/components/CheckBox/index.js b/packages/fuselage/src/components/CheckBox/index.js
index 65896e4370..59a03362d7 100644
--- a/packages/fuselage/src/components/CheckBox/index.js
+++ b/packages/fuselage/src/components/CheckBox/index.js
@@ -11,6 +11,7 @@ export const CheckBox = forwardRef(function CheckBox({
   indeterminate,
   invisible,
   style,
+  title,
   onChange,
   ...props
 }, ref) {
@@ -26,7 +27,15 @@ 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}>
+  return <Box
+    is={Label}
+    componentClassName='rcx-check-box'
+    className={className}
+    hidden={hidden}
+    invisible={invisible}
+    style={style}
+    title={title}
+  >
     <Box is='input' componentClassName='rcx-check-box__input' ref={mergedRef} type='checkbox' onChange={handleChange} {...props} />
     <Box is='i' componentClassName='rcx-check-box__fake' aria-hidden='true' />
   </Box>;
diff --git a/packages/fuselage/src/components/RadioButton/index.js b/packages/fuselage/src/components/RadioButton/index.js
index c996d81395..ebcedcb064 100644
--- a/packages/fuselage/src/components/RadioButton/index.js
+++ b/packages/fuselage/src/components/RadioButton/index.js
@@ -8,9 +8,18 @@ export const RadioButton = forwardRef(function RadioButton({
   hidden,
   invisible,
   style,
+  title,
   ...props
 }, ref) {
-  return <Box is={Label} componentClassName='rcx-radio-button' className={className} hidden={hidden} invisible={invisible} style={style}>
+  return <Box
+    is={Label}
+    componentClassName='rcx-radio-button'
+    className={className}
+    hidden={hidden}
+    invisible={invisible}
+    style={style}
+    title={title}
+  >
     <Box is='input' componentClassName='rcx-radio-button__input' ref={ref} type='radio' {...props} />
     <Box is='i' componentClassName='rcx-radio-button__fake' aria-hidden='true' />
   </Box>;
diff --git a/packages/fuselage/src/components/ToggleSwitch/index.js b/packages/fuselage/src/components/ToggleSwitch/index.js
index 479d22c4bf..aafd199489 100644
--- a/packages/fuselage/src/components/ToggleSwitch/index.js
+++ b/packages/fuselage/src/components/ToggleSwitch/index.js
@@ -8,10 +8,20 @@ export const ToggleSwitch = forwardRef(function ToggleSwitch({
   hidden,
   invisible,
   style,
+  title,
   onClick,
   ...props
 }, ref) {
-  return <Box is={Label} componentClassName='rcx-toggle-switch' className={className} hidden={hidden} invisible={invisible} style={style} onClick={onClick}>
+  return <Box
+    is={Label}
+    componentClassName='rcx-toggle-switch'
+    className={className}
+    hidden={hidden}
+    invisible={invisible}
+    style={style}
+    title={title}
+    onClick={onClick}
+  >
     <Box is='input' componentClassName='rcx-toggle-switch__input' ref={ref} type='checkbox' {...props} />
     <Box is='i' componentClassName='rcx-toggle-switch__fake' aria-hidden='true' />
   </Box>;

From 8b805c6dd1057d1b44ae92984878bbc97c1a963e Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Tue, 21 Apr 2020 23:40:34 -0300
Subject: [PATCH 2/2] Direct only specific input props to input element

---
 .../fuselage/src/components/CheckBox/index.js | 65 +++++++++++++----
 .../src/components/RadioButton/index.js       | 70 ++++++++++++++----
 .../src/components/ToggleSwitch/index.js      | 72 ++++++++++++++-----
 3 files changed, 160 insertions(+), 47 deletions(-)

diff --git a/packages/fuselage/src/components/CheckBox/index.js b/packages/fuselage/src/components/CheckBox/index.js
index 59a03362d7..46c4228789 100644
--- a/packages/fuselage/src/components/CheckBox/index.js
+++ b/packages/fuselage/src/components/CheckBox/index.js
@@ -6,13 +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,
-  title,
+  name,
+  required,
+  tabIndex,
+  value,
+  qa,
+  'data-qa': dataQa,
   onChange,
+  onInput,
+  onInvalid,
   ...props
 }, ref) {
   const innerRef = useRef();
@@ -27,20 +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}
-    title={title}
-  >
-    <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,
 };
diff --git a/packages/fuselage/src/components/RadioButton/index.js b/packages/fuselage/src/components/RadioButton/index.js
index ebcedcb064..8b305c88be 100644
--- a/packages/fuselage/src/components/RadioButton/index.js
+++ b/packages/fuselage/src/components/RadioButton/index.js
@@ -1,26 +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,
-  title,
+  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}
-    title={title}
-  >
-    <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,
+};
diff --git a/packages/fuselage/src/components/ToggleSwitch/index.js b/packages/fuselage/src/components/ToggleSwitch/index.js
index aafd199489..9c8ca8f6f6 100644
--- a/packages/fuselage/src/components/ToggleSwitch/index.js
+++ b/packages/fuselage/src/components/ToggleSwitch/index.js
@@ -1,28 +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,
-  title,
-  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}
-    title={title}
-    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,
+};