Update spacing between summary and clear button for InputSearch (#1193)

Co-authored-by: Luke Bowerman <[email protected]>

Author: jhardy

CHANGELOG.md

@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- `InputSearch` clear button is larger and now focusable, divider and summary text spacing refined
 - `Icon` no longer outputs a `<title />` by default and Icon is marked with `aria-hide` unless a title is explicitly specified
 - `Calendar`, `FieldDate`, `FieldDateRange`, `InputDate` & `InputDateRange` now require "deep" imports
   - E.g.: `Calendar` imports from `@looker/components/lib/Calendar`)

packages/components/src/Form/Inputs/InputSearch/InputSearchControls.tsx

@@ -27,7 +27,7 @@
 import omit from 'lodash/omit'
 import React, { forwardRef, MouseEvent, Ref } from 'react'
 import styled from 'styled-components'
-import { Box } from '../../../Layout'
+import { Box, Space } from '../../../Layout'
 import { IconButton } from '../../../Button'
 import { Text } from '../../../Text'
 
@@ -54,11 +54,10 @@ export const InputSearchControlsInternal = forwardRef(
 
     const clear = (
       <IconButton
-        size="xxsmall"
+        size="xsmall"
         icon="Close"
         label="Clear Field"
         onClick={onClear}
-        tabIndex={-1}
         disabled={disabled}
       />
     )
@@ -67,36 +66,38 @@ export const InputSearchControlsInternal = forwardRef(
       <Box
         borderRight="1px solid"
         borderColor="ui2"
-        height="1.5rem"
+        height="1rem"
         style={{
           pointerEvents: 'none',
         }}
       />
     )
 
     return (
-      <div {...omit(props, 'height')} ref={ref}>
+      <Space
+        {...omit(props, 'height')}
+        ref={ref}
+        gap="xsmall"
+        flex="0"
+        mr="xxsmall"
+      >
         {summary && (
           <Text
-            pr="xsmall"
-            variant="subdued"
+            color="text5"
             fontSize="small"
             style={{ whiteSpace: 'nowrap' }}
+            pr="xsmall"
           >
             {summary}
           </Text>
         )}
         {summary && showClear && separator}
         {showClear && clear}
-      </div>
+      </Space>
     )
   }
 )
 
 InputSearchControlsInternal.displayName = 'InputSearchControlsInternal'
 
-export const InputSearchControls = styled(InputSearchControlsInternal)`
-  align-items: center;
-  display: flex;
-  height: ${(props) => props.height};
-`
+export const InputSearchControls = styled(InputSearchControlsInternal)``