Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow for Segmented Control to Display Icon Only #6413

Closed
apfister opened this issue Feb 2, 2023 · 14 comments
Closed

Allow for Segmented Control to Display Icon Only #6413

apfister opened this issue Feb 2, 2023 · 14 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. estimate - 3 A day or two of work, likely requires updates to tests. p - high Issue should be addressed in the current milestone, impacts component or core functionality ready for dev Issues ready for development implementation.
Milestone
2024-05-28 - May ...

Comments

@apfister
Copy link

apfister commented Feb 2, 2023

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:
image

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
@apfister apfister added 0 - new New issues that need assignment. enhancement Issues tied to a new feature or request. needs triage Planning workflow - pending design/dev review. labels Feb 2, 2023
@ashetland
Copy link

This one is on my list as well. Thanks for filing this, @apfister.

@jgrayson-apl
Copy link

+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.

image

@macandcheese
Copy link
Contributor

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.

@macandcheese macandcheese added the design Issues that need design consultation prior to development. label Apr 6, 2023
@SkyeSeitz SkyeSeitz mentioned this issue Apr 6, 2023
Closed
4 tasks
@geospatialem
Copy link
Member

geospatialem commented May 19, 2023 •
edited
Loading

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.

Use case below.

@tsellste
Copy link

Here is my use case. The icons would be sufficient and use much less horizontal space.
image

@ashetland ashetland added the p - high Issue should be addressed in the current milestone, impacts component or core functionality label May 19, 2023
@geospatialem geospatialem added this to the Design Sprint Next milestone Jun 1, 2023
@geospatialem geospatialem removed the needs triage Planning workflow - pending design/dev review. label Jun 1, 2023
@ashetland ashetland added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Aug 7, 2023
@ashetland
Copy link

Figma file ready for this update.

@ashetland ashetland added the ready for dev Issues ready for development implementation. label Aug 18, 2023
@github-actions github-actions bot added 0 - new New issues that need assignment. needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Aug 18, 2023
@brittneytewks brittneytewks removed the figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists label Dec 12, 2023
@brittneytewks brittneytewks added the estimate - 3 A day or two of work, likely requires updates to tests. label Jan 29, 2024
@macandcheese
Copy link
Contributor

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.

@jcfranco jcfranco self-assigned this Apr 15, 2024
@jcfranco jcfranco added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Apr 15, 2024
@jcfranco jcfranco added 2 - in development Issues that are actively being worked on. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels May 8, 2024
@jcfranco jcfranco mentioned this issue May 9, 2024
Merged
@jcfranco
Copy link
Member

jcfranco commented May 9, 2024

@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).

@ashetland
Copy link

ashetland commented May 10, 2024 •
edited
Loading

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.

@jcfranco
Copy link
Member

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.

@jcfranco
Copy link
Member

Thanks for the catch, @ashetland! I'll make the appropriate adjustments.

jcfranco added a commit that referenced this issue May 13, 2024
@jcfranco
feat(segmented-control-item): allow displaying and icon when items ar…
9fc610d 
…e empty with a start/end icon (#9300)

*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](https://github.com/Esri/calcite-design-system/blob/main/packages/calcite-components/src/components/segmented-control-item/segmented-control-item.e2e.ts#L38-L46),
but there is no explicit spec for it in the [original
issue](#5),
[PR](#72) nor
[documentation](https://developers.arcgis.com/calcite-design-system/components/segmented-control/)
* it is inconsistent with how other components expect text to be
provided
* it [breaks if there's any
whitespace](https://codepen.io/jcfranco/pen/XWwWGEy?editors=1000)
* the current behavior will lead to label that might not be
user-friendly in most cases (e.g., casing, localization)
@jcfranco jcfranco added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels May 13, 2024
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned jcfranco May 13, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@DitwanP
Copy link
Contributor

DitwanP commented May 21, 2024

🍡 Verified locally on main

@DitwanP DitwanP closed this as completed May 21, 2024
@DitwanP DitwanP added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels May 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. estimate - 3 A day or two of work, likely requires updates to tests. p - high Issue should be addressed in the current milestone, impacts component or core functionality ready for dev Issues ready for development implementation.
Projects
None yet
Milestone
2024-05-28 - May Main Release
Development

No branches or pull requests