fix input styles

airbytehq · Dec 2, 2022 · e3ef3fd · e3ef3fd
1 parent 3c6f979
commit e3ef3fd
Show file tree

Hide file tree

Showing 5 changed files with 434 additions and 10 deletions.
diff --git a/airbyte-webapp/src/components/ui/TagInput/TagInput.module.scss b/airbyte-webapp/src/components/ui/TagInput/TagInput.module.scss
@@ -3,6 +3,11 @@
 
 :export {
   backgroundColor: colors.$dark-blue-800;
+  inputBackgroundColor: colors.$grey-50;
+  focusedBorderColor: colors.$blue-400;
+  hoveredBorderColor: colors.$grey-100;
+  errorBorderColor: colors.$red-100;
+  errorHoveredBorderColor: colors.$red-300;
   fontColor: colors.$white;
   borderRadius: variables.$border-radius-md;
   paddingLeft: variables.$spacing-sm;

diff --git a/airbyte-webapp/src/components/ui/TagInput/TagInput.tsx b/airbyte-webapp/src/components/ui/TagInput/TagInput.tsx
@@ -1,6 +1,6 @@
 import uniqueId from "lodash/uniqueId";
 import { KeyboardEventHandler, useMemo, useState } from "react";
-import { ActionMeta, MultiValue, OnChangeValue } from "react-select";
+import { ActionMeta, GroupBase, MultiValue, OnChangeValue, StylesConfig } from "react-select";
 import CreatableSelect from "react-select/creatable";
 
 import styles from "./TagInput.module.scss";
@@ -9,9 +9,8 @@ const components = {
   DropdownIndicator: null,
 };
 
-const customStyles = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- react-select's typing is lacking here
-  multiValue: (provided: any) => ({
+const customStyles: StylesConfig<Tag, true, GroupBase<Tag>> = {
+  multiValue: (provided) => ({
     ...provided,
     maxWidth: "100%",
     display: "flex",
@@ -20,17 +19,29 @@ const customStyles = {
     borderRadius: `${styles.borderRadius}`,
     paddingLeft: `${styles.paddingLeft}`,
   }),
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- same as above
-  multiValueLabel: (provided: any) => ({
+  multiValueLabel: (provided) => ({
     ...provided,
     color: `${styles.fontColor}`,
     fontWeight: 500,
   }),
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- same as above
-  multiValueRemove: (provided: any) => ({
+  multiValueRemove: (provided) => ({
     ...provided,
     borderRadius: `${styles.borderRadius}`,
   }),
+  control: (provided, state) => {
+    const isInvalid = state.selectProps["aria-invalid"];
+    const regularBorderColor = isInvalid ? styles.errorBorderColor : "transparent";
+    const hoveredBorderColor = isInvalid ? styles.errorHoveredBorderColor : styles.hoveredBorderColor;
+    return {
+      ...provided,
+      backgroundColor: styles.inputBackgroundColor,
+      boxShadow: "none",
+      borderColor: state.isFocused ? styles.focusedBorderColor : regularBorderColor,
+      ":hover": {
+        borderColor: state.isFocused ? styles.focusedBorderColor : hoveredBorderColor,
+      },
+    };
+  },
 };
 
 interface Tag {
@@ -56,7 +67,7 @@ const generateStringFromTag = (tag: Tag): string => tag.label;
 
 const delimiters = [",", ";"];
 
-export const TagInput: React.FC<TagInputProps> = ({ onChange, fieldValue, name, disabled, id }) => {
+export const TagInput: React.FC<TagInputProps> = ({ onChange, fieldValue, name, disabled, id, error }) => {
   const tags = useMemo(() => fieldValue.map(generateTagFromString), [fieldValue]);
 
   // input value is a tag draft
@@ -120,6 +131,8 @@ export const TagInput: React.FC<TagInputProps> = ({ onChange, fieldValue, name,
         name={name}
         components={components}
         inputValue={inputValue}
+        placeholder=""
+        aria-invalid={Boolean(error)}
         isClearable
         isMulti
         onBlur={() => handleDelete}

diff --git a/airbyte-webapp/src/core/jsonSchema/schemaToYup.ts b/airbyte-webapp/src/core/jsonSchema/schemaToYup.ts
@@ -82,6 +82,7 @@ export const buildYupFormForJsonSchema = (
       if (typeof jsonSchema.items === "object" && !Array.isArray(jsonSchema.items)) {
         schema = yup
           .array()
+          .required("you need this!")
           .of(
             buildYupFormForJsonSchema(
               jsonSchema.items,