Toolbar buttons in HStack merge with menu when .buttonStyle(…) is set

Question

vladimirs OP

Created Oct ’24

Replies 2

Boosts 0

Participants 2

I do not understand what is happening here.

In this example, the toolbar has three Button and one Menu inside an HStack, where the every button has a .buttonStyle(_:) set.

ToolbarItem(placement: .bottomBar) {
    HStack {
        Button {} label: { Label("Foo", systemImage: "square") }
            .buttonStyle(.bordered)

        Button {} label: { Label("Bar", systemImage: "circle") }
            .buttonStyle(.borderless)

        Menu {
            Button {} label: { Label("One", systemImage: "figure.arms.open") }
            Button {} label: { Label("Two", systemImage: "figure.2.arms.open") }
        } label: { Label("Baz", systemImage: "star") }

        Button {} label: { Label("Quux", systemImage: "triangle") }
            .buttonStyle(.borderedProminent)
    }
}

Please note: the menu has a star icon.

This causes only the menu button to appear, but with the first button's icon: bottom toolbar menu borderless.png

If a single button have has its styles removed, the toolbar appears as expected (in this example all button styles are removed):

bottom toolbar menu nonborderless.png

This example uses the bottom bar, but also happens when using placement: .navigation, placement: .topBarLeading, placement: .topBarTrailing.

Boost

Answer 1

vladimirs OP

Oct ’24

Filed bug report: FB15369138

0

Answer 2

Claude31 OP

Oct ’24

Reproduced the problem. All buttons are put behind the first in the HStack.

Removing buttonStyle on the last button (whatever style)

.buttonStyle(.borderedProminent)

solves the problem.

Or removing the menu also solves.

Removing the Stack does NOT solve. So, HStack is not the problem.

Bizarre.

This fails as well. No Menu, one button without style

                    ToolbarItem(placement: .bottomBar) {
                        HStack {
                            Button {} label: { Label("Foo", systemImage: "square") }
                                .buttonStyle(.bordered)
                            
                            Button {} label: { Label("Bar", systemImage: "circle") }
//                                .buttonStyle(.borderless)
                            
//                            Menu {
//                                Button {} label: { Label("One", systemImage: "figure.arms.open") }
//                                Button {} label: { Label("Two", systemImage: "figure.2.arms.open") }
//                            } label: { Label("Baz", systemImage: "star") }
                            
                            Button {} label: { Label("Quux", systemImage: "triangle") }
                                 .buttonStyle(.borderedProminent) // Causes buttons to stack on one another
                        }

Restoring the style for the circle makes it work.

So issue seems to be when one item has no style (which is the case of Menu)

But if we remove style of a second item, it works.

=> Problem when 2 items in the toolbar have style and some other has not…

0