Merge branch 'main' into feat/outline-for-text-input-and-select

gravity-ui · Feb 9, 2024 · a57b6b9 · a57b6b9
2 parents 48b1bdf + 73fe484
commit a57b6b9
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 17 deletions.
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -98,6 +98,26 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
     const filterRef = React.useRef<SelectFilterRef>(null);
     const listRef = React.useRef<List<FlattenOption>>(null);
     const handleControlRef = useForkRef(ref, controlRef);
+
+    const handleFilterChange = React.useCallback(
+        (nextFilter: string) => {
+            onFilterChange?.(nextFilter);
+            dispatch({type: 'SET_FILTER', payload: {filter: nextFilter}});
+        },
+        [onFilterChange],
+    );
+
+    const handleOpenChange = React.useCallback(
+        (open: boolean) => {
+            onOpenChange?.(open);
+
+            if (!open && filterable) {
+                handleFilterChange('');
+            }
+        },
+        [filterable, onOpenChange, handleFilterChange],
+    );
+
     const {
         value,
         open,
@@ -114,7 +134,7 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
         multiple,
         open: propsOpen,
         onClose,
-        onOpenChange,
+        onOpenChange: handleOpenChange,
     });
     const uniqId = useUniqId();
     const selectId = id ?? uniqId;
@@ -197,14 +217,6 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
         listRef?.current?.onKeyDown(e);
     }, []);
 
-    const handleFilterChange = React.useCallback(
-        (nextFilter: string) => {
-            onFilterChange?.(nextFilter);
-            dispatch({type: 'SET_FILTER', payload: {filter: nextFilter}});
-        },
-        [onFilterChange],
-    );
-
     const handleQuickSearchChange = React.useCallback((search: string) => {
         if (search) {
             const itemIndex = findItemIndexByQuickSearch(search, getListItems(listRef));
@@ -228,10 +240,8 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
             if (filterable) {
                 filterRef.current?.focus();
             }
-        } else {
-            handleFilterChange('');
         }
-    }, [open, filterable, handleFilterChange]);
+    }, [open, filterable]);
 
     const mods: CnMods = {
         ...(width === 'max' && {width}),

diff --git a/src/components/Select/__tests__/Select.filter.test.tsx b/src/components/Select/__tests__/Select.filter.test.tsx
@@ -68,7 +68,7 @@ describe('Select filter', () => {
         await user.keyboard('1');
         // empty
         expect(queryAllByRole('option').length).toBe(0);
-        expect(onFilterChange).toBeCalledTimes(4);
+        expect(onFilterChange).toBeCalledTimes(3);
     });
 
     test('should render node with renderEmptyOptions', async () => {

diff --git a/src/components/controls/TextInput/TextInput.scss b/src/components/controls/TextInput/TextInput.scss
@@ -62,6 +62,27 @@
 
     @include mixins.text-accent;
 }
+// We use this mixin to correct the positioning of the text inside the input
+// See https://github.com/gravity-ui/uikit/issues/975
+
+@mixin input-control($size) {
+    @include control-mixins.input-control($size);
+    @if $size == 's' {
+        line-height: #{variables.$s-height - control-variables.$border-width * 2};
+    }
+
+    @if $size == 'm' {
+        line-height: #{variables.$m-height - control-variables.$border-width * 2};
+    }
+
+    @if $size == 'l' {
+        line-height: #{variables.$l-height - control-variables.$border-width * 2};
+    }
+
+    @if $size == 'xl' {
+        line-height: #{variables.$xl-height - control-variables.$border-width * 2};
+    }
+}
 
 $block: '.#{variables.$ns}text-input';
 
@@ -173,7 +194,7 @@ $block: '.#{variables.$ns}text-input';
     &_size {
         &_s {
             #{$block}__control {
-                @include control-mixins.input-control(s);
+                @include input-control(s);
             }
 
             #{$block}__label {
@@ -204,7 +225,7 @@ $block: '.#{variables.$ns}text-input';
 
         &_m {
             #{$block}__control {
-                @include control-mixins.input-control(m);
+                @include input-control(m);
             }
 
             #{$block}__label {
@@ -235,7 +256,7 @@ $block: '.#{variables.$ns}text-input';
 
         &_l {
             #{$block}__control {
-                @include control-mixins.input-control(l);
+                @include input-control(l);
             }
 
             #{$block}__label {
@@ -266,7 +287,7 @@ $block: '.#{variables.$ns}text-input';
 
         &_xl {
             #{$block}__control {
-                @include control-mixins.input-control(xl);
+                @include input-control(xl);
             }
 
             #{$block}__label {