Add CSS var(--webchat__min-width--message-bubble)
#5321
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changelog Entry
Breaking changes
styleOptions.bubbleMaxWidth
/bubbleMinWidth
is being deprecated in favor ofstyleOptions.bubbleAttachmentMaxWidth
/bubbleAttachmentMinWidth
andstyleOptions.bubbleMessageMaxWidth
/bubbleMessageMinWidth
. The option will be removed on or after 2026-10-08Added
styleOptions.bubbleAttachmentMaxWidth
/bubbleAttachmentMinWidth
andstyleOptions.bubbleMessageMaxWidth
/bubbleMessageMinWidth
, in PR #5321, by @compulimDescription
Adding CSS properties so it can be overridden in CSS than in style options. It can also be in pixel (number) and percentage.
bubbleMaxWidth
/bubbleMinWidth
is being split into attachment and message:bubbleMaxWidth
was honor for both attachment and message, however;bubbleMinWidth
was honor only for attachment, but not messageWe separated them into
bubbleAttachment*Width
andbubbleMessage*Width
for clarity.Design
Allowing to specify min/max bubble width by percentage. Also modified other existing CSS style set to use CSS variables when available.
Specific Changes
styleOptions.bubbleMaxWidth
in favor ofstyleOptions.bubbleAttachmentMaxWidth
andstyleOptions.bubbleMessageMaxWidth
styleOptions.bubbleMinWidth
in favor ofstyleOptions.bubbleAttachmentMinWidth
andstyleOptions.bubbleMessageMinWidth
--webchat__max-width--attachment-bubble
/--webchat__min-width--attachment-bubble
--webchat__max-width--message-bubble
/--webchat__min-width--message-bubble
--webchat__size--avatar
avatarSize
,bubbleMaxWidth
, andbubbleMinWidth
to use its counterpart inCSSTokens
when possible--webchat__padding--regular
has a different value (8px) when using in Fluent theme, compare tostyleOptions.paddingRegular
which is 10px. We cannot use CSS var--webchat__padding--regular
yetCHANGELOG.md
I have updated documentationReview Checklist
Accessibility reviewed (tab order, content readability, alt text, color contrast)Browser and platform compatibilities reviewedz-index
)Documents reviewed (docs, samples, live demo)Internationalization reviewed (strings, unit formatting)package.json
andpackage-lock.json
reviewedSecurity reviewed (no data URIs, check for nonce leak)Tests reviewed (coverage, legitimacy)