calcite-design-system
calcite-design-system copied to clipboard
Esri
Allow for Segmented Control to Display Icon Only
Description
Allow for the Segmented Control (and item?) display an icon only, without having to specify text.
In the image below, I'd like only the icons to be displayed:
Acceptance Criteria
maybe iconOnly as a property? or just display only the icon if that's the only thing specified.
Relevant Info
No response
Which Component
Segmented Control / Segmented Control Item
Example Use Case
No response
Esri team
N/A
+1 We need a simple 'multiple options' toggle and a segmented-control would have been a nice option as we wouldn't need to manage having only one option selected and reacting to just one selection event. Having multiple calcite-actions works, but its a lot of unnecessary work if the segmented-control had an iconOnly option.
Would be a nice add. We can probably do as we do with button, etc., and adjust padding when only an icon property is provided.
This use case also surfaced in a Community thread on 5/18, in which the use case is to display icons without text in the component.
Here is my use case. The icons would be sufficient and use much less horizontal space.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
To achieve this, we'll need to prevent using value as the displayed text when there is no slotted text, and update the padding for icon-start/end to center visually within the container. Probably a similar hasText internal state like Button has to determine a conditionally applied class, etc.
@macandcheese Added a text-disabled property to opt-into this behavior as using the value as a label is a feature and is also used in other components (e.g., calcite-option).
While working on this, I also found using icons instead of text for the label could be a potential workaround (see codepen).
Since it has icon-start/end, is the workaround workflow possibly confusing? I suppose text-disabled might also be confusing because there's no text prop like Action? Does the value prop play a role in displayed text? I believe the idea was to make value required, but if no text is in the default slot and an icon prop is used, we'd get the same end result.
Since it has icon-start/end, is the workaround workflow possibly confusing?
How do you mean?
I suppose text-disabled might also be confusing because there's no text prop like Action?
We already use textDisabled w/o a matching text prop in navigation-user.
I believe the idea was to make value required, but if no text is in the default slot and an icon prop is used, we'd get the same end result.
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.
