Wrong layout for small AppBarButtons in TextCommandBarFlyout

[tipa]

Describe the bug

The icons for the primary commands in a TextCommandBarFlyout aren't centered

Steps to reproduce the bug

<RichEditBox x:Name="textBox"/>

textBox.SelectionFlyout.Opening += Menu_Opening;
textBox.ContextFlyout.Opening += Menu_Opening;

void Menu_Opening(object sender, object e)
{
    var myFlyout = sender as TextCommandBarFlyout;
    foreach (var item in myFlyout.PrimaryCommands.OfType<AppBarToggleButton>()) { item.Label = null; }
}

Right-click test area

Expected behavior

Icon's are correctly aligned/centered

NuGet package version

WinUI 3 - Windows App SDK 1.8 Experimental 1: 1.8.250515001-experimental2

Windows version

Windows 11 (24H2): Build 26100

[tipa]

From what I can tell it's because VerticalAlignment of the IconAndLabelPanel Grid was changed to Center for AppBarButton, but not for AppBarToggleButton:

https://github.com/microsoft/microsoft-ui-xaml/commit/67aeb8f236eb85d2c541d5fc07e3df73aeb9b4d1#diff-3c0c71d84b9ce65cd15e61c585b987f27e66b03f5d7fd5a36279ba759ea313caL293

https://github.com/microsoft/microsoft-ui-xaml/commit/67aeb8f236eb85d2c541d5fc07e3df73aeb9b4d1#diff-3c0c71d84b9ce65cd15e61c585b987f27e66b03f5d7fd5a36279ba759ea313caL507

[hiteshkrmsft]

@tipa could you please provide a minimal repro for this. From the code you provided I couldn't repro it.

[hiteshkrmsft]

I believe you mean formatting command are vertically not aligned-

[tipa]

@hiteshkrmsft correct - the icons should be aligned vertically. You can see from my linked commits in my comment above that in the AppBarToggleButton style the IconAndLabelPanel is not aligned vertically: https://github.com/microsoft/microsoft-ui-xaml/blob/67aeb8f236eb85d2c541d5fc07e3df73aeb9b4d1/src/controls/dev/CommandBarFlyout/CommandBarFlyout_themeresources.xaml#L507

[tipa]

Additionally, the EllipsisButton now looks different (higher) compared to before in UWP. Note the top/padding margin/padding:

UWP:

WinUI3:

I believe this can be resolved by setting this VerticalAlignment to Center: https://github.com/microsoft/microsoft-ui-xaml/blob/67aeb8f236eb85d2c541d5fc07e3df73aeb9b4d1/src/controls/dev/CommandBarFlyout/CommandBarFlyout_themeresources.xaml#L574