feat: apply tabular-nums to amounts/counts in MarketplacePage (FWC26) - #840
Open
obafemimathew01-hue wants to merge 1 commit into
Open
Conversation
- Add font-variant-numeric: tabular-nums to .numeric-tabular, .tabular-nums, .marketplace-count, and .marketplace-filter-badge in typography.css - Wrap all digit spans in MarketplacePage count bar with .numeric-tabular - Add marketplace-filter-badge + numeric-tabular classes to mobile filter badge - Add focused FWC26 regression test suite in MarketplacePage.test.tsx Closes #FWC26
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
1 participant
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.
Apply font-variant-numeric: tabular-nums to amounts/counts in MarketplacePage (GrantFox FWC26)
Summary
Digits in the Marketplace count bar ("Showing 1–12 of 47 APIs") and the mobile Filters badge
were rendered with proportional numerals, causing the label to shift width as the user pages
through results or applies filters. This PR locks all visible counts to fixed-width (tabular)
numerals so the layout stays stable.
Changes
src/styles/typography.css
tabular-nums
automatically tabular without needing an explicit class
double-digit counts don't shift the button width
src/pages/MarketplacePage.tsx
src/pages/MarketplacePage.test.tsx
covering: span presence, digit-only content, zero-result empty state, container class
integrity, badge class, and badge aria-label semantics
Testing
All 27 MarketplacePage tests pass (vitest run). No new TypeScript errors introduced.
Accessibility
Change is purely typographic — no colour, contrast, or interactive behaviour is affected.
Tabular numerals are supported by all modern browsers and do not impact screen reader output.
Closes #720