How to make popup button in SwiftUI for macOS

Issue #748

There is said to be PopUpButtonPickerStyle and MenuPickerStyle but these don’t seem to work.

There’s Menu button it shows a dropdown style. We fake it by fading this and overlay with a button. allowsHitTesting does not work, but disabled seems to do the trick

Menu {
    Button("About", action: ActionService.onAbout)
    Button("Quit", action: ActionService.onQuit)
} label: {
    Text("")
}
.frame(width: 24)
.opacity(0.01)
.overlay(
    makeButton(action: {}, "gearshape.fill")
        .disabled(true)
        .foregroundColor(Color.secondaryLabel)
)

Follow pika

struct ColorMenu: View {
    var eyedropper: Eyedropper

    var body: some View {
        if #available(OSX 11.0, *) {
            Menu {
                ColorMenuItems(eyedropper: eyedropper)
            } label: {
                Image(systemName: "ellipsis.circle")
            }
            .menuStyle(BorderlessButtonMenuStyle(showsMenuIndicator: false))
        } else {
            MenuButton(label: IconImage(name: "ellipsis.circle"), content: {
                ColorMenuItems(eyedropper: eyedropper)
            })
                .menuButtonStyle(BorderlessButtonMenuButtonStyle())
        }
    }
}

struct ColorMenuItems: View {
    var eyedropper: Eyedropper
    let pasteboard = NSPasteboard.general

    var body: some View {
        VStack(alignment: .leading, spacing: 0.0) {
            Text(eyedropper.title)
            Divider()
        }
        Button(action: {
            pasteboard.clearContents()
            pasteboard.setString(eyedropper.color.toHex, forType: .string)
        }, label: { Text("Copy color hex") })
        Button(action: {
            pasteboard.clearContents()
            pasteboard.setString(eyedropper.color.toRGB, forType: .string)
        }, label: { Text("Copy RGB values") })
        Button(action: {
            pasteboard.clearContents()
            pasteboard.setString(eyedropper.color.toHSB, forType: .string)
        }, label: { Text("Copy HSB values") })
    }
}

Need to specify .fixedSize() for menu rows to hug content. Can also use opacity to reduce Menu button color

Menu
    .fixedSize()
    .opacity(0.8)

---

Updated at 2021-01-21 09:12:48