Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-13 12:55:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(component): fix incorrect input component width and height styling (#5292)

Browse Source 
after:

https://github.com/toeverything/AFFiNE/assets/102217452/5d8f51c5-c7a6-4ec8-b2b0-7f1391f045c7
This commit is contained in:
JimmFly
2023-12-19 08:27:46 +00:00
parent d9f1cc60b9
commit 38617abc17
14 changed files with 45 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/frontend/component/src/ui/input/input.tsx
View File

@@ -1,4 +1,3 @@
import { assignInlineVars } from '@vanilla-extract/dynamic';
import clsx from 'clsx';
import type {
ChangeEvent,
@@ -13,11 +12,10 @@ import type {
} from 'react';
import { forwardRef, useCallback, useState } from 'react';
import { input, inputWrapper, widthVar } from './style.css';
import { input, inputWrapper } from './style.css';
export type InputProps = {
disabled?: boolean;
width?: CSSProperties['width'];
onChange?: (value: string) => void;
onBlur?: FocusEventHandler<HTMLInputElement>;
onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
@@ -34,7 +32,6 @@ export type InputProps = {
export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
{
disabled,
width,
onChange: propsOnChange,
noBorder = false,
className,
@@ -78,9 +75,6 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
'extra-large': size === 'extraLarge',
})}
style={{
...assignInlineVars({
[widthVar]: width ? `${width}px` : '100%',
}),
...style,
}}
>

9
packages/frontend/component/src/ui/input/style.css.ts
View File

@@ -1,12 +1,7 @@
import { createVar, style } from '@vanilla-extract/css';
export const widthVar = createVar('widthVar');
import { style } from '@vanilla-extract/css';
export const inputWrapper = style({
vars: {
[widthVar]: '100%',
},
width: widthVar,
width: '100%',
height: 28,
lineHeight: '22px',
padding: '0 10px',