button: Implement the "icon button" component in the Figma

Author: chrisbobbe

lib/widgets/button.dart

@@ -213,6 +213,45 @@ enum ZulipWebUiKitButtonSize {
   normal,
 }
 
+/// The "icon button" component in the Figma.
+///
+/// See Figma:
+///   https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=7728-10468&m=dev
+class ZulipIconButton extends StatelessWidget {
+  const ZulipIconButton({
+    super.key,
+    required this.icon,
+    required this.onPressed,
+  });
+
+  final IconData icon;
+  final VoidCallback onPressed;
+
+  @override
+  Widget build(BuildContext context) {
+    final designVariables = DesignVariables.of(context);
+
+    // Really `fg-05` from the Zulip Web UI Kit palette,
+    // but this seems at least as good as that.
+    final touchFeedbackColor = designVariables.foreground.withFadedAlpha(0.05);
+
+    return IconButton(
+      color: designVariables.icon,
+      iconSize: 24,
+      icon: Icon(icon),
+      onPressed: onPressed,
+      style: IconButton.styleFrom(
+        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+        fixedSize: Size.square(40),
+
+        // TODO(#417): Disable splash effects for all buttons globally.
+        splashFactory: NoSplash.splashFactory,
+        highlightColor: touchFeedbackColor,
+        shape: const RoundedRectangleBorder(
+          borderRadius: BorderRadius.all(Radius.circular(4)))));
+  }
+}
+
 /// Apply [Transform.scale] to the child widget when tapped, and reset its scale
 /// when released, while animating the transitions.
 class AnimatedScaleOnTap extends StatefulWidget {

test/widgets/button_test.dart

@@ -5,6 +5,7 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:flutter/material.dart';
 import 'package:legacy_checks/legacy_checks.dart';
 import 'package:zulip/widgets/button.dart';
+import 'package:zulip/widgets/icons.dart';
 
 import '../flutter_checks.dart';
 import '../model/binding.dart';
@@ -96,4 +97,23 @@ void main() {
     testVerticalOuterPadding(sizeVariant: ZulipWebUiKitButtonSize.small);
     testVerticalOuterPadding(sizeVariant: ZulipWebUiKitButtonSize.normal);
   });
+
+  group('ZulipIconButton', () {
+    testWidgets('occupies a 40px square', (tester) async {
+      addTearDown(testBinding.reset);
+
+      await tester.pumpWidget(TestZulipApp(
+        child: UnconstrainedBox(
+          child: ZulipIconButton(
+            icon: ZulipIcons.follow,
+            onPressed: () {}))));
+      await tester.pump();
+
+      final element = tester.element(find.byType(ZulipIconButton));
+      final renderObject = element.renderObject as RenderBox;
+      check(renderObject).size.equals(Size.square(40));
+    });
+
+    // TODO test that the touch feedback fills the whole square
+  });
 }