button [nfc]: Extract MenuButton{,sShape} out to here, from action sheet

Author: chrisbobbe

lib/widgets/action_sheet.dart

@@ -18,6 +18,7 @@ import '../model/emoji.dart';
 import '../model/internal_link.dart';
 import '../model/narrow.dart';
 import 'actions.dart';
+import 'button.dart';
 import 'color.dart';
 import 'compose_box.dart';
 import 'content.dart';
@@ -90,10 +91,7 @@ void _showActionSheet(
                           color: designVariables.bgContextMenu,
                           child: SingleChildScrollView(
                             padding: const EdgeInsets.symmetric(vertical: 8),
-                            child: ClipRRect(
-                              borderRadius: BorderRadius.circular(7),
-                              child: Column(spacing: 1,
-                                children: optionButtons))))),
+                            child: MenuButtonsShape(buttons: optionButtons)))),
                         const ActionSheetCancelButton(),
                       ]))),
               ]))));
@@ -153,22 +151,12 @@ abstract class ActionSheetMenuItemButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final designVariables = DesignVariables.of(context);
     final zulipLocalizations = ZulipLocalizations.of(context);
-    return MenuItemButton(
-      trailingIcon: Icon(icon, color: designVariables.contextMenuItemText),
-      style: MenuItemButton.styleFrom(
-        padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
-        foregroundColor: designVariables.contextMenuItemText,
-        splashFactory: NoSplash.splashFactory,
-      ).copyWith(backgroundColor: WidgetStateColor.resolveWith((states) =>
-          designVariables.contextMenuItemBg.withFadedAlpha(
-            states.contains(WidgetState.pressed) ? 0.20 : 0.12))),
+    return MenuButton(
+      icon: icon,
+      label: label(zulipLocalizations),
       onPressed: () => _handlePressed(context),
-      child: Text(label(zulipLocalizations),
-        style: const TextStyle(fontSize: 20, height: 24 / 20)
-          .merge(weightVariableTextStyle(context, wght: 600)),
-      ));
+    );
   }
 }
 

lib/widgets/button.dart

@@ -257,3 +257,75 @@ class _AnimatedScaleOnTapState extends State<AnimatedScaleOnTap> {
         child: widget.child));
   }
 }
+
+/// The rounded-rectangle shape and 1-pixel spacing for a run of [MenuButton]s.
+class MenuButtonsShape extends StatelessWidget {
+  const MenuButtonsShape({
+    super.key,
+    required this.buttons,
+  });
+
+  final List<Widget> buttons;
+
+  @override
+  Widget build(BuildContext context) {
+    return ClipRRect(
+      borderRadius: BorderRadius.circular(7),
+      child: Column(spacing: 1,
+        children: buttons));
+  }
+}
+
+/// The "menu button" component in Figma.
+///
+/// Must have a [MenuButtonsShape] ancestor.
+///
+/// See Figma:
+///   https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6070-60681&m=dev
+class MenuButton extends StatelessWidget {
+  const MenuButton({
+    super.key,
+    required this.label,
+    required this.onPressed,
+    this.icon,
+  });
+
+  final String label;
+  final VoidCallback onPressed;
+  final IconData? icon;
+
+  static bool _debugCheckShapeAncestor(BuildContext context) {
+    final ancestor = context.findAncestorWidgetOfExactType<MenuButtonsShape>();
+    assert(() {
+      if (ancestor != null) return true;
+      throw FlutterError.fromParts([
+        ErrorSummary('No MenuButtonsShape ancestor found.'),
+        ErrorDescription('MenuButton widgets require a MenuButtonsShape ancestor.'),
+      ]);
+    }());
+    return true;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    _debugCheckShapeAncestor(context);
+
+    final designVariables = DesignVariables.of(context);
+
+    return MenuItemButton(
+      trailingIcon: icon != null
+        ? Icon(icon, color: designVariables.contextMenuItemText)
+        : null,
+      style: MenuItemButton.styleFrom(
+        padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
+        foregroundColor: designVariables.contextMenuItemText,
+        splashFactory: NoSplash.splashFactory,
+      ).copyWith(backgroundColor: WidgetStateColor.resolveWith((states) =>
+          designVariables.contextMenuItemBg.withFadedAlpha(
+            states.contains(WidgetState.pressed) ? 0.20 : 0.12))),
+      onPressed: onPressed,
+      child: Text(label,
+        style: const TextStyle(fontSize: 20, height: 24 / 20)
+          .merge(weightVariableTextStyle(context, wght: 600))));
+  }
+}