Get proper classes for send box button

[cxbuilders]

Using CSS to style the webchat proves to be really difficult as elements do not have any proper class names when regular CSS is used to style the client. Targeting the attachment icon and still allow it to be turned on and off results in some horrific CSS selectors like;

Attachment Icon .main > div:first-of-type:not(:only-of-type)

Submit Button .main>form+div button

Below a screenshot of the (lack off) classes:

[compulim]

(tl;dr it is fixed in 4.12 for attachment and microphone button, but we still need to work on send button)

In the next version of Web Chat 4.12, you will see both attachment and microphone button has a better class name.

But not for send button (yet).

Styling through CSS is not truly supported given how dynamic Web Chat could be. We recommend you to look at the idiosyncratic styling sample.

https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/02.branding-styling-and-customization/b.idiosyncratic-manual-styles

It is essentially a JS-based CSS stylesheet that we use to applies to each individual component.

@corinagum do we have a work item related to CSS? I think it's good to think about how we should enable developers to customize using CSS. I am thinking about: 1. Revisit all class names with CSS BEM, 2. CSS insertion points, and 3. Inlining CSS vars (to make it work for IE11).

[compulim]

I have updated the issue title to indicate the issue is specifically on send box button (in 4.12).

[cxbuilders]

@compulim I understand the benefit of declarative styling and this is also what we use wherever this is possible. However this will never fully replace CSS styling benefits. I understand that html structure cannot be guaranteed through versions and that's ok. CSS styles are always used in conjunction with a fixed webchat version and upgrading might take a couple of CSS changes.

[corinagum]

@compulim There's nothing off the top of my head, but I can take a look once I've finished my current PR. Adding this item to team discussion for future planning.

[corinagum]

Related: #2389 CSS insertion points

[compulim]

In our test harness, src/elements/sendButton.js.

export default function sendButton() {
  return document.querySelector('.webchat__send-box__button[title="Send"]');
}

Please update to use the new CSS class name.

[corinagum]

Bumping this out of R13 due to time constraints