Repository navigation
Convert the scroll to end button and the file attachment to CSS modules - #6050
Merged
Merged
Conversation
added 11 commits
November 12, 2026 01:10
New pages, with snapshots written on main (before the conversion): - styleOptions/transcriptOverlayButton: every scroll to end button option, idle, focused, focused and hovered, hovered. - styleOptions/transcriptOverlayButton.undefined: undefined focus and hover options fall back to the hover background or the base colors. - styleOptions/fileContent: padding, font, accent and bubble text color on a downloadable file and a file without a URL, idle and with the link focused. - rtl/fileContent: the download icon on the left in right-to-left. - scrollToEndButton/forcedColors: the button border in forced colors.
Moves the scrollToEndButton and fileContent style set entries to ScrollToEndButton.module.css and FileContent.module.css, with the webchat__ class names (useStyles with webChatPrefixedClassName). - scrollToEndButtonFontSize becomes --webchat__font-size--scroll-to-end-button (numbers get px through toLength()); the other options reuse existing custom properties. - The hover and focus backgrounds of the transcript overlay button are unset when not set, so the button falls back to the hover or base background as the emotion rules did. A focus:hover rule keeps the hover background when the focus background is not set. - The 2 entries are @deprecated (removal on or after 2028-10-16).
The download icon gets margin-inline-start instead of margin-left, or margin-right with the webchat__fileContent__downloadIcon--rtl class, so FileContent no longer needs useDirection(). Same pixels (rtl/fileContent).
With the Fluent theme, the file attachment now uses Fluent's padding token (8 pixels instead of 10) for itself and its download icon, so the attachment is 4 pixels shorter (8 with a download icon) and the transcript above it moves by the same amount. Fluent's font token also applies, which renders the same in the test browser. - attachment/file.noName.fluent: snapshot 1 - side-by-side/transcript.navigation.fluent(.dark): snapshots 1-9
…rounds #6044 added orUnset() while this branch wrote the same fallback inline as `|| 'unset'`. Same output (an unset option still becomes `unset`, so the module's var() fallback applies), one helper for every state option.
William Wong (compulim)
previously approved these changes
Nov 13, 2026
Eugene (OEvgeny)
marked this pull request as ready for review
November 13, 2026 01:47
Eugene (OEvgeny)
requested review from
Chris Whitten (cwhitten) and
Thomas Durnford (tdurnford)
as code owners
November 13, 2026 01:47
Contributor
There was a problem hiding this comment.
🟢 Approval recommended
There are no active review issues for the scroll-to-end button and file attachment CSS Modules migration.
No open issues 🎉
What changed in this PR
Continues Web Chat’s CSS Modules migration by moving scroll-to-end button and file attachment styling out of Emotion style sets, while retaining readable webchat__ class names and supporting Fluent theme values.
Changes:
- Moves component styles into CSS Modules, including logical spacing for right-to-left attachments.
- Adds the scroll button font-size custom property, updates hover/focus background fallbacks, and deprecates the two legacy style-set entries.
- Adds five HTML regression pages covering style options, interaction states, forced colors, and right-to-left layout.
| File | Description |
|---|---|
packages/component/src/Styles/StyleSet/ScrollToEndButton.ts |
Documents the legacy style factory’s deprecation. |
packages/component/src/Styles/StyleSet/FileContent.ts |
Documents the legacy style factory’s deprecation. |
packages/component/src/Styles/CustomPropertyNames.ts |
Adds the scroll button font-size property name. |
packages/component/src/Styles/CSSCustomPropertiesContainer.tsx |
Emits font size and normalizes unset state backgrounds. |
packages/component/src/Styles/createStyleSet.ts |
Marks both migrated style-set entries deprecated. |
packages/component/src/Middleware/ScrollToEndButton/ScrollToEndButton.tsx |
Uses CSS Module classes instead of the style set. |
packages/component/src/Middleware/ScrollToEndButton/ScrollToEndButton.module.css |
Defines button styles, state fallbacks, and forced-colors rules. |
packages/component/src/Attachment/FileContent.tsx |
Removes legacy style-set and RTL modifier usage. |
packages/component/src/Attachment/FileContent.module.css |
Adds custom-property styling and logical icon spacing. |
.changelog/6050-fix-css-modules-overlays-file.md |
Records the migration and compatibility changes. |
__tests__/html2/styleOptions/transcriptOverlayButton.undefined.html |
Covers unset focus and hover option fallbacks. |
__tests__/html2/styleOptions/transcriptOverlayButton.html |
Covers custom button styling and state precedence. |
__tests__/html2/styleOptions/fileContent.html |
Covers attachment styling and focused download links. |
__tests__/html2/scrollToEndButton/forcedColors.html |
Covers button appearance in forced-colors mode. |
__tests__/html2/rtl/fileContent.html |
Covers attachment layout and spacing in RTL. |
Review effort: Balanced
…-file' into OEvgeny/fix-css-modules-overlays-file
Collaborator
Author
|
Since your approval I only re-took snapshots: 183 snapshots in 31 |
William Wong (compulim)
approved these changes
Nov 13, 2026
2 of 11 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
Changed
webchat__class names and their style options to custom properties, in PR #6050, by @OEvgenyRemoved
fileContentandscrollToEndButtonstyle set entries, which no longer affect rendering, and removed thewebchat__fileContent__downloadIcon--rtlclass, in PR #6050, by @OEvgenyDescription
The scroll to end button and the file attachment move from emotion to CSS Modules with the same pixels in the default theme. With Fluent, they now use Fluent's padding (8 instead of 10 pixels) and font.
Design
:focus:hoverrule included).undefinedor''inherit instead of using browser defaults.Specific Changes
ScrollToEndButton.module.css(new),FileContent.module.css: moved rules,margin-inline-startinstead of--rtlCSSCustomPropertiesContainer.tsx: font size property;orUnset()(Convert the send box buttons to CSS modules #6044) for hover/focus backgroundsstyleOptions/,rtl/,scrollToEndButton/: snapshots written onmainside-by-side/pages: the Fluent file attachment is 4 pixels shorter.changelog/<PR#>-<slug>.mdReview Checklist
z-index)package.jsonandpackage-lock.jsonreviewed