From 5dcd89305d70f7cb27b85e6f01d9962866ae8542 Mon Sep 17 00:00:00 2001
From: Pouya Saadeghi <pouya.saadeghi@gmail.com>
Date: Sun, 11 Sep 2022 02:31:06 +0300
Subject: [PATCH] feat: `btn-group-horizontal` and `btn-group-vertical` classes
 are now responsive

---
 .../routes/components/button-group.svelte.md  | 25 +++++++-
 src/utilities/styled/button.css               | 58 -------------------
 2 files changed, 24 insertions(+), 59 deletions(-)
 delete mode 100644 src/utilities/styled/button.css

diff --git a/src/docs/src/routes/components/button-group.svelte.md b/src/docs/src/routes/components/button-group.svelte.md
index f621e2638d0..d9576020d3e 100644
--- a/src/docs/src/routes/components/button-group.svelte.md
+++ b/src/docs/src/routes/components/button-group.svelte.md
@@ -14,7 +14,8 @@ published: true
 <ClassTable
 data="{[
   { type:'component', class: 'btn-group', desc: 'Container for grouping multiple buttons' },
-  { type:'component', class: 'btn-group-vertical', desc: 'Container for grouping multiple buttons (vertical)' },
+  { type:'responsive', class: 'btn-group-horizontal', desc: 'Show buttons horizontally (default)' },
+  { type:'responsive', class: 'btn-group-vertical', desc: 'Show buttons vertically' },
 ]}"
 />
 
@@ -62,6 +63,28 @@ data="{[
 }</pre>
 </Component>
 
+<Component title="Responsive - Vertical for small screen, Horizontal on large screen">
+<div class="btn-group btn-group-vertical lg:btn-group-horizontal">
+  <button class="btn btn-active">Button</button>
+  <button class="btn">Button</button>
+  <button class="btn">Button</button>
+</div>
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<div class="$$btn-group btn-group-vertical lg:btn-group-horizontal">
+  <button class="$$btn $$btn-active">Button</button>
+  <button class="$$btn">Button</button>
+  <button class="$$btn">Button</button>
+</div>`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$btn-group $$btn-group-vertical lg:$$btn-group-horizontal">
+  <button className="$$btn $$btn-active">Button</button>
+  <button className="$$btn">Button</button>
+  <button className="$$btn">Button</button>
+</div>`
+}</pre>
+</Component>
+
 <Component title="Button group with radio buttons">
 <div class="btn-group">
   <input type="radio" name="options" data-title="1" class="btn" />
diff --git a/src/utilities/styled/button.css b/src/utilities/styled/button.css
deleted file mode 100644
index 98945b64d1c..00000000000
--- a/src/utilities/styled/button.css
+++ /dev/null
@@ -1,58 +0,0 @@
-/* group */
-.btn-group {
-  .btn:not(:first-child):not(:last-child) {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-  .btn:first-child:not(:last-child) {
-    @apply -mt-0 -ml-px;
-    border-top-left-radius: var(--rounded-btn, 0.5rem);
-    border-top-right-radius: 0;
-    border-bottom-left-radius: var(--rounded-btn, 0.5rem);
-    border-bottom-right-radius: 0;
-  }
-  .btn:last-child:not(:first-child) {
-    border-top-left-radius: 0;
-    border-top-right-radius: var(--rounded-btn, 0.5rem);
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: var(--rounded-btn, 0.5rem);
-  }
-  &-horizontal {
-    .btn:not(:first-child):not(:last-child) {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-    .btn:first-child:not(:last-child) {
-      @apply -mt-0 -ml-px;
-      border-top-left-radius: var(--rounded-btn, 0.5rem);
-      border-top-right-radius: 0;
-      border-bottom-left-radius: var(--rounded-btn, 0.5rem);
-      border-bottom-right-radius: 0;
-    }
-    .btn:last-child:not(:first-child) {
-      border-top-left-radius: 0;
-      border-top-right-radius: var(--rounded-btn, 0.5rem);
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: var(--rounded-btn, 0.5rem);
-    }
-  }
-  &-vertical {
-    .btn:first-child:not(:last-child) {
-      @apply -mt-px -ml-0;
-      border-top-left-radius: var(--rounded-btn, 0.5rem);
-      border-top-right-radius: var(--rounded-btn, 0.5rem);
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-    .btn:last-child:not(:first-child) {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      border-bottom-left-radius: var(--rounded-btn, 0.5rem);
-      border-bottom-right-radius: var(--rounded-btn, 0.5rem);
-    }
-  }
-}