feat(components): add Input & Select label props (closes #129)

Author: mdauner

README.md

@@ -126,7 +126,7 @@ $ yarn add sveltejs-forms
   let:isSubmitting
   let:isValid
 >
-  <Input name="user.email" placeholder="Email" /> <!-- nested field -->
+  <Input name="user.email" label="Email" placeholder="e.g. user@example.com" /> <!-- nested field -->
   <Input name="password" type="password" placeholder="Password" />
   <Select name="language" options={langOptions} />
   <Choice name="os" options={osOptions} multiple />

src/App.svelte

@@ -79,13 +79,16 @@
   on:reset={handleReset}
   let:isSubmitting
   let:isValid>
-  <Input name="user.email" placeholder="Email" />
+  <Input
+    name="user.email"
+    label="Email Address"
+    placeholder="e.g. user@example.com" />
   <Input
     name="user.password"
     type="password"
     placeholder="Password"
     multiline />
-  <Select name="user.language" options={langOptions} />
+  <Select name="user.language" label="Language" options={langOptions} />
   <Choice name="user.os" options={osOptions} multiple />
 
   <button type="reset">Reset</button>

src/components/Input.svelte

@@ -4,6 +4,7 @@
   import { FORM } from './Form.svelte';
 
   export let name;
+  export let label = '';
   export let type = 'text';
   export let placeholder = '';
   export let multiline = false;
@@ -20,10 +21,14 @@
 </script>
 
 <div class="field" class:error={get($touched, name) && get($errors, name)}>
+  {#if label}
+    <label for={name}>{label}</label>
+  {/if}
   {#if multiline}
     <textarea
       {name}
       {placeholder}
+      id={name}
       value={get($values, name)}
       on:blur={onBlur}
       on:change={onChange} />
@@ -32,6 +37,7 @@
       {name}
       {type}
       {placeholder}
+      id={name}
       value={get($values, name)}
       on:blur={onBlur}
       on:change={onChange} />

src/components/Select.svelte

@@ -4,6 +4,7 @@
   import { FORM } from './Form.svelte';
 
   export let name;
+  export let label = '';
   export let options;
 
   const { touchField, setValue, values, errors, touched } = getContext(FORM);
@@ -18,8 +19,12 @@
 </script>
 
 <div class="field" class:error={get($touched, name) && get($errors, name)}>
+  {#if label}
+    <label for={name}>{label}</label>
+  {/if}
   <select
     {name}
+    id={name}
     value={get($values, name)}
     on:change={onChange}
     on:blur={onBlur}>

tests/Form/__snapshots__/Form.spec.js.snap

@@ -8,7 +8,9 @@ exports[`Form matches snapshot 1`] = `
     <div
       class="field"
     >
+       
       <input
+        id="user.email"
         name="user.email"
         placeholder="Email"
         type="text"
@@ -19,7 +21,9 @@ exports[`Form matches snapshot 1`] = `
     <div
       class="field"
     >
+       
       <select
+        id="language"
         name="language"
       >
         <option
@@ -166,7 +170,9 @@ exports[`Form shows error message when schema is defined 1`] = `
     <div
       class="field error"
     >
+       
       <input
+        id="user.email"
         name="user.email"
         placeholder="Email"
         type="text"
@@ -182,7 +188,9 @@ exports[`Form shows error message when schema is defined 1`] = `
     <div
       class="field"
     >
+       
       <select
+        id="language"
         name="language"
       >
         <option

tests/Input/Input.spec.js

@@ -9,6 +9,11 @@ describe('Input', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
+  it('renders label', async () => {
+    const { container } = await render(App, { props: { label: 'Email' } });
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
   it('updates form value on change', async () => {
     const { component, getByPlaceholderText } = await render(App);
 

tests/Input/TestApp.svelte

@@ -8,6 +8,7 @@
   export let validateOnChange = true;
   export let form = null;
   export let multiline = false;
+  export let label = '';
 </script>
 
 <Form
@@ -18,7 +19,7 @@
   on:submit={onSubmit}
   let:isSubmitting
   bind:this={form}>
-  <Input name="email" placeholder="Email" {multiline} />
+  <Input name="email" {label} placeholder="Email" {multiline} />
 
   <button type="submit" disabled={isSubmitting}>Sign in</button>
 </Form>

tests/Input/__snapshots__/Input.spec.js.snap

@@ -8,7 +8,41 @@ exports[`Input matches snapshot 1`] = `
     <div
       class="field"
     >
+       
       <input
+        id="email"
+        name="email"
+        placeholder="Email"
+        type="text"
+      />
+       
+    </div>
+     
+    <button
+      type="submit"
+    >
+      Sign in
+    </button>
+  </form>
+</div>
+`;
+
+exports[`Input renders label 1`] = `
+<div>
+  <form
+    class="sveltejs-forms"
+  >
+    <div
+      class="field"
+    >
+      <label
+        for="email"
+      >
+        Email
+      </label>
+       
+      <input
+        id="email"
         name="email"
         placeholder="Email"
         type="text"
@@ -33,7 +67,9 @@ exports[`Input renders textarea when multiline parameter is set 1`] = `
     <div
       class="field"
     >
+       
       <textarea
+        id="email"
         name="email"
         placeholder="Email"
       />