TextInput: update error-hover state
Closed, ResolvedPublic
Actions

Assigned To

None

Authored By

	bmartinezcalvo
	Sep 12 2023, 4:16 PM

Description

Background

At the moment, the TextInput doesn't provide a different color when error-hover. We need to include the error-hover state by using the new border-color-error--hover token created in T340119: Checkbox: implement the error state.

User stories

As a user, I need to know when a TextInput is interactive when error.

Design spec

Component spec sheet

Open questions

Add here the questions to be answered in order to design and implement the component

Acceptance criteria (or Done)

Design

Design the Figma spec sheet and add it in this task
Update the component in the Codex Figma library. This step will be done by a DST member.
Update the Interaction States in the TextInput Guidelines including the new states

Code

Update the TextInput in Codex: use the border-color-error--hover token in the`error-hover` state

Future task

T363137: Include error-hover state in the rest of form components containing error

Details

Related Changes in Gerrit:

Subject	Repo	Branch	Lines +/-
Update Codex from v1.4.0 to v1.5.0	mediawiki/core	master	+519 -4 K
Select, TextArea, TextInput: Implement error hover feedback	design/codex	main	+12 -0
docs: Include new error-hover state in the “Interaction states“ image	design/codex	main	+119 -89

Customize query in gerrit

Related Objects

Mentioned In: T363137: Include error-hover state in the rest of form components containing error
T361738: TextInput: update error-hover and error-focus states
Mentioned Here: T363137: Include error-hover state in the rest of form components containing error
T361734: Update focus color to be the same everywhere
T340119: Checkbox: implement the error state

Event Timeline

bmartinezcalvo created this task.Sep 12 2023, 4:16 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 12 2023, 4:17 PM

bmartinezcalvo renamed this task from TextInput: include missing error states to TextInput: update error-hover and error-focus states.Sep 12 2023, 4:17 PM

bmartinezcalvo updated the task description. (Show Details)Sep 12 2023, 4:22 PM

bmartinezcalvo updated the task description. (Show Details)

CCiufo-WMF triaged this task as Low priority.Sep 26 2023, 3:58 PM

CCiufo-WMF moved this task from Inbox to Design Upcoming on the Design-System-Team board.

mwilliams assigned this task to SGautam_WMF.Apr 3 2024, 3:13 PM

mwilliams added a subscriber: SGautam_WMF.

mwilliams mentioned this in T361738: TextInput: update error-hover and error-focus states.Apr 3 2024, 7:24 PM

mwilliams added a project: Wikimedia-Design.Apr 3 2024, 7:42 PM

mwilliams moved this task from Backlog to Doing on the Wikimedia-Design board.

Maintenance_bot added a project: Design.Apr 3 2024, 8:29 PM

Aklapper merged a task: T361738: TextInput: update error-hover and error-focus states.Apr 3 2024, 9:35 PM

Aklapper added a subscriber: mwilliams.

bmartinezcalvo updated the task description. (Show Details)Apr 8 2024, 9:32 AM

As outlined in T361734, we will use the border-color-progressive--focus (#36c) in all the focus states of components. Since updating the TextInput error-focus state is unnecessary now, I'm removing it from this task description and acceptance criteria.

bmartinezcalvo renamed this task from TextInput: update error-hover and error-focus states to TextInput: update error-hover state.Apr 9 2024, 1:48 PM

bmartinezcalvo updated the task description. (Show Details)

SGautam_WMF updated the task description. (Show Details)Apr 18 2024, 12:06 PM

I've completed the design specifications as outlined in the acceptance criteria. The Figma spec sheet has been updated accordingly. This task is now ready for the development phase.

In T346168#9726054, @SGautam_WMF wrote:

I've completed the design specifications as outlined in the acceptance criteria. The Figma spec sheet has been updated accordingly. This task is now ready for the development phase.

@SGautam_WMF thank you! Moving the task to Up Next so developers can implement this new error-hover state. Once you update the image for the Guidelines > Interaction states, I will create a patch to update it in Codex.

In T346168#9726072, @bmartinezcalvo wrote:

In T346168#9726054, @SGautam_WMF wrote:

I've completed the design specifications as outlined in the acceptance criteria. The Figma spec sheet has been updated accordingly. This task is now ready for the development phase.

@SGautam_WMF thank you! Moving the task to Up Next so developers can implement this new error-hover state. Once you update the image for the Guidelines > Interaction states, I will create a patch to update it in Codex.

Hello Barbara, I have updated the image, can you please have a look? If this looks fine then we can proceed with update it in codex.

Change #1022104 had a related patch set uploaded (by Bmartinezcalvo; author: Bmartinezcalvo):

[design/codex@main] docs: Update image in the Interaction States section including the new error-hover state

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

gerritbot added a project: Patch-For-Review.Apr 19 2024, 5:10 PM

Change #1022104 merged by jenkins-bot:

[design/codex@main] docs: Include new error-hover state in the “Interaction states“ image

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

Volker_E updated the task description. (Show Details)Apr 22 2024, 11:18 PM

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

[design/codex@main] TextArea, TextInput: Implement error hover feedback

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

So this was aimed so far as mainly about TextInput, but equivalent this change should also cover TextArea.
And then we already got a third and a forth error border style in place: Select and Checkbox. While latter already features the same logic, Select would be untouched right now when in error state.
In my opinion providing the same error hover border feedback would make sense on Select.

Volker_E edited projects, added Design-System-Team (DST-Sprint-21 (2024-04-15 to 2024-04-26)); removed Design-System-Team.Apr 23 2024, 1:59 AM

bmartinezcalvo mentioned this in T363137: Include error-hover state in the rest of form components containing error.Apr 23 2024, 8:31 AM

In T346168#9733945, @Volker_E wrote:

So this was aimed so far as mainly about TextInput, but equivalent this change should also cover TextArea.
And then we already got a third and a forth error border style in place: Select and Checkbox. While latter already features the same logic, Select would be untouched right now when in error state.
In my opinion providing the same error hover border feedback would make sense on Select.

@Volker_E you are right. I've created this new task T363137 to include the error-hover state in the rest of form components including the interactive error state. In the case of the Checkbox, it was already implemented in T340119.