Adaptive Card 1.2 style "positive" and "destructive" is not working

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 https://github.com/microsoft/AdaptiveCards/issues/2444.

[Bug]

[DesignPolice]

@compulim we selected a hover color for the blue, (you are correct the red is very strong), but I will address all of the colors and buttons in the Fluent update to WebChat. I’m waiting on some accessibility changes from the Fabric team, it failed on many levels. They should update in a few weeks. So one set of changes instead of lots of little ones. I will keep you posted on that status.

[corinagum]

@tdurnford already had a convo with @DesignPolice afaik