mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 19:46:36 +00:00
db645c30f0* chore(deps-dev): upgrade carbon-components to v10.35
* feat(tooltip-icon): add icon prop
This allows consumers to pass a Carbon icon as a prop instead of using the default slot.
* fix(tooltip): make screenreader description less verbose
Ref: b5f40d8fc
* feat(search): allow custom search icon
Allows consumers to render a different Carbon icon instead of the default Search16 icon.
* feat(number-input): add hideSteppers prop
Allows consumers to hide the input stepper buttons.
* feat: support expressive styles for Button, UnorderedList, OrderedList
* feat(button): support large size button
Set size to "lg" to use the large size.
* feat(button-skeleton): support xl, lg sizes
* docs(button): add "lg" size to expressive styles example
* feat(file-uploader-item): support field, small sizes
* feat(tooltip-icon): support disabled state
81 lines
2 KiB
Svelte
81 lines
2 KiB
Svelte
<script>
|
|
/**
|
|
* Specify the tooltip text.
|
|
* Alternatively, use the "tooltipText" slot
|
|
*/
|
|
export let tooltipText = "";
|
|
|
|
/**
|
|
* Specify the icon from `carbon-icons-svelte` to render
|
|
* @type {typeof import("carbon-icons-svelte").CarbonIcon}
|
|
*/
|
|
export let icon = undefined;
|
|
|
|
/** Set to `true` to disable the tooltip icon */
|
|
export let disabled = false;
|
|
|
|
/**
|
|
* Set the alignment of the tooltip relative to the icon
|
|
* @type {"start" | "center" | "end"}
|
|
*/
|
|
export let align = "center";
|
|
|
|
/**
|
|
* Set the direction of the tooltip relative to the icon
|
|
* @type {"top" | "right" | "bottom" | "left"}
|
|
*/
|
|
export let direction = "bottom";
|
|
|
|
/** Set an id for the span element */
|
|
export let id = "ccs-" + Math.random().toString(36);
|
|
|
|
/** Obtain a reference to the button HTML element */
|
|
export let ref = null;
|
|
|
|
let hidden = false;
|
|
</script>
|
|
|
|
<svelte:body
|
|
on:keydown="{({ key }) => {
|
|
if (key === 'Escape') {
|
|
hidden = true;
|
|
}
|
|
}}" />
|
|
|
|
<button
|
|
bind:this="{ref}"
|
|
disabled="{disabled}"
|
|
aria-describedby="{id}"
|
|
class:bx--tooltip__trigger="{true}"
|
|
class:bx--tooltip--a11y="{true}"
|
|
class:bx--tooltip--hidden="{hidden || disabled}"
|
|
class:bx--tooltip--top="{direction === 'top'}"
|
|
class:bx--tooltip--right="{direction === 'right'}"
|
|
class:bx--tooltip--bottom="{direction === 'bottom'}"
|
|
class:bx--tooltip--left="{direction === 'left'}"
|
|
class:bx--tooltip--align-start="{align === 'start'}"
|
|
class:bx--tooltip--align-center="{align === 'center'}"
|
|
class:bx--tooltip--align-end="{align === 'end'}"
|
|
{...$$restProps}
|
|
style="cursor: {disabled ? 'not-allowed' : 'default'}; {$$restProps.style}"
|
|
on:click
|
|
on:mouseover
|
|
on:mouseenter
|
|
on:mouseenter="{() => {
|
|
if (disabled) return;
|
|
hidden = false;
|
|
}}"
|
|
on:mouseleave
|
|
on:focus
|
|
on:focus="{() => {
|
|
if (disabled) return;
|
|
hidden = false;
|
|
}}"
|
|
>
|
|
<span id="{id}" class:bx--assistive-text="{true}">
|
|
<slot name="tooltipText">{tooltipText}</slot>
|
|
</span>
|
|
<slot>
|
|
<svelte:component this="{icon}" />
|
|
</slot>
|
|
</button>
|