MWPW-137282 - Action item block layout options #1501

Sartxi · 2023-11-07T16:57:37Z

The spacing and width of action items nested within the scroller and section grid are not currently correct for the action-icons 3-5 up design examples. This is due to the way the grid template items are styled in both places. So we are adding functionality to make the action icons design layouts possible.

Added .center style on section grid in desktop that will justify grid content center
Added default width on the action item to match designs and provide a function that applies item width conditional logic
Added center content style in action scroller for 5 or less items (also considers the established action item width logic)
Added Action scroller hide mask attribute to handle edge case I noticed, where mask was obscuring content when justified center in the action scroller
Removed unneeded grid style overrides in icon-block.css

Resolves: MWPW-137282

Test URLs:

aem-code-sync · 2023-11-07T16:57:41Z

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

Re-run PSI checks
Re-sync branch

Commits

105f784 ✅ (latest)
e7fef57 ✅
19e5338 ✅
ce06030 ✅
7fcde9e ✅
5bfb001 ✅
ac15507 ✅

aem-code-sync · 2023-11-07T16:58:15Z

Page	Scores	Audits	Google
/drafts/sarchibeque/justify-action-item?martech=off

aem-code-sync · 2023-11-07T17:00:05Z

Page	Scores	Audits	Google
/drafts/sarchibeque/justify-action-item?martech=off

aem-code-sync · 2023-11-07T17:04:21Z

Page	Scores	Audits	Google
/drafts/sarchibeque/justify-action-item?martech=off

aem-code-sync · 2023-11-07T17:06:56Z

Page	Scores	Audits	Google
/drafts/sarchibeque/justify-action-item?martech=off

codecov · 2023-11-07T17:08:15Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.68%. Comparing base (7f196f5) to head (105f784).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1501      +/-   ##
==========================================
+ Coverage   96.65%   96.68%   +0.02%     
==========================================
  Files         165      165              
  Lines       43533    43522      -11     
==========================================
+ Hits        42077    42078       +1     
+ Misses       1456     1444      -12

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

aem-code-sync · 2023-11-07T18:35:22Z

Page	Scores	Audits	Google
/drafts/sarchibeque/justify-action-item?martech=off

aem-code-sync · 2023-11-08T18:18:10Z

Page	Scores	Audits	Google
/drafts/sarchibeque/justify-action-item?martech=off

Sartxi · 2023-11-08T18:28:33Z

@ryanmparrish here are my other testing files in case they are helpful, thanks for reviewing!

All action block variants:
https://sarchibeque-mwpw-137282-center-actions--milo--adobecom.hlx.page/drafts/sarchibeque/actions-support-slider

Icon blocks using the center variant in section:
https://sarchibeque-mwpw-137282-center-actions--milo--adobecom.hlx.page/drafts/sarchibeque/icons-centered-grid

github-actions · 2024-04-25T01:12:20Z

This PR is currently in the needs-verification state. Please assign a QA engineer to verify the changes.

ryanmparrish

Looks good and sounds like GWP is on board with this from the slack convo.

Here's a few more drafts to smoke test. Checks out

ryanmparrish · 2024-04-25T17:38:11Z

@Sartxi - One thing that I did notice, the tablet view doesn't use justify-items:center.
I see in the task that it states 'desktop' so it might be fine, but do we need to check w/ consonant or Figma on those? Generally when a section.center is used its a broad stroke across all viewports, so it might be worth a quick check.

* Update code owners for feds (#2194) Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com> * Harden preflight link checking (#2169) * Filter out empty `hrefs` before sending to spidy. * Harden link check to be more robust against Spidy API. * Update link check language. * Better onboarding support. * Adds fallbacks if `.milo/config` has not been added. * Fix for missing Word doc reference, under general tab. Resolves: [MWPW-146695](https://jira.corp.adobe.com/browse/MWPW-146695) Co-authored-by: Ryan Clayton <rclayton@adobe.com> * MWPW-146755: RTL merch icon padding (#2162) * RTL padding merch icon * dep update * MWPW-146001 parallelize literals call (#2187) * MWPW-146001 parallelize literals call * MWPW-146001 move promise to the function * MWPW-146001 fix commerce library * MWPW-146001 update literals endpoint * MWPW-146001 fixing commerce ut --------- Co-authored-by: Narcis Radu <github@narcisradu.ro> Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com> Co-authored-by: Ryan Clayton <rgclayton@gmail.com> Co-authored-by: Ryan Clayton <rclayton@adobe.com> Co-authored-by: Axel Cureno Basurto <axelcureno@gmail.com> Co-authored-by: Nicolas Peltier <1032754+npeltier@users.noreply.github.com>

* actions scroller center & section grid center * update scroller test to cover all code branches * update test mock to avoid nav test * put back sticky and center styles * [Release] Stage to Main (adobecom#2208) * Update code owners for feds (adobecom#2194) Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com> * Harden preflight link checking (adobecom#2169) * Filter out empty `hrefs` before sending to spidy. * Harden link check to be more robust against Spidy API. * Update link check language. * Better onboarding support. * Adds fallbacks if `.milo/config` has not been added. * Fix for missing Word doc reference, under general tab. Resolves: [MWPW-146695](https://jira.corp.adobe.com/browse/MWPW-146695) Co-authored-by: Ryan Clayton <rclayton@adobe.com> * MWPW-146755: RTL merch icon padding (adobecom#2162) * RTL padding merch icon * dep update * MWPW-146001 parallelize literals call (adobecom#2187) * MWPW-146001 parallelize literals call * MWPW-146001 move promise to the function * MWPW-146001 fix commerce library * MWPW-146001 update literals endpoint * MWPW-146001 fixing commerce ut --------- Co-authored-by: Narcis Radu <github@narcisradu.ro> Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com> Co-authored-by: Ryan Clayton <rgclayton@gmail.com> Co-authored-by: Ryan Clayton <rclayton@adobe.com> Co-authored-by: Axel Cureno Basurto <axelcureno@gmail.com> Co-authored-by: Nicolas Peltier <1032754+npeltier@users.noreply.github.com> --------- Co-authored-by: Ruchika Sinha <69535463+Ruchika4@users.noreply.github.com> Co-authored-by: Narcis Radu <github@narcisradu.ro> Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com> Co-authored-by: Ryan Clayton <rgclayton@gmail.com> Co-authored-by: Ryan Clayton <rclayton@adobe.com> Co-authored-by: Axel Cureno Basurto <axelcureno@gmail.com> Co-authored-by: Nicolas Peltier <1032754+npeltier@users.noreply.github.com>

mokimo · 2024-04-30T10:24:04Z

This is leading to some issues https://main--homepage--adobecom.hlx.page/uk/homepage/index-loggedout?milolibs=stage

This reverts commit b7e8900.

vhargrave · 2024-04-30T10:37:44Z

yep, It definitely seems to be coming from this branch .
https://stage--homepage--adobecom.hlx.page/uk/homepage/index-loggedout?milolibs=sarchibeque-mwpw-137282-center-actions

Revert "MWPW-137282 - Action item block layout options (#1501)" This reverts commit b7e8900.

mokimo · 2024-04-30T11:04:31Z

@Sartxi you will need to re-raise this PR once the issue is fixed

Sartxi added 2 commits November 7, 2023 09:00

actions scroller center & section grid center

ac15507

update scroller test to cover all code branches

5bfb001

Sartxi added new-feature New block or other feature needs-verification PR requires E2E testing by a reviewer labels Nov 7, 2023

Sartxi requested review from ryanmparrish, rgclayton, aishwaryamathuria, elan-tbx and a team November 7, 2023 16:57

Sartxi changed the title ~~MWPW-137282 - Action item options for spacing within grid and scroller blocks~~ MWPW-137282 - Action item options for spacing Nov 7, 2023

update test mock to avoid nav test

7fcde9e

Merge branch 'main' into sarchibeque/MWPW-137282-center-actions

ce06030

put back sticky and center styles

19e5338

Sartxi changed the title ~~MWPW-137282 - Action item options for spacing~~ MWPW-137282 - Action item block layout options Nov 8, 2023

Sartxi marked this pull request as draft November 13, 2023 21:17

Blainegunn changed the base branch from main to stage November 16, 2023 17:32

Blainegunn changed the base branch from stage to main November 17, 2023 21:59

Sartxi closed this Nov 20, 2023

Sartxi deleted the sarchibeque/MWPW-137282-center-actions branch November 20, 2023 17:13

Sartxi restored the sarchibeque/MWPW-137282-center-actions branch April 16, 2024 22:31

aem-code-sync bot temporarily deployed to sarchibeque/MWPW-137282-center-actions April 16, 2024 22:31 Inactive

ryanmparrish approved these changes Apr 25, 2024

View reviewed changes

[Release] Stage to Main (#2203)

88a24e8

elan-tbx added verified PR has been E2E tested by a reviewer and removed needs-verification PR requires E2E testing by a reviewer labels Apr 26, 2024

Sartxi added the Ready for Stage label Apr 26, 2024

Ruchika4 and others added 2 commits April 29, 2024 17:04

Merge branch 'main' into sarchibeque/MWPW-137282-center-actions

105f784

Blainegunn changed the base branch from main to stage April 29, 2024 16:34

Blainegunn requested a review from a team as a code owner April 29, 2024 16:34

Blainegunn merged commit b7e8900 into stage Apr 29, 2024
12 checks passed

Blainegunn deleted the sarchibeque/MWPW-137282-center-actions branch April 29, 2024 16:34

Blainegunn mentioned this pull request Apr 29, 2024

[Release] Stage to Main #2228

Merged

vhargrave restored the sarchibeque/MWPW-137282-center-actions branch April 30, 2024 09:37

aem-code-sync bot temporarily deployed to sarchibeque/MWPW-137282-center-actions April 30, 2024 09:37 Inactive

vhargrave deleted the sarchibeque/MWPW-137282-center-actions branch April 30, 2024 09:41

mokimo added a commit that referenced this pull request Apr 30, 2024

Revert "MWPW-137282 - Action item block layout options (#1501)"

11217cb

This reverts commit b7e8900.

mokimo mentioned this pull request Apr 30, 2024

Revert "MWPW-137282 - Action item block layout options" #2232

Merged

mokimo restored the sarchibeque/MWPW-137282-center-actions branch April 30, 2024 10:33

aem-code-sync bot deployed to sarchibeque/MWPW-137282-center-actions April 30, 2024 10:33 View deployment

mokimo added a commit that referenced this pull request Apr 30, 2024

Revert "MWPW-137282 - Action item block layout options" (#2232)

d75511c

Revert "MWPW-137282 - Action item block layout options (#1501)" This reverts commit b7e8900.

Sartxi mentioned this pull request Apr 30, 2024

MWPW-137282 - [Action Items] Centered in the grid/scroller #2237

Merged

mokimo deleted the sarchibeque/MWPW-137282-center-actions branch August 15, 2024 13:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MWPW-137282 - Action item block layout options #1501

MWPW-137282 - Action item block layout options #1501

Sartxi commented Nov 7, 2023 •

edited

Loading

aem-code-sync bot commented Nov 7, 2023 •

edited

Loading

aem-code-sync bot commented Nov 7, 2023

aem-code-sync bot commented Nov 7, 2023

aem-code-sync bot commented Nov 7, 2023

aem-code-sync bot commented Nov 7, 2023

codecov bot commented Nov 7, 2023 •

edited

Loading

aem-code-sync bot commented Nov 7, 2023

aem-code-sync bot commented Nov 8, 2023

Sartxi commented Nov 8, 2023

github-actions bot commented Apr 25, 2024

ryanmparrish left a comment •

edited

Loading

ryanmparrish commented Apr 25, 2024

mokimo commented Apr 30, 2024

vhargrave commented Apr 30, 2024

mokimo commented Apr 30, 2024

MWPW-137282 - Action item block layout options #1501

MWPW-137282 - Action item block layout options #1501

Conversation

Sartxi commented Nov 7, 2023 • edited Loading

aem-code-sync bot commented Nov 7, 2023 • edited Loading

aem-code-sync bot commented Nov 7, 2023

aem-code-sync bot commented Nov 7, 2023

aem-code-sync bot commented Nov 7, 2023

aem-code-sync bot commented Nov 7, 2023

codecov bot commented Nov 7, 2023 • edited Loading

Codecov Report

aem-code-sync bot commented Nov 7, 2023

aem-code-sync bot commented Nov 8, 2023

Sartxi commented Nov 8, 2023

github-actions bot commented Apr 25, 2024

ryanmparrish left a comment • edited Loading

Choose a reason for hiding this comment

ryanmparrish commented Apr 25, 2024

mokimo commented Apr 30, 2024

vhargrave commented Apr 30, 2024

mokimo commented Apr 30, 2024

Sartxi commented Nov 7, 2023 •

edited

Loading

aem-code-sync bot commented Nov 7, 2023 •

edited

Loading

codecov bot commented Nov 7, 2023 •

edited

Loading

ryanmparrish left a comment •

edited

Loading