fix(Button Group): .btn-group-vertical border radius with dropdown as first element

mrholek · mrholek · commit ba36c66d7b83 · 2024-08-22T00:38:00.000+02:00
diff --git a/docs/content/components/button-group.md b/docs/content/components/button-group.md
@@ -205,8 +205,6 @@ Create a set of buttons that appear vertically stacked rather than horizontally.
 {{< example >}}
 <div class="docs-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 id="btnGroupVerticalDrop1" type="button" class="btn btn-primary dropdown-toggle" data-coreui-toggle="dropdown" aria-expanded="false">
         Dropdown
@@ -216,6 +214,8 @@ Create a set of buttons that appear vertically stacked rather than horizontally.
         <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 id="btnGroupVerticalDrop2" type="button" class="btn btn-primary dropdown-toggle" data-coreui-toggle="dropdown" aria-expanded="false">
         Dropdown
diff --git 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);
   }

Original file line number	Diff line number	Diff line change
`@@ -135,7 +135,12 @@`
`135`	`135`	`@include border-bottom-radius(0);`
`136`	`136`	`}`
`137`	`137`
`138`		`- > .btn ~ .btn,`
	`138`	`+ // The top radius should be 0 if the button is:`
	`139`	`+ // - the "third or more" child`
	`140`	+ // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
	`141`	`+ // - part of a btn-group which isn't the first child`
	`142`	`+ > .btn:nth-child(n + 3),`
	`143`	`+ > :not(.btn-check) + .btn,`
`139`	`144`	`> .btn-group:not(:first-child) > .btn {`
`140`	`145`	`@include border-top-radius(0);`
`141`	`146`	`}`