From 584f6da0a0a7b9dc75e90f9ecd493a00f452cacf Mon Sep 17 00:00:00 2001
From: Raghu A <125877471+raga-adbe-gh@users.noreply.github.com>
Date: Fri, 10 May 2024 12:15:19 +0530
Subject: [PATCH] Revert "MWPW-137282 - [Action Items] Centered in the
grid/scroller" (#2286)
Revert "MWPW-137282 - [Action Items] Centered in the grid/scroller (#2237)"
This reverts commit a9a453c198e0d767ea162faca18ec017ad82b60e.
---
libs/blocks/action-item/action-item.css | 5 ---
.../action-scroller/action-scroller.css | 13 ++-----
.../blocks/action-scroller/action-scroller.js | 37 ++++++++++++-------
libs/blocks/icon-block/icon-block.css | 8 ++++
.../section-metadata/section-metadata.css | 22 ++++-------
.../action-scroller/action-scroller.test.js | 1 -
test/blocks/action-scroller/mocks/body.html | 37 +------------------
7 files changed, 45 insertions(+), 78 deletions(-)
diff --git a/libs/blocks/action-item/action-item.css b/libs/blocks/action-item/action-item.css
index b8c4b2fb7f..4ee91d0c78 100644
--- a/libs/blocks/action-item/action-item.css
+++ b/libs/blocks/action-item/action-item.css
@@ -1,6 +1,5 @@
.action-item {
display: flex;
- width: 160px;
}
.action-item img {
@@ -90,10 +89,6 @@
max-height: var(--spacing-xxxl);
}
-.action-item.float-icon {
- margin: 0 var(--spacing-xs);
-}
-
.action-item.float-icon .floated-icon img {
width: 24px;
min-height: 24px;
diff --git a/libs/blocks/action-scroller/action-scroller.css b/libs/blocks/action-scroller/action-scroller.css
index c346aa7c44..87d4b93359 100644
--- a/libs/blocks/action-scroller/action-scroller.css
+++ b/libs/blocks/action-scroller/action-scroller.css
@@ -12,18 +12,16 @@
.action-scroller .scroller {
display: grid;
- grid-template-columns: repeat(var(--action-scroller-columns), var(--action-scroller-item-width));
- grid-auto-columns: minmax(var(--action-scroller-column-width), var(--action-scroller-item-width));
+ grid-template-columns: repeat(var(--action-scroller-columns), 1fr);
+ grid-auto-columns: minmax(var(--action-scroller-column-width), 1fr);
grid-auto-flow: column;
- gap: var(--spacing-xs);
+ gap: var(--spacing-m);
padding: 0 var(--action-scroller-mobile-padding);
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none;
scroll-behavior: smooth;
-}
-.action-scroller .scroller[hide-mask='false'] {
--mask-width: 60px;
--mask-image-content: linear-gradient(to right,
transparent,
@@ -47,6 +45,7 @@
mask-repeat: no-repeat, no-repeat;
}
+
.action-scroller .scroller::-webkit-scrollbar {
display: none;
}
@@ -140,8 +139,4 @@
width: var(--grid-container-width);
margin: 0 auto;
}
-
- .action-scroller .justify-center {
- justify-content: center;
- }
}
diff --git a/libs/blocks/action-scroller/action-scroller.js b/libs/blocks/action-scroller/action-scroller.js
index 2ae2637d90..5ff1e69189 100644
--- a/libs/blocks/action-scroller/action-scroller.js
+++ b/libs/blocks/action-scroller/action-scroller.js
@@ -3,7 +3,10 @@ import { createTag, getConfig } from '../../utils/utils.js';
const { miloLibs, codeRoot } = getConfig();
const base = miloLibs || codeRoot;
-const defaultItemWidth = (cols) => (cols === 3 ? 160 : 147);
+const [NAV, ALIGN] = ['navigation', 'grid-align'];
+const defaultItemWidth = 106;
+const defaultGridGap = 32;
+
const PREVBUTTON = ``;
const NEXTBUTTON = ``;
@@ -21,36 +24,44 @@ const getBlockProps = (el) => [...el.childNodes].reduce((attr, row) => {
function setBlockProps(el, columns) {
const attrs = getBlockProps(el);
- const itemWidth = attrs['item width'] ?? defaultItemWidth(columns);
+ const itemWidth = attrs['item width'] ?? defaultItemWidth;
const overrides = attrs.style
? attrs.style
.split(', ')
.map((style) => style.replaceAll(' ', '-'))
.join(' ')
: '';
+ const gridAlign = [...el.classList].filter((cls) => cls.toLowerCase().includes(ALIGN))
+ ?? 'grid-align-start';
el.style.setProperty('--action-scroller-columns', columns);
el.style.setProperty('--action-scroller-item-width', itemWidth);
- return `scroller ${columns <= 5 ? 'justify-center' : ''} ${overrides}`;
+ return `scroller ${gridAlign} ${overrides}`;
}
function handleScroll(el, btn) {
- const itemWidth = el.parentElement?.style?.getPropertyValue('--action-scroller-item-width');
+ const itemWidth = el.parentElement?.style?.getPropertyValue('--action-scroller-item-width')
+ ?? defaultItemWidth;
const gapStyle = window
.getComputedStyle(el, null)
.getPropertyValue('column-gap');
- const scrollDistance = parseInt(itemWidth, 10) + parseInt(gapStyle.replace('px', ''), 10);
+ const gridGap = gapStyle
+ ? parseInt(gapStyle.replace('px', ''), 10)
+ : defaultGridGap;
+ const scrollDistance = parseInt(itemWidth, 10) + gridGap;
el.scrollLeft = btn[1].includes('next-button')
? el.scrollLeft + scrollDistance
: el.scrollLeft - scrollDistance;
}
-function handleBtnState(el, [prev, next]) {
- const { scrollLeft, scrollWidth, clientWidth } = el;
- const hidePrev = scrollLeft === 0;
- const hideNext = Math.ceil(scrollLeft) === Math.ceil(scrollWidth - clientWidth);
- prev.setAttribute('hide-btn', hidePrev);
- next.setAttribute('hide-btn', hideNext);
- el.setAttribute('hide-mask', hidePrev && hideNext);
+function handleBtnState(
+ { scrollLeft, scrollWidth, clientWidth },
+ [prev, next],
+) {
+ prev.setAttribute('hide-btn', scrollLeft === 0);
+ next.setAttribute(
+ 'hide-btn',
+ Math.ceil(scrollLeft) === Math.ceil(scrollWidth - clientWidth),
+ );
}
function handleNavigation(el) {
@@ -65,7 +76,7 @@ function handleNavigation(el) {
}
export default function init(el) {
- const hasNav = el.classList.contains('navigation');
+ const hasNav = el.classList.contains(NAV);
const actions = el.parentElement.querySelectorAll('.action-item');
const style = setBlockProps(el, actions.length);
const items = createTag('div', { class: style }, null);
diff --git a/libs/blocks/icon-block/icon-block.css b/libs/blocks/icon-block/icon-block.css
index 008239b343..22d9eae5ef 100644
--- a/libs/blocks/icon-block/icon-block.css
+++ b/libs/blocks/icon-block/icon-block.css
@@ -231,6 +231,10 @@
max-width: var(--icon-size-l);
}
+.section.five-up {
+ grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)) !important;
+}
+
.icon-block .foreground .text-content > * {
width: 100%;
}
@@ -483,4 +487,8 @@
.three-up .icon-block.bio .foreground {
max-width: 300px;
}
+
+ .section.five-up {
+ grid-template-columns: repeat(5, 1fr) !important;
+ }
}
diff --git a/libs/blocks/section-metadata/section-metadata.css b/libs/blocks/section-metadata/section-metadata.css
index 6fab96a0f9..6163bcbacd 100644
--- a/libs/blocks/section-metadata/section-metadata.css
+++ b/libs/blocks/section-metadata/section-metadata.css
@@ -169,7 +169,10 @@
gap: var(--spacing-xxxl);
}
-.section[class*='-up']:not(.masonry-up) {
+.section.two-up,
+.section.three-up,
+.section.four-up,
+.section.five-up {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
gap: var(--spacing-m);
@@ -179,7 +182,7 @@
}
.section.five-up {
- grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
+ grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
}
.section.sticky-top {
@@ -212,11 +215,6 @@
gap: var(--spacing-m);
}
-.section.sticky-bottom.promo-sticky-section {
- background: none;
- z-index: 4;
-}
-
.section[class*='grid-width-'] > .content,
main > .section[class*='-up'] > .content {
max-width: initial;
@@ -315,12 +313,6 @@ main > .section[class*='-up'] > .content {
grid-template-columns: repeat(5, 1fr);
}
- .section.center[class*='-up'] {
- grid-template-columns: auto;
- grid-auto-flow: column;
- justify-content: center;
- }
-
.section.grid-template-columns-1-2 {
grid-template-columns: 1fr 2fr;
}
@@ -336,12 +328,12 @@ main > .section[class*='-up'] > .content {
.section.grid-template-columns-3-1 {
grid-template-columns: 3fr 1fr;
}
-
+
.section.grid-width-6-desktop {
padding-left: var(--grid-margins-width-6);
padding-right: var(--grid-margins-width-6);
}
-
+
.section.grid-width-8-desktop {
padding-left: var(--grid-margins-width-8);
padding-right: var(--grid-margins-width-8);
diff --git a/test/blocks/action-scroller/action-scroller.test.js b/test/blocks/action-scroller/action-scroller.test.js
index d2b50448f3..ad98c36b8e 100644
--- a/test/blocks/action-scroller/action-scroller.test.js
+++ b/test/blocks/action-scroller/action-scroller.test.js
@@ -51,7 +51,6 @@ describe('action scrollers', () => {
const scrolled = scrollArea.scrollLeft > 0;
expect(scrolled).to.be.true;
});
-
it('can scroll previous', async () => {
const scrollArea = scroller.querySelector('.scroller');
const prevBtn = scroller.querySelector('.previous-button');
diff --git a/test/blocks/action-scroller/mocks/body.html b/test/blocks/action-scroller/mocks/body.html
index 3938cd1746..de2fd499a1 100644
--- a/test/blocks/action-scroller/mocks/body.html
+++ b/test/blocks/action-scroller/mocks/body.html
@@ -93,14 +93,14 @@
-
-
-
-
-
- ![]()
-
-
-
-
-
-
-
- ![]()
-
-
-
-
-
-
-
- ![]()
-
-
-
-
-