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

refactor(composed-modal): register buttonRef directly

Browse source
This commit is contained in:
Eric Liu 2019-12-24 09:37:35 -08:00
commit ffb6f477b9
2 changed files with 59 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

102
src/components/Button/Button.svelte
View file

@ -4,7 +4,6 @@
export let as = undefined;
export let disabled = false;
export let size = 'default';
export let small = false;
export let kind = 'primary';
export let href = undefined;
export let tabindex = '0';
@ -18,79 +17,66 @@
import { getContext } from 'svelte';
import { cx } from '../../lib';
const hasIconOnly = !!icon && !$$props.$$slots;
const ctx = getContext('ComposedModal');
let buttonRef = undefined;
$: if (ctx && buttonRef) {
ctx.declareRef({ name: 'buttonRef', ref: buttonRef });
ctx.declareRef(buttonRef);
}
$: _class = cx(
'--btn',
size === 'field' && '--btn--field',
(size === 'small' || small) && '--btn--sm',
kind === 'primary' && '--btn--primary',
kind === 'danger' && '--btn--danger',
kind === 'secondary' && '--btn--secondary',
kind === 'ghost' && '--btn--ghost',
kind === 'danger--primary' && '--btn--danger--primary',
kind === 'tertiary' && '--btn--tertiary',
disabled && '--btn--disabled',
hasIconOnly && '--btn--icon-only',
hasIconOnly && '--tooltip__trigger',
hasIconOnly && '--tooltip--a11y',
hasIconOnly && tooltipPosition && `--tooltip--${tooltipPosition}`,
hasIconOnly && tooltipAlignment && `--tooltip--align-${tooltipAlignment}`,
className
);
$: hasIconOnly = !!icon && !$$props.$$slots;
$: buttonProps = {
role: 'button',
type: href && !disabled ? undefined : type,
tabindex,
class: _class,
disabled,
href,
style
style,
class: cx(
'--btn',
size === 'field' && '--btn--field',
size === 'small' && '--btn--sm',
kind && `--btn--${kind}`,
disabled && '--btn--disabled',
hasIconOnly && '--btn--icon-only',
hasIconOnly && '--tooltip__trigger',
hasIconOnly && '--tooltip--a11y',
hasIconOnly && tooltipPosition && `--tooltip--${tooltipPosition}`,
hasIconOnly && tooltipAlignment && `--tooltip--align-${tooltipAlignment}`,
className
)
};
</script>
{#if as}
<slot props={buttonProps} />
{:else if href && !disabled}
<!-- svelte-ignore a11y-missing-attribute -->
<a {...buttonProps} on:click on:mouseover on:mouseenter on:mouseleave>
{#if hasIconOnly}
<span class={cx('--assistive-text')}>{iconDescription}</span>
{/if}
<slot />
{#if icon}
<svelte:component
this={icon}
aria-hidden="true"
class={cx('--btn__icon')}
aria-label={iconDescription} />
{/if}
</a>
{:else}
{#if href && !disabled}
<a {...buttonProps} on:click on:mouseover on:mouseenter on:mouseleave {href}>
{#if hasIconOnly}
<span class={cx('--assistive-text')}>{iconDescription}</span>
{/if}
<slot />
{#if icon}
<svelte:component
this={icon}
aria-hidden="true"
class={cx('--btn__icon')}
aria-label={iconDescription} />
{/if}
</a>
{:else}
<button
{...buttonProps}
bind:this={buttonRef}
on:click
on:mouseover
on:mouseenter
on:mouseleave>
{#if hasIconOnly}
<span class={cx('--assistive-text')}>{iconDescription}</span>
{/if}
<slot />
{#if icon}
<svelte:component
this={icon}
aria-hidden="true"
class={cx('--btn__icon')}
aria-label={iconDescription} />
{/if}
</button>
{/if}
<button {...buttonProps} bind:this={buttonRef} on:click on:mouseover on:mouseenter on:mouseleave>
{#if hasIconOnly}
<span class={cx('--assistive-text')}>{iconDescription}</span>
{/if}
<slot />
{#if icon}
<svelte:component
this={icon}
aria-hidden="true"
class={cx('--btn__icon')}
aria-label={iconDescription} />
{/if}
</button>
{/if}