From: Tobias <t@tobiasjordans.de>
Date: Thu, 30 May 2024 05:49:28 +0000 (+0200)
Subject: Fix `.btn-group-vertical` border radius with dropdown as first element (#40488)
X-Git-Tag: v5.3.4~152
X-Git-Url: http://git.ipfire.org/gitweb/gitweb.cgi?a=commitdiff_plain;h=76ed1c6b14942834a02f2c05508d1a0d4b1687b6;p=thirdparty%2Fbootstrap.git

Fix `.btn-group-vertical` border radius with dropdown as first element (#40488)

Co-authored-by: Julien Déramond <juderamond@gmail.com>
---

diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 55ae3f65d2..dcd2a858ed 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -135,7 +135,12 @@
     @include border-bottom-radius(0);
   }
 
-  > .btn ~ .btn,
+  // The top radius should be 0 if the button is:
+  // - the "third or more" child
+  // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
+  // - part of a btn-group which isn't the first child
+  > .btn:nth-child(n + 3),
+  > :not(.btn-check) + .btn,
   > .btn-group:not(:first-child) > .btn {
     @include border-top-radius(0);
   }
diff --git a/site/content/docs/5.3/components/button-group.md b/site/content/docs/5.3/components/button-group.md
index 9f26a9181b..545467feca 100644
--- a/site/content/docs/5.3/components/button-group.md
+++ b/site/content/docs/5.3/components/button-group.md
@@ -195,8 +195,6 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
 
 {{< example >}}
 <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
-  <button type="button" class="btn btn-primary">Button</button>
-  <button type="button" class="btn btn-primary">Button</button>
   <div class="btn-group" role="group">
     <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
       Dropdown
@@ -206,6 +204,8 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
       <li><a class="dropdown-item" href="#">Dropdown link</a></li>
     </ul>
   </div>
+  <button type="button" class="btn btn-primary">Button</button>
+  <button type="button" class="btn btn-primary">Button</button>
   <div class="btn-group dropstart" role="group">
     <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
       Dropdown