Adding a new text field component for units based text values. The purpose of this component is to duplicate the text fields in the browser dev tools which increment and decrement numeric values within strings of text when the up or down arrow keys are pressed. For example if the text field contained the value "123px" and the up arrow is pressed the value would change to "124px". It is also able to handle multiple values separated by whitespace or commas and modifies the value that is selected or closest to the cursor position. For example for the value "123px 456|px 789px" the up arrow would increment the 456 number resulting in "123px 457|px 789px".
If the shift key is held then the number is incremented/decremented by 10.
This will work for any combination of numbers and unit designators including special character designators like currency, inches, feet, degrees, percentage, etc.
If the number contains a decimal value then the decimal part is ignored and is not modified.
Negative numbers are properly parsed and the transition between positive and negative is managed by adding or removing the negative sign.
The control can be tested by pulling the branch and running "npm start" in the \fast-tooling\packages\fast-tooling folder. This will start the testing website. Click the "Units Text Field" button on the left menu.
The component extends the TextField component from fast-foundation while using the template and css from fast-foundation and fast-components and thus automatically supports all of the Fast TextField features including being form associated.
🎫 Issues
Closes #72
👩💻 Reviewer Notes
✅ Checklist
General
[x] I have added tests for my changes.
[x] I have tested my changes.
[ ] I have updated the project documentation to reflect my changes.
Pull Request
📖 Description
Adding a new text field component for units based text values. The purpose of this component is to duplicate the text fields in the browser dev tools which increment and decrement numeric values within strings of text when the up or down arrow keys are pressed. For example if the text field contained the value "123px" and the up arrow is pressed the value would change to "124px". It is also able to handle multiple values separated by whitespace or commas and modifies the value that is selected or closest to the cursor position. For example for the value "123px 456|px 789px" the up arrow would increment the 456 number resulting in "123px 457|px 789px". If the shift key is held then the number is incremented/decremented by 10. This will work for any combination of numbers and unit designators including special character designators like currency, inches, feet, degrees, percentage, etc. If the number contains a decimal value then the decimal part is ignored and is not modified. Negative numbers are properly parsed and the transition between positive and negative is managed by adding or removing the negative sign.
The control can be tested by pulling the branch and running "npm start" in the \fast-tooling\packages\fast-tooling folder. This will start the testing website. Click the "Units Text Field" button on the left menu.
The component extends the TextField component from fast-foundation while using the template and css from fast-foundation and fast-components and thus automatically supports all of the Fast TextField features including being form associated.
🎫 Issues
Closes #72
👩💻 Reviewer Notes
✅ Checklist
General
⏭ Next Steps