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?

In T363515#10009578, @bmartinezcalvo wrote:

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.

@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.

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.

In T363515#10110557, @bmartinezcalvo wrote:

@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

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:

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.

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

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)

@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.

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.

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!

In T363515#10137969, @AnneT wrote:

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

Test wiki created on Patch demo by LWatson-WMF using patch(es) linked to this task:
http://patchdemo.wmcloud.org/wikis/ceebb67189/wiki/Main Page