Merge pull request #194 from UgnisSoftware/UGN-371-3

UGN-371 bugfix - fix select component alignment issues

Author: JulitorK

src/components/Selects/MatchColumnSelect.tsx

@@ -17,6 +17,7 @@ export const MatchColumnSelect = ({ onChange, value, options, placeholder, name
     <Select<SelectOption, false>
       value={value || null}
       colorScheme="gray"
+      useBasicStyles
       onChange={onChange}
       placeholder={placeholder}
       options={options}

src/components/Selects/TableSelect.tsx

@@ -17,6 +17,7 @@ export const TableSelect = ({ onChange, value, options }: Props) => {
   return (
     <Select<SelectOption, false>
       autoFocus
+      useBasicStyles
       size="sm"
       value={value}
       onChange={onChange}

src/theme.ts

@@ -217,44 +217,16 @@ export const themeOverrides = {
           },
         },
         select: {
-          dropdownIndicator: (provided) => ({
-            ...provided,
-            background: "none",
-            border: "none",
-            p: 0,
-            w: "40px",
-            color: "textColor",
-          }),
           control: (provided) => ({
             ...provided,
-            background: "none",
-            borderRadius: "6px",
-            p: 0,
-            // _focus, _hover, _invalid, _readonly pseudoselectors can be used here for alternate border colors
-            _focus: undefined,
-          }),
-          input: (provided) => ({
-            ...provided,
-            background: "none",
-            border: "none",
-            p: 0,
-          }),
-          indicatorSeparator: (provided) => ({
-            ...provided,
-            opacity: 0,
-          }),
-          singleValue: (provided) => ({
-            ...provided,
-            ml: 0,
-            mr: 0,
-          }),
-          placeholder: (provided) => ({
-            ...provided,
-            color: "inactiveColor",
-          }),
-          valueContainer: (provided) => ({
-            ...provided,
-            color: "textColor",
+            borderColor: "border",
+            _hover: {
+              borderColor: "border",
+            },
+            ["&[data-focus-visible]"]: {
+              borderColor: "border",
+              boxShadow: "none",
+            },
           }),
           menu: (provided) => ({
             ...provided,
@@ -264,12 +236,12 @@ export const themeOverrides = {
           menuList: (provided) => ({
             ...provided,
             bg: "background",
-            minW: "initial",
+            borderColor: "border",
           }),
           option: (provided, state) => ({
             ...provided,
             color: "textColor",
-            bg: state.isSelected || state.isFocused ? "highlight" : provided.bg,
+            bg: state.isSelected || state.isFocused ? "highlight" : "background",
             overflow: "hidden",
             textOverflow: "ellipsis",
             display: "block",
@@ -278,6 +250,14 @@ export const themeOverrides = {
               bg: "highlight",
             },
           }),
+          placeholder: (provided) => ({
+            ...provided,
+            color: "inactiveColor",
+          }),
+          noOptionsMessage: (provided) => ({
+            ...provided,
+            color: "inactiveColor",
+          }),
         } as ChakraStylesConfig<SelectOption>,
       },
     },
@@ -288,58 +268,37 @@ export const themeOverrides = {
           fontSize: "3xl",
         },
         select: {
-          dropdownIndicator: (provided) => ({
-            ...provided,
-            background: "none",
-            border: "none",
-            p: 0,
-            w: "40px",
-          }),
-          control: (provided) => ({
-            ...provided,
-            background: "none",
-            border: "none",
-            p: 0,
-            _focus: undefined,
-          }),
-          input: (provided) => ({
-            ...provided,
-            background: "none",
-            border: "none",
-            p: 0,
-          }),
-          indicatorSeparator: (provided) => ({
-            ...provided,
-            opacity: 0,
-          }),
-          singleValue: (provided) => ({
-            ...provided,
-            marginInlineStart: 0,
-          }),
           valueContainer: (provided) => ({
             ...provided,
-            p: 0,
-            paddingInlineStart: 2,
-            color: "gray.400",
+            py: 0,
+            px: 1.5,
           }),
+          inputContainer: (provided) => ({ ...provided, py: 0 }),
+          control: (provided) => ({ ...provided, border: "none" }),
+          input: (provided) => ({ ...provided, color: "textColor" }),
           menu: (provided) => ({
             ...provided,
             p: 0,
             mt: 0,
           }),
           menuList: (provided) => ({
             ...provided,
-            minW: "initial",
+            bg: "background",
+            borderColor: "border",
           }),
           option: (provided, state) => ({
             ...provided,
-            color: state.isSelected ? "gray.900" : provided.color,
-            bg: state.isSelected || state.isFocused ? "secondaryBackground" : provided.bg,
+            color: "textColor",
+            bg: state.isSelected || state.isFocused ? "highlight" : "background",
             overflow: "hidden",
             textOverflow: "ellipsis",
             display: "block",
             whiteSpace: "nowrap",
           }),
+          noOptionsMessage: (provided) => ({
+            ...provided,
+            color: "inactiveColor",
+          }),
         } as ChakraStylesConfig<SelectOption>,
       },
     },