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], [List Item], [List Item Group]: add scales, update padding and spacing, update font sizes #7100

Closed
7 tasks done
Tracked by #6632
ashetland opened this issue Jun 2, 2023 · 22 comments
Closed
7 tasks done
Tracked by #6632

[List], [List Item], [List Item Group]: add scales, update padding and spacing, update font sizes #7100

ashetland opened this issue Jun 2, 2023 · 22 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Map Viewer Issues logged by ArcGIS Map Viewer team members. ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. breaking change Issues and pull requests with code changes that are not backwards compatible. c-list Issues that pertain to the calcite-list component Calcite (design) Issues logged by Calcite designers. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality p3 - want for upcoming milestone User set priority status of p3 - want for upcoming milestone 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-11-26 - 3.0....

Comments

@ashetland
Copy link

ashetland commented Jun 2, 2023 •
edited
Loading

Description

Add scales and related updates to List, List Item, and List Item Group. See this Figma file for full specs. Note that file also contains other related updates to List.

Acceptance Criteria

  • Add scales
  • Update padding and spacing
  • Update font sizes
  • Align bottom border to content area
  • Revised hit targets to meet AA minimum
  • Add default padding to content with CSS vars for overrides - 🚧 breaking change ❗
  • Use inner-shadow for selection-appearance="border" to maintain alignment

Relevant Info

These are updated designs since this issue was originally created. They prioritize reducing unnecessary whitespace around elements to conserve horizontal real estate, 24px AA minimum hit targets, and improving visual hierarchy when nesting.

Pair with #9173, #9174, and #9175

Full specs available in Figma file, before/after reference below:
Slice 1

Which Component

List
List Item
List Item Group

Example Use Case

No response

Priority impact

p3 - want for upcoming milestone

Esri team

Calcite (design)
@ashetland ashetland added enhancement Issues tied to a new feature or request. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Jun 2, 2023
@github-actions github-actions bot added p3 - want for upcoming milestone Professional Services - Midwest Delivery Center Issues logged by Professional Services - Midwest Delivery Center team members. Calcite (design) Issues logged by Calcite designers. labels Jun 2, 2023
@ashetland ashetland added ready for dev Issues ready for development implementation. and removed Professional Services - Midwest Delivery Center Issues logged by Professional Services - Midwest Delivery Center team members. labels Jun 2, 2023
@ashetland ashetland mentioned this issue Jun 2, 2023
Open
5 tasks
@ashetland ashetland added the figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists label Jun 2, 2023
This was referenced Jun 2, 2023
Closed
Open
Closed
@geospatialem geospatialem removed the needs triage Planning workflow - pending design/dev review. label Jul 26, 2023
@geospatialem geospatialem added this to the 2023 December Priorities milestone Jul 26, 2023
@geospatialem geospatialem mentioned this issue Sep 18, 2023
Closed
3 tasks
@ashetland ashetland changed the title list, list-item, list-item-group update indentation padding for better visual hierarchy list, list-item, list-item-group update indentation padding and element spacing for better visual hierarchy Sep 22, 2023
@ashetland ashetland mentioned this issue Sep 22, 2023
Closed
@brittneytewks brittneytewks added the p - medium Issue is non core or affecting less that 60% of people using the library label Oct 24, 2023
@brittneytewks brittneytewks added design Issues that need design consultation prior to development. and removed figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists labels Dec 11, 2023
@driskull
Copy link
Member

We may wan to reconsider how we indent child items as well. Currently, we only indent within the item but not the whole item.

image

The problem with this is that the selection is still far to the side and when dragging a child there isnt a good way to distinguish where its going because they are all indented the same. No matter how deep the child is, the element spans the whole width.

I think we did this originally so that the hover/active/focus spans the whole width of the list but I think we should reconsider.

image

@geospatialem geospatialem added p - high Issue should be addressed in the current milestone, impacts component or core functionality and removed p - medium Issue is non core or affecting less that 60% of people using the library labels Dec 12, 2023
@driskull driskull self-assigned this Dec 28, 2023
@driskull
Copy link
Member

@ashetland can the "indent entire item" be included in this as well? Do we have approval/consensus to do that?

@geospatialem geospatialem removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Jun 18, 2024
@geospatialem geospatialem added this to the 2024-11-19 - Nov Release milestone Jun 18, 2024
@geospatialem
Copy link
Member

@ashetland @geospatialem do we have a milestone for this issue?

@driskull Added the above, #9173 and #9174 to November's milestone for the breaking changes.

@ashetland ashetland mentioned this issue Jul 18, 2024
Open
14 tasks
@geospatialem geospatialem mentioned this issue Aug 15, 2024
Closed
10 tasks
@github-actions github-actions bot added the p3 - want for upcoming milestone User set priority status of p3 - want for upcoming milestone label Aug 28, 2024
@aPreciado88 aPreciado88 self-assigned this Nov 1, 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 Nov 1, 2024
@ashetland ashetland mentioned this issue Nov 13, 2024
Closed
5 tasks
@jcfranco jcfranco changed the title [List], [List Item], [List Item Group]: add scales, update padding and pacing, update font sizes [List], [List Item], [List Item Group]: add scales, update padding and spacing, update font sizes Nov 20, 2024
@eriklharper eriklharper mentioned this issue Nov 23, 2024
Merged
@jcfranco jcfranco mentioned this issue Nov 24, 2024
Closed
eriklharper added a commit that referenced this issue Nov 28, 2024
@eriklharper @jcfranco
feat(list, list-item, list-item-group, filter)!: add scales, update p…
9c3342c 
…adding and spacing, update font sizes (#10853)

**Related Issue:** #7100 

## Summary

This PR adds scales, updates padding and spacing and updates font sizes
based on the latest designs for `calcite-list-item`,
`calcite-list-item-group`, `calcite-list` and `calcite-filter`.

BREAKING CHANGE: The spacing changes affect content in the
`actions-start` slot in addition to other rendered elements. Some
styling updates may need to be applied to slotted actions or other
adjustments based on the new scales.

---------

Co-authored-by: JC Franco <[email protected]>
@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 Nov 28, 2024
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned eriklharper Nov 28, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@geospatialem geospatialem 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 Nov 28, 2024
@geospatialem
Copy link
Member

Verified in 3.0.0-next.40 with:

  • scale ("s", "m", "l")
  • selectionMode ("single", "multiple", "none", and "single-persist")
  • selectionAppearance ("border", "icon" )
  • displayMode of "nested", "flat")

@eriklharper eriklharper mentioned this issue Dec 3, 2024
Merged
eriklharper added a commit that referenced this issue Dec 4, 2024
@eriklharper
chore(list): fixing scale argument on list's simple story (#10966)
c94d085 
**Related Issue:** #7100

## Summary

This PR fixes the simple story for `list` to correctly set the `scale` property.
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 Map Viewer Issues logged by ArcGIS Map Viewer team members. ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. breaking change Issues and pull requests with code changes that are not backwards compatible. c-list Issues that pertain to the calcite-list component Calcite (design) Issues logged by Calcite designers. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality p3 - want for upcoming milestone User set priority status of p3 - want for upcoming milestone 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-11-26 - 3.0.0 Nov Breaking Chang...
Development

No branches or pull requests