From ca11480cf94213a6e2d00bc480eeb48a712a2ce2 Mon Sep 17 00:00:00 2001
From: Dana Woodman <dana@danawoodman.com>
Date: Mon, 19 Sep 2022 13:39:03 -0700
Subject: [PATCH 1/2] Fix border radius on mixed type buttons

Currently, if you have buttons of different types (`a` vs `button` for example), the button styling breaks because the selectors depend on the button type:

Change to using child selectors as this doesn't care what type of child exists.
---
 src/utilities/styled/button.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/utilities/styled/button.css b/src/utilities/styled/button.css
index f6b9dae742a..5193b0b4385 100644
--- a/src/utilities/styled/button.css
+++ b/src/utilities/styled/button.css
@@ -1,20 +1,20 @@
 /* group */
 .btn-group,
 .btn-group.btn-group-horizontal {
-  .btn:not(:first-of-type):not(:last-of-type) {
+  .btn {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
-  .btn:first-of-type:not(:last-of-type) {
+  .btn:first-child {
     @apply -ml-px -mt-0;
     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-of-type:not(:first-of-type) {
+  .btn:last-child {
     border-top-left-radius: 0;
     border-top-right-radius: var(--rounded-btn, 0.5rem);
     border-bottom-left-radius: 0;
@@ -22,17 +22,17 @@
   }
 }
 .btn-group.btn-group-vertical {
-  .btn:first-of-type:not(:last-of-type) {
+  .btn:first-child {
     @apply -ml-0 -mt-px;
     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-of-type:not(:first-of-type) {
+  .btn:last-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);
   }
-}
\ No newline at end of file
+}

From d71af1c7bfbcb2f26e7022c519ead470a88b3a95 Mon Sep 17 00:00:00 2001
From: Pouya Saadeghi <pouya.saadeghi@gmail.com>
Date: Wed, 21 Sep 2022 12:01:15 +0300
Subject: [PATCH 2/2] bring back `:not` selectors for button

because otherwise, border radius of first and last children will be wrong
---
 src/utilities/styled/button.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/utilities/styled/button.css b/src/utilities/styled/button.css
index 5193b0b4385..f105243d9c3 100644
--- a/src/utilities/styled/button.css
+++ b/src/utilities/styled/button.css
@@ -1,20 +1,20 @@
 /* group */
 .btn-group,
 .btn-group.btn-group-horizontal {
-  .btn {
+  .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 {
+  .btn:first-child:not(:last-child) {
     @apply -ml-px -mt-0;
     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 {
+  .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;
@@ -22,17 +22,17 @@
   }
 }
 .btn-group.btn-group-vertical {
-  .btn:first-child {
+  .btn:first-child:not(:last-child) {
     @apply -ml-0 -mt-px;
     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 {
+  .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);
   }
-}
+}
\ No newline at end of file