govau/design-system-components

`.au-text-input--number`: monospaced font, or font-variant property?

Open

#855 opened on Jul 23, 2019

View on GitHub
 (1 comment) (0 reactions) (0 assignees)HTML (115 forks)batch import
enhancementgood first issuesm7submitted by user

Repository metrics

Stars
 (741 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

Right now, if we add the au-text-input--number it uses our monospace font like so:

It feels kind a bit inconsistent, having different font for number inputs.

image

I think we could make use of the font-variant: tabular-nums property, and keep the letter spacing, so it looks a bit like this instead:

Contributor guide

Research direction
Locate the CSS rule for `.au text input number` in the project's stylesheets, likely in a file like `components/input/styles.css`. Replace the current monospace font declaration with `font variant: tabular nums`. Test to ensure the number input appears as desired and check for cross browser compatibility of `font variant: tabular nums`.
Tech stack
htmlcss
Domain
frontenddesign
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
Basic CSS knowledge
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80