Skip to content

Add nub to chat bubbles#2137

Merged
compulim merged 21 commits intomicrosoft:masterfrom
compulim:feat-bubble-nub
Jul 18, 2019
Merged

Add nub to chat bubbles#2137
compulim merged 21 commits intomicrosoft:masterfrom
compulim:feat-bubble-nub

Conversation

@compulim
Copy link
Copy Markdown
Contributor

@compulim compulim commented Jul 2, 2019 •
edited
Loading

Fixes #1658.

Changelog Entry

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

image

image

image

Specific Changes

  • Testing Added

@compulim compulim added the 4.6 label Jul 2, 2019
@compulim compulim marked this pull request as ready for review July 10, 2019 22:05
@corinagum
Copy link
Copy Markdown
Contributor

corinagum commented Jul 10, 2019

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

@compulim compulim self-assigned this Jul 12, 2019
@coveralls
Copy link
Copy Markdown

coveralls commented Jul 12, 2019 •
edited
Loading

Coverage Status

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

@corinagum
Copy link
Copy Markdown
Contributor

corinagum commented Jul 15, 2019

image
Is this type of nub supported?

@compulim
Copy link
Copy Markdown
Contributor Author

compulim commented Jul 16, 2019

image
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
corinagum approved these changes Jul 17, 2019
View reviewed changes
Copy link
Copy Markdown
Contributor

@corinagum corinagum left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Comment thread samples/01.a.getting-started-full-bundle/index.html Outdated
Comment thread packages/playground/src/App.js Outdated
Comment thread packages/component/src/Activity/CarouselFilmStrip.js Outdated
Comment thread packages/component/src/Styles/StyleSet/Bubble.js
@compulim
Copy link
Copy Markdown
Contributor Author

compulim commented Jul 18, 2019

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

@compulim compulim merged commit 9d1a9ab into microsoft:master Jul 18, 2019
@compulim compulim deleted the feat-bubble-nub branch July 18, 2019 01:39
@corinagum corinagum mentioned this pull request Jul 19, 2019
Closed
@compulim compulim mentioned this pull request Jul 22, 2019
Closed
This was referenced Oct 23, 2019
Merged
Open
Closed
@alokraj68
Copy link
Copy Markdown

alokraj68 commented Nov 9, 2019

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
Copy link
Copy Markdown

arman-g commented Dec 4, 2019 •
edited
Loading

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?
nub

@corinagum
Copy link
Copy Markdown
Contributor

corinagum commented Dec 4, 2019

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

@arman-g
Copy link
Copy Markdown

arman-g commented Dec 4, 2019 •
edited
Loading

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

nub

@corinagum
Copy link
Copy Markdown
Contributor

corinagum commented Dec 4, 2019

@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
Copy link
Copy Markdown

arman-g commented Dec 4, 2019

@corinagum just did issue #2667

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@a-b-r-o-w-n a-b-r-o-w-n Awaiting requested review from a-b-r-o-w-n a-b-r-o-w-n is a code owner

@cwhitten cwhitten Awaiting requested review from cwhitten cwhitten is a code owner

@tonyanziano tonyanziano Awaiting requested review from tonyanziano

1 more reviewer

@corinagum corinagum corinagum approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@compulim compulim

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Add message bubble arrows CSS

5 participants

@compulim @corinagum @coveralls @alokraj68 @arman-g