fix(TextInput): unequal text alignment in textinput

gravity-ui · DaniilDem · Feb 8, 2024 · Feb 2, 2024 · Feb 8, 2024 · fb3b8a8b7b191a2d0f74955087e02a0603348c9f
commit fb3b8a8b7b191a2d0f74955087e02a0603348c9f
@@ -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';
 
@@ -171,7 +192,7 @@ $block: '.#{variables.$ns}text-input';
     &_size {
         &_s {
             #{$block}__control {
-                @include control-mixins.input-control(s);
+                @include input-control(s);
             }
 
             #{$block}__label {
@@ -202,7 +223,7 @@ $block: '.#{variables.$ns}text-input';
 
         &_m {
             #{$block}__control {
-                @include control-mixins.input-control(m);
+                @include input-control(m);
             }
 
             #{$block}__label {
@@ -233,7 +254,7 @@ $block: '.#{variables.$ns}text-input';
 
         &_l {
             #{$block}__control {
-                @include control-mixins.input-control(l);
+                @include input-control(l);
             }
 
             #{$block}__label {
@@ -264,7 +285,7 @@ $block: '.#{variables.$ns}text-input';
 
         &_xl {
             #{$block}__control {
-                @include control-mixins.input-control(xl);
+                @include input-control(xl);
             }
 
             #{$block}__label {

diff --git a/.storybook/theme-addon/register.tsx b/.storybook/theme-addon/register.tsx
    const [{theme}] = useGlobals();
    React.useEffect(() => {
        api.setOptions({theme: themes[getThemeType(theme)]});
    }, [theme]);
    return null;
 }
diff --git a/src/components/ActionTooltip/ActionTooltip.tsx b/src/components/ActionTooltip/ActionTooltip.tsx
    };

    const child = React.Children.only(children);
    const childRef = (child as any).ref;

    const ref = useForkRef(setAnchorElement, childRef);

diff --git a/src/components/CopyToClipboard/__tests__/CopyToClipboard.test.tsx b/src/components/CopyToClipboard/__tests__/CopyToClipboard.test.tsx
        expect(() =>
            render(
                <CopyToClipboard text="Text to copy" onCopy={onCopy}>
                    {(() => 123) as any as CopyToClipboardContent}
                </CopyToClipboard>,
            ),
        ).toThrow('Content must be a valid react element');
diff --git a/src/components/Hotkey/parse.ts b/src/components/Hotkey/parse.ts
 }

 function getKeyId(defs: PlatformDefs, val: string): string {
    val = val.toLowerCase();
    return defs.NormalizeMap[val] ?? val;
 }

diff --git a/src/components/Hotkey/utils.ts b/src/components/Hotkey/utils.ts
 export const isMac = (): boolean =>
    typeof navigator !== 'undefined' ? /Mac|iP(hone|[oa]d)/.test(navigator.platform) : false;

 export function split(val: string, separator: string | RegExp): string[] {
    return val.trim().split(separator).filter(Boolean);
diff --git a/src/components/Icon/__stories__/Icon.stories.tsx b/src/components/Icon/__stories__/Icon.stories.tsx

 const icons = [Gear, Envelope, Rocket].reduce(
    (acc, fn) => {
        acc[fn.name] = fn;
        return acc;
    },
    {} as {[key: string]: React.FunctionComponent},
diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
    };

    refFilter = React.createRef<HTMLInputElement>();
    refContainer = React.createRef<any>();
    blurTimer: ReturnType<typeof setTimeout> | null = null;
    loadingItem = {value: '__LIST_ITEM_LOADING__', disabled: false} as unknown as ListItemData<
        T & {value: string}
                break;
            }
            case 'PageDown': {
                this.handleKeyMove(event, pageSize!);
                break;
            }
            case 'PageUp': {
                this.handleKeyMove(event, -pageSize!);
                break;
            }
            case 'Home': {
diff --git a/src/components/List/__stories__/ListItem.stories.tsx b/src/components/List/__stories__/ListItem.stories.tsx
 } as Meta<typeof ListItem>;

 const getComponentTemplate = <
    T extends React.JSXElementConstructor<ListItemProps<any>> = typeof ListItem,
 >(): StoryFn<T> =>
    // eslint-disable-next-line react/display-name
    ((args: any) => <ListItem {...args} />) as any;
	const [{theme}] = useGlobals();
	React.useEffect(() => {
	api.setOptions({theme: themes[getThemeType(theme)]});
	}, [theme]);
Check warning on line 27 in .storybook/theme-addon/register.tsx GitHub Actions / Verify Files `React Hook React.useEffect has a missing dependency: 'api'. Either include it or remove the dependency array`
	return null;
	}
	};

	const child = React.Children.only(children);
	const childRef = (child as any).ref;
Check warning on line 78 in src/components/ActionTooltip/ActionTooltip.tsx GitHub Actions / Verify Files `Unexpected any. Specify a different type`

	const ref = useForkRef(setAnchorElement, childRef);
	expect(() =>
	render(
	<CopyToClipboard text="Text to copy" onCopy={onCopy}>
	{(() => 123) as any as CopyToClipboardContent}
Check warning on line 13 in src/components/CopyToClipboard/__tests__/CopyToClipboard.test.tsx GitHub Actions / Verify Files `Unexpected any. Specify a different type`
	</CopyToClipboard>,
	),
	).toThrow('Content must be a valid react element');
	}

	function getKeyId(defs: PlatformDefs, val: string): string {
	val = val.toLowerCase();
Check warning on line 34 in src/components/Hotkey/parse.ts GitHub Actions / Verify Files `Assignment to function parameter 'val'`
	return defs.NormalizeMap[val] ?? val;
	}
	export const isMac = (): boolean =>
	typeof navigator !== 'undefined' ? /Mac\|iP(hone\|[oa]d)/.test(navigator.platform) : false;
Check warning on line 2 in src/components/Hotkey/utils.ts GitHub Actions / Verify Files `Unexpected negated condition`

	export function split(val: string, separator: string \| RegExp): string[] {
	return val.trim().split(separator).filter(Boolean);

	const icons = [Gear, Envelope, Rocket].reduce(
	(acc, fn) => {
	acc[fn.name] = fn;
Check warning on line 11 in src/components/Icon/__stories__/Icon.stories.tsx GitHub Actions / Verify Files `Assignment to property of function parameter 'acc'`
	return acc;
	},
	{} as {[key: string]: React.FunctionComponent},
	};

	refFilter = React.createRef<HTMLInputElement>();
	refContainer = React.createRef<any>();
Check warning on line 100 in src/components/List/List.tsx GitHub Actions / Verify Files `Unexpected any. Specify a different type`
	blurTimer: ReturnType<typeof setTimeout> \| null = null;
	loadingItem = {value: '__LIST_ITEM_LOADING__', disabled: false} as unknown as ListItemData<
	T & {value: string}
	break;
	}
	case 'PageDown': {
	this.handleKeyMove(event, pageSize!);
Check warning on line 216 in src/components/List/List.tsx GitHub Actions / Verify Files `Forbidden non-null assertion`
	break;
	}
	case 'PageUp': {
	this.handleKeyMove(event, -pageSize!);
Check warning on line 220 in src/components/List/List.tsx GitHub Actions / Verify Files `Forbidden non-null assertion`
	break;
	}
	case 'Home': {
	} as Meta<typeof ListItem>;

	const getComponentTemplate = <
	T extends React.JSXElementConstructor<ListItemProps<any>> = typeof ListItem,
Check warning on line 44 in src/components/List/__stories__/ListItem.stories.tsx GitHub Actions / Verify Files `Unexpected any. Specify a different type`
	>(): StoryFn<T> =>
	// eslint-disable-next-line react/display-name
	((args: any) => <ListItem {...args} />) as any;