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

refactor(components): convert const to reactive where appropriate

Browse source 
- Inline class assignments to avoid script-level clutter
- Ignore a11y-missing-attribute instead of redundant href
This commit is contained in:
Eric Liu 2019-12-24 09:41:12 -08:00
commit c446fc74f4
94 changed files with 469 additions and 598 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/components/ToggleSmall/ToggleSmall.Skeleton.svelte
View file

@ -1,19 +1,19 @@
<script>
let className = undefined;
export { className as class };
export let id = undefined;
export let labelText = undefined;
export let id = Math.random();
export let labelText = '';
export let style = undefined;
import { cx } from '../../lib';
const _class = cx('--form-item', className);
const ariaLabel = labelText ? undefined : $$props['aria-label'] || 'Toggle is loading';
</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', className)} {style}>
<input type="checkbox" class={cx('--toggle', '--toggle--small', '--skeleton')} {id} />
<label class={cx('--toggle__label --skeleton')} for={id}>
<label
aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle is loading'}
class={cx('--toggle__label --skeleton')}
for={id}>
{#if labelText}
<span class={cx('--toggle__label-text')}>{labelText}</span>
{/if}

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

@ -13,8 +13,6 @@
import { cx } from '../../lib';
const dispatch = createEventDispatcher();
const _class = cx('--form-item', className);
const ariaLabel = labelText ? undefined : $$props['aria-label'] || 'Toggle';
let inputRef = undefined;
@ -27,7 +25,7 @@
}
</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', className)} {style}>
<input
bind:this={inputRef}
type="checkbox"
@ -47,7 +45,10 @@
{disabled}
{id} />
<label class={cx('--toggle-input__label')} for={id} aria-label={ariaLabel}>
<label
aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle'}
class={cx('--toggle-input__label')}
for={id}>
{labelText}
<span class={cx('--toggle__switch')}>
<svg width="6" height="5" viewBox="0 0 6 5" class={cx('--toggle__check')}>