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,
tooltipPosition,
tooltipAlignment,
stacked,
} = $$props;
const regularProps = {
@ -35,7 +36,7 @@
tooltipAlignment,
};
const setProps = { disabled, small, size, iconDescription };
const setProps = { stacked, disabled, small, size, iconDescription };
</script>
<div>
@ -50,7 +51,7 @@
{:else if story === 'icon-only buttons'}
<Button {...iconOnlyProps} />
{:else if story === 'set of buttons'}
<ButtonSet>
<ButtonSet stacked="{setProps.stacked}">
<Button kind="ghost" {...setProps}>Ghost button</Button>
<Button kind="secondary" {...setProps}>Secondary 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 />
</div>