fix(core): ensure GridCardLink fills entire card #5017
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
(This is tangentially related to #1341.)
When viewing a collection in grid view, if the entries don’t have images (or perhaps a custom summary), the cards are currently usually larger than the summary text. This results in poor UX, because only the upper part of the card actually contains the link element. Clicking in the lower part of the card won’t open the entry.
This PR adds
height: 100%to theGridCardLinkcomponent, ensuring the link element always fills the full card height:In addition, I have added
outline-offset: -2pxto ensure that outline styling on keyboard focus remains visible. TheGridCardhasoverflow: hiddenand so the default focus outline for the link would otherwise fall entirely outside the card. (Previously it was only visible on the bottom of the link as a horizontal line.) I had a look and couldn’t see any standard focus-styling approach being used, but I’m happy to change this offset approach as preferred.Test plan
I have tested this change manually by running
yarn startand checking its impact on cards with and without images and it appears to behave as expected. (Screenshots above show the before and after of the link sizing.)A picture of a cute animal (not mandatory but encouraged)
A lynx to help us with these links.