input: fixes ::autofill styles so that it does not break ::placeholde…

…r text color (#375) * input: fixes ::autofill styles so that it does not break ::placeholder text color * bump patch version
ngrok-oss · Dec 11, 2024 · ca18d9f · ca18d9f · vercel · Dec 11, 2024
1 parent 4b4d054
commit ca18d9f
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/apps/www/app/routes/components.input.tsx b/apps/www/app/routes/components.input.tsx
@@ -55,6 +55,10 @@ export default function Page() {
 							<p>Username</p>
 							<Input placeholder="Enter a username" />
 						</Label>
+						<Label className="block w-full max-w-80 space-y-1">
+							<p>Email</p>
+							<Input placeholder="Enter your email" autoComplete="email" />
+						</Label>
 						<div className="w-full max-w-80 space-y-2">
 							<p>Validation States:</p>
 							<div className="flex w-full flex-col gap-6">

diff --git a/packages/mantle/package.json b/packages/mantle/package.json
@@ -3,7 +3,7 @@
   "description": "mantle is ngrok's UI library and design system.",
   "author": "ngrok",
   "license": "MIT",
-  "version": "0.15.3",
+  "version": "0.15.4",
   "homepage": "https://mantle.ngrok.com",
   "repository": {
     "type": "git",

diff --git a/packages/mantle/src/components/input/input.tsx b/packages/mantle/src/components/input/input.tsx
@@ -146,7 +146,7 @@ const InputContainer = ({
 					"data-validation-success:border-success-600 has-[:focus-visible]:data-validation-success:border-success-600 has-[:focus-visible]:data-validation-success:ring-focus-success",
 					"data-validation-warning:border-warning-600 has-[:focus-visible]:data-validation-warning:border-warning-600 has-[:focus-visible]:data-validation-warning:ring-focus-warning",
 					"data-validation-error:border-danger-600 has-[:focus-visible]:data-validation-error:border-danger-600 has-[:focus-visible]:data-validation-error:ring-focus-danger",
-					"[-webkit-text-fill-color:hsl(var(--text-strong))] autofill:shadow-[inset_0_0_0px_1000px_hsl(var(--blue-50))] has-[:autofill]:bg-blue-50", // Autofill styling on the input itself and any children with autofill styling
+					"autofill:shadow-[inset_0_0_0px_1000px_hsl(var(--blue-50))] has-[:autofill]:bg-blue-50 has-[:autofill]:[-webkit-text-fill-color:hsl(var(--text-strong))]", // Autofill styling on the input itself and any children with autofill styling
 					className,
 				)}
 				onClick={() => {