Add nub to chat bubbles

[compulim]

Fixes #1658.

Changelog Entry

• Added bubble nub and style options, by @compulim, in PR #2137

Description

Bubble nub is a popular ask from the community. We have added a nub which can be customized by its size, alignment, and offset to the corner.

• New styleOptions introduced
  • bubbleNubSize and bubbleFromUserNubSize is a number in pixels
  • bubbleNubOffset and bubbleFromUserNubOffset can be either
    • "bottom" or -0
    • "top" or 0
    • A positive number means offset from top
    • A negative number means offset from number
  • bubbleFromUserNubSize, bubbleFromUserNubOffset
• styleOptions renamed or modified
  • bubbleBorder now becomes bubbleBorderColor, bubbleBorderStyle, and bubbleBorderWidth
    • Same for bubbleFromUserBorder
    • Instead of able to style 4 borders individually, you can only style all 4 borders at once from now on

Specific Changes

---

• Testing Added

[corinagum]

I think we're going to need documentation on this either in defaultStyleOptions or in our branding styling sample.

[coveralls]

Coverage increased (+1.2%) to 64.541% when pulling 484c677 on compulim:feat-bubble-nub into 84d194b on microsoft:master.

[corinagum]

Is this type of nub supported?

[compulim]

Is this type of nub supported?

This one is not supported. Would need a totally different way to layout, but it seems fun extension to this PR. Thanks for sharing.

[corinagum]

I'm not a huge fan of the styling of the nub. :/ Did you do a design pass for this? Maybe discuss with @DesignPolice to see what changes might happen with the Fluent update?

[compulim]

Talked to @DesignPolice before about the nub design and he is good with the current one.

[alokraj68]

This should be having a middle option like the top and bottom right? In V3 it was in the middle of the blob.

[arman-g]

Hi, is this spouse to work with CDN? I am using CDN v4.6.0 and these options do not work:

bubbleNubOffset: 'bottom',
bubbleNubSize: 10,

but these do work:

bubbleFromUserNubOffset: 'bottom',
bubbleFromUserNubSize: 10,

What am I doing wrong or is it a bug?

[corinagum]

You'll have to also add showNub: true to your style options

[arman-g]

@corinagum I did add showNub: true but it did not help.

[corinagum]

@arman-g thanks. Odd that it's working for user but not bot. Could you file an issue so I can add it to the investigate list? We have several issues up in the air right now but I'll get to this asap.

[arman-g]

@corinagum just did issue #2667