feat(button): add stacked prop to ButtonSet

If set to true, buttons will be aligned vertically
This commit is contained in:
Eric Liu 2020-09-04 17:35:22 -07:00
commit c8e0a59474
2 changed files with 15 additions and 3 deletions

View file

@ -14,6 +14,7 @@
small, small,
tooltipPosition, tooltipPosition,
tooltipAlignment, tooltipAlignment,
stacked,
} = $$props; } = $$props;
const regularProps = { const regularProps = {
@ -35,7 +36,7 @@
tooltipAlignment, tooltipAlignment,
}; };
const setProps = { disabled, small, size, iconDescription }; const setProps = { stacked, disabled, small, size, iconDescription };
</script> </script>
<div> <div>
@ -50,7 +51,7 @@
{: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'}
<ButtonSet> <ButtonSet stacked="{setProps.stacked}">
<Button kind="ghost" {...setProps}>Ghost button</Button> <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>

View file

@ -1,3 +1,14 @@
<div class:bx--btn-set="{true}" {...$$restProps}> <script>
/**
* Set to `true` to stack the buttons vertically
* @type {boolean} [stacked=false]
*/
export let stacked = false;
</script>
<div
class:bx--btn-set="{true}"
class:bx--btn-set--stacked="{stacked}"
{...$$restProps}>
<slot /> <slot />
</div> </div>