feat(react): deprecate "children" for adding input/textarea label (#622)

Use component composition of FieldLabel and Input/Textarea instead.
onfido · Apr 29, 2021 · 359b5a2 · 359b5a2
1 parent bc003dd
commit 359b5a2
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 45 deletions.
diff --git a/packages/react/src/components/form/form.stories.tsx b/packages/react/src/components/form/form.stories.tsx
@@ -35,27 +35,36 @@ interface Values {
 export const Playground: Story<FormProps<Values>> = (props) => (
   <Form {...props}>
     <Field>
-      <Input name="firstName" required>
-        First name <Asterisk aria-label="required" />
-      </Input>
+      <FieldLabel>
+        <span>
+          First name <Asterisk aria-label="required" />
+        </span>
+        <Input name="firstName" required />
+      </FieldLabel>
       <Validation state="error" if="valueMissing">
         Please fill in this field
       </Validation>
     </Field>
 
     <Field>
-      <Input name="lastName" required>
-        Last name <Asterisk aria-label="required" />
-      </Input>
+      <FieldLabel>
+        <span>
+          Last name <Asterisk aria-label="required" />
+        </span>
+        <Input name="lastName" required />
+      </FieldLabel>
       <Validation state="error" if="valueMissing">
         Please fill in this field
       </Validation>
     </Field>
 
     <Field>
-      <Input type="email" name="email" required>
-        Email address <Asterisk aria-label="required" />
-      </Input>
+      <FieldLabel>
+        <span>
+          Email address <Asterisk aria-label="required" />
+        </span>
+        <Input type="email" name="email" required />
+      </FieldLabel>
       <Validation state="error" if="valueMissing">
         Please fill in this field
       </Validation>

diff --git a/packages/react/src/components/input/input.stories.tsx b/packages/react/src/components/input/input.stories.tsx
@@ -1,5 +1,6 @@
 import {
   Field,
+  FieldLabel,
   HelperText,
   Input,
   InputProps,
@@ -26,9 +27,6 @@ export default {
   title: 'React/Input',
   component: Input,
   argTypes: {
-    children: {
-      description: 'Acts as a label for an `<input>`.',
-    },
     disabled: {
       table: { type: { summary: 'boolean' } },
     },
@@ -47,7 +45,6 @@ export default {
     },
   },
   args: {
-    children: 'Label',
     disabled: false,
     invalid: false,
     placeholder: 'Placeholder',
@@ -66,31 +63,25 @@ Invalid.argTypes = omit<InputProps>('invalid');
 export const Disabled = reactMatrix(Input, { disabled });
 Disabled.argTypes = omit<InputProps>('disabled');
 
-export const WithoutLabel = (props: InputProps) => <Input {...props} />;
-WithoutLabel.argTypes = omit<InputProps>('children');
-WithoutLabel.args = {
-  children: null,
-};
-
-interface InputWithHelperTextProps extends InputProps {
+interface InputWithLabelAndHelperTextProps extends InputProps {
   label: string;
   helperText: string;
 }
 
-export const WithHelperText = ({
+export const WithLabelAndHelperText = ({
   label,
   helperText,
   ...restProps
-}: InputWithHelperTextProps) => (
+}: InputWithLabelAndHelperTextProps) => (
   <Field>
-    <Input {...restProps}>
+    <FieldLabel>
       {label}
       <HelperText>{helperText}</HelperText>
-    </Input>
+      <Input {...restProps} />
+    </FieldLabel>
   </Field>
 );
-WithHelperText.argTypes = omit<InputWithHelperTextProps>('children');
-WithHelperText.args = {
+WithLabelAndHelperText.args = {
   label: 'Label',
   helperText: 'Helper text',
 };

diff --git a/packages/react/src/components/input/input.tsx b/packages/react/src/components/input/input.tsx
@@ -44,4 +44,19 @@ export const Input = withRef(
 );
 Input.displayName = 'Input';
 
-export type InputProps = BaseProps & JSX.IntrinsicElements['input'];
+export type InputProps = BaseProps &
+  Omit<InputElementProps, 'children'> & {
+    /**
+     * @deprecated
+     * Use component composition instead.
+     *
+     * @example
+     * <FieldLabel>
+     *   My Label
+     *   <Input name="my-input" />
+     * </FieldLabel>
+     */
+    children?: InputElementProps['children'];
+  };
+
+type InputElementProps = JSX.IntrinsicElements['input'];
diff --git a/packages/react/src/components/textarea/textarea.stories.tsx b/packages/react/src/components/textarea/textarea.stories.tsx
@@ -1,5 +1,6 @@
 import {
   Field,
+  FieldLabel,
   HelperText,
   Textarea,
   TextareaProps,
@@ -23,9 +24,6 @@ export default {
   title: 'React/Textarea',
   component: Textarea,
   argTypes: {
-    children: {
-      description: 'Acts as a label for a `<textarea>`.',
-    },
     disabled: {
       table: { type: { summary: 'boolean' } },
     },
@@ -51,7 +49,6 @@ export default {
     },
   },
   args: {
-    children: 'Label',
     disabled: false,
     invalid: false,
     placeholder: 'Placeholder',
@@ -74,31 +71,25 @@ Invalid.argTypes = omit<TextareaProps>('invalid');
 export const Disabled = reactMatrix(Textarea, { disabled });
 Disabled.argTypes = omit<TextareaProps>('disabled');
 
-export const WithoutLabel = (props: TextareaProps) => <Textarea {...props} />;
-WithoutLabel.argTypes = omit<TextareaProps>('children');
-WithoutLabel.args = {
-  children: null,
-};
-
-interface TextareaWithHelperTextProps extends TextareaProps {
+interface TextareaWithLabelAndHelperTextProps extends TextareaProps {
   label: string;
   helperText: string;
 }
 
-export const WithHelperText = ({
+export const WithLabelAndHelperText = ({
   label,
   helperText,
   ...restProps
-}: TextareaWithHelperTextProps) => (
+}: TextareaWithLabelAndHelperTextProps) => (
   <Field>
-    <Textarea {...restProps}>
+    <FieldLabel>
       {label}
       <HelperText>{helperText}</HelperText>
-    </Textarea>
+      <Textarea {...restProps} />
+    </FieldLabel>
   </Field>
 );
-WithHelperText.argTypes = omit<TextareaWithHelperTextProps>('children');
-WithHelperText.args = {
+WithLabelAndHelperText.args = {
   label: 'Label',
   helperText: 'Helper text',
 };

diff --git a/packages/react/src/components/textarea/textarea.tsx b/packages/react/src/components/textarea/textarea.tsx
@@ -51,4 +51,19 @@ export const Textarea = withRef(
 );
 Textarea.displayName = 'Textarea';
 
-export type TextareaProps = BaseProps & JSX.IntrinsicElements['textarea'];
+export type TextareaProps = BaseProps &
+  Omit<TextareaElementProps, 'children'> & {
+    /**
+     * @deprecated
+     * Use component composition instead.
+     *
+     * @example
+     * <FieldLabel>
+     *   My Label
+     *   <Textarea name="my-textarea" />
+     * </FieldLabel>
+     */
+    children?: TextareaElementProps['children'];
+  };
+
+type TextareaElementProps = JSX.IntrinsicElements['textarea'];