From 8c6011ab4f28f6b05be608d2f016a33d984dd729 Mon Sep 17 00:00:00 2001
From: ysds <fellows3@gmail.com>
Date: Wed, 27 Dec 2017 07:23:07 +0900
Subject: [PATCH] Fix input group border radius issue (#25075) (#25076)

* Fix input group border radius issue (#25075)

* Remove migration note

- All buttons In input group do not have to be the same element now.

* lint
---
 docs/4.0/migration.md  |  2 --
 scss/_input-group.scss | 48 +++++++++++++++++-------------------------
 2 files changed, 19 insertions(+), 31 deletions(-)

diff --git a/docs/4.0/migration.md b/docs/4.0/migration.md
index 346ef84ab0..39b7dfa168 100644
--- a/docs/4.0/migration.md
+++ b/docs/4.0/migration.md
@@ -35,8 +35,6 @@ While Beta 2 saw the bulk of our breaking changes during the beta phase, but we
 
 - Sizing classes must be on the parent `.input-group` and not the individual form elements.
 
-- Due to limitations in how CSS selectors work, all buttons must be the same element (e.g., `<a>` or `<button>`).
-
 ## Beta 2 changes
 
 While in beta, we aim to have no breaking changes. However, things don't always go as planned. Below are the breaking changes to bear in mind when moving from Beta 1 to Beta 2.
diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index f1d3c9dea1..7ef0267cc3 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -33,9 +33,8 @@
 
   .form-control,
   .custom-select {
-    &:not(:first-child):not(:last-of-type) { @include border-radius(0); }
-    &:first-child { @include border-right-radius(0); }
-    &:last-of-type:not(:first-child) { @include border-left-radius(0); }
+    &:not(:last-child) { @include border-right-radius(0); }
+    &:not(:first-child) { @include border-left-radius(0); }
   }
 
   // Custom file inputs have more complex markup, thus requiring different
@@ -44,12 +43,10 @@
     display: flex;
     align-items: center;
 
-    &:not(:first-child):not(:last-of-type) .custom-file-control,
-    &:not(:first-child):not(:last-of-type) .custom-file-control::before { @include border-radius(0); }
-    &:first-child .custom-file-control,
-    &:first-child .custom-file-control::before { @include border-right-radius(0); }
-    &:last-of-type:not(:first-child) .custom-file-control,
-    &:last-of-type:not(:first-child) .custom-file-control::before { @include border-left-radius(0); }
+    &:not(:last-child) .custom-file-control,
+    &:not(:last-child) .custom-file-control::before { @include border-right-radius(0); }
+    &:not(:first-child) .custom-file-control,
+    &:not(:first-child) .custom-file-control::before { @include border-left-radius(0); }
   }
 }
 
@@ -139,28 +136,21 @@
 // border-radius values when extending. They're more specific than we'd like
 // with the `.input-group >` part, but without it, we cannot override the sizing.
 
+
 .input-group > .input-group-prepend > .btn,
-.input-group > .input-group-prepend > .input-group-text {
-  // All prepended buttons have no right border-radius
+.input-group > .input-group-prepend > .input-group-text,
+.input-group > .input-group-append:not(:last-child) > .btn,
+.input-group > .input-group-append:not(:last-child) > .input-group-text,
+.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
+.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
   @include border-right-radius(0);
-
-  + .btn,
-  + .input-group-text {
-    @include border-left-radius(0);
-  }
 }
 
-// We separate out the button and input resets here because `.input-group-text`
-// can be any HTML element, but buttons are always inputs, buttons, or anchors.
-.input-group > .input-group-append {
-  // Everything but the last one have no rounded corners
-  .btn:not(:last-of-type),
-  .input-group-text:not(:last-child) {
-    @include border-radius(0);
-  }
-
-  .btn:last-of-type,
-  .input-group-text:last-child {
-    @include border-left-radius(0);
-  }
+.input-group > .input-group-append > .btn,
+.input-group > .input-group-append > .input-group-text,
+.input-group > .input-group-prepend:not(:first-child) > .btn,
+.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
+.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
+.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
+  @include border-left-radius(0);
 }