[Eugene (OEvgeny)]

Continues the CSS Modules migration (#6024, #6028, #6030, #6031, #6032) with the send box layout and text box.

Changelog Entry

Changed

• Converted the send box layout and text box to CSS Modules with webchat__ class names and their style options to custom properties, in PR #6036, by @OEvgeny

Removed

• 💥 Deprecated the autoResizeTextArea, dictationInterims, sendBox and sendBoxTextBox style set entries, which no longer affect rendering, in PR #6036, by @OEvgeny

Description

The send box layout, text box, dictation interims, drop zone and submit error message move from emotion to CSS Modules without snapshot changes. Their 10 style options become custom properties, and 4 style set entries are deprecated.

Design

• Every webchat__ class stays on its element; the dictation interims <p> gets webchat__dictation-interims, and its status/dictating classes stay. Toolbar buttons and suggested actions (later stages) are placed with :global(.webchat__…).
• Fluent's webchat__send-box__attachment-bar class is left as is: the removed rule never matched it.
• sendBoxTextColor set to undefined or '' on purpose: the single-line input now inherits the page's text color, as the multi-line one already did, instead of the browser default.

Specific Changes

• SendBox/SendBox.module.css: 6 regions, one per component
• CSSCustomPropertiesContainer.tsx, CustomPropertyNames.ts: 10 new properties
• BasicSendBox, TextBox, AutoResizeTextArea, DictationInterims, DropZone, SendBoxComposer: useStyles()
• createStyleSet.ts, 4 StyleSet/*.ts: @deprecated
• sendBox/focusSendBackToSendBox.html: page CSS instead of a styleSet override; same snapshot
• styleOptions/sendBox.html: every option, snapshots 1–2 (same on main)
• styleOptions/sendBox.disabled.html: disabled text color (same on main)

• 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)

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota. Try requesting a review at a lower effort level.