feat: add fullWidth and placeholder props to FormInputField and update styling

huijiewei · huijiewei · commit 99f03c3ff1ff · 2025-02-26T20:42:34.000+08:00
diff --git a/packages/react-ui/src/components/button/button.styles.ts b/packages/react-ui/src/components/button/button.styles.ts
@@ -24,11 +24,11 @@ export const buttonStyles = tv({
       neutral: "focus-visible:outline-bg-neutral-emphasis/70",
     },
     size: {
-      xs: "text-xs",
-      sm: "text-sm",
-      md: "text-sm",
-      lg: "text-base",
-      xl: "text-base",
+      xs: "",
+      sm: "",
+      md: "",
+      lg: "",
+      xl: "",
     },
     disabled: {
       true: "opacity-60",
@@ -287,7 +287,6 @@ export const buttonStyles = tv({
       disabled: false,
       className: "hover:text-fg-neutral-hovered active:text-fg-neutral-pressed",
     },
-
     {
       iconOnly: false,
       noPadding: false,
@@ -343,6 +342,31 @@ export const buttonStyles = tv({
       noPadding: false,
       className: "h-11",
     },
+    {
+      size: "xs",
+      iconOnly: false,
+      className: "text-xs",
+    },
+    {
+      size: "sm",
+      iconOnly: false,
+      className: "text-sm",
+    },
+    {
+      size: "md",
+      iconOnly: false,
+      className: "text-sm",
+    },
+    {
+      size: "lg",
+      iconOnly: false,
+      className: "text-base",
+    },
+    {
+      size: "xl",
+      iconOnly: false,
+      className: "text-base",
+    },
   ],
 });
 
diff --git a/packages/react-ui/src/components/close-button/close-button.tsx b/packages/react-ui/src/components/close-button/close-button.tsx
@@ -23,6 +23,12 @@ export type CloseButtonProps = {
    */
   size?: string;
 
+  /**
+   * 按钮圆角
+   * @default true
+   */
+  radius?: number | boolean | "full";
+
   /**
    * 无内边距
    * @default false
@@ -38,6 +44,7 @@ export const CloseButton = (props: PrimitiveProps<"button", CloseButtonProps, "t
     variant = "ghost",
     color = "neutral",
     size = "1.5em",
+    radius = "full",
     children,
     ...rest
   } = props;
@@ -50,12 +57,12 @@ export const CloseButton = (props: PrimitiveProps<"button", CloseButtonProps, "t
       color={color}
       iconOnly
       noPadding
-      radius={"full"}
+      radius={radius}
       aria-label="关闭"
-      className={tx("leading-none", !noPadding && "p-1", className)}
+      className={tx(!noPadding && "p-1", className)}
       {...rest}
     >
-      {children || <CloseIcon size={size} />}
+      {children || <CloseIcon className={"-mb-[.1em]"} size={size} />}
     </Button>
   );
 };
diff --git a/packages/react-ui/src/components/input/input.styles.ts b/packages/react-ui/src/components/input/input.styles.ts
@@ -1,11 +1,48 @@
+import { tv } from "../../utils";
+
+export const inputHeightStyles = {
+  xs: "py-[5px] min-h-7",
+  sm: "py-[5px] min-h-8",
+  md: "py-[5px] min-h-9",
+  lg: "py-[7px] min-h-10",
+  xl: "py-[7px] min-h-11",
+};
+
 export const inputSizeStyles = {
-  xs: "px-2.5 py-[5px]",
-  sm: "px-3 py-[5px]",
-  md: "px-3.5 py-[5px]",
-  lg: "px-4 py-[7px]",
-  xl: "px-5 py-[7px]",
+  xs: "px-2.5",
+  sm: "px-2.5",
+  md: "px-3",
+  lg: "px-3.5",
+  xl: "px-3.5",
 };
 
+export const inputStyles = tv({
+  base: [
+    "relative inline-flex items-center rounded-md border",
+    "outline-1 outline-transparent transition-colors",
+    "focus-within:border-bg-primary-emphasis focus-within:outline-bg-primary-emphasis/70",
+  ],
+  variants: {
+    disabled: {
+      true: "opacity-60",
+    },
+    invalid: {
+      true: "border-bd-invalid",
+      false: "border-bd-normal",
+    },
+    fullWidth: {
+      true: "w-full",
+    },
+  },
+  compoundVariants: [
+    {
+      disabled: false,
+      invalid: false,
+      className: "not-focus-within:hover:border-bd-hovered",
+    },
+  ],
+});
+
 export type InputSize = keyof typeof inputSizeStyles;
 
 export const inputAffixDefaultSizes = {
diff --git a/packages/react-ui/src/components/input/input.tsx b/packages/react-ui/src/components/input/input.tsx
@@ -2,14 +2,20 @@ import { type ChangeEvent, type CSSProperties, type ReactNode, useRef } from "re
 import { useControllableState, useMergeRefs } from "../../hooks";
 import type { PrimitiveProps } from "../../primitives";
 import { inputTextShareStyles } from "../../shared/styles";
-import type { FormFieldProps } from "../../shared/types";
+import type { FormInputFieldProps } from "../../shared/types";
 import { tx } from "../../utils";
 import { InputAffix } from "./input-affix";
 import { type InputGroupContextValue, useInputGroup } from "./input-group-context";
-import { inputAffixDefaultSizes, inputGroupStyles, inputSizeStyles } from "./input.styles";
+import {
+  inputAffixDefaultSizes,
+  inputGroupStyles,
+  inputHeightStyles,
+  inputSizeStyles,
+  inputStyles,
+} from "./input.styles";
 
 export type InputProps = Partial<InputGroupContextValue> &
-  FormFieldProps & {
+  FormInputFieldProps & {
     /**
      * 可控值
      */
@@ -26,23 +32,6 @@ export type InputProps = Partial<InputGroupContextValue> &
      */
     onChange?: (value: string | number) => void;
 
-    /**
-     * 是否无效
-     * @default false
-     */
-    invalid?: boolean;
-
-    /**
-     * 占位符文本
-     */
-    placeholder?: string;
-
-    /**
-     * 是否全宽度
-     * @default false
-     */
-    fullWidth?: boolean;
-
     /**
      * 前置元素
      */
@@ -118,14 +107,8 @@ export const Input = (props: PrimitiveProps<"input", InputProps, "children">) =>
   return (
     <div
       className={tx(
-        "relative inline-flex h-fit items-center rounded-md border",
-        "outline-1 outline-transparent transition-colors",
-        "focus-within:border-bg-primary-emphasis focus-within:outline-bg-primary-emphasis/70",
-        fullWidth && "w-full",
+        inputStyles({ disabled, invalid, fullWidth }),
         group && [inputGroupStyles, "focus-within:z-1"],
-        invalid ? "border-bd-invalid" : "border-bd-normal",
-        !disabled && !invalid && "not-focus-within:hover:border-bd-hovered",
-        disabled && "opacity-60",
         className,
       )}
       style={
@@ -143,6 +126,7 @@ export const Input = (props: PrimitiveProps<"input", InputProps, "children">) =>
           "bg-bg-normal rounded-md transition-colors",
           disabled && "bg-bg-subtlest/60",
           inputSizeStyles[size],
+          inputHeightStyles[size],
           inputTextShareStyles[size],
           prefix && "ps-(--pw)",
           suffix && "pe-(--sw)",
diff --git a/packages/react-ui/src/components/number-input/number-input.tsx b/packages/react-ui/src/components/number-input/number-input.tsx
@@ -23,6 +23,7 @@ export type NumberInputProps = Omit<
    * onChange 回调
    */
   onChange?: (value: number | undefined) => void;
+
   /**
    * 最小值
    * @default Number.MIN_SAFE_INTEGER
diff --git a/packages/react-ui/src/components/select/native-select.tsx b/packages/react-ui/src/components/select/native-select.tsx
@@ -1,17 +1,11 @@
 import type { PrimitiveProps } from "../../primitives";
 import { AngleDownIcon } from "../../shared/icons";
 import { inputTextShareStyles } from "../../shared/styles";
-import type { FormFieldProps } from "../../shared/types";
+import type { FormInputFieldProps } from "../../shared/types";
 import { tx } from "../../utils";
 import { type SelectSize, selectSizeStyles } from "./select.styles";
 
-export type NativeSelectProps = FormFieldProps & {
-  /**
-   * 是否无效
-   * @default false
-   */
-  invalid?: boolean;
-
+export type NativeSelectProps = FormInputFieldProps & {
   /**
    * 大小
    * @default 'md'
diff --git a/packages/react-ui/src/shared/types.ts b/packages/react-ui/src/shared/types.ts
@@ -89,3 +89,22 @@ export type FormFieldProps = {
    */
   readOnly?: boolean;
 };
+
+export type FormInputFieldProps = FormFieldProps & {
+  /**
+   * 是否无效
+   * @default false
+   */
+  invalid?: boolean;
+
+  /**
+   * 占位符文本
+   */
+  placeholder?: string;
+
+  /**
+   * 是否全宽度
+   * @default false
+   */
+  fullWidth?: boolean;
+};
diff --git a/website/src/components/color-mode-toggle.tsx b/website/src/components/color-mode-toggle.tsx
@@ -37,7 +37,7 @@ export const ColorModeToggle = () => {
           <Button aria-label={"颜色模式"} color={"neutral"} variant={"ghost"} size={"sm"} iconOnly {...props} />
         )}
       >
-        <SpriteIcon size={"1.5em"} name={colorModes[colorMode]?.icon} />
+        <SpriteIcon size={"1.325em"} name={colorModes[colorMode]?.icon} />
       </DropdownMenuTrigger>
       <DropdownMenuContent className={"text-sm"}>
         <DropdownMenuArrow />
diff --git a/website/src/components/site-navbar.tsx b/website/src/components/site-navbar.tsx
@@ -71,7 +71,7 @@ export const SiteNavbar = () => {
                     rel={"noreferrer"}
                     {...props}
                   >
-                    <SpriteIcon size={"1.5em"} name={"github"} />
+                    <SpriteIcon size={"1.325em"} name={"github"} />
                   </a>
                 )}
                 {...props}
diff --git a/website/src/components/sprite-icon.tsx b/website/src/components/sprite-icon.tsx
@@ -12,7 +12,7 @@ export const SpriteIcon = (props: SpriteIconProps) => {
   const { name, size = "1em", color, className } = props;
 
   return (
-    <svg style={{ width: size }} className={tx("mb-[-.1em] aspect-square", className)}>
+    <svg style={{ width: size }} className={tx("aspect-square", className)}>
       <use color={color} href={`${spriteIcons}#${name}`} />
     </svg>
   );
diff --git a/website/src/routes/_index.tsx b/website/src/routes/_index.tsx
@@ -22,7 +22,7 @@ export default function Index() {
           size={"xl"}
           render={(props) => (
             <a {...props} href="https://github.com/huijiewei/resolid-react-ui" target="_blank" rel="noreferrer">
-              <SpriteIcon size={"1.5em"} className={"me-2"} name={"github"} />
+              <SpriteIcon size={"1.325em"} className={"me-2"} name={"github"} />
               Github
             </a>
           )}
diff --git a/website/src/routes/docs/_mdx/components/input.mdx b/website/src/routes/docs/_mdx/components/input.mdx
@@ -65,12 +65,12 @@ import { Input } from "@resolid/react-ui";
 
 export default function App() {
   return (
-    <div className={"flex flex-row items-center gap-3"}>
-      <Input size={"xs"} defaultValue={"XS 超小"} placeholder={"XS 超小"} />
-      <Input size={"sm"} defaultValue={"SM 小型"} />
-      <Input defaultValue={"普通输入框"} />
-      <Input size={"lg"} defaultValue={"LG 大型"} />
-      <Input size={"xl"} defaultValue={"XL 超大"} />
+    <div className={"flex flex-col gap-3"}>
+      <Input size={"xs"} placeholder={"XS 超小"} />
+      <Input size={"sm"} placeholder={"SM 小型"} />
+      <Input placeholder={"默认大小"} />
+      <Input size={"lg"} placeholder={"LG 大型"} />
+      <Input size={"xl"} placeholder={"XL 超大"} />
     </div>
   );
 }
@@ -99,7 +99,7 @@ export default function App() {
             size={"xs"}
             iconOnly
           >
-            <SpriteIcon size={"1.375em"} name={"search"} />
+            <SpriteIcon size={"1.125em"} name={"search"} />
           </Button>
         }
       />
diff --git a/website/src/routes/docs/_mdx/components/tabs.mdx b/website/src/routes/docs/_mdx/components/tabs.mdx
@@ -197,10 +197,12 @@ export default function App() {
         {tabs.map((tab) => {
           return (
             <TabsTab
-              render={(props) => <span {...props} />}
+              render={(props) => <div {...props} />}
               key={tab.id}
               value={tab.id}
-              className={"active:bg-bg-subtle select-none rounded-md pe-1 ps-3"}
+              className={
+                "active:bg-bg-subtle inline-flex select-none items-center rounded-md pe-1 ps-3"
+              }
             >
               {tab.title}
               <CloseButton

Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,7 @@ export const ColorModeToggle = () => {`
`37`	`37`	`<Button aria-label={"颜色模式"} color={"neutral"} variant={"ghost"} size={"sm"} iconOnly {...props} />`
`38`	`38`	`)}`
`39`	`39`	`>`
`40`		`- <SpriteIcon size={"1.5em"} name={colorModes[colorMode]?.icon} />`
	`40`	`+ <SpriteIcon size={"1.325em"} name={colorModes[colorMode]?.icon} />`
`41`	`41`	`</DropdownMenuTrigger>`
`42`	`42`	`<DropdownMenuContent className={"text-sm"}>`
`43`	`43`	`<DropdownMenuArrow />`
Original file line number	Diff line number	Diff line change
`@@ -71,7 +71,7 @@ export const SiteNavbar = () => {`
`71`	`71`	`rel={"noreferrer"}`
`72`	`72`	`{...props}`
`73`	`73`	`>`
`74`		`- <SpriteIcon size={"1.5em"} name={"github"} />`
	`74`	`+ <SpriteIcon size={"1.325em"} name={"github"} />`
`75`	`75`	`</a>`
`76`	`76`	`)}`
`77`	`77`	`{...props}`