[RAC] Add data-required and data-readonly attributes to form components

[stefanprobst]

Provide a general summary of the issue here

i am trying to style a RAC TextField with tailwind, and using the RAC tailwindcss plugin.

this works for the disabled: and invalid: variants, but not for read-only: and required:.

see this reproduction repo, which renders the following (the first two don't apply colored border, the last two do):

<TextField className="grid" isReadOnly>
  <Label>Check readonly</Label>
  <Input className="border-2 read-only:border-sky-600" name="check-readonly" />
</TextField>

<TextField className="grid" isRequired>
  <Label>Check required</Label>
  <Input className="border-2 required:border-pink-600" name="check-required" />
</TextField>

<TextField className="grid" isDisabled>
  <Label>Check disabled</Label>
  <Input className="border-2 disabled:border-purple-600" name="check-disabled" />
</TextField>

<TextField className="grid" isInvalid>
  <Label>Check invalid</Label>
  <Input className="border-2 invalid:border-red-600" name="check-invalid" />
</TextField>

my guess is that Input/TextArea needs to add these as data- attributes here?

🤔 Expected Behavior?

see above

😯 Current Behavior

see above

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

see repo linked to above

Version

RAC 1.1.1

What browsers are you seeing the problem on?

Firefox

If other, please specify.

No response

What operating system are you using?

linux

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[reidbarber]

For cases like this, you could make the TextField a group in tailwind and style the Input based using the group-* modifier : https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state

We could add these states to the Input like we do the invalid state though.

Edit: I realized this wouldn't necessarily work for these components, since we don't apply data-read-only when the isReadOnly prop is provided, and we apply data-required on some components, but not TextArea/TextField. It would be nice to have these, at least at the root component level.

[stefanprobst]

@reidbarber thanks for adding these to TextField! should the same be added to the other *Field components (NumberField, DateField, SearchField, Select, Combobox) as well? do you want me to open a new issue for that?

[reidbarber]

@stefanprobst a new issue would be great!