New style for outline input fields

Author: samejr

apps/webapp/app/components/primitives/Input.tsx

@@ -44,6 +44,24 @@ const variants = {
     iconSize: "size-3 ml-0.5",
     accessory: "pr-0.5",
   },
+  "outline/large": {
+    container: "px-1 h-10 w-full rounded border border-grid-bright hover:border-charcoal-550",
+    input: "px-2 rounded text-sm",
+    iconSize: "size-4 ml-1",
+    accessory: "pr-1",
+  },
+  "outline/medium": {
+    container: "px-1 h-8 w-full rounded border border-grid-bright hover:border-charcoal-550",
+    input: "px-1 rounded text-sm",
+    iconSize: "size-4 ml-0.5",
+    accessory: "pr-1",
+  },
+  "outline/small": {
+    container: "px-1 h-6 w-full rounded border border-grid-bright hover:border-charcoal-550",
+    input: "px-1 rounded text-xs",
+    iconSize: "size-3 ml-0.5",
+    accessory: "pr-0.5",
+  },
 };
 
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {

apps/webapp/app/routes/storybook.input-fields/route.tsx

@@ -20,6 +20,9 @@ function InputFieldSet({ disabled }: { disabled?: boolean }) {
         <Input disabled={disabled} variant="medium" placeholder="Name" type="text" />
         <Input disabled={disabled} variant="small" placeholder="Name" type="text" />
         <Input disabled={disabled} variant="tertiary" placeholder="Name" type="text" />
+        <Input disabled={disabled} variant="outline/large" placeholder="Name" type="text" />
+        <Input disabled={disabled} variant="outline/medium" placeholder="Name" type="text" />
+        <Input disabled={disabled} variant="outline/small" placeholder="Name" type="text" />
       </div>
       <div className="m-8 flex w-64 flex-col gap-4">
         <Input
@@ -51,50 +54,6 @@ function InputFieldSet({ disabled }: { disabled?: boolean }) {
           accessory={<ShortcutKey shortcut={{ key: "k", modifiers: ["meta"] }} variant="small" />}
         />
       </div>
-      <div className="m-8 flex w-64 flex-col gap-4">
-        <Input
-          disabled={disabled}
-          variant="large"
-          placeholder="Search"
-          icon={<EnvironmentLabel environment={{ type: "DEVELOPMENT" }} />}
-          accessory={<ShortcutKey shortcut={{ key: "k", modifiers: ["meta"] }} variant="medium" />}
-        />
-        <Input
-          disabled={disabled}
-          variant="medium"
-          placeholder="Search"
-          icon={<EnvironmentLabel environment={{ type: "DEVELOPMENT" }} />}
-          accessory={<ShortcutKey shortcut={{ key: "k", modifiers: ["meta"] }} variant="medium" />}
-        />
-        <Input
-          disabled={disabled}
-          variant="small"
-          placeholder="Search"
-          icon={<EnvironmentLabel environment={{ type: "DEVELOPMENT" }} />}
-          accessory={<ShortcutKey shortcut={{ key: "k", modifiers: ["meta"] }} variant="small" />}
-        />
-        <Input
-          disabled={disabled}
-          variant="tertiary"
-          placeholder="Search"
-          icon={<EnvironmentLabel environment={{ type: "DEVELOPMENT" }} />}
-          accessory={<ShortcutKey shortcut={{ key: "k", modifiers: ["meta"] }} variant="small" />}
-        />
-        <Input
-          disabled={disabled}
-          variant="tertiary"
-          placeholder="Search"
-          icon={<EnvironmentLabel environment={{ type: "STAGING" }} />}
-          accessory={<ShortcutKey shortcut={{ key: "k", modifiers: ["meta"] }} variant="small" />}
-        />
-        <Input
-          disabled={disabled}
-          variant="tertiary"
-          placeholder="Search"
-          icon={<EnvironmentLabel environment={{ type: "PRODUCTION" }} />}
-          accessory={<ShortcutKey shortcut={{ key: "k", modifiers: ["meta"] }} variant="small" />}
-        />
-      </div>
     </div>
   );
 }