mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

add name to form components

Browse source
This commit is contained in:
Sebastián Canio Barriga 2020-07-09 20:59:42 -04:00
commit 6fdb8d10ed
32 changed files with 82 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/ToggleSmall/ToggleSmall.Story.svelte
View file

@ -14,10 +14,10 @@
<Layout>
{#if story === 'toggled'}
<ToggleSmall {...$$props} id="toggle-1" bind:toggled />
<ToggleSmall {...$$props} id="toggle-small-id" name="toggle-small-name" bind:toggled />
{:else if story === 'skeleton'}
<ToggleSmallSkeleton />
{:else}
<ToggleSmall {...$$props} id="toggle-1" />
<ToggleSmall {...$$props} id="toggle-small-id" name="toggle-small-name" />
{/if}
</Layout>

8
src/components/ToggleSmall/ToggleSmall.stories.js
View file

@ -10,7 +10,9 @@ export const Default = () => ({
'aria-label': text('ARIA label of the toggle (aria-label)', ''),
labelA: text('Label for untoggled state (labelA)', 'Off'),
labelB: text('Label for toggled state (labelB)', 'On'),
disabled: boolean('Disabled (disabled)', false)
disabled: boolean('Disabled (disabled)', false),
id: text('ToggleSmall id', 'toggle-small-id'),
name: text('ToggleSmall name', 'toggle-small-name')
}
});
@ -24,7 +26,9 @@ export const Toggled = () => ({
'aria-label': text('ARIA label of the toggle (aria-label)', ''),
labelA: text('Label for untoggled state (labelA)', 'Off'),
labelB: text('Label for toggled state (labelB)', 'On'),
disabled: boolean('Disabled (disabled)', false)
disabled: boolean('Disabled (disabled)', false),
id: text('ToggleSmall id', 'toggle-small-id'),
name: text('ToggleSmall name', 'toggle-small-name')
}
});

5
src/components/ToggleSmall/ToggleSmall.svelte
View file

@ -3,6 +3,7 @@
export { className as class };
export let disabled = false;
export let id = Math.random();
export let name = Math.random();
export let labelA = 'Off';
export let labelB = 'On';
export let labelText = '';
@ -31,7 +32,9 @@
on:focus
on:blur
{disabled}
{id} />
{id}
{name}
/>
<label
aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle'}
class={cx('--toggle-input__label')}