Better visual feedback on button click.

[matthidinger]

@vijaysaimutyala commented on Fri Aug 30 2019

This is for the card using the WebChat renderer. The earlier version of the Adaptive cards used give a nice visual feedback to the user whether the button was clicked or not. But with the latest updates, the feedback is no longer present. It just shows a outline around the button in accent color which is not very helpful.

Old Adaptive Cards

New Adaptive Cards

Users are not able to understand whether they've clicked the button or not. Sometimes when the response from the bot needs some time to process and respond, the user without the help of feedback is clicking the button again before the response from bot appears. Any suggestions on this would be helpful.

---

@matthidinger commented on Mon Sep 16 2019

@compulim @corinagum can you folks take a look at this?

[corinagum]

@matthidinger thanks for the transfer.

Rather than just Adaptive Cards, I would say this is a potential improvement we can make to the entire Web Chat app. We intentionally removed the pointer cursor from buttons in #1819 a few months ago, but that doesn't mean we can't improve the :active pseudo class UX throughout the project.

potential design questions:

1. Should this take the accent color from styleOptions? or
2. Should this be a new style option like buttonActiveBgColor, buttonActiveTextColor, buttonActiveOutline etc.
3. Do we allow differentiation between the styling of Adaptive Cards buttons and other buttons?

[vijaysaimutyala]

@matthidinger @corinagum Do you think there's some quick hack that could bring back the visualization ?

[corinagum]

@vijaysaimutyala you can consider adding to your web page's CSS specification to the button you want to modify. To do this you would need to trace the DOM to the button, brief example below:
(hacky workaround)

.main > div > div > ... .ac-pushButton &:active {
    background-color: #etcetc
}

Then once Web Chat's changes are in you can just delete this CSS. :)

[vijaysaimutyala]

Thanks @corinagum

[corinagum]

The content of the card belongs to adaptive cards team, so it would be better to keep the styling responsibility on that of the Adaptive Card templating.