mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor(checkbox): make classes reactive

Browse source
This commit is contained in:
Eric Liu 2019-12-29 18:52:20 -08:00
commit 60d9258d0b
4 changed files with 29 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/Checkbox/Checkbox.Skeleton.svelte
View file

@ -4,10 +4,14 @@
export let style = undefined;
import { cx } from '../../lib';
const _class = cx('--form-item', '--checkbox-wrapper', className);
</script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
<div
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--form-item', '--checkbox-wrapper', className)}
{style}>
<span class={cx('--checkbox-label', '--skeleton')} />
</div>

12
src/components/Checkbox/Checkbox.Story.svelte
View file

@ -8,6 +8,8 @@
const { labelText, indeterminate, disabled, hideLabel, wrapperClassName } = $$props;
const checkboxProps = { labelText, indeterminate, disabled, hideLabel, wrapperClassName };
let checked = true;
</script>
<Layout>
@ -22,8 +24,14 @@
{:else}
<fieldset class={cx('--fieldset')}>
<legend class={cx('--label')}>Checkbox heading</legend>
<Checkbox {...checkboxProps} checked id="checkbox-label-1" />
<Checkbox {...checkboxProps} checked id="checkbox-label-2" />
<Checkbox
{...checkboxProps}
id="checkbox-label-1"
bind:checked
on:check={({ detail }) => {
console.log('on:check', detail);
}} />
<Checkbox {...checkboxProps} id="checkbox-label-2" checked />
</fieldset>
{/if}
</Layout>

6
src/components/Checkbox/Checkbox.stories.js
View file

@ -9,8 +9,7 @@ export const Checked = () => ({
labelText: text('Label text (labelText)', 'Checkbox label'),
indeterminate: boolean('Intermediate (indeterminate)', false),
disabled: boolean('Disabled (disabled)', false),
hideLabel: boolean('No label (hideLabel)', false),
wrapperClass: text('Wrapper CSS class name (wrapperClass)', '')
hideLabel: boolean('No label (hideLabel)', false)
}
});
@ -21,8 +20,7 @@ export const Unchecked = () => ({
labelText: text('Label text (labelText)', 'Checkbox label'),
indeterminate: boolean('Intermediate (indeterminate)', false),
disabled: boolean('Disabled (disabled)', false),
hideLabel: boolean('No label (hideLabel)', false),
wrapperClass: text('Wrapper CSS class name (wrapperClass)', '')
hideLabel: boolean('No label (hideLabel)', false)
}
});

26
src/components/Checkbox/Checkbox.svelte
View file

@ -8,32 +8,26 @@
export let labelText = undefined;
export let hideLabel = false;
export let title = '';
export let wrapperClassName = undefined;
export { wrapperClassName as wrapperClass };
export let style = undefined;
import { createEventDispatcher } from 'svelte';
import { cx } from '../../lib';
const dispatch = createEventDispatcher();
const _labelClass = cx('--checkbox-label', className);
const _innerLabelClass = cx('--checkbox-label-text', hideLabel && '--visually-hidden');
const _wrapperClass = cx('--form-item', '--checkbox-wrapper', wrapperClassName);
let inputRef = undefined;
$: {
dispatch('check', { id, checked });
if (inputRef) {
inputRef.checked = checked;
}
dispatch('check', checked);
}
</script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={_wrapperClass} {style}>
<div
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--form-item', '--checkbox-wrapper', className)}
{style}>
<input
bind:this={inputRef}
type="checkbox"
class={cx('--checkbox')}
on:change
@ -44,7 +38,7 @@
{disabled}
{checked}
{id} />
<label for={id} class={_labelClass} title={title || null}>
<span class={_innerLabelClass}>{labelText}</span>
<label class={cx('--checkbox-label')} for={id} title={title || undefined}>
<span class={cx('--checkbox-label-text', hideLabel && '--visually-hidden')}>{labelText}</span>
</label>
</div>