How to add images to buttons inside `confirmationDialog`

Question

I'm building my first SwiftUI app and I've run into a blocker. When a user long-presses one of my cells, I want to show a confirmationdialog with custom buttons.

Here's the code:

.confirmationDialog("", isPresented: $showLongPressMenu) {
    Button {
        //
    } label: {
        HStack {
            Image(systemName: "checkmark.circle")
            Text("Add completion")
        }
    }
    Button {
        //
    } label: {
        HStack {
            Image(systemName: "note.text.badge.plus")
            Text("Add Note")
        }
    }
    Button("Cancel", role: .cancel) {}
}

This is sort-of working, here's the result:

But what I'm trying to achieve is something like this:

Any pointers would be amazing, thank you.

Answer 1

Here is an approach I'm working on:

struct ContentView: View {
    
    @State private var showConfirmationDialog = false
    @State private var showModifierDialog = false
    
    var body: some View {
        VStack {
            Button("Show Dialog") { showConfirmationDialog = true }
            Button("Show ViewMod Dialog") {
                withAnimation {
                    showModifierDialog = true
                }
            }
            .padding()
        }
        .padding()
        
        // standard confirmationDialog
        .confirmationDialog("Test", isPresented: $showConfirmationDialog) {
            Button { } label: {
                Label("Add completion", systemImage: "checkmark.circle")
            }
            Button { } label: {
                Label("Add Note", systemImage: "note.text.badge.plus")
            }
            Button("Cancel", role: .cancel) {}
        }
        
        // custom confirmationDialog with Icons, Cancel added automatically
        .customConfirmDialog(isPresented: $showModifierDialog) {
            Button {
                // action
                showModifierDialog = false
            } label: {
                Label("Add completion", systemImage: "checkmark.circle")
            }
            Divider() // unfortunately this is still necessary
            Button {
                // action
                showModifierDialog = false
            } label: {
                Label("Add Note", systemImage: "note.text.badge.plus")
            }
        }
    }
}


// *** Custom ConfirmDialog Modifier and View extension

extension View {
    func customConfirmDialog<A: View>(isPresented: Binding<Bool>, @ViewBuilder actions: @escaping () -> A) -> some View {
        return self.modifier(MyCustomModifier(isPresented: isPresented, actions: actions))
    }
}

struct MyCustomModifier<A>: ViewModifier where A: View {
    
    @Binding var isPresented: Bool
    @ViewBuilder let actions: () -> A
    
    func body(content: Content) -> some View {
        ZStack {
            content
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            
            ZStack(alignment: .bottom) {
                if isPresented {
                    Color.primary.opacity(0.2)
                        .ignoresSafeArea()
                        .onTapGesture {
                                isPresented = false
                        }
                        .transition(.opacity)
                }
                
                if isPresented {
                    VStack {
                        GroupBox {
                            actions()
                                .frame(maxWidth: .infinity, alignment: .leading)
                        }
                        
                        GroupBox {
                            Button("Cancel", role: .cancel) {
                                    isPresented = false
                            }
                            .bold()
                            .frame(maxWidth: .infinity, alignment: .center)
                        }
                    }
                    .font(.title3)
                    .padding(8)
                    .transition(.move(edge: .bottom))
                }
            }
        }
        .animation(.easeInOut, value: isPresented)
   }
}

Answer 2

Here's a quick pure SwiftUI custom Dialog I wrote using resultBuilder avoiding the Divider approach:

Package URL: https://github.com/NoeOnJupiter/ComplexDialog/

Usage:

struct ContentView: View {
    @State var isPresented = false
    @State var color = Color.green
    var body: some View {
        Button(action: {
            isPresented.toggle()
        }) {
            Text("This is a Test")
                .foregroundColor(.white)
        }.padding(20)
        .background(color)
        .clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
        .presentDialog(isPresented: $isPresented, bodyContent: {
            HStack {
                Image(systemName: "circle.fill")
                    .foregroundColor(.red)
                Text("Red Color")
                Spacer()
            }.dialogAction {
                color = .red
            }
            HStack {
                Image(systemName: "circle.fill")
                    .foregroundColor(.blue)
                Text("Blue Color")
                Spacer()
            }.dialogAction {
                color = .blue
            }
            HStack {
                Image(systemName: "circle.fill")
                    .foregroundColor(.green)
                Text("Green Color")
                Spacer()
            }.dialogAction {
                color = .green
            }
        }, cancelContent: {
            HStack {
                Spacer()
                Text("Cancel")
                    .font(.title3)
                    .fontWeight(.semibold)
                Spacer()
            }.dialogAction {
            }
        })
    }
}