Repository navigation
Convert the toasts to CSS modules - #6031
Merged
Merged
Conversation
added 4 commits
November 9, 2026 00:40
Moves the toast and toaster style set entries, and the local emotion styles of
BasicToast and BasicToaster, to Toast/Toast.module.css, with the webchat__
class names (useStyles with webChatPrefixedClassName).
- The 15 toast style options become custom properties (4 names were reserved);
lengths get px through toLength().
- Classes without a rule stay plain strings: webchat__toast__icon,
webchat__toaster__expandLevelIcon, webchat__toaster__notifications.
- Dropped the toaster's "> ul { height: 0 }" rule: the list is a div and is not
rendered while collapsed, so it never matched.
- The toaster header keeps text-align: left, as on main.
- The 2 entries are @deprecated (removal on or after 2028-10-16).
- New test: styleOptions/toast.html sets every toast option.
On main, the toaster had no dir, so in a right-to-left locale it stayed left-to-right (level icon on the left, dismiss and expand buttons on the right), unlike the transcript, send box and connectivity status. When a host page set dir="rtl", the header's text-align: left put its text next to the expand button instead of the level icon. The toaster now sets dir from useDirection() and its header uses text-align: start. New test: rtl/toaster.html.
Eugene (OEvgeny)
marked this pull request as ready for review
November 9, 2026 10:23
Eugene (OEvgeny)
requested review from
William Wong (compulim),
Chris Whitten (cwhitten) and
Thomas Durnford (tdurnford)
as code owners
November 9, 2026 10:23
William Wong (compulim)
approved these changes
Nov 10, 2026
This was referenced Nov 10, 2026
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 #6031, by @OEvgenyRemoved
toastandtoasterstyle set entries, which no longer affect rendering, in PR #6031, by @OEvgenyFixed
Description
The toasts move from emotion style sets to CSS Modules without snapshot changes; a second commit makes the toaster follow right-to-left languages.
Design
> ulrule is dropped, as it never matched.useDirection()(the locale or thedirprop), like the transcript and send box, instead of from the host page.Specific Changes
Toast/Toast.module.css: toaster and toastCSSCustomPropertiesContainer.tsx: 15 properties (11 new names)BasicToast.js,BasicToaster.js:useStyles(), toasterdircreateStyleSet.ts,StyleSet/Toast{,er}.ts:@deprecatedstyleOptions/toast.html: all options (same onmain)rtl/toaster.html: mirrored toaster.changelog/<PR#>-<slug>.mdReview Checklist
z-index)package.jsonandpackage-lock.jsonreviewed