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

export an "icon only variant" option

Browse source
This commit is contained in:
Bilux 2022-10-19 11:40:33 +01:00 • committed by GitHub
commit 502585601e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/Button/Button.svelte
View file

@ -25,6 +25,11 @@
*/ */
export let isSelected = false; export let isSelected = false;
/**
* Set to `true` for the icon-only variant
*/
export let iconOnly = false;
/** /**
* Specify the icon to render * Specify the icon to render
* @type {typeof import("svelte").SvelteComponent} * @type {typeof import("svelte").SvelteComponent}
@ -85,7 +90,7 @@
$: if (ctx && ref) { $: if (ctx && ref) {
ctx.declareRef(ref); ctx.declareRef(ref);
} }
$: hasIconOnly = icon && !$$slots.default; $: hasIconOnly = iconOnly || (icon && !$$slots.default);
$: buttonProps = { $: buttonProps = {
type: href && !disabled ? undefined : type, type: href && !disabled ? undefined : type,
tabindex, tabindex,
@ -152,8 +157,10 @@
> >
{#if hasIconOnly} {#if hasIconOnly}
<span class:bx--assistive-text="{true}">{iconDescription}</span> <span class:bx--assistive-text="{true}">{iconDescription}</span>
{:else}
<slot />
{/if} {/if}
<slot /><svelte:component <svelte:component
this="{icon}" this="{icon}"
aria-hidden="true" aria-hidden="true"
class="bx--btn__icon" class="bx--btn__icon"
@ -171,8 +178,10 @@
> >
{#if hasIconOnly} {#if hasIconOnly}
<span class:bx--assistive-text="{true}">{iconDescription}</span> <span class:bx--assistive-text="{true}">{iconDescription}</span>
{:else}
<slot />
{/if} {/if}
<slot /><svelte:component <svelte:component
this="{icon}" this="{icon}"
aria-hidden="true" aria-hidden="true"
class="bx--btn__icon" class="bx--btn__icon"

6
types/Button/Button.svelte.d.ts vendored
View file

@ -38,6 +38,12 @@ export interface ButtonProps
*/ */
isSelected?: boolean; isSelected?: boolean;
/**
* Set to `true` for the icon-only variant
* @default false
*/
iconOnly?: boolean;
/** /**
* Specify the icon to render * Specify the icon to render
* @default undefined * @default undefined