[Bug]: Fluid TextInput does not show a background in readonly mode

[remagpie]

Package

@carbon/react

Browser

Firefox

Package version

v1.71.0

React version

18.3.0

Description

According to the design document, TextInput in Fluid style should have a background color in readonly mode. But when I try it with @carbon/react package, it shows a transparent background instead.

Expected:

Actual:

Reproduction/example

https://stackblitz.com/edit/github-jqvw5p?file=src%2FApp.jsx

Steps to reproduce

Use the stackblitz link provided and render the App.jsx file.

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[alina-jacob]

Hi @remagpie, this is the intended implementation, you can check the read-only state documented here (scroll a bit further down)

[remagpie]

@alina-jacob It seems that the image you gave me came from the Default mode of TextInput. My issue was related to the TextInput in Fluid mode. The document says the intended design has an gray background:

[remagpie]

And it seems that the image(the "Expected" one) I included in the issue was a wrong one. Sorry about that. It's now replaced with the correct image.

[alina-jacob]

Oh yes sorry about the default fluid bit.
Upon double checking, turns out we have two stories for Fluid text input. The one you've linked in the incorrect one, here's the correct one. (Its marked unstable, but can you use it! Read more about unstable state here)

Just for reference, here's a Stackblitz of both, one with error and one without error.
We will fix the incorrect one, thanks for bringing it to our attention!