button [nfc]: Add "list button" variant, factored into MenuButton widget

And rename MenuButton to ZulipMenuItemButton, since it's no longer
only about the Figma's "menu button" component.

Author: chrisbobbe

lib/widgets/action_sheet.dart

@@ -152,7 +152,7 @@ abstract class ActionSheetMenuItemButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final zulipLocalizations = ZulipLocalizations.of(context);
-    return MenuButton(
+    return ZulipMenuItemButton(
       icon: icon,
       label: label(zulipLocalizations),
       onPressed: () => _handlePressed(context),

lib/widgets/button.dart

@@ -259,7 +259,7 @@ class _AnimatedScaleOnTapState extends State<AnimatedScaleOnTap> {
   }
 }
 
-/// The rounded-rectangle shape and 1-pixel spacing for a run of [MenuButton]s.
+/// The rounded-rectangle shape and 1-pixel spacing for a run of [ZulipMenuItemButton]s.
 class MenuButtonsShape extends StatelessWidget {
   const MenuButtonsShape({
     super.key,
@@ -277,21 +277,25 @@ class MenuButtonsShape extends StatelessWidget {
   }
 }
 
-/// The "menu button" component in Figma.
+/// The "menu button" or "list button" component in Figma.
+///
+/// Use [ZulipMenuItemButtonStyle] to choose between components.
 ///
 /// 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({
+class ZulipMenuItemButton extends StatelessWidget {
+  const ZulipMenuItemButton({
     super.key,
+    this.style = ZulipMenuItemButtonStyle.menu,
     required this.label,
     required this.onPressed,
     this.icon,
     this.toggle,
   });
 
+  final ZulipMenuItemButtonStyle style;
   final String label;
   final VoidCallback onPressed;
   final IconData? icon;
@@ -300,22 +304,63 @@ class MenuButton extends StatelessWidget {
   ///
   /// See Figma:
   ///   https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6070-60682&m=dev
+  // TODO(design) Is the toggle option meant only for
+  //   [ZulipMenuItemButtonStyle.menu]?
   final Widget? toggle;
 
-  static double itemSpacing = 16;
+  double get itemSpacingAndEndPadding => switch (style) {
+    ZulipMenuItemButtonStyle.menu => 16,
+    ZulipMenuItemButtonStyle.list => 12,
+  };
 
   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.'),
+        ErrorDescription('ZulipMenuItemButton widgets require a MenuButtonsShape ancestor.'),
       ]);
     }());
     return true;
   }
 
+  WidgetStateColor _backgroundColor(DesignVariables designVariables) {
+    switch (style) {
+      case ZulipMenuItemButtonStyle.menu:
+        return WidgetStateColor.fromMap({
+          WidgetState.pressed: designVariables.contextMenuItemBg.withFadedAlpha(0.20),
+          ~WidgetState.pressed: designVariables.contextMenuItemBg.withFadedAlpha(0.12),
+        });
+      case ZulipMenuItemButtonStyle.list:
+        return WidgetStateColor.fromMap({
+          WidgetState.pressed: designVariables.listMenuItemBg.withFadedAlpha(0.7),
+          ~WidgetState.pressed: designVariables.listMenuItemBg.withFadedAlpha(0.35),
+        });
+    }
+  }
+
+  Color _labelColor(DesignVariables designVariables) {
+    return switch (style) {
+      ZulipMenuItemButtonStyle.menu => designVariables.contextMenuItemText,
+      ZulipMenuItemButtonStyle.list => designVariables.listMenuItemText,
+    };
+  }
+
+  double _labelWght() {
+    return switch (style) {
+      ZulipMenuItemButtonStyle.menu => 600,
+      ZulipMenuItemButtonStyle.list => 500,
+    };
+  }
+
+  Color _iconColor(DesignVariables designVariables) {
+    return switch (style) {
+      ZulipMenuItemButtonStyle.menu => designVariables.contextMenuItemIcon,
+      ZulipMenuItemButtonStyle.list => designVariables.listMenuItemIcon,
+    };
+  }
+
   @override
   Widget build(BuildContext context) {
     _debugCheckShapeAncestor(context);
@@ -331,35 +376,48 @@ class MenuButton extends StatelessWidget {
             // This Material widget gives us 12px padding before the icon --
             // or more or less, depending on Theme.of(context).visualDensity,
             // hence the `assert` above.
-            padding: EdgeInsetsDirectional.only(start: itemSpacing - 12),
+            padding: EdgeInsetsDirectional.only(start: itemSpacingAndEndPadding - 12),
 
             child: Row(
               mainAxisSize: MainAxisSize.min,
               crossAxisAlignment: CrossAxisAlignment.center,
-              spacing: itemSpacing,
+              spacing: itemSpacingAndEndPadding,
               children: [
                 if (toggle != null) toggle!,
-                if (icon != null) Icon(icon!, color: designVariables.contextMenuItemIcon),
+                if (icon != null) Icon(icon!, color: _iconColor(designVariables)),
               ]))
         : null,
       style: MenuItemButton.styleFrom(
         minimumSize: Size.fromHeight(48),
-        padding: const EdgeInsets.symmetric(horizontal: 16),
-        foregroundColor: designVariables.contextMenuItemText,
+        padding: EdgeInsetsDirectional.only(start: 16, end: itemSpacingAndEndPadding),
+        foregroundColor: _labelColor(designVariables),
         splashFactory: NoSplash.splashFactory,
-      ).copyWith(backgroundColor: WidgetStateColor.resolveWith((states) =>
-          designVariables.contextMenuItemBg.withFadedAlpha(
-            states.contains(WidgetState.pressed) ? 0.20 : 0.12))),
+      ).copyWith(backgroundColor: _backgroundColor(designVariables)),
       onPressed: onPressed,
       child: Padding(
         padding: const EdgeInsets.symmetric(vertical: 4),
+        // TODO sublabel, for [ZulipMenuItemButtonStyle.list]
         child: Text(label,
           style: const TextStyle(fontSize: 20, height: 24 / 20)
-            .merge(weightVariableTextStyle(context, wght: 600))),
-      ));
+            .merge(weightVariableTextStyle(context, wght: _labelWght())))));
   }
 }
 
+/// The style of a [ZulipMenuItemButton].
+enum ZulipMenuItemButtonStyle {
+  /// The purple "menu button" component in Figma, with 16px end padding.
+  ///
+  /// See Figma:
+  ///   https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3302-20443&m=dev
+  menu,
+
+  /// The gray "list button" component in Figma, with 12px end padding.
+  ///
+  /// See Figma:
+  ///   https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=5000-52868&m=dev
+  list,
+}
+
 /// The "toggle" component in Figma.
 ///
 /// See Figma:

lib/widgets/profile.dart

@@ -139,7 +139,7 @@ class _InvisibleModeToggle extends StatelessWidget {
           requestedValue
             ? zulipLocalizations.turnOnInvisibleModeErrorTitle
             : zulipLocalizations.turnOffInvisibleModeErrorTitle),
-        builder: (value, handleRequestNewValue) => MenuButton(
+        builder: (value, handleRequestNewValue) => ZulipMenuItemButton(
           label: zulipLocalizations.invisibleMode,
           onPressed: () => handleRequestNewValue(!value),
           toggle: Toggle(value: value, onChanged: handleRequestNewValue))),

lib/widgets/theme.dart

@@ -171,6 +171,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     labelEdited: const HSLColor.fromAHSL(0.35, 0, 0, 0).toColor(),
     labelMenuButton: const Color(0xff222222),
     labelSearchPrompt: const Color(0xff000000).withValues(alpha: 0.5),
+    listMenuItemBg: const Color(0xffcbcdd6),
+    listMenuItemIcon: const Color(0xff9194a3),
+    listMenuItemText: const Color(0xff2d303c),
     mainBackground: const Color(0xfff0f0f0),
     neutralButtonBg: const Color(0xff8c84ae),
     neutralButtonLabel: const Color(0xff433d5c),
@@ -251,6 +254,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     labelEdited: const HSLColor.fromAHSL(0.35, 0, 0, 1).toColor(),
     labelMenuButton: const Color(0xffffffff).withValues(alpha: 0.85),
     labelSearchPrompt: const Color(0xffffffff).withValues(alpha: 0.5),
+    listMenuItemBg: const Color(0xff2d303c),
+    listMenuItemIcon: const Color(0xff767988),
+    listMenuItemText: const Color(0xffcbcdd6),
     mainBackground: const Color(0xff1d1d1d),
     neutralButtonBg: const Color(0xffd4d1e0),
     neutralButtonLabel: const Color(0xffa9a3c2),
@@ -339,6 +345,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.labelEdited,
     required this.labelMenuButton,
     required this.labelSearchPrompt,
+    required this.listMenuItemBg,
+    required this.listMenuItemIcon,
+    required this.listMenuItemText,
     required this.mainBackground,
     required this.neutralButtonBg,
     required this.neutralButtonLabel,
@@ -424,6 +433,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   final Color labelEdited;
   final Color labelMenuButton;
   final Color labelSearchPrompt;
+  final Color listMenuItemBg;
+  final Color listMenuItemIcon;
+  final Color listMenuItemText;
   final Color mainBackground;
   final Color neutralButtonBg;
   final Color neutralButtonLabel;
@@ -504,6 +516,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? labelEdited,
     Color? labelMenuButton,
     Color? labelSearchPrompt,
+    Color? listMenuItemBg,
+    Color? listMenuItemIcon,
+    Color? listMenuItemText,
     Color? mainBackground,
     Color? neutralButtonBg,
     Color? neutralButtonLabel,
@@ -579,6 +594,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       labelEdited: labelEdited ?? this.labelEdited,
       labelMenuButton: labelMenuButton ?? this.labelMenuButton,
       labelSearchPrompt: labelSearchPrompt ?? this.labelSearchPrompt,
+      listMenuItemBg: listMenuItemBg ?? this.listMenuItemBg,
+      listMenuItemIcon: listMenuItemIcon ?? this.listMenuItemIcon,
+      listMenuItemText: listMenuItemText ?? this.listMenuItemText,
       mainBackground: mainBackground ?? this.mainBackground,
       neutralButtonBg: neutralButtonBg ?? this.neutralButtonBg,
       neutralButtonLabel: neutralButtonLabel ?? this.neutralButtonLabel,
@@ -661,6 +679,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       labelEdited: Color.lerp(labelEdited, other.labelEdited, t)!,
       labelMenuButton: Color.lerp(labelMenuButton, other.labelMenuButton, t)!,
       labelSearchPrompt: Color.lerp(labelSearchPrompt, other.labelSearchPrompt, t)!,
+      listMenuItemBg: Color.lerp(listMenuItemBg, other.listMenuItemBg, t)!,
+      listMenuItemIcon: Color.lerp(listMenuItemIcon, other.listMenuItemIcon, t)!,
+      listMenuItemText: Color.lerp(listMenuItemText, other.listMenuItemText, t)!,
       mainBackground: Color.lerp(mainBackground, other.mainBackground, t)!,
       neutralButtonBg: Color.lerp(neutralButtonBg, other.neutralButtonBg, t)!,
       neutralButtonLabel: Color.lerp(neutralButtonLabel, other.neutralButtonLabel, t)!,

test/widgets/profile_test.dart

@@ -379,7 +379,7 @@ void main() {
   });
 
   group('invisible mode', () {
-    final findRow = find.widgetWithText(MenuButton, 'Invisible mode');
+    final findRow = find.widgetWithText(ZulipMenuItemButton, 'Invisible mode');
     final findToggle = find.descendant(of: findRow, matching: find.byType(Toggle));
 
     void checkDoesNotAppear(WidgetTester tester) {