feat(segmented-control-item): allow displaying and icon when items are empty with a start/end icon

[jcfranco]

Related Issue:* #6413

Summary

This updates segmented-control-item to display a centered icon when specified and the item is empty.

Note: this removes using value as a fallback label as non-breaking for the following reasons:

• this behavior is intentional, but there is no explicit spec for it in the original issue, PR nor documentation
• it is inconsistent with how other components expect text to be provided
• it breaks if there's any whitespace
• the current behavior will lead to label that might not be user-friendly in most cases (e.g., casing, localization)

[alisonailea]

Love the simplification!

[macandcheese]

Could we put this on the individual items? Not sure the parent needs to have knowledge of this. There are occasionally times when you'd want to display the active Segmented Control Item's text and not the others.

I know we probably avoided it for breaking change reasons - but I wonder if in the future we can just use the presence of slotted text to determine this instead of having a property - we do this on button, chip, etc., to conditionally display padding when in "icon only state". It might also be nice to have a separate (and required) "label" property for value for AT reasons?

[jcfranco]

I think we can forego the prop in favor of slotted content based on some findings I shared in the issue:

OK, so I tracked down the behavior I called out in my earlier comment and it looks like using value as the fallback label is intentional, but there is no explicit spec for it in the original issue, PR nor documentation. It's sort of an outlier and also breaks if there's any whitespace. Also, value might not be the best option for a user-friendly label (e.g., casing, localization). For these reasons, I think it's safe to drop to simplify the behavior w/o it constituting a breaking change.