feat: semantic labels for form

AdaptiveConsulting · Jan 8, 2025 · b7a5837 · b7a5837
1 parent a2ee08b
commit b7a5837
Show file tree

Hide file tree

Showing 5 changed files with 7,380 additions and 1,400 deletions.
diff --git a/packages/client/src/client/App/Credit/NewRfq/NewRfqForm.tsx b/packages/client/src/client/App/Credit/NewRfq/NewRfqForm.tsx
@@ -52,23 +52,30 @@ export const NewRfqForm = () => {
 
       <Row>
         <FormControl>
-          <Label>Quantity (000)</Label>
+          <Label htmlFor="quantity">Quantity (000)</Label>
           <TextInput
+            name="quantity"
+            id="quantity"
             placeholder="1000"
             onChange={setQuantity}
             value={quantity ? formatter(quantity) : ""}
           />
         </FormControl>
 
         <FormControl>
-          <Label>RFQ Duration</Label>
-          <TextInput placeholder="2 Minutes" disabled />
+          <Label htmlFor="duration">RFQ Duration</Label>
+          <TextInput
+            name="duration"
+            id="duration"
+            placeholder="2 Minutes"
+            disabled
+          />
         </FormControl>
       </Row>
 
       <FormControl>
-        <Label>Fill Type</Label>
-        <TextInput placeholder="All or None" disabled />
+        <Label htmlFor="type">Fill Type</Label>
+        <TextInput name="type" id="type" placeholder="All or None" disabled />
       </FormControl>
 
       <FormControl>

diff --git a/packages/client/src/client/components/Form/CheckBoxInput.tsx/CheckBoxInput.tsx b/packages/client/src/client/components/Form/CheckBoxInput.tsx/CheckBoxInput.tsx
@@ -40,15 +40,18 @@ export const CheckBoxInput = ({ name, checked, onChange }: Props) => {
   return (
     <CheckBoxInputWrapper key={name}>
       <CheckBox
+        id={name}
         checked={checked}
         onChange={({ target }) => onChange(target.checked)}
       />
-      <Typography
-        variant="Text xs/Regular"
-        color="Colors/Text/text-secondary (700)"
-      >
-        {name}
-      </Typography>
+      <label htmlFor={name}>
+        <Typography
+          variant="Text xs/Regular"
+          color="Colors/Text/text-secondary (700)"
+        >
+          {name}
+        </Typography>
+      </label>
     </CheckBoxInputWrapper>
   )
 }
diff --git a/packages/client/src/client/components/Form/FormControl/Label.tsx b/packages/client/src/client/components/Form/FormControl/Label.tsx
@@ -1,15 +1,11 @@
 import styled from "styled-components"
 
-import { Typography } from "../../Typography"
+const LabelText = styled.label(
+  ({ theme }) => theme.newTheme.textStyles["Text xs/Regular"],
+)
 
-const _Label = styled(Typography)`
+export const Label = styled(LabelText)`
+  color: ${({ theme }) =>
+    theme.newTheme.color["Colors/Text/text-tertiary (600)"]};
   margin-bottom: ${({ theme }) => theme.newTheme.spacing.xs};
 `
-
-export const Label = (props: React.ComponentProps<typeof Typography>) => (
-  <_Label
-    variant="Text xs/Regular"
-    color="Colors/Text/text-tertiary (600)"
-    {...props}
-  />
-)
diff --git a/packages/client/src/client/components/Form/TextInput.tsx b/packages/client/src/client/components/Form/TextInput.tsx
@@ -37,6 +37,8 @@ ${
 `
 
 interface Props {
+  name?: string
+  id?: string
   disabled?: boolean
   placeholder?: string
   value?: string