fix(color-picker): Disable submit button when custom hex is invalid (#2328)

Fixes: #887

[category:Components]

Author: kennethjang34

modules/preview-react/color-picker/lib/ColorPicker.tsx

@@ -172,16 +172,21 @@ export const ColorPicker = ({
   ...elemProps
 }: ColorPickerProps) => {
   const [validHexValue, setValidHexValue] = React.useState('');
+  const [disabled, setDisabled] = React.useState(true);
   const [customHexValue, setCustomHexValue] = React.useState(
     isCustomColor(colorSet, value) ? value : ''
   );
 
   const onCustomHexChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setCustomHexValue(event.target.value);
     setValidHexValue('');
+    setDisabled(true);
   };
 
-  const onValidCustomHexChange = (validHexValue: string) => setValidHexValue(validHexValue);
+  const onValidCustomHexChange = (validHexValue: string) => {
+    setValidHexValue(validHexValue);
+    setDisabled(false);
+  };
 
   const onSubmit = (event: React.FormEvent) => {
     if (onSubmitClick) {
@@ -207,7 +212,12 @@ export const ColorPicker = ({
               showCheck={value === validHexValue || value === customHexValue}
             />
           </ColorInputAndLabel>
-          <CheckButton aria-label={submitLabel} icon={checkIcon} type="submit" />
+          <CheckButton
+            aria-label={submitLabel}
+            icon={checkIcon}
+            type="submit"
+            disabled={disabled}
+          />
         </ColorInputWrapper>
       )}
     </ColorPickerContainer>