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

feat(tooltip-icon): support disabled state

Browse source
This commit is contained in:
Eric Y Liu 2021-06-26 06:55:15 -07:00
commit b0873ee6c0
5 changed files with 30 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

1
COMPONENT_INDEX.md
View file

@ -4523,6 +4523,7 @@ None.
| ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| tooltipText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the tooltip text.<br />Alternatively, use the "tooltipText" slot |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tooltip icon |
| align | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon |
| direction | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the icon |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the span element |

10
docs/src/COMPONENT_API.json
View file

@ -11423,6 +11423,16 @@
"constant": false,
"reactive": false
},
{
"name": "disabled",
"kind": "let",
"description": "Set to `true` to disable the tooltip icon",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "align",
"kind": "let",

6
docs/src/pages/components/TooltipIcon.svx
View file

@ -22,4 +22,8 @@ Use the "text" slot to customize the tooltip text.
<TooltipIcon icon={Carbon24}>
<span slot="tooltipText" style="color: red">Carbon is an open source design system by IBM.</span>
</TooltipIcon>
</TooltipIcon>
### Disabled
<TooltipIcon disabled tooltipText="Carbon is an open source design system by IBM." icon={Carbon24} />

9
src/TooltipIcon/TooltipIcon.svelte
View file

@ -11,6 +11,9 @@
*/
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"}
@ -41,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'}"
@ -53,15 +57,18 @@
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;
}}"
>

6
types/TooltipIcon/TooltipIcon.d.ts vendored
View file

@ -15,6 +15,12 @@ export interface TooltipIconProps
*/
icon?: typeof import("carbon-icons-svelte").CarbonIcon;
/**
* Set to `true` to disable the tooltip icon
* @default false
*/
disabled?: boolean;
/**
* Set the alignment of the tooltip relative to the icon
* @default "center"