feat: add ButtonSet component

This commit is contained in:
Eric Liu 2020-08-01 15:35:58 -07:00
commit 0eefde12fe
4 changed files with 12 additions and 6 deletions

View file

@ -3,6 +3,7 @@
import Button from "./Button.svelte"; import Button from "./Button.svelte";
import ButtonSkeleton from "./Button.Skeleton.svelte"; import ButtonSkeleton from "./Button.Skeleton.svelte";
import ButtonSet from "./ButtonSet.svelte";
import Add16 from "carbon-icons-svelte/lib/Add16"; import Add16 from "carbon-icons-svelte/lib/Add16";
const { const {
@ -12,7 +13,7 @@
iconDescription, iconDescription,
small, small,
tooltipPosition, tooltipPosition,
tooltipAlignment tooltipAlignment,
} = $$props; } = $$props;
const regularProps = { const regularProps = {
@ -20,7 +21,7 @@
disabled, disabled,
size, size,
iconDescription, iconDescription,
small small,
}; };
const iconOnlyProps = { const iconOnlyProps = {
@ -31,7 +32,7 @@
icon: Add16, icon: Add16,
iconDescription, iconDescription,
tooltipPosition, tooltipPosition,
tooltipAlignment tooltipAlignment,
}; };
const setProps = { disabled, small, size, iconDescription }; const setProps = { disabled, small, size, iconDescription };
@ -49,10 +50,11 @@
{:else if story === 'icon-only buttons'} {:else if story === 'icon-only buttons'}
<Button {...iconOnlyProps} /> <Button {...iconOnlyProps} />
{:else if story === 'set of buttons'} {:else if story === 'set of buttons'}
<div class="bx--btn-set"> <ButtonSet>
<Button kind="ghost" {...setProps}>Ghost button</Button>
<Button kind="secondary" {...setProps}>Secondary button</Button> <Button kind="secondary" {...setProps}>Secondary button</Button>
<Button kind="primary" {...setProps}>Primary button</Button> <Button kind="primary" {...setProps}>Primary button</Button>
</div> </ButtonSet>
{:else} {:else}
<Button {...regularProps}>Button</Button> <Button {...regularProps}>Button</Button>
&nbsp; &nbsp;

View file

@ -0,0 +1,3 @@
<div class:bx--btn-set={true} {...$$restProps}>
<slot />
</div>

View file

@ -1,2 +1,3 @@
export { default as Button } from "./Button.svelte"; export { default as Button } from "./Button.svelte";
export { default as ButtonSkeleton } from "./Button.Skeleton.svelte"; export { default as ButtonSkeleton } from "./Button.Skeleton.svelte";
export { default as ButtonSet } from "./ButtonSet.svelte";

View file

@ -1,6 +1,6 @@
export { Accordion, AccordionItem, AccordionSkeleton } from "./Accordion"; export { Accordion, AccordionItem, AccordionSkeleton } from "./Accordion";
export { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton } from "./Breadcrumb"; export { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton } from "./Breadcrumb";
export { Button, ButtonSkeleton } from "./Button"; export { Button, ButtonSkeleton, ButtonSet } from "./Button";
export { Checkbox, CheckboxSkeleton } from "./Checkbox"; export { Checkbox, CheckboxSkeleton } from "./Checkbox";
export { ContentSwitcher, Switch } from "./ContentSwitcher"; export { ContentSwitcher, Switch } from "./ContentSwitcher";
export { Copy } from "./Copy"; export { Copy } from "./Copy";