Skip to content

[SR] Bento variant addition and VQA #5992

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rgclayton merged 5 commits into from
May 29, 2026
Merged

[SR] Bento variant addition and VQA #5992

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
294b240
Adding scrim for text contrast. Adjusting video sizing.
May 21, 2026
0400375
Adding scrim as a variant. Adjusting video sizing. Addressing VQA fee…
May 27, 2026
9a4b95e
Add link text inside bento with new variant. Address tab focus issue.
May 28, 2026
0a9f8b4
Adding hover animation for bentos with links
May 28, 2026
2941a6b
PR feedback and last minute VQA request to update max-width center text.
May 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion libs/mep/ace1205/explore-card/explore-card.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@
margin-bottom: var(--s2a-spacing-2xl);
}

[class*='title-'] {
[class*='heading-'] {
margin-top: auto;
margin-bottom: var(--s2a-spacing-xs);
}
Expand Down
10 changes: 7 additions & 3 deletions libs/mep/ace1205/explore-card/explore-card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ function getForegroundContent(foregroundRow, contentDiv, blockName) {
}
}

function decorate(block, root) {
function decorate(block, root, el) {
const blockName = root.classList[0].toLowerCase();
const rows = block.querySelectorAll(':scope > div');
const firstRow = rows[0];
Expand Down Expand Up @@ -59,11 +59,15 @@ function decorate(block, root) {

if (!link) return;
const linkContainer = createTag('a', { class: `${blockName}-link-container`, href: link.href, 'data-tracking-label': heading?.textContent });
link.remove();
if (!el.classList.contains('show-link')) link.remove();
if (el.classList.contains('show-link')) {
link.classList.add('standalone-link', 'label');
link.setAttribute('tabindex', '-1');
}

@robert-bogos robert-bogos May 29, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit to make this less wordy

Suggested change
if (!el.classList.contains('show-link')) link.remove();
if (el.classList.contains('show-link')) {
link.classList.add('standalone-link', 'label');
link.setAttribute('tabindex', '-1');
}
if (el.classList.contains('show-link')) {
link.classList.add('standalone-link', 'label');
link.setAttribute('tabindex', '-1');
} else link.remove();

linkContainer.append(contentDiv);
firstRow.prepend(linkContainer);
}

export default function init(el) {
decorateViewportContent(el, decorate);
decorateViewportContent(el, (block, root) => decorate(block, root, el));
}
84 changes: 76 additions & 8 deletions libs/mep/ace1205/section-metadata/section-metadata.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,10 @@
grid-auto-rows: initial;
}

&.bento .dark .explore-card-content [class*='body-'] {
color: inherit;
}

&.bento .explore-card {
border-radius: var(--s2a-border-radius-md);
z-index: inherit;
Expand All @@ -81,32 +85,35 @@

& [class*='heading-'] {
z-index: 1;
margin-bottom: var(--s2a-spacing-2xs);
}

& [class*='body-'] {
margin-top: initial;
margin-bottom: 0;
opacity: 1;
z-index: 1;
color: var(--s2a-color-content-body-subtle);
}

[class*='heading-'],
[class*='body-'] {
padding-inline: var(--s2a-spacing-xl);
}

> :nth-child(1):not(img):not(video) {
margin-bottom: var(--s2a-spacing-xs);
}

.explore-card-foreground {
aspect-ratio: 1 / 1.2;
transition: filter 0.3s ease-in-out, transform 0.3s ease-out;

img,
video {
img {
object-fit: cover;
object-position: top;
}

video {
object-fit: contain;
object-position: top;
}
}

.content-aux {
Expand All @@ -116,6 +123,41 @@
order: -1;
width: 100%;
}

.standalone-link {
display: inline-block;
text-decoration: none;
color: var(--s2a-color-content-label);
margin-top: var(--s2a-spacing-md);

&::before {
content: '';
position: absolute;
inset: 0;
}
}
}

&.bento .scrim {
.explore-card-content {
&::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255 255 255 / 0%) 60.93%, rgba(255 255 255 / 59%) 90%);
z-index: 1;
}
}

&.dark {
.explore-card-content::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0 0 0 / 0%) 60.93%, rgba(0 0 0 / 59%) 90%);
z-index: 1;
}
}
}

&.bento .grid-full-width {
Expand All @@ -132,14 +174,35 @@
}
}

&.bento .explore-card-link-container:hover { color: inherit; }
&.bento .explore-card-link-container {
box-sizing: border-box;

&:focus-visible {
border: 2px solid var(--color-accent-focus-ring);
outline-offset: none;
border-radius: var(--s2a-border-radius-16);
box-sizing: border-box;
overflow: clip;
}

&:hover {
color: inherit;

&+ .explore-card-background,
& .explore-card-foreground {
filter: brightness(0.98);
transform: scale(1.015);
}
}
}

&.bento .explore-card-link-container::before,
&:has(.bento .explore-card-link-container:focus-visible) .explore-card-link-container::before {
content: none;
}

&.bento .explore-card-background {
transition: filter 0.3s ease-in-out, transform 0.3s ease-out;
img,
.video-container {
opacity: 1;
Expand Down Expand Up @@ -214,7 +277,7 @@
}

.content-aux {
aspect-ratio: 1 / 0.8;
aspect-ratio: 1 / 0.88;
}
}

Expand All @@ -223,6 +286,11 @@
.content-aux {
aspect-ratio: 4 / 1.65;
}

[class*='heading-'],
[class*='body-'] {
max-width: 450px;
}
}
}
}
Expand Down
Loading