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

feat(v11): TooltipDefinition

Browse source 
In v11 the definintion tooltip uses the `Popover` component internally. While the component is called `DefinitionTooltip` in the reference implementation, it is not renamed at this point.

- rename `tooltipText` to `definition`
- rename `tooltip` slot to `definition`
- remove `direction` (see `align`)
- use `align` values from `Popover` and set to `bottom-left` as default instead of `center`
This commit is contained in:
Gregor Wassmann 2023-09-30 12:45:10 +02:00
commit 3350a412da
6 changed files with 61 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

23
COMPONENT_INDEX.md
View file

@ -4579,21 +4579,20 @@ None.
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :---------- | :------- | :--------------- | :------- | ------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the tooltip |
| tooltipText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the tooltip text |
| align | No | <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 | No | <code>let</code> | No | <code>"top" &#124; "bottom"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the icon |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip div element |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :--------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the tooltip |
| definition | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the term definition. |
| align | No | <code>let</code> | No | <code>"top" &#124; "top-left" &#124; "top-right" &#124; "bottom" &#124; "bottom-left" &#124; "bottom-right" &#124; "left" &#124; "left-bottom" &#124; "left-top" &#124; "right" &#124; "right-bottom" &#124; "right-top"</code> | <code>"bottom-left"</code> | Set the alignment of the tooltip relative to the icon |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip div element |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------------------------- |
| -- | Yes | -- | -- |
| tooltip | No | -- | <code>{tooltipText}</code> |
| Slot name | Default | Props | Fallback |
| :--------- | :------ | :---- | :------------------------ |
| -- | Yes | -- | -- |
| definition | No | -- | <code>{definition}</code> |
### Events