fix(InlineSearchInput): added padding, clear button is absolut now, h…

…over TET-516
VirtusLab · Nov 9, 2023 · f6649a0 · f6649a0
1 parent 0e03177
commit f6649a0
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/src/components/InlineSearchInput/InlineSearchInput.styles.ts b/src/components/InlineSearchInput/InlineSearchInput.styles.ts
@@ -1,11 +1,15 @@
 import { SearchInputProps } from '../SearchInput';
 
 export const defaultConfig: SearchInputProps['custom'] = {
+  position: 'relative',
   display: 'inline-flex',
   h: '$size-small',
   padding: '$space-component-padding-xSmall $space-component-padding-small',
   backgroundColor: {
-    hover: '$color-interaction-ghost-hover',
+    hover: {
+      _: '$color-interaction-ghost-hover',
+      focusWithin: '$color-interaction-background-formField',
+    },
   },
   ring: {
     _: 'unset',
@@ -20,8 +24,13 @@ export const defaultConfig: SearchInputProps['custom'] = {
       minWidth: '50px',
       backgroundColor: 'unset',
       padding: 'unset',
+      paddingRight: '36px',
       display: 'inline-block',
     },
+    clearButton: {
+      position: 'absolute',
+      right: '$space-component-padding-small',
+    },
     beforeComponent: {
       spacing: {
         Icon: {