Skip to content

Conversation

rcaplanshopify
Copy link
Contributor

@rcaplanshopify rcaplanshopify commented Feb 22, 2023

WHY are these changes introduced?

Fixes #407753

The addition of the type prop to the IndexTable's Cell component allows for right-aligned, monospaced text.

While an optional boolean prop like currency would have worked, the type 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.

Monosnap Cell tsx — polaris  SSH: direct index-table-alignment rick-caplan us spin dev  2023-02-22 14-22-40

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 the lining-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:
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

@github-actions
Copy link
Contributor

github-actions bot commented Feb 22, 2023

size-limit report 📦

Path Size
polaris-react-cjs 220.2 KB (+0.02% 🔺)
polaris-react-esm 139.9 KB (+0.04% 🔺)
polaris-react-esnext 195.72 KB (+0.06% 🔺)
polaris-react-css 42.35 KB (+0.12% 🔺)

@rcaplanshopify
Copy link
Contributor Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant