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

[List Item] Selection padding has too much space when the List's width is reduced #9290

Closed
2 of 6 tasks
geospatialem opened this issue May 9, 2024 · 4 comments
Closed
2 of 6 tasks

[List Item] Selection padding has too much space when the List's width is reduced #9290

geospatialem opened this issue May 9, 2024 · 4 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Web Analysis Issues logged by ArcGIS Web Analysis team members bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. design Issues that need design consultation prior to development. estimate - 2 Small fix or update, may require updates to tests. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality ready for dev Issues ready for development implementation. visual changes Issues with visual changes that are added for consistency, but are not backwards compatible.
Milestone
2024-05-14 - May ...

Comments

@geospatialem
Copy link
Member

Check existing issues

Actual Behavior

When updating from value-list to list in smaller width use cases for selections, additional padding is added, which effects the look of the component:

image

Before with value-list After with list

Expected Behavior

Replace the existing 12px padding to the right of the component's selectionAppearance of "icon" for selectionMode's of "multiple", "single" and "single-persist" to 4px with the --calcite-spacing-xxs token:

image

image

Reproduction Sample

https://codepen.io/geospatialem/pen/WNBNeNe

Reproduction Steps

  1. Open the sample
  2. Observe the padding on the left example: selection-mode="icon"
  3. Observe the padding in the other two examples
  4. This can also be observed on the documentation site samples
  5. Compare to this value-list sample

Reproduction Version

2.8.0

Relevant Info

Refer to the impact statement below.

Regression?

No response

Priority impact

p1 - need for current milestone

Impact

Came up when the Analysis team converted their pick-list to list, where when confined to a smaller width panel, the padding takes up a considerable amount of space. They are considering reverting back to pick-list if a fix cannot be mitigated, and would have to migrate over after the breaking change release when #7100 is implemented.

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-angular
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Web Analysis
@geospatialem geospatialem added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. design Issues that need design consultation prior to development. p - high Issue should be addressed in the current milestone, impacts component or core functionality 0 - new New issues that need assignment. estimate - 2 Small fix or update, may require updates to tests. ready for dev Issues ready for development implementation. labels May 9, 2024
@github-actions github-actions bot added impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone calcite-components Issues specific to the @esri/calcite-components package. needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. labels May 9, 2024
@github-actions github-actions bot added the ArcGIS Web Analysis Issues logged by ArcGIS Web Analysis team members label May 9, 2024
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented May 9, 2024

cc @geospatialem, @brittneytewks

@geospatialem geospatialem removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label May 9, 2024
@geospatialem geospatialem added the visual changes Issues with visual changes that are added for consistency, but are not backwards compatible. label May 9, 2024
@geospatialem
Copy link
Member Author

cc @amring1

@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels May 9, 2024
@jcfranco jcfranco mentioned this issue May 9, 2024
Merged
@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 9, 2024
jcfranco added a commit that referenced this issue May 10, 2024
@jcfranco @benelan
fix(list-item): decrease horizontal spacing between selection icon an…
0e828b6 
…d content (#9304)

**Related Issue:** #9290

## Summary

Decreases horizontal space in selection modes that affects users
migrating from pick/value-list.

Co-authored-by: Ben Elan <no-reply@benelan.dev>
@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 10, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned jcfranco May 10, 2024
@DitwanP
Copy link
Contributor

DitwanP commented May 13, 2024

🍡 Verified locally on hotfix
image

@DitwanP DitwanP closed this as completed May 13, 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 13, 2024
benelan added a commit that referenced this issue Aug 30, 2024
@jcfranco @benelan
fix(list-item): decrease horizontal spacing between selection icon an…
c615c12 
…d content (#9304)

**Related Issue:** #9290

## Summary

Decreases horizontal space in selection modes that affects users
migrating from pick/value-list.

Co-authored-by: Ben Elan <no-reply@benelan.dev>
@benelan benelan mentioned this issue Aug 30, 2024
Merged
benelan added a commit that referenced this issue Aug 30, 2024
@benelan @jcfranco
fix(list-item): decrease horizontal spacing between selection icon an…
dce57f4 
…d content (#9304) (#10199)

**Related Issue:** #9290

## Summary

Decreases horizontal space in selection modes that affects users
migrating from pick/value-list.

Co-authored-by: JC Franco <jfranco@esri.com>
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 Web Analysis Issues logged by ArcGIS Web Analysis team members bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. design Issues that need design consultation prior to development. estimate - 2 Small fix or update, may require updates to tests. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality ready for dev Issues ready for development implementation. visual changes Issues with visual changes that are added for consistency, but are not backwards compatible.
Projects
None yet
Milestone
2024-05-14 - May maintenance release
Development

No branches or pull requests
3 participants
@jcfranco @geospatialem @DitwanP