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

after:

https://github.com/toeverything/AFFiNE/assets/102217452/5d8f51c5-c7a6-4ec8-b2b0-7f1391f045c7

packages/frontend/component/src/components/auth-components/auth-input.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import type { FC, HTMLAttributes } from 'react';
 
 import { Input, type InputProps } from '../../ui/input';
 import * as styles from './share.css';
@@ -9,27 +8,25 @@ export type AuthInputProps = InputProps & {
   errorHint?: string;
   withoutHint?: boolean;
   onEnter?: () => void;
-  wrapperProps?: HTMLAttributes<HTMLDivElement>;
 };
-export const AuthInput: FC<AuthInputProps> = ({
+export const AuthInput = ({
   label,
   error,
   errorHint,
   withoutHint = false,
   onEnter,
-  wrapperProps: { className, ...otherWrapperProps } = {},
+  className,
   ...inputProps
-}) => {
+}: AuthInputProps) => {
   return (
     <div
-      className={clsx(styles.authInputWrapper, className, {
+      className={clsx(styles.authInputWrapper, {
         'without-hint': withoutHint,
       })}
-      {...otherWrapperProps}
     >
       {label ? <label>{label}</label> : null}
       <Input
-        className={styles.input}
+        className={clsx(className)}
         size="extraLarge"
         status={error ? 'error' : 'default'}
         onKeyDown={e => {

packages/frontend/component/src/components/auth-components/change-email-page.tsx

@@ -4,6 +4,7 @@ import { useCallback, useState } from 'react';
 import { Button } from '../../ui/button';
 import { AuthInput } from './auth-input';
 import { AuthPageContainer } from './auth-page-container';
+import * as styles from './share.css';
 import { emailRegex } from './utils';
 
 export const ChangeEmailPage = ({
@@ -44,6 +45,7 @@ export const ChangeEmailPage = ({
     >
       <>
         <AuthInput
+          className={styles.input}
           label={t['com.affine.settings.email']()}
           placeholder={t['com.affine.auth.sign.email.placeholder']()}
           value={email}

packages/frontend/component/src/components/member-components/invite-modal.tsx

@@ -74,9 +74,6 @@ export const InviteModal = ({
         error={!isValidEmail}
         errorHint={isValidEmail ? '' : t['com.affine.auth.sign.email.error']()}
         onEnter={handleConfirm}
-        wrapperProps={{
-          style: { padding: 0 },
-        }}
         size="large"
       />
     </ConfirmModal>

packages/frontend/component/src/components/rename-modal/index.css.ts

@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+
+export const input = style({
+  height: '34px',
+  width: '220px',
+});

packages/frontend/component/src/components/rename-modal/index.tsx

@@ -2,6 +2,7 @@ import { useCallback, useState } from 'react';
 
 import Input from '../../ui/input';
 import { Menu } from '../../ui/menu';
+import * as styles from './index.css';
 
 export const RenameModal = ({
   onRename,
@@ -32,9 +33,8 @@ export const RenameModal = ({
       }}
       items={
         <Input
+          className={styles.input}
           autoFocus
-          width={220}
-          style={{ height: 34 }}
           defaultValue={value}
           onChange={setValue}
           onEnter={handleRename}

packages/frontend/component/src/ui/input/input.tsx

@@ -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,
       }}
     >

packages/frontend/component/src/ui/input/style.css.ts

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

packages/frontend/core/src/components/affine/new-workspace-setting-detail/profile.tsx

@@ -22,7 +22,7 @@ import {
 
 import { validateAndReduceImage } from '../../../utils/reduce-image';
 import { Upload } from '../../pure/file-upload';
-import * as style from './style.css';
+import * as styles from './style.css';
 import type { WorkspaceSettingDetailProps } from './types';
 
 export interface ProfilePanelProps extends WorkspaceSettingDetailProps {
@@ -168,7 +168,7 @@ export const ProfilePanel = ({ isOwner, workspace }: ProfilePanelProps) => {
   const canAdjustAvatar = !workspaceIsLoading && avatarUrl && isOwner;
 
   return (
-    <div className={style.profileWrapper}>
+    <div className={styles.profileWrapper}>
       <Upload
         accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
         fileChange={handleUploadAvatar}
@@ -198,13 +198,12 @@ export const ProfilePanel = ({ isOwner, workspace }: ProfilePanelProps) => {
       </Upload>
 
       <Wrapper marginLeft={20}>
-        <div className={style.label}>{t['Workspace Name']()}</div>
+        <div className={styles.label}>{t['Workspace Name']()}</div>
         <FlexWrapper alignItems="center" flexGrow="1">
           <Input
             disabled={workspaceIsLoading || !isOwner}
-            width={280}
-            height={32}
             value={input}
+            className={styles.workspaceNameInput}
             data-testid="workspace-name-input"
             placeholder={t['Workspace Name']()}
             maxLength={64}

packages/frontend/core/src/components/affine/new-workspace-setting-detail/style.css.ts

@@ -201,3 +201,8 @@ export const arrowRight = style({
   color: 'var(--affine-text-emphasis-color)',
   cursor: 'pointer',
 });
+
+export const workspaceNameInput = style({
+  height: '32px',
+  width: '280px',
+});

packages/frontend/core/src/components/affine/setting-modal/account-setting/index.tsx

@@ -38,7 +38,7 @@ import { useSelfHosted } from '../../../../hooks/affine/use-server-flavor';
 import { useUserSubscription } from '../../../../hooks/use-subscription';
 import { validateAndReduceImage } from '../../../../utils/reduce-image';
 import { Upload } from '../../../pure/file-upload';
-import * as style from './style.css';
+import * as styles from './style.css';
 
 export const UserAvatar = () => {
   const t = useAFFiNEI18N();
@@ -133,17 +133,16 @@ export const AvatarAndName = () => {
           <UserAvatar />
         </Suspense>
 
-        <div className={style.profileInputWrapper}>
+        <div className={styles.profileInputWrapper}>
           <label>{t['com.affine.settings.profile.name']()}</label>
           <FlexWrapper alignItems="center">
             <Input
+              className={styles.userNameInput}
               defaultValue={input}
               data-testid="user-name-input"
               placeholder={t['com.affine.settings.profile.placeholder']()}
               maxLength={64}
               minLength={0}
-              width={280}
-              height={28}
               onChange={setInput}
               onEnter={handleUpdateUserName}
             />
@@ -151,7 +150,7 @@ export const AvatarAndName = () => {
               <Button
                 data-testid="save-user-name"
                 onClick={handleUpdateUserName}
-                className={style.button}
+                className={styles.button}
                 style={{
                   marginLeft: '12px',
                 }}
@@ -244,7 +243,7 @@ export const AccountSetting: FC = () => {
       />
       <AvatarAndName />
       <SettingRow name={t['com.affine.settings.email']()} desc={user.email}>
-        <Button onClick={onChangeEmail} className={style.button}>
+        <Button onClick={onChangeEmail} className={styles.button}>
           {t['com.affine.settings.email.action']()}
         </Button>
       </SettingRow>
@@ -252,7 +251,7 @@ export const AccountSetting: FC = () => {
         name={t['com.affine.settings.password']()}
         desc={t['com.affine.settings.password.message']()}
       >
-        <Button onClick={onPasswordButtonClick} className={style.button}>
+        <Button onClick={onPasswordButtonClick} className={styles.button}>
           {user.hasPassword
             ? t['com.affine.settings.password.action.change']()
             : t['com.affine.settings.password.action.set']()}

packages/frontend/core/src/components/affine/setting-modal/account-setting/style.css.ts

@@ -43,3 +43,8 @@ globalStyle(`${avatarWrapper} .camera-icon-wrapper`, {
 export const button = style({
   padding: '4px 12px',
 });
+
+export const userNameInput = style({
+  height: '32px',
+  width: '280px',
+});

packages/plugins/copilot/src/UI/debug-content.tsx

@@ -5,6 +5,7 @@ import { type ReactElement, useCallback } from 'react';
 
 import { openAIApiKeyAtom } from '../core/hooks';
 import { conversationHistoryDBName } from '../core/langchain/message-history';
+import * as styles from './index.css';
 
 export const DebugContent = (): ReactElement => {
   const [key, setKey] = useAtom(openAIApiKeyAtom);
@@ -12,7 +13,7 @@ export const DebugContent = (): ReactElement => {
     <div>
       <FlexWrapper justifyContent="space-between">
         <Input
-          width={280}
+          className={styles.debugContentInput}
           defaultValue={key ?? undefined}
           onChange={useCallback(
             (newValue: string) => {

packages/plugins/copilot/src/UI/index.css.ts

@@ -41,3 +41,7 @@ export const sendButtonStyle = style({
     backgroundColor: 'transparent',
   },
 });
+
+export const debugContentInput = style({
+  width: '280px',
+});

tests/storybook/src/stories/input.stories.tsx

@@ -26,7 +26,7 @@ Basic.play = async ({ canvasElement }) => {
 };
 
 export const DynamicHeight: StoryFn<typeof Input> = () => {
-  return <Input width={200} data-testid="test-input" />;
+  return <Input style={{ width: '200px' }} data-testid="test-input" />;
 };
 
 DynamicHeight.play = async ({ canvasElement }) => {