feat(input): adds limited support for invalid and valid pesudo-class

Adds the correct styling for invalid and valid pesudo props. This using the :has selector in places
which has limitted support.

fix #269

Author: stuarthendren

src/components/FormControl/FormControl.stories.tsx

@@ -41,6 +41,7 @@ export const API_1: Story = () => {
   const [disabled, setDisabled] = useState(false)
   const [error, setError] = useState(false)
   const [valid, setValid] = useState(false)
+  const [native, setNative] = useState(false)
 
   const rotate = rotateCheckedState(setRequired)
 
@@ -67,6 +68,11 @@ export const API_1: Story = () => {
           onCheckedChange={setValid}
           label="Valid"
         ></Checkbox>
+        <Checkbox
+          checked={native}
+          onCheckedChange={setNative}
+          label="Native"
+        ></Checkbox>
       </Row>
 
       <FormControl>
@@ -77,6 +83,7 @@ export const API_1: Story = () => {
           error={error}
           valid={valid}
           disabled={disabled}
+          native={native}
           required={required === 'indeterminate' ? undefined : required}
         />
         <FormControlHelp
@@ -199,11 +206,55 @@ export const Example: Story = () => {
   )
 }
 
+/**
+ * The `native` prop can be added to allow the use of the native html `:invalid` and `:valid` pseudo-classes.
+ *
+ * This is not the default as can have negative user experience when required forms show initial error.
+ *
+ * This is useful for styling the inputs when using the native html validation attributes.
+ * The is added for checkbox, radio, and select inputs too but uses the :has selector which has limited support.
+ */
+export const Native: Story = () => {
+  return (
+    <Form onSubmit={withFormData(alert)}>
+      <FormControl>
+        <Input
+          name="email"
+          label="Email"
+          type="email"
+          placeholder="hello@committed.io"
+          minLength={3}
+          required
+          native
+        />
+        <FormControlHelp defaultText="Input your email address" />
+      </FormControl>
+      <FormControl>
+        <Input
+          name="password"
+          type="password"
+          label="Password"
+          pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$"
+          required
+          native
+          title="Password must have minimum eight characters, at least one letter, one number and one special character"
+        />
+        <FormControlHelp defaultText="Input your password" />
+      </FormControl>
+      <FormButton />
+    </Form>
+  )
+}
+
+/**
+ * Behavioural test/demo. Use the checkboxes to add these properties to all form elements.
+ */
 export const Controls: Story = () => {
   const [required, setRequired] = useState<CheckedState>('indeterminate')
   const [disabled, setDisabled] = useState(false)
   const [error, setError] = useState(false)
   const [valid, setValid] = useState(false)
+  const [native, setNative] = useState(false)
 
   const rotate = rotateCheckedState(setRequired)
 
@@ -212,6 +263,7 @@ export const Controls: Story = () => {
     valid,
     disabled,
     required: required === 'indeterminate' ? undefined : required,
+    native,
   }
 
   return (
@@ -237,6 +289,11 @@ export const Controls: Story = () => {
           onCheckedChange={setValid}
           label="Valid"
         ></Checkbox>
+        <Checkbox
+          checked={native}
+          onCheckedChange={setNative}
+          label="Native"
+        ></Checkbox>
       </Row>
 
       <Form onSubmit={withFormData(alert)}>
@@ -309,11 +366,15 @@ export const Controls: Story = () => {
   )
 }
 
+/**
+ * Behavioural test/demo with ids, to ensure elements are correctly referenced in aria. Use the checkboxes to add these properties to all form elements.
+ */
 export const WithIds: Story = () => {
   const [required, setRequired] = useState<CheckedState>('indeterminate')
   const [disabled, setDisabled] = useState(false)
   const [error, setError] = useState(false)
   const [valid, setValid] = useState(false)
+  const [native, setNative] = useState(false)
 
   const rotate = rotateCheckedState(setRequired)
 
@@ -322,6 +383,7 @@ export const WithIds: Story = () => {
     valid,
     disabled,
     required: required === 'indeterminate' ? undefined : required,
+    native,
   }
 
   return (
@@ -347,6 +409,11 @@ export const WithIds: Story = () => {
           onCheckedChange={setValid}
           label="Valid"
         ></Checkbox>
+        <Checkbox
+          checked={native}
+          onCheckedChange={setNative}
+          label="Native"
+        ></Checkbox>
       </Row>
 
       <Form onSubmit={withFormData(alert)}>

src/components/Input/inputStyles.ts

@@ -117,6 +117,29 @@ export const inputStyles = css({
         $$active: '$colors$success',
       },
     },
+    native: {
+      false: {},
+      true: {
+        '&:invalid': {
+          backgroundColor: '$errorBackground',
+          $$inactive: '$colors$errorLowlight',
+          $$active: '$colors$error',
+        },
+        '&:valid': {
+          $$inactive: '$colors$successLowlight',
+          $$active: '$colors$success',
+        },
+        '&:has(+select:invalid)': {
+          backgroundColor: '$errorBackground',
+          $$inactive: '$colors$errorLowlight',
+          $$active: '$colors$error',
+        },
+        '&:has(+select:valid)': {
+          $$inactive: '$colors$successLowlight',
+          $$active: '$colors$success',
+        },
+      },
+    },
     cursor: {
       default: {
         cursor: 'default',
@@ -223,6 +246,22 @@ export const checkStyles = css({
         $$active: '$colors$success',
       },
     },
+    native: {
+      false: {},
+      true: {
+        '&:has(+input:invalid)': {
+          backgroundColor: '$errorBackground',
+          borderColor: '$colors$error',
+          $$inactive: '$colors$errorLowlight',
+          $$active: '$colors$error',
+        },
+        '&:has(+input:valid)': {
+          borderColor: '$colors$success',
+          $$inactive: '$colors$successLowlight',
+          $$active: '$colors$success',
+        },
+      },
+    },
     destructive: {
       true: {
         $$main: '$colors$error',

src/docs/examples/form.stories.tsx

@@ -66,6 +66,7 @@ export const Form: Story = () => {
               id="name"
               label="Name"
               name="name"
+              required
               onValueChange={(value) => setName(value)}
               value={name}
             />
@@ -108,7 +109,7 @@ export const Form: Story = () => {
               checked={notifyBrowser}
             />
             <Text>Please Specify your role:</Text>
-            <RadioGroup value={role} onValueChange={(v) => setRole(v)}>
+            <RadioGroup required value={role} onValueChange={(v) => setRole(v)}>
               <Radio value="director" label="Director" />
               <Radio value="developer" label="Developer" />
               <Radio value="tester" label="Tester" />