Skip to content

Commit

Permalink
feat(components): add Input & Select label props (closes #129)
Browse files Browse the repository at this point in the history
  • Loading branch information
mdauner committed Feb 26, 2020
1 parent 4c3547f commit 02ee359
Show file tree
Hide file tree
Showing 8 changed files with 68 additions and 4 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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. [email protected]" /> <!-- nested field -->
<Input name="password" type="password" placeholder="Password" />
<Select name="language" options={langOptions} />
<Choice name="os" options={osOptions} multiple />
Expand Down
7 changes: 5 additions & 2 deletions src/App.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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. [email protected]" />
<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>
Expand Down
6 changes: 6 additions & 0 deletions src/components/Input.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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} />
Expand All @@ -32,6 +37,7 @@
{name}
{type}
{placeholder}
id={name}
value={get($values, name)}
on:blur={onBlur}
on:change={onChange} />
Expand Down
5 changes: 5 additions & 0 deletions src/components/Select.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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}>
Expand Down
8 changes: 8 additions & 0 deletions tests/Form/__snapshots__/Form.spec.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ exports[`Form matches snapshot 1`] = `
<div
class="field"
>
<input
id="user.email"
name="user.email"
placeholder="Email"
type="text"
Expand All @@ -19,7 +21,9 @@ exports[`Form matches snapshot 1`] = `
<div
class="field"
>
<select
id="language"
name="language"
>
<option
Expand Down Expand Up @@ -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"
Expand All @@ -182,7 +188,9 @@ exports[`Form shows error message when schema is defined 1`] = `
<div
class="field"
>
<select
id="language"
name="language"
>
<option
Expand Down
5 changes: 5 additions & 0 deletions tests/Input/Input.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
3 changes: 2 additions & 1 deletion tests/Input/TestApp.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
export let validateOnChange = true;
export let form = null;
export let multiline = false;
export let label = '';
</script>

<Form
Expand All @@ -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>
36 changes: 36 additions & 0 deletions tests/Input/__snapshots__/Input.spec.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -33,7 +67,9 @@ exports[`Input renders textarea when multiline parameter is set 1`] = `
<div
class="field"
>
<textarea
id="email"
name="email"
placeholder="Email"
/>
Expand Down

0 comments on commit 02ee359

Please sign in to comment.