Skip to content

Commit

Permalink
feat(button): add stacked prop to ButtonSet
Browse files Browse the repository at this point in the history
If set to true, buttons will be aligned vertically
  • Loading branch information
metonym committed Sep 5, 2020
1 parent 5f62cde commit c8e0a59
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 3 deletions.
5 changes: 3 additions & 2 deletions src/Button/Button.Story.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
small,
tooltipPosition,
tooltipAlignment,
stacked,
} = $$props;
const regularProps = {
Expand All @@ -35,7 +36,7 @@
tooltipAlignment,
};
const setProps = { disabled, small, size, iconDescription };
const setProps = { stacked, disabled, small, size, iconDescription };
</script>

<div>
Expand All @@ -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>
Expand Down
13 changes: 12 additions & 1 deletion src/Button/ButtonSet.svelte
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit c8e0a59

Please sign in to comment.