TextArea: Add `fixedHeight` and `autosize` props
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	AnneT
	Mar 2 2023, 3:28 PM

Description

This task covers adding the fixedHeight and autosize props and their associated functionality.

Design spec

Component spec sheet

Acceptance criteria

Update: we decided not to implement fixedHeight for accessibility reasons (to ensure the user has a way of expanding the textarea) and only implemented autosize.

The "grabber" that allows for manually resizing displays by default
~~A boolean prop called fixedHeight has been added. When set to true, the grabber will not be displayed and the height of the <textarea> will not change.~~
A boolean prop called autosize has been added. When set to true, the grabber will not be displayed and the height of the <textarea> will grow as more text is added
~~When fixedHeight and autosize are set to true, the autosize prop will override the fixedHeight.~~

Details

Subject	Repo	Branch	Lines +/-
Update Codex from v0.11.0 to v0.12.0	mediawiki/core	master	+1 K -1 K
TextArea: Refactor autosize	design/codex	main	+6 -16
TextArea: Add fixedHeight and autosize props	design/codex	main	+71 -8
Update Codex from v0.10.0 to v0.11.0	mediawiki/core	master	+879 -779

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved		lwatson	T284272 TextArea: Add TextArea component to Codex
		Resolved		lwatson	T331034 TextArea: Add `fixedHeight` and `autosize` props

Event Timeline

AnneT created this task.Mar 2 2023, 3:28 PM

Restricted Application added a project: Design-System-Team. · View Herald TranscriptMar 2 2023, 3:28 PM

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

ldelench_wmf moved this task from Inbox to Backlog on the Design-System-Team board.Mar 3 2023, 9:08 PM

AnneT updated the task description. (Show Details)Mar 27 2023, 2:34 PM

lwatson claimed this task.Apr 24 2023, 5:48 PM

Change 916507 had a related patch set uploaded (by LWatson; author: LWatson):

[design/codex@main] TextArea: Add fixedHeight and autosize props

https://gerrit.wikimedia.org/r/916507

gerritbot added a project: Patch-For-Review.May 5 2023, 2:34 PM

lwatson updated the task description. (Show Details)May 15 2023, 2:48 PM

Hey @bmartinezcalvo - during the Engineering Enclave, Volker brought up a good point that the text area with a fixed height may be an a11y antipattern. The text area with fixed height doesn't have a grabber which disables the user from resizing the text area. This is accomplished in CSS with resize: none; which is not supported by all browsers (specifically not supported by Safari iOS).

This article goes into more detail on why resize: none; is not recommended for UX and suggests allowing the user to resize the text area at least vertically with resize: vertical;.

For now, we've decided to remove fixedHeight from the current patch 916507.

Please let me know your thoughts and use cases for fixed height.

Thanks!

lwatson moved this task from Backlog to Design-System-Sprint on the Design-System-Team board.May 16 2023, 2:45 PM

lwatson edited projects, added Design-System-Team (Design-System-Sprint); removed Design-System-Team.

Restricted Application triaged this task as High priority. · View Herald TranscriptMay 16 2023, 2:45 PM

lwatson changed the task status from Open to In Progress.May 16 2023, 2:46 PM

lwatson moved this task from Committed to In Development on the Design-System-Team (Design-System-Sprint) board.

lwatson removed a project: Patch-For-Review.

lwatson updated the task description. (Show Details)May 16 2023, 3:43 PM

lwatson moved this task from In Development to Code Review on the Design-System-Team (Design-System-Sprint) board.

lwatson added a project: Patch-For-Review.

Change 916507 merged by jenkins-bot:

[design/codex@main] TextArea: Add fixedHeight and autosize props

https://gerrit.wikimedia.org/r/916507

From the engineering enclave meeting this week, I raised doubts about disabling resize on TextArea in general. I think it's a usability/an accessibility anti-pattern we should not deliver in Codex out-of-box.
https://catalin.red/css-resize-none-is-bad-for-ux/ for an (older) alternate solution on using contenteditable="true".

Moving this to design review so we can decide what to do about fixedHeight

I found a use case where the Text Area is fixed height. It's this use case from Growth where the user needs to write a short description about the image. @RHo do we really need this Text Area to be fixed height or could it be replaced with the grabber version?

F37008632

Another use case I can find now with fixed height is this from Wikipedia > Add topic, but this is not a Text Area but a Text Editor instead.

Also, I found text areas with fixed height in other DS (such as the Atlassian Design System).

Moving to Design Review to take a decision on the fixed height.

Here's an example of a form that has a textarea with a grabber to expand the size vertically only

In T331034#8861280, @bmartinezcalvo wrote:

I found a use case where the Text Area is fixed height. It's this use case from Growth where the user needs to write a short description about the image. @RHo do we really need this Text Area to be fixed height or could it be replaced with the grabber version?
F37008632

This isn't fixed height, but merely uses a default value for row height (3 rows) and uses the "autosize" version of the OOUI multiline text component and extends if the input is longer than the default.

Another use case I can find now with fixed height is this from Wikipedia > Add topic, but this is not a Text Area but a Text Editor instead.

Also, I found text areas with fixed height in other DS (such as the Atlassian Design System).

Change 922610 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] Update Codex from v0.10.0 to v0.11.0

https://gerrit.wikimedia.org/r/922610

Change 922610 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.10.0 to v0.11.0

https://gerrit.wikimedia.org/r/922610

During the last Eng/Design sync we take the decision of removing the fixedHeight prop. We will only have an autosize prop. The grabber will appear when autosize=false, and will not appear when autosize=true.

@lwatson I've updated the Figma spec sheet to reflect this decision.

bmartinezcalvo updated the task description. (Show Details)May 25 2023, 12:17 PM

@bmartinezcalvo the updates in the design spec look great, thanks!

Change 923416 had a related patch set uploaded (by LWatson; author: LWatson):

[design/codex@main] TextArea: Refactor autosize

https://gerrit.wikimedia.org/r/923416

Change 923416 merged by jenkins-bot:

[design/codex@main] TextArea: Refactor autosize

https://gerrit.wikimedia.org/r/923416

AnneT closed this task as Resolved.May 30 2023, 6:18 PM

AnneT removed a project: Patch-For-Review.

AnneT updated the task description. (Show Details)