feat(ui): add StreamMediaViewer and StreamBottomAppBar#113
Merged
Conversation
Introduces two new components and consolidates the toolbar family: - StreamMediaViewer: full-screen media chrome controller. Composes an optional header, footer, and edge-to-edge child; animates the chrome in/out via showChrome and fades to an immersive background when hidden. Theme carries optional scoped appBarStyle / bottomAppBarStyle so descendant chrome bars can be tinted (e.g. light-on-dark over dark media) without touching app-wide themes. - StreamBottomAppBar: bottom counterpart to StreamAppBar. Same three-slot layout (leading / heading / trailing), supports title + subtitle, top hairline border, SafeArea(top: false) when primary, and the same per-slot button style propagation. Refactors: - Rename StreamHeaderToolbar -> StreamToolbar — it's the shared layout primitive behind StreamAppBar, StreamBottomAppBar, and StreamSheetHeader, not specifically a "header" widget. - Rename components/header/ -> components/toolbar/ (lib, gallery, tests) to match the unifying name. - Drop the "48×48 slot for symmetry" claim from the toolbar widgets' docs. StreamToolbar actually mirrors the wider of leading / trailing on the opposite side — the 48×48 appearance comes from StreamButton.icon's kMinInteractiveDimension, not the bar. Tests: - New stream_bottom_app_bar_test.dart with slot, SafeArea, and three-level style precedence coverage modelled on the app bar test. Widgetbook: - New StreamMediaViewer Playground + Showcase following the StreamSheet launcher / section pattern. - New StreamBottomAppBar Playground + Showcase with primary toggle and per-slot style propagation demo. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
Disabled knowledge base sources:
📝 Walkthrough<review_stack_artifact> </review_stack_artifact> 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning Review ran into problems🔥 ProblemsGit: Failed to clone repository. Please run the Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
apps/design_system_gallery/lib/components/media_viewer/stream_media_viewer.dart (1)
1-360:⚠️ Potential issue | 🟠 Major | ⚡ Quick winFix formatting to unblock CI
dart format --set-exit-if-changedis failing on this file in the pipeline. Please run formatter and commit the formatted output.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/design_system_gallery/lib/components/media_viewer/stream_media_viewer.dart` around lines 1 - 360, The file fails dart format; run the Dart formatter and commit the formatted file to satisfy CI. Open the file containing _sampleImages, the _PlaygroundMediaViewer class (and its State _PlaygroundMediaViewerState), and the top-level function _push, run `dart format .` (or `dart format --set-exit-if-changed` locally) to apply the formatting changes, then stage and commit the updated file so the pipeline passes.apps/design_system_gallery/lib/components/toolbar/stream_bottom_app_bar.dart (1)
1-255:⚠️ Potential issue | 🟠 Major | ⚡ Quick winFix formatting to unblock CI
dart format --set-exit-if-changedis failing on this file in the pipeline. Please run formatter and commit the result soformat:verifypasses.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/design_system_gallery/lib/components/toolbar/stream_bottom_app_bar.dart` around lines 1 - 255, This file fails dart format checks; run the Dart formatter and commit the formatted changes so CI's format:verify passes. Specifically, run `dart format .` (or `dart format --set-exit-if-changed apps/design_system_gallery/lib/components/toolbar/stream_bottom_app_bar.dart`) and commit the updated file; ensure formatting touches the top-level use cases and widget classes such as buildStreamBottomAppBarPlayground, buildStreamBottomAppBarShowcase, and class _BarExample so the file matches the project's dartfmt rules.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@apps/design_system_gallery/lib/components/media_viewer/stream_media_viewer.dart`:
- Around line 19-23: The `@widgetbook.UseCase` annotations for the
StreamMediaViewer use cases incorrectly set path to '[Components]/Media Viewer';
update both occurrences of the annotation (the one above the StreamMediaViewer
use case and the second instance around the other use case) to use
component-specific paths like '[Components]/StreamMediaViewer' so the
StreamMediaViewer use cases are categorized correctly; locate the annotations by
the `@widgetbook.UseCase` decorator for the StreamMediaViewer component and change
the path value accordingly.
- Around line 255-259: The BoxDecoration used for the media viewer currently
sets a border via the border property which can cause rounded-corner clipping;
update the widget that uses BoxDecoration (the Container/decoration block
referencing colorScheme.backgroundSurface, BorderRadius.all(radius.lg), and
colorScheme.borderSubtle) by removing the border from that BoxDecoration and
instead add a foregroundDecoration property that uses a BoxDecoration containing
the Border.all(color: colorScheme.borderSubtle) and the same
BorderRadius.all(radius.lg), keeping the background color and radius in the
original decoration but moving the border to foregroundDecoration to avoid
clipping issues.
In
`@apps/design_system_gallery/lib/components/toolbar/stream_bottom_app_bar.dart`:
- Around line 10-14: Update the `@widgetbook.UseCase` annotations for the
StreamBottomAppBar use cases to use a component-specific path: change path:
'[Components]/Toolbar' (and the other occurrence at the block around the
StreamBottomAppBar use case near lines 94-98) to path:
'[Components]/StreamBottomAppBar'; locate the annotations attached to the
StreamBottomAppBar `@widgetbook.UseCase` declarations and replace the shared
bucket path with the component-specific string.
- Around line 244-248: The BoxDecoration in StreamBottomAppBar is currently
applying the border via the decoration property which can cause clipping
artifacts with rounded corners; remove the border from the decoration and
instead add a foregroundDecoration on the same widget (use BoxDecoration with
the same border color and the same BorderRadius) while leaving
colorScheme.backgroundSurface and the borderRadius in the original decoration;
this moves the border painting to the foreground and prevents clipping issues.
---
Outside diff comments:
In
`@apps/design_system_gallery/lib/components/media_viewer/stream_media_viewer.dart`:
- Around line 1-360: The file fails dart format; run the Dart formatter and
commit the formatted file to satisfy CI. Open the file containing _sampleImages,
the _PlaygroundMediaViewer class (and its State _PlaygroundMediaViewerState),
and the top-level function _push, run `dart format .` (or `dart format
--set-exit-if-changed` locally) to apply the formatting changes, then stage and
commit the updated file so the pipeline passes.
In
`@apps/design_system_gallery/lib/components/toolbar/stream_bottom_app_bar.dart`:
- Around line 1-255: This file fails dart format checks; run the Dart formatter
and commit the formatted changes so CI's format:verify passes. Specifically, run
`dart format .` (or `dart format --set-exit-if-changed
apps/design_system_gallery/lib/components/toolbar/stream_bottom_app_bar.dart`)
and commit the updated file; ensure formatting touches the top-level use cases
and widget classes such as buildStreamBottomAppBarPlayground,
buildStreamBottomAppBarShowcase, and class _BarExample so the file matches the
project's dartfmt rules.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 12fd7ff3-8c86-4351-8eb7-02d588a5ce7b
📒 Files selected for processing (24)
apps/design_system_gallery/lib/app/gallery_app.directories.g.dartapps/design_system_gallery/lib/components/media_viewer/stream_media_viewer.dartapps/design_system_gallery/lib/components/toolbar/stream_app_bar.dartapps/design_system_gallery/lib/components/toolbar/stream_bottom_app_bar.dartapps/design_system_gallery/lib/components/toolbar/stream_sheet_header.dartpackages/stream_core_flutter/lib/src/components.dartpackages/stream_core_flutter/lib/src/components/media_viewer/stream_media_viewer.dartpackages/stream_core_flutter/lib/src/components/toolbar/stream_app_bar.dartpackages/stream_core_flutter/lib/src/components/toolbar/stream_bottom_app_bar.dartpackages/stream_core_flutter/lib/src/components/toolbar/stream_sheet_header.dartpackages/stream_core_flutter/lib/src/components/toolbar/stream_toolbar.dartpackages/stream_core_flutter/lib/src/factory/stream_component_factory.dartpackages/stream_core_flutter/lib/src/factory/stream_component_factory.g.theme.dartpackages/stream_core_flutter/lib/src/theme.dartpackages/stream_core_flutter/lib/src/theme/components/stream_bottom_app_bar_theme.dartpackages/stream_core_flutter/lib/src/theme/components/stream_bottom_app_bar_theme.g.theme.dartpackages/stream_core_flutter/lib/src/theme/components/stream_media_viewer_theme.dartpackages/stream_core_flutter/lib/src/theme/components/stream_media_viewer_theme.g.theme.dartpackages/stream_core_flutter/lib/src/theme/stream_theme.dartpackages/stream_core_flutter/lib/src/theme/stream_theme.g.theme.dartpackages/stream_core_flutter/lib/src/theme/stream_theme_extensions.dartpackages/stream_core_flutter/test/components/toolbar/stream_app_bar_test.dartpackages/stream_core_flutter/test/components/toolbar/stream_bottom_app_bar_test.dartpackages/stream_core_flutter/test/components/toolbar/stream_sheet_header_test.dart
The constant is shared by StreamAppBar, StreamBottomAppBar, and StreamSheetHeader — none of which are headers in isolation. The new name matches StreamToolbar, the underlying layout primitive. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #113 +/- ##
==========================================
+ Coverage 33.04% 34.03% +0.99%
==========================================
Files 171 172 +1
Lines 6595 6588 -7
==========================================
+ Hits 2179 2242 +63
+ Misses 4416 4346 -70 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Pads the child by the header / footer preferred sizes (plus top / bottom safe-area insets) so the content area never sits behind the chrome. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
renefloor
approved these changes
May 13, 2026
…_toolbar.dart Co-authored-by: Rene Floor <rene.floor@getstream.io>
…mToolbar rename Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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
2 participants
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.
Summary
header,footer, and edge-to-edgechild; animates chrome in/out viashowChromeand fades to an immersive background when hidden. Theme carries scopedappBarStyle/bottomAppBarStyleso descendant chrome bars can be tinted (e.g. light-on-dark over dark media) without touching app-wide themes.StreamAppBar. Same three-slot layout (leading/ heading /trailing), supportstitle+subtitle, top hairline border,SafeArea(top: false)whenprimary, and the same per-slot button style propagation.StreamHeaderToolbar→StreamToolbarandcomponents/header/→components/toolbar/across lib, gallery, and tests. The shared layout primitive is now consistently named with the directory and used by all three toolbar widgets.StreamAppBar/StreamBottomAppBar/StreamSheetHeader.StreamToolbaractually mirrors the wider ofleading/trailingon the opposite side; the 48×48 appearance comes fromStreamButton.icon'skMinInteractiveDimension, not the bar.Test plan
melos run analyzeclean acrossstream_core,stream_core_flutter,design_system_gallery.flutter test test/components/toolbar/— 29 tests pass (7 app bar, 16 sheet header, 6 new bottom app bar).flutter build macos --debugsucceeds for the gallery.StreamMediaViewerPlayground + Showcase render correctly;StreamBottomAppBarPlayground + Showcase render correctly.🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Refactor
Tests
Documentation