Conversation
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
| - `TextareaControl`: Add disabled styles. [#77129](https://github.com/WordPress/gutenberg/pull/77129) | ||
| - `Autocomplete`: Fix value comparison to avoid resetting block inserter in RTC ([#76980](https://github.com/WordPress/gutenberg/pull/76980)). | ||
| - `ValidatedRangeControl`: Fix `aria-label` rendered as `[object Object]` when `required` or `markWhenOptional` is set ([#77042](https://github.com/WordPress/gutenberg/pull/77042)). | ||
| - `Autocomplete`: Fix matching logic to prefer longest overlapping trigger ([#77018](https://github.com/WordPress/gutenberg/pull/77018)). |
There was a problem hiding this comment.
These git conflict markers were introduced at https://github.com/WordPress/gutenberg/pull/76980/changes#r3050030572. We can just remove them, without making any other changes.
There was a problem hiding this comment.
Pull request overview
This PR improves visual consistency of @wordpress/components form controls by adding explicit disabled styling support for TextareaControl, aligning it with other controls (e.g., InputControl).
Changes:
- Added
:disabledstyling toStyledTextareausing semantic UI tokens andopacity: 1to avoid browser-default dimming. - Added an explicit
disabled?: booleanprop (with JSDoc) toTextareaControlProps. - Added a
disabledboolean control to theTextareaControlStorybook story and recorded the change in the components changelog (also removing prior conflict markers).
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/components/src/textarea-control/types.ts | Documents disabled on the public props type. |
| packages/components/src/textarea-control/styles/textarea-control-styles.ts | Adds disabled visual styling to the textarea element. |
| packages/components/src/textarea-control/stories/index.story.tsx | Adds a Storybook disabled control to validate the new state visually. |
| packages/components/CHANGELOG.md | Adds an Unreleased changelog entry for the fix and removes conflict markers. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| /** | ||
| * Whether the textarea should be disabled. | ||
| * | ||
| * @default false | ||
| */ | ||
| disabled?: boolean; |
There was a problem hiding this comment.
TextareaControl has a dedicated README with a manual “Props” list, but the newly introduced disabled prop isn’t documented there. Please update packages/components/src/textarea-control/README.md to include disabled (type, default, and behavior) so the docs stay in sync with the exported types and Storybook controls.
| background: ${ COLORS.ui.backgroundDisabled }; | ||
| border-color: ${ COLORS.ui.borderDisabled }; | ||
| color: ${ COLORS.ui.textDisabled }; | ||
| opacity: 1; |
There was a problem hiding this comment.
Why do we need the opacity here?
|
|
||
| &:disabled { | ||
| background: ${ COLORS.ui.backgroundDisabled }; | ||
| border-color: ${ COLORS.ui.borderDisabled }; |
There was a problem hiding this comment.
Do we need to have a way if there are already borders? It seem this var is only used by input control only if is not isBorderless though. On the other hand I think setting a border-color without having a border type is a no-op, but I'm not 100% sure.
|
There's this conversation about whether we go this route or another that's important to figure out for this PR to land: #77127 (comment) |
Follow-up to #77090
What?
Add disabled styles to the
TextareaControlcomponent.Why?
The
TextareaControlcomponent can be disabled via thedisabledHTML attribute, but it had no visual disabled styles — the textarea looks identical whether enabled or disabled. This is inconsistent with other form controls likeInputControlandRadioControl(fixed in #77127), which already have distinct disabled appearances.Control with disabled state in story:
Control with disabled state in DataForm story:
How?
&:disabledCSS styles toStyledTextareausing the same semantic design tokens asInputControl:backgroundDisabled,borderDisabled,textDisabled, andopacity: 1to prevent browser default dimming.disabledprop toTextareaControlPropswith JSDoc documentation.disabledboolean control to the Storybook story for testing.Testing Instructions
The control's story:
InputControl.DataForm's story:
InputControl.Use of AI Tools
Claude Code was used to assist with implementation and to generate this PR summary.