Commit split button divider causes loss of selection

[lramos15]

Some things I noticed today was that the commit split button divider is a lot stronger than the other split buttons in the product. I also noticed when I hovered over the split buttons divider that I would then not have either portions of the buttons selected and instead be selecting the parent container.

[lszomoru]

I also noticed when I hovered over the split buttons divider that I would then not have either portions of the buttons selected and instead be selecting the parent container.

I was wondering if you could share a recording to understand the seleciton feedback. Thank you!

[lramos15]

I also noticed when I hovered over the split buttons divider that I would then not have either portions of the buttons selected and instead be selecting the parent container.

I was wondering if you could share a recording to understand the seleciton feedback. Thank you!

I'm just clicking the selector. I notice it most when there's a small hiccup hovering from one section to the next as no section is hovered during this small section

[lszomoru]

Thank you @lramos15.

[lszomoru]

Today's Insiders (2022-08-11) contains changes that updates the split buttons in the Extensions list/editor. Do let me know if there are other split buttons in the product that are not consistent.

[lramos15]

The same thing still occurs here. I'm using the terminal creation and command center split buttons as reference. They don't have visible seperator lines, but still there isn't a point when I'm hovering over the button in which one side is not selectable

[lszomoru]

Adding @misolori and @daviddossett as I do not have context of those UX elements. The Commit dropdown button was modelled after the Split button from the Fluent Design System - https://developer.microsoft.com/en-us/fluentui#/controls/web/button

[lramos15]

Adding @misolori and @daviddossett as I do not have context of those UX elements. The Commit dropdown button was modelled after the Split button from the Fluent Design System - https://developer.microsoft.com/en-us/fluentui#/controls/web/button

Those have the same issue as well so maybe it's expected because it's Microsoft's design system, but not a huge fan. The close issue button below this for example has a separator but doesn't have a gap when switching sides. It's particularly noticeable on the Fluent button because it goes from the hand to click back to the normal cursor.

[daviddossett]

Which action does the separator click trigger in the GitHub example? The original idea was to intentionally not pick a side when clicking the separator just to avoid that decision. I suspect Fluent followed similar logic.

Open to changing this if you think there is a sensible side to pick. I'm kind of split (no pun intended) down the middle on which side makes more sense. On one hand, a separator kind of leans towards being associated with the secondary actions. On the other hand it's on the primary button view, so it should trigger that instead 🤷‍♂️

[lramos15]

Open to changing this if you think there is a sensible side to pick. I'm kind of split (no pun intended) down the middle on which side makes more sense. On one hand, a separator kind of leans towards being associated with the secondary actions.

Github triggers the secondary action. I think this is the safer one too because the secondary option is often a drop down of some sort so you won't accidentally trigger an action on the first click.

[daviddossett]

That sounds reasonable to me 👍

[lszomoru]

Sounds good to me. Will take a look at this in September.