feat(global): add missing disabled states

e2e/__tests__/radio.test.js

@@ -3,6 +3,7 @@ import { baisy } from '../setup/TestSuiter';
 
 const SUITES = [
   baisy.suite('Components/RadioGroupField', 'default'),
+  baisy.suite('Components/RadioGroupField', 'disabled'),
   baisy.suite('Components/RadioGroupField', 'with error'),
 ];
 

e2e/__tests__/text-area.test.js

@@ -11,6 +11,7 @@ const SUITES = [
     }),
   baisy.suite('Components/TextArea', 'without value'),
   baisy.suite('Components/TextArea', 'with placeholder'),
+  baisy.suite('Components/TextArea', 'with disabled'),
 ];
 
 

src/components/DateInput/DateInput.js

@@ -16,6 +16,7 @@ type DateInputProps = {
   withPortal?: boolean,
   stretch?: boolean,
   clearable?: boolean,
+  disabled?: boolean,
   placeholder?: string,
 };
 
@@ -121,14 +122,14 @@ class DateInput extends React.Component<DateInputProps, DateInputState> {
   render() {
     const collectedProps = this.collectProps();
 
-    const { value, withTime, withPortal, stretch, onChange, clearable, placeholder, ...rest } = this.props;
+    const { value, withTime, withPortal, stretch, onChange, clearable, disabled, placeholder, ...rest } = this.props;
 
     const { textValue, isOpen } = this.state;
     const mask = withTime ? utils.DATETIME_MASK : utils.DATE_MASK;
 
     return (
       <Dropdown
-        isOpen={ isOpen }
+        isOpen={ isOpen && !disabled }
         stretch={ stretch }
         onCloseDropdown={ this.close }
         onOpenDropdown={ this.open }
@@ -142,6 +143,7 @@ class DateInput extends React.Component<DateInputProps, DateInputState> {
             onChange={ this.onChangeText }
             onBlur={ this.onBlur }
             clearable={ clearable }
+            disabled={ disabled }
           />
         </Dropdown.Head>
         <Dropdown.Body withPortal={ withPortal } modifiers={{

src/components/DateInput/DateInput.stories.js

@@ -24,6 +24,9 @@ export default (asStory) => {
             withTime
           />
         </StateContainer>
+        <StateContainer value={ null }>
+          <DateInput placeholder="mm/dd/yyyy" disabled />
+        </StateContainer>
       </Column>
     ));
   });

src/components/DateInput/DateInputValue.js

@@ -10,6 +10,7 @@ type DateInputValueProps = {
   value: ?string,
   mask: string,
   clearable?: boolean,
+  disabled?: boolean,
 };
 
 const DateInputValue = ({ value, onChange, ...props }: DateInputValueProps) => (

src/components/Radio/RadioGroup.js

@@ -21,6 +21,8 @@ type RadioProps = {
   hasError?: boolean,
   /** options to define radio items */
   options?: Array<({ value: any, label: string })>,
+  /** disabled */
+  disabled?: boolean,
 }
 
 class RadioGroup extends PureComponent<RadioProps> {
@@ -55,7 +57,7 @@ class RadioGroup extends PureComponent<RadioProps> {
   }
 
   render() {
-    const { children, value, direction, gap, onChange, hasError, ...rest } = this.props;
+    const { children, value, direction, gap, onChange, hasError, disabled, ...rest } = this.props;
 
     return (
       <FlexLayout { ...rest } direction={ direction } gap={ gap }>
@@ -66,6 +68,7 @@ class RadioGroup extends PureComponent<RadioProps> {
               selectedValue: value,
               name: this.getGroupName(),
               hasError,
+              ...(disabled ? { disabled } : {}),
             }))
         }
       </FlexLayout>

src/components/RadioGroupField/RadioGroupField.js

@@ -22,6 +22,8 @@ type RadioGroupFieldProps = {
   direction?: 'row' | 'column',
   /** options to define radio items */
   options?: Array<({ value: any, label: string })>,
+  /** disabled */
+  disabled?: boolean,
 };
 
 const RadioGroupField = ({
@@ -32,6 +34,7 @@ const RadioGroupField = ({
   input,
   meta,
   options,
+  disabled,
   ...rest
   }: RadioGroupFieldProps) => {
   const { name, value, onChange } = input;
@@ -48,6 +51,7 @@ const RadioGroupField = ({
         onChange={ onChange }
         options={ options }
         value={ value }
+        disabled={ disabled }
       >
         { children }
       </Radio.Group>

src/components/RadioGroupField/RadioGroupField.stories.js

@@ -3,14 +3,20 @@ import React from 'react';
 export default (asStory) => {
   asStory('Components/RadioGroupField', module, (story, { RadioGroupField, Radio }) => {
     story
-
       .add('default', () => (
         <RadioGroupField direction="row" input={{ value: 1 }} meta={{ }}>
           <Radio.Item label="Radio" value={ 1 } />
           <Radio.Item label="Radio" value={ 2 } />
           <Radio.Item label="Radio" value={ 3 } />
         </RadioGroupField>
       ))
+      .add('disabled', () => (
+        <RadioGroupField direction="row" input={{ value: 1 }} meta={{ }} disabled>
+          <Radio.Item label="Radio" value={ 1 } />
+          <Radio.Item label="Radio" value={ 2 } />
+          <Radio.Item label="Radio" value={ 3 } />
+        </RadioGroupField>
+      ))
       .add('with error', () => (
         <RadioGroupField direction="row" input={{ }} meta={{ error: 'Required', touched: true }}>
           <Radio.Item label="Radio" value={ 1 } />

src/components/Select/Select.js

@@ -32,10 +32,10 @@ type SelectPropsFromHOCs = {|
 |}
 
 const customStyles = ({ hasError, zIndex = Z_INDEX.DROPDOWN, COLORS }) => ({
-  control: (style, { isFocused }) => ({
+  control: (style, { isFocused, isDisabled }) => ({
     ...style,
     minHeight: '36px',
-    backgroundColor: COLORS.WHITE,
+    backgroundColor: isDisabled ? COLORS.LIGHT_GRAY5 : COLORS.WHITE,
     borderColor: hasError ? COLORS.DANGER : (isFocused ? COLORS.PRIMARY : COLORS.PRIMARY_BORDER_COLOR),
     boxShadow: null,
     '&:hover': {

src/components/Select/Select.stories.js

@@ -57,6 +57,9 @@ export default (asStory) => {
               multiple
             />
           </StateContainer>
+          <StateContainer value={ null }>
+            <Select name="name" placeholder="Select an option" options={ OPTIONS } disabled />
+          </StateContainer>
         </Column>
       ));
   });

src/components/SelectField/SelectField.stories.js

@@ -25,6 +25,9 @@ export default (asStory) => {
           <StateContainer value={ [OPTIONS[1].value, OPTIONS[2].value] } withForm>
             <SelectField label="Multiple select" name="name" placeholder="Select an option" options={ OPTIONS } multiple />
           </StateContainer>
+          <StateContainer value={ [OPTIONS[1].value, OPTIONS[2].value] } withForm>
+            <SelectField label="Multiple select" name="name" placeholder="Select an option" options={ OPTIONS } disabled />
+          </StateContainer>
         </Column>
       ));
   });

src/components/TextArea/TextArea.stories.js

@@ -11,6 +11,9 @@ export default (asStory) => {
       ))
       .add('with placeholder', () => (
         <TextArea name="input" placeholder="placeholder" onChange={ () => null } cols={ 100 } rows={ 5 } />
+      ))
+      .add('with disabled', () => (
+        <TextArea name="input" placeholder="placeholder" onChange={ () => null } cols={ 100 } rows={ 5 } disabled />
       ));
   });
 };

src/components/TextArea/TextArea.theme.js

@@ -4,7 +4,7 @@ import { createThemeTag } from '../../theme/createThemeTag';
 const name = 'textArea';
 
 const [TextAreaTag, theme] = createThemeTag(name, ({ COLORS, SIZES }: *) => ({
-  root: {
+  root: (props) => ({
     outline: 'none',
     border: `1px solid ${COLORS.PRIMARY_BORDER_COLOR}`,
     borderRadius: SIZES.MAIN_BORDER_RADIUS,
@@ -14,10 +14,14 @@ const [TextAreaTag, theme] = createThemeTag(name, ({ COLORS, SIZES }: *) => ({
     fontWeight: 400,
     padding: '8px',
 
+    backgroundColor: (props.disabled || props.readOnly)
+      ? COLORS.LIGHT_GRAY5
+      : COLORS.WHITE,
+
     '&::placeholder': {
       color: COLORS.PLACEHOLDER_COLOR,
     },
-  },
+  }),
   modifiers: {
     stretch: {
       height: '100%',

src/components/TextAreaField/TextAreaField.stories.js

@@ -11,6 +11,9 @@ export default (asStory) => {
       ))
       .add('with placeholder', () => (
         <TextAreaField label="Area" input={{ name: 'input', onChange: () => null }} placeholder="placeholder" />
+      ))
+      .add('with disabled', () => (
+        <TextAreaField label="Area" input={{ name: 'input', onChange: () => null }} placeholder="placeholder" disabled />
       ));
   });
 };