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

Nested List Items no longer correctly align #8667

Closed
2 of 6 tasks
ashetland opened this issue Jan 30, 2024 · 11 comments
Closed
2 of 6 tasks

Nested List Items no longer correctly align #8667

ashetland opened this issue Jan 30, 2024 · 11 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. c-list Issues that pertain to the calcite-list component Calcite (design) Issues logged by Calcite designers. calcite-components Issues specific to the @esri/calcite-components package. design Issues that need design consultation prior to development. 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. visual changes Issues with visual changes that are added for consistency, but are not backwards compatible
Milestone
2024-04-30 - Apr ...

Comments

@ashetland
Copy link
Contributor

Check existing issues

Actual Behavior

When any items are nested in a List, space for the expand affordance is not accounted for in all items, breaking nested alignment.
CleanShot 2024-01-29 at 16 03 58@2x

Expected Behavior

When nested items are present in a List, the space for the expand affordance is accounted for in all items to maintain proper alignment.
CleanShot 2024-01-29 at 16 03 36@2x

Reproduction Sample

https://codepen.io/ashetland/pen/VwRyOQa?editors=1000

Reproduction Steps

Expand the second item and note the alignment of the children as well as the item at the top that has no children.

Reproduction Version

v2.3.0

Relevant Info

No response

Regression?

v2.1.0

Priority impact

p3 - want for upcoming milestone

Impact

No response

Calcite package

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

Esri team

Calcite (design)
@ashetland ashetland 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 Jan 30, 2024
@github-actions github-actions bot added Calcite (design) Issues logged by Calcite designers. calcite-components Issues specific to the @esri/calcite-components package. p3 - want for upcoming milestone labels Jan 30, 2024
driskull added a commit that referenced this issue Jan 30, 2024
@driskull
fix(list-item): Always display open toggle cell. #8667
ef27d6c
@driskull driskull mentioned this issue Jan 30, 2024
Closed
@driskull driskull self-assigned this Jan 30, 2024
@driskull driskull added 2 - in development Issues that are actively being worked on. estimate - 3 A day or two of work, likely requires updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone and removed 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone labels Jan 30, 2024
@ashetland ashetland added the visual changes Issues with visual changes that are added for consistency, but are not backwards compatible label Feb 2, 2024
@ashetland
Copy link
Contributor Author

ashetland commented Feb 2, 2024 •
edited
Loading

Correcting this bug will result in the visual change depicted below
Frame 304

@driskull driskull assigned ashetland and unassigned driskull Feb 15, 2024
@ashetland ashetland added the c-list Issues that pertain to the calcite-list component label Feb 15, 2024
@ashetland ashetland added design Issues that need design consultation prior to development. p - high Issue should be addressed in the current milestone, impacts component or core functionality labels Feb 29, 2024
@ashetland
Copy link
Contributor Author

This Figma file covers designs for this issue and multiple related design revisions for List. cc @driskull

@ashetland ashetland added the ready for dev Issues ready for development implementation. label Mar 8, 2024
@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. labels Mar 8, 2024
@github-actions github-actions bot removed this from the 2024-03-26 - Mar Release milestone Mar 8, 2024
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Mar 8, 2024

cc @geospatialem, @brittneytewks

@geospatialem geospatialem added this to the 2024-04-30 - Apr Release milestone Apr 3, 2024
@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. needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. 2 - in development Issues that are actively being worked on. labels Apr 3, 2024
@driskull
Copy link
Member

driskull commented Apr 5, 2024 •
edited
Loading

@ashetland @SkyeSeitz I have some concerns about the design summary...

The summary says that the "classic" mode should maintain existing padding and spacing. That would mean that each mode would have its own styles. Id rather ovoid that if necessary because its harder to maintain. I thought the purpose of these modes would just be how the chevron is rendered and takes up space?

Can we just revise the spacing/padding in all modes?

I think its fine to have the indent spacing change between the modes but spacing between actions, content should probably be consistent.

driskull added a commit that referenced this issue Apr 5, 2024
@driskull
feat(list): add mode to handle flat and nested lists and improve drag…
897d58c 
…ging. #8667 #8242
@driskull driskull mentioned this issue Apr 5, 2024
Closed
@driskull
Copy link
Member

driskull commented Apr 9, 2024

@asangma do you know why list uses a shadow to imitate a border? It seems like it was added way back when in this PR: 5a279fa#diff-eabf53fd207751173a994b841b67b64fe226fffdef099ebd21169883d20fa0f2R10

I'd like to use a real border instead if possible but wanted to check with you.

@asangma
Copy link
Contributor

asangma commented Apr 9, 2024

@driskull

do you know why list uses a shadow to imitate a border?

This was a throwback habit to a time before good box standards. We can use a real life authentic certified border.

@ashetland
Copy link
Contributor Author

@driskull I confirmed with @jcfranco that we'd like to wait on adding modes to List until later. I will open a new breaking change issue to address that.

To do for this issue should just be:

  • update indent value to 1.5rem/24px
  • update border implementation from a shadow to a border (color.border.3)

@driskull
Copy link
Member

@ashetland thanks. I'll ping @jcfranco. Was hoping to be able to use the new "nested" mode in the Maps SDK widgets.

@driskull driskull mentioned this issue Apr 22, 2024
Merged
@driskull
Copy link
Member

@ashetland ready for review.

driskull added a commit that referenced this issue Apr 25, 2024
@driskull
fix(list, list-item, list-item-group): improve drag experience by ind…
88aab49 
…enting items (#9169)

**Related Issue:** #8242 #8667 #9058

## Summary

- Properly indents each list-item nested within another list or
list-item
- Removes transparent bg from handle, not necessary
- Updates internal table cell classes to remove padding being set by
default browser styles.
- Changes borders to use proper css borders instead of a 1px margin and
shadow
- Sets bg color of foreground 1 on list-item.
- Stretch action and handles slotted within a list-item.
- Removes padding from empty lists
- Remove unnecessary utils from list
- Add and improve screenshot tests
@driskull driskull added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Apr 25, 2024
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned driskull Apr 25, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@DitwanP
Copy link
Contributor

DitwanP commented Apr 25, 2024

🍠 Verified on 2.8.0-next.10

@DitwanP DitwanP closed this as completed Apr 25, 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 Apr 25, 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. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. c-list Issues that pertain to the calcite-list component Calcite (design) Issues logged by Calcite designers. calcite-components Issues specific to the @esri/calcite-components package. design Issues that need design consultation prior to development. 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. visual changes Issues with visual changes that are added for consistency, but are not backwards compatible
Projects
None yet
Milestone
2024-04-30 - Apr Release
Development

No branches or pull requests
5 participants
@driskull @geospatialem @asangma @DitwanP @ashetland