improve inputs

morewings · Dec 12, 2023 · c42e1cb · c42e1cb
1 parent 33c34ba
commit c42e1cb
Show file tree

Hide file tree

Showing 13 changed files with 136 additions and 73 deletions.
diff --git a/src/lib/Form/Form.stories.tsx b/src/lib/Form/Form.stories.tsx
@@ -116,10 +116,15 @@ export const Example: Story = {
                     <InputText defaultValue="foo" name="foo" id="qux" required />
                 </FormField>
                 <InputGroup name="radio-demo" label="Radio group">
-                    <InputRadio required id="foo" value="foo" label="This is a foo name" />
+                    <InputRadio id="foo" value="foo" label="This is a foo name" />
                     <InputRadio disabled id="bar" value="bar" label="This is a bar name" />
                     <InputRadio id="bazz" value="bazz" label="This is a bazz name" />
                 </InputGroup>
+                <InputGroup name="radio-demo-required" label="Radio group required" required>
+                    <InputRadio id="foo-required" value="foo-required" label="This is a foo name" />
+                    <InputRadio disabled id="bar-required" value="bar-required" label="This is a bar name" />
+                    <InputRadio id="bazz-required" value="bazz-required" label="This is a bazz name" />
+                </InputGroup>
                 <InputGroup name="checkbox-demo" label="Radio group">
                     <InputCheckbox id="zork" value="foo" label="This is a foo name" key="zork" required />
                     <InputCheckbox required id="gork" value="bar" label="This is a bar name" key="gork" />

diff --git a/src/lib/FormField/FormField.module.css b/src/lib/FormField/FormField.module.css
@@ -6,6 +6,7 @@
 }
 
 .label {
+    color: var(--text);
     cursor: pointer;
     font-size: 18px;
     line-height: 1;

diff --git a/src/lib/Icons/IconError.tsx b/src/lib/Icons/IconError.tsx
@@ -3,9 +3,13 @@ import Error from '@material-symbols/svg-700/sharp/error.svg?react';
 
 import {Icon} from './Icon.tsx';
 
-export const IconError: FC = () => {
+type Props = {
+    className?: string;
+};
+
+export const IconError: FC<Props> = ({className}) => {
     return (
-        <Icon>
+        <Icon className={className}>
             <Error />
         </Icon>
     );

diff --git a/src/lib/Icons/IconLoader.tsx b/src/lib/Icons/IconLoader.tsx
@@ -1,12 +1,17 @@
 import type {FC} from 'react';
 import Loader from '@material-symbols/svg-700/sharp/progress_activity.svg?react';
+import classNames from 'classnames';
 
 import {Icon} from './Icon.tsx';
 import classes from './Icon.module.css';
 
-export const IconLoader: FC = () => {
+type Props = {
+    className?: string;
+};
+
+export const IconLoader: FC<Props> = ({className}) => {
     return (
-        <Icon className={classes.rotation}>
+        <Icon className={classNames(classes.rotation, className)}>
             <Loader />
         </Icon>
     );

diff --git a/src/lib/Icons/IconValid.tsx b/src/lib/Icons/IconValid.tsx
@@ -3,9 +3,13 @@ import Check from '@material-symbols/svg-700/sharp/check.svg?react';
 
 import {Icon} from './Icon.tsx';
 
-export const IconValid: FC = () => {
+type Props = {
+    className?: string;
+};
+
+export const IconValid: FC<Props> = ({className}) => {
     return (
-        <Icon>
+        <Icon className={className}>
             <Check />
         </Icon>
     );

diff --git a/src/lib/InputCheckbox/InputCheckbox.module.css b/src/lib/InputCheckbox/InputCheckbox.module.css
@@ -32,10 +32,6 @@
         width: var(--size);
     }
 
-    &:invalid {
-        --borderColor: red;
-    }
-
     &:disabled {
         --borderColor: var(--gray100);
 
@@ -51,23 +47,36 @@
     }
 }
 
-.wrapper:hover {
-    .input:not(:disabled, :invalid) {
-        --borderColor: var(--gray400);
-    }
-}
-
 .label {
     color: var(--text);
     cursor: pointer;
     margin-left: var(--sizeUnit);
 }
 
+.icon {
+    margin-left: auto;
+}
+
+.required {
+    font-size: 24px;
+    line-height: 18px;
+}
+
 .input:disabled + .label {
     color: var(--gray200);
     cursor: not-allowed;
 }
 
-.input:invalid + .label {
-    color: var(--colorError);
+.wrapper:hover {
+    .input:invalid {
+        --borderColor: red;
+    }
+
+    .input:invalid + .label {
+        color: var(--colorError);
+    }
+
+    .input:not(:disabled, :invalid) {
+        --borderColor: var(--gray400);
+    }
 }
diff --git a/src/lib/InputCheckbox/InputCheckbox.tsx b/src/lib/InputCheckbox/InputCheckbox.tsx
@@ -5,14 +5,14 @@ import classNames from 'classnames';
 import type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';
 import {Validation} from '@/internal/inputs';
 import type {NativePropsInteractive, CallbackPropsInteractive} from '@/internal/inputs';
+import {IconError, IconLoader, IconValid} from '@/lib/Icons';
 
 import classes from './InputCheckbox.module.css';
 
 type Props = DataAttributes &
     LibraryProps &
     NativePropsInteractive &
     CallbackPropsInteractive & {
-        validation?: keyof typeof Validation;
         validator?: (event: ChangeEvent<HTMLInputElement>) => void;
         label?: string;
     };
@@ -21,7 +21,6 @@ export const InputCheckbox = forwardRef<HTMLInputElement, Props>(
     (
         {
             className,
-            validation,
             disabled,
             value,
             onChange = () => {},
@@ -34,15 +33,20 @@ export const InputCheckbox = forwardRef<HTMLInputElement, Props>(
             id,
             label,
             validator = () => {},
+            required,
             ...nativeProps
         },
         ref
     ) => {
-        const [_, setValidity] = useState(validation);
+        const [validity, setValidity] = useState<keyof typeof Validation | null>(null);
+        const ValidationIcon = {
+            [Validation.error]: IconError,
+            [Validation.valid]: IconValid,
+            [Validation.inProgress]: IconLoader,
+        }[validity!];
         const handleChange = useCallback(
             (event: ChangeEvent<HTMLInputElement>) => {
                 const nextValidationState = event.target.checkValidity() ? Validation.valid : Validation.error;
-                console.log('valid', event.target.checkValidity());
                 setValidity(nextValidationState);
                 onChange(event);
             },
@@ -66,10 +70,12 @@ export const InputCheckbox = forwardRef<HTMLInputElement, Props>(
                     onKeyUp={onKeyUp}
                     onKeyDown={onKeyDown}
                     onInput={validator}
+                    required={required}
                 />
                 <label className={classes.label} htmlFor={id}>
-                    {label}
+                    {label} {required && <span className={classes.required}>*</span>}
                 </label>
+                {validity && <ValidationIcon className={classes.icon} />}
             </div>
         );
     }

diff --git a/src/lib/InputGroup/InputGroup.module.css b/src/lib/InputGroup/InputGroup.module.css
@@ -5,6 +5,7 @@
 }
 
 .legend {
+    color: var(--text);
     cursor: default;
     font-size: 18px;
     margin-bottom: calc(var(--sizeUnit) * 1.5);

diff --git a/src/lib/InputGroup/InputGroup.tsx b/src/lib/InputGroup/InputGroup.tsx
@@ -7,6 +7,7 @@ import {
     type ChangeEvent,
     type ReactElement,
     type FieldsetHTMLAttributes,
+    useMemo,
 } from 'react';
 import classNames from 'classnames';
 
@@ -31,34 +32,42 @@ type Props = DataAttributes &
          * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
          */
         disabled?: FieldsetHTMLAttributes<HTMLFieldSetElement>['disabled'];
+        required?: boolean;
         hint?: string;
     };
 
+type ChildProps = {
+    name?: Props['name'];
+    disabled?: Props['disabled'];
+    required?: Props['required'];
+};
+
 export const InputGroup = forwardRef<HTMLFieldSetElement, Props>(
-    ({prefix: Prefix, className, validation, id, label, children, name, disabled, hint, ...nativeProps}, ref) => {
+    (
+        {prefix: Prefix, className, validation, id, label, children, name, disabled, hint, required, ...nativeProps},
+        ref
+    ) => {
+        const childrenWithProps = useMemo(() => {
+            return Children.map(children, element => {
+                if (isValidElement(element)) {
+                    const nextProps = {name} as ChildProps;
+                    if (disabled !== undefined) {
+                        nextProps.disabled = disabled;
+                    }
+                    if (required !== undefined) {
+                        nextProps.required = required;
+                    }
+                    return cloneElement<ChildProps>(element, nextProps);
+                }
+                return element;
+            });
+        }, [children, disabled, name, required]);
         return (
             <fieldset {...nativeProps} className={classNames(classes.wrapper, className)} disabled={disabled} ref={ref}>
                 <legend className={classes.legend} data-disabled={disabled}>
                     {label}
                 </legend>
-                <div className={classes.inputs}>
-                    {Children.map(children, element => {
-                        if (isValidElement(element)) {
-                            const nextProps =
-                                disabled !== undefined
-                                    ? {
-                                          name,
-                                          disabled,
-                                      }
-                                    : {name};
-                            return cloneElement<{name?: Props['name']; disabled?: Props['disabled']}>(
-                                element,
-                                nextProps
-                            );
-                        }
-                        return element;
-                    })}
-                </div>
+                <div className={classes.inputs}>{childrenWithProps}</div>
                 {hint && <div className={classes.hint}>{hint}</div>}
             </fieldset>
         );

diff --git a/src/lib/InputRadio/InputRadio.module.css b/src/lib/InputRadio/InputRadio.module.css
@@ -4,6 +4,11 @@
     flex-direction: row;
 }
 
+.label {
+    cursor: pointer;
+    margin-left: var(--sizeUnit);
+}
+
 .input {
     --bgColor: #fff;
     --borderColor: var(--gray200);
@@ -34,10 +39,6 @@
         width: var(--size);
     }
 
-    &:invalid {
-        --borderColor: red;
-    }
-
     &:disabled {
         --borderColor: var(--gray100);
 
@@ -51,24 +52,32 @@
     &:focus:not(:disabled, :invalid) {
         --borderColor: var(--gray400);
     }
+
+    &:disabled + .label {
+        color: var(--gray200);
+        cursor: not-allowed;
+    }
 }
 
 .wrapper:hover {
     .input:not(:disabled, :invalid) {
         --borderColor: var(--gray400);
     }
-}
 
-.label {
-    cursor: pointer;
-    margin-left: var(--sizeUnit);
+    .input:invalid {
+        --borderColor: red;
+    }
+
+    .input:invalid + .label {
+        color: var(--colorError);
+    }
 }
 
-.input:disabled + .label {
-    color: var(--gray200);
-    cursor: not-allowed;
+.icon {
+    margin-left: auto;
 }
 
-.input:invalid + .label {
-    color: var(--colorError);
+.required {
+    font-size: 24px;
+    line-height: 18px;
 }
diff --git a/src/lib/InputRadio/InputRadio.tsx b/src/lib/InputRadio/InputRadio.tsx
@@ -12,7 +12,6 @@ export type Props = DataAttributes &
     LibraryProps &
     NativePropsInteractive &
     CallbackPropsInteractive & {
-        validation?: keyof typeof Validation;
         validator?: (event: ChangeEvent<HTMLInputElement>) => void;
         label?: string;
     };
@@ -21,7 +20,6 @@ export const InputRadio = forwardRef<HTMLInputElement, Props>(
     (
         {
             className,
-            validation,
             disabled,
             value,
             onChange = () => {},
@@ -34,11 +32,12 @@ export const InputRadio = forwardRef<HTMLInputElement, Props>(
             id,
             label,
             validator = () => {},
+            required,
             ...nativeProps
         },
         ref
     ) => {
-        const [_, setValidity] = useState(validation);
+        const [_, setValidity] = useState<keyof typeof Validation | null>(null);
         const handleChange = useCallback(
             (event: ChangeEvent<HTMLInputElement>) => {
                 const nextValidationState = event.target.checkValidity() ? Validation.valid : Validation.error;
@@ -64,10 +63,11 @@ export const InputRadio = forwardRef<HTMLInputElement, Props>(
                     onFocus={onFocus}
                     onKeyUp={onKeyUp}
                     onKeyDown={onKeyDown}
+                    required={required}
                     onInput={validator}
                 />
                 <label className={classes.label} htmlFor={id}>
-                    {label}
+                    {label} {required && <span className={classes.required}>*</span>}
                 </label>
             </div>
         );

diff --git a/src/lib/InputText/InputText.module.css b/src/lib/InputText/InputText.module.css
@@ -26,7 +26,7 @@
 
     &:focus {
         background-color: white;
-        border-color: grey;
+        border-color: var(--gray400);
         outline: none;
     }
 
@@ -43,6 +43,7 @@
     }
 }
 
-/* input[type="checkbox"]:required:invalid + label {
-    color: red;
-} */
+.required {
+    font-size: 24px;
+    line-height: 18px;
+}