Hotfix: Headline / Blockquote Text Alignment Regression Fix #1794
Conversation
There was a problem hiding this comment.
@sghoweri the main regression is fixed 👍I just want to be sure that we're not causing any new ones.
- I left an inline comment about the space between position "before" icons and text.
- Headlines icon now display the icons slightly higher than before (because icon is
inline-flexnow).- Compare 2.19 to feature branch.
- Visually the new one looks fine to me. @mikemai2awesome, do you agree?
| @@ -119,10 +120,10 @@ | |||
|
|
|||
| {% include "@bolt/link.twig" with linkVars only %} | |||
| {%- else -%} | |||
| <span class="c-bolt-headline__text">{% spaceless %} | |||
| {% if iconAfter or quoted %}<span class="c-bolt-headline__text">{% endif %}{% spaceless %} | |||
There was a problem hiding this comment.
Not outputting this <span>^ seems to be causing the arrow icon in the Numbered Headline example to display too close to the text:
The missing space is just whitespace that no longer shows because it's in an inline-flex container. You could fix by always outputting a plain span, or by always outputting <span class="c-bolt-headline__text"> and adding a modifier when you want to make this span inline-block.
There was a problem hiding this comment.
Update: I now see that we cannot "always output a plain span". This actually causes the Blockquote quotes to disappear.
The issue seems to be that whitespace is going to be treated differently when it's block vs flex and always adding a span is not a solution. 🤔
There was a problem hiding this comment.
@danielamorse one idea that I had was to try removing the extra whitespace when the UI renders using inline-block + re-add manually for more consistent spacing. WIll take a look!
There was a problem hiding this comment.
Edit: the issue here might actually just physical whitespace not being removed from the inner text content.... HMMM
…on within the Headline component; update PL demo to include demoing icons at different Headline sizes
|
@danielamorse this should be ready for you to take another look 👍 |
There was a problem hiding this comment.
@sghoweri I retested cross-browser and the space around icons is nice and consistent 👌
The regressions are fixed, ship it!
|
Thanks @danielamorse! |
|
PR was released with v2.20.1 |
Jira
http://vjira2:8080/browse/BDS-2074
Summary
Addresses a regression in last week's
v2.20.0release in which the new Numbered Bullet feature added to Headline component inadvertently caused the component's text alignment to not work as expected in certain situations.Details
alignprop) continues to work as expected, there were unfortunate side-effects from the globally applieddisplay: flex;CSS update that caused text alignment to stop working in the Blockquote component + when theu-bolt-text-align-Xutility class was used.This PR works around that issue by only adding the
display: flex;styles + relatedc-bolt-headline__textinner text wrapper in the specific use case that required both of those updates in the first place -- when a Headline is displaying the new Numbered Bullet option.This PR also ensures that the
c-bolt-headline__textwrapper continues to be conditionally added when thequotedversion of Headline is used (which the original updates in v2.20.0 addressed)This PR also fixes a separate issue related to this regression with Blockquote quote styles not rendering as expected once the page's JavaScript kicks in
Finally, this PR cherry picks the one critical update from Hotfix: Fix for Composer Install Issues on Travis #1793 to ensure CI builds continue to work as expected.
How to test
Headline demos are visually similar in v2.20.0 compared to this PR
quotedoption is used show up as expectedBlockquote text alignment broken in v2.20.0 is now fixed
The broken Utility class alignment for "Add Mission" in v2.20.0 is now fixed