Use control border on default btn in an input group (#2520)

* use control border on btn in group * Create mean-kangaroos-burn.md
primer · Sep 12, 2023 · 7e2622f · 7e2622f
1 parent 7c75006
commit 7e2622f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/.changeset/mean-kangaroos-burn.md b/.changeset/mean-kangaroos-burn.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Use `control` border on default btn in an input group
diff --git a/src/forms/input-group.scss b/src/forms/input-group.scss
@@ -54,6 +54,11 @@
   border-bottom-right-radius: 0;
 }
 
+.input-group .form-control:first-child,
+.input-group-button:first-child .btn:not(.btn-primary) {
+  border-color: var(--control-borderColor-rest, var(--color-border-default));
+}
+
 .input-group-button:first-child .btn {
   // stylelint-disable-next-line primer/spacing
   margin-right: -1px;
@@ -65,6 +70,11 @@
   border-bottom-left-radius: 0;
 }
 
+.input-group .form-control:last-child,
+.input-group-button:last-child .btn:not(.btn-primary) {
+  border-color: var(--control-borderColor-rest, var(--color-border-default));
+}
+
 .input-group-button:last-child .btn {
   // stylelint-disable-next-line primer/spacing
   margin-left: -1px;