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

feat(ui-shell): support button tooltip in HeaderGlobalAction (#1894)

Browse source 
Closes #1893
This commit is contained in:
spburtsev 2024-03-08 06:37:58 +02:00 • committed by GitHub
commit d8bc65163e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 92 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/Button/Button.svelte
View file

@ -27,6 +27,8 @@
/**
* Specify the icon to render
* Alternatively, use the named slot "icon" (e.g., `<Icon slot="icon" size="{20}" />`)
*
* @type {typeof import("svelte").SvelteComponent<any>}
*/
export let icon = undefined;
@ -85,7 +87,12 @@
$: if (ctx && ref) {
ctx.declareRef(ref);
}
$: hasIconOnly = icon && !$$slots.default;
$: hasIconOnly = (icon || $$slots.icon) && !$$slots.default;
$: iconProps = {
"aria-hidden": "true",
class: "bx--btn__icon",
"aria-label": iconDescription,
};
$: buttonProps = {
type: href && !disabled ? undefined : type,
tabindex,
@ -158,12 +165,20 @@
{#if hasIconOnly}
<span class:bx--assistive-text="{true}">{iconDescription}</span>
{/if}
<slot /><svelte:component
this="{icon}"
aria-hidden="true"
class="bx--btn__icon"
aria-label="{iconDescription}"
/>
<slot />
{#if $$slots.icon}
<slot
name="icon"
style="{hasIconOnly ? 'margin-left: 0' : undefined}"
{...iconProps}
/>
{:else if icon}
<svelte:component
this="{icon}"
style="{hasIconOnly ? 'margin-left: 0' : undefined}"
{...iconProps}
/>
{/if}
</a>
{:else}
<button
@ -179,12 +194,19 @@
{#if hasIconOnly}
<span class:bx--assistive-text="{true}">{iconDescription}</span>
{/if}
<slot /><svelte:component
this="{icon}"
aria-hidden="true"
class="bx--btn__icon"
style="{hasIconOnly ? 'margin-left: 0' : undefined}"
aria-label="{iconDescription}"
/>
<slot />
{#if $$slots.icon}
<slot
name="icon"
style="{hasIconOnly ? 'margin-left: 0' : undefined}"
{...iconProps}
/>
{:else if icon}
<svelte:component
this="{icon}"
style="{hasIconOnly ? 'margin-left: 0' : undefined}"
{...iconProps}
/>
{/if}
</button>
{/if}

33
src/UIShell/HeaderGlobalAction.svelte
View file

@ -1,4 +1,8 @@
<script>
/**
* @extends {"../Button/Button.svelte"} ButtonProps
*/
/** Set to `true` to use the active variant */
export let isActive = false;
@ -8,19 +12,22 @@
*/
export let icon = undefined;
/** Obtain a reference to the HTML button element */
/** Obtain a reference to the HTML button element
* @type {HTMLButtonElement}
*/
export let ref = null;
import Button from "../Button/Button.svelte";
$: buttonClass = [
"bx--header__action",
isActive && " bx--header__action--active",
$$restProps.class,
]
.filter(Boolean)
.join(" ");
</script>
<button
type="button"
bind:this="{ref}"
class:bx--header__action="{true}"
class:bx--header__action--active="{isActive}"
{...$$restProps}
on:click
>
<slot>
<svelte:component this="{icon}" size="{20}" />
</slot>
</button>
<Button bind:ref {...$$restProps} class="{buttonClass}" on:click>
<svelte:component this="{icon}" slot="icon" size="{20}" />
</Button>