Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TextField: Color always primary, even when disabled/readonly #609

Open
scottlovegrove opened this issue Nov 16, 2021 · 1 comment
Open

Comments

@scottlovegrove
Copy link
Contributor

🐛 Bug report

Current behavior

When using the TextField I have tried being able to change the colour of the text, but appear to be unable to do so. I actually do just need this input to be readonly, but I didn't want pure white text for the text colour, but we don't seem to have a different colour for that, nor do we for disabled (something else I also tried in order to change the colour value).

We also seem to support the color field on the input, but setting that changes nothing within the input itself.

This is my current code

<TextField
    label=""
    readOnly
    value={calendarLink}
    color="red"
    disabled
/>

This is what that looks like
image

And this is what the rendered css gives
image

Steps to reproduce the bug

Use the code above

Expected behavior

The colour of the text should change, especially when setting the color field, and definitely when you disable the input.

Environment

  • @doist/reactist version: 11.0.0
  • react version: 17.0.2
  • Browser: Chrome
@gnapse
Copy link
Contributor

gnapse commented Nov 17, 2021

That color prop seems to come from the native props supported by an input element. Although I cannot find that attribute in MDN, it is coming from the TypeScript type definitions for HTMLAttributes in React types (ref).

So, this attribute is not there intentionally from us. It is there because of our intention to allow the consumer of our components to be able to pass all the other props that they'd be able to pass to a native <input /> element. I can understand how it is confusing, though.

The only thing that I agree with here is that the text field should indeed show a different appearance when dimmed. This change of appearance may affect not only the input field, but may also affect that label. We'd need to check with the design team what's the design for a disabled text field. And maybe along the way, to check if we have a proper disabled state for all the other field elements in the library.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants