feat(Pagination): add Pagination component aligned with Cyber skin by AlexandraGallipoliRodrigues · Pull Request #1555 · Telefonica/mistica-web

AlexandraGallipoliRodrigues · 2026-06-01T07:12:45Z

Summary

Adds a new Pagination component to mistica-web, designed for the Cyber project but built against the standard skin contract so it works across all skins. Implements the Figma anatomy, types, behaviour, animation and "Compact View" specs.

Ticket: WEB-2441

What's included

Component

Pagination with controlled and uncontrolled modes (currentPage / defaultPage + onChange).
Previous / Next navigation controls that hide automatically on the first / last page. hideNavigationControls and hidePageList allow rendering only the page list or only the navigation arrows.
dynamicCount controls the size of the middle visible window; showEllipsis toggles truncation.
mode="iconOnly" renders the navigation buttons as chevrons only, even on desktop.
Compact View kicks in automatically when the viewport is narrower than 375px: navigation chevrons stack above/below the page list (per Figma).
disabled disables all interactive elements.
getPaginationItems() helper exported for unit tests / consumers that need the resolved item list.

Styling

Page items render the visible 32px circle (::before) inside a 32×48 (mobile) / 32×32 (desktop) interactive container. The Figma "Interaction Area" spec calls for 48×48 on mobile, but a literal 48px width breaks the layout on a 375px screen for the denser 1 … N N+1 N+2 … LAST configurations. The component instead satisfies WCAG 2.2 Target Size (Minimum) via the spacing exception: 32px buttons with a 4px gap leave 36px between centers, enough to inscribe non-overlapping 24px touch circles around every interactive element. A long-form comment in pagination.css.ts documents this trade-off.
Hover on regular page items uses neutralLow background at scale(1.06) (32 → ~34px). Pressed uses backgroundContainerPressed. Current page uses brandLow + textActivated text, scale 1.0. Duration 0.2s ease-in-out, matching the Figma "Animation" spec.
Previous / Next labels and chevrons use textLink. After the Cyber skin overhaul (master merge) textLink → palette.brand = #0066FF, so the labels render in the blue specified by the Figma without changes to the skin contract.
Chevrons use IconChevronLeftRegular / IconChevronRightRegular at size={20} to match the Figma weight and dimensions.
Page number labels use medium weight to match the Figma typography.
When hidePageList is set, the container gap becomes 16px to honour the "Previous and Next only" Figma layout.

Accessibility

<nav aria-label> landmark with a localised default ("Paginación" / "Pagination" / "Paginierung" / "Paginação").
aria-current="page" on the active page (rendered as a non-interactive span, not a button).
aria-hidden="true" on the … ellipsis.
All aria-labels are localised via four new tokens in src/text-tokens.tsx:
- paginationLabel
- paginationPrevPage
- paginationNextPage
- paginationGoToPage (with 1$s placeholder)
Consumers can still override via the aria-label, navLeftLabel, navRightLabel props or via the theme's texts overrides, following the same pattern as Carousel.
Touch targets pass WCAG 2.2 Target Size (Minimum) via the spacing exception (see Styling above).

Tooling

2 playroom snippets added to playroom/snippets.tsx (Pagination, Pagination iconOnly).
Cyber theme exposed in playroom/themes.tsx as Community_Cyber / Community_Cyber_iOS (light + iOS), so they group visually under the Community_ prefix in the flat theme selector.
Storybook story at src/__stories__/pagination-story.tsx.
9 unit tests in src/__tests__/pagination-test.tsx (nav landmark, single-page no-render, page click, Next click, disabled, controlled mode + 3 getPaginationItems edge cases).
Screenshot tests at src/__screenshot_tests__/pagination-screenshot-test.tsx covering 8 scenarios × 2 viewports (Default, FirstPage, LastPage, WithEllipsis, NavOnlyResponsive, PagesOnly, IconOnlyControls, NextChapterLink).

Screenshots / verification

Run yarn playroom, switch to the Cyber skin in the selector, and load the Pagination snippet. Verify:

Hover on a non-current page shows a subtle neutral grey background, not blue.

The current page has a light cyan background (brandLow) with dark-blue text.
Previous / Next labels are blue (not purple).

Chevrons match the Figma weight.
On mobile (< 768px), only chevrons are visible and each tap area is 48×48px.

Test plan

yarn jest src/__tests__/pagination-test.tsx passes (9 tests).
yarn tsc --noEmit clean.
Visual QA against Figma in playroom for each skin.
Switch locale to verify aria-labels translate (es / en / de / pt).

A11y tests

IOS:

IOS-a11y-test.MP4

Android:

Android-a11y-test.mp4

🤖 Generated with Claude Code

Adds a new Pagination component with desktop and mobile layouts, following the Mistica design specs. - Page navigation with Previous/Next controls (hidden at boundaries) - Configurable visible page window via `dynamicCount` - Optional ellipsis truncation for large page counts - Controlled and uncontrolled modes (`currentPage` / `defaultPage`) - iconOnly mode for compact layouts - Customisable navigation labels (i18n) - Hover state uses neutral `backgroundContainerHover` with 1.06 scale - Current page uses `brandLow` and `textActivated` - Filled chevrons match the Figma stroke weight - Numeric labels use medium weight for visual parity with Figma - Includes playroom snippets and unit tests Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

…EB-2441-create-pagination-component

- Use textBrand instead of textLink for Previous/Next so the Cyber skin (where textLink is purple/accent) renders the blue from secondary - Expose Cyber theme in playroom/themes.tsx so it can be selected - Enforce 48x48px touch target on mobile per Figma accessibility spec (the visible 32px circle stays centered inside the larger hit area) - Localise aria-labels via text-tokens (paginationLabel, paginationPrevPage, paginationNextPage, paginationGoToPage) following the Carousel pattern; navLeftLabel / navRightLabel / aria-label props still override the tokens - Update tests to assert the localised aria-labels (default locale es-ES) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

github-actions · 2026-06-01T07:15:30Z

Size stats

	master	this branch	diff
Total JS	16.2 MB	16.2 MB	+11.9 kB
JS without icons	2.07 MB	2.08 MB	+11.9 kB
Lib overhead	92.5 kB	92.5 kB	0 B
Lib overhead (gzip)	19.9 kB	19.9 kB	0 B

Copilot

Pull request overview

Adds a new Pagination component to mistica-web, aligned with the Cyber skin while remaining compatible with the standard skin contract, including localized accessibility labels, Playroom support, and unit tests.

Changes:

Added Pagination component (controlled/uncontrolled) plus getPaginationItems() helper.
Introduced new i18n text tokens for pagination aria-labels and actions.
Added Playroom themes/snippets and Jest tests covering core pagination behaviors.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
`src/text-tokens.tsx`	Adds pagination-related localized text tokens.
`src/pagination.tsx`	Implements the `Pagination` component and `getPaginationItems()` logic.
`src/pagination.css.ts`	Adds Vanilla Extract styles for pagination layout, states, and touch targets.
`src/index.tsx`	Exposes `Pagination` from the public entrypoint.
`src/__tests__/pagination-test.tsx`	Adds unit tests for rendering, interactions, disabled/controlled behavior, and helper edge cases.
`playroom/themes.tsx`	Exposes Cyber theme configs for Playroom preview.
`playroom/snippets.tsx`	Adds Playroom snippets for default and `iconOnly` pagination.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+    if (totalPages <= 1) {
+        return null;
+    }


brtbrt · 2026-06-11T18:11:58Z

+                    return (
+                        <li key={`ellipsis-${index}`} className={styles.pageListItem}>
+                            <span className={styles.ellipsis} aria-hidden="true">
+                                <PaginationLabel weight="medium">...</PaginationLabel>


@AlexandraGallipoliRodrigues actually it could be right

github-actions · 2026-06-01T07:21:29Z

Deploy preview for mistica-web ready!

Project:	`mistica-web`
Status:	✅ Deploy successful!
Preview URL:	https://mistica-qux1oxj9x-flows-projects-65bb050e.vercel.app
Latest Commit:	`cbc31aa`

Deployed with vercel-action

github-actions · 2026-06-01T07:22:07Z

Accessibility report
✔️ No issues found

ℹ️ You can run this locally by executing yarn audit-accessibility.

The lint rule testing-library/no-node-access flagged the use of `.closest()` to verify the current page. Switched to asserting that the current page is absent from the buttons accessible tree (it's rendered as a non-interactive span) while sibling pages are buttons. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Copilot

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

+            [mq.supportsHover]: {
+                selectors: {
+                    '&:hover': {
+                        color: skinVars.colors.textBrand,
+                    },
+                },
+            },
+        },


…ight-regular

…EB-2441-create-pagination-component

…ions

…EB-2441-create-pagination-component

Copilot

Pull request overview

Copilot reviewed 9 out of 26 changed files in this pull request and generated 5 comments.

+
+    const activePage = clamp(isControlled ? currentPage : internalPage, 1, totalPages);
+
+    const goToPage = (page: number) => {


…EB-2441-create-pagination-component

changed import Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot

Pull request overview

Copilot reviewed 10 out of 27 changed files in this pull request and generated 6 comments.

 export {default as HorizontalScroll} from './horizontal-scroll';
 export {default as Stepper} from './stepper';
 export {ProgressBar, ProgressBarStepped} from './progress-bar';
+export {default as Pagination} from './pagination';


+                    '&:hover:before': {
+                        opacity: 1,
+                        transform: 'translate(-50%, -50%) scale(1.06)',
+                        backgroundColor: skinVars.colors.neutralLow,
+                    },


+                    '&:active:before': {
+                        opacity: 1,
+                        transform: 'translate(-50%, -50%) scale(1)',
+                        backgroundColor: skinVars.colors.brandLow,
+                    },


Marcosld · 2026-06-05T11:20:26Z

+    return cases;
+};
+
+test.each(getCases())('Pagination %s - %s', async (_name, id, device) => {


Perhaps a table?

Marcosld · 2026-06-05T11:23:17Z

+// Compact view only renders below 375px viewport. We use MOBILE_IOS_SMALL (320px)
+// to drive the vertical layout and the current ± 1 page reduction.


I see a lot of comments that we probably don't need, right? We should probably update AGENTS.md so it doesn't generate that much comments

we could take advantage of a feedback loop by using a skill that "auto documents" (better said: it helps updating/creating) things that the AI does not the way we want. each time we say "no", the skill /create-doc (or something similar) can update the thing to fine-tune the thing for the next round.
I've tried it and it works quite well! it saved me time and it improved my agentic code experience. take look :)

https://github.com/Telefonica/webapp/blob/a8839f60de1ce350613289f459abb69222edb495/.agents/skills/create-doc/SKILL.md

p.d.
I've found it very effective the fact of giving a good and bad example. most of the time it does help the AI doing the thing you expect

Marcosld · 2026-06-05T11:24:09Z

I think we should have added controls instead of creating a lot of examples like the rest of the stories. Perhaps this is something we should add to AGENTS.md so it is the default behaviour

100% agreed. we can improve this by exploiting controls. that way it will be improving the DX!

Marcosld · 2026-06-05T11:29:10Z

There are very annoying layout shifts when ellipsis appear and when buttons disappear, I think we should address that @aweell @yceballost

I’ve updated the specs to fix it:
Navigation controls:

Previous control is disabled when user is in first page, next control is disabled when user reaches last page.

By default previous and nexts will be always visible unless are configured to be hidden.

You can check it here.

@AlexandraGallipoliRodrigues have you covered these cases with a unit (or acceptance) test? just checking!

Marcosld · 2026-06-05T11:47:35Z

+    const orderedPages = Array.from(pages).sort((a, b) => a - b);
+    const items: Array<PaginationItem> = [];
+
+    orderedPages.forEach((page, index) => {


Probably .map ?

Marcosld · 2026-06-05T11:58:50Z

+        onChange?.(nextPage);
+    };
+
+    const items = isCompact


We should render compact view depending on css only to avoid layout shifts. window size won't be available until js is executed in the browser

brtbrt · 2026-06-08T17:44:20Z

+
+// Compact view only renders below 375px viewport. We use MOBILE_IOS_SMALL (320px)
+// to drive the vertical layout and the current ± 1 page reduction.
+test('Pagination CompactView - MOBILE_IOS_SMALL', async () => {


are we sure we want this? by fiddling with the component, I see that even smaller viewports could take advantage of a single line, maybe.

http://localhost:9000/#?code=N4Igxg9gJgpiBcIA8AlGBnADhAduglgG4wAyAhgJ4QCuALgHwA6OABC0gApkDm%2BOZtfLha0ItMgBsu3DAF5gAJgDMAXxZhqAJ00wctaTHkBGNS1gAzMtQn6ehxWqgV%2BAW3xgAwjT0sA9ExwkXzQsXAJicio6ehAVIA

should we talk to design maybe?

@aweell @AnaMontes11 what do you think?
https://mistica-qux1oxj9x-flows-projects-65bb050e.vercel.app/playroom#?code=N4Igxg9gJgpiBcIA8AlGBnADhAduglgG4wAyAhgJ4QCuALgHwA6OABC0gApkDm%2BOZtfLha0ItMgBsu3DAF5gAJgDMAXxawAZmWoTa0mPIVqoFfgFt8YAMI0ctFgHomOJA7RZcBYuSp16IABoQWgALGDMMBABtEBszM2ocfFoKAH0rCgAjGAAnQNiIeMTktIzsnNT8AHkAZRAAXSCAd3woUPRogHYANgAOepUgA

aweell · 2026-06-09T07:05:59Z

+
+    dynamicCount?: number;
+
+    navLeftLabel?: string;


https://mistica-pl9771ukj-flows-projects-65bb050e.vercel.app/playroom#?code=N4Igxg9gJgpiBcIA8AFAhgcwJYDs0BcsIcAdHAAnLwDcAZGAM31rQCMYAbAXhJHxgDO%2BXmUo0ASlgwALZm048%2Bg4SFHl8EfGg7oMgrsACMABgC%2BagLbQYi2AzQBXDirVgHAJ3cwc%2BXTeB6%2BADKWvwAFLwADpi4BEQ4AJKQOH68ADTkAMwAlOYU5MQAwtJoOHoGYdF62eRcAHzkAjDBoTARIFWxhMRJxKkgGVUwuWQA9HVkZKgxeN2k%2BVawiljJAPI4HACeIvkaWjqY%2BkZmrh5ePn4GgSEEbVEzcX2H6Vkj%2BUUlZf6VhzX1jc0buF7thZvF%2BoNfnlxmQBnxpDALIIEABtECFCAWCwOHBYfCbAD6hU27HcIAAumkQAB3LBQfDSASogDsADYABzk0xAA

What i should do differently to display previous/next custom button labels?

The navLeftLabel/navRightLabel props are rendered on desktop viewports (≥1024px), or at least that's what I understand from the Figma, should i change it?

https://mistica-pl9771ukj-flows-projects-65bb050e.vercel.app/playroom#?code=N4Igxg9gJgpiBcIA8AFAhgcwJYDs0BcsIcAdHAAnLwDcAZGAM31rQCMYAbAXhJHxgDO%2BXmUo0ASlgwALZm048%2Bg4SFHl8EfGg7oMgrsACMABgC%2BagLbQYi2AzQBXDirVgHAJ3cwc%2BXTeB6%2BADKWvwAFLwADpi4BEQ4AJKQOH68ADTkAMwAlOYU5MQAwtJoOHoGYdF62eRcAHzkAjDBoTARIFWxhMRJxKkgGVUwuWQA9HVkZKgxeN2k%2BVawiljJAPI4HACeIvkaWjqY%2BkZmrh5ePn4GgSEEbVEzcX2H6Vkj%2BUUlZf6VhzX1jc0buF7thZvF%2BoNfnlxmQBnxpDALIIEABtECFCAWCwOHBYfCbAD6hU27HccIxWJxeMJxNJBKwqyCIAAumkQAB3LBQfDSASokwAJgALGlDABWQwC0UADkyAuZpiAA

aweell · 2026-06-09T12:54:59Z

    [O2_SKIN]: 'en-GB',
    [O2_NEW_SKIN]: 'en-GB',
    [ESIMFLAG_SKIN]: 'es-ES',
+    [CYBER_SKIN]: 'es-ES',


It looks that previewTools is not working with Cyber skin, is this expected?

https://mistica-pl9771ukj-flows-projects-65bb050e.vercel.app/playroom#?code=N4Igxg9gJgpiBcIA8AFATjAbgSxgdwBUIIAbAZwD4kB6dLXQ48igHQDtUBDAc2zc4Au2CGwAE7UaP6YAMjABmAmZwBGMEgF4WIATDIDtEqZ0wAlbNwAWS1eq069BkEYEQBnEih56NwAIwADAC%2BRgC20DD2sPKcAK4kTuJiomCxaBhsAl7ckcA5AgDK7roAFNoADjx8gsJsAJKQbNkw2gA0ogDMAJQhySIAwpacbDm%2BJZU5XaIaFKJkMIXFMGUgE9VCIg0izW2iEzA97NQUIK06ljCheggA2iD9EKGhsWzYAgCeAPr972poIABdM54bBQASWMi3DoANgCAKCQA

hmmm idk it does work for me...

Grabacion.de.pantalla.2026-06-09.a.las.16.05.01.mov

I think it is the PreviewTools component that is broken

@Marcosld correct, we figured it out yesterday in pair programming. the skin is missing/not supported yet. I'd open a ticket to address it in a different branch. it's a quick and easy fix :)

@AlexandraGallipoliRodrigues we can resolve this I guess!

…EB-2441-create-pagination-component

Copilot

Pull request overview

Copilot reviewed 10 out of 27 changed files in this pull request and generated 6 comments.

 export {default as HorizontalScroll} from './horizontal-scroll';
 export {default as Stepper} from './stepper';
 export {ProgressBar, ProgressBarStepped} from './progress-bar';
+export {default as Pagination} from './pagination';


+            '&:active:before': {
+                opacity: 1,
+                transform: 'translate(-50%, -50%) scale(1)',
+                backgroundColor: skinVars.colors.brandLow,
+            },


+                    '&:active:before': {
+                        opacity: 1,
+                        transform: 'translate(-50%, -50%) scale(1)',
+                        backgroundColor: skinVars.colors.brandLow,
+                    },


+                                type="button"
+                                className={styles.currentPage}
+                                aria-current="page"
+                                aria-disabled="true"


+            })}
+            {...getPrefixedDataAttributes(dataAttributes, 'Pagination')}
+        >
+            {!hideNavigationControls && (


+    paginationSection: string;
+    paginationPrevPage: string;
+    paginationNextPage: string;
+    paginationPrevPageAriaLabel: string;
+    paginationNextPageAriaLabel: string;
+    paginationGoToPage: string;
+    paginationCurrentPage: string;


Copilot

Pull request overview

Copilot reviewed 10 out of 27 changed files in this pull request and generated 4 comments.

+        String(clamp(isControlled ? currentPage : internalPage, 1, totalPages)),
+        String(totalPages)
+    );
+    const resolvedAriaLabel = ariaLabel ? `${sectionLabel}, ${ariaLabel}` : sectionLabel;


 export {default as HorizontalScroll} from './horizontal-scroll';
 export {default as Stepper} from './stepper';
 export {ProgressBar, ProgressBarStepped} from './progress-bar';
+export {default as Pagination} from './pagination';


+                                type="button"
+                                className={styles.currentPage}
+                                aria-current="page"
+                                aria-disabled="true"
+                                aria-label={currentPageLabel(item.page)}


+    const isPrevDisabled = activePage <= 1;
+    const isNextDisabled = activePage >= totalPages;
+
+    return (
+        <nav


yceballost · 2026-06-11T13:19:14Z

+    hidePageList?: boolean;
+    showEllipsis?: boolean;
+
+    dynamicCount?: number;


maybe maxPages ? trying to parity with StackingGroup component that one of it props is maxItems

+1, I was feeling "lost" with that semantic param description.

yceballost · 2026-06-11T13:21:26Z

+                if (item.current) {
+                    return (
+                        <li key={item.page} className={liClassName}>
+                            <button


why not use Touchable component? just asking!

@AlexandraGallipoliRodrigues maybe we could give claude a round telling to try to exploit the mística components that we have already. let's see if it improves it. after the round, you could ask "why a button in place of a touchable?" to force the reasoning

yceballost · 2026-06-11T13:24:35Z

+            {...getPrefixedDataAttributes(dataAttributes, 'Pagination')}
+        >
+            {!hideNavigationControls && (
+                <button


why not use <ButtonLink> for previous and next pages?

now, these buttons is not having hover effects and weirds horizontal spacings in active state

yceballost · 2026-06-11T13:28:20Z

looks broken in playroom 🤔
https://mistica-qux1oxj9x-flows-projects-65bb050e.vercel.app/playroom#?code=N4Igxg9gJgpiBcIA8AFAhgcwJYDs0BcsIcAdHAAnIFtoYBeEkWAMzQFcAbfR8vANwBKWDAAt8AGTQAjGBwYg0AZyhLGZSvgj40HdBhiK6wAIwAGAL7ryYNgCdbMHPj31g%2B-AGVt%2BGAApGAA6YuAREOC6MADTkAEwAlJYU5MQAwiJoOPpGvkH6ceR0AHzkijCe3n6BwXiExBEg0bkwCWQA9IVkIOZAA

@yceballost can you screenshot it? I see it working right

AnaMontes11 · 2026-06-11T14:05:15Z

The ellipsis element uses textSecondary as its token in the default context.
Which token should it use in the brand, negative, and alternative contexts?

brtbrt · 2026-06-11T17:46:27Z

+            options: ['default', 'iconOnly'],
+            control: {type: 'select'},
+        },
+        totalPages: {control: {type: 'number'}},


some parameters could be undefined. can we adapt storybook to showcase that? plus covering with tests!
plus: the counter allows negative numbers. do we want it?

brtbrt · 2026-06-11T17:49:31Z

@yceballost can you screenshot it? I see it working right

brtbrt · 2026-06-11T17:51:28Z

@AlexandraGallipoliRodrigues have you covered these cases with a unit (or acceptance) test? just checking!

brtbrt · 2026-06-11T17:58:00Z

+
+const DEVICES: ReadonlyArray<Device> = ['DESKTOP', 'MOBILE_IOS'];
+
+const TABLE = CASES.flatMap((c) => DEVICES.map((device) => ({...c, device})));


I find it "difficult" to read. I mean, I'd prefer readability over non-duplication here, if it applies. I usually prefer a declarative, yet longer, test.each that give me the whole picture in a glance of what I'm testing

brtbrt · 2026-06-11T18:02:15Z

I see that some props are not exposed on storybook right? I'd cover onChange because it's important, even though it's test covered!

brtbrt · 2026-06-11T18:09:44Z

+import {vars as skinVars} from './skins/skin-contract.css';
+import * as mq from './media-queries.css';
+
+const COMPACT_MQ = '(max-width: 374px)';


do we really want the canvas to determine the pagination compact mode? or the real available space where it's used in? just checking, pals! you tell me

brtbrt · 2026-06-11T18:11:12Z

+    hidePageList?: boolean;
+    showEllipsis?: boolean;
+
+    dynamicCount?: number;


+1, I was feeling "lost" with that semantic param description.

brtbrt · 2026-06-11T18:11:58Z

+                    return (
+                        <li key={`ellipsis-${index}`} className={styles.pageListItem}>
+                            <span className={styles.ellipsis} aria-hidden="true">
+                                <PaginationLabel weight="medium">...</PaginationLabel>


@AlexandraGallipoliRodrigues actually it could be right

brtbrt · 2026-06-11T18:13:08Z

+                if (item.current) {
+                    return (
+                        <li key={item.page} className={liClassName}>
+                            <button


@AlexandraGallipoliRodrigues maybe we could give claude a round telling to try to exploit the mística components that we have already. let's see if it improves it. after the round, you could ask "why a button in place of a touchable?" to force the reasoning

brtbrt · 2026-06-11T18:15:43Z

I see minor issues in the styling, that maybe they could be addressed later on.

example:

see the selection? the left padding is not the same of the right one! the same applies for the previous button. could you fiddle with it a little bit to see if we can improve it?

I reported the same here!
#1555 (comment)

AnaMontes11 · 2026-06-12T08:09:16Z

hi @AlexandraGallipoliRodrigues I've updated the compact view spec. Reviewing it, the horizontal row fits fine at 375px see example, so forcing the cross layout there was unnecessary. There's no automatic layout at 375px anymore: for space-constrained contexts we use hidePageList, which hides the Page List and leaves only the Previous and Next arrows aligned horizontally, avoiding scroll. I've added an example of the < 375px view with controls only to make it clear how it looks.
Link to specs

AlexandraGallipoliRodrigues and others added 3 commits May 26, 2026 10:02

Merge branch 'master' of github.com:Telefonica/mistica-web into alex/W…

6d5331f

…EB-2441-create-pagination-component

Copilot AI review requested due to automatic review settings June 1, 2026 07:12

Copilot started reviewing on behalf of AlexandraGallipoliRodrigues June 1, 2026 07:12 View session

AlexandraGallipoliRodrigues added the AI AI Generated label Jun 1, 2026

Copilot AI reviewed Jun 1, 2026

View reviewed changes

AlexandraGallipoliRodrigues and others added 2 commits June 1, 2026 09:44

minor change

d30e104

Copilot AI review requested due to automatic review settings June 1, 2026 09:13

Copilot started reviewing on behalf of AlexandraGallipoliRodrigues June 1, 2026 09:13 View session

Copilot AI reviewed Jun 1, 2026

View reviewed changes

Comment thread src/pagination.tsx Outdated

Comment thread src/pagination.css.ts

Comment on lines +226 to +233

[mq.supportsHover]: {

selectors: {

'&:hover': {

color: skinVars.colors.textBrand,

},

},

},

},

AlexandraGallipoliRodrigues added 6 commits June 2, 2026 12:34

modified hoover to be neutralLow and modified chevron to be chevron-r…

a9064f8

…ight-regular

Merge branch 'master' of github.com:Telefonica/mistica-web into alex/W…

ad0df1c

…EB-2441-create-pagination-component

changed text color with the updated cyber skins and modified translat…

c5c4061

…ions

added screenshot tests

8e9de99

Merge branch 'master' of github.com:Telefonica/mistica-web into alex/W…

f68dd1f

…EB-2441-create-pagination-component

renamed theme at playroom

588bf02

Copilot AI review requested due to automatic review settings June 2, 2026 14:46

Copilot started reviewing on behalf of AlexandraGallipoliRodrigues June 2, 2026 14:46 View session

minor changes

ba5d146

Copilot AI reviewed Jun 2, 2026

View reviewed changes

AlexandraGallipoliRodrigues added 4 commits June 2, 2026 17:33

added lang or testing a11y at playroom

7a4f114

a11y changes

857005b

Merge branch 'master' of github.com:Telefonica/mistica-web into alex/W…

b932a73

…EB-2441-create-pagination-component

style changes

c4026f3

Copilot AI review requested due to automatic review settings June 3, 2026 07:27

Copilot AI review requested due to automatic review settings June 3, 2026 08:17

Copilot started reviewing on behalf of AlexandraGallipoliRodrigues June 3, 2026 08:17 View session

Potential fix for pull request finding

fbb08ae

changed import Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot AI reviewed Jun 3, 2026

View reviewed changes

deleted pagination text token

b3f213c

Marcosld reviewed Jun 5, 2026

View reviewed changes

aweell requested review from AnaMontes11 and removed request for yceballost June 8, 2026 08:29

brtbrt self-requested a review June 8, 2026 16:34

brtbrt reviewed Jun 8, 2026

View reviewed changes

aweell reviewed Jun 9, 2026

View reviewed changes

PR changes: boundary disabled, controls story, table tests

337bb8b

Copilot AI review requested due to automatic review settings June 10, 2026 16:31

Copilot started reviewing on behalf of AlexandraGallipoliRodrigues June 10, 2026 16:32 View session

AlexandraGallipoliRodrigues added 2 commits June 10, 2026 18:32

PR changes: boundary disabled, controls story, table tests

7d7f4de

Merge branch 'master' of github.com:Telefonica/mistica-web into alex/W…

604be41

…EB-2441-create-pagination-component

Copilot AI reviewed Jun 10, 2026

View reviewed changes

fix lint

cbc31aa

Copilot AI review requested due to automatic review settings June 10, 2026 16:46

Copilot started reviewing on behalf of AlexandraGallipoliRodrigues June 10, 2026 16:46 View session

Copilot AI reviewed Jun 10, 2026

View reviewed changes

AlexandraGallipoliRodrigues requested review from Marcosld, aweell and brtbrt June 11, 2026 07:29

yceballost requested changes Jun 11, 2026

View reviewed changes

yceballost reviewed Jun 11, 2026

View reviewed changes

brtbrt reviewed Jun 11, 2026

View reviewed changes


		const activePage = clamp(isControlled ? currentPage : internalPage, 1, totalPages);

		const goToPage = (page: number) => {

		// Compact view only renders below 375px viewport. We use MOBILE_IOS_SMALL (320px)
		// to drive the vertical layout and the current ± 1 page reduction.


		const DEVICES: ReadonlyArray<Device> = ['DESKTOP', 'MOBILE_IOS'];

		const TABLE = CASES.flatMap((c) => DEVICES.map((device) => ({...c, device})));

Conversation

AlexandraGallipoliRodrigues commented Jun 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

What's included

Component

Styling

Accessibility

Tooling

Screenshots / verification

Test plan

A11y tests

Uh oh!

github-actions Bot commented Jun 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jun 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AlexandraGallipoliRodrigues Jun 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AlexandraGallipoliRodrigues commented Jun 1, 2026 •

edited

Loading

github-actions Bot commented Jun 1, 2026 •

edited

Loading

github-actions Bot commented Jun 1, 2026 •

edited

Loading

github-actions Bot commented Jun 1, 2026 •

edited

Loading

AlexandraGallipoliRodrigues Jun 10, 2026 •

edited

Loading

aweell Jun 9, 2026 •

edited by brtbrt

Loading