mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
feat(ui-shell): support button tooltip in HeaderGlobalAction (#1894)
Closes #1893
This commit is contained in:
spburtsev
GitHub
parent
0405edee7d
commit
d8bc65163e
8 changed files with 92 additions and 90 deletions
|
|
@ -379,7 +379,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
|
|||
| size | No | <code>let</code> | No | <code>"default" | "field" | "small" | "lg" | "xl"</code> | <code>"default"</code> | Specify the size of button |
|
||||
| expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
|
||||
| isSelected | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selected state for an icon-only, ghost button |
|
||||
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
|
||||
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render<br />Alternatively, use the named slot "icon" (e.g., `<Icon slot="icon" size="{20}" />`) |
|
||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the button icon |
|
||||
| tooltipAlignment | No | <code>let</code> | No | <code>"start" | "center" | "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon.<br />Only applies to icon-only buttons |
|
||||
| tooltipPosition | No | <code>let</code> | No | <code>"top" | "right" | "bottom" | "left"</code> | <code>"bottom"</code> | 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 | <code>{ props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } } </code> | -- |
|
||||
| icon | No | -- | -- |
|
||||
|
||||
### Events
|
||||
|
||||
|
|
@ -1666,15 +1667,13 @@ None.
|
|||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element |
|
||||
| ref | No | <code>let</code> | Yes | <code>HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element |
|
||||
| isActive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active variant |
|
||||
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
|
||||
|
||||
### Slots
|
||||
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :---- | :---------------------------------------------------------------- |
|
||||
| -- | Yes | -- | <code><svelte:component this="{icon}" size="{20}" /></code> |
|
||||
None.
|
||||
|
||||
### Events
|
||||
|
||||
|
|
|
|||
|
|
@ -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., `<Icon slot=\"icon\" size=\"{20}\" />`)",
|
||||
"type": "typeof import(\"svelte\").SvelteComponent<any>",
|
||||
"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": "<svelte:component this=\"{icon}\" size=\"{20}\" />",
|
||||
"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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
</script>
|
||||
|
||||
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
|
||||
|
|
@ -31,37 +26,20 @@
|
|||
<SkipToContent />
|
||||
</svelte:fragment>
|
||||
<HeaderUtilities>
|
||||
<HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust}" />
|
||||
<HeaderAction
|
||||
bind:isOpen="{isOpen1}"
|
||||
<HeaderGlobalAction
|
||||
iconDescription="Settings"
|
||||
tooltipAlignment="start"
|
||||
icon="{SettingsAdjust}"
|
||||
/>
|
||||
<HeaderGlobalAction
|
||||
iconDescription="Profile"
|
||||
icon="{UserAvatarFilledAlt}"
|
||||
closeIcon="{UserAvatarFilledAlt}"
|
||||
>
|
||||
<HeaderPanelLinks>
|
||||
<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
|
||||
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
|
||||
<HeaderPanelLink>Switcher item 2</HeaderPanelLink>
|
||||
<HeaderPanelLink>Switcher item 3</HeaderPanelLink>
|
||||
<HeaderPanelLink>Switcher item 4</HeaderPanelLink>
|
||||
<HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>
|
||||
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
|
||||
<HeaderPanelLink>Switcher item 2</HeaderPanelLink>
|
||||
<HeaderPanelDivider>Switcher subject 3</HeaderPanelDivider>
|
||||
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
|
||||
</HeaderPanelLinks>
|
||||
</HeaderAction>
|
||||
<HeaderAction bind:isOpen="{isOpen2}">
|
||||
<HeaderPanelLinks>
|
||||
<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
|
||||
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
|
||||
<HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>
|
||||
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
|
||||
<HeaderPanelLink>Switcher item 2</HeaderPanelLink>
|
||||
<HeaderPanelLink>Switcher item 3</HeaderPanelLink>
|
||||
<HeaderPanelLink>Switcher item 4</HeaderPanelLink>
|
||||
<HeaderPanelLink>Switcher item 5</HeaderPanelLink>
|
||||
</HeaderPanelLinks>
|
||||
</HeaderAction>
|
||||
/>
|
||||
<HeaderGlobalAction
|
||||
iconDescription="Log out"
|
||||
tooltipAlignment="end"
|
||||
icon="{Logout}"
|
||||
/>
|
||||
</HeaderUtilities>
|
||||
</Header>
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
<slot />
|
||||
{#if $$slots.icon}
|
||||
<slot
|
||||
name="icon"
|
||||
style="{hasIconOnly ? 'margin-left: 0' : undefined}"
|
||||
aria-label="{iconDescription}"
|
||||
{...iconProps}
|
||||
/>
|
||||
{:else if icon}
|
||||
<svelte:component
|
||||
this="{icon}"
|
||||
style="{hasIconOnly ? 'margin-left: 0' : undefined}"
|
||||
{...iconProps}
|
||||
/>
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
<SkipToContent />
|
||||
</div>
|
||||
<HeaderUtilities>
|
||||
<HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust}" />
|
||||
<HeaderGlobalAction iconDescription="Settings" icon="{SettingsAdjust}" />
|
||||
<HeaderAction
|
||||
bind:isOpen
|
||||
on:open
|
||||
|
|
|
|||
2
types/Button/Button.svelte.d.ts
vendored
2
types/Button/Button.svelte.d.ts
vendored
|
|
@ -41,6 +41,7 @@ export interface ButtonProps extends ButtonSkeletonProps, RestProps {
|
|||
|
||||
/**
|
||||
* Specify the icon to render
|
||||
* Alternatively, use the named slot "icon" (e.g., `<Icon slot="icon" size="{20}" />`)
|
||||
* @default undefined
|
||||
*/
|
||||
icon?: typeof import("svelte").SvelteComponent<any>;
|
||||
|
|
@ -132,5 +133,6 @@ export default class Button extends SvelteComponentTyped<
|
|||
[key: string]: any;
|
||||
};
|
||||
};
|
||||
icon: {};
|
||||
}
|
||||
> {}
|
||||
|
|
|
|||
12
types/UIShell/HeaderGlobalAction.svelte.d.ts
vendored
12
types/UIShell/HeaderGlobalAction.svelte.d.ts
vendored
|
|
@ -1,9 +1,7 @@
|
|||
import type { SvelteComponentTyped } from "svelte";
|
||||
import type { SvelteHTMLElements } from "svelte/elements";
|
||||
import type { ButtonProps } from "../Button/Button.svelte";
|
||||
|
||||
type RestProps = SvelteHTMLElements["button"];
|
||||
|
||||
export interface HeaderGlobalActionProps extends RestProps {
|
||||
export interface HeaderGlobalActionProps extends ButtonProps {
|
||||
/**
|
||||
* Set to `true` to use the active variant
|
||||
* @default false
|
||||
|
|
@ -20,13 +18,11 @@ export interface HeaderGlobalActionProps extends RestProps {
|
|||
* Obtain a reference to the HTML button element
|
||||
* @default null
|
||||
*/
|
||||
ref?: null | HTMLButtonElement;
|
||||
|
||||
[key: `data-${string}`]: any;
|
||||
ref?: HTMLButtonElement;
|
||||
}
|
||||
|
||||
export default class HeaderGlobalAction extends SvelteComponentTyped<
|
||||
HeaderGlobalActionProps,
|
||||
{ click: WindowEventMap["click"] },
|
||||
{ default: {} }
|
||||
{}
|
||||
> {}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue