fix: fix minor visual issue with tag search facet text cropping desce…

…nders
sanity-io · Feb 15, 2021 · 0bd0249 · 0bd0249
1 parent b457fd6
commit 0bd0249
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 16 deletions.
diff --git a/src/components/PickedBar/index.tsx b/src/components/PickedBar/index.tsx
@@ -1,5 +1,5 @@
 import {hues} from '@sanity/color'
-import {Button, Flex, Label} from '@sanity/ui'
+import {Box, Button, Flex, Label} from '@sanity/ui'
 import pluralize from 'pluralize'
 import React, {FC} from 'react'
 import {useDispatch} from 'react-redux'
@@ -39,35 +39,33 @@ const PickedBar: FC = () => {
       }}
     >
       <Flex align="center">
-        <Label
-          size={0}
-          style={{
-            color: 'inherit'
-          }}
-        >
+        <Label size={0} style={{color: 'inherit'}}>
           {assetsPicked.length} {pluralize('asset', assetsPicked.length)} selected
         </Label>
 
         {/* Deselect button */}
-        <Flex marginLeft={4} marginRight={3}>
+        <Flex marginLeft={4} marginRight={0}>
           <Button
             mode="bleed"
             onClick={handlePickClear}
             style={{background: 'none', boxShadow: 'none'}}
           >
-            <Label size={0}>Deselect</Label>
+            <Box padding={2}>
+              <Label size={0}>Deselect</Label>
+            </Box>
           </Button>
         </Flex>
 
         {/* Delete button */}
         <Button
-          fontSize={1}
           mode="bleed"
           onClick={handleDeletePicked}
           style={{background: 'none', boxShadow: 'none'}}
           tone="critical"
         >
-          <Label size={0}>Delete</Label>
+          <Box padding={2}>
+            <Label size={0}>Delete</Label>
+          </Box>
         </Button>
       </Flex>
     </Flex>

diff --git a/...omponents/SearchFacetSearchable/index.tsx → src/components/SearchFacetTags/index.tsx b/...omponents/SearchFacetSearchable/index.tsx → src/components/SearchFacetTags/index.tsx
@@ -17,7 +17,7 @@ type Props = {
   facet: SearchFacetInputSearchableProps
 }
 
-const SearchFacetSearchable: FC<Props> = (props: Props) => {
+const SearchFacetTags: FC<Props> = (props: Props) => {
   const {facet} = props
 
   // Redux
@@ -105,4 +105,4 @@ const SearchFacetSearchable: FC<Props> = (props: Props) => {
   )
 }
 
-export default SearchFacetSearchable
+export default SearchFacetTags
diff --git a/src/components/SearchFacets/index.tsx b/src/components/SearchFacets/index.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components'
 
 import useTypedSelector from '../../hooks/useTypedSelector'
 import SearchFacetNumber from '../SearchFacetNumber'
-import SearchFacetSearchable from '../SearchFacetSearchable'
+import SearchFacetTags from '../SearchFacetTags'
 import SearchFacetSelect from '../SearchFacetSelect'
 import SearchFacetString from '../SearchFacetString'
 
@@ -30,7 +30,7 @@ const SearchFacets: FC<Props> = (props: Props) => {
     }
 
     if (facet.type === 'searchable') {
-      return <SearchFacetSearchable facet={facet} key={facet.name} />
+      return <SearchFacetTags facet={facet} key={facet.name} />
     }
 
     if (facet.type === 'select') {

diff --git a/src/styled/react-select/single.tsx b/src/styled/react-select/single.tsx
@@ -140,7 +140,14 @@ const SingleValue = (props: any) => {
   return (
     <components.SingleValue {...props}>
       <Box paddingLeft={2}>
-        <Text size={1} style={{color: 'inherit'}} textOverflow="ellipsis">
+        <Text
+          size={1}
+          style={{
+            color: 'inherit',
+            lineHeight: '2em' // HACK: prevent text descenders from cropping
+          }}
+          textOverflow="ellipsis"
+        >
           {props.children}
         </Text>
       </Box>