WIP: [IndexTable Cell] Add optional type prop for right-aligned and monospaced currency formatting #8471
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.
WHY are these changes introduced?
Fixes #407753
The addition of the
type
prop to theIndexTable
'sCell
component allows for right-aligned, monospaced text.While an optional boolean prop like
currency
would have worked, thetype
prop opens up the possibility for future type values that can be supported by updating the union type and adding additional string values representing different scenarios with varying stylistic needs.Screen.Recording.2023-02-22.at.1.45.47.PM.mp4
WHAT is this pull request doing?
This PR allows users to easily render the cell contents aligned to the right and monospaced. This makes it easier to read columns with currency values, as the numbers of each place in the value will be consistently sized, improving the experience of vertical scanning.
The PR takes advantage of the font-variant-numeric CSS property, implementing the
tabular-nums
value (forcing consistent widths on OpenType fonts) and thelining-nums
value (rendering numbers with a consistent height and on the same plane).How to 🎩
🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines
Copy-paste this code in
playground/Playground.tsx
:🎩 checklist
README.md
with documentation changes