Description

Styling an action in Adaptive Card using "positive" and "destructive".

You can copy the JSON below, save it to a file, then upload it to MockBot. MockBot will render it as an Adaptive Card.

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "text": "Hello, World!"
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Submit",
            "style": "destructive"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}

Screenshots

Screenshot from Adaptive Card Designer

Screenshot from Web Chat Playground

Screenshot of the DOM tree

As you can see here, there is a class named style-destructive. I believe this will turn the button red. But looks like we did not load the CSS required for this style.

Version

I am using "master" branch of Web Chat. Verified it is using AC 1.2 package.

To Reproduce

Steps to reproduce the behavior:

1. Save the JSON above and name it destructive.json
2. Navigate to https://webchat-playground.azurewebsites.net/
3. Uplaod the JSON file to MockBot

Expected behavior

MockBot should reply with an Adaptive Card with the button marked as red. Similar to the screenshot from Adaptive Card Designer.

Additional context

It could be Adaptive Card 1.2 has a new CSS and we did not load the CSS. This is because there is a class "style-destructive" but it was not styled by any CSS rules.

Feature list on Adaptive Card 1.2 include "action sentiment", see it at microsoft/AdaptiveCards#2444.

[Bug]