Page MenuHomePhabricator
Create Task
Maniphest T363137

Include error-hover state in the rest of form components containing error
Closed, ResolvedPublic1 Estimated Story Points
Actions

Description

Background

In T346168 we've implemented the error-hover state using border-color-error--hover in TextInput. We need to include the same logic in the other components utilized in forms that contain error states.

  • TextArea
  • Select
  • ChipInput

User stories

  • As a user, I need to know when a TextArea and Select are interactive when error.

Design spec

Link the spec sheets here once they are completed.

TextArea component's spec
Select component's spec
ChipInput component's spec

Open questions

Acceptance criteria (or Done)

Design

  • Design the Figma spec sheets for those components and link them in this task:
    • TextArea
    • Select
    • ChipInput
  • Update the components in the Codex Figma library. This step will be done by a DST member.
  • Update the image and list of states in the Guidelines > Interaction states in both:
    • TextArea
    • Select
    • ChipInput

Code

  • Update components in Codex using the border-color-error--hover token in the error-hover state:
    • TextArea
    • Select
    • ChipInput
Future tasks

Details

SubjectRepoBranchLines +/-
Update Codex from 1.5.0 to 1.6.0mediawiki/coremaster+2 K -1 K
ChipInput, styles: Implement error-hover statedesign/codexmain+7 -9
docs: fix "Interaction states" images in Select, ChipInput and TextAreadesign/codexmain+49 -146
docs: include error-hover state in Select, ChipInput and TextArea guidelinesdesign/codexmain+409 -439
Update Codex from v1.4.0 to v1.5.0mediawiki/coremaster+519 -4 K
Select, TextArea, TextInput: Implement error hover feedbackdesign/codexmain+12 -0
Customize query in gerrit

Related Objects

Event Timeline

bmartinezcalvo created this task.Tue, Apr 23, 8:31 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptTue, Apr 23, 8:31 AM
bmartinezcalvo mentioned this in T346168: TextInput: update error-hover state.Tue, Apr 23, 8:33 AM
bmartinezcalvo moved this task from Inbox to Backlog on the Design-System-Team board.Tue, Apr 23, 8:43 AM
gerritbot added a comment.Tue, Apr 23, 10:20 PM

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

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

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

gerritbot added a project: Patch-For-Review.Tue, Apr 23, 10:20 PM
Volker_E added a comment.Wed, Apr 24, 2:38 AM

@bmartinezcalvo This task currently says rest of the form components, but names only TextArea and Select right now. Combobox, Radio etc. are also missing.

bmartinezcalvo updated the task description. (Show Details)Wed, Apr 24, 8:40 AM
bmartinezcalvo added a comment.EditedWed, Apr 24, 8:47 AM
El T363137#9739039, @Volker_E escribió:

@bmartinezcalvo This task currently says rest of the form components, but names only TextArea and Select right now. Combobox, Radio etc. are also missing.

@Volker_E at the moment, Combobox, Lookup, and Radio doesn't provide error state. I guess we will need to include the error state within all the components that can be contained within Field:

  • Radio: there is an option where the Radio group with no initial selection. In this case, the radios could contain errors in case the form Field is mandatory and the user doesn't select one of the radios.
  • Combobox: If the form Field is mandatory and the user leaves the Combobox empty with no selection, would the Combobox contain an error?
  • Lookup: same, in case the form Field is mandatory and the user leaves the Lookup empty with no selection from the menu, would the Lookup contain an error?

Captura de pantalla 2024-04-24 a las 11.02.29.png (1×1 px, 190 KB)

Is there a particular reason why these components haven't incorporated the error state yet?

bmartinezcalvo renamed this task from Include error-hover state in the rest of form components to Include error-hover state in the rest of form components containing error.Wed, Apr 24, 9:03 AM
bmartinezcalvo updated the task description. (Show Details)Wed, Apr 24, 9:05 AM
Volker_E added a comment.Wed, Apr 24, 3:59 PM

While not completed mandatory fields are the most common case for erroneous feedback, error states could also apply to non-mandatory field, for example in an inline validation, where a Combobox would have to include a certain pre-given or pattern-following value (think only letters versus other chars like special characters).

On why mentioned components haven't incorporated the error state yet, I can just speculate, that neither error handling nor validation (which came much later and only limited) were a topic when the components were originally requested.

gerritbot added a comment.Wed, Apr 24, 4:40 PM

Change #1023135 merged by LWatson:

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

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

bmartinezcalvo added a comment.Thu, Apr 25, 6:58 PM

As decided with @CCiufo-WMF I've created this separate task T363515 to discuss and implement the error in Combobox, Lookup, and Radio, since these components don't provide an error state yet.

bmartinezcalvo updated the task description. (Show Details)Thu, Apr 25, 6:59 PM
Maintenance_bot removed a project: Patch-For-Review.Fri, Apr 26, 5:50 PM
SGautam_WMF claimed this task.Mon, Apr 29, 6:07 AM
gerritbot added a comment.Tue, Apr 30, 8:14 PM

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

gerritbot added a project: Patch-For-Review.Tue, Apr 30, 8:14 PM
PatchDemoBot added a comment.Tue, Apr 30, 9:43 PM

Test wiki created on Patch demo by Lwatson7 using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/3f8e64b675/wiki/Main Page

gerritbot added a comment.Wed, May 1, 12:20 AM

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

Maintenance_bot removed a project: Patch-For-Review.Wed, May 1, 12:30 AM
ReleaseTaggerBot added a project: MW-1.43-notes (1.43.0-wmf.4; 2024-05-07).Wed, May 1, 1:00 AM
lwatson edited projects, added Design-System-Team (DST-Sprint-21 (2024-04-15 to 2024-04-26)); removed Design-System-Team.Wed, May 1, 12:37 PM
lwatson moved this task from Committed to Pending Release on the Design-System-Team (DST-Sprint-21 (2024-04-15 to 2024-04-26)) board.
lwatson closed this task as Resolved.Wed, May 1, 12:40 PM
lwatson reopened this task as In Progress.Wed, May 1, 2:38 PM
lwatson edited projects, added Design-System-Team; removed Design-System-Team (DST-Sprint-21 (2024-04-15 to 2024-04-26)).
bmartinezcalvo updated the task description. (Show Details)Wed, May 1, 3:38 PM
CCiufo-WMF moved this task from Backlog to DST-Sprint-22 (2024-04-29 to 2024-05-10) on the Design-System-Team board.Wed, May 1, 4:46 PM
CCiufo-WMF edited projects, added Design-System-Team (DST-Sprint-22 (2024-04-29 to 2024-05-10)); removed Design-System-Team.
CCiufo-WMF moved this task from Committed to In Progress on the Design-System-Team (DST-Sprint-22 (2024-04-29 to 2024-05-10)) board.
bmartinezcalvo updated the task description. (Show Details)Thu, May 9, 1:14 PM
SGautam_WMF updated the task description. (Show Details)Fri, May 10, 7:40 AM

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 updated the task description. (Show Details)Fri, May 10, 7:41 AM
bmartinezcalvo added a comment.Fri, May 10, 9:04 AM
El T363137#9785134, @SGautam_WMF escribió:

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! Next step is preparing the updated images for the "Interaction states" section in these components page sin Codex. Once you prepare the images, let us know and we will include them in Codex.

gerritbot added a comment.Fri, May 10, 12:20 PM

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

[design/codex@main] docs: include error-hover state in select, chip-input, and text-area guidelines

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

gerritbot added a project: Patch-For-Review.Fri, May 10, 12:20 PM
AnneT unsubscribed.Fri, May 10, 1:30 PM
Volker_E updated the task description. (Show Details)Fri, May 10, 7:31 PM
gerritbot added a comment.Fri, May 10, 7:44 PM

Change #1030083 merged by jenkins-bot:

[design/codex@main] docs: include error-hover state in Select, ChipInput and TextArea guidelines

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

gerritbot added a comment.Fri, May 10, 7:54 PM

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

[design/codex@main] ChipInput, styles: Implement error-hover state

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

Volker_E moved this task from In Progress to Code Review on the Design-System-Team (DST-Sprint-22 (2024-04-29 to 2024-05-10)) board.Fri, May 10, 7:55 PM
Volker_E claimed this task.Fri, May 10, 8:31 PM
gerritbot added a comment.Mon, May 13, 10:31 AM

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

[design/codex@main] docs: fix "Interaction states" images in Select, ChipInput and TextArea

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

gerritbot added a comment.Mon, May 13, 1:07 PM

Change #1030906 merged by jenkins-bot:

[design/codex@main] docs: fix "Interaction states" images in Select, ChipInput and TextArea

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

gerritbot added a comment.Wed, May 15, 4:20 PM

Change #1030299 merged by jenkins-bot:

[design/codex@main] ChipInput, styles: Implement error-hover state

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

Maintenance_bot removed a project: Patch-For-Review.Wed, May 15, 4:30 PM
Volker_E updated the task description. (Show Details)Wed, May 15, 4:33 PM
Volker_E moved this task from Code Review to Pending Release on the Design-System-Team (DST-Sprint-22 (2024-04-29 to 2024-05-10)) board.Wed, May 15, 4:57 PM
gerritbot added a comment.Thu, May 16, 12:48 AM

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

[mediawiki/core@master] Update Codex from 1.5.0 to 1.6.0

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

gerritbot added a project: Patch-For-Review.Thu, May 16, 12:48 AM
gerritbot added a comment.Thu, May 16, 1:57 AM

Change #1032095 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from 1.5.0 to 1.6.0

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

Volker_E closed this task as Resolved.Thu, May 16, 2:05 AM
Volker_E removed a project: Patch-For-Review.
Volker_E set the point value for this task to 1.
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL