Page MenuHomePhabricator

TextInput: update error-hover state
Closed, ResolvedPublic

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.

Error-hover.png (256×1 px, 10 KB)

User stories

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

Design spec

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

Event Timeline

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
CCiufo-WMF moved this task from Inbox to Design Upcoming on the Design-System-Team board.

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)
bmartinezcalvo updated the task description. (Show Details)
bmartinezcalvo updated the task description. (Show Details)

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.

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.

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

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

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.

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.

Change #1023135 merged by LWatson:

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

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

Assigning to you @bmartinezcalvo for the last piece, updating the component in the Codex Figma library.

El T346168#9742154, @Volker_E escribió:

Assigning to you @bmartinezcalvo for the last piece, updating the component in the Codex Figma library.

Done!

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

[mediawiki/core@master] Update Codex from v1.4.0 to v1.5.0

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

Change #1025849 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v1.4.0 to v1.5.0

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