Restrict Button scaling in Input Groups (#2209)

Author: tylersticka

.changeset/dry-tables-leave.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': patch
+---
+
+Prevent Buttons from feeling disconnected from Input Groups when `:hover` or `:active` states are applied

src/mixins/_button.scss

@@ -90,16 +90,20 @@
   /**
    * Transform, opacity and filter changes are performant and will work across
    * many more stylistic modifiers than specific color shifts.
+   *
+   * We optionally support custom properties to allow the amount of scaling to
+   * be adjusted by other patterns. For example, an Input Group might disable
+   * the scaling so the button always appeared joined to adjacent elements.
    */
 
   &:hover {
     filter: brightness(brightness.$control-brighten);
-    transform: scale(scale.$effect-grow);
+    transform: scale(var(--scale-effect-grow, #{scale.$effect-grow}));
   }
 
   &:active {
     filter: brightness(brightness.$control-dim);
-    transform: scale(scale.$effect-shrink);
+    transform: scale(var(--scale-effect-shrink, #{scale.$effect-shrink}));
   }
 
   &:disabled,

src/objects/input-group/input-group.scss

@@ -1,6 +1,9 @@
 @use '../../compiled/tokens/scss/size';
 
 .o-input-group {
+  // Prevent button effects from appearing disconnected from the input group
+  --scale-effect-grow: 1;
+  --scale-effect-shrink: 1;
   display: flex;
 
   // Keeps focus styles from being cut off by adjacent, un-focused elements