updating action-links styling for proper long text wrap #908
Conversation
| height: 0px; // So the height doesn't mess with the focus halo | ||
| float: left; |
There was a problem hiding this comment.
Can this be better achieved using flexbox? There was a similar issue with radio button labels that was solved that way: department-of-veterans-affairs/component-library#633
There was a problem hiding this comment.
@jamigibbs I am applying display:flex to <a> tag similar to example you provided. The reason I had to add float:left attribute in ::before is because I could not find any other way around removing underlining of an icon. Do you have any suggestions here?
There was a problem hiding this comment.
Thanks for explaining and for the screenshot! I can see what you mean now. Without making structural changes, I'm not sure this can be accomplished another way either (I'm not sure why text-decoration: none isn't working in this case).
|
I am guessing it just bumps up to |
That looks good! Thank you! |
|
@jamigibbs would you guys need to do any testing on your end, or should I just update the formation version on vet-website as well? |
|
@oleksii-morgun-va I have something else I need to get added to Formation that I should be able to merge today. I'm happy to take on the task of publishing the package and updating vets-website once I have that in. |
|
@oleksii-morgun-va FYI |
|
It looks like this change messed up the 526 action link: But it's because the link had some extra CSS a.vads-c-action-link--green {
display: block;
line-height: 1em;
} |
|
@Mottie Where is that style coming from? Are you saying that we need to re-open the original issue? |
|
It was styling that was already in the CSS (for almost a year)... there's already a PR to fix it. |
Description
Long text in an action link would wrap underneath an icon, particularly the case on mobile view where a screen width is narrow.
Related to the following issue department-of-veterans-affairs/vets-design-system-documentation#1590
Testing done
Only tested within vets-website. Not familiar with any other testing methods here. If someone from design team could please test on your end.
Screenshots
Before
After
Acceptance criteria
Definition of done