Reconsider design of split check with label menu toggles

[lboehling]

Follow up design issue for: https://github.com/patternfly/patternfly/pull/6886

We've added a new split check menu toggle variant with a label to v6. The original variant is set up so that the text is the target for the checkbox, and the dropdown area is separate. The new, added variant is set up so that the text is the target for the dropdown caret, and the checkbox area is a separate action. Right now, they visually present the same which makes it confusing to distinguish between the interactions. I want to revisit the design and see if we can better communicate the differences between those interactions, possibly by adding a divider like our other split action toggles.

existing:

new:

[kaylachumley]

Adding a divider seems like the best option here to better match our other component! I made a few options in figma that we can review together @lboehling

[kaylachumley]

view here

[kaylachumley]

@lboehling ready for design check #2 - I speced out how it would look if the text is attached to the dropdown caret instead of the checkbox

[kaylachumley]

Hey @mcoker ! Lucia and I have been discussing making some design changes to the split check with label menu toggles across the board. I have a few questions related to this if you have a moment 🙂

You can see above in my last comment that I speced out the divider attached to the checkbox vs attached to the drop down toggle - It could be worthwhile to have both as an option/variant. Do you envision just the default menu toggle to get the option to have the border between the different actions or alternatively anywhere that has split button and split action should be consistent with the divider?

I will also be specing out the different hover/selected states for each side of the split toggle(assuming that hovering/clicking on the toggle text would just give the hover/select borders on that side of the toggle) WDYT?

[mcoker]

Hey @kaylachumley! Those look awesome - it's not super clear currently whether the text is associated with the checkbox or the caret. Apologies if I misunderstood the question, but I would probably expect any split button toggle to have a divider. This will really help with the spacing and clickable/target areas for the stuff in the toggles. The menu toggle as it is currently in v6 seems a little messy to me. Like this, for example - there is a lot of clickable space for the checkbox on the left, but not on the right

For the border changes per item in the split toggle, I'm not sure, but I can say it should be no sweat technically to make any sort of change there. FWIW here's what I mocked up in dev tools:

Hover per action:

Expanded per action:

And maybe something like this where all of the borders change on hover, but when something is expanded (or maybe focused, too?) that action gets the super mega border:

[kaylachumley]

closing this out since the design consideration/mock ups are done - making a new issue to start working on the bulk of the split button component changes then ill make a core issue to follow @lboehling