fix: add focus / select styles to react-select components

sanity-io · Feb 14, 2021 · 5378162 · 5378162
1 parent 8c8a993
commit 5378162
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 50 deletions.
diff --git a/src/components/SearchFacetSearchable/index.tsx b/src/components/SearchFacetSearchable/index.tsx
@@ -91,7 +91,7 @@ const SearchFacetSearchable: FC<Props> = (props: Props) => {
             isClearable
             isSearchable
             menuPortalTarget={document.body}
-            name="tags-x"
+            name="tags"
             noOptionsMessage={() => 'No tags'}
             onChange={value => handleChange(value as ReactSelectOption)}
             options={allTagOptions}

diff --git a/src/styled/react-select/creatable.tsx b/src/styled/react-select/creatable.tsx
@@ -2,47 +2,67 @@ import {black, hues} from '@sanity/color'
 import {AddIcon, ChevronDownIcon, CloseIcon} from '@sanity/icons'
 import {Box, Card, Flex, Text, studioTheme} from '@sanity/ui'
 import {components} from 'react-select'
-import React from 'react'
+import React, {CSSProperties} from 'react'
 
 const themeDarkPrimaryBlue = studioTheme?.color?.dark?.primary?.spot?.blue
 const themeDarkPrimaryGray = studioTheme?.color?.dark?.primary?.spot?.gray
 const themeRadius = studioTheme?.radius
 const themeSpace = studioTheme?.space
 
 export const reactSelectStyles = {
-  control: (styles: any, {isDisabled}: {isDisabled: boolean}) => ({
+  control: (
+    styles: CSSProperties,
+    {isDisabled, isFocused}: {isDisabled: boolean; isFocused: boolean}
+  ) => {
+    let boxShadow = `inset 0 0 0 1px ${hues.gray[900].hex}`
+    if (isFocused) {
+      boxShadow = `inset 0 0 0 1px ${hues.gray[900].hex}, 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color) !important`
+    }
+
+    return {
+      ...styles,
+      background: isDisabled
+        ? studioTheme.color.dark.default.input.default.disabled.bg
+        : 'transparent',
+      color: 'white',
+      border: 'none',
+      borderRadius: themeRadius[2],
+      boxShadow,
+      minHeight: '35px',
+      outline: 'none',
+      transition: 'none',
+      '&:hover': {
+        boxShadow: `inset 0 0 0 1px ${studioTheme.color.dark.default.input.default.hovered.border}`
+      }
+    }
+  },
+  indicatorsContainer: (styles: CSSProperties, {isDisabled}: {isDisabled: boolean}) => ({
     ...styles,
-    backgroundColor: 'transparent',
-    color: 'white',
-    border: 'none',
-    borderRadius: themeRadius[2],
-    boxShadow: `inset 0 0 0 1px ${hues.gray[900].hex}`,
-    minHeight: '35px',
-    opacity: isDisabled ? 0.5 : 'inherit',
-    outline: 'none'
+    opacity: isDisabled ? 0.25 : 1
   }),
-  input: (styles: any) => ({
+  input: (styles: CSSProperties) => ({
     ...styles,
     color: 'white',
     marginLeft: themeSpace[2]
   }),
-  menuList: (styles: any) => ({
+  menuList: (styles: CSSProperties) => ({
     ...styles,
     maxHeight: '230px'
   }),
-  multiValue: (styles: any) => ({
+  multiValue: (styles: CSSProperties, {isDisabled}: {isDisabled: boolean}) => ({
     ...styles,
     backgroundColor: themeDarkPrimaryGray,
-    borderRadius: themeRadius[2]
+    borderRadius: themeRadius[2],
+    opacity: isDisabled ? 0.5 : 1
   }),
-  multiValueRemove: (styles: any) => ({
+  multiValueRemove: (styles: CSSProperties) => ({
     ...styles,
     '&:hover': {
       background: 'transparent',
       color: 'inherit'
     }
   }),
-  option: (styles: any, {isFocused}: {isFocused: boolean}) => ({
+  option: (styles: CSSProperties, {isFocused}: {isFocused: boolean}) => ({
     ...styles,
     backgroundColor: isFocused ? themeDarkPrimaryBlue : 'transparent',
     borderRadius: themeRadius[2],
@@ -53,11 +73,11 @@ export const reactSelectStyles = {
       color: black.hex
     }
   }),
-  placeholder: (styles: any) => ({
+  placeholder: (styles: CSSProperties) => ({
     ...styles,
     marginLeft: themeSpace[2]
   }),
-  valueContainer: (styles: any) => ({
+  valueContainer: (styles: CSSProperties) => ({
     ...styles,
     marginBottom: themeSpace[1],
     marginLeft: themeSpace[1],

diff --git a/src/styled/react-select/single.tsx b/src/styled/react-select/single.tsx
@@ -1,8 +1,8 @@
-import {black, hues} from '@sanity/color'
-import {AddIcon, CloseIcon} from '@sanity/icons'
-import {Box, Card, Flex, Text, studioTheme} from '@sanity/ui'
+import {black, hues, white} from '@sanity/color'
+import {CloseIcon} from '@sanity/icons'
+import {Box, Card, Text, studioTheme} from '@sanity/ui'
 import {components} from 'react-select'
-import React from 'react'
+import React, {CSSProperties} from 'react'
 
 const themeDarkPrimaryBlue = studioTheme?.color?.dark?.primary?.spot?.blue
 const themeDarkDefaultBaseBg = studioTheme?.color?.dark?.default?.base?.bg
@@ -11,34 +11,48 @@ const themeSpace = studioTheme?.space
 const themeTextSizes = studioTheme?.fonts?.text?.sizes
 
 export const reactSelectStyles = {
-  control: (styles: any, {isDisabled}: {isDisabled: boolean}) => ({
-    ...styles,
-    backgroundColor: themeDarkDefaultBaseBg,
-    color: 'white',
-    border: 'none',
-    borderRadius: themeRadius[2],
-    boxShadow: `inset 0 0 0 1px ${hues.gray[900].hex}`,
-    fontSize: themeTextSizes[1].fontSize,
-    minHeight: '25px',
-    opacity: isDisabled ? 0.5 : 'inherit',
-    outline: 'none'
-  }),
-  input: (styles: any) => ({
+  control: (
+    styles: CSSProperties,
+    {isDisabled, isFocused}: {isDisabled: boolean; isFocused: boolean}
+  ) => {
+    let boxShadow = `inset 0 0 0 1px ${hues.gray[900].hex}`
+    if (isFocused) {
+      boxShadow = `inset 0 0 0 1px ${hues.gray[900].hex}, 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color) !important`
+    }
+
+    return {
+      ...styles,
+      backgroundColor: themeDarkDefaultBaseBg,
+      color: white.hex,
+      border: 'none',
+      borderRadius: themeRadius[2],
+      boxShadow,
+      fontSize: themeTextSizes[1].fontSize,
+      minHeight: '25px',
+      opacity: isDisabled ? 0.5 : 'inherit',
+      outline: 'none',
+      transition: 'none',
+      '&:hover': {
+        boxShadow: `inset 0 0 0 1px ${studioTheme.color.dark.default.input.default.hovered.border}`
+      }
+    }
+  },
+  input: (styles: CSSProperties) => ({
     ...styles,
-    color: 'white',
+    color: white.hex,
     marginLeft: themeSpace[2]
   }),
-  menuList: (styles: any) => ({
+  menuList: (styles: CSSProperties) => ({
     ...styles,
     maxHeight: '146px',
     padding: 0
   }),
-  noOptionsMessage: (styles: any) => ({
+  noOptionsMessage: (styles: CSSProperties) => ({
     ...styles,
     fontSize: themeTextSizes[1].fontSize,
     lineHeight: '1em'
   }),
-  option: (styles: any, {isFocused}: {isFocused: boolean}) => ({
+  option: (styles: CSSProperties, {isFocused}: {isFocused: boolean}) => ({
     ...styles,
     backgroundColor: isFocused ? themeDarkPrimaryBlue : 'transparent',
     borderRadius: themeRadius[2],
@@ -51,18 +65,18 @@ export const reactSelectStyles = {
       color: black.hex
     }
   }),
-  placeholder: (styles: any) => ({
+  placeholder: (styles: CSSProperties) => ({
     ...styles,
     marginLeft: themeSpace[2],
     paddingBottom: '2px'
   }),
-  singleValue: (styles: any) => ({
+  singleValue: (styles: CSSProperties) => ({
     ...styles,
-    color: '#fff',
+    color: white.hex,
     lineHeight: '1em',
     paddingBottom: '1px'
   }),
-  valueContainer: (styles: any) => ({
+  valueContainer: (styles: CSSProperties) => ({
     ...styles,
     margin: 0,
     padding: 0
@@ -73,7 +87,7 @@ const ClearIndicator = (props: any) => {
   return (
     <components.ClearIndicator {...props}>
       <Box
-        paddingX={1}
+        paddingRight={1}
         style={{
           transform: 'scale(0.85)'
         }}
@@ -112,10 +126,11 @@ const Option = (props: any) => {
   return (
     <Box padding={1}>
       <components.Option {...props}>
-        <Flex align="center">
-          {props.data.__isNew__ && <AddIcon />}
-          {props.children}
-        </Flex>
+        <Box paddingY={1}>
+          <Text size={1} style={{color: 'inherit'}} textOverflow="ellipsis">
+            {props.children}
+          </Text>
+        </Box>
       </components.Option>
     </Box>
   )
@@ -124,7 +139,11 @@ const Option = (props: any) => {
 const SingleValue = (props: any) => {
   return (
     <components.SingleValue {...props}>
-      <Box paddingX={2}>{props.children}</Box>
+      <Box paddingLeft={2}>
+        <Text size={1} style={{color: 'inherit'}} textOverflow="ellipsis">
+          {props.children}
+        </Text>
+      </Box>
     </components.SingleValue>
   )
 }