DS-256 - search margin fix (#110)

* DS-256-search_margin

* noMarginBottom prop

---------

Co-authored-by: José Carlos Pesina Siller <josecarlospesinasiller@Joses-MacBook-Air.local>

Author: pesinasiller

src/components/Forms/Inputs/TextInput/index.tsx

@@ -22,6 +22,7 @@ const TextInput = ({
   required,
   disabled,
   size = 'default',
+  noMarginBottom = false,
   defaultValue = '',
   onChange,
   ...rest
@@ -38,7 +39,7 @@ const TextInput = ({
 
   return (
     <div
-      css={textInputContainerStyles(size)}
+      css={textInputContainerStyles(size, noMarginBottom)}
       className='ds-text-input-container'
     >
       {errorMessage ? <div css={textInputErrorBarStyles} /> : null}

src/components/Forms/Inputs/TextInput/styled.ts

@@ -2,15 +2,18 @@ import { css } from '@emotion/react'
 import { getThemedColor } from '../../../../lib/theme'
 import { TextInputProps } from './types'
 
-export const textInputContainerStyles = (size: TextInputProps['size']) => css`
+export const textInputContainerStyles = (
+  size: TextInputProps['size'],
+  noMarginBottom?: boolean,
+) => css`
   position: relative;
   height: 100%;
   width: 100%;
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   gap: ${size === 'small' ? '12px' : '16px'};
-  margin-bottom: 20px;
+  margin-bottom: ${noMarginBottom ? '0' : '20px'};
 `
 
 export const textInputErrorBarStyles = css`

src/components/Forms/Inputs/TextInput/types.ts

@@ -11,6 +11,7 @@ export type TextInputProps = Omit<
   required?: boolean
   disabled?: boolean
   size?: 'small' | 'default'
+  noMarginBottom?: boolean
   defaultValue?: string
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
 }

src/components/Navigation/Search/index.tsx

@@ -106,7 +106,7 @@ const Search = ({
   }, [open])
 
   const endElement = filterText.length ? (
-    <CloseButton style={{ marginTop: '-12px' }} onClick={handleOnClear} />
+    <CloseButton style={{ marginTop: '8px' }} onClick={handleOnClear} />
   ) : null
 
   const resultsVisible =
@@ -121,12 +121,17 @@ const Search = ({
   } else if (isFocused) {
     iconFillColor = getThemedColor('primary', 700)
   }
-
+  const iconSize = size === 'small' ? '16px' : '20px'
   return (
     <div ref={containerRef} style={{ position: 'relative', width: '100%' }}>
       <InputGroup
         startElement={
-          <SearchIcon fill={iconFillColor} style={{ marginTop: '-12px' }} />
+          <SearchIcon
+            width={iconSize}
+            height={iconSize}
+            fill={iconFillColor}
+            style={{ marginTop: '8px' }}
+          />
         }
         endElement={endElement}
       >
@@ -150,6 +155,7 @@ const Search = ({
           aria-autocomplete='list'
           disabled={disabled}
           size={size}
+          noMarginBottom
           onKeyDown={(e) => {
             if (!resultsVisible) return
 
@@ -197,13 +203,11 @@ const Search = ({
         <Portal container={containerRef}>
           <Box
             position='absolute'
-            marginTop='-20px'
             width='100%'
             backgroundColor='white'
-            border='1px solid'
+            border={displayResults === 'custom' ? 'none' : '1px solid'}
             borderColor='gray.200'
             borderRadius='md'
-            boxShadow='md'
             zIndex={1000}
             overflowY='auto'
             maxHeight={resultsMaxHeight}

src/components/icons/Search.tsx

@@ -3,13 +3,15 @@ import React from 'react'
 import { Icon, IconProps } from '@chakra-ui/react'
 
 export const SearchIcon = (props: IconProps & { fill?: string }) => {
-  const { fill } = props
+  const { fill, width: widthProp, height: heightProp, ...rest } = props
   const pathFill = fill || 'currentColor'
+  const width = widthProp ?? '20'
+  const height = heightProp ?? widthProp ?? '20'
   return (
     <Icon {...props} fill={pathFill}>
       <svg
-        width='20'
-        height='20'
+        width={width as string}
+        height={height as string}
         viewBox='0 0 20 20'
         fill='none'
         xmlns='http://www.w3.org/2000/svg'