feat(view-pager): add PageIndicator - #1929
Open
bataevvlad wants to merge 2 commits into
Open
bataevvlad wants to merge 2 commits into
bataevvlad wants to merge 2 commits into
Conversation
ViewPager gave no cue of how many pages there are or which one is visible. PageIndicator renders one dot per page, the selected one wider and coloured by status, and can follow the swipe through `progress`. ViewPager now forwards a consumer onLayout instead of dropping it, which the progress computation needs. Closes #1355.
The unselected dots used background-basic-color-4, which sits at 1.2-1.6:1 against the page background in the Eva and Material light and dark themes, so the dots nearly vanished (dark themes worst). Use text-hint-color (2.8-5.0:1) and check all four combinations.
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
ViewPagergives no indication of how many pages there are or which one is visible; apps that move from tabs to a pager lose that cue (#1355).onOffsetChangereports raw pixels and the consumeronLayoutwas dropped, so even a hand-rolled indicator could not follow the swipe.Fix
PageIndicator(src/components/ui/viewPager/pageIndicator.component.tsx, exported from the ui barrel): one dot perpageCount, the selected dot wider and coloured bystatus(defaultprimary). Props:selectedIndex,progress(fractional page position; the dots grow / shrink between pages),onSelect(dot press),dotStyle,dotAccessibilityLabel,appearance. Dots arePressables withrole='button'andaria-selected; test ids@<testID>/dot-<i>.PageIndicatorblock (paddingHorizontal/paddingVertical8,dotWidth/dotHeight8,dotBorderRadius4,dotMarginHorizontal4,dotBackgroundColorbackground-basic-color-4,selectedDotWidth16) with astatusvariant group forselectedDotBackgroundColor(primarydefault,basic=text-basic-color,control=color-control-default). Inserted beforePopoverin both files.ViewPagernow forwards a consumeronLayout(it was swallowed by the internal one). The laid-out view is the content strip,pages x page widthwide, sopageWidth = layout.width / pageCount; documented ononLayoutandonOffsetChange. Arrows stay app-side (onSelect(index ± 1)).ViewPagerIndicator(end ofSHOWCASES): a 4-page pager with a progress-driven indicator (labelled dots) and adangerone; StorybookviewPager.stories.tsx(WithPageIndicator,IndicatorStatuses); aPageIndicatorsection with the props table inview-pager.mdx.Verification
pageIndicator.spec.tsx(7): one dot per page with the mapped size; selected dot width / status colour /aria-selected; primary and first page by default; progress interpolation between two pages;onSelectwith the pressed index via the dot test id;dotAccessibilityLabel;dotStylemerge.viewPager.spec.tsx: consumeronLayoutforwarded (fails on master).section-ViewPagerIndicator): dots exposed as "Page 1 of 4" ... buttons; pressing dot 3 shows "Page: 3" and TRANSACTIONS; pressing dot 4 shows "Page: 4", "Progress: 3.00", and both indicators highlight the fourth dot (the progress-driven one only after theonLayoutfix, which is how the dropped callback was found).yarn e2e:ios: see "iOS verification (2026-09-28)" below.yarn turbo run build --filter=@ui-kitten/components,yarn typecheck:all,yarn lint(0 errors, 50 pre-existing warnings),yarn test --runInBand(75 suites, 1894 tests) pass.Changeset:
@ui-kitten/componentsminor,@ui-kitten/evaminor,@ui-kitten/materialminor.Closes #1355
iOS verification (2026-09-28)
iPhone 17 simulator (iOS 26.2), debug build on Metro from a clean worktree of this branch, driven with agent-device.
section-ViewPagerIndicator: swipe left ->Page: 2,Progress: 1.00, both indicators move to the second dot; dot 4 press ->Page: 4,Progress: 3.00; dot 3 press ->Page: 3,Progress: 2.00. Eva/Dark and Material/Dark: dots visible on the level-1 background, selected dot in primary / danger.ViewPagersection: swipe ->Page: 2, ORDERS.yarn e2e:iosagainst a Metro serving this branch (the flags injected into a scratch copy of the scripts; without themagent-device testloads the bundle from:8081):smoke.adandicon-touchable.adpass;modal-nested.ad(step 51) andautocomplete.adfail exactly as on master (both fixed in test(e2e): keep modals inside the snapshot budget #1918). An earlier run reported here had loaded another checkout's bundle from:8081and did not test this branch.Android verification (2026-09-28, second pass)
Pixel 7 emulator (API 34), debug build on Metro from a clean worktree of this branch, driven with agent-device.
section-ViewPagerIndicator: swipe ->Page: 2,Progress: 1.00; dot 4 ->Page: 4,Progress: 3.00; dot 3 ->Page: 3.background-basic-color-4, 1.2-1.6:1 against the page in all four theme/mapping combos, nearly invisible in the dark themes. Fixed in 057384a:text-hint-color(2.8-5.0:1), with a spec over the four combinations (fails on the old token). Checked on device in all four combos.ViewPager: swipe ->Page: 2.popover-android.adis stale on master (its fixed scroll count stops at the List section) and was not a branch check; test(e2e): reach showcase sections through a deep link #1932 replaces the scrolls with a section deep link. The Android replay line previously reported here had also loaded another checkout's bundle from:8081.