Hello there.
Hello there.
Pick a date
Required
"`; +exports[`snapshots > DateField — manually labelled + described 1`] = `"Pick a date
Required
"`; -exports[`snapshots > DatePicker — closed 1`] = `"We will never share your email.
We will never share your email.
{errorMessage}
diff --git a/packages/core/src/components/button/button.test.tsx b/packages/core/src/components/button/button.test.tsx index ec37bdd6..d18a4c3b 100644 --- a/packages/core/src/components/button/button.test.tsx +++ b/packages/core/src/components/button/button.test.tsx @@ -1,3 +1,6 @@ +import { readFileSync } from "node:fs"; +import { dirname, join } from "node:path"; +import { fileURLToPath } from "node:url"; import { afterEach, describe, expect, it, vi } from "vitest"; import { cleanup, render, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; @@ -98,12 +101,41 @@ describe("Button", () => { expect(onClick).toHaveBeenCalled(); }); + it("destructive variant uses only bridged danger utilities", () => { + // Precompiled `astw:` utilities emit no CSS when their token is missing + // from the Tailwind bridge, so check every danger class the variant uses. + const bridge = readFileSync( + join(dirname(fileURLToPath(import.meta.url)), "../../assets/theme.bridge.css"), + "utf8", + ); + render(); + const classes = screen.getByRole("button").className.split(/\s+/); + + expect(classes.some((c) => c.includes("destructive"))).toBe(false); + expect(classes).toContain("astw:bg-danger-solid"); + expect(classes).toContain("astw:text-danger-contrast"); + expect(classes).toContain("astw:hover:bg-danger-solid-hover"); + + const tokens = classes + .map( + (c) => + /^astw:(?:dark:)?(?:hover:|focus-visible:)?(?:bg|text|ring)-(danger-[a-z-]+)/.exec( + c, + )?.[1], + ) + .filter((t): t is string => t !== undefined); + expect(tokens.length).toBeGreaterThanOrEqual(3); + for (const token of tokens) { + expect(bridge).toContain(`--color-${token}:`); + } + }); + it("renders different variants", () => { const { rerender } = render(); expect(screen.getByRole("button").className).toContain("bg-primary"); rerender(); - expect(screen.getByRole("button").className).toContain("bg-destructive"); + expect(screen.getByRole("button").className).toContain("bg-danger-solid"); rerender(); expect(screen.getByRole("button").className).toContain("border"); diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx index a99167cb..a4d5773f 100644 --- a/packages/core/src/components/button/button.tsx +++ b/packages/core/src/components/button/button.tsx @@ -6,7 +6,7 @@ import { cn } from "@/lib/utils"; import { mergeRefs, useToolbarItem } from "../toolbar/toolbar"; const buttonVariants = cva( - "astw:inline-flex astw:cursor-pointer astw:items-center astw:justify-center astw:gap-2 astw:whitespace-nowrap astw:rounded-md astw:text-sm astw:font-medium astw:transition-all astw:disabled:pointer-events-none astw:disabled:opacity-50 astw:[&_svg]:pointer-events-none astw:[&_svg:not([class*='size-'])]:size-4 astw:shrink-0 astw:[&_svg]:shrink-0 astw:outline-none astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:aria-invalid:ring-destructive/20 astw:dark:aria-invalid:ring-destructive/40 astw:aria-invalid:border-destructive", + "astw:inline-flex astw:cursor-pointer astw:items-center astw:justify-center astw:gap-2 astw:whitespace-nowrap astw:rounded-md astw:text-sm astw:font-medium astw:transition-all astw:disabled:pointer-events-none astw:disabled:opacity-50 astw:[&_svg]:pointer-events-none astw:[&_svg:not([class*='size-'])]:size-4 astw:shrink-0 astw:[&_svg]:shrink-0 astw:outline-none astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:aria-invalid:ring-danger-solid/20 astw:dark:aria-invalid:ring-danger-solid/40 astw:aria-invalid:border-danger-solid", { variants: { /** Visual style variant */ @@ -14,7 +14,7 @@ const buttonVariants = cva( default: "astw:bg-primary astw:text-primary-foreground astw:shadow-xs astw:hover:bg-primary/90", destructive: - "astw:bg-destructive astw:text-white astw:shadow-xs astw:hover:bg-destructive/90 astw:focus-visible:ring-destructive/20 astw:dark:focus-visible:ring-destructive/40 astw:dark:bg-destructive/60", + "astw:bg-danger-solid astw:text-danger-contrast astw:shadow-xs astw:hover:bg-danger-solid-hover astw:focus-visible:ring-danger-solid/20 astw:dark:focus-visible:ring-danger-solid/40", outline: "astw:border astw:border-border astw:bg-background astw:shadow-xs astw:hover:bg-accent astw:hover:text-accent-foreground astw:dark:bg-input/30 astw:dark:border-input astw:dark:hover:bg-input/50", secondary: diff --git a/packages/core/src/components/checkbox/checkbox.test.tsx b/packages/core/src/components/checkbox/checkbox.test.tsx index 70c8e17e..1baf2984 100644 --- a/packages/core/src/components/checkbox/checkbox.test.tsx +++ b/packages/core/src/components/checkbox/checkbox.test.tsx @@ -127,7 +127,7 @@ describe("Checkbox", () => { render({error}
} + {error &&{error}
}{error}
} + {error &&{error}
} ); } @@ -1980,7 +1980,7 @@ function TemporalFilterEditor({ value={localValueMax} onChange={setLocalValueMax} /> - {betweenError &&{betweenError}
} + {betweenError &&{betweenError}
} ) : (+ *
* {state.validity.typeMismatch * ? "Please enter a valid URL (e.g. https://example.com)" * : "This field is required."} diff --git a/packages/core/src/components/input/input.tsx b/packages/core/src/components/input/input.tsx index 1ee7d950..ab06ba45 100644 --- a/packages/core/src/components/input/input.tsx +++ b/packages/core/src/components/input/input.tsx @@ -29,7 +29,7 @@ function Input({ className, type, ref: forwardedRef, ...props }: InputProps) { className={cn( inputBaseClasses, "astw:file:text-foreground astw:file:inline-flex astw:file:h-7 astw:file:border-0 astw:file:bg-transparent astw:file:text-sm astw:file:font-medium", - "astw:aria-invalid:ring-destructive/20 astw:dark:aria-invalid:ring-destructive/40 astw:aria-invalid:border-destructive", + "astw:aria-invalid:ring-danger-solid/20 astw:dark:aria-invalid:ring-danger-solid/40 astw:aria-invalid:border-danger-solid", className, )} {...props} diff --git a/packages/core/src/components/internals/default-error-boundary/default-error-boundary.tsx b/packages/core/src/components/internals/default-error-boundary/default-error-boundary.tsx index 9f1d49f4..aa8c01ba 100644 --- a/packages/core/src/components/internals/default-error-boundary/default-error-boundary.tsx +++ b/packages/core/src/components/internals/default-error-boundary/default-error-boundary.tsx @@ -17,7 +17,7 @@ export const DefaultErrorBoundary = () => { return (
{t("error404Body")}
@@ -41,7 +41,7 @@ export const DefaultErrorBoundary = () => { return ({message}
diff --git a/packages/core/src/components/textarea/textarea.tsx b/packages/core/src/components/textarea/textarea.tsx index 5d7802b1..914cc56f 100644 --- a/packages/core/src/components/textarea/textarea.tsx +++ b/packages/core/src/components/textarea/textarea.tsx @@ -95,8 +95,8 @@ function Textarea({ className, ...props }: TextareaProps) { // `Field.Root` or from a shadcn-style `aria-invalid` on the control. className={cn( textareaBaseClasses, - "astw:data-invalid:border-destructive astw:data-invalid:ring-destructive/20 astw:dark:data-invalid:ring-destructive/40", - "astw:aria-invalid:border-destructive astw:aria-invalid:ring-destructive/20 astw:dark:aria-invalid:ring-destructive/40", + "astw:data-invalid:border-danger-solid astw:data-invalid:ring-danger-solid/20 astw:dark:data-invalid:ring-danger-solid/40", + "astw:aria-invalid:border-danger-solid astw:aria-invalid:ring-danger-solid/20 astw:dark:aria-invalid:ring-danger-solid/40", className, )} // `Field.Control`'s props are typed against its default `` tag, so