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(button): add isSelected prop for icon-only, ghost buttons

Browse source
This commit is contained in:
Eric Y Liu 2021-03-05 14:17:29 -08:00
commit 5f3450839a
5 changed files with 36 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
COMPONENT_INDEX.md
View file

@ -342,6 +342,7 @@ None.
| 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 |
| size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small"</code> | <code>"default"</code> | Specify the size of button |
| isSelected | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selected state for an icon-only, ghost button |
| 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 |
| 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` |

10
docs/src/COMPONENT_API.json
View file

@ -368,6 +368,16 @@
"constant": false,
"reactive": false
},
{
"name": "isSelected",
"kind": "let",
"description": "Set to `true` to enable the selected state for an icon-only, ghost button",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "hasIconOnly",
"kind": "let",

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

@ -2,7 +2,12 @@
import { Button } from "carbon-components-svelte";
import Add16 from "carbon-icons-svelte/lib/Add16";
import TrashCan16 from "carbon-icons-svelte/lib/TrashCan16";
import TextBold16 from "carbon-icons-svelte/lib/TextBold16";
import TextItalic16 from "carbon-icons-svelte/lib/TextItalic16";
import TextUnderline16 from "carbon-icons-svelte/lib/TextUnderline16";
import Preview from "../../components/Preview.svelte";
let index = 1;
</script>
### Primary button
@ -55,6 +60,14 @@ The tooltip position and alignment can be controlled by `tooltipPosition` and `t
<Button tooltipPosition="right" tooltipAlignment="end" iconDescription="Tooltip text" icon={Add16} />
### Selected icon-only, ghost button
Set `isSelected` to `true` to enable the selected state for an icon-only, ghost button.
<Button isSelected={index === 0} kind="ghost" iconDescription="Bold" icon={TextBold16} on:click={() => (index = 0)} />
<Button isSelected={index === 1} kind="ghost" iconDescription="Italicize" icon={TextItalic16} on:click={() => (index = 1)} />
<Button isSelected={index === 2} kind="ghost" iconDescription="Underline" icon={TextUnderline16} on:click={() => (index = 2)} />
### Link button
If an `href` value is specified, the component will render an [anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) with a "button" role.

6
src/Button/Button.svelte
View file

@ -17,6 +17,11 @@
*/
export let size = "default";
/**
* Set to `true` to enable the selected state for an icon-only, ghost button
*/
export let isSelected = false;
/**
* Set to `true` for the icon-only variant
* @deprecated inferred using the $$slots API
@ -104,6 +109,7 @@
hasIconOnly &&
tooltipAlignment &&
`bx--tooltip--align-${tooltipAlignment}`,
hasIconOnly && isSelected && kind === "ghost" && "bx--btn--selected",
$$restProps.class,
]
.filter(Boolean)

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

@ -26,6 +26,12 @@ export interface ButtonProps
*/
size?: "default" | "field" | "small";
/**
* Set to `true` to enable the selected state for an icon-only, ghost button
* @default false
*/
isSelected?: boolean;
/**
* Set to `true` for the icon-only variant
* @default false