From 85b12549ecff83f866588394ecff747e69567bc4 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Thu, 19 Dec 2019 15:28:40 +0100
Subject: [PATCH] Simplify input groups by dropping `.input-group-prepend` and
 `.input-group-append`

---
 scss/forms/_input-group.scss                  |  97 ++------
 .../docs/4.3/components/button-group.md       |   8 +-
 site/content/docs/4.3/components/navbar.md    |   4 +-
 .../docs/4.3/examples/checkout/index.html     |  10 +-
 site/content/docs/4.3/forms/input-group.md    | 222 +++++++-----------
 site/content/docs/4.3/forms/layout.md         |  12 +-
 site/content/docs/4.3/forms/validation.md     |  16 +-
 site/content/docs/4.3/migration.md            |   1 +
 8 files changed, 129 insertions(+), 241 deletions(-)

diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index f729d0bd2b..878cb83d69 100644
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -1,5 +1,3 @@
-// stylelint-disable selector-no-qualifying-type
-
 //
 // Base styles
 //
@@ -18,13 +16,6 @@
     flex: 1 1 auto;
     width: 1%;
     min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
-    margin-bottom: 0;
-
-    + .form-control,
-    + .form-select,
-    + .form-file {
-      margin-left: -$input-border-width;
-    }
   }
 
   // Bring the "active" form control to the top of surrounding elements
@@ -35,37 +26,19 @@
   }
 
   // Bring the custom file input above the label
-  > .form-file .form-file-input:focus {
-    z-index: 4;
-  }
-
-  > .form-control,
-  > .form-select {
-    &: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
-  // border-radius overrides.
   > .form-file {
-    display: flex;
-    align-items: center;
+    > .form-file-input:focus {
+      z-index: 4;
+    }
 
-    &:not(:last-child) .form-file-label { @include border-right-radius(0); }
-    &:not(:first-child) .form-file-label { @include border-left-radius(0); }
+    &:not(:last-child) > .form-file-label {
+      @include border-right-radius(0);
+    }
+
+    &:not(:first-child) > .form-file-label {
+      @include border-left-radius(0);
+    }
   }
-}
-
-
-// Prepend and append
-//
-// While it requires one extra layer of HTML for each, dedicated prepend and
-// append elements allow us to 1) be less clever, 2) simplify our selectors, and
-// 3) support HTML5 form validation.
-
-.input-group-prepend,
-.input-group-append {
-  display: flex;
 
   // Ensure buttons are always above inputs for more visually pleasing borders.
   // This isn't needed for `.input-group-text` since it shares the same border-color
@@ -78,18 +51,8 @@
       z-index: 3;
     }
   }
-
-  .btn + .btn,
-  .btn + .input-group-text,
-  .input-group-text + .input-group-text,
-  .input-group-text + .btn {
-    margin-left: -$input-border-width;
-  }
 }
 
-.input-group-prepend { margin-right: -$input-border-width; }
-.input-group-append { margin-left: -$input-border-width; }
-
 
 // Textual addons
 //
@@ -128,10 +91,8 @@
 
 .input-group-lg > .form-control,
 .input-group-lg > .form-select,
-.input-group-lg > .input-group-prepend > .input-group-text,
-.input-group-lg > .input-group-append > .input-group-text,
-.input-group-lg > .input-group-prepend > .btn,
-.input-group-lg > .input-group-append > .btn {
+.input-group-lg > .input-group-text,
+.input-group-lg > .btn {
   padding: $input-padding-y-lg $input-padding-x-lg;
   @include font-size($input-font-size-lg);
   @include border-radius($input-border-radius-lg);
@@ -147,10 +108,8 @@
 
 .input-group-sm > .form-control,
 .input-group-sm > .form-select,
-.input-group-sm > .input-group-prepend > .input-group-text,
-.input-group-sm > .input-group-append > .input-group-text,
-.input-group-sm > .input-group-prepend > .btn,
-.input-group-sm > .input-group-append > .btn {
+.input-group-sm > .input-group-text,
+.input-group-sm > .btn {
   padding: $input-padding-y-sm $input-padding-x-sm;
   @include font-size($input-font-size-sm);
   @include border-radius($input-border-radius-sm);
@@ -162,27 +121,21 @@
 }
 
 
-// Prepend and append rounded corners
+// Rounded corners
 //
 // These rulesets must come after the sizing ones to properly override sm and lg
 // 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.
 
+// stylelint-disable-next-line no-duplicate-selectors
+.input-group {
+  > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
+  > .dropdown-toggle:nth-last-child(n + 3) {
+    @include border-right-radius(0);
+  }
 
-.input-group > .input-group-prepend > .btn,
-.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);
-}
-
-.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);
+  > :not(:first-child):not(.dropdown-menu) {
+    margin-left: -$input-border-width;
+    @include border-left-radius(0);
+  }
 }
diff --git a/site/content/docs/4.3/components/button-group.md b/site/content/docs/4.3/components/button-group.md
index b4c8543fc8..3ec0db2409 100644
--- a/site/content/docs/4.3/components/button-group.md
+++ b/site/content/docs/4.3/components/button-group.md
@@ -60,9 +60,7 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
     <button type="button" class="btn btn-secondary">4</button>
   </div>
   <div class="input-group">
-    <div class="input-group-prepend">
-      <div class="input-group-text" id="btnGroupAddon">@</div>
-    </div>
+    <div class="input-group-text" id="btnGroupAddon">@</div>
     <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
   </div>
 </div>
@@ -75,9 +73,7 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
     <button type="button" class="btn btn-secondary">4</button>
   </div>
   <div class="input-group">
-    <div class="input-group-prepend">
-      <div class="input-group-text" id="btnGroupAddon2">@</div>
-    </div>
+    <div class="input-group-text" id="btnGroupAddon2">@</div>
     <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
   </div>
 </div>
diff --git a/site/content/docs/4.3/components/navbar.md b/site/content/docs/4.3/components/navbar.md
index bc3c606d72..4ae3dddc4a 100644
--- a/site/content/docs/4.3/components/navbar.md
+++ b/site/content/docs/4.3/components/navbar.md
@@ -249,9 +249,7 @@ Input groups work, too. If your navbar is an entire form, or mostly form, you ca
 <nav class="navbar navbar-light bg-light">
   <form class="container-fluid">
     <div class="input-group">
-      <div class="input-group-prepend">
-        <span class="input-group-text" id="basic-addon1">@</span>
-      </div>
+      <span class="input-group-text" id="basic-addon1">@</span>
       <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
     </div>
   </form>
diff --git a/site/content/docs/4.3/examples/checkout/index.html b/site/content/docs/4.3/examples/checkout/index.html
index bf65f9fbd7..94f89db724 100644
--- a/site/content/docs/4.3/examples/checkout/index.html
+++ b/site/content/docs/4.3/examples/checkout/index.html
@@ -59,9 +59,7 @@ body_class: "bg-light"
       <form class="card p-2">
         <div class="input-group">
           <input type="text" class="form-control" placeholder="Promo code">
-          <div class="input-group-append">
-            <button type="submit" class="btn btn-secondary">Redeem</button>
-          </div>
+          <button type="submit" class="btn btn-secondary">Redeem</button>
         </div>
       </form>
     </div>
@@ -88,11 +86,9 @@ body_class: "bg-light"
           <div class="col-12">
             <label for="username">Username</label>
             <div class="input-group">
-              <div class="input-group-prepend">
-                <span class="input-group-text">@</span>
-              </div>
+              <span class="input-group-text">@</span>
               <input type="text" class="form-control" id="username" placeholder="Username" required>
-              <div class="invalid-feedback w-100">
+            <div class="invalid-feedback">
                 Your username is required.
               </div>
             </div>
diff --git a/site/content/docs/4.3/forms/input-group.md b/site/content/docs/4.3/forms/input-group.md
index 2faa6721e3..4fde2cf78f 100644
--- a/site/content/docs/4.3/forms/input-group.md
+++ b/site/content/docs/4.3/forms/input-group.md
@@ -12,41 +12,29 @@ Place one add-on or button on either side of an input. You may also place one on
 
 {{< example >}}
 <div class="input-group mb-3">
-  <div class="input-group-prepend">
-    <span class="input-group-text" id="basic-addon1">@</span>
-  </div>
+  <span class="input-group-text" id="basic-addon1">@</span>
   <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
 </div>
 
 <div class="input-group mb-3">
   <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
-  <div class="input-group-append">
-    <span class="input-group-text" id="basic-addon2">@example.com</span>
-  </div>
+  <span class="input-group-text" id="basic-addon2">@example.com</span>
 </div>
 
 <label for="basic-url">Your vanity URL</label>
 <div class="input-group mb-3">
-  <div class="input-group-prepend">
-    <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
-  </div>
+  <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
   <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
 </div>
 
 <div class="input-group mb-3">
-  <div class="input-group-prepend">
-    <span class="input-group-text">$</span>
-  </div>
+  <span class="input-group-text">$</span>
   <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
-  <div class="input-group-append">
-    <span class="input-group-text">.00</span>
-  </div>
+  <span class="input-group-text">.00</span>
 </div>
 
 <div class="input-group">
-  <div class="input-group-prepend">
-    <span class="input-group-text">With textarea</span>
-  </div>
+  <span class="input-group-text">With textarea</span>
   <textarea class="form-control" aria-label="With textarea"></textarea>
 </div>
 {{< /example >}}
@@ -57,9 +45,7 @@ Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custo
 
 {{< example >}}
 <div class="input-group flex-nowrap">
-  <div class="input-group-prepend">
-    <span class="input-group-text" id="addon-wrapping">@</span>
-  </div>
+  <span class="input-group-text" id="addon-wrapping">@</span>
   <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
 </div>
 {{< /example >}}
@@ -72,23 +58,17 @@ Add the relative form sizing classes to the `.input-group` itself and contents w
 
 {{< example >}}
 <div class="input-group input-group-sm mb-3">
-  <div class="input-group-prepend">
-    <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
-  </div>
+  <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
   <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
 </div>
 
 <div class="input-group mb-3">
-  <div class="input-group-prepend">
-    <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
-  </div>
+  <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
   <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
 </div>
 
 <div class="input-group input-group-lg">
-  <div class="input-group-prepend">
-    <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
-  </div>
+  <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
   <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
 </div>
 {{< /example >}}
@@ -99,19 +79,15 @@ Place any checkbox or radio option within an input group's addon instead of text
 
 {{< example >}}
 <div class="input-group mb-3">
-  <div class="input-group-prepend">
-    <div class="input-group-text">
-      <input class="form-check-input" type="checkbox" value="" aria-label="Checkbox for following text input">
-    </div>
+  <div class="input-group-text">
+    <input class="form-check-input" type="checkbox" value="" aria-label="Checkbox for following text input">
   </div>
   <input type="text" class="form-control" aria-label="Text input with checkbox">
 </div>
 
 <div class="input-group">
-  <div class="input-group-prepend">
-    <div class="input-group-text">
-      <input class="form-check-input" type="radio" value="" aria-label="Radio button for following text input">
-    </div>
+  <div class="input-group-text">
+    <input class="form-check-input" type="radio" value="" aria-label="Radio button for following text input">
   </div>
   <input type="text" class="form-control" aria-label="Text input with radio button">
 </div>
@@ -123,9 +99,7 @@ While multiple `<input>`s are supported visually, validation styles are only ava
 
 {{< example >}}
 <div class="input-group">
-  <div class="input-group-prepend">
-    <span class="input-group-text">First and last name</span>
-  </div>
+  <span class="input-group-text">First and last name</span>
   <input type="text" aria-label="First name" class="form-control">
   <input type="text" aria-label="Last name" class="form-control">
 </div>
@@ -137,19 +111,15 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
 
 {{< example >}}
 <div class="input-group mb-3">
-  <div class="input-group-prepend">
-    <span class="input-group-text">$</span>
-    <span class="input-group-text">0.00</span>
-  </div>
+  <span class="input-group-text">$</span>
+  <span class="input-group-text">0.00</span>
   <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
 </div>
 
 <div class="input-group">
   <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
-  <div class="input-group-append">
-    <span class="input-group-text">$</span>
-    <span class="input-group-text">0.00</span>
-  </div>
+  <span class="input-group-text">$</span>
+  <span class="input-group-text">0.00</span>
 </div>
 {{< /example >}}
 
@@ -157,33 +127,25 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
 
 {{< example >}}
 <div class="input-group mb-3">
-  <div class="input-group-prepend">
-    <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
-  </div>
+  <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
   <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
 </div>
 
 <div class="input-group mb-3">
   <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
-  <div class="input-group-append">
-    <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
-  </div>
+  <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
 </div>
 
 <div class="input-group mb-3">
-  <div class="input-group-prepend" id="button-addon3">
-    <button class="btn btn-outline-secondary" type="button">Button</button>
-    <button class="btn btn-outline-secondary" type="button">Button</button>
-  </div>
-  <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons" aria-describedby="button-addon3">
+  <button class="btn btn-outline-secondary" type="button">Button</button>
+  <button class="btn btn-outline-secondary" type="button">Button</button>
+  <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons">
 </div>
 
 <div class="input-group">
-  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4">
-  <div class="input-group-append" id="button-addon4">
-    <button class="btn btn-outline-secondary" type="button">Button</button>
-    <button class="btn btn-outline-secondary" type="button">Button</button>
-  </div>
+  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons">
+  <button class="btn btn-outline-secondary" type="button">Button</button>
+  <button class="btn btn-outline-secondary" type="button">Button</button>
 </div>
 {{< /example >}}
 
@@ -191,30 +153,46 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
 
 {{< example >}}
 <div class="input-group mb-3">
-  <div class="input-group-prepend">
-    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
-    <div class="dropdown-menu">
-      <a class="dropdown-item" href="#">Action</a>
-      <a class="dropdown-item" href="#">Another action</a>
-      <a class="dropdown-item" href="#">Something else here</a>
-      <div role="separator" class="dropdown-divider"></div>
-      <a class="dropdown-item" href="#">Separated link</a>
-    </div>
+  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
+  <div class="dropdown-menu">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <a class="dropdown-item" href="#">Something else here</a>
+    <div role="separator" class="dropdown-divider"></div>
+    <a class="dropdown-item" href="#">Separated link</a>
   </div>
   <input type="text" class="form-control" aria-label="Text input with dropdown button">
 </div>
 
-<div class="input-group">
+<div class="input-group mb-3">
   <input type="text" class="form-control" aria-label="Text input with dropdown button">
-  <div class="input-group-append">
-    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
-    <div class="dropdown-menu">
-      <a class="dropdown-item" href="#">Action</a>
-      <a class="dropdown-item" href="#">Another action</a>
-      <a class="dropdown-item" href="#">Something else here</a>
-      <div role="separator" class="dropdown-divider"></div>
-      <a class="dropdown-item" href="#">Separated link</a>
-    </div>
+  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
+  <div class="dropdown-menu dropdown-menu-right">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <a class="dropdown-item" href="#">Something else here</a>
+    <div role="separator" class="dropdown-divider"></div>
+    <a class="dropdown-item" href="#">Separated link</a>
+  </div>
+</div>
+
+<div class="input-group">
+  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
+  <div class="dropdown-menu">
+    <a class="dropdown-item" href="#">Action before</a>
+    <a class="dropdown-item" href="#">Another action before</a>
+    <a class="dropdown-item" href="#">Something else here</a>
+    <div role="separator" class="dropdown-divider"></div>
+    <a class="dropdown-item" href="#">Separated link</a>
+  </div>
+  <input type="text" class="form-control" aria-label="Text input with 2 dropdown buttons">
+  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
+  <div class="dropdown-menu dropdown-menu-right">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <a class="dropdown-item" href="#">Something else here</a>
+    <div role="separator" class="dropdown-divider"></div>
+    <a class="dropdown-item" href="#">Separated link</a>
   </div>
 </div>
 {{< /example >}}
@@ -223,36 +201,32 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
 
 {{< example >}}
 <div class="input-group mb-3">
-  <div class="input-group-prepend">
-    <button type="button" class="btn btn-outline-secondary">Action</button>
-    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-      <span class="sr-only">Toggle Dropdown</span>
-    </button>
-    <div class="dropdown-menu">
-      <a class="dropdown-item" href="#">Action</a>
-      <a class="dropdown-item" href="#">Another action</a>
-      <a class="dropdown-item" href="#">Something else here</a>
-      <div role="separator" class="dropdown-divider"></div>
-      <a class="dropdown-item" href="#">Separated link</a>
-    </div>
+  <button type="button" class="btn btn-outline-secondary">Action</button>
+  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
+    <span class="sr-only">Toggle Dropdown</span>
+  </button>
+  <div class="dropdown-menu">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <a class="dropdown-item" href="#">Something else here</a>
+    <div role="separator" class="dropdown-divider"></div>
+    <a class="dropdown-item" href="#">Separated link</a>
   </div>
   <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
 </div>
 
 <div class="input-group">
   <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
-  <div class="input-group-append">
-    <button type="button" class="btn btn-outline-secondary">Action</button>
-    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-      <span class="sr-only">Toggle Dropdown</span>
-    </button>
-    <div class="dropdown-menu">
-      <a class="dropdown-item" href="#">Action</a>
-      <a class="dropdown-item" href="#">Another action</a>
-      <a class="dropdown-item" href="#">Something else here</a>
-      <div role="separator" class="dropdown-divider"></div>
-      <a class="dropdown-item" href="#">Separated link</a>
-    </div>
+  <button type="button" class="btn btn-outline-secondary">Action</button>
+  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
+    <span class="sr-only">Toggle Dropdown</span>
+  </button>
+  <div class="dropdown-menu dropdown-menu-right">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <a class="dropdown-item" href="#">Something else here</a>
+    <div role="separator" class="dropdown-divider"></div>
+    <a class="dropdown-item" href="#">Separated link</a>
   </div>
 </div>
 {{< /example >}}
@@ -265,9 +239,7 @@ Input groups include support for custom selects and custom file inputs. Browser
 
 {{< example >}}
 <div class="input-group mb-3">
-  <div class="input-group-prepend">
-    <label class="input-group-text" for="inputGroupSelect01">Options</label>
-  </div>
+  <label class="input-group-text" for="inputGroupSelect01">Options</label>
   <select class="form-select" id="inputGroupSelect01">
     <option selected>Choose...</option>
     <option value="1">One</option>
@@ -283,15 +255,11 @@ Input groups include support for custom selects and custom file inputs. Browser
     <option value="2">Two</option>
     <option value="3">Three</option>
   </select>
-  <div class="input-group-append">
-    <label class="input-group-text" for="inputGroupSelect02">Options</label>
-  </div>
+  <label class="input-group-text" for="inputGroupSelect02">Options</label>
 </div>
 
 <div class="input-group mb-3">
-  <div class="input-group-prepend">
-    <button class="btn btn-outline-secondary" type="button">Button</button>
-  </div>
+  <button class="btn btn-outline-secondary" type="button">Button</button>
   <select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
     <option selected>Choose...</option>
     <option value="1">One</option>
@@ -307,9 +275,7 @@ Input groups include support for custom selects and custom file inputs. Browser
     <option value="2">Two</option>
     <option value="3">Three</option>
   </select>
-  <div class="input-group-append">
-    <button class="btn btn-outline-secondary" type="button">Button</button>
-  </div>
+  <button class="btn btn-outline-secondary" type="button">Button</button>
 </div>
 {{< /example >}}
 
@@ -317,9 +283,7 @@ Input groups include support for custom selects and custom file inputs. Browser
 
 {{< example >}}
 <div class="input-group mb-3">
-  <div class="input-group-prepend">
-    <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
-  </div>
+  <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
   <div class="form-file">
     <input type="file" class="form-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
     <label class="form-file-label" for="inputGroupFile01">
@@ -337,15 +301,11 @@ Input groups include support for custom selects and custom file inputs. Browser
       <span class="form-file-button">Browse</span>
     </label>
   </div>
-  <div class="input-group-append">
-    <span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
-  </div>
+  <span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
 </div>
 
 <div class="input-group mb-3">
-  <div class="input-group-prepend">
-    <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
-  </div>
+  <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
   <div class="form-file">
     <input type="file" class="form-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
     <label class="form-file-label" for="inputGroupFile03">
@@ -363,9 +323,7 @@ Input groups include support for custom selects and custom file inputs. Browser
       <span class="form-file-button">Browse</span>
     </label>
   </div>
-  <div class="input-group-append">
-    <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
-  </div>
+  <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
 </div>
 {{< /example >}}
 
diff --git a/site/content/docs/4.3/forms/layout.md b/site/content/docs/4.3/forms/layout.md
index b580be6d39..e9586c654d 100644
--- a/site/content/docs/4.3/forms/layout.md
+++ b/site/content/docs/4.3/forms/layout.md
@@ -232,9 +232,7 @@ The example below uses a flexbox utility to vertically center the contents and c
   <div class="col-auto">
     <label class="sr-only" for="autoSizingInputGroup">Username</label>
     <div class="input-group">
-      <div class="input-group-prepend">
-        <div class="input-group-text">@</div>
-      </div>
+      <div class="input-group-text">@</div>
       <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
     </div>
   </div>
@@ -272,9 +270,7 @@ You can then remix that once again with size-specific column classes.
   <div class="col-sm-3">
     <label class="sr-only" for="specificSizeInputGroupUsername">Username</label>
     <div class="input-group">
-      <div class="input-group-prepend">
-        <div class="input-group-text">@</div>
-      </div>
+      <div class="input-group-text">@</div>
       <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
     </div>
   </div>
@@ -317,9 +313,7 @@ Be sure to always include a `<label>` with each form control, even if you need t
   <div class="col-12">
     <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
     <div class="input-group">
-      <div class="input-group-prepend">
-        <div class="input-group-text">@</div>
-      </div>
+      <div class="input-group-text">@</div>
       <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
     </div>
   </div>
diff --git a/site/content/docs/4.3/forms/validation.md b/site/content/docs/4.3/forms/validation.md
index d7b5d29f80..c8d10745ac 100644
--- a/site/content/docs/4.3/forms/validation.md
+++ b/site/content/docs/4.3/forms/validation.md
@@ -50,9 +50,7 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
   <div class="col-md-4">
     <label for="validationCustomUsername">Username</label>
     <div class="input-group">
-      <div class="input-group-prepend">
-        <span class="input-group-text" id="inputGroupPrepend">@</span>
-      </div>
+      <span class="input-group-text" id="inputGroupPrepend">@</span>
       <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
       <div class="invalid-feedback">
         Please choose a username.
@@ -142,9 +140,7 @@ While these feedback styles cannot be styled with CSS, you can still customize t
   <div class="col-md-4">
     <label for="validationDefaultUsername">Username</label>
     <div class="input-group">
-      <div class="input-group-prepend">
-        <span class="input-group-text" id="inputGroupPrepend2">@</span>
-      </div>
+      <span class="input-group-text" id="inputGroupPrepend2">@</span>
       <input type="text" class="form-control" id="validationDefaultUsername"  aria-describedby="inputGroupPrepend2" required>
     </div>
   </div>
@@ -200,9 +196,7 @@ We recommend using client-side validation, but in case you require server-side v
   <div class="col-md-4">
     <label for="validationServerUsername">Username</label>
     <div class="input-group">
-      <div class="input-group-prepend">
-        <span class="input-group-text" id="inputGroupPrepend3">@</span>
-      </div>
+      <span class="input-group-text" id="inputGroupPrepend3">@</span>
       <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required>
       <div class="invalid-feedback">
         Please choose a username.
@@ -329,9 +323,7 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
   <div class="col-md-4 position-relative">
     <label for="validationTooltipUsername">Username</label>
     <div class="input-group">
-      <div class="input-group-prepend">
-        <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
-      </div>
+      <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
       <input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
       <div class="invalid-tooltip">
         Please choose a unique and valid username.
diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md
index 7c0541c00b..be953eca32 100644
--- a/site/content/docs/4.3/migration.md
+++ b/site/content/docs/4.3/migration.md
@@ -99,6 +99,7 @@ Changes to Reboot, typography, tables, and more.
 - Dropped `.form-inline` for the more flexible grid.
 - Dropped support for `.form-control-plaintext` inside `.input-group`s.
 - Dropped `.form-text` as existing utilities cover this use class's former use case (e.g., `.mt-2`, `.text-small`, and/or `.text-muted`).
+- Dropped `.input-group-append` and `.input-group-prepend`. You can now just add buttons and `.input-group-text` as direct children of the input groups.
 
 ## Components