Input Field

apps/builder/app/auth/secret-login.tsx

@@ -1,4 +1,9 @@
-import { Button, Flex, TextField, theme } from "@webstudio-is/design-system";
+import {
+  Button,
+  Flex,
+  DeprecatedTextField,
+  theme,
+} from "@webstudio-is/design-system";
 import { CommitIcon } from "@webstudio-is/icons";
 import { useState } from "react";
 import { authPath } from "~/shared/router-utils";
@@ -18,7 +23,7 @@ export const SecretLogin = () => {
           gap: theme.spacing[5],
         }}
       >
-        <TextField
+        <DeprecatedTextField
           name="secret"
           type="text"
           minLength={2}

apps/builder/app/builder/features/breakpoints/breakpoints-editor.tsx

@@ -6,7 +6,7 @@ import type { Breakpoint } from "@webstudio-is/project-build";
 import {
   theme,
   Button,
-  TextField,
+  DeprecatedTextField,
   Flex,
   DeprecatedText2,
 } from "@webstudio-is/design-system";
@@ -60,7 +60,7 @@ const BreakpointEditorItem = ({
         gap="1"
         css={{ paddingLeft: theme.spacing[10], paddingRight: theme.spacing[9] }}
       >
-        <TextField
+        <DeprecatedTextField
           css={{ width: 100, flexGrow: 1 }}
           type="text"
           variant="ghost"
@@ -70,7 +70,7 @@ const BreakpointEditorItem = ({
           minLength={2}
           required
         />
-        <TextField
+        <DeprecatedTextField
           css={{ textAlign: "right", width: 50 }}
           variant="ghost"
           defaultValue={breakpoint.minWidth ?? breakpoint.maxWidth ?? 0}

apps/builder/app/builder/features/props-panel/controls/color.tsx

@@ -1,4 +1,9 @@
-import { Flex, TextField, theme, useId } from "@webstudio-is/design-system";
+import {
+  Flex,
+  DeprecatedTextField,
+  theme,
+  useId,
+} from "@webstudio-is/design-system";
 import {
   type ControlProps,
   getLabel,
@@ -35,7 +40,7 @@ export const ColorControl = ({
           width: theme.spacing[22],
         }}
       >
-        <TextField
+        <DeprecatedTextField
           id={id}
           value={localValue.value}
           onChange={(event) => localValue.set(event.target.value)}

apps/builder/app/builder/features/props-panel/controls/number.tsx

@@ -1,4 +1,9 @@
-import { Flex, TextField, theme, useId } from "@webstudio-is/design-system";
+import {
+  Flex,
+  DeprecatedTextField,
+  theme,
+  useId,
+} from "@webstudio-is/design-system";
 import {
   type ControlProps,
   getLabel,
@@ -37,7 +42,7 @@ export const NumberControl = ({
           width: theme.spacing[21],
         }}
       >
-        <TextField
+        <DeprecatedTextField
           id={id}
           type="number"
           value={localValue.value}

apps/builder/app/builder/features/props-panel/controls/text.tsx

@@ -1,5 +1,5 @@
 import {
-  TextField,
+  DeprecatedTextField,
   Flex,
   theme,
   useId,
@@ -38,7 +38,7 @@ const AsInput = ({
           width: theme.spacing[22],
         }}
       >
-        <TextField
+        <DeprecatedTextField
           id={id}
           value={localValue.value}
           onChange={(event) => localValue.set(event.target.value)}

apps/builder/app/builder/features/props-panel/controls/url.tsx

@@ -1,7 +1,7 @@
 import { useStore } from "@nanostores/react";
 import { pagesStore } from "~/shared/nano-states";
 import {
-  TextField,
+  DeprecatedTextField,
   Flex,
   theme,
   useId,
@@ -36,7 +36,7 @@ const BaseUrl = ({ prop, onChange, id }: BaseControlProps) => {
 
   return (
     <Flex css={{ py: theme.spacing[2] }} direction="column" align="stretch">
-      <TextField
+      <DeprecatedTextField
         id={id}
         value={localValue.value}
         placeholder="https://example.com/"

apps/builder/app/builder/features/props-panel/props-panel.tsx

@@ -9,7 +9,7 @@ import {
   ComboboxAnchor,
   ComboboxListbox,
   ComboboxListboxItem,
-  TextField,
+  DeprecatedTextField,
   SmallIconButton,
   Separator,
   Flex,
@@ -88,7 +88,7 @@ const PropsCombobox = ({
     <Combobox>
       <div {...combobox.getComboboxProps()}>
         <ComboboxAnchor>
-          <TextField
+          <DeprecatedTextField
             autoFocus
             {...combobox.getInputProps()}
             placeholder="Property"

apps/builder/app/builder/features/settings-panel/settings-panel.tsx

@@ -1,5 +1,10 @@
 import { useStore } from "@nanostores/react";
-import { Flex, Label, TextField, theme } from "@webstudio-is/design-system";
+import {
+  Flex,
+  Label,
+  DeprecatedTextField,
+  theme,
+} from "@webstudio-is/design-system";
 import { getComponentMeta } from "@webstudio-is/react-sdk";
 import { selectedInstanceStore } from "~/shared/nano-states";
 import { useSettingsLogic } from "./use-settings-logic";
@@ -15,7 +20,7 @@ export const SettingsPanel = () => {
     <Flex css={{ px: theme.spacing[9] }}>
       <Flex gap="1" direction="column" grow>
         <Label>Instance Name</Label>
-        <TextField
+        <DeprecatedTextField
           /* Key is required, otherwise when label is undefined, previous value stayed */
           key={selectedInstance.id}
           onBlur={handleBlur}

apps/builder/app/builder/features/sidebar-left/panels/pages/settings.tsx

@@ -20,7 +20,7 @@ import {
   Box,
   DeprecatedLabel,
   TextArea,
-  TextField,
+  DeprecatedTextField,
   styled,
   Flex,
   InputErrorsTooltip,
@@ -147,7 +147,7 @@ const FormFields = ({
       <Group>
         <DeprecatedLabel htmlFor={fieldIds.name}>Page Name</DeprecatedLabel>
         <InputErrorsTooltip errors={errors.name}>
-          <TextField
+          <DeprecatedTextField
             tabIndex={1}
             state={errors.name && "invalid"}
             id={fieldIds.name}
@@ -167,7 +167,7 @@ const FormFields = ({
         <Group>
           <DeprecatedLabel htmlFor={fieldIds.path}>Path</DeprecatedLabel>
           <InputErrorsTooltip errors={errors.path}>
-            <TextField
+            <DeprecatedTextField
               tabIndex={1}
               state={errors.path && "invalid"}
               id={fieldIds.path}
@@ -185,7 +185,7 @@ const FormFields = ({
       <Group>
         <DeprecatedLabel htmlFor={fieldIds.title}>Title</DeprecatedLabel>
         <InputErrorsTooltip errors={errors.title}>
-          <TextField
+          <DeprecatedTextField
             tabIndex={1}
             state={errors.title && "invalid"}
             id={fieldIds.title}

apps/builder/app/builder/features/style-panel/controls/font-family/font-family-control.tsx

@@ -1,4 +1,4 @@
-import { TextField } from "@webstudio-is/design-system";
+import { DeprecatedTextField } from "@webstudio-is/design-system";
 import { FontsManager } from "~/builder/shared/fonts-manager";
 import type { ControlProps } from "../../style-sections";
 import { FloatingPanel } from "~/builder/shared/floating-panel";
@@ -21,7 +21,7 @@ export const FontFamilyControl = ({
       content={<FontsManager value={toValue(value)} onChange={setValue} />}
       onOpenChange={setIsOpen}
     >
-      <TextField
+      <DeprecatedTextField
         defaultValue={toValue(value)}
         state={isOpen ? "active" : undefined}
       />

apps/builder/app/builder/features/style-panel/shared/color-picker.tsx

@@ -293,7 +293,7 @@ export const ColorPicker = ({
   return (
     <CssValueInput
       styleSource={styleSource}
-      icon={prefix}
+      prefix={prefix}
       property={property}
       value={value}
       intermediateValue={intermediateValue}

apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Flex, TextField } from "@webstudio-is/design-system";
+import { Flex, DeprecatedTextField } from "@webstudio-is/design-system";
 import type { StyleValue } from "@webstudio-is/css-data";
 import { CssValueInput, type IntermediateStyleValue } from "./css-value-input";
 import { action } from "@storybook/addon-actions";
@@ -135,7 +135,7 @@ export const WithUnits = () => {
           action("onAbort")();
         }}
       />
-      <TextField
+      <DeprecatedTextField
         readOnly
         value={
           value