Merge pull request #125 from heetch/form-control/uniformize-validation

Uniformize form controls validation style
heetch · Apr 6, 2020 · b38cbb3 · b38cbb3 · vercel · Apr 6, 2020
2 parents a782960 + 07c314b
commit b38cbb3
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 6 deletions.
diff --git a/packages/css/src/components/FileUploader.css b/packages/css/src/components/FileUploader.css
@@ -4,17 +4,30 @@
 }
 
 .f-FileUploader {
+  --text-color: var(--f-color-text--secondary);
+  --border-color: var(--f-color-element--tertiary);
+
   position: relative;
   width: 100%;
   flex-direction: column;
   height: var(--f-FileUploader-height);
   margin: var(--f-space--m) 0;
-  border: 1px dashed var(--f-color-element--tertiary);
+  border: 1px dashed var(--border-color);
   border-radius: var(--f-borderRadius--l);
-  color: var(--f-color-text--secondary);
+  color: var(--text-color);
   background-color: var(--f-color-element--primary);
 }
 
+.f-FileUploader.is-invalid {
+  --text-color: var(--f-color-element--error);
+  --border-color: var(--f-color-element--error);
+}
+
+.f-FileUploader.is-valid {
+  --text-color: var(--f-color-element--success);
+  --border-color: var(--f-color-element--success);
+}
+
 .f-FileUploader,
 .f-FileUploader-label {
   transition: all 0.15s ease-out;

diff --git a/packages/react/src/components/FileUploader/index.js b/packages/react/src/components/FileUploader/index.js
@@ -39,9 +39,11 @@ const FileUploader = React.forwardRef(
       onChange,
       translate,
       isLoading,
+      invalid: isInvalid,
       hasError,
       multiple,
       overrides,
+      valid: isValid,
       value,
       ...props
     },
@@ -80,6 +82,8 @@ const FileUploader = React.forwardRef(
           'has-error': hasError,
           'is-empty': !hasFile,
           'is-loading': isLoading,
+          'is-invalid': isInvalid,
+          'is-valid': isValid,
         })}
         ref={ref}
         {...props}
@@ -169,11 +173,13 @@ FileUploader.propTypes = {
   onChange: PropTypes.func.isRequired,
   translate: PropTypes.func,
   isLoading: PropTypes.bool,
+  invalid: PropTypes.bool,
   hasError: PropTypes.bool,
   multiple: PropTypes.bool,
   overrides: PropTypes.shape({
     input: PropTypes.shape({}),
   }),
+  valid: PropTypes.bool,
   value: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string.isRequired,
@@ -188,10 +194,12 @@ FileUploader.defaultProps = {
   translate: defaultTranslate,
   hasError: false,
   isLoading: false,
+  invalid: false,
   multiple: false,
   overrides: {
     input: {},
   },
+  valid: false,
   value: [],
 };
 

diff --git a/packages/react/src/components/FileUploader/index.stories.js b/packages/react/src/components/FileUploader/index.stories.js
@@ -32,18 +32,31 @@ stories.add('All states', () => (
 
     <Heading level={2}>With default value</Heading>
     <FileUploader
-      id='file-uploaders-default-value'
+      id='file-uploader-default-value'
       onChange={action('onChange')}
       value={[stubFile1]}
     />
 
     <Heading level={2}>With default value and multiple files</Heading>
     <FileUploader
-      id='file-uploaders-default-value-multiple'
+      id='file-uploader-default-value-multiple'
       onChange={action('onChange')}
       multiple
       value={[stubFile1, stubFile2]}
     />
+
+    <Heading level={2}>Validation</Heading>
+    <FileUploader
+      id='file-uploader-invalid'
+      onChange={action('onChange')}
+      invalid
+    />
+
+    <FileUploader
+      id='file-uploader-invalid'
+      onChange={action('onChange')}
+      valid
+    />
   </>
 ));
 

diff --git a/packages/react/src/components/ImageUploader/index.stories.js b/packages/react/src/components/ImageUploader/index.stories.js
@@ -34,18 +34,31 @@ stories.add('All states', () => (
 
     <Heading level={2}>With default value</Heading>
     <ImageUploader
-      id='image-uploaders-default-value'
+      id='image-uploader-default-value'
       onChange={action('onChange')}
       value={[stubFile1]}
     />
 
     <Heading level={2}>With default value and multiple files</Heading>
     <ImageUploader
-      id='image-uploaders-default-value-multiple'
+      id='image-uploader-default-value-multiple'
       onChange={action('onChange')}
       multiple
       value={[stubFile1, stubFile2]}
     />
+
+    <Heading level={2}>Validation</Heading>
+    <ImageUploader
+      id='image-uploader-invalid'
+      onChange={action('onChange')}
+      invalid
+    />
+
+    <ImageUploader
+      id='image-uploader-invalid'
+      onChange={action('onChange')}
+      valid
+    />
   </>
 ));
 

diff --git a/packages/react/src/components/Select/index.stories.js b/packages/react/src/components/Select/index.stories.js
@@ -33,6 +33,11 @@ stories.add('All states', () => (
         />
       </div>
     ))}
+
+    <Heading level={2}>Validation</Heading>
+
+    <Select invalid {...defaultProps()} />
+    <Select valid {...defaultProps()} />
   </>
 ));
 

diff --git a/packages/react/src/components/UploaderItem/index.stories.js b/packages/react/src/components/UploaderItem/index.stories.js
@@ -15,6 +15,7 @@ stories.add('Playground', () => (
       handleDelete={action('handleDelete')}
       file={{
         name: text('File name', 'doc.txt'),
+        type: 'text/plain',
       }}
     />
   </>
-Original file line number
+Diff line change
@@ Expand Up / @@ -33,6 +33,11 @@ stories.add('All states', () => ( @@
             />
           </div>
         ))}
+        <Heading level={2}>Validation</Heading>
+        <Select invalid {...defaultProps()} />
+        <Select valid {...defaultProps()} />
       </>
     ));
@@ Expand Down @@