Rename hasError to invalid

Amsterdam · May 17, 2024 · e988b2e · e988b2e
1 parent 2dcc27c
commit e988b2e
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 15 deletions.
diff --git a/packages/css/src/components/field/field.scss b/packages/css/src/components/field/field.scss
@@ -10,7 +10,7 @@
   gap: var(--ams-field-gap);
 }
 
-.ams-field--has-error {
-  border-inline-start: var(--ams-field-has-error-border-inline-start);
-  padding-inline-start: var(--ams-field-has-error-padding-inline-start);
+.ams-field--invalid {
+  border-inline-start: var(--ams-field-invalid-border-inline-start);
+  padding-inline-start: var(--ams-field-invalid-padding-inline-start);
 }
diff --git a/packages/react/src/Field/Field.test.tsx b/packages/react/src/Field/Field.test.tsx
@@ -27,10 +27,10 @@ describe('Field', () => {
   })
 
   it('renders with the error class', () => {
-    const { container } = render(<Field hasError />)
+    const { container } = render(<Field invalid />)
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('ams-field--has-error')
+    expect(component).toHaveClass('ams-field--invalid')
   })
 
   it('supports ForwardRef in React', () => {

diff --git a/packages/react/src/Field/Field.tsx b/packages/react/src/Field/Field.tsx
@@ -9,12 +9,12 @@ import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
 export type FieldProps = {
   /** Whether the field has an input with a validation error */
-  hasError?: boolean
+  invalid?: boolean
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
 export const Field = forwardRef(
-  ({ children, className, hasError, ...restProps }: FieldProps, ref: ForwardedRef<HTMLDivElement>) => (
-    <div {...restProps} ref={ref} className={clsx('ams-field', hasError && 'ams-field--has-error', className)}>
+  ({ children, className, invalid, ...restProps }: FieldProps, ref: ForwardedRef<HTMLDivElement>) => (
+    <div {...restProps} ref={ref} className={clsx('ams-field', invalid && 'ams-field--invalid', className)}>
       {children}
     </div>
   ),

diff --git a/proprietary/tokens/src/components/ams/field.tokens.json b/proprietary/tokens/src/components/ams/field.tokens.json
@@ -4,7 +4,7 @@
       "gap": {
         "value": "{ams.space.stack.sm}"
       },
-      "has-error": {
+      "invalid": {
         "border-inline-start": {
           "value": "3px solid {ams.color.primary-red}"
         },

diff --git a/storybook/src/components/Field/Field.stories.tsx b/storybook/src/components/Field/Field.stories.tsx
@@ -11,15 +11,15 @@ const meta = {
   title: 'Components/Forms/Field',
   component: Field,
   args: {
-    hasError: false,
+    invalid: false,
   },
   render: (args) => (
-    <Field hasError={args.hasError}>
+    <Field invalid={args.invalid}>
       <Label htmlFor="input1">Waar gaat het om?</Label>
       <Paragraph id="description1" size="small">
         Typ geen persoonsgegevens in deze omschrijving. We vragen dit later in dit formulier aan u.
       </Paragraph>
-      <TextInput id="input1" aria-describedby="description1" aria-invalid={args.hasError ? true : undefined} />
+      <TextInput id="input1" aria-describedby="description1" aria-invalid={args.invalid ? true : undefined} />
     </Field>
   ),
 } satisfies Meta<typeof Field>
@@ -31,14 +31,14 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {}
 
 export const WithError: Story = {
-  args: { hasError: true },
+  args: { invalid: true },
   render: (args) => (
-    <Field hasError={args.hasError}>
+    <Field invalid={args.invalid}>
       <Label htmlFor="input2">Waar gaat het om?</Label>
       <Paragraph id="description2" size="small">
         Typ geen persoonsgegevens in deze omschrijving. We vragen dit later in dit formulier aan u.
       </Paragraph>
-      <TextInput id="input2" aria-describedby="description2" aria-invalid={args.hasError ? true : undefined} />
+      <TextInput id="input2" aria-describedby="description2" aria-invalid={args.invalid ? true : undefined} />
     </Field>
   ),
 }