Skip to content

MWPW-185469: [Milo] UX update: Carousel Navigation Controls #5272

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

Open
cmiqueo wants to merge 13 commits into
base: stage
Choose a base branch
from
Open

MWPW-185469: [Milo] UX update: Carousel Navigation Controls #5272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
e6209d1
Adds option to caas configurator to center the video play button
cmiqueo Oct 21, 2025
928c844
removes console log message
cmiqueo Oct 21, 2025
8bceb6b
removes console log message
cmiqueo Oct 21, 2025
cbf8b0e
updates tests
cmiqueo Oct 21, 2025
eb68ca8
updates tests - part II
cmiqueo Oct 21, 2025
579314a
updates tests - part III
cmiqueo Oct 21, 2025
2028c7a
Initial test commit
cmiqueo Dec 1, 2025
bfb2c11
updates carousel width
cmiqueo Dec 4, 2025
12d9094
MWPW-185469: Adds new CasS caousel controls options
cmiqueo Dec 17, 2025
b013de9
Merge branch 'MWPW-183491' into MWPW-185469
cmiqueo Dec 17, 2025
4fc86e2
Updates css
cmiqueo Dec 19, 2025
d4b67c0
Removes unused element
cmiqueo Dec 19, 2025
58c1ca4
fixes linting errors
cmiqueo Dec 22, 2025
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
11 changes: 11 additions & 0 deletions libs/blocks/caas-config/caas-config.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,3 +149,14 @@ dd.content .sort-options > .field {
transform: rotate(180deg);
display: inline-block;
}

/* Indent carousel options */
dd.content .carousel-options .field {
padding-left: 20px;
max-width: calc(var(--field-max-size) - 20px);
}

.caas-config .consonant-Wrapper--carousel {
width: 100%;
margin: 0;
}
23 changes: 16 additions & 7 deletions libs/blocks/caas-config/caas-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,8 +159,10 @@ const defaultOptions = {
'over-background': 'Over Background',
},
paginationAnimationStyle: {
paged: 'Paged',
incremental: 'Incremental',
pagedModern: 'Modern (Paged)',
incrementalModern: 'Modern (Incremental)',
paged: 'Classic (Paged)',
incremental: 'Classic (Incremental)',
},
paginationType: {
paginator: 'Paginator',
Expand Down Expand Up @@ -378,6 +380,17 @@ const UiPanel = () => {
</div>
`;

const carouselOptions = html`
<div class="carousel-options">
<${Select}
label="Carousel Controls Options"
prop="paginationAnimationStyle"
options=${defaultOptions.paginationAnimationStyle}
/>
<${Input} label="Light background (Modern only)" prop="useLightControls" type="checkbox" />
</div>
`;

return html`
<${Input} label="Show Total Count" prop="showTotalResults" type="checkbox" />
<${Input} label="Show Card Borders" prop="setCardBorders" type="checkbox" />
Expand All @@ -393,6 +406,7 @@ const UiPanel = () => {
${state.cardStyle === 'blade-card' && bladeCardOptions}
<${Select} options=${defaultOptions.cardTitleAccessibilityLevel} prop="cardTitleAccessibilityLevel" label="Card Accessibility Title Level" />
<${Select} label="Layout" prop="container" options=${defaultOptions.container} />
${state.container === 'carousel' && carouselOptions}
<${Select} label="Layout Type" prop="layoutType" options=${defaultOptions.layoutType} />
<${Select} label="Grid Gap (Gutter)" prop="gutter" options=${defaultOptions.gutter} />
<${Select} label="Theme" prop="theme" options=${defaultOptions.theme} />
Expand Down Expand Up @@ -684,11 +698,6 @@ const PaginationPanel = () => {
prop="paginationType"
options=${defaultOptions.paginationType}
/>
<${Select}
label="Carousel Animation Style"
prop="paginationAnimationStyle"
options=${defaultOptions.paginationAnimationStyle}
/>
<${Input} label="Use Theme 3" prop="paginationUseTheme3" type="checkbox" />
`;

Expand Down
4 changes: 4 additions & 0 deletions libs/blocks/caas/caas.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -571,3 +571,7 @@ color: #eee;
padding-top: 10px;
border-top: solid 2px #000;
}

.content-panel .consonant-Wrapper--carousel {
margin: 0;
}
9 changes: 7 additions & 2 deletions libs/blocks/caas/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -843,6 +843,12 @@ export const getConfig = async (originalState, strs = {}) => {

const langFirst = state.langFirst ? `&langFirst=${state.langFirst}` : '';

const navigationStyle = state.container === 'carousel'
&& state.paginationAnimationStyle.includes('Modern')
&& state.useLightControls
? `${state.paginationAnimationStyle}-light`
: state.paginationAnimationStyle;

const config = {
collection: {
mode: state.theme,
Expand Down Expand Up @@ -985,7 +991,7 @@ export const getConfig = async (originalState, strs = {}) => {
options: getSortOptions(state, strs),
},
pagination: {
animationStyle: state.paginationAnimationStyle,
animationStyle: navigationStyle,
enabled: state.paginationEnabled,
resultsQuantityShown: state.paginationQuantityShown,
loadMoreButton: {
Expand Down Expand Up @@ -1050,7 +1056,6 @@ export const getConfig = async (originalState, strs = {}) => {
linkTransformer: pageConfig.caasLinkTransformer || stageMapToCaasTransforms(pageConfig),
headers: caasRequestHeaders,
};

return config;
};

Expand Down
Loading