Align v10.35 (#694)

* 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
This commit is contained in:
Eric Liu 2021-06-26 07:13:28 -07:00 committed by GitHub
commit db645c30f0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 396 additions and 130 deletions

View file

@ -5,6 +5,15 @@
*/
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"}
@ -35,10 +44,11 @@
<button
bind:this="{ref}"
disabled="{disabled}"
aria-describedby="{id}"
class:bx--tooltip__trigger="{true}"
class:bx--tooltip--a11y="{true}"
class:bx--tooltip--hidden="{hidden}"
class:bx--tooltip--hidden="{hidden || disabled}"
class:bx--tooltip--top="{direction === 'top'}"
class:bx--tooltip--right="{direction === 'right'}"
class:bx--tooltip--bottom="{direction === 'bottom'}"
@ -47,20 +57,25 @@
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 />
<slot>
<svelte:component this="{icon}" />
</slot>
</button>