Merge pull request #31 from kiwicom/fix/alert-custom-content

Fix custom content spacing for Alert.
kiwicom · Feb 15, 2022 · 611ceb0 · 611ceb0
2 parents 8d7bf60 + 2c60133
commit 611ceb0
Showing 1 changed file with 67 additions and 68 deletions.
diff --git a/Sources/Orbit/Components/Alert.swift b/Sources/Orbit/Components/Alert.swift
@@ -55,7 +55,7 @@ public struct Alert<Content: View>: View {
                 descriptionLinkAction: descriptionLinkAction
             )
 
-            VStack(spacing: .medium) {
+            Group {
                 content()
 
                 switch buttons {
@@ -209,12 +209,9 @@ struct AlertPreviews: PreviewProvider {
     static var previews: some View {
         PreviewWrapperWithState(initialState: Self.primaryAndSecondaryConfiguration) { buttonConfiguration in
             standalone
-                .previewLayout(.sizeThatFits)
-
             snapshotSuppressed
-
             snapshots
-                .previewLayout(.sizeThatFits)
+            snapshotsNoButtons
 
             VStack {
                 Alert(
@@ -244,6 +241,7 @@ struct AlertPreviews: PreviewProvider {
             .padding()
             .previewDisplayName("Live Preview")
         }
+        .previewLayout(.sizeThatFits)
     }
 
     static var standalone: some View {
@@ -306,71 +304,72 @@ struct AlertPreviews: PreviewProvider {
     }
 
     static var snapshots: some View {
-        Group {
-            VStack(spacing: .medium) {
-                Alert(
-                    "Your message - make it short & clear",
-                    description: "Description - make it as clear as possible.",
-                    icon: .informationCircle,
-                    buttons: Self.primaryAndSecondaryConfiguration
-                )
-                Alert(
-                    "Your message - make it short & clear",
-                    description: "Description - make it as clear as possible.",
-                    buttons: Self.primaryAndSecondaryConfiguration,
-                    status: .warning
-                )
-                Alert(
-                    "Your message - make it short & clear",
-                    icon: .informationCircle,
-                    buttons: Self.primaryAndSecondaryConfiguration,
-                    status: .critical
-                )
-                Alert(
-                    "Your message - make it short & clear",
-                    buttons: Self.primaryAndSecondaryConfiguration,
-                    status: .success
-                )
-                Alert(
-                    "Your message - make it short & clear",
-                    description: "Description - make it as clear as possible.",
-                    icon: .informationCircle,
-                    buttons: Self.primaryConfiguration
-                )
-                Alert(
-                    "Your message - make it short & clear",
-                    description: "Description - make it as clear as possible.",
-                    buttons: Self.primaryConfiguration
-                )
-                Alert(
-                    "Your message - make it short & clear",
-                    icon: .informationCircle,
-                    buttons: Self.primaryConfiguration
-                )
-                Alert(
-                    "Your message - make it short & clear",
-                    buttons: Self.primaryConfiguration
-                )
-            }
-            .padding(.vertical)
-            .previewDisplayName("Layout")
-
-            VStack(spacing: .medium) {
-                Alert(
-                    "Your message - make it short & clear",
-                    description: "Description - make it as clear as possible.",
-                    icon: .informationCircle
-                )
-
-                Alert("Title", description: "Description")
-                Alert("Title", icon: .informationCircle)
-                Alert("Title")
+        VStack(spacing: .medium) {
+            Alert(
+                "Your message - make it short & clear",
+                description: "Description - make it as clear as possible.",
+                icon: .informationCircle,
+                buttons: Self.primaryAndSecondaryConfiguration
+            )
+            Alert(
+                "Your message - make it short & clear",
+                description: "Description - make it as clear as possible.",
+                buttons: Self.primaryAndSecondaryConfiguration,
+                status: .warning
+            )
+            Alert(
+                "Your message - make it short & clear",
+                icon: .informationCircle,
+                buttons: Self.primaryAndSecondaryConfiguration,
+                status: .critical
+            )
+            Alert(
+                "Your message - make it short & clear",
+                buttons: Self.primaryAndSecondaryConfiguration,
+                status: .success
+            )
+            Alert(
+                "Your message - make it short & clear",
+                description: "Description - make it as clear as possible.",
+                icon: .informationCircle,
+                buttons: Self.primaryConfiguration
+            )
+            Alert(
+                "Your message - make it short & clear",
+                description: "Description - make it as clear as possible.",
+                buttons: Self.primaryConfiguration
+            )
+            Alert(
+                "Your message - make it short & clear",
+                icon: .informationCircle,
+                buttons: Self.primaryConfiguration
+            )
+            Alert(
+                "Your message - make it short & clear",
+                buttons: Self.primaryConfiguration
+            )
+        }
+        .padding()
+        .previewDisplayName("Layout")
+    }
+
+    static var snapshotsNoButtons: some View {
+        VStack(spacing: .medium) {
+            Alert(
+                "Your message - make it short & clear",
+                description: "Description - make it as clear as possible.",
+                icon: .informationCircle
+            )
+
+            Alert("Title", description: "Description")
+            Alert("Title") {
+                customContentPlaceholder
             }
-            .padding(.vertical)
-            .previewDisplayName("No buttons")
+            Alert("Title", icon: .informationCircle)
+            Alert("Title")
         }
-        .padding(.horizontal)
-        .previewLayout(.sizeThatFits)
+        .padding()
+        .previewDisplayName("No buttons")
     }
 
     static var snapshotsStatuses: some View {