Merge pull request #110 from HelixDesignSystem/fixes01

Choice Tile Updates
HelixDesignSystem · Sep 2, 2020 · a4e51d1 · a4e51d1
2 parents 2d1fd71 + 0a86b26
commit a4e51d1
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 13 deletions.
diff --git 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,

diff --git a/src/ChoiceTile/index.js b/src/ChoiceTile/index.js
@@ -17,19 +17,21 @@ 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}
  invalid={invalid?.toString()}
  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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,