Skip to content

TextArea: add disabled styles #77129

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.

Sign up for GitHub

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

Open
oandregal wants to merge 2 commits into
base: trunk
Choose a base branch
from
Open

TextArea: add disabled styles #77129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4eb2cf2
TextArea: add disabled styles
oandregal Apr 8, 2026
64b23ae
Add PR number in changelog entry
oandregal Apr 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,14 @@

### Bug Fixes

<<<<<<< fix/rtc-inline-inserter
- `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)).
Copy link
Copy Markdown
Member Author

@oandregal oandregal Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.


### Internal

- Autocomplete: Refactor `useAutocomplete` to use `useReducer` ([#77020](https://github.com/WordPress/gutenberg/pull/77020)).
>>>>>>> trunk

## 32.5.0 (2026-04-01)

Expand Down
3 changes: 3 additions & 0 deletions packages/components/src/textarea-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@ const meta: Meta< typeof TextareaControl > = {
onChange: { action: 'onChange' },
label: { control: { type: 'text' } },
help: { control: { type: 'text' } },
disabled: {
control: { type: 'boolean' },
},
value: { control: false },
},
parameters: {
Expand Down
7 changes: 7 additions & 0 deletions packages/components/src/textarea-control/styles/textarea-control-styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,13 @@ export const StyledTextarea = styled.textarea`
${ inputStyleFocus }
}

&:disabled {
background: ${ COLORS.ui.backgroundDisabled };
border-color: ${ COLORS.ui.borderDisabled };
Copy link
Copy Markdown
Contributor

@ntsekouras ntsekouras Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

color: ${ COLORS.ui.textDisabled };
opacity: 1;
Copy link
Copy Markdown
Contributor

@ntsekouras ntsekouras Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need the opacity here?

}

// Use opacity to work in various editor styles.
&::-webkit-input-placeholder {
color: ${ COLORS.ui.darkGrayPlaceholder };
Expand Down
6 changes: 6 additions & 0 deletions packages/components/src/textarea-control/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@ export type TextareaControlProps = Pick<
BaseControlProps,
'__nextHasNoMarginBottom' | 'hideLabelFromVision' | 'help' | 'label'
> & {
/**
* Whether the textarea should be disabled.
*
* @default false
*/
disabled?: boolean;
Comment on lines +15 to +20
Copy link

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
Copy link
Copy Markdown
Contributor

@ntsekouras ntsekouras Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a good point

/**
* A function that receives the new value of the textarea each time it
* changes.
Expand Down
Loading