Page MenuHomePhabricator

Include error state in Combobox, Lookup, and Radio components
Closed, ResolvedPublic2 Estimated Story Points

Description

Background

At the moment, Combobox, Lookup, and Radio doesn't provide error state. Since any component contained within Field could contain errors, we will need to include the error state in:

  • 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)

We need to include the error states in these components.

User stories

  • As a user, I need to be informed when a Combobox, Lookup, or Radio contains errors in a form.

Known use cases

Describe known use cases for this component, including the project, team, and timeline

Design spec

Acceptance criteria (or Done)

Design

  • Design the Figma spec sheets:
    • Combobox
    • Lookup
    • Radio
  • 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, including the error and error-hover states:
    • Combobox
    • Lookup
    • Radio
  • Update the Interaction States images in the Guidelines

Code

  • Include the error states in the Codex components:
    • Combobox - error and error-hover
    • Lookup - error and error-hover
    • Radio - error-default, error-hover, error-active, and error focus
  • Add configurable demos that display the error states

Event Timeline

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

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

[design/codex@main] [WIP] Radio: Add error handling

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

As decided during the DST Sprint Planning, we will work on the design during this next sprint but we will implement these changes in a future sprint.

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

[design/codex@main] [WIP] docs: include error states in combobox, lookup, and radio

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

I've included the error states in Combobox, Lookup, and Radio in this Figma branch. And I've also updated these components guidelines including the error state in this patch. We will merge both the Figma branch and the patch once the implementation part has been completed.

@CCiufo-WMF since we decided to just work on the design part of this task during the sprint, should we move this task outside the sprint now until we decide to work on the implementation?

I've included the error states in Combobox, Lookup, and Radio in this Figma branch. And I've also updated these components guidelines including the error state in this patch. We will merge both the Figma branch and the patch once the implementation part has been completed.

@CCiufo-WMF since we decided to just work on the design part of this task during the sprint, should we move this task outside the sprint now until we decide to work on the implementation?

Yes that sounds good.

CCiufo-WMF triaged this task as Medium priority.Aug 1 2024, 5:20 PM

@Volker_E Hey, I noticed you have an open patch for Radio so I'll work on Combobox and Lookup if that's okay with you.

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

[design/codex@main] Combobox, Lookup: error styles

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

@lwatson since Radio, Combobox, and Lookup don't provide a configurable demo I cannot check if their error states work properly. Is there a way to include a configurable demo for these components as we do in Checkbox?

Another observation I've made is that if you don't select any radio in the demo with custom input, all radios should display the error state when you click the "Submit" button.

Captura de pantalla 2024-08-30 a las 17.05.36.png (584×1 px, 73 KB)

Note: I updated the "Interactive states" guidelines including the error state in Combobox, Lookup, and Radio components in this patch. Make sure to merge it once your patch is merged.

@lwatson the error states in both Radio and Combobox and Lookup demos look good. So I'm moving the task to Code Review.

My only observation is that, when selecting a value in either Combobox or Lookup configurable demos, the error should disappear. But I don't think this is a blocker for merging the patch.

@lwatson the error states in both Radio and Combobox and Lookup demos look good. So I'm moving the task to Code Review.

My only observation is that, when selecting a value in either Combobox or Lookup configurable demos, the error should disappear. But I don't think this is a blocker for merging the patch.

@bmartinezcalvo Ok great! Radio, Combobox, and Lookup have a configurable demo that displays the error state. There's no logic in the config demo to remove the error state based on the user's selection. The config demo remains in an error state when the error is toggled on. We can demonstrate logic that adds/removes error state in another demo like Form Field. If this type of demo is needed, we can create a follow-up task.

I think a follow-up patch that makes these new demos a little more meaningful (for example, by including a status message that shows up when the components are in the "error" state) would be a good idea. But I agree that this is not blocking for now.

Change #1067451 merged by jenkins-bot:

[design/codex@main] demo, Combobox, Lookup: error state

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

Change #1070656 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from v1.11.1 to v1.12.0

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

Test wiki created on Patch demo by EGardner (WMF) using patch(es) linked to this task:
http://patchdemo.wmcloud.org/wikis/6bc5837bc4/w/

Change #1070656 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v1.11.1 to v1.12.0

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

AnneT reopened this task as In Progress.Sep 10 2024, 7:47 PM

Hey @bmartinezcalvo, I was just chatting with @lwatson about the patch to add error styles to Radio and was wondering if we could revisit the design for the Radio in a checked-error-focus state. The design shows this:

image.png (168×354 px, 11 KB)

However, that blue border on the outside is going to be really hard to achieve in the code. Am I remembering correctly that Radios really shouldn't be both checked and in an error state anyway? If so, I don't think we should spend too much more time trying to get the checked-error styles right.

I would recommend we do one of the following for checked-error:

Show the normal focus styles, but in error-red instead of blue:

image.png (116×186 px, 8 KB)

Show the normal focus styles. This is what we do for TextInputs that are in an error state and are focused, because the focus implies that the user is trying to fix the error:

image.png (92×202 px, 8 KB)

What do you think?

El T363515#10135625, @AnneT escribió:

Hey @bmartinezcalvo, I was just chatting with @lwatson about the patch to add error styles to Radio and was wondering if we could revisit the design for the Radio in a checked-error-focus state. The design shows this:

image.png (168×354 px, 11 KB)

However, that blue border on the outside is going to be really hard to achieve in the code. Am I remembering correctly that Radios really shouldn't be both checked and in an error state anyway? If so, I don't think we should spend too much more time trying to get the checked-error styles right.

@AnneT I agree that an error-selected state in Radio will not be a common (or maybe even existing) case. Anyway, the error-selected state is implemented in Checkbox, where the blue border is used when focused. If the error within a Checkbox (and I assume within a Radio as well) is automatically fixed when selecting that, I guess we could remove the error-selected state from both Checkbox and Radio.

Grabaciondepantalla2024-09-11alas12.25.58-ezgif.com-video-to-gif-converter.gif (337×600 px, 211 KB)

@bmartinezcalvo Another option: Anne suggested the checked-error-focus state as a red-colored version of the checked-default-focus state. (Preview: https://1024536--wikimedia-codex.netlify.app/components/demos/radio.html#configurable)

radio-default-checked-focus.png (430×920 px, 31 KB)

radio-error-checked-focus.png (352×820 px, 29 KB)

El T363515#10137699, @lwatson escribió:

@bmartinezcalvo Another option: Anne suggested the checked-error-focus state as a red-colored version of the checked-default-focus state. (Preview: https://1024536--wikimedia-codex.netlify.app/components/demos/radio.html#configurable)

radio-default-checked-focus.png (430×920 px, 31 KB)

radio-error-checked-focus.png (352×820 px, 29 KB)

@lwatson @AnneT some time ago we decided to use a blue border to unify all the focus states across components, even in destructive and error states where we used to use red.

Captura de pantalla 2024-09-11 a las 17.40.41.png (59×124 px, 5 KB)

Therefore, if we use this red border in the focused error-selected Radio, this would be the only case in Codex where we use a red border instead of a blue one. So, in case we implement this error-selected state in Radio, I recommend using a blue border instead, similar to the focused error-selected Checkbox.

Captura de pantalla 2024-09-11 a las 17.31.55.png (469×720 px, 36 KB)

Ok, if the other components already have the blue border and red background, it seems like we should make the Radio match. Thanks @bmartinezcalvo!

@lwatson I found a way to achieve this for the checked-error-focus state of the radio:

&:checked {
    &:focus:not( &:active ) + .cdx-radio__icon {
        border-width: @border-width-base;

        &::before {
            border-color: @border-color-destructive;
            border-width: 4px; // There's no token for this; we'd need a component-level one
            top: @spacing-12;
            right: @spacing-12;
            bottom: @spacing-12;
            left: @spacing-12;
        }
    }
}

Please try this out and make sure it doesn't interfere with any of the other states!

Ok, if the other components already have the blue border and red background, it seems like we should make the Radio match. Thanks @bmartinezcalvo!

@lwatson I found a way to achieve this for the checked-error-focus state of the radio:

&:checked {
    &:focus:not( &:active ) + .cdx-radio__icon {
        border-width: @border-width-base;

        &::before {
            border-color: @border-color-destructive;
            border-width: 4px; // There's no token for this; we'd need a component-level one
            top: @spacing-12;
            right: @spacing-12;
            bottom: @spacing-12;
            left: @spacing-12;
        }
    }
}

Please try this out and make sure it doesn't interfere with any of the other states!

@AnneT thanks, the code works as expected!

Change #1024536 merged by jenkins-bot:

[design/codex@main] Radio: Add error handling

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

Change #1056224 merged by jenkins-bot:

[design/codex@main] docs: include error states in Combobox, Lookup, and Radio

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

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

[mediawiki/core@master] Update Codex from v1.12.0 to v1.13.0

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