From bcaadf7fd463fc2a684d81cfe7c39bdefcc6f901 Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Fri, 28 Aug 2020 18:30:37 -0400
Subject: [PATCH 1/3] Choice tiles class name fix

---
 src/ChoiceTile/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ChoiceTile/index.js b/src/ChoiceTile/index.js
index 88e2ef2..d0342a8 100644
--- a/src/ChoiceTile/index.js
+++ b/src/ChoiceTile/index.js
@@ -20,7 +20,7 @@ const ChoiceTile = ({
   ...rest
 }) => {
   return (
-    <label className={classNames({ hxChoice: true, className })}>
+    <label className={classNames({ hxChoice: true }, className)}>
       <input
         checked={wcBool(checked)}
         disabled={disabled}

From 7c15b92257d5adba74dd86846c77107d6fb860b6 Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Tue, 1 Sep 2020 14:28:19 -0400
Subject: [PATCH 2/3] Add some style

---
 src/ChoiceTile/index.js   |  7 +++++--
 src/ChoiceTile/stories.js |  4 ++--
 src/Radio/index.js        |  5 +++--
 src/Search/index.js       |  4 +++-
 src/Select/index.js       |  4 +++-
 src/Text/index.js         | 16 ++++++++++++++--
 src/TextArea/index.js     |  5 +++--
 7 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/ChoiceTile/index.js b/src/ChoiceTile/index.js
index d0342a8..8807a00 100644
--- a/src/ChoiceTile/index.js
+++ b/src/ChoiceTile/index.js
@@ -17,10 +17,11 @@ const ChoiceTile = ({
   size,
   subdued,
   title,
+  style,
   ...rest
 }) => {
   return (
-    <label className={classNames({ hxChoice: true }, className)}>
+    <label className={classNames({ hxChoice: true }, className)} style={style}>
       <input
         checked={wcBool(checked)}
         disabled={disabled}
@@ -28,8 +29,9 @@ const ChoiceTile = ({
         name={name}
         onChange={onChange}
         type="radio"
+        {...rest}
       />
-      <hx-tile class={classNames({ hxSubdued: subdued, [SIZES[size]]: true })} {...rest}>
+      <hx-tile class={classNames({ hxSubdued: subdued, [SIZES[size]]: true })}>
         <hx-icon type="checkmark"></hx-icon>
         {icon && (
           <div className="hx-tile-icon">
@@ -47,6 +49,7 @@ ChoiceTile.propTypes = {
   checked: PropTypes.bool.isRequired,
   children: PropTypes.node,
   className: PropTypes.string,
+  style: PropTypes.object,
   disabled: PropTypes.bool,
   icon: PropTypes.string,
   invalid: PropTypes.bool,
diff --git a/src/ChoiceTile/stories.js b/src/ChoiceTile/stories.js
index 7051c5c..d6b3288 100644
--- a/src/ChoiceTile/stories.js
+++ b/src/ChoiceTile/stories.js
@@ -46,7 +46,7 @@ storiesOf('Choice Tile', module).add('All Knobs', () => {
         icon={icon}
         name="choiceTileDemo"
         onChange={action('onChange')}
-        style={{ width: 200 }}
+        style={{ width: 200, float: 'left' }}
         title={title || defaultTitle}
       >
         {<p>{description || defaultDescription}</p>}
@@ -55,7 +55,7 @@ storiesOf('Choice Tile', module).add('All Knobs', () => {
       <ChoiceTile
         icon="bell"
         name="choiceTileDemo"
-        style={{ marginLeft: 25, width: 200 }}
+        style={{ marginLeft: 25, width: 200, float: 'left' }}
         title="Other Choice"
       >
         {<p>{defaultDescription}</p>}
diff --git a/src/Radio/index.js b/src/Radio/index.js
index 164ec0a..74d5573 100644
--- a/src/Radio/index.js
+++ b/src/Radio/index.js
@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const Radio = ({ id, label, className, ...rest }) => {
+const Radio = ({ id, label, className, style, ...rest }) => {
   return (
-    <hx-radio-control class={className}>
+    <hx-radio-control class={className} style={style}>
       <input {...rest} id={id} type="radio" />
       <label htmlFor={id}>
         <hx-radio></hx-radio>
@@ -16,6 +16,7 @@ const Radio = ({ id, label, className, ...rest }) => {
 Radio.propTypes = {
   label: PropTypes.string.isRequired,
   className: PropTypes.string,
+  style: PropTypes.object,
   checked: PropTypes.bool,
   id: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
diff --git a/src/Search/index.js b/src/Search/index.js
index 9bbe9b9..b506e76 100644
--- a/src/Search/index.js
+++ b/src/Search/index.js
@@ -20,6 +20,7 @@ const Search = ({
   required,
   containerId,
   value,
+  style,
   ...rest
 }) => {
   /**
@@ -39,7 +40,7 @@ const Search = ({
   }, [value]);
 
   return (
-    <hx-search-control class={className} id={containerId}>
+    <hx-search-control class={className} id={containerId} style={style}>
       <input
         id={id}
         value={value}
@@ -69,6 +70,7 @@ const Search = ({
 
 Search.propTypes = {
   className: PropTypes.string,
+  style: PropTypes.object,
   clearLabel: PropTypes.string,
   label: PropTypes.string,
   id: PropTypes.string.isRequired,
diff --git a/src/Select/index.js b/src/Select/index.js
index ef59b46..f11a6a2 100644
--- a/src/Select/index.js
+++ b/src/Select/index.js
@@ -11,10 +11,11 @@ const Select = ({
   onChange,
   optional,
   required,
+  style,
   ...rest
 }) => {
   return (
-    <hx-select-control class={className}>
+    <hx-select-control class={className} style={style}>
       <select id={id} disabled={disabled} onChange={onChange} required={required} {...rest}>
         {children}
       </select>
@@ -37,6 +38,7 @@ const Select = ({
 Select.propTypes = {
   children: PropTypes.node.isRequired,
   className: PropTypes.string,
+  style: PropTypes.object,
   disabled: PropTypes.bool,
   id: PropTypes.string.isRequired,
   label: PropTypes.string,
diff --git a/src/Text/index.js b/src/Text/index.js
index f92dd9f..f20f7f2 100644
--- a/src/Text/index.js
+++ b/src/Text/index.js
@@ -2,9 +2,20 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
 
-const Text = ({ id, label, className, required, optional, children, prefix, suffix, ...rest }) => {
+const Text = ({
+  id,
+  label,
+  className,
+  required,
+  optional,
+  children,
+  prefix,
+  suffix,
+  style,
+  ...rest
+}) => {
   return (
-    <hx-text-control class={className}>
+    <hx-text-control class={className} style={style}>
       <input {...rest} id={id} required={required} type="text" />
       <label
         className={classnames({
@@ -26,6 +37,7 @@ const Text = ({ id, label, className, required, optional, children, prefix, suff
 Text.propTypes = {
   id: PropTypes.string.isRequired,
   className: PropTypes.string,
+  style: PropTypes.object,
   children: PropTypes.node,
   optional: PropTypes.bool,
   disabled: PropTypes.bool,
diff --git a/src/TextArea/index.js b/src/TextArea/index.js
index 6b57542..291390c 100644
--- a/src/TextArea/index.js
+++ b/src/TextArea/index.js
@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
 
-const TextArea = ({ id, label, className, required, optional, children, ...rest }) => {
+const TextArea = ({ id, label, className, required, optional, children, style, ...rest }) => {
   return (
-    <hx-textarea-control class={className}>
+    <hx-textarea-control class={className} style={style}>
       <textarea {...rest} id={id} required={required} />
       <label
         className={classnames({
@@ -23,6 +23,7 @@ const TextArea = ({ id, label, className, required, optional, children, ...rest
 TextArea.propTypes = {
   id: PropTypes.string.isRequired,
   className: PropTypes.string,
+  style: PropTypes.object,
   children: PropTypes.node,
   optional: PropTypes.bool,
   disabled: PropTypes.bool,

From 0a86b2626c22a943d17d6263f14e4f1d9f74b131 Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Tue, 1 Sep 2020 14:35:51 -0400
Subject: [PATCH 3/3] add style to checkbox.

---
 src/Checkbox/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Checkbox/index.js b/src/Checkbox/index.js
index 2a0d643..08706fb 100644
--- a/src/Checkbox/index.js
+++ b/src/Checkbox/index.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useRef, useEffect } from 'react';
 
-const Checkbox = ({ id, label, indeterminate, className, ...rest }) => {
+const Checkbox = ({ id, label, indeterminate, className, style, ...rest }) => {
   const inputRef = useRef();
   useEffect(() => {
     inputRef.current.indeterminate = indeterminate;
@@ -20,6 +20,7 @@ const Checkbox = ({ id, label, indeterminate, className, ...rest }) => {
 
 Checkbox.propTypes = {
   className: PropTypes.string,
+  style: PropTypes.object,
   checked: PropTypes.bool,
   id: PropTypes.string.isRequired,
   disabled: PropTypes.bool,