fix: Fix <Input> styles (#455)

pluralsh · Apr 14, 2023 · feda64b · feda64b
1 parent 6b81220
commit feda64b
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 46 deletions.
diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
@@ -199,8 +199,6 @@ function CrumbListRef(
     breadcrumbs.length
   )
 
-  console.log('ariaOnly', ariaOnly, visuallyHiddenProps)
-
   return (
     <Ol
       id={id}

diff --git a/src/components/Input.tsx b/src/components/Input.tsx
@@ -1,66 +1,73 @@
 import { ExtendTheme, Input as HonorableInput, mergeTheme } from 'honorable'
 import type { InputProps as HonorableInputProps } from 'honorable'
-import { ReactNode, forwardRef, useMemo } from 'react'
-import { useTheme } from 'styled-components'
+import { ReactNode, forwardRef } from 'react'
+import styled from 'styled-components'
 
 import { useFillLevel } from './contexts/FillLevelContext'
-import { titleContentStyles } from './Select'
+import { TitleContent } from './Select'
 
 export type InputProps = HonorableInputProps & {
   suffix?: ReactNode
   prefix?: ReactNode
   titleContent?: ReactNode
 }
 
-const prefixSuffixIconStyle = {
+const PrefixSuffix = styled.div(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
   alignSelf: 'stretch',
-  paddingHorizontal: 'small',
-  backgroundColor: 'fill-two',
+  paddingLeft: theme.spacing.small,
+  paddingRight: theme.spacing.small,
+  backgroundColor: theme.colors['fill-two'],
+}))
+
+const startEndStyles = {
+  alignSelf: 'stretch',
+  display: 'flex',
+  gap: 'small',
+  marginRight: 0,
+  marginLeft: 0,
+  paddingRight: 0,
+  paddingLeft: 0,
 }
 
+const InputTitleContent = styled(TitleContent)((_) => ({
+  alignSelf: 'stretch',
+}))
+
 const Input = forwardRef(
   (
     { startIcon, endIcon, suffix, prefix, titleContent, ...props }: InputProps,
     ref
   ) => {
     let themeExtension: any = {}
-    const theme = useTheme()
     const parentFillLevel = useFillLevel()
     const size = (props as any).large
       ? 'large'
       : (props as any).small
       ? 'small'
       : 'medium'
 
-    const titleContentIconStyle = useMemo(
-      () => ({
-        ...titleContentStyles({ theme, parentFillLevel, size }),
-        alignSelf: 'stretch',
-      }),
-      [parentFillLevel, theme, size]
-    )
-
     if (suffix) {
       themeExtension = mergeTheme(themeExtension, {
         Input: {
           Root: [{ paddingRight: 0 }],
-          EndIcon: [prefixSuffixIconStyle],
-        },
-      })
-    }
-    if (prefix) {
-      themeExtension = mergeTheme(themeExtension, {
-        Input: {
-          Root: [{ paddingLeft: 0 }],
-          StartIcon: [prefixSuffixIconStyle],
+          EndIcon: [{ ...startEndStyles, ...{ paddingLeft: 'xsmall' } }],
         },
       })
     }
-    if (titleContent) {
+    if (prefix || titleContent) {
       themeExtension = mergeTheme(themeExtension, {
         Input: {
           Root: [{ paddingLeft: 0 }],
-          StartIcon: [titleContentIconStyle],
+          StartIcon: [
+            {
+              ...startEndStyles,
+              ...{
+                paddingRight: titleContent && !startIcon ? 'small' : 'xsmall',
+              },
+            },
+          ],
         },
       })
     }
@@ -69,8 +76,30 @@ const Input = forwardRef(
       <ExtendTheme theme={themeExtension}>
         <HonorableInput
           ref={ref}
-          endIcon={suffix || endIcon}
-          startIcon={titleContent || prefix || startIcon}
+          endIcon={
+            endIcon || suffix ? (
+              <>
+                {endIcon}
+                {suffix && <PrefixSuffix>{suffix}</PrefixSuffix>}
+              </>
+            ) : undefined
+          }
+          startIcon={
+            startIcon || prefix || titleContent ? (
+              <>
+                {(titleContent && (
+                  <InputTitleContent
+                    $size={size}
+                    $parentFillLevel={parentFillLevel}
+                  >
+                    {titleContent}
+                  </InputTitleContent>
+                )) ||
+                  (prefix && <PrefixSuffix>{prefix}</PrefixSuffix>)}
+                {startIcon}
+              </>
+            ) : undefined
+          }
           {...props}
         />
       </ExtendTheme>

diff --git a/src/components/Select.tsx b/src/components/Select.tsx
@@ -95,15 +95,10 @@ function Trigger({ buttonElt, isOpen, ...props }: TriggerProps) {
   })
 }
 
-export const titleContentStyles = ({
-  theme,
-  parentFillLevel,
-  size = 'medium',
-}: {
-  theme: any
-  parentFillLevel: FillLevel
-  size?: Size
-}) => {
+export const TitleContent = styled.div<{
+  $size: Size
+  $parentFillLevel: FillLevel
+}>(({ theme, $size: size, $parentFillLevel: parentFillLevel }) => {
   const hPad = theme.spacing.small
   const vPad = size === 'small' ? 5 : 9
 
@@ -122,7 +117,7 @@ export const titleContentStyles = ({
     paddingLeft: hPad,
     paddingRight: hPad,
   }
-}
+})
 
 const SelectButtonInner = styled.div<{
   $isOpen: boolean
@@ -145,11 +140,6 @@ const SelectButtonInner = styled.div<{
     color: theme.colors['text-light'],
     border: theme.borders.input,
     borderRadius: theme.borderRadiuses.medium,
-    '.titleContent': titleContentStyles({
-      theme,
-      size,
-      parentFillLevel,
-    }),
     '.content': {
       alignItems: 'center',
       display: 'flex',
@@ -212,7 +202,14 @@ const SelectButton = forwardRef<
         $parentFillLevel={parentFillLevel}
         {...props}
       >
-        {titleContent && <div className="titleContent">{titleContent}</div>}
+        {titleContent && (
+          <TitleContent
+            $size={size}
+            $parentFillLevel={parentFillLevel}
+          >
+            {titleContent}
+          </TitleContent>
+        )}
         <div className="content">
           {leftContent && <div className="leftContent">{leftContent}</div>}
           <div className="children">{children}</div>

diff --git a/src/stories/Input.stories.tsx b/src/stories/Input.stories.tsx
@@ -3,6 +3,7 @@ import { Div, Flex } from 'honorable'
 import MagnifyingGlassIcon from '../components/icons/MagnifyingGlassIcon'
 import BrowseAppsIcon from '../components/icons/BrowseAppsIcon'
 import CaretDownIcon from '../components/icons/CaretDownIcon'
+import SearchIcon from '../components/icons/SearchIcon'
 import Input from '../components/Input'
 
 export default {
@@ -104,10 +105,12 @@ Multiline.args = {
 export const TitleContent = CustomInputTemplate.bind({})
 
 TitleContent.args = {
+  startIcon: <SearchIcon />,
   titleContent: (
     <>
       <BrowseAppsIcon marginRight="small" />
       Marketplace
     </>
   ),
+  placeholder: 'Search the marketplace',
 }