Show validation error rect on Toggle and ChoiceSet

[dclaux]

Related Issue

Fixes #4362

Description

A red rectangle is now displayed around Input.Toggle and Input.ChoiceSet (in multiselect and expanded modes) when failing validation.

How Verified

Verified manually in adaptivecards-designer-app

Test card:

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.3",
    "body": [
        {
            "type": "Input.Toggle",
            "title": "New Input.Toggle",
            "id": "a",
            "isRequired": true,
            "errorMessage": "Invalid",
            "label": "Toggle input"
        },
        {
            "type": "Input.ChoiceSet",
            "choices": [
                {
                    "title": "Choice 1",
                    "value": "Choice 1"
                },
                {
                    "title": "Choice 2",
                    "value": "Choice 2"
                }
            ],
            "placeholder": "Placeholder text",
            "isMultiSelect": true,
            "id": "b",
            "label": "Input.ChoiceSet w/multiselect",
            "isRequired": true,
            "errorMessage": "Invalid"
        },
        {
            "type": "Input.ChoiceSet",
            "choices": [
                {
                    "title": "Choice 1",
                    "value": "Choice 1"
                },
                {
                    "title": "Choice 2",
                    "value": "Choice 2"
                }
            ],
            "placeholder": "Placeholder text",
            "style": "expanded",
            "label": "Input.ChoiceSet w/expanded style",
            "isRequired": true,
            "errorMessage": "Invalid",
            "id": "c"
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Action.Submit"
        }
    ]
}

Microsoft Reviewers: Open in CodeFlow

[ghost]

Hi @dclaux. Thanks for helping make the AdaptiveCards JS renderer + tooling better. As additional verification, once the JS build succeeds, please go to the test site to test out your website/designer changes.

[shalinijoshi19]

[shalinijoshi19]

Cool; Verified with the card in the issue to confirm the rectangle as well as the additional warnigs around Labels + RequiredInputs missing