From c8e0a594741a2c9dd177f6807654e13fbee68d87 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 4 Sep 2020 17:35:22 -0700
Subject: [PATCH] feat(button): add stacked prop to ButtonSet

If set to true, buttons will be aligned vertically
---
 src/Button/Button.Story.svelte |  5 +++--
 src/Button/ButtonSet.svelte    | 13 ++++++++++++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/Button/Button.Story.svelte b/src/Button/Button.Story.svelte
index aa34d074..1210163f 100644
--- a/src/Button/Button.Story.svelte
+++ b/src/Button/Button.Story.svelte
@@ -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>
diff --git a/src/Button/ButtonSet.svelte b/src/Button/ButtonSet.svelte
index a529ea7b..007936ea 100644
--- a/src/Button/ButtonSet.svelte
+++ b/src/Button/ButtonSet.svelte
@@ -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>