diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index d48cee4d77..7a5656ca41 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -379,7 +379,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584; | size | No | let | No | "default" | "field" | "small" | "lg" | "xl" | "default" | Specify the size of button | | expressive | No | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting | | isSelected | No | let | No | boolean | false | Set to `true` to enable the selected state for an icon-only, ghost button | -| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render
Alternatively, use the named slot "icon" (e.g., `<Icon slot="icon" size="{20}" />`) | | iconDescription | No | let | No | string | undefined | Specify the ARIA label for the button icon | | tooltipAlignment | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon.
Only applies to icon-only buttons | | tooltipPosition | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the position of the tooltip relative to the icon | @@ -395,6 +395,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584; | Slot name | Default | Props | Fallback | | :-------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------- | :------- | | -- | Yes | { props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } } | -- | +| icon | No | -- | -- | ### Events @@ -1666,15 +1667,13 @@ None. | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- | -| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element | +| ref | No | let | Yes | HTMLButtonElement | null | Obtain a reference to the HTML button element | | isActive | No | let | No | boolean | false | Set to `true` to use the active variant | | icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :---------------------------------------------------------------- | -| -- | Yes | -- | <svelte:component this="{icon}" size="{20}" /> | +None. ### Events diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 89844c689f..9680d6ba9b 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -500,7 +500,7 @@ { "name": "icon", "kind": "let", - "description": "Specify the icon to render", + "description": "Specify the icon to render\nAlternatively, use the named slot \"icon\" (e.g., ``)", "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, @@ -633,7 +633,8 @@ "name": "__default__", "default": true, "slot_props": "{ props: { role: \"button\"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } }" - } + }, + { "name": "icon", "default": false, "slot_props": "{}" } ], "events": [ { "type": "forwarded", "name": "click", "element": "ButtonSkeleton" }, @@ -5103,7 +5104,7 @@ "name": "ref", "kind": "let", "description": "Obtain a reference to the HTML button element", - "type": "null | HTMLButtonElement", + "type": "HTMLButtonElement", "value": "null", "isFunction": false, "isFunctionDeclaration": false, @@ -5113,17 +5114,14 @@ } ], "moduleExports": [], - "slots": [ - { - "name": "__default__", - "default": true, - "fallback": "", - "slot_props": "{}" - } - ], - "events": [{ "type": "forwarded", "name": "click", "element": "button" }], + "slots": [], + "events": [{ "type": "forwarded", "name": "click", "element": "Button" }], "typedefs": [], - "rest_props": { "type": "Element", "name": "button" } + "rest_props": { "type": "InlineComponent", "name": "Button" }, + "extends": { + "interface": "ButtonProps", + "import": "\"../Button/Button.svelte\"" + } }, { "moduleName": "HeaderNav", diff --git a/docs/src/pages/framed/UIShell/HeaderUtilities.svelte b/docs/src/pages/framed/UIShell/HeaderUtilities.svelte index 3b6d5029e1..d02ce83c79 100644 --- a/docs/src/pages/framed/UIShell/HeaderUtilities.svelte +++ b/docs/src/pages/framed/UIShell/HeaderUtilities.svelte @@ -2,11 +2,7 @@ import { Header, HeaderUtilities, - HeaderAction, HeaderGlobalAction, - HeaderPanelLinks, - HeaderPanelDivider, - HeaderPanelLink, SideNav, SideNavItems, SideNavMenu, @@ -18,12 +14,11 @@ Row, Column, } from "carbon-components-svelte"; + import Logout from "carbon-icons-svelte/lib/Logout.svelte"; import SettingsAdjust from "carbon-icons-svelte/lib/SettingsAdjust.svelte"; import UserAvatarFilledAlt from "carbon-icons-svelte/lib/UserAvatarFilledAlt.svelte"; let isSideNavOpen = false; - let isOpen1 = false; - let isOpen2 = false;
@@ -31,37 +26,20 @@ - - + - - Switcher subject 1 - Switcher item 1 - Switcher item 2 - Switcher item 3 - Switcher item 4 - Switcher subject 2 - Switcher item 1 - Switcher item 2 - Switcher subject 3 - Switcher item 1 - - - - - Switcher subject 1 - Switcher item 1 - Switcher subject 2 - Switcher item 1 - Switcher item 2 - Switcher item 3 - Switcher item 4 - Switcher item 5 - - + /> +
diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte index 400e68d06d..1a45236caa 100644 --- a/src/Button/Button.svelte +++ b/src/Button/Button.svelte @@ -27,6 +27,8 @@ /** * Specify the icon to render + * Alternatively, use the named slot "icon" (e.g., ``) + * * @type {typeof import("svelte").SvelteComponent} */ 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} {iconDescription} {/if} -