From 88e435fc65f9acd0433a9540a5baa72b52980905 Mon Sep 17 00:00:00 2001
From: Sean Hammond <seanh@users.noreply.github.com>
Date: Fri, 5 Jul 2024 12:40:42 +0100
Subject: [PATCH] Use frontend-shared components in CreateGroupForm

Use components from our component library (specifically `<Input>`,
`<Textarea>` and `<Button>`) in the `<CreateGroupForm>`.

Instead of using the HTML from h's legacy forms. This legacy HTML
doesn't work anymore anyway because the CSS it depends on is now
isolated from the Preact app by shadow DOM.
---
 .../components/CreateGroupForm.tsx            | 25 +++++++------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/h/static/scripts/group-forms/components/CreateGroupForm.tsx b/h/static/scripts/group-forms/components/CreateGroupForm.tsx
index f548fbcdea0..b9c922823be 100644
--- a/h/static/scripts/group-forms/components/CreateGroupForm.tsx
+++ b/h/static/scripts/group-forms/components/CreateGroupForm.tsx
@@ -1,3 +1,5 @@
+import { Button, Input, Textarea } from '@hypothesis/frontend-shared';
+
 export default function CreateGroupForm() {
   return (
     <>
@@ -5,32 +7,23 @@ export default function CreateGroupForm() {
 
       <form>
         <div>
-          <label for="name">
-            Name <span>*</span>
-          </label>
-          <input type="text" id="name" autofocus autocomplete="off" required />
-          <span>0/25</span>
+          <label for="name">Name*</label>
+          <Input id="name" autofocus autocomplete="off" required />
+          0/25
         </div>
 
         <div>
           <label for="description">Description</label>
-          <textarea id="description"></textarea>
-          <span>0/250</span>
+          <Textarea id="description" />
+          0/250
         </div>
 
         <div>
-          <div>
-            <button>Create group</button>
-          </div>
+          <Button variant="primary">Create group</Button>
         </div>
       </form>
 
-      <footer>
-        <span>
-          <span>*</span>
-          <span>Required</span>
-        </span>
-      </footer>
+      <footer>*Required</footer>
     </>
   );
 }