Skip to content

Convert tooltip, modal dialog, file attachment and transcript root classes to CSS modules - #5997

Draft
Eugene (OEvgeny) wants to merge 10 commits into
mainfrom
OEvgeny/fix-css-fluent-context-2
Draft

Eugene (OEvgeny) wants to merge 10 commits into
mainfrom
OEvgeny/fix-css-fluent-context-2

Conversation

@OEvgeny

@OEvgeny Eugene (OEvgeny) commented Oct 31, 2026 •

Copy link
Copy Markdown
Collaborator

Fluent styles some webchat__* classes from emotion style sets, which a CSS module theme cannot reach.

Changelog Entry

Changed

  • Converted the tooltip, modal dialog, file attachment and transcript root classes to CSS Modules, keeping their webchat__ class names, so Fluent styles them through the CSS module theme, in PR #5997, by @OEvgeny

Removed

  • 💥 Deprecated the modalDialog and tooltip style set entries, which no longer affect rendering, in PR #5997, by @OEvgeny

Description

These 22 classes now come from CSS modules and keep their webchat__ names. Fluent styles 19 of them through <CSSModuleThemeComposer>.

styleSet.modalDialog and styleSet.tooltip no longer apply; style webchat__modal-dialog and webchat__tooltip instead. Both entries go on or after 2028-10-16.

Design

  • fileContent and root style set entries read style options and stay applied

Specific Changes

  • CSS modules: Tooltip, Popover (style set entries @deprecated), FileContent, BasicTranscript, BasicWebChat, Composer, ActivityRow, FocusTrap
  • ViewCodeDialog: out-specifies the modal dialog rules
  • Fluent: these rules join the override module from Fluent: style Web Chat elements through the CSS module theme #5993
  • No snapshot changes in html2
  • I have added tests and executed them locally
  • I have added .changelog/<PR#>-<slug>.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)

Eugene Olonov added 10 commits October 31, 2026 11:17
… CSS module theme

The tooltip keeps its webchat__tooltip class names through webChatPrefixedClassName.
…h the CSS module theme

The dialog keeps its webchat__modal-dialog class names through webChatPrefixedClassName,
so ViewCodeDialog.module.css and tests still select them.
…Fluent through the CSS module theme

FileContent's local styles moved to FileContent.module.css; its class names keep the webchat__ prefix,
so the option-driven "fileContent" style set entry still applies the style options and nothing renders differently.
…style them through the CSS module theme

basic-transcript, __scrollable, __filler (BasicTranscript local styles), __activity-body (ActivityRow)
and focus-trap (FocusTrap) come from CSS modules and keep their webchat__ class names, which code
and tests still query.
…odules and style them through the CSS module theme

webchat__surface (BasicWebChat local styles; the option-driven root style set entry stays) and
webchat__css-custom-properties (Composer local styles) come from CSS modules and keep their names;
CSSCustomPropertiesContainer still selects the latter for the style options.
…eason, as in the activity button

FileContent, ActivityRow and FocusTrap declared local names for themes with ":not(*)" rules. They now use the
declaration that the build strips once the class map is built.
… longer used for rendering

Like the entries in #5881: customizing them has no effect, and their styles are in Popover.module.css and
Tooltip.module.css.
@OEvgeny
Eugene (OEvgeny) force-pushed the OEvgeny/fix-css-fluent-context-2 branch from 9b130dd to cb28b4e Compare October 31, 2026 18:24

This branch has not been deployed

No deployments
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.

1 participant