RocketChat / RocketChat/fuselage

bug: TextAreaInput missing visual feedback for disabled and readOnly states

Open Beginner friendly
#1,817 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
162
Forks
258
Avg merge
2d 23h
Merged PRs (30d)
24

Description

Description:

The TextAreaInput component lacks distinct visual styling when the disabled or readOnly props are applied. Currently, while the field becomes uneditable, it retains a white background, which is inconsistent with TextInput and other form elements that use a grey background (surface-disabled) to indicate inactivity.

Steps to reproduce:
  1. Open Fuselage Storybook.
  2. Navigate to Inputs/TextAreaInput.
  3. Toggle the disabled control.
  4. Observe that the background does not change color.
Expected behavior:

The component should use the standardized design tokens for disabled states, including a background color change and a not-allowed cursor.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in Fuselage Storybook at Inputs/TextAreaInput and compare its disabled and readOnly states with TextInput and other form elements. Done means the states use the standardized disabled background and show a not-allowed cursor, with both controls behaving consistently.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
design, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
65/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.