feat(Input): invalid styling

kripod · Jul 12, 2024 · ad0ce88 · ad0ce88
1 parent c92781c
commit ad0ce88
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/src/components/Input.stories.tsx b/src/components/Input.stories.tsx
@@ -15,6 +15,7 @@ export const Basic = {
   args: {
     defaultValue: "",
     placeholder: "Placeholder",
+    "aria-invalid": false,
     readOnly: false,
     disabled: false,
   },
@@ -24,6 +25,7 @@ export const Interactivity = {
   render: () => (
     <Stack>
       <Input defaultValue="Focused" />
+      <Input defaultValue="Invalid" aria-invalid />
       <Input value="Read-only" readOnly />
       <Input placeholder="Placeholder" />
       <Input value="Disabled" disabled />

diff --git a/src/components/Input.tsx b/src/components/Input.tsx
@@ -18,7 +18,7 @@ export const Input = forwardRef(function Input(
       className={clsx(
         className,
         controlClassName({ size }),
-        "bg-ui-neutral-50 text-ui-neutral-800 ring-1 ring-inset ring-ui-neutral-600 placeholder:text-ui-neutral-500",
+        "bg-ui-neutral-50 text-ui-neutral-800 ring-1 ring-inset ring-ui-neutral-600 placeholder:text-ui-neutral-500 aria-invalid:ring-2 aria-invalid:ring-ui-danger-600",
         size === "sm" && "px-2.5",
         size === "md" && "px-3",
         size === "lg" && "px-4 font-medium",

diff --git a/src/tailwind-preset.ts b/src/tailwind-preset.ts
@@ -15,6 +15,9 @@ export default {
   theme: {
     colors,
     extend: {
+      aria: {
+        invalid: 'invalid="true"',
+      },
       borderColor: ({ theme }) => ({
         DEFAULT: theme("colors.ui.neutral-200") as string,
       }),