Skip to content

docs(ui): showcase, localization, theming, and composer snapshots #2649

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
xsahil03x merged 19 commits into from
May 21, 2026
Merged

docs(ui): showcase, localization, theming, and composer snapshots #2649

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
c340362
docs(ui): more docs screenshots
xsahil03x May 21, 2026
f2e2043
chore: Update Docs Snapshots
xsahil03x May 21, 2026
caeb199
docs(ui): add deviceFrame param to docsGoldenTest, drop flutter_showcase
xsahil03x May 21, 2026
f618cba
docs(ui): match SDK trailing button size in custom composer snapshot
xsahil03x May 21, 2026
6f1ff08
docs(ui): start-align hint in custom composer snapshot
xsahil03x May 21, 2026
484b147
docs(ui): use ghost+secondary mic style at attachment size
xsahil03x May 21, 2026
892098b
docs(ui): switch custom composer trailing to outline type
xsahil03x May 21, 2026
d31de69
docs(ui): solid+primary send variant in custom composer trailing
xsahil03x May 21, 2026
6e06d0e
docs(ui): bump change_position send to large, fix custom_send_icon bg
xsahil03x May 21, 2026
0905fc1
docs(ui): align custom composer snapshot height with siblings
xsahil03x May 21, 2026
51c7ff5
docs(ui): override composer send icon via inherited Theme
xsahil03x May 21, 2026
d13b344
docs(ui): pull MaterialApp wrap into docsGoldenTest
xsahil03x May 21, 2026
a01df7f
ci(docs): run analyze/format/test on docs/** changes
xsahil03x May 21, 2026
2cd47a4
chore: Update Docs Snapshots
xsahil03x May 21, 2026
5dbfed6
docs(ui): model custom composer snapshot on WhatsApp layout
xsahil03x May 21, 2026
d98aa6d
docs(ui): regenerate custom composer snapshot for WhatsApp layout
xsahil03x May 21, 2026
30b7c4e
docs(ui): simplify custom composer to Stream-themed slots
xsahil03x May 21, 2026
24d28c9
docs(ui): drop emoji slot from custom composer snapshot
xsahil03x May 21, 2026
5db4ee6
chore: Update Docs Snapshots
xsahil03x May 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/workflows/stream_flutter_workflow.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ on:
paths:
- 'packages/**'
- 'sample_app/**'
- 'docs/**'
- '.github/workflows/stream_flutter_workflow.yml'
types:
- opened
Expand Down
1 change: 1 addition & 0 deletions docs/docs_screenshots/pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ dev_dependencies:
sdk: flutter
mocktail: ^1.0.5
plugin_platform_interface: ^2.1.8
stream_chat_localizations: ^10.0.0-beta.13

flutter:
uses-material-design: true
18 changes: 7 additions & 11 deletions docs/docs_screenshots/test/channel/channel_header_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,13 @@ Widget _buildChannelHeaderScaffold({
required MockChannel channel,
StreamChannelHeader? header,
}) {
return MaterialApp(
theme: docsScreenshotsTheme(),
debugShowCheckedModeBanner: false,
home: StreamChat(
client: client,
connectivityStream: Stream.value([ConnectivityResult.mobile]),
child: StreamChannel(
showLoading: false,
channel: channel,
child: Scaffold(appBar: header),
),
return StreamChat(
client: client,
connectivityStream: Stream.value([ConnectivityResult.mobile]),
child: StreamChannel(
showLoading: false,
channel: channel,
child: Scaffold(appBar: header),
),
);
}
Expand Down
14 changes: 5 additions & 9 deletions docs/docs_screenshots/test/channel/channel_list_header_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,11 @@ Widget _buildListHeaderScaffold({
required MockClient client,
required PreferredSizeWidget Function(BuildContext) headerBuilder,
}) {
return MaterialApp(
theme: docsScreenshotsTheme(),
debugShowCheckedModeBanner: false,
home: StreamChat(
client: client,
connectivityStream: Stream.value([ConnectivityResult.mobile]),
child: Builder(
builder: (context) => Scaffold(appBar: headerBuilder(context)),
),
return StreamChat(
client: client,
connectivityStream: Stream.value([ConnectivityResult.mobile]),
child: Builder(
builder: (context) => Scaffold(appBar: headerBuilder(context)),
),
);
}
Expand Down
228 changes: 103 additions & 125 deletions docs/docs_screenshots/test/channel/channel_preview_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import 'package:device_preview/device_preview.dart';
import 'package:device_preview/device_preview.dart' show Devices;
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
import 'package:flutter_test/flutter_test.dart';
Expand Down Expand Up @@ -32,15 +32,11 @@ void main() {
],
);

return MaterialApp(
theme: docsScreenshotsTheme(),
debugShowCheckedModeBanner: false,
home: StreamChat(
client: client,
connectivityStream: Stream.value([ConnectivityResult.mobile]),
child: Scaffold(
body: StreamChannelListItem(channel: channel),
),
return StreamChat(
client: client,
connectivityStream: Stream.value([ConnectivityResult.mobile]),
child: Scaffold(
body: StreamChannelListItem(channel: channel),
),
);
},
Expand All @@ -50,6 +46,7 @@ void main() {
'channel list view',
fileName: 'channel_list_view',
constraints: const BoxConstraints.tightFor(width: 430, height: 932),
deviceFrame: Devices.ios.iPhone13,
builder: () {
final client = MockClient();

Expand Down Expand Up @@ -117,34 +114,26 @@ void main() {
stubQueryChannelsForGoldens(client, channels);
stubMockClientCurrentUser(client, ownUser);

return DeviceFrame(
device: Devices.ios.iPhone13,
isFrameVisible: true,
screen: MaterialApp(
theme: docsScreenshotsTheme(),
debugShowCheckedModeBanner: false,
home: StreamChat(
client: client,
connectivityStream: Stream.value([ConnectivityResult.mobile]),
child: Builder(
builder: (context) {
final icons = context.streamIcons;
return Scaffold(
appBar: StreamChannelListHeader(
title: const Text('Chats'),
trailing: StreamButton.icon(
icon: Icon(icons.plus),
onPressed: () {},
),
),
body: StreamChannelListView(
controller: controller,
shrinkWrap: true,
),
);
},
),
),
return StreamChat(
client: client,
connectivityStream: Stream.value([ConnectivityResult.mobile]),
child: Builder(
builder: (context) {
final icons = context.streamIcons;
return Scaffold(
appBar: StreamChannelListHeader(
title: const Text('Chats'),
trailing: StreamButton.icon(
icon: Icon(icons.plus),
onPressed: () {},
),
),
body: StreamChannelListView(
controller: controller,
shrinkWrap: true,
),
);
},
),
);
},
Expand Down Expand Up @@ -175,42 +164,38 @@ void main() {
],
);

return MaterialApp(
theme: docsScreenshotsTheme(),
debugShowCheckedModeBanner: false,
home: StreamChat(
client: client,
connectivityStream: Stream.value([ConnectivityResult.mobile]),
child: Builder(
builder: (context) {
final icons = context.streamIcons;
final colorScheme = context.streamColorScheme;
return Scaffold(
body: Slidable(
groupTag: 'channels-actions',
endActionPane: ActionPane(
extentRatio: 0.4,
motion: const BehindMotion(),
children: [
CustomSlidableAction(
foregroundColor: colorScheme.textPrimary,
backgroundColor: colorScheme.backgroundSurface,
onPressed: (_) {},
child: Icon(icons.more, size: 20),
),
CustomSlidableAction(
foregroundColor: colorScheme.textOnAccent,
backgroundColor: colorScheme.accentPrimary,
onPressed: (_) {},
child: Icon(icons.mute, size: 20),
),
],
),
child: StreamChannelListItem(channel: channel),
return StreamChat(
client: client,
connectivityStream: Stream.value([ConnectivityResult.mobile]),
child: Builder(
builder: (context) {
final icons = context.streamIcons;
final colorScheme = context.streamColorScheme;
return Scaffold(
body: Slidable(
groupTag: 'channels-actions',
endActionPane: ActionPane(
extentRatio: 0.4,
motion: const BehindMotion(),
children: [
CustomSlidableAction(
foregroundColor: colorScheme.textPrimary,
backgroundColor: colorScheme.backgroundSurface,
onPressed: (_) {},
child: Icon(icons.more, size: 20),
),
CustomSlidableAction(
foregroundColor: colorScheme.textOnAccent,
backgroundColor: colorScheme.accentPrimary,
onPressed: (_) {},
child: Icon(icons.mute, size: 20),
),
],
),
);
},
),
child: StreamChannelListItem(channel: channel),
),
);
},
),
);
},
Expand All @@ -220,6 +205,7 @@ void main() {
'slidable channel list with header',
fileName: 'slidable_channel_list',
constraints: const BoxConstraints.tightFor(width: 430, height: 932),
deviceFrame: Devices.ios.iPhone13,
whilePerforming: (tester) async {
await tester.drag(find.byType(StreamChannelListItem).first, const Offset(-200, 0));
await tester.pumpAndSettle();
Expand Down Expand Up @@ -292,59 +278,51 @@ void main() {
stubQueryChannelsForGoldens(client, channels);
stubMockClientCurrentUser(client, ownUser);

return DeviceFrame(
device: Devices.ios.iPhone13,
isFrameVisible: true,
screen: MaterialApp(
theme: docsScreenshotsTheme(),
debugShowCheckedModeBanner: false,
home: StreamChat(
client: client,
connectivityStream: Stream.value([ConnectivityResult.mobile]),
child: Builder(
builder: (context) {
final icons = context.streamIcons;
final colorScheme = context.streamColorScheme;
return Scaffold(
appBar: StreamChannelListHeader(
title: const Text('Chats'),
trailing: StreamButton.icon(
icon: Icon(icons.plus),
onPressed: () {},
),
),
body: StreamChannelListView(
controller: controller,
shrinkWrap: true,
itemBuilder: (context, channels, index, defaultWidget) {
return Slidable(
groupTag: 'channels-actions',
endActionPane: ActionPane(
extentRatio: 0.4,
motion: const BehindMotion(),
children: [
CustomSlidableAction(
foregroundColor: colorScheme.textPrimary,
backgroundColor: colorScheme.backgroundSurface,
onPressed: (_) {},
child: Icon(icons.more, size: 20),
),
CustomSlidableAction(
foregroundColor: colorScheme.textOnAccent,
backgroundColor: colorScheme.accentPrimary,
onPressed: (_) {},
child: Icon(icons.mute, size: 20),
),
],
return StreamChat(
client: client,
connectivityStream: Stream.value([ConnectivityResult.mobile]),
child: Builder(
builder: (context) {
final icons = context.streamIcons;
final colorScheme = context.streamColorScheme;
return Scaffold(
appBar: StreamChannelListHeader(
title: const Text('Chats'),
trailing: StreamButton.icon(
icon: Icon(icons.plus),
onPressed: () {},
),
),
body: StreamChannelListView(
controller: controller,
shrinkWrap: true,
itemBuilder: (context, channels, index, defaultWidget) {
return Slidable(
groupTag: 'channels-actions',
endActionPane: ActionPane(
extentRatio: 0.4,
motion: const BehindMotion(),
children: [
CustomSlidableAction(
foregroundColor: colorScheme.textPrimary,
backgroundColor: colorScheme.backgroundSurface,
onPressed: (_) {},
child: Icon(icons.more, size: 20),
),
child: defaultWidget,
);
},
),
);
},
),
),
CustomSlidableAction(
foregroundColor: colorScheme.textOnAccent,
backgroundColor: colorScheme.accentPrimary,
onPressed: (_) {},
child: Icon(icons.mute, size: 20),
),
],
),
child: defaultWidget,
);
},
),
);
},
),
);
},
Expand Down
Binary file added docs/docs_screenshots/test/localization/goldens/macos/localization_support.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading