Merge pull request #522 from muan/btn-form

Add .BtnGroup-parent, deprecate .BtnGroup-form
primer · Jul 3, 2018 · 30c31f9 · 30c31f9
2 parents 65c5269 + 461e05f
commit 30c31f9
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git 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
@@ -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;
@@ -38,12 +40,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 +76,7 @@
     }
 
     + .BtnGroup-item,
+    + .BtnGroup-parent .BtnGroup-item,
     + .BtnGroup-form .BtnGroup-item {
       border-left-width: 0;
     }