From d4bb765ef71e6945ffbd5443337b3339375e42bd Mon Sep 17 00:00:00 2001
From: Sam Richardson <sam.richardson@tylertech.com>
Date: Thu, 10 Oct 2024 09:16:46 -0400
Subject: [PATCH] fix(field): extend box to include outline

---
 src/lib/field/_core.theme.scss | 7 +++++++
 src/lib/field/forge-field.scss | 4 ++++
 2 files changed, 11 insertions(+)

diff --git a/src/lib/field/_core.theme.scss b/src/lib/field/_core.theme.scss
index 998f12ce5..bd995439b 100644
--- a/src/lib/field/_core.theme.scss
+++ b/src/lib/field/_core.theme.scss
@@ -88,6 +88,7 @@ $elevations: (
     @include override(tonal-background, map.get($tonal-backgrounds, $theme), value);
     @include override(tonal-background-hover, map.get($tonal-backgrounds-hover, $theme), value);
   }
+
   @include override(content-color, map.get($content-colors, $theme), value);
   @include override(inner-border-color, map.get($outline-colors, $theme), value);
   @include override(inner-border-color-hover, map.get($outline-colors-hover, $theme), value);
@@ -106,6 +107,7 @@ $elevations: (
     @include override(padding-inline, 0, value);
     @include override(surface-display, none, value);
   } @else if $variant == outlined {
+    @include with-outline;
     @include hidden-background;
   } @else if $variant == tonal {
     @include no-outline;
@@ -113,6 +115,7 @@ $elevations: (
     @include visible-background(tonal);
     @include override(multiline-inset-label-background, #{token(multiline-inset-label-tonal-background, custom)}, value);
   } @else if $variant == filled {
+    @include with-outline;
     @include visible-background(filled);
   } @else if $variant == raised {
     @include elevated;
@@ -122,6 +125,10 @@ $elevations: (
   }
 }
 
+@mixin with-outline {
+  padding: #{token(outline-width)};
+}
+
 @mixin no-outline($no-inner: false) {
   @include override(outline-color, transparent, value);
   @include override(outline-color-hover, transparent, value);
diff --git a/src/lib/field/forge-field.scss b/src/lib/field/forge-field.scss
index 389479235..9ec184cbc 100644
--- a/src/lib/field/forge-field.scss
+++ b/src/lib/field/forge-field.scss
@@ -36,6 +36,7 @@ $_input-selector: ':where(input, textarea, select, .forge-field__input)';
 
     box-shadow: #{token(elevation, custom)};
 
+    margin: #{token(outline-width)};
     padding-inline: #{token(padding-inline)};
     border-radius: #{token(shape)};
     outline-style: #{token(outline-style)};
@@ -72,12 +73,14 @@ $_input-selector: ':where(input, textarea, select, .forge-field__input)';
     &--plain {
       @include core.variant(plain);
 
+      margin: 0;
       outline-width: 0;
     }
 
     &--tonal {
       @include core.variant(tonal);
 
+      margin: 0;
       outline-width: 0;
       background: #{theme.variable(primary-container-low)};
 
@@ -95,6 +98,7 @@ $_input-selector: ':where(input, textarea, select, .forge-field__input)';
     &--raised {
       @include core.variant(raised);
 
+      margin: 0;
       outline-width: 0;
 
       &:hover:not(:has(#{$_input-selector}:disabled)) {