MWPW-157888 - Hero marquee w/ no-min-height and no l/r padding when using a full-width variant in masonry(repost) #2923
Conversation
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## stage #2923 +/- ##
==========================================
+ Coverage 96.23% 98.20% +1.96%
==========================================
Files 236 65 -171
Lines 54254 7901 -46353
==========================================
- Hits 52212 7759 -44453
+ Misses 2042 142 -1900 ☔ View full report in Codecov by Sentry. |
|
This pull request is not passing all required checks. Please see this discussion for information on how to get all checks passing. Inconsistent checks can be manually retried. If a test absolutely can not pass for a good reason, please add a comment with an explanation to the PR. |
| @@ -132,6 +133,21 @@ function parseKeyString(str) { | |||
| return result; | |||
| } | |||
|
|
|||
| function isElementEmpty(element) { | |||
There was a problem hiding this comment.
It's very likely I'm missing something, but couldn't we simply check for element.textContent.trim()? I'd assume that if there's some text anywhere, the element is not empty.
There was a problem hiding this comment.
@overmyheadandbody - Most of the time this row has a <picture> or <video> element and no textContent. This also uses per-viewport background cols that have similar conditions. That's why i've done the overly verbose conditions here, but lmk if you see a slimmer way to handle that.
There was a problem hiding this comment.
Since we know of these <picture> and <video> use-cases, couldn't we do something like
| function isElementEmpty(element) { | |
| return element.textContent.trim() && !element.querySelector('source, src'); |
Sorry if I'm a bit dense about this, this just seems more complicated than needed to me. If you have other reasons why this wouldn't work we can move forward with this.
…or -up .full-width
| @@ -132,6 +133,21 @@ function parseKeyString(str) { | |||
| return result; | |||
| } | |||
|
|
|||
| function isElementEmpty(element) { | |||
There was a problem hiding this comment.
Since we know of these <picture> and <video> use-cases, couldn't we do something like
| function isElementEmpty(element) { | |
| return element.textContent.trim() && !element.querySelector('source, src'); |
Sorry if I'm a bit dense about this, this just seems more complicated than needed to me. If you have other reasons why this wouldn't work we can move forward with this.
FYI: This a repost from reverted PR due to some issues seen w/ bg images not showing. Testing pages didn't have these examples initially so i've added em. Sorry for the bump. :)
As and author in a milo project using a [hero-marquee]
I want to use this block with out a minimal height so the block has a natural height based on content.
I want to use this block in a masonry grid w/ the variant
full-widthand not have the extra left/right padding seen in this scenario.Example screenshot - Notice the block height is huge, the l/r padding is causing the block to go outside its bounds.
Fixed
Add a no-min-height variant to the hero-marquee.
Address padding issue on hero-block. Erroneously comes from the has-bg class being added.
Resolves: MWPW-157888
Test URLs:
Before: https://main--milo--adobecom.hlx.page/drafts/steenmeyer/hero-editorial-layout-pattern-examples/hero-editorial-no-min-height-masonry1?martech=off
After: https://rparrish-hero-bg-fix-2--milo--adobecom.hlx.page/drafts/steenmeyer/hero-editorial-layout-pattern-examples/hero-editorial-no-min-height-masonry1?martech=off
Hero in a section grid (masonry & -up)
Before: https://main--milo--adobecom.hlx.page/drafts/rparrish/grids/hero-grids?martech=off
After: https://rparrish-hero-bg-fix-2--milo--adobecom.hlx.page/drafts/rparrish/grids/hero-grids?martech=off
Hero Marquee (regression)
These should all look the same
hero before: https://main--milo--adobecom.hlx.page/docs/library/blocks/hero-marquee?martech=off
hero after: https://rparrish-hero-bg-fix-2--milo--adobecom.hlx.page/docs/library/blocks/hero-marquee?martech=off
hero kitchen before: https://main--milo--adobecom.hlx.page/docs/library/kitchen-sink/hero-marquee?martech=off
hero kitchen after: https://rparrish-hero-bg-fix-2--milo--adobecom.hlx.page/docs/library/kitchen-sink/hero-marquee?martech=off