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 loses divider lines when consumer includes Tailwind #9058

Closed
2 of 6 tasks
nwhittaker opened this issue Apr 3, 2024 · 3 comments
Closed
2 of 6 tasks

List loses divider lines when consumer includes Tailwind #9058

nwhittaker opened this issue Apr 3, 2024 · 3 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. calcite-components Issues specific to the @esri/calcite-components package. estimate - 5 A few days of work, definitely requires updates to tests. p - medium Issue is non core or affecting less that 60% of people using the library
Milestone
2024-04-30 - Apr ...

Comments

@nwhittaker
Copy link
Contributor

Check existing issues

Actual Behavior

The divider lines between list-items in a list are lost when used in an app that also uses of Tailwind.

Screenshot 2024-04-03 at 6 09 25 PM

Expected Behavior

The divider lines are not impacted by whether the consumer uses Tailwind.

Screenshot 2024-04-03 at 6 09 35 PM

Reproduction Sample

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

Reproduction Steps

  1. Visit the repro and observe the deficit of visible divider lines.

Reproduction Version

2.7.1

Relevant Info

The root cause appears to stem from whether or not the --tw-shadow variable is defined.

calcite-list-item {
  --tw-shadow: revert-layer;
}

One workaround is to set the variable to revert-layer but this doesn't have great browser support yet. Another workaround is to set the list-item's box-shadow style manually.

Regression?

No response

Priority impact

p3 - want for upcoming milestone

Impact

Impact is an inconsistent experience for consumers and hard-coded workarounds that add maintenance risk.

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 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 Apr 3, 2024
@github-actions github-actions bot added ArcGIS Field Apps Issues logged by ArcGIS Field Apps team members. calcite-components Issues specific to the @esri/calcite-components package. p3 - want for upcoming milestone labels Apr 3, 2024
@geospatialem geospatialem added the blocked This issue is blocked by another issue. label Apr 15, 2024
@geospatialem
Copy link
Member

The design token effort may mitigate the above, will re-verify the component once tokens are shipped, anticipated in the April milestone.

@driskull driskull mentioned this issue Apr 22, 2024
Merged
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 2 - in development Issues that are actively being worked on. 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 0 - new New issues that need assignment. 2 - in development Issues that are actively being worked on. labels 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 in 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
@geospatialem geospatialem added this to the 2024-04-30 - Apr Release milestone Jul 23, 2024
@geospatialem geospatialem added p - medium Issue is non core or affecting less that 60% of people using the library estimate - 5 A few days of work, definitely requires updates to tests. and removed blocked This issue is blocked by another issue. needs triage Planning workflow - pending design/dev review. labels Jul 23, 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. 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. calcite-components Issues specific to the @esri/calcite-components package. estimate - 5 A few days of work, definitely requires updates to tests. p - medium Issue is non core or affecting less that 60% of people using the library
Projects
None yet
Milestone
2024-04-30 - Apr Release
Development

No branches or pull requests
4 participants
@nwhittaker @driskull @geospatialem @DitwanP