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.

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

fix(tile-group): keep selection icon size consistent for large tiles #11215

Open
wants to merge 5 commits into
base: dev
Choose a base branch
from

Conversation

jcfranco
Copy link
Member

@jcfranco jcfranco commented Jan 7, 2025

Related Issue: #10931

Summary

Fixes an issue where large tiles (w/o description) would cause the selection icon to be oversized and misaligned.

Noteworthy changes

  • refactors stories to use HTML-generating functions to improve maintainability
  • adds internal CSS var to reuse and simplify internal space assignments
  • applies icon styling separately
  • applies relative positioning to content container

@github-actions github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Jan 7, 2025
@jcfranco jcfranco added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jan 7, 2025
</div>
`;
export const allVariantsHorizontal = createVariantsHtmlStory("horizontal");
export const allVariantsVertical = createVariantsHtmlStory("vertical");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh noes! @eriklharper Would a shorter description value help here? We could split the all-variants stories, but it sort of defeats the purpose. 🥲

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You'd have to just try shortening it I suppose and see it makes it small enough for Chromatic to capture, but yeah, possibly that could make a difference.

@eriklharper
Copy link
Contributor

I'm seeing a hover border regression where the right side of the middle hovered tile doesn't appear correctly. Could be a stacking issue:

image

@jcfranco jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 8, 2025
@jcfranco jcfranco requested a review from eriklharper January 8, 2025 08:32
@jcfranco
Copy link
Member Author

jcfranco commented Jan 8, 2025

@eriklharper Fixed the hover outline regression. Would you mind taking another look?

@jcfranco jcfranco requested a review from ashetland January 8, 2025 08:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Bug reports for broken functionality. Issues should include a reproduction of the bug. pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants