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

after: https://github.com/toeverything/AFFiNE/assets/102217452/5d8f51c5-c7a6-4ec8-b2b0-7f1391f045c7
2026-02-11 20:08:37 +00:00 · 2023-12-19 08:27:46 +00:00
parent d9f1cc60b9
commit 38617abc17
14 changed files with 45 additions and 41 deletions
--- a/packages/frontend/component/src/components/auth-components/auth-input.tsx
+++ b/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 => {
--- a/packages/frontend/component/src/components/auth-components/change-email-page.tsx
+++ b/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}
--- a/packages/frontend/component/src/components/member-components/invite-modal.tsx
+++ b/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>
--- a/packages/frontend/component/src/components/rename-modal/index.css.ts
+++ b/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',
+});
--- a/packages/frontend/component/src/components/rename-modal/index.tsx
+++ b/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}
--- a/packages/frontend/component/src/ui/input/input.tsx
+++ b/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,
      }}
    >
--- a/packages/frontend/component/src/ui/input/style.css.ts
+++ b/packages/frontend/component/src/ui/input/style.css.ts
@@ -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',
--- a/packages/frontend/core/src/components/affine/new-workspace-setting-detail/profile.tsx
+++ b/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}
--- a/packages/frontend/core/src/components/affine/new-workspace-setting-detail/style.css.ts
+++ b/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',
+});
--- a/packages/frontend/core/src/components/affine/setting-modal/account-setting/index.tsx
+++ b/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']()}
--- a/packages/frontend/core/src/components/affine/setting-modal/account-setting/style.css.ts
+++ b/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',
+});
--- a/packages/plugins/copilot/src/UI/debug-content.tsx
+++ b/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) => {
--- a/packages/plugins/copilot/src/UI/index.css.ts
+++ b/packages/plugins/copilot/src/UI/index.css.ts
@@ -41,3 +41,7 @@ export const sendButtonStyle = style({
    backgroundColor: 'transparent',
  },
 });
+
+export const debugContentInput = style({
+  width: '280px',
+});