[Tooling] Improve numberStringFormatter helper to handle style:"percent" option

[macandcheese]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

Currently, our localized number helper produces unexpected results when using the style: "percent" option.

Acceptance Criteria

I'd expect to get the same output as I would here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat

where when value=0.5,

return Intl.NumberFormat("en", {
  style: "percent",
}).format(value);

returns 50%

Using our helper and the following numberFormatOptions

numberFormatOptions = {
  locale: this.effectiveLocale,
  numberingSystem: this.numberingSystem,
  useGrouping: this.groupSeparator,
  style: "percent",
}; 

return numberStringFormatter.localize(value.toString());

the result is 0%.500%. If value=0.75, the result is 0%.700%500%

Relevant Info

cc @benelan

Which Component

No component

Example Use Case

No response

Priority impact

p3 - want for upcoming milestone

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react

Esri team

Calcite (design)

[benelan]

Based on the examples you gave this is likely a regression from #7159. It may be as easy as stripping non-numeric characters from the end of the value before handling the trailing zeros case.

[geospatialem]

The above was added to the Freezer ❄️ with a lower priority and higher estimate.

Ben mentioned his comment above is not correct, and instead mentioned it shifts decimals and adding 0's in addition to styling. The number locale utils were designed specifically for user input, which is why they are so complicated.

However, WRT the above, if we ever need to localize a percentage from user input we can re-evaluate this issue.