Use flexbox for share links with square icons #4316
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
AshGDS
force-pushed
the
share-links-tweaks
branch
from
564abd1
to
7a462bf
Compare
AshGDS
changed the title
AshGDS
force-pushed
the
share-links-tweaks
branch
from
7a462bf
to
7947f62
Compare
AshGDS
force-pushed
the
share-links-tweaks
branch
from
7947f62
to
015d5ab
Compare
JamesCGDS
reviewed
Oct 22, 2024
There was a problem hiding this comment.
Nice work, looks good! Got a couple of very minor comments. Also I tried a whole bunch of options trying to get this to work as per the designs (e.g. justify-content, playing with auto margins, playing with a grid layout) but I just couldn't get it to work nicely across all the different scenarios - I think this might be as close as we can get for the moment.
app/views/govuk_publishing_components/components/docs/share_links.yml
Outdated
Show resolved
Hide resolved
AshGDS
force-pushed
the
share-links-tweaks
branch
from
015d5ab
to
a2ab2be
Compare
AshGDS
force-pushed
the
share-links-tweaks
branch
from
a2ab2be
to
ac3462f
Compare
Merged
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.
What / Why
columns: truefor our square icons as it doesn't give us the visual balance we want where we're using it.min-widthfor this variant instead.min-widthis needed because alignment/stacking visual inconsistencies occur when the elements have varying widths. Therefore, if we ensure there is a minimum width for the elements, the alignment and flow when resizing is more visually pleasing. If you think of a component like our image cards, they stack and align nicely as they are all the same width, so we need some of that guarantee here, hence themin-width. It's also worth noting thatcolumns: truewas utilising amin-widthfor its balancing of links. I don't think we should be putting any max width type limitations though likecolumnsdoes. (Mainly mentioning this as in the previous PR I originally usedmin-width, which was what led to back and forth conversation and alternatives being suggested.)Visual Changes
Before
After