mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01: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

24
docs/src/COMPONENT_API.json
View file

@ -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",

50
docs/src/pages/framed/UIShell/HeaderUtilities.svelte
View file

@ -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>