From 4fe1a4cdea1917a2e468eb84e7124ad44ebea0e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mu-An=20=E2=9C=8C=EF=B8=8F=20Chiou?= <muan@github.com>
Date: Mon, 2 Jul 2018 10:01:41 -0400
Subject: [PATCH 1/2] Add .BtnGroup-parent

---
 modules/primer-buttons/README.md             | 4 ++--
 modules/primer-buttons/lib/button-group.scss | 3 +++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/modules/primer-buttons/README.md b/modules/primer-buttons/README.md
index 3ebbe61e..d828870d 100644
--- a/modules/primer-buttons/README.md
+++ b/modules/primer-buttons/README.md
@@ -223,12 +223,12 @@ Have a hankering for a series of buttons that are attached to one another? Wrap
 </div>
 ```
 
-Add `.BtnGroup-form` to `<form>`s within `.BtnGroup`s for proper spacing and rounded corners.
+Add `.BtnGroup-parent` to parent elements, like `<form>`s or `<details>`s, within `.BtnGroup`s for proper spacing and rounded corners.
 
 ```html
 <div class="BtnGroup">
   <button class="btn BtnGroup-item" type="button">Button</button>
-  <form class="BtnGroup-form">
+  <form class="BtnGroup-parent">
     <button class="btn BtnGroup-item" type="button">Button in a form</button>
   </form>
   <button class="btn BtnGroup-item" type="button">Button</button>
diff --git a/modules/primer-buttons/lib/button-group.scss b/modules/primer-buttons/lib/button-group.scss
index cd69a3a5..cc48308f 100644
--- a/modules/primer-buttons/lib/button-group.scss
+++ b/modules/primer-buttons/lib/button-group.scss
@@ -38,12 +38,14 @@
     border-right-width: 1px;
 
     + .BtnGroup-item,
+    + .BtnGroup-parent .BtnGroup-item,
     + .BtnGroup-form .BtnGroup-item {
       border-left-width: 0;
     }
   }
 }
 
+.BtnGroup-parent,
 .BtnGroup-form {
   float: left;
 
@@ -72,6 +74,7 @@
     }
 
     + .BtnGroup-item,
+    + .BtnGroup-parent .BtnGroup-item,
     + .BtnGroup-form .BtnGroup-item {
       border-left-width: 0;
     }

From 461e05fef83b61e19920a25ad4de7f58343d8b0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mu-An=20=E2=9C=8C=EF=B8=8F=20Chiou?= <muan@github.com>
Date: Tue, 3 Jul 2018 14:21:11 -0400
Subject: [PATCH 2/2] Add deprecation warning

---
 modules/primer-buttons/lib/button-group.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/modules/primer-buttons/lib/button-group.scss b/modules/primer-buttons/lib/button-group.scss
index cc48308f..82e96f6f 100644
--- a/modules/primer-buttons/lib/button-group.scss
+++ b/modules/primer-buttons/lib/button-group.scss
@@ -2,6 +2,8 @@
 //
 // A button group is a series of buttons laid out next to each other, all part
 // of one visual button, but separated by rules to be separate.
+@warn ".BtnGroup-form will be deprecated in version 11. Use .BtnGroup-parent instead.";
+
 .BtnGroup {
   display: inline-block;
   vertical-align: middle;