fix(Select): height and paddings TET-521

VirtusLab · Nov 10, 2023 · 4a54a3f · 4a54a3f
1 parent ad6c4e9
commit 4a54a3f
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 0 deletions.
diff --git a/src/components/Select/Select.styles.ts b/src/components/Select/Select.styles.ts
@@ -0,0 +1,13 @@
+import type { TextInputProps } from '../TextInput';
+
+export const defaultConfig: TextInputProps['custom'] = {
+  innerElements: {
+    afterComponent: {
+      spacing: {
+        IconButton: {
+          marginRight: '$space-component-padding-medium',
+        },
+      },
+    },
+  },
+};
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -2,11 +2,13 @@ import { Icon } from '@virtuslab/tetrisly-icons';
 import type { FC } from 'react';
 
 import type { SelectProps } from './Select.props';
+import { defaultConfig } from './Select.styles';
 import { Avatar } from '../Avatar';
 import { IconButton } from '../IconButton';
 import type { TextInputProps } from '../TextInput';
 import { useTextInput } from '../TextInput/useTextInput';
 
+import { mergeConfigWithCustom } from '@/services/mergeConfigWithCustom/mergeConfigWithCutom';
 import { tet } from '@/tetrisly';
 import type { MarginProps } from '@/types';
 
@@ -22,9 +24,13 @@ export const Select: FC<SelectProps & MarginProps> = ({
   beforeComponent,
   hasClearButton,
   value,
+  custom: customProps,
   ...props
 }) => {
   const afterComponent = DROPDOWN_INDICATOR_COMPONENT;
+
+  const custom = mergeConfigWithCustom({ defaultConfig, custom: customProps });
+
   const {
     containerRef,
     handleContainerClick,
@@ -37,8 +43,10 @@ export const Select: FC<SelectProps & MarginProps> = ({
   } = useTextInput({
     beforeComponent,
     afterComponent,
+    custom,
     ...props,
   });
+
   return (
     <tet.div
       ref={containerRef}
@@ -78,6 +86,7 @@ export const Select: FC<SelectProps & MarginProps> = ({
         <IconButton
           variant="bare"
           icon="20-close"
+          size="medium"
           onClick={handleOnClear}
           {...styles.clearButton}
           data-testid="select-clear-button"

diff --git a/src/components/TextInput/TextInput.styles.ts b/src/components/TextInput/TextInput.styles.ts
@@ -29,6 +29,7 @@ export const defaultConfig = {
   h: '$size-medium',
   padding: '$space-component-padding-small $space-component-padding-large',
   flexShrink: 0,
+  ringInset: true,
   ring: '$border-width-small',
   ringColor: {
     _: '$color-interaction-border-neutral-normal',