mirror of
https://github.com/block/buzz.git
synced 2026-08-18 06:50:31 +02:00
## Summary
- Refine the mobile composer with compact and expanded states, shared
footer fades, haptics, reliable keyboard dismissal, and full-width
camera and photo surfaces.
- Standardize popovers, filters, and section menus with consistent type,
strokes, radii, spacing, icons, and destructive styling.
- Align message presentation with desktop through consistent system
rows, typing and loading feedback, emoji placement, and predictable
photo viewing.
## Validation
- `just mobile-check`
- `just mobile-test` — 1,037 passed, 1 skipped
- Tested on Pixel 10 and a connected iPhone
## Snapshots
<table>
<tr>
<td align="center">Compact composer</td>
<td align="center">Attachment menu</td>
<td align="center">Recent photos</td>
</tr>
<tr>
<td><img
src="https://raw.githubusercontent.com/block/buzz/9732022cb13bb39ce797c4faaa714fe4c924955f/pr-3918--01-compact-composer.png"
width="260" /></td>
<td><img
src="https://raw.githubusercontent.com/block/buzz/9732022cb13bb39ce797c4faaa714fe4c924955f/pr-3918--02-attachment-menu.png"
width="260" /></td>
<td><img
src="https://raw.githubusercontent.com/block/buzz/9732022cb13bb39ce797c4faaa714fe4c924955f/pr-3918--03-photo-surface.png"
width="260" /></td>
</tr>
</table>
---------
Signed-off-by: kenny lopez <klopez4212@gmail.com>
149 lines
3.5 KiB
Dart
149 lines
3.5 KiB
Dart
import 'package:buzz/shared/theme/theme.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_test/flutter_test.dart';
|
|
|
|
void main() {
|
|
void expectStyle(
|
|
TextStyle style, {
|
|
required double fontSize,
|
|
required FontWeight fontWeight,
|
|
required double lineHeight,
|
|
required double letterSpacing,
|
|
}) {
|
|
expect(style.fontFamily, 'Inter');
|
|
expect(style.fontSize, fontSize);
|
|
expect(style.fontWeight, fontWeight);
|
|
expect(style.height, closeTo(lineHeight / fontSize, 0.0001));
|
|
expect(style.letterSpacing, letterSpacing);
|
|
}
|
|
|
|
test('message typography matches the shared mobile scale', () {
|
|
expectStyle(
|
|
messageBodyTextStyle,
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w400,
|
|
lineHeight: 20,
|
|
letterSpacing: 0,
|
|
);
|
|
expectStyle(
|
|
messageUsernameTextStyle,
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w600,
|
|
lineHeight: 17,
|
|
letterSpacing: 0,
|
|
);
|
|
expectStyle(
|
|
messageTimestampTextStyle,
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w400,
|
|
lineHeight: 17,
|
|
letterSpacing: 0,
|
|
);
|
|
expect(messageTimestampTextStyle, messageMetadataTextStyle);
|
|
expectStyle(
|
|
replyPreviewTextStyle,
|
|
fontSize: 13.1,
|
|
fontWeight: FontWeight.w400,
|
|
lineHeight: 17,
|
|
letterSpacing: 0,
|
|
);
|
|
expectStyle(
|
|
reactionCountTextStyle,
|
|
fontSize: 13.1,
|
|
fontWeight: FontWeight.w500,
|
|
lineHeight: 17,
|
|
letterSpacing: 0,
|
|
);
|
|
expectStyle(
|
|
channelTitleTextStyle,
|
|
fontSize: 20,
|
|
fontWeight: FontWeight.w700,
|
|
lineHeight: 24,
|
|
letterSpacing: 0,
|
|
);
|
|
expectStyle(
|
|
systemMessageHeadingTextStyle,
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w600,
|
|
lineHeight: 17,
|
|
letterSpacing: 0,
|
|
);
|
|
expectStyle(
|
|
systemMessageBodyTextStyle,
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w400,
|
|
lineHeight: 20,
|
|
letterSpacing: 0,
|
|
);
|
|
});
|
|
|
|
test('activity typography matches the conversation row scale', () {
|
|
expectStyle(
|
|
activityUsernameTextStyle,
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w600,
|
|
lineHeight: 17,
|
|
letterSpacing: 0,
|
|
);
|
|
expectStyle(
|
|
activityTimestampTextStyle,
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w400,
|
|
lineHeight: 17,
|
|
letterSpacing: 0,
|
|
);
|
|
expectStyle(
|
|
activityContextTextStyle,
|
|
fontSize: 13.1,
|
|
fontWeight: FontWeight.w500,
|
|
lineHeight: 17,
|
|
letterSpacing: 0,
|
|
);
|
|
expectStyle(
|
|
activityPreviewTextStyle,
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w400,
|
|
lineHeight: 20,
|
|
letterSpacing: 0,
|
|
);
|
|
});
|
|
|
|
test('content list typography matches the compact list scale', () {
|
|
expectStyle(
|
|
contentListTitleTextStyle,
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w600,
|
|
lineHeight: 17,
|
|
letterSpacing: 0,
|
|
);
|
|
expectStyle(
|
|
contentListBodyTextStyle,
|
|
fontSize: 13.1,
|
|
fontWeight: FontWeight.w400,
|
|
lineHeight: 17,
|
|
letterSpacing: 0,
|
|
);
|
|
expectStyle(
|
|
contentListTimestampTextStyle,
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w400,
|
|
lineHeight: 17,
|
|
letterSpacing: 0,
|
|
);
|
|
expectStyle(
|
|
filterChipTextStyle,
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w400,
|
|
lineHeight: 15,
|
|
letterSpacing: 0,
|
|
);
|
|
});
|
|
|
|
test('message and activity avatars use their surface sizes', () {
|
|
expect(messageAvatarSize, 42);
|
|
expect(activityAvatarSize, 42);
|
|
expect(compactMessageAvatarSize, 42);
|
|
expect(messageAvatarContentGap, Grid.twelve);
|
|
});
|
|
}
|