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

Radio button labels should hug text content in radio button groups #6703

Closed
nwhittaker opened this issue Mar 29, 2023 · 4 comments
Closed

Radio button labels should hug text content in radio button groups #6703

nwhittaker opened this issue Mar 29, 2023 · 4 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Field Apps Issues logged by ArcGIS Field Apps team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. estimate - 2 Small fix or update, may require updates to tests. has workaround Issues have a workaround available in the meantime. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive p - medium Issue is non core or affecting less that 60% of people using the library
Milestone
2024-07-31 - Jul ...

Comments

@nwhittaker
Copy link
Contributor

nwhittaker commented Mar 29, 2023 •
edited
Loading

Actual Behavior

By default, the child elements of a <calcite-radio-button-group> are stretched to fill the full width of their parent. If the children are labels, this can mean a significant amount of white-space has a hidden behavior of selecting a radio button if the user happens to click in it.

Expected Behavior

Only clicking the label's text content should select its assoc. radio button. Alternatively, if it's more usable, all labels are the same width as the widest label.

Reproduction Sample

https://codepen.io/nwhittaker-esri/pen/oNPOVzL

Reproduction Steps

  1. Visit the sample and compare the observed vs. expected fieldsets.
  2. Click anywhere in the cyan area to select a radio button.

Reproduction Version

1.2.0

Relevant Info

No response

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

Styling the radio-group manually is an easy workaround, but not readily apparent since labels typically have transparent backgrounds.

Similar usability/ergonomic problems as described in #6702.

Esri team

ArcGIS Field Apps
@nwhittaker nwhittaker added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Mar 29, 2023
@github-actions github-actions bot added ArcGIS Field Apps Issues logged by ArcGIS Field Apps team members. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive labels Mar 29, 2023
@geospatialem geospatialem added has workaround Issues have a workaround available in the meantime. breaking change Issues and pull requests with code changes that are not backwards compatible. p - medium Issue is non core or affecting less that 60% of people using the library estimate - 2 Small fix or update, may require updates to tests. needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. and removed needs triage Planning workflow - pending design/dev review. labels Jun 1, 2023
@geospatialem geospatialem added future breaking change Issues and pull requests with deprecation(s), requires a breaking change in a future milestone. and removed breaking change Issues and pull requests with code changes that are not backwards compatible. labels Nov 22, 2023
@geospatialem
Copy link
Member

Due to the wide use of label, team members will work towards a deprecation in the coming months and plan out a breaking change with a future release. A milestone will be assigned in the coming weeks.

@geospatialem geospatialem added this to the 2024 July Priorities milestone Nov 22, 2023
@geospatialem geospatialem removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Nov 22, 2023
@aPreciado88 aPreciado88 self-assigned this Jul 16, 2024
@aPreciado88 aPreciado88 added 1 - assigned Issues that are assigned to a sprint and a team member. 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. 1 - assigned Issues that are assigned to a sprint and a team member. labels Jul 16, 2024
@aPreciado88 aPreciado88 mentioned this issue Jul 16, 2024
Merged
@jcfranco
Copy link
Member

The approach from #9793 doesn't require any changes to label and would no longer be a breaking change. 🎉 cc @macandcheese

@jcfranco jcfranco removed the future breaking change Issues and pull requests with deprecation(s), requires a breaking change in a future milestone. label Jul 16, 2024
aPreciado88 added a commit that referenced this issue Jul 16, 2024
@aPreciado88
fix(radio-button-group): remove blank clickable space outside of label (
818a33e 
#9793)

**Related Issue:**
[#6703](#6703)

## Summary
Updates `radio-button-group` to trigger clicks only when clicking on a
radio button or its label text.
@aPreciado88 aPreciado88 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 Jul 16, 2024
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned aPreciado88 Jul 16, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@DitwanP
Copy link
Contributor

DitwanP commented Jul 17, 2024

🍡 Verified on 2.11.0-next.14

Screenshot 2024-07-17 at 1 06 28 PM

@DitwanP DitwanP closed this as completed Jul 17, 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 Jul 17, 2024
calcite-admin pushed a commit that referenced this issue Jul 30, 2024
@aPreciado88 @github-actions
fix(radio-button-group): remove blank clickable space outside of label (
4cc24a0 
#9793)

**Related Issue:**
[#6703](#6703)

## Summary
Updates `radio-button-group` to trigger clicks only when clicking on a
radio button or its label text.
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. ArcGIS Field Apps Issues logged by ArcGIS Field Apps team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. estimate - 2 Small fix or update, may require updates to tests. has workaround Issues have a workaround available in the meantime. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive p - medium Issue is non core or affecting less that 60% of people using the library
Projects
None yet
Milestone
2024-07-31 - Jul Release
Development

No branches or pull requests
5 participants
@jcfranco @nwhittaker @geospatialem @DitwanP @aPreciado88