GrValue

• you are writing a component of your own with a quantity — a tile, a cell, a row of a report: the affixes will be styled the same way as in the rest of the package, with no copying of classes;
• the currency stands on the right — 100 ₽ rather than $100: the side is set by which affix the symbol is put into;
• the quantity is not a number — “2 h 15 min”, ”—”, “n/a” are printed as they are;
• markup of your own is needed around the value — the sign, an arrow, a hidden label go into the slots between the parts of the record.

The primitive formats nothing: the digit groups, the precision and the separators are the concern of whoever passes the value. That is not a saving but a boundary of responsibility: “2 h 15 min” and ”—” are quantities just as 1 284 500 is, and a component that tried to parse them would spoil both.

Formatting by locale exists in the package — formatStatisticValue; it is available separately and combines with the primitive in any way at all.

The component does not decide what an affix is. That is its whole point: $, ₽, %, ms, “per order” are different things, and one rule for all of them will lie one day.

The defaults are chosen by frequency rather than by truth:

Behind them stands an observation: on the left people more often write the currency, and it is part of the sum; on the right more often a unit, and it does not belong to the quantity. $14.99 and 42 % come out by themselves.

The rouble is written after the number, but it is as much part of the sum as the $ before it. The default of the suffix therefore does not fit it, and it is changed with tokens:

<GrValue
  :value="formatted"
  suffix="₽"
  style="--gr-value-suffix-color: currentColor; --gr-value-suffix-size: 1em"
/>

An application where it is always so finds it more convenient to declare that in a class once:

.amount { --gr-value-suffix-color: currentColor; --gr-value-suffix-size: 1em; }

Precisely currentColor and 1em rather than inherit. For a custom property inherit is the keyword for inheriting the variable itself: it means “take its value from the parent”, and the parent does not have it, so the token stays undefined. The fallback then fires as usual, and the affix looks untouched — the edit silently gives nothing. currentColor and 1em are real values, and they mean exactly what is needed: the colour and the type size of the quantity.

The component does not choose the side of the symbol. The temptation to infer it from the locale is there, but Intl places the currency by locale rather than by currency: in ru-RU they all end up on the right, the dollar included (1 284 500,50 $), and in en-US all on the left, the rouble included (RUB 1,284,500.50). The familiar ”₽ on the right, $ and € on the left” is a mixed product rule, and there is nowhere to infer it from. It is decided by the consumer, by choosing the affix.

The colour of the prefix is inherit by default rather than a copy of the tone role. The difference is visible on a negative sum: the whole record turns red, not the number without the currency sign. The tone is therefore set once on the parent — that is what GrStatistic does — and the primitive does not need to know about it.

The type size is inherited the same way: the primitive has no size scale of its own, and the quantity is set in the type size of the place it stands in.

The positions of the affixes are fixed: the prefix on the left, the suffix on the right. The order is changed neither by a prop nor by the locale — a quantity whose affixes swap places is two different records, and only the author of the screen can choose between them.