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

Tile: slotted content can over-extend the boundary #9358

Closed
2 of 6 tasks
eriklharper opened this issue May 16, 2024 · 2 comments
Closed
2 of 6 tasks

Tile: slotted content can over-extend the boundary #9358

eriklharper opened this issue May 16, 2024 · 2 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. c-tile Issues that pertain to the calcite-tile and related components Calcite (design) Issues logged by Calcite designers. calcite-components Issues specific to the @esri/calcite-components package. estimate - 1 Very small fix or change (potentially a single line), doesn't require updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone visual changes Issues with visual changes that are added for consistency, but are not backwards compatible
Milestone
2024-05-28 - May ...

Comments

@eriklharper
Copy link
Contributor

eriklharper commented May 16, 2024 •
edited

Check existing issues

Actual Behavior

calcite-tile with a slotted 500px square image over extends the visible boundary.

image

Expected Behavior

Image does not extend past the border of the tile.

Reproduction Sample

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

Reproduction Steps

  1. Open the sample
  2. Observe the image is larger than the tile's border box.

Reproduction Version

1.7.0

Relevant Info

Wasn't fully resolved in #4701.

Regression?

No

Priority impact

p3 - want for upcoming milestone

Impact

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)

It looks like slotted content, such as images don't appear to be adjusted, which might be expected. But it doesn't look like devs could adjust the tile or tile-group CSS to accommodate width.

@eriklharper Wondering if we need to explore more options, or open a new issue? For instance, with 2.9.0-next.9 and the following sample: https://codepen.io/geospatialem/pen/GRaJdwE:

image

Originally posted by @geospatialem in #4701 (comment)
@eriklharper eriklharper self-assigned this May 16, 2024
@github-actions github-actions bot added calcite-components Issues specific to the @esri/calcite-components package. Calcite (design) Issues logged by Calcite designers. labels May 16, 2024
@eriklharper eriklharper changed the title Slotted content can over-extend the Tile boundary Tile: slotted content can over-extend the boundary May 16, 2024
@eriklharper eriklharper added c-tile Issues that pertain to the calcite-tile and related components visual changes Issues with visual changes that are added for consistency, but are not backwards compatible 2 - in development Issues that are actively being worked on. estimate - 1 Very small fix or change (potentially a single line), doesn't require updates to tests. labels May 16, 2024
@eriklharper eriklharper mentioned this issue May 16, 2024
Merged
eriklharper added a commit that referenced this issue May 17, 2024
@eriklharper
fix(tile): slotted content renders within the border (#9359)
045ca2a 
**Related Issue:** #9358

## Summary

This PR fixes an issue where slotted image content would overflow beyond
the boundary of a `calcite-tile`. Slotted content is now set to take the
full width of the container, regardless of its size on its own. This
will keep visual overflow from happening, and allow developers to
control the sizing of tiles with simple CSS selectors targeting the
`calcite-tile` element.
@eriklharper eriklharper 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 17, 2024
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned eriklharper May 17, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@geospatialem geospatialem added impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone and removed p3 - want for upcoming milestone labels May 21, 2024
@DitwanP
Copy link
Contributor

DitwanP commented May 21, 2024

🍠 Verified on 2.9.0-next.18

@DitwanP DitwanP closed this as completed May 21, 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 21, 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. c-tile Issues that pertain to the calcite-tile and related components Calcite (design) Issues logged by Calcite designers. calcite-components Issues specific to the @esri/calcite-components package. estimate - 1 Very small fix or change (potentially a single line), doesn't require updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone visual changes Issues with visual changes that are added for consistency, but are not backwards compatible
Projects
None yet
Milestone
2024-05-28 - May Main Release
Development

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