mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 11:36:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(button): set default values for tooltip alignment, position

Browse source
This commit is contained in:
Eric Liu 2021-01-22 16:25:08 -08:00
commit 2e899232c5
5 changed files with 23 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

4
docs/src/COMPONENT_API.json
View file

@ -547,7 +547,7 @@
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
"reactive": true
},
{
"name": "icon",
@ -572,6 +572,7 @@
"kind": "let",
"description": "Set the alignment of the tooltip relative to the icon\n`hasIconOnly` must be set to `true`",
"type": "\"start\" | \"center\" | \"end\"",
"value": "\"center\"",
"isFunction": false,
"constant": false,
"reactive": false
@ -581,6 +582,7 @@
"kind": "let",
"description": "Set the position of the tooltip relative to the icon",
"type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
"value": "\"bottom\"",
"isFunction": false,
"constant": false,
"reactive": false

14
docs/src/pages/components/Button.svx
View file

@ -31,7 +31,9 @@
### Danger tertiary, icon-only button
<Button kind="danger-tertiary" tooltipPosition="bottom" tooltipAlignment="center" iconDescription="Delete" icon={TrashCan16} />
**Note:** you must provide an `iconDescription` for the button tooltip.
<Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan16} />
### Danger ghost button
@ -43,13 +45,15 @@
### Icon-only button
Set `hasIconOnly` to `true` to use the icon-only button variant.
**Note:** you must provide an `iconDescription` for the button tooltip.
The tooltip position and alignment can be controlled by the `tooltipPosition`, `tooltipAlignment` props, respectively.
<Button iconDescription="Tooltip text" icon={Add16} />
<Button tooltipPosition="bottom" tooltipAlignment="center" iconDescription="Tooltip text" icon={Add16} />
### Icon-only button (custom tooltip position)
The tooltip position and alignment can be controlled by `tooltipPosition` and `tooltipAlignment`.
<Button tooltipPosition="right" tooltipAlignment="end" iconDescription="Tooltip text" icon={Add16} />
### Link button