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] Improve spacing of content-top/content-bottom slots when used without title, description, icon #4701

Closed
macandcheese opened this issue Jun 9, 2022 · 6 comments
Closed

[Tile] Improve spacing of content-top/content-bottom slots when used without title, description, icon #4701

macandcheese opened this issue Jun 9, 2022 · 6 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 design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. p - medium Issue is non core or affecting less that 60% of people using the library 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-28 - May ...

Comments

@macandcheese
Copy link
Contributor

macandcheese commented Jun 9, 2022 •
edited by SkyeSeitz
Loading

Description

The tile component has extra leading / trailing padding when only the single slot is present, and a "double" padding between the slots when both are present.

Acceptance Criteria

We should ensure that when:

  1. a single slot is populated and no title, description, icon are present: padding is consistent around the slot, and:
  2. when both are populated - the spacing between the two slots is the same as from the edge of the slot to the component edge.

Relevant Info

Screen Shot 2022-06-09 at 9 35 32 AM

Related to adding an image slot in #3462

Figma specs outlined here:
https://www.figma.com/file/8CiAVHkXIMTsI9hTSbotEz/Tile-Redesign-%5BEpic-6662%5D?type=design&node-id=720%3A3314&mode=design&t=4YnIETvXGuXWnUJU-1
image

Which Component

Tile

Example Use Case

https://codepen.io/mac_and_cheese/pen/gOvBqxy?editors=100
@macandcheese macandcheese 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 9, 2022
@macandcheese macandcheese changed the title [Tile] Fix spacing of content-start/end slot when used without title, description, icon [Tile] Improve spacing of content-start/end slot when used without title, description, icon Jun 9, 2022
@macandcheese macandcheese added the c-tile Issues that pertain to the calcite-tile and related components label May 5, 2023
@geospatialem geospatialem added the design Issues that need design consultation prior to development. label May 5, 2023
@geospatialem geospatialem removed the needs triage Planning workflow - pending design/dev review. label May 5, 2023
@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 5, 2023
@geospatialem geospatialem mentioned this issue May 31, 2023
Closed
38 tasks
@geospatialem geospatialem assigned SkyeSeitz and unassigned ashetland May 31, 2023
@brittneytewks brittneytewks added the figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists label Sep 12, 2023
@SkyeSeitz
Copy link

Link to Figma specs: https://www.figma.com/file/8CiAVHkXIMTsI9hTSbotEz/Tile-Redesign-%5BEpic-6662%5D?type=design&node-id=720%3A2738&mode=dev

@SkyeSeitz SkyeSeitz removed their assignment Sep 25, 2023
@SkyeSeitz SkyeSeitz added the ready for dev Issues ready for development implementation. label Sep 25, 2023
@github-actions github-actions bot added 0 - new New issues that need assignment. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Sep 25, 2023
@eriklharper eriklharper added the 2 - in development Issues that are actively being worked on. label May 2, 2024
@jcfranco jcfranco added the visual changes Issues with visual changes that are added for consistency, but are not backwards compatible label May 2, 2024
eriklharper added a commit that referenced this issue May 3, 2024
@eriklharper
fix(tile): fix spacing between content-top and content-bottom slots (#…
0b9443d 
…9241)

**Related Issue:** #4701 

## Summary

This PR corrects the spacing between the `content-top` and
`content-bottom` slotted content in Tile, ensuring there is a
scale-specific gap between the two when both of them are present and
none of the other content elements are supplied.

<img width="1352" alt="image"
src="https://github.com/Esri/calcite-design-system/assets/821864/dcc1f4bf-585d-496a-b756-9f1a2c467a7b">

---------

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

github-actions bot commented May 3, 2024

Installed and assigned for verification.

@geospatialem
Copy link
Member

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

@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels May 14, 2024
@eriklharper eriklharper mentioned this issue May 16, 2024
Closed
6 tasks
@eriklharper eriklharper 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 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.

@DitwanP
Copy link
Contributor

DitwanP commented May 21, 2024

🥭 Verified on 2.9.0-next.18
Screenshot 2024-05-21 at 2 11 45 PM

@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 design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. p - medium Issue is non core or affecting less that 60% of people using the library 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-28 - May Main Release
Development

No branches or pull requests
9 participants
@jcfranco @eriklharper @alisonailea @macandcheese @geospatialem @SkyeSeitz @DitwanP @ashetland @brittneytewks