Content: Number Field Revamp

[zcolah]

Intro

The Number Field will now allow users to:

1. Input numbers with decimal values as this is supported at an API Level
2. Will have thousand separators that make it easier to scan numerical values
3. Will set it's default to 0 when an item is created

Developer Notes

1. The user should be able to enter only numeric values (0 to 9) and “.”
2. Note: The input should only allow for one "." to be used. There cannot be multiple "."s.
3. If the user selects and deletes the current value in the field, then set the value of the field to 0.
4. Please use the up and down arrows of the number field similar to what we have done previously.
5. The user should be able to enter only numeric values (0 to 9)
6. The number field should be able to support decimal places. Please retain the decimal values when the user uses the arrows to increase the value or decrease the value
7. Automatically add commas for Thousand separators. For example

• 1,000.00
• 100,000.00
• 1,000,000.00
• 1,000,000,000.00

Figma

https://www.figma.com/file/zOI7oSH3fG1XDmmPzsP6PX/Zesty-3.0-Revamp?type=design&node-id=3623%3A14764&mode=dev&t=Waf1vzxF4gMFPUiA-1

[finnar-bin]

@zcolah I have found an issue with these 2 requirements as they are a bit conflicting

• Automatically add commas for Thousand separators.
• Please use the up and down arrows of the number field similar to what we have done previously.

For us to have the browser default up and down arrows to increment the numbers we need to use type="number" but the problem with using that is it doesn't allow commas ( , ) hence we can't add the thousands formatting.

An option I found that could allow us to achieve both requirements is by using type=text instead so we can add the thousands formatting and then manually add some up and down arrow icon buttons that would increment/decrement the values on click, then also add a pattern checker to only allow numbers, . and , to be typed in. It might be a bit tricky to properly position the arrow icon buttons inside the input field but it's something that's most likely still achievable.

I also found an article about the UK Govt opting not to use type=number that's something you might be interested in.

[finnar-bin]

@zcolah as discussed, I need the design for the arrow keys for the revamped number field