Redesign the base components and adopt the design system icons - #1805
Open
Conversation
Rebuild the Compose primitives on the StreamDesign tokens, following the chat SDK conventions, and replace the Material icons with the shared design system icon set. Icons - Add 134 `stream_design_ic_*` vector drawables converted from the design-system-tokens repository (core and video line sets plus `message-bubbles-fill`), source branch `assets/icon-namespaces` at a7750ef58d89992a0a5e6c12500d74f4d62d371b (PR #67). ICONS.md documents the pipeline. The compose module no longer depends on material-icons-extended. The ui-core `stream_video_ic_*` icons stay for the XML module and the notifications. Primitives - StreamButton, StreamTextButton and StreamIconButton with StreamButtonStyle, StreamButtonStyleDefaults and StreamButtonSize. - StreamDialog with its own scrim and stacked actions, StreamTextField on BasicTextField with error text and semantics, StreamBadgeBox on the badge tokens. - New internal primitives for the upcoming controls sheet: StreamScrim, StreamBottomSheet (Material 3 ModalBottomSheet), StreamListItem, StreamMenuHeading and StreamMenuSeparator. - Avatars use the avatar tokens, a subtle border and size based initials typography. VideoComponentFactory gains UserAvatar with UserAvatarParams and the SDK call sites go through it. - Indicators drawn over the dark overlay use the on-accent color in both palettes. Removed - The button, dialog, text field and badge style classes and providers, the toggle and drawable button variants, StreamDialogPositiveNegative and StreamOutlinedTextField. CompositeStyleProvider keeps only the icon and text styles until AND-1435 retires it. - The shape, color and tint parameters of the call action composables; they take a StreamButtonStyle and a StreamButtonSize instead. ChatDialogAction now emits ChatDialog instead of CancelCall. - UserAvatar textOffset; textStyle is nullable and defaults by size. - ParticipantAction.icon is a drawable resource id. Tests - Previews and snapshot tests rewritten with light and dark coverage for every primitive. Goldens re-recorded. Redundant snapshots removed (participants 7, screen sharing for myself, audio call without header, outgoing call audio type, incoming call details video, local participant tile, cancel call action).
Contributor
PR checklist ✅All required conditions are satisfied:
🎉 Great job! This PR is ready for review. |
Contributor
Author
|
@CodeRabbit review |
Contributor
|
Contributor
SDK Size Comparison 📏
|
Two regressions found by the E2E suite on the redesigned primitives. StreamTextField wrapped the field in a Column that carried the caller's modifier, so a test tag or a weight landed on a layout node instead of the editable one. UiAutomator could not type the call id into `Stream_CallIdInputField`, and the re-entry tests joined a fresh random call. The field is the root node again and the error message is part of its decoration box. StreamDialog filled the whole window to draw its own scrim, so the platform could not move it above the keyboard and the "Login" button of the email dialog stayed hidden. The dialog is a wrap-content platform dialog again, dimmed by the platform; StreamScrim stays for in-layout overlays.
Adds snapshots for the screen share toggle, the pending toggle state in every button size, the scrim click variant, and the one, two and deprecated overload variants of the participant avatars. Raises the new code coverage above the SonarCloud gate.
|
andremion
marked this pull request as ready for review
September 3, 2026 14:14
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
1 participant
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.
Stacked on #1803. Merge after parent, then retarget to
develop-v2.Goal
Closes AND-1420 - rebuild the Compose primitives on the StreamDesign tokens, following the chat SDK conventions, and replace the Material icons with the shared design system icon set.
Implementation
stream_design_ic_*vector drawables converted from the design-system-tokens repository (core and video line sets plusmessage-bubbles-fill), source branchassets/icon-namespacesata7750ef58d89992a0a5e6c12500d74f4d62d371b(design-system-tokens PR [38] refactor Outgoing & Incoming flows to represent call-engine state #67, still open).ICONS.mddocuments the pipeline. The compose module dropsmaterial-icons-extended; the ui-corestream_video_ic_*icons stay for the XML module and notifications.StreamButton,StreamTextButton,StreamIconButtonwithStreamButtonStyle,StreamButtonStyleDefaults(primary, secondary, destructive in solid, outline and ghost) andStreamButtonSize(32, 40, 48 with a 48dp touch target).StreamDialogdraws its own scrim and stacks full width actions;StreamTextFieldis aBasicTextFieldwith the outlined field, focus and error borders, error text and error semantics;StreamBadgeBoxuses the badge tokens.StreamScrim,StreamBottomSheet(Material 3ModalBottomSheet, adds the material3 dependency as chat did),StreamListItem,StreamMenuHeading,StreamMenuSeparator.VideoComponentFactory.UserAvatarwithUserAvatarParamsis new and the SDK call sites go through it.textOnAccentin both palettes, per the Figma label spec.StreamButtonStyleand aStreamButtonSizeinstead of shape, color and tint parameters, get content descriptions (four new ui-core strings), andChatDialogActionemitsChatDialoginstead ofCancelCall.StreamDialogPositiveNegative,StreamOutlinedTextField,UserAvatar.textOffset.CompositeStyleProviderkeeps only the icon and text styles until AND-1435 retires it.ParticipantAction.iconis a drawable id. Full list in the API dump diff, to be collected for the migration guide (AND-1436).ScreenShareToggleActionstill emitsClosedCaptionsAction(new coreToggleScreenShareaction planned in AND-1428);VideoTheme.stylesis no longer read by anything (AND-1435).🎨 UI Changes
Every base component has light and dark goldens; the snapshot diff is the review artifact. New goldens: button styles enabled and disabled, button sizes, text fields, list items, scrim, bottom sheet. The redesigned dialog, badge and avatar goldens replace the old ones, and every screen golden changed because of the icon swap. Ringing controls render at the 48dp
Largesize (was 72dp) until the ringing designs land (AND-1433).Testing
Manual: open the demo, start a call, check the control bar icons and the leave confirmation dialog; open the participants list and the participant "more" popup (list items); open the feedback dialog from the menu and submit an invalid email to see the error state; toggle the microphone in the lobby and check the label indicator in light mode.
Ran locally, all green:
spotlessCheck,apiCheck,testDebugUnitTestandverifyPaparazziDebugon the compose module, compile of the demo app (development flavor) and the four tutorials, demo unit tests. Redundant snapshots removed (audio call without header, outgoing call audio type, incoming call details video, local participant tile, cancel action); suite is 149 tests and goldens. This repo has no detekt task.