Update comet-uswds to latest. Update sign in form to use form compone…

…nt props instead of explicit wrapper and label components.
MetroStar · Aug 21, 2024 · 6a1f073 · 6a1f073
1 parent 8b74afd
commit 6a1f073
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 37 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
   "dependencies": {
     "@metrostar/comet-data-viz": "1.1.5",
     "@metrostar/comet-extras": "1.4.0",
-    "@metrostar/comet-uswds": "2.4.1",
+    "@metrostar/comet-uswds": "3.0.0-beta.0",
     "@tanstack/react-query": "5.51.24",
     "@tanstack/react-table": "8.20.1",
     "@uswds/uswds": "3.8.2",

diff --git a/src/pages/sign-in/sign-in.tsx b/src/pages/sign-in/sign-in.tsx
@@ -2,10 +2,7 @@ import {
   Alert,
   Button,
   ButtonGroup,
-  ErrorMessages,
   Form,
-  FormGroup,
-  Label,
   TextInput,
 } from '@metrostar/comet-uswds';
 import { FormInput } from '@src/types/form';
@@ -58,36 +55,44 @@ export const SignIn = (): React.ReactElement => {
             </Alert>
           )}
           <Form id="login-form" onSubmit={handleSubmit(onSubmit)}>
-            <FormGroup>
-              <Label htmlFor="username">Username</Label>
-              <Controller
-                name="username"
-                control={control}
-                rules={REQUIRED_FORM_FIELDS_RULES}
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                render={({ field: { ref: _, ...field } }) => (
-                  <TextInput {...field} id="username" autoFocus />
-                )}
-              />
-              {errors.username?.message && (
-                <ErrorMessages errors={[errors.username.message]} />
+            <Controller
+              name="username"
+              control={control}
+              rules={REQUIRED_FORM_FIELDS_RULES}
+              // eslint-disable-next-line @typescript-eslint/no-unused-vars
+              render={({ field: { ref: _, ...field } }) => (
+                <TextInput
+                  {...field}
+                  id="username"
+                  label="Username"
+                  errors={
+                    errors.username?.message
+                      ? errors.username.message
+                      : undefined
+                  }
+                  autoFocus
+                />
               )}
-            </FormGroup>
-            <FormGroup>
-              <Label htmlFor="password">Password</Label>
-              <Controller
-                name="password"
-                control={control}
-                rules={PASSWORD_RULES}
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                render={({ field: { ref: _, ...field } }) => (
-                  <TextInput {...field} id="password" type="password" />
-                )}
-              />
-              {errors.password?.message && (
-                <ErrorMessages errors={[errors.password.message]} />
+            />
+            <Controller
+              name="password"
+              control={control}
+              rules={PASSWORD_RULES}
+              // eslint-disable-next-line @typescript-eslint/no-unused-vars
+              render={({ field: { ref: _, ...field } }) => (
+                <TextInput
+                  {...field}
+                  id="password"
+                  type="password"
+                  label="Password"
+                  errors={
+                    errors.password?.message
+                      ? errors.password.message
+                      : undefined
+                  }
+                />
               )}
-            </FormGroup>
+            />
             <ButtonGroup>
               <Button
                 id="submit"