Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add CSS var(--webchat__min-width--message-bubble) #5321

Merged
merged 8 commits into from
Oct 8, 2024

Conversation

compulim
Copy link
Contributor

@compulim compulim commented Oct 8, 2024

Changelog Entry

Breaking changes

  • styleOptions.bubbleMaxWidth/bubbleMinWidth is being deprecated in favor of styleOptions.bubbleAttachmentMaxWidth/bubbleAttachmentMinWidth and styleOptions.bubbleMessageMaxWidth/bubbleMessageMinWidth. The option will be removed on or after 2026-10-08

Added

  • Added styleOptions.bubbleAttachmentMaxWidth/bubbleAttachmentMinWidth and styleOptions.bubbleMessageMaxWidth/bubbleMessageMinWidth, in PR #5321, by @compulim
  • (Experimental) Added more CSS variables support, in PR #5321, by @compulim

Description

Notes: CSS variables is still in experimental phase.

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 message

We separated them into bubbleAttachment*Width and bubbleMessage*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

  • Deprecated styleOptions.bubbleMaxWidth in favor of styleOptions.bubbleAttachmentMaxWidth and styleOptions.bubbleMessageMaxWidth
  • Deprecated styleOptions.bubbleMinWidth in favor of styleOptions.bubbleAttachmentMinWidth and styleOptions.bubbleMessageMinWidth
  • Added CSS variables
    • --webchat__max-width--attachment-bubble/--webchat__min-width--attachment-bubble
    • --webchat__max-width--message-bubble/--webchat__min-width--message-bubble
    • --webchat__size--avatar
  • Updated all Emotion style set that use avatarSize, bubbleMaxWidth, and bubbleMinWidth to use its counterpart in CSSTokens when possible
    • --webchat__padding--regular has a different value (8px) when using in Fluent theme, compare to styleOptions.paddingRegular which is 10px. We cannot use CSS var --webchat__padding--regular yet
  • I have added tests and executed them locally
  • I have updated CHANGELOG.md
  • I have updated documentation

Review Checklist

This section is for contributors to review your work.

  • Accessibility reviewed (tab order, content readability, alt text, color contrast)
  • Browser and platform compatibilities reviewed
  • CSS styles reviewed (minimal rules, no z-index)
  • Documents reviewed (docs, samples, live demo)
  • Internationalization reviewed (strings, unit formatting)
  • package.json and package-lock.json reviewed
  • Security reviewed (no data URIs, check for nonce leak)
  • Tests reviewed (coverage, legitimacy)

@compulim compulim marked this pull request as ready for review October 8, 2024 00:32
@compulim compulim changed the title [WIP] Add CSS var(--webchat__min-width--bubble) [WIP] Add CSS var(--webchat__min-width--message-bubble) Oct 8, 2024
@compulim compulim changed the title [WIP] Add CSS var(--webchat__min-width--message-bubble) Add CSS var(--webchat__min-width--message-bubble) Oct 8, 2024
@compulim compulim merged commit 4880020 into microsoft:main Oct 8, 2024
25 checks passed
@compulim compulim deleted the feat-css-bubble-min-width branch October 8, 2024 20:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants