Skip to content

Commit c88b217

Browse files
chrisbobbechrisbobbe
committed
button: Implement ZulipWebUiKitButton, to use for edit-message UI soon
1 parent 4f651e0 commit c88b217

File tree

3 files changed

+269
-1
lines changed

3 files changed

+269
-1
lines changed

‎lib/widgets/button.dart

+151-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,154 @@
1-
import 'package:flutter/widgets.dart';
1+
import 'package:flutter/material.dart';
2+
3+
import 'color.dart';
4+
import 'text.dart';
5+
import 'theme.dart';
6+
7+
/// The "Button" component from Zulip Web UI kit,
8+
/// plus outer vertical padding to make the touch target 44px tall.
9+
///
10+
/// The Figma uses this for the "Cancel" and "Save" buttons in the compose box
11+
/// for editing an already-sent message.
12+
///
13+
/// See Figma:
14+
/// * Component: https://www.figma.com/design/msWyAJ8cnMHgOMPxi7BUvA/Zulip-Web-UI-kit?node-id=1-2780&t=Wia0D0i1I0GXdD9z-0
15+
/// * Edit-message compose box: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3988-38201&m=dev
16+
class ZulipWebUiKitButton extends StatelessWidget {
17+
const ZulipWebUiKitButton({
18+
super.key,
19+
this.attention = ZulipWebUiKitButtonAttention.medium,
20+
this.intent = ZulipWebUiKitButtonIntent.info,
21+
required this.label,
22+
required this.onPressed,
23+
});
24+
25+
final ZulipWebUiKitButtonAttention attention;
26+
final ZulipWebUiKitButtonIntent intent;
27+
final String label;
28+
final VoidCallback onPressed;
29+
30+
WidgetStateColor _backgroundColor(DesignVariables designVariables) {
31+
switch ((attention, intent)) {
32+
case (ZulipWebUiKitButtonAttention.medium, ZulipWebUiKitButtonIntent.info):
33+
return WidgetStateColor.fromMap({
34+
WidgetState.pressed: designVariables.btnBgAttMediumIntInfoActive,
35+
~WidgetState.pressed: designVariables.btnBgAttMediumIntInfoNormal,
36+
});
37+
case (ZulipWebUiKitButtonAttention.high, ZulipWebUiKitButtonIntent.info):
38+
return WidgetStateColor.fromMap({
39+
WidgetState.pressed: designVariables.btnBgAttHighIntInfoActive,
40+
~WidgetState.pressed: designVariables.btnBgAttHighIntInfoNormal,
41+
});
42+
}
43+
}
44+
45+
Color _labelColor(DesignVariables designVariables) {
46+
switch ((attention, intent)) {
47+
case (ZulipWebUiKitButtonAttention.medium, ZulipWebUiKitButtonIntent.info):
48+
return designVariables.btnLabelAttMediumIntInfo;
49+
case (ZulipWebUiKitButtonAttention.high, ZulipWebUiKitButtonIntent.info):
50+
return designVariables.btnLabelAttHigh;
51+
}
52+
}
53+
54+
TextStyle _labelStyle(BuildContext context, {required TextScaler textScaler}) {
55+
final designVariables = DesignVariables.of(context);
56+
// Values chosen from the Figma frame for zulip-flutter's compose box:
57+
// https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3988-38201&m=dev
58+
// Commented values come from the Figma page "Zulip Web UI kit":
59+
// https://www.figma.com/design/msWyAJ8cnMHgOMPxi7BUvA/Zulip-Web-UI-kit?node-id=1-8&p=f&m=dev
60+
// Discussion:
61+
// https://github.com/zulip/zulip-flutter/pull/1432#discussion_r2023880851
62+
return TextStyle(
63+
color: _labelColor(designVariables),
64+
fontSize: 17, // 16
65+
height: 1.20, // 1.25
66+
letterSpacing: proportionalLetterSpacing(context, textScaler: textScaler,
67+
0.006,
68+
baseFontSize: 17), // 16
69+
).merge(weightVariableTextStyle(context,
70+
wght: 600)); // 500
71+
}
72+
73+
BorderSide _borderSide(DesignVariables designVariables) {
74+
switch (attention) {
75+
case ZulipWebUiKitButtonAttention.medium:
76+
// TODO inner shadow effect like `box-shadow: inset`, following Figma;
77+
// needs Flutter support for something like that:
78+
// https://github.com/flutter/flutter/issues/18636
79+
// https://github.com/flutter/flutter/issues/52999
80+
// For now, we just use a solid-stroke border with half the opacity
81+
// and half the width.
82+
return BorderSide(
83+
color: designVariables.btnShadowAttMed.withFadedAlpha(0.5),
84+
width: 0.5);
85+
case ZulipWebUiKitButtonAttention.high:
86+
return BorderSide.none;
87+
}
88+
}
89+
90+
@override
91+
Widget build(BuildContext context) {
92+
final designVariables = DesignVariables.of(context);
93+
94+
// With [MaterialTapTargetSize.padded],
95+
// make [TextButton] set 44 instead of 48 for the touch-target height.
96+
final visualDensity = VisualDensity(vertical: -1);
97+
// A value that [TextButton] adds to some of its layout parameters;
98+
// we can cancel out those adjustments by subtracting it.
99+
final densityVerticalAdjustment = visualDensity.baseSizeAdjustment.dy;
100+
101+
// An upper limit when the text-size setting is large
102+
// - helps prioritize more important content (like message content); #1023
103+
// - prevents the vertical padding added by [MaterialTapTargetSize.padded]
104+
// from shrinking to zero as the button grows to accommodate a larger label
105+
final textScaler = MediaQuery.textScalerOf(context).clamp(maxScaleFactor: 1.5);
106+
107+
return AnimatedScaleOnTap(
108+
scaleEnd: 0.96,
109+
duration: Duration(milliseconds: 100),
110+
child: TextButton(
111+
style: TextButton.styleFrom(
112+
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 4 - densityVerticalAdjustment),
113+
foregroundColor: _labelColor(designVariables),
114+
shape: RoundedRectangleBorder(
115+
side: _borderSide(designVariables),
116+
borderRadius: BorderRadius.circular(4)),
117+
splashFactory: NoSplash.splashFactory,
118+
119+
// These three arguments make the button 28px tall vertically,
120+
// but with vertical padding to make the touch target 44px tall:
121+
// https://github.com/zulip/zulip-flutter/pull/1432#discussion_r2023907300
122+
visualDensity: visualDensity,
123+
tapTargetSize: MaterialTapTargetSize.padded,
124+
minimumSize: Size(kMinInteractiveDimension, 28 - densityVerticalAdjustment),
125+
).copyWith(backgroundColor: _backgroundColor(designVariables)),
126+
onPressed: onPressed,
127+
child: ConstrainedBox(
128+
constraints: BoxConstraints(maxWidth: 240),
129+
child: Text(label,
130+
textScaler: textScaler,
131+
maxLines: 1,
132+
style: _labelStyle(context, textScaler: textScaler),
133+
textAlign: TextAlign.center,
134+
overflow: TextOverflow.ellipsis))));
135+
}
136+
}
137+
138+
enum ZulipWebUiKitButtonAttention {
139+
high,
140+
medium,
141+
// low,
142+
}
143+
144+
enum ZulipWebUiKitButtonIntent {
145+
// neutral,
146+
// warning,
147+
// danger,
148+
info,
149+
// success,
150+
// brand,
151+
}
2152

3153
/// Apply [Transform.scale] to the child widget when tapped, and reset its scale
4154
/// when released, while animating the transitions.

‎lib/widgets/theme.dart

+49
Original file line numberDiff line numberDiff line change
@@ -138,8 +138,15 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
138138
bgTopBar: const Color(0xfff5f5f5),
139139
borderBar: Colors.black.withValues(alpha: 0.2),
140140
borderMenuButtonSelected: Colors.black.withValues(alpha: 0.2),
141+
btnBgAttHighIntInfoActive: const Color(0xff1e41d3),
142+
btnBgAttHighIntInfoNormal: const Color(0xff3c6bff),
143+
btnBgAttMediumIntInfoActive: const Color(0xff3c6bff).withValues(alpha: 0.22),
144+
btnBgAttMediumIntInfoNormal: const Color(0xff3c6bff).withValues(alpha: 0.12),
145+
btnLabelAttHigh: const Color(0xffffffff),
141146
btnLabelAttLowIntDanger: const Color(0xffc0070a),
142147
btnLabelAttMediumIntDanger: const Color(0xffac0508),
148+
btnLabelAttMediumIntInfo: const Color(0xff1027a6),
149+
btnShadowAttMed: const Color(0xff000000).withValues(alpha: 0.20),
143150
composeBoxBg: const Color(0xffffffff),
144151
contextMenuCancelText: const Color(0xff222222),
145152
contextMenuItemBg: const Color(0xff6159e1),
@@ -188,8 +195,15 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
188195
bgTopBar: const Color(0xff242424),
189196
borderBar: const Color(0xffffffff).withValues(alpha: 0.1),
190197
borderMenuButtonSelected: Colors.white.withValues(alpha: 0.1),
198+
btnBgAttHighIntInfoActive: const Color(0xff1e41d3),
199+
btnBgAttHighIntInfoNormal: const Color(0xff1e41d3),
200+
btnBgAttMediumIntInfoActive: const Color(0xff97b6fe).withValues(alpha: 0.12),
201+
btnBgAttMediumIntInfoNormal: const Color(0xff97b6fe).withValues(alpha: 0.12),
202+
btnLabelAttHigh: const Color(0xffffffff).withValues(alpha: 0.85),
191203
btnLabelAttLowIntDanger: const Color(0xffff8b7c),
192204
btnLabelAttMediumIntDanger: const Color(0xffff8b7c),
205+
btnLabelAttMediumIntInfo: const Color(0xff97b6fe),
206+
btnShadowAttMed: const Color(0xffffffff).withValues(alpha: 0.21),
193207
composeBoxBg: const Color(0xff0f0f0f),
194208
contextMenuCancelText: const Color(0xffffffff).withValues(alpha: 0.75),
195209
contextMenuItemBg: const Color(0xff7977fe),
@@ -246,8 +260,15 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
246260
required this.bgTopBar,
247261
required this.borderBar,
248262
required this.borderMenuButtonSelected,
263+
required this.btnBgAttHighIntInfoActive,
264+
required this.btnBgAttHighIntInfoNormal,
265+
required this.btnBgAttMediumIntInfoActive,
266+
required this.btnBgAttMediumIntInfoNormal,
267+
required this.btnLabelAttHigh,
249268
required this.btnLabelAttLowIntDanger,
250269
required this.btnLabelAttMediumIntDanger,
270+
required this.btnLabelAttMediumIntInfo,
271+
required this.btnShadowAttMed,
251272
required this.composeBoxBg,
252273
required this.contextMenuCancelText,
253274
required this.contextMenuItemBg,
@@ -305,8 +326,15 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
305326
final Color bgTopBar;
306327
final Color borderBar;
307328
final Color borderMenuButtonSelected;
329+
final Color btnBgAttHighIntInfoActive;
330+
final Color btnBgAttHighIntInfoNormal;
331+
final Color btnBgAttMediumIntInfoActive;
332+
final Color btnBgAttMediumIntInfoNormal;
333+
final Color btnLabelAttHigh;
308334
final Color btnLabelAttLowIntDanger;
309335
final Color btnLabelAttMediumIntDanger;
336+
final Color btnLabelAttMediumIntInfo;
337+
final Color btnShadowAttMed;
310338
final Color composeBoxBg;
311339
final Color contextMenuCancelText;
312340
final Color contextMenuItemBg;
@@ -359,8 +387,15 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
359387
Color? bgTopBar,
360388
Color? borderBar,
361389
Color? borderMenuButtonSelected,
390+
Color? btnBgAttHighIntInfoActive,
391+
Color? btnBgAttHighIntInfoNormal,
392+
Color? btnBgAttMediumIntInfoActive,
393+
Color? btnBgAttMediumIntInfoNormal,
394+
Color? btnLabelAttHigh,
362395
Color? btnLabelAttLowIntDanger,
363396
Color? btnLabelAttMediumIntDanger,
397+
Color? btnLabelAttMediumIntInfo,
398+
Color? btnShadowAttMed,
364399
Color? composeBoxBg,
365400
Color? contextMenuCancelText,
366401
Color? contextMenuItemBg,
@@ -408,8 +443,15 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
408443
bgTopBar: bgTopBar ?? this.bgTopBar,
409444
borderBar: borderBar ?? this.borderBar,
410445
borderMenuButtonSelected: borderMenuButtonSelected ?? this.borderMenuButtonSelected,
446+
btnBgAttHighIntInfoActive: btnBgAttHighIntInfoActive ?? this.btnBgAttHighIntInfoActive,
447+
btnBgAttHighIntInfoNormal: btnBgAttHighIntInfoNormal ?? this.btnBgAttHighIntInfoNormal,
448+
btnBgAttMediumIntInfoActive: btnBgAttMediumIntInfoActive ?? this.btnBgAttMediumIntInfoActive,
449+
btnBgAttMediumIntInfoNormal: btnBgAttMediumIntInfoNormal ?? this.btnBgAttMediumIntInfoNormal,
450+
btnLabelAttHigh: btnLabelAttHigh ?? this.btnLabelAttHigh,
411451
btnLabelAttLowIntDanger: btnLabelAttLowIntDanger ?? this.btnLabelAttLowIntDanger,
412452
btnLabelAttMediumIntDanger: btnLabelAttMediumIntDanger ?? this.btnLabelAttMediumIntDanger,
453+
btnLabelAttMediumIntInfo: btnLabelAttMediumIntInfo ?? this.btnLabelAttMediumIntInfo,
454+
btnShadowAttMed: btnShadowAttMed ?? this.btnShadowAttMed,
413455
composeBoxBg: composeBoxBg ?? this.composeBoxBg,
414456
contextMenuCancelText: contextMenuCancelText ?? this.contextMenuCancelText,
415457
contextMenuItemBg: contextMenuItemBg ?? this.contextMenuItemBg,
@@ -464,8 +506,15 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
464506
bgTopBar: Color.lerp(bgTopBar, other.bgTopBar, t)!,
465507
borderBar: Color.lerp(borderBar, other.borderBar, t)!,
466508
borderMenuButtonSelected: Color.lerp(borderMenuButtonSelected, other.borderMenuButtonSelected, t)!,
509+
btnBgAttHighIntInfoActive: Color.lerp(btnBgAttHighIntInfoActive, other.btnBgAttHighIntInfoActive, t)!,
510+
btnBgAttHighIntInfoNormal: Color.lerp(btnBgAttHighIntInfoNormal, other.btnBgAttHighIntInfoNormal, t)!,
511+
btnBgAttMediumIntInfoActive: Color.lerp(btnBgAttMediumIntInfoActive, other.btnBgAttMediumIntInfoActive, t)!,
512+
btnBgAttMediumIntInfoNormal: Color.lerp(btnBgAttMediumIntInfoNormal, other.btnBgAttMediumIntInfoNormal, t)!,
513+
btnLabelAttHigh: Color.lerp(btnLabelAttHigh, other.btnLabelAttHigh, t)!,
467514
btnLabelAttLowIntDanger: Color.lerp(btnLabelAttLowIntDanger, other.btnLabelAttLowIntDanger, t)!,
468515
btnLabelAttMediumIntDanger: Color.lerp(btnLabelAttMediumIntDanger, other.btnLabelAttMediumIntDanger, t)!,
516+
btnLabelAttMediumIntInfo: Color.lerp(btnLabelAttMediumIntInfo, other.btnLabelAttMediumIntInfo, t)!,
517+
btnShadowAttMed: Color.lerp(btnShadowAttMed, other.btnShadowAttMed, t)!,
469518
composeBoxBg: Color.lerp(composeBoxBg, other.composeBoxBg, t)!,
470519
contextMenuCancelText: Color.lerp(contextMenuCancelText, other.contextMenuCancelText, t)!,
471520
contextMenuItemBg: Color.lerp(contextMenuItemBg, other.contextMenuItemBg, t)!,

‎test/widgets/button_test.dart

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import 'dart:math';
2+
3+
import 'package:checks/checks.dart';
4+
import 'package:flutter_test/flutter_test.dart';
5+
import 'package:flutter/material.dart';
6+
import 'package:legacy_checks/legacy_checks.dart';
7+
import 'package:zulip/widgets/button.dart';
8+
9+
import '../flutter_checks.dart';
10+
import '../model/binding.dart';
11+
import 'test_app.dart';
12+
import 'text_test.dart';
13+
14+
15+
void main() {
16+
TestZulipBinding.ensureInitialized();
17+
18+
group('ZulipWebUiKitButton', () {
19+
final textScaleFactorVariants = ValueVariant(Set.of(kTextScaleFactors));
20+
testWidgets('button and touch-target heights', (tester) async {
21+
addTearDown(testBinding.reset);
22+
tester.platformDispatcher.textScaleFactorTestValue = textScaleFactorVariants.currentValue!;
23+
addTearDown(tester.platformDispatcher.clearTextScaleFactorTestValue);
24+
25+
final buttonFinder = find.byType(ZulipWebUiKitButton);
26+
27+
int numTapsHandled = 0;
28+
await tester.pumpWidget(TestZulipApp(
29+
child: UnconstrainedBox(
30+
child: ZulipWebUiKitButton(
31+
label: 'Cancel',
32+
onPressed: () => numTapsHandled++))));
33+
await tester.pump();
34+
35+
final element = tester.element(buttonFinder);
36+
final renderObject = element.renderObject as RenderBox;
37+
final width = renderObject.size.width;
38+
final buttonTopLeft = tester.getTopLeft(buttonFinder);
39+
final buttonCenter = tester.getCenter(buttonFinder);
40+
check(element).size.isNotNull().height.equals(44); // includes outer padding
41+
42+
// Outer padding responds to taps, not just the painted part.
43+
int numTaps = 0;
44+
for (double y = 0; y < 44; y++) {
45+
await tester.tapAt(Offset(buttonCenter.dx, y + buttonTopLeft.dy));
46+
numTaps++;
47+
}
48+
check(numTapsHandled).equals(numTaps);
49+
50+
final textScaler = TextScaler.linear(textScaleFactorVariants.currentValue!)
51+
.clamp(maxScaleFactor: 1.5);
52+
final expectedButtonHeight = max(28.0, // configured min height
53+
(textScaler.scale(17) * 1.20).roundToDouble() // text height
54+
+ 4 + 4); // vertical padding
55+
56+
// Rounded rectangle paints with the intended height…
57+
final expectedRRect = RRect.fromLTRBR(
58+
0, 0, // zero relative to the position at this paint step
59+
width, expectedButtonHeight, Radius.circular(4));
60+
check(renderObject).legacyMatcher(
61+
// `paints` isn't a [Matcher] so we wrap it with `equals`;
62+
// awkward but it works
63+
equals(paints..drrect(outer: expectedRRect)));
64+
65+
// …and that height leaves at least 4px for outer vertical padding.
66+
check(expectedButtonHeight).isLessOrEqual(44 - 2 - 2);
67+
}, variant: textScaleFactorVariants);
68+
});
69+
}

0 commit comments

Comments
 (0)