Try: Remove segmented control vertical separators

[jasmussen]

Description

Inspired by #35395 (comment), this PR removes the vertical separators from the Segmented Control entirely, as in most examples of its usage I have found them to only add noise.

Before:

After:

Especially in the linked font size example where font sizes are labelled in 2 letter same-width abbreviations, this works especially well.

However there's an argument to be made that in the Featured Image example shown here, where label widths aren't uniform but buttons are still uniform-width, the uneven space between items is a downside.

Let me know your thoughts.

How has this been tested?

Insert the Featured Image block, add a width, then observe the segmented control.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

[mtias]

Looking good to me

[ciampo]

I always like PRs that remove code! Also, as @mtias pointed out, we don't seem to have designs using separators.

My only worry is what @jasmussen also pointed out — that having fixed size buttons with different amounts of text will cause uneven spacing and confuse the user.

We should also be careful and ensure that the space between "toggle buttons" is always large enough to make it clear that it denotes a separation between buttons. Otherwise the user may be getting confused in case a button's label text has spaces.

---

I think that we may go ahead and apply these changes (especially given the fact that this component is still experimental). We can always add the separator back at a later point.

Should we consider giving each ToggleGroupControlOption a hover background color to make the separation clearer?

Finally, we should probably add a CHANGELOG entry for this change?

[jasmussen]

Thanks for the reviews. Looks like I have some snapshots to add.

I think that we may go ahead and apply these changes (especially given the fact that this component is still experimental). We can always add the separator back at a later point.

I like that, I always like to start simple and add as elements become necessary.

I think that we may go ahead and apply these changes (especially given the fact that this component is still experimental). We can always add the separator back at a later point.

In fact I think we should add an entry to the component readme that this is a bit of an "editorial responsibility". It's an opinionated opponent, and IMO should never be used if there's ever a chance for the labels, whether in English or another language, to wrap.

[jasmussen]

I updated the snapshots, and I added a small comment in the README about usage. I'd love input on whether I did that right, and I'll be sure to follow up.

Finally, we should probably add a CHANGELOG entry for this change?

Where would this update go?

[ciampo]

Where would this update go?

My bad, I thought I linked it already. It would be packages/components/CHANGELOG.md

[jasmussen]

Not at all, and thank you. It's a slow Monday for me — I looked for a changelog section in the README 🙈

I pushed a change, let me know if that looks good.

[ciampo]

It's a slow Monday for me

Haha, I wish my Mondays were "slow" like yours!

Anyway, I left a couple of comments. Would you also mind marking this PR as ready for review? That should potentially enable more CI tasks

[ciampo]

Not sure I've seen a Change section in the changelog before. Maybe we can call it Enhancements for now? 🤷

[ciampo]

We can probably be a bit more specific

Suggested change

	- Removed the separator shown between items. ([#35497](https://github.com/WordPress/gutenberg/pull/35497)).
	- Removed the separator shown between `ToggleGroupControl` items ([#35497](https://github.com/WordPress/gutenberg/pull/35497)).

[ciampo]

The Dropdown component is probably not what you meant here — did you mean SelectControl and/or CustomSelectControl?

In any case, if we mention a component's name, it's better to wrap it in backticks for better formatting.

Otherwise, the alternative here could be to be more generic and just mention "you can consider a select/dropdown component instead".

WDYT?

[jasmussen]

Nice, thank you. I pushed some small changes to address your feedback.

[jasmussen]

@ciampo if you have a second for a last sanity check, then I can land this one. Thanks again.

[ciampo]

LGTM 🚀