fix(atoms): replace square modifier with width modifier

8base · Nov 1, 2018 · 36c6051 · 36c6051
1 parent 33cb80f
commit 36c6051
Show file tree

Hide file tree

Showing 6 changed files with 211 additions and 221 deletions.
diff --git a/src/atoms/dataEntry/Input/Input.js b/src/atoms/dataEntry/Input/Input.js
@@ -43,8 +43,8 @@ type InputProps = {
   errorText?: string,
   /** mask string in the react-input-mask format */
   mask?: string,
-  /** set input width to the equal height */
-  square?: boolean,
+  /** set custom input width in rem */
+  width?: number,
   /** callback to change input value */
   onChange?: (value?: string | ?number, event?: SyntheticInputEvent<HTMLInputElement>) => void,
   onFocus?: (?SyntheticFocusEvent<HTMLInputElement>) => void,
@@ -57,7 +57,6 @@ class Input extends PureComponent<InputProps> {
     autoComplete: false,
     hasError: false,
     hideErrorIndicator: false,
-    square: false,
     stretch: true,
     type: 'text',
     kind: 'bordered',
@@ -92,7 +91,7 @@ class Input extends PureComponent<InputProps> {
       onFocus,
       placeholder,
       rightIcon,
-      square,
+      width,
       stretch,
       type,
       value,
@@ -113,7 +112,7 @@ class Input extends PureComponent<InputProps> {
       onChange: this.onChange,
       onFocus,
       placeholder,
-      square,
+      width,
       type,
       value,
       insideRef,
@@ -123,7 +122,7 @@ class Input extends PureComponent<InputProps> {
     };
 
     return (
-      <InputWrapperTag { ...fp.omit(['onChange'], rest) } stretch={ stretch } square={ square } tagName="div">
+      <InputWrapperTag { ...fp.omit(['onChange'], rest) } stretch={ stretch } width={ width } tagName="div">
         <Choose>
           <When condition={ !mask }>
             <InputTag

diff --git a/src/atoms/dataEntry/Input/Input.stories.js b/src/atoms/dataEntry/Input/Input.stories.js
@@ -18,8 +18,8 @@ export default (asStory) => {
       .add('with stretch=false', () => (
         <Input name="input" stretch={ false } onChange={ () => null } />
       ))
-      .add('with square=true', () => (
-        <Input name="input" square onChange={ () => null } />
+      .add('with custom width', () => (
+        <Input name="input" width={ 5 } onChange={ () => null } />
       ))
       .add('with left icon', () => (
         <Input name="input" leftIcon="i" />

diff --git a/src/atoms/dataEntry/Input/Input.theme.js b/src/atoms/dataEntry/Input/Input.theme.js
@@ -36,12 +36,6 @@ const theme = createTheme(name, (colors: *): * => ({
     },
   },
 
-  inputSquare: {
-    width: '4rem',
-    textAlign: 'center',
-    padding: 0,
-  },
-
   inputError: {
     borderColor: `${colors.DANGER} !important`,
   },
@@ -64,7 +58,7 @@ const theme = createTheme(name, (colors: *): * => ({
 const InputWrapperTag = createStyledTag(`${name}Wrapper`, props => ({
   display: 'inline-flex',
   position: 'relative',
-  width: props.stretch && !props.square ? '100%' : 'auto',
+  width: props.stretch && !props.width ? '100%' : 'auto',
 }));
 
 const InputIndicatorTag = createStyledTag(`${name}Indicator`, props => ({
@@ -93,14 +87,13 @@ const InputRightIconTag = createStyledTag(`${name}RightIcon`, {
 });
 
 const getInputStyles = props => ({
-  width: '100%',
+  width: props.width ? `${props.width}rem` : '100%',
   outline: 'none',
   paddingLeft: props.hasLeftIcon ? '4rem' : '1rem',
   paddingRight: props.hasRightIcon ? '5rem' : '2rem',
 
   ...getThemeStyle(props, name).input,
   ...getThemeStyleByCond(props, name, 'inputError', props.hasError),
-  ...getThemeStyleByCond(props, name, 'inputSquare', props.square),
 
   backgroundColor: PALETTE[props.disabled ? 'LIGHT_GRAY5' : 'WHITE'],
 

diff --git a/src/atoms/dataEntry/InputField/InputField.js b/src/atoms/dataEntry/InputField/InputField.js
@@ -12,8 +12,8 @@ type InputFieldProps = {|
   stretch?: boolean,
   /** direction of the input with label */
   direction?: 'row' | 'column',
-  /** set input width to the equal height */
-  square?: boolean,
+  /** set custom input width */
+  width?: number,
   /** max symbols in the input value*/
   maxLength?: number,
   /** when true then don't show error label */

diff --git a/src/atoms/dataEntry/InputField/InputField.stories.js b/src/atoms/dataEntry/InputField/InputField.stories.js
@@ -35,8 +35,8 @@ export default (asStory) => {
       .add('with row direction and stretch=false', () => (
         <InputField direction="row" stretch={ false } label="Input" input={{ name: 'input', onChange }} />
       ))
-      .add('with square input', () => (
-        <InputField direction="row" stretch={ false } square label="Input" input={{ name: 'input', onChange }} />
+      .add('with custom width input', () => (
+        <InputField direction="row" stretch={ false } width={ 7 } label="Input" input={{ name: 'input', onChange }} />
       ))
       .add('with center align', () => (
         <InputField input={{ name: 'input', onChange }} align="center" />