feat(textarea): add <rh-textarea>#3006
Open
adamjohnson wants to merge 37 commits into
Open
Conversation
* feat(scheme-toggle): add the `scheme-changed` event * test(scheme-toggle): add tests for `scheme-changed` event * chore(scheme-toggle): add changeset * fix(scheme-toggle): harmonize `isServer` code style * test(scheme-toggle): listen before fixture in init test * docs(scheme-toggle): improve event CEM health docs * docs(scheme-toggle): update demo description formats to match #2951 * docs(scheme-toggle): wrap events demo in a form * test(scheme-toggle): use `@scheme-changed` template binding for event tests * test(scheme-toggle): refactor tests to use ax tree helpers and avoid querying shadowdom
✅ Deploy Preview for red-hat-design-system ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Contributor
|
Size Change: +5.73 kB (+1.82%) Total Size: 320 kB 📦 View Changed
ℹ️ View Unchanged
|
Contributor
Documentation Health
|
| Category | Score | |
|---|---|---|
| Element description | 18/25 | |
| Attribute documentation | 20/20 | ✅ |
| Slot documentation | 10/15 | |
| CSS documentation | 10/15 | |
| Event documentation | 15/15 | ✅ |
| Demos | 10/10 | ✅ |
Recommendations:
- rh-textarea: use RFC 2119 keywords (MUST, SHOULD, AVOID) to clarify requirements (Element description, +5 pts)
- rh-textarea: mention accessibility considerations for slot content (Slot documentation, +5 pts)
- rh-textarea: reference design tokens or theme considerations in CSS descriptions (CSS documentation, +4 pts)
- rh-textarea: describe purpose and context using words like 'for', 'when', 'provides', 'allows' (Element description, +2 pts)
- rh-textarea: add descriptions to all CSS custom properties (CSS documentation, +1 pts)
Review Summary by QodoAdd
WalkthroughsDescription• Introduces <rh-textarea> web component with form association • Supports validation (required, minlength, maxlength) and state feedback • Includes character counter, help text, and auto-grow capabilities • Provides comprehensive demos and accessibility documentation Diagramflowchart LR
A["rh-textarea Component"] --> B["Form Association"]
A --> C["Validation API"]
A --> D["Accessibility Features"]
B --> E["FormData Integration"]
B --> F["Form Reset Support"]
C --> G["required/minlength/maxlength"]
C --> H["state Feedback"]
D --> I["ARIA Labeling"]
D --> J["Help Text Wiring"]
A --> K["8 Demo Pages"]
A --> L["Tests & Docs"]
File Changes1. elements/rh-textarea/rh-textarea.ts
|
Code Review by Qodo
1. figma design marked planned
|
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
…n-system into feat/rh-textarea
bennypowers
requested changes
May 7, 2026
…isabledCallback`
zeroedin
reviewed
May 12, 2026
marionnegp
requested changes
May 26, 2026
Collaborator
There was a problem hiding this comment.
- In light scheme, the read-only version should use
surface-lighteras background andgray-20(no semantic token) for the border. In dark scheme, the read-only's background should besurface-darkerand border should begray-70. - Can the success, warning, and danger icons also be positioned inside the text area?
- Can the
margin-block-startfor the character count text be 8px? We don't have that specced out in Figma, but then it'll match the spacing for helper text. (The spacing image on the Form pattern page will have to be updated.)
Collaborator
Author
@marionnegp Yes, they can. That said, these icons may appear / disappear on individual keystrokes depending on the form validation rules people implement. This might cause text reflow / layout jank if we don't keep a permanent spot for them (aka increase padding of the textarea). I want to avoid text reflow. The question then becomes, should we make a permanent spot for them? If so, what would that look like? Thanks for the review! |
This comment was marked as outdated.
This comment was marked as outdated.
Member
|
we talked about some trade offs on call today:
i'm leaning towards the third option, possibly with the backstop as well. |
hellogreg
modified the milestones:
2026/Q2 — Growlithe release,
2026/Q3 — Horsea release
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What I did
<rh-textarea>element.<rh-textarea>component/pattern #2323.Testing Instructions
aria-disabled, not nativedisabled).field-sizing="content"demo — textarea should auto-grow in Chrome/Safari but fall back to fixed height in Firefox.Notes to Reviewers
Demos on the DP are currently broken due to a docs server rendering issue. You will have to clone this locally to properly view/test it.DP Demos now work!Does this element need a dedicated design spec? Or are the Form pattern specs sufficient?
The element uses
aria-disabledinstead of nativedisabledso the textarea remains focusable for assistive technology users. This matches the pattern used byrh-button,rh-switch, and other RHDS form controls.field-sizing="content"is a progressive enhancement — it uses the CSSfield-sizingproperty which is not supported in Firefox. Firefox users get a standard fixed-height textarea.To do's
netlify.tomleleventy.config.ts— requires fixing docs server rendering first)