Allow for monospace font in textField and textArea components.

[mraymond77]

🙋 Feature Request

Allow for monospace font in textField and textArea components.

🤔 Expected Behavior

Be able to control whether text appears in a monospace font or not via boolean prop flag. Something like isMonospace=True.

😯 Current Behavior

No control over font in textField and textArea components.

💁 Possible Solution

I can understand from a design perspective restricting the font to match the design language, but there surely there is a monospace font that fits in with react-spectrum design that could be selected. For example, in all the react-spectrum docs, "Source Code Pro,Monaco,monospace;" is used for all code examples.

🔦 Context

For certain technical apps, monospace fonts feel and look more correct. E.g. for code and/or operations focused applications. In my case, it is a DNS management app where I would like to see textFields such as FQDN, IP Address fields, etc. as monospace text.

💻 Examples

Example screen shot of desired look from DNS app I am working on:

Possible code example:

<TextField
  validationState={isValid ? 'valid' : 'invalid'}
  value={value}
  onChange={setValue}
  label="Environment Variable"
  isMonospace
/>

🧢 Your Company/Team

Adobe/Cloud Enablement Services - Foundation Applications

[LFDanLu]

We didn't have any use cases for this scenario from Spectrum Design, mind bringing this case up with them? In the meantime you can probably use UNSAFE_className to apply your desired font to each component