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

6
COMPONENT_INDEX.md
View file

@ -336,13 +336,13 @@ None.
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :--------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element |
| hasIconOnly | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the icon-only variant |
| kind | <code>let</code> | No | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger-tertiary" &#124; "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button | | kind | <code>let</code> | No | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger-tertiary" &#124; "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button |
| size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small"</code> | <code>"default"</code> | Specify the size of button | | size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small"</code> | <code>"default"</code> | Specify the size of button |
| hasIconOnly | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the icon-only variant |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render | | icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| iconDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the button icon | | iconDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the button icon |
| tooltipAlignment | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | -- | Set the alignment of the tooltip relative to the icon<br />`hasIconOnly` must be set to `true` | | tooltipAlignment | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon<br />`hasIconOnly` must be set to `true` |
| tooltipPosition | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | -- | Set the position of the tooltip relative to the icon | | tooltipPosition | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the position of the tooltip relative to the icon |
| as | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., &lt;Button let:props&gt;&lt;div {...props}&gt;...&lt;/div&gt;&lt;/Button&gt;) | | as | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., &lt;Button let:props&gt;&lt;div {...props}&gt;...&lt;/div&gt;&lt;/Button&gt;) |
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state | | skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the button | | disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the button |

4
docs/src/COMPONENT_API.json
View file

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

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

@ -31,7 +31,9 @@
### Danger tertiary, icon-only button ### 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 ### Danger ghost button
@ -43,13 +45,15 @@
### Icon-only button ### Icon-only button
Set `hasIconOnly` to `true` to use the icon-only button variant.
**Note:** you must provide an `iconDescription` for the button tooltip. **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 ### Link button

9
src/Button/Button.svelte
View file

@ -17,7 +17,10 @@
*/ */
export let size = "default"; export let size = "default";
/** Set to `true` for the icon-only variant */ /**
* Set to `true` for the icon-only variant
* @deprecated inferred using the $$slots API
*/
export let hasIconOnly = false; export let hasIconOnly = false;
/** /**
@ -37,13 +40,13 @@
* `hasIconOnly` must be set to `true` * `hasIconOnly` must be set to `true`
* @type {"start" | "center" | "end"} * @type {"start" | "center" | "end"}
*/ */
export let tooltipAlignment = undefined; export let tooltipAlignment = "center";
/** /**
* Set the position of the tooltip relative to the icon * Set the position of the tooltip relative to the icon
* @type {"top" | "right" | "bottom" | "left"} * @type {"top" | "right" | "bottom" | "left"}
*/ */
export let tooltipPosition = undefined; export let tooltipPosition = "bottom";
/** /**
* Set to `true` to render a custom HTML element * Set to `true` to render a custom HTML element

2
types/Button/Button.d.ts vendored
View file

@ -37,11 +37,13 @@ export interface ButtonProps
/** /**
* Set the alignment of the tooltip relative to the icon * Set the alignment of the tooltip relative to the icon
* `hasIconOnly` must be set to `true` * `hasIconOnly` must be set to `true`
* @default "center"
*/ */
tooltipAlignment?: "start" | "center" | "end"; tooltipAlignment?: "start" | "center" | "end";
/** /**
* Set the position of the tooltip relative to the icon * Set the position of the tooltip relative to the icon
* @default "bottom"
*/ */
tooltipPosition?: "top" | "right" | "bottom" | "left"; tooltipPosition?: "top" | "right" | "bottom" | "left";