Autocomplete style improvements (#221)

* style: Autocomplete style improvements * chore: add changeset * fix: blur on select + style fixes * fix: grays on hover * fix: remove timerange from top values
propeldata · Aug 30, 2024 · 1356f97 · 1356f97
1 parent 1dd0ff4
commit 1356f97
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 27 deletions.
diff --git a/.changeset/famous-seas-tap.md b/.changeset/famous-seas-tap.md
@@ -0,0 +1,6 @@
+---
+'@propeldata/ui-kit': minor
+---
+
+- Autocomplete component styles will be consistent with Select component
+- Autocomplete will be clearable and expose a `disableClearable` prop to disable the feature
diff --git a/packages/ui-kit/src/components/Autocomplete/Autocomplete.module.scss b/packages/ui-kit/src/components/Autocomplete/Autocomplete.module.scss
@@ -1,7 +1,7 @@
 @use '../../themes/tokens/typography';
 
 .rootAutocomplete {
-  @extend %fontSize2;
+  @extend %fontSize1;
 
   border-radius: max(var(--propel-radius-2), var(--propel-radius-full));
   background-color: var(--propel-color-background);
@@ -12,13 +12,18 @@
   overflow: hidden;
   transition: all 100ms;
   box-sizing: border-box;
+  font-weight: var(--propel-font-weight-medium);
 
   transition: background-color var(--propel-transition-ease-time) ease,
     border-color var(--propel-transition-ease-time) ease, color var(--propel-transition-ease-time) ease;
 
   &:hover {
     background-color: var(--propel-gray-a2);
     border-color: var(--propel-gray-10);
+
+    outline: none;
+    box-shadow: 0 0 0 3px var(--propel-accent-a4);
+    border-color: var(--propel-accent-8);
   }
 }
 
@@ -31,6 +36,7 @@
 .autocompleteInput {
   @extend %fontSize2;
 
+  font-weight: var(--propel-font-weight-medium);
   background: inherit;
   border: none;
   border-radius: inherit;
@@ -53,23 +59,36 @@
   align-items: center;
 }
 
-.autocompleteList {
-  @extend %fontSize2;
-
-  box-sizing: border-box;
-  padding: var(--propel-space-1);
-  margin: var(--propel-space-1) 0;
-  width: 100%;
-  border-radius: max(var(--propel-radius-2), var(--propel-radius-full));
-  overflow: auto;
-  outline: 0px;
-  max-height: var(--propel-component-height);
+.popper {
   z-index: 9999;
+  padding: var(--propel-space-3);
   background-color: var(--propel-color-background);
-  border: 1px solid var(--propel-gray-6);
+  border-radius: max(var(--propel-radius-2), var(--propel-radius-5));
+  border-width: 1px;
+  border-color: var(--propel-gray-6);
+  border-style: solid;
+  color: var(--propel-gray-11);
+  display: flex;
+  min-width: fit-content;
   box-shadow: var(--propel-shadow-5);
+  margin-top: var(--propel-space-3) !important;
+
+  ul {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    list-style-type: none;
+  }
+}
+
+.autocompleteList {
+  @extend %fontSize2;
 
   li {
+    font-weight: var(--propel-font-weight-medium);
+
     list-style: none;
     padding: var(--propel-space-2);
     border-radius: max(var(--propel-radius-2), var(--propel-radius-full));
@@ -79,17 +98,22 @@
       border-bottom: none;
     }
 
+    &[class*='Mui-focused'] {
+      background-color: var(--propel-gray-3);
+    }
+
     &:hover {
-      background-color: var(--propel-gray-2);
       cursor: pointer;
     }
 
-    &[class^='Mui-focused'] {
-      background-color: var(--propel-accent-11);
+    &:hover:not([class*='Mui-focused']) {
+      background-color: var(--propel-gray-2);
     }
 
     &[aria-selected='true'] {
-      background-color: var(--propel-gray-3);
+      &[class*='Mui-focused'] {
+        background-color: var(--propel-gray-3)
+      }
     }
   }
 }
@@ -98,3 +122,26 @@
   text-overflow: ellipsis;
   overflow: hidden;
 }
+
+
+.clearButton {
+  outline: 0;
+  box-shadow: none;
+  border: 0;
+  border-radius: 4px;
+  background-color: transparent;
+  align-self: center;
+  padding: 0 2px;
+
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    background-color: var(--propel-accent-6);
+    cursor: pointer;
+  }
+
+  & > svg {
+    transform: scale(0.9);
+  }
+}
diff --git a/packages/ui-kit/src/components/Autocomplete/Autocomplete.tsx b/packages/ui-kit/src/components/Autocomplete/Autocomplete.tsx
@@ -10,6 +10,7 @@ import { useForwardedRefCallback } from '../../helpers'
 import { useParsedComponentProps } from '../../themes'
 import { ChevronDownIcon } from '../Icons/ChevronDown'
 import { ChevronUpIcon } from '../Icons/ChevronUp'
+import { CloseIcon } from '../Icons/Close'
 import { useSetupTheme } from '../ThemeProvider'
 import componentStyles from './Autocomplete.module.scss'
 import { AutocompleteOption, AutocompleteProps } from './Autocomplete.types'
@@ -33,6 +34,7 @@ export const Autocomplete = React.forwardRef(function Autocomplete(
     listClassname,
     optionStyle,
     optionClassname,
+    disableClearable = false,
     ...rest
   } = props
 
@@ -45,11 +47,13 @@ export const Autocomplete = React.forwardRef(function Autocomplete(
     getListboxProps,
     getOptionProps,
     id,
+    dirty,
     popupOpen,
     focused,
     anchorEl,
     setAnchorEl,
-    groupedOptions
+    groupedOptions,
+    getClearProps
   } = useAutocomplete({
     ...props,
     componentName: 'Autocomplete',
@@ -66,7 +70,8 @@ export const Autocomplete = React.forwardRef(function Autocomplete(
         return option.value
       }
       return ''
-    }
+    },
+    blurOnSelect: true
   })
 
   const { componentContainer, setRef } = useForwardedRefCallback(ref)
@@ -76,6 +81,8 @@ export const Autocomplete = React.forwardRef(function Autocomplete(
     ...themeSettings
   })
 
+  const hasClearIcon = !disableClearable && !disabled && dirty && !readOnly
+
   return (
     <div {...parsedPropsWithoutRest} className={className}>
       <div
@@ -110,6 +117,11 @@ export const Autocomplete = React.forwardRef(function Autocomplete(
           }}
           style={{ width: '100%' }}
         />
+        {hasClearIcon && (
+          <button {...getClearProps()} className={componentStyles.clearButton}>
+            <CloseIcon />
+          </button>
+        )}
         {props.options.length > 0 && (
           <Button
             {...getPopupIndicatorProps()}
@@ -128,6 +140,7 @@ export const Autocomplete = React.forwardRef(function Autocomplete(
           slots={{
             root: 'div'
           }}
+          className={componentStyles.popper}
           modifiers={[
             { name: 'flip', enabled: false },
             { name: 'preventOverflow', enabled: false }
@@ -140,7 +153,11 @@ export const Autocomplete = React.forwardRef(function Autocomplete(
         >
           <ul
             {...getListboxProps()}
-            className={classnames(componentStyles.autocompleteList, listClassname)}
+            className={classnames(
+              componentStyles.autocompleteList,
+              ...(getListboxProps().className ?? ''),
+              listClassname
+            )}
             style={{ ...getListboxProps().style, ...listStyle }}
           >
             {groupedOptions.map((option, index) => {
@@ -154,6 +171,7 @@ export const Autocomplete = React.forwardRef(function Autocomplete(
                 <li
                   key={index}
                   {...optionProps}
+                  onMouseMove={() => {}} // we need to override `onMouseMove` from `optionProps` to prevent elements being focused by hover
                   className={classnames(componentStyles.autoCompleteOption, optionProps.className, optionClassname)}
                   style={{ ...optionProps.style, ...optionStyle }}
                 >

diff --git a/packages/ui-kit/src/components/Autocomplete/Autocomplete.types.ts b/packages/ui-kit/src/components/Autocomplete/Autocomplete.types.ts
@@ -12,7 +12,7 @@ export interface AutocompleteOption {
 
 export interface AutocompleteProps
   extends ThemeSettingProps,
-    UseAutocompleteProps<string | AutocompleteOption, false, false, boolean> {
+    UseAutocompleteProps<string | AutocompleteOption, false, boolean, boolean> {
   className?: string
   placeholder?: string
 

diff --git a/packages/ui-kit/src/hooks/useTopValues/useTopValues.ts b/packages/ui-kit/src/hooks/useTopValues/useTopValues.ts
@@ -1,4 +1,3 @@
-import { useFilters } from '../../components/FilterProvider'
 import { TopValuesQueryProps } from '../../components/TopValues/TopValues.types'
 import { PROPEL_GRAPHQL_API_ENDPOINT, TimeRangeInput, TopValuesQuery, useTopValuesQuery } from '../../graphql'
 import { UseQueryProps } from '../types/Query.types'
@@ -16,7 +15,7 @@ export const useTopValues = ({
   accessToken: accessTokenFromProp,
   propelApiUrl,
   metric,
-  timeRange: timeRangeProp,
+  timeRange,
   columnName,
   dataPool,
   maxValues,
@@ -34,10 +33,6 @@ export const useTopValues = ({
     error: accessTokenError
   } = useAccessToken()
 
-  const { timeRange: timeRangeFromProvider } = useFilters()
-
-  const timeRange = timeRangeProp ?? timeRangeFromProvider?.params
-
   // Get access token first from props, then if it is not provided via prop get it from provider
   const accessToken = accessTokenFromProp ?? accessTokenFromProvider