Skip to content

feat(video): theme the call control badge from its design tokens - #1338

Open
renefloor wants to merge 3 commits into
v2from
feat/update-color-tokens
Open

feat(video): theme the call control badge from its design tokens#1338
renefloor wants to merge 3 commits into
v2from
feat/update-color-tokens

Conversation

@renefloor

@renefloor renefloor commented Sep 10, 2026

Copy link
Copy Markdown
Contributor

The design system gave the call control badge its own tokens — control/call-control-error-badge/bg{accent.warning} and /text{base.black} (design-system-tokens#73).

The badge was drawing the shared error style: red with a dark border, which disappears into a red control and loses its edge over video in either mode. It now defaults to the warning style with no border, which separates from whatever sits underneath.

What's here

StreamCallButtonBadgeTheme, StreamCallButtonBadgeThemeData and StreamCallButtonBadgeStyle, served from StreamVideoTheme.callButtonBadgeTheme, carrying the severity, size, border and overhang.

Colors are deliberately not repeated here — they resolve from core's StreamErrorBadgeTheme, so an app retheming the badge does it in one place rather than two that can disagree.

🚩 This reverses a decision on this branch

CallButtonBadge is now StreamCallButtonBadge and exported again. The Upcoming changelog on v2 argued the opposite:

CallButtonBadge is no longer exported. It exists so the badge sits in the same place on both call buttons, which is an implementation detail […]

The reasoning for reversing it: having its own design token makes the badge part of the design-system surface, not only an internal detail of the two call buttons — so it takes the Stream prefix and ships with a theme. I have rewritten that changelog entry, but whoever wrote it should weigh in, since this undoes their change deliberately rather than by accident.

Dependency override

stream_core_flutter is repointed at a commit on the core companion PR, which adds StreamErrorBadge's warning style. So that PR merges first, and this override then wants repointing at the resulting main commit.

stream_core's git override is gone from the lockfile. The root pubspec.yaml on v2 no longer declares one, so v2's lock was stale; regenerating it resolves the published stream_core 0.5.0. A fresh flutter pub get reproduces the committed lock byte for byte.

The core bump also moves the accentWarning token: #F26D10 → #F6BF57 light, #FA922B → #FCD579 dark. That repaints the fair bars on StreamConnectionQualityIndicator as well as the badge, which is why its goldens changed too.

Tests

449 pass. Three goldens fail on a macOS host — 1px, 59px and 66px, ±1 per channel — which is Linux-vs-host rasterization against the committed goldens/ci PNGs, not a regression; they fail identically on a clean v2 worktree. Analyze and format are clean.

Summary by CodeRabbit

  • New Features
    • Added customizable call-button badge styling through the global and local theme APIs.
    • Exposed the renamed StreamCallButtonBadge widget for displaying call error badges.
  • Visual Updates
    • Call-control badges now use a borderless amber appearance with updated sizing and positioning.
    • Fair connection-quality indicators now use a lighter amber accent.
  • Bug Fixes
    • Improved badge positioning for right-to-left layouts.
  • Breaking Changes
    • Replaced the public CallButtonBadge name with StreamCallButtonBadge.

@coderabbitai

coderabbitai Bot commented Sep 10, 2026

Copy link
Copy Markdown

Review Change StackReview Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: d98e5626-3c9e-423a-aa5e-0a5c13a0418f

📥 Commits

Reviewing files that changed from the base of the PR and between ad336b1 and 357e53a.

⛔ Files ignored due to path filters (9)
  • packages/stream_video_flutter/test/src/call_controls/goldens/ci/call_control_button_dark.png is excluded by !**/*.png
  • packages/stream_video_flutter/test/src/call_controls/goldens/ci/call_control_button_light.png is excluded by !**/*.png
  • packages/stream_video_flutter/test/src/call_controls/goldens/ci/call_feature_button_dark.png is excluded by !**/*.png
  • packages/stream_video_flutter/test/src/call_controls/goldens/ci/call_feature_button_light.png is excluded by !**/*.png
  • packages/stream_video_flutter/test/src/call_participants/goldens/ci/stream_connection_quality_indicator_dark.png is excluded by !**/*.png
  • packages/stream_video_flutter/test/src/call_participants/goldens/ci/stream_connection_quality_indicator_light.png is excluded by !**/*.png
  • packages/stream_video_flutter/test/src/call_screen/goldens/ci/stream_lobby_view_unavailable_dark.png is excluded by !**/*.png
  • packages/stream_video_flutter/test/src/call_screen/goldens/ci/stream_lobby_view_unavailable_light.png is excluded by !**/*.png
  • pubspec.lock is excluded by !**/*.lock
📒 Files selected for processing (14)
  • packages/stream_video_flutter/CHANGELOG.md
  • packages/stream_video_flutter/lib/src/call_controls/call_button_badge.dart
  • packages/stream_video_flutter/lib/src/call_controls/call_control_button.dart
  • packages/stream_video_flutter/lib/src/call_controls/call_feature_button.dart
  • packages/stream_video_flutter/lib/src/call_controls/device_split_buttons.dart
  • packages/stream_video_flutter/lib/src/call_controls/stream_call_button_badge.dart
  • packages/stream_video_flutter/lib/src/theme/components/call_button_badge_theme.dart
  • packages/stream_video_flutter/lib/src/theme/components/call_button_badge_theme.g.theme.dart
  • packages/stream_video_flutter/lib/src/theme/components/components.dart
  • packages/stream_video_flutter/lib/src/theme/stream_video_theme.dart
  • packages/stream_video_flutter/lib/stream_video_flutter.dart
  • packages/stream_video_flutter/test/src/call_controls/stream_call_button_badge_test.dart
  • packages/stream_video_flutter/test/src/theme/participant_tile_theme_test.dart
  • pubspec.yaml
💤 Files with no reviewable changes (1)
  • packages/stream_video_flutter/lib/src/call_controls/call_button_badge.dart

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.


📝 Walkthrough

Walkthrough

The PR replaces CallButtonBadge with StreamCallButtonBadge, adds badge styling and theme APIs, integrates them with StreamVideoTheme, updates call controls, and adds widget and theme tests.

Changes

Call button badge theming

Layer / File(s) Summary
Badge theme and style contract
packages/stream_video_flutter/lib/src/theme/components/*
Adds badge theme and style types with defaults, merging, equality, and interpolation support.
Badge widget behavior
packages/stream_video_flutter/lib/src/call_controls/stream_call_button_badge.dart, packages/stream_video_flutter/lib/src/call_controls/call_button_badge.dart
Adds StreamCallButtonBadge with conditional rendering, theme and style resolution, directional positioning, and configurable badge properties. Removes CallButtonBadge.
Theme and call-control integration
packages/stream_video_flutter/lib/src/theme/stream_video_theme.dart, packages/stream_video_flutter/lib/src/call_controls/*, packages/stream_video_flutter/lib/stream_video_flutter.dart
Adds callButtonBadgeTheme to StreamVideoTheme and updates call controls and public exports to use StreamCallButtonBadge.
Badge validation and release updates
packages/stream_video_flutter/test/src/call_controls/stream_call_button_badge_test.dart, packages/stream_video_flutter/test/src/theme/participant_tile_theme_test.dart, packages/stream_video_flutter/CHANGELOG.md, pubspec.yaml
Tests badge rendering, theme precedence, RTL positioning, theme operations, and records the API and dependency updates.

Priority: ➖ Normal

Estimated code review effort: 3 (Moderate) | ~25 minutes

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant CallControlButton
  participant StreamCallButtonBadge
  participant StreamVideoTheme
  participant StreamCallButtonBadgeTheme
  participant StreamErrorBadge
  CallControlButton->>StreamCallButtonBadge: build call-control child
  StreamCallButtonBadge->>StreamVideoTheme: read callButtonBadgeTheme
  StreamCallButtonBadge->>StreamCallButtonBadgeTheme: merge local theme and style
  StreamCallButtonBadge->>StreamErrorBadge: render resolved badge
  StreamCallButtonBadge-->>CallControlButton: return child or badge Stack
Loading

Merge Risk: ⚪ Minimal · up to 357e5

This change themes the call-control badge with design-system tokens and renames the internal badge widget to a public StreamCallButtonBadge. The visual result is a borderless amber badge and slightly lighter warning color in connection-quality bars; no functional or compatibility risk was found, so it is ready to merge.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly identifies the primary change: theming the call control badge with design tokens.
Description check ✅ Passed The description clearly explains the goal, implementation, UI behavior, API changes, dependency requirement, token impact, and test results. It does not include the template headings, screenshots, vid…
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/update-color-tokens

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@codecov

codecov Bot commented Sep 10, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 89.13043% with 5 lines in your changes missing coverage. Please review.
⚠️ Please upload report for BASE (v2@ad336b1). Learn more about missing BASE report.

Files with missing lines Patch % Lines
.../src/theme/components/call_button_badge_theme.dart 73.33% 4 Missing ⚠️
...ideo_flutter/lib/src/theme/stream_video_theme.dart 85.71% 1 Missing ⚠️
Additional details and impacted files
@@          Coverage Diff          @@
##             v2    #1338   +/-   ##
=====================================
  Coverage      ?   31.23%           
=====================================
  Files         ?      375           
  Lines         ?    28824           
  Branches      ?        0           
=====================================
  Hits          ?     9002           
  Misses        ?    19822           
  Partials      ?        0           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

@renefloor
renefloor force-pushed the feat/update-color-tokens branch from b369e03 to bbb9bba Compare September 11, 2026 11:20
renefloor and others added 2 commits September 11, 2026 13:55
The design system gave the call control badge its own tokens,
control/call-control-error-badge/bg -> {accent.warning} and /text ->
{base.black}. The badge was drawing the shared error style: red with a
dark border, which disappears into a red control and loses its edge
over video in either mode. It now defaults to the warning style with
no border, which separates from whatever sits underneath.

Adds StreamCallButtonBadgeTheme, ThemeData and Style, served from
StreamVideoTheme.callButtonBadgeTheme, carrying the severity, size,
border and overhang. Colors are not repeated here — they resolve from
core's StreamErrorBadgeTheme, so an app retheming the badge does it in
one place.

Having its own token makes the badge part of the design-system
surface, so CallButtonBadge becomes StreamCallButtonBadge and is
exported again. That reverses the de-export on this branch, whose
changelog entry is rewritten accordingly.

Repoints the stream_core_flutter override at the core commit adding
StreamErrorBadge's warning style. stream_core stays on its existing
pin: it is a separate git dependency, and moving it would pull in
unrelated error-layer changes from core main.

Tests are +269 -34, identical to clean v2 — those 34 pre-date this
branch.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@renefloor
renefloor force-pushed the feat/update-color-tokens branch from bdfd8d0 to 1d0a033 Compare September 11, 2026 11:55
…rhang

Moves `StreamCallButtonBadgeStyleDefaults` into the widget file as a private
`_StreamCallButtonBadgeStyleDefaults`, per the convention that defaults live in
the widget. It had one consumer, unlike the three standalone defaults files
that are each shared with a second widget. Private also puts the defaults out
of reach of a theme, where the generated `runtimeType`-gated equality would
report every rebuild as a change.

Renames `StreamCallButtonBadgeStyle.alignmentOffset` to `overhang`: the badge's
position is pinned by `PositionedDirectional` and the style cannot move it, and
`alignmentOffset` elsewhere in this package is an `Offset` on a menu anchor.

Trims the field docs to what the code does — "if null, X" rather than a
constructor default the constructor does not have — and drops the claim that
the error badge's border is dark in either mode, which is not so in light mode
and does not apply while `showBorder` is false. Drops `showBorder: true` from
the theme snippet, which contradicted the doc twelve lines below it.

Adds tests for the three resolution paths the theme introduced: the
`StreamVideoTheme` wiring through `copyWith`, `merge` and `lerp`, local-over-
global precedence in `of`, and `style` beating the theme per property. Also
pins the defaults and the RTL overhang.

Drops a no-op `??` in the `StreamVideoTheme` factory, and records the badge
repaint and the `accentWarning` token change in the changelog.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@renefloor
renefloor marked this pull request as ready for review September 11, 2026 15:01
@renefloor
renefloor requested a review from a team as a code owner September 11, 2026 15:01
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