Maniphest T302064

Add missing text input states in the DSG
Closed, DeclinedPublic
Actions

Assigned To

Authored By

	bmartinezcalvo
	Feb 18 2022, 10:47 AM

Description

Background/Goal

Some input states are missing in the Design Style Guide:

Filled in
Error
Error focus
Error filled

Captura de Pantalla 2022-11-23 a las 17.08.25.png (602×1 px, 255 KB)

Acceptance criteria (or Done)

Replace the image in the "States" section with the following image where all states were added

text_inputs_states_errorstates.png (862×932 px, 44 KB)

Related Objects

Mentioned In: T309905: Add error state to TextInput component
T304566: Update TextInput to meet the Figma designs
Mentioned Here: T343451: Component's guidelines: move the existing DSG component's guidelines to Codex
T305593: TextInput endIcon and clearable are currently exchanging each other, not positioned side-by-side

Event Timeline

bmartinezcalvo created this task.Feb 18 2022, 10:47 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 18 2022, 10:47 AM

bmartinezcalvo removed bmartinezcalvo as the assignee of this task.Apr 11 2022, 9:54 AM

@STHart I move this task to our sprint board since I'm working in this other task T305593 adding the endIcon missing variant in our Figma file, and I prefer to add all missing variants in the same branch.

bmartinezcalvo moved this task from Research to Ready for Design on the Design-Systems-team-20200324-20220422 (Design-Systems-Active-Sprint) board.Apr 14 2022, 11:20 AM

Sarai-WMDE mentioned this in T304566: Update TextInput to meet the Figma designs.Apr 14 2022, 11:21 AM

bmartinezcalvo renamed this task from Design missing text input states to Add missing text input states in our Figma library.Apr 14 2022, 11:21 AM

• STH edited projects, added Design-System-Team (Design-System-Sprint); removed Design-Systems-team-20200324-20220422 (Design-Systems-Active-Sprint).Apr 15 2022, 5:16 PM

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

Added the following missing TextInput states in our Figma library:

Placeholder focus
Filled in
Error
Error focus
Error filled

Captura de pantalla 2022-04-21 a las 11.04.49.png (1×2 px, 2 MB)

Also, I've taken the opportunity to update some states that were not well created in Figma and didn't match with our OOUI/Codex component demo:

Deleted clear icon (x) from placeholder states. Clear icon will appear only when the input has text typed inside.
Updated background of disabled states to align it with OOUI/Codex and with our tokens.

And I've added the Keyboard Shortcuts table in the TextInput spec sheet (that was missing).

You can view all in this branch. I will merge this branch with our main Figma library when this task has been reviewed.

Requesting feedback from @iamjessklein to be able to merge the branch with the main file.

bmartinezcalvo updated the task description. (Show Details)Apr 21 2022, 9:07 AM

@iamjessklein I assign you the task so you can to the Design Review and provide feedback in the task.

I send to a request to review the Figma branch where I've been adding these new variants. You can view the Figma branch here. Once the branch is reviewed I will merge with the main library.

Nice work @bmartinezcalvo

+1 to merge.

• iamjessklein reassigned this task from • iamjessklein to bmartinezcalvo.Apr 25 2022, 7:12 PM

bmartinezcalvo updated the task description. (Show Details)Apr 26 2022, 10:16 AM

Branch merged with the main library and new TextInputs variants published.

@Volker_E I assign you the task since the last step is update the DSG with these missing states:

Placeholder focus
Filled in
Error
Error focus
Error filled

• STH triaged this task as High priority.Apr 30 2022, 6:13 PM

ldelench_wmf edited projects, added Design-System-Team; removed Design-System-Team (Design-System-Sprint).May 16 2022, 5:09 PM

ldelench_wmf moved this task from Inbox to Up Next on the Design-System-Team board.

• STH moved this task from Up Next to Needs Refinement on the Design-System-Team board.May 17 2022, 9:17 PM

bmartinezcalvo renamed this task from Add missing text input states in our Figma library to Add missing text input states in the DSG.Jun 27 2022, 1:05 PM

Volker_E mentioned this in T309905: Add error state to TextInput component.Oct 19 2022, 5:23 PM

Volker_E added a project: Wikimedia Design Style Guide.

Volker_E removed subscribers: • iamjessklein, • STH.

@Volker_E I've created the following image with all the Text Input states. The current image in the "States" section in the DSG should be replaced with this new one.

bmartinezcalvo moved this task from Needs Refinement to Up Next on the Design-System-Team board.Nov 23 2022, 4:13 PM

Volker_E lowered the priority of this task from High to Low.Jan 31 2023, 5:46 PM

AnneT moved this task from Inbox to Planned Component Updates on the Codex board.Mar 1 2023, 4:37 PM

CCiufo-WMF moved this task from Up Next to Backlog on the Design-System-Team board.May 23 2023, 3:59 PM

This has already been done in T343451: Component's guidelines: move the existing DSG component's guidelines to Codex so declining this task. cc: @CCiufo-WMF

	F35815931: text_inputs_states_errorstates.png
	Nov 23 2022, 4:12 PM

	F35815927: text_inputs_states_errorstates.png
	Nov 23 2022, 4:11 PM

	F35815923: Captura de Pantalla 2022-11-23 a las 17.08.25.png
	Nov 23 2022, 4:11 PM

	F35061256: Captura de pantalla 2022-04-21 a las 11.04.49.png
	Apr 21 2022, 9:06 AM

	F34956706: Captura de pantalla 2022-02-18 a las 11.46.01.png
	Feb 18 2022, 10:47 AM

	F34956700: Captura de pantalla 2022-02-18 a las 11.40.35.png
	Feb 18 2022, 10:47 AM

Add missing text input states in the DSGClosed, DeclinedPublicActions