🐛 Account for border width in box model

appcues · Nov 2, 2022 · d0df51b · d0df51b
1 parent ee923df
commit d0df51b
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 deletions.
diff --git a/Sources/AppcuesKit/Presentation/Extensions/View+Appcues.swift b/Sources/AppcuesKit/Presentation/Extensions/View+Appcues.swift
@@ -45,6 +45,7 @@ extension View {
     func applyInternalLayout(_ style: AppcuesStyle) -> some View {
         self
             .padding(style.padding)
+            .applyBorderStyle(style)
             .frame(width: style.width, height: style.height)
             .if(style.fillWidth) { view in
                 view.frame(maxWidth: .infinity)
@@ -94,10 +95,13 @@ extension View {
             }
     }
 
-    func applyBorderStyle(_ style: AppcuesStyle) -> some View {
+    private func applyBorderStyle(_ style: AppcuesStyle) -> some View {
         self
             .ifLet(style.borderColor, style.borderWidth) { view, color, width in
-                view.overlay(
+                view
+                    // The border should account for space in the layout, not just be an overlay.
+                    .padding(width)
+                    .overlay(
                     // Need to adjust the corner radius to match the radius applied to the view.
                     RoundedRectangle(cornerRadius: (style.cornerRadius ?? 0) - width / 2)
                         .stroke(color, lineWidth: width)
@@ -121,7 +125,6 @@ extension View {
                 .applyForegroundStyle(style)
                 .applyInternalLayout(style)
                 .applyBackgroundStyle(style)
-                .applyBorderStyle(style)
                 .applyExternalLayout(style)
         )
     }

diff --git a/Sources/AppcuesKit/Presentation/UI/Components/AppcuesButton.swift b/Sources/AppcuesKit/Presentation/UI/Components/AppcuesButton.swift
@@ -37,7 +37,6 @@ internal struct AppcuesButton: View {
         }
         .applyForegroundStyle(style)
         .applyBackgroundStyle(style)
-        .applyBorderStyle(style)
         .applyExternalLayout(style)
         .setupActions(on: viewModel, for: model)
     }

diff --git a/Sources/AppcuesKit/Presentation/UI/Components/AppcuesImage.swift b/Sources/AppcuesKit/Presentation/UI/Components/AppcuesImage.swift
@@ -33,7 +33,6 @@ internal struct AppcuesImage: View {
             // clip before adding shadows
             .clipped()
             .applyBackgroundStyle(style)
-            .applyBorderStyle(style)
             .applyExternalLayout(style)
     }