fix(UX-1303): Update avatar boarder width

example/macos/Podfile.lock

@@ -6,7 +6,7 @@ PODS:
   - shared_preferences_foundation (0.0.1):
     - Flutter
     - FlutterMacOS
-  - sqflite (0.0.3):
+  - sqflite_darwin (0.0.4):
     - Flutter
     - FlutterMacOS
   - url_launcher_macos (0.0.1):
@@ -16,7 +16,7 @@ DEPENDENCIES:
   - FlutterMacOS (from `Flutter/ephemeral`)
   - path_provider_foundation (from `Flutter/ephemeral/.symlinks/plugins/path_provider_foundation/darwin`)
   - shared_preferences_foundation (from `Flutter/ephemeral/.symlinks/plugins/shared_preferences_foundation/darwin`)
-  - sqflite (from `Flutter/ephemeral/.symlinks/plugins/sqflite/darwin`)
+  - sqflite_darwin (from `Flutter/ephemeral/.symlinks/plugins/sqflite_darwin/darwin`)
   - url_launcher_macos (from `Flutter/ephemeral/.symlinks/plugins/url_launcher_macos/macos`)
 
 EXTERNAL SOURCES:
@@ -26,17 +26,17 @@ EXTERNAL SOURCES:
     :path: Flutter/ephemeral/.symlinks/plugins/path_provider_foundation/darwin
   shared_preferences_foundation:
     :path: Flutter/ephemeral/.symlinks/plugins/shared_preferences_foundation/darwin
-  sqflite:
-    :path: Flutter/ephemeral/.symlinks/plugins/sqflite/darwin
+  sqflite_darwin:
+    :path: Flutter/ephemeral/.symlinks/plugins/sqflite_darwin/darwin
   url_launcher_macos:
     :path: Flutter/ephemeral/.symlinks/plugins/url_launcher_macos/macos
 
 SPEC CHECKSUMS:
   FlutterMacOS: 8f6f14fa908a6fb3fba0cd85dbd81ec4b251fb24
   path_provider_foundation: 2b6b4c569c0fb62ec74538f866245ac84301af46
   shared_preferences_foundation: fcdcbc04712aee1108ac7fda236f363274528f78
-  sqflite: 673a0e54cc04b7d6dba8d24fb8095b31c3a99eec
-  url_launcher_macos: 5f437abeda8c85500ceb03f5c1938a8c5a705399
+  sqflite_darwin: a553b1fd6fe66f53bbb0fe5b4f5bab93f08d7a13
+  url_launcher_macos: c82c93949963e55b228a30115bd219499a6fe404
 
 PODFILE CHECKSUM: 353c8bcc5d5b0994e508d035b5431cfe18c1dea7
 

lib/src/components/avatars/avatar.dart

@@ -35,6 +35,8 @@ enum ZetaAvatarSize {
 }
 
 /// An avatar is a visual representation of a user or entity.
+///
+/// It is recommended to use [ZetaAvatar] with [ZetaAvatarBadge] for status and notification badges, but any widget can be used.
 /// {@category Components}
 ///
 /// Figma: https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?type=design&node-id=20816-388
@@ -137,10 +139,10 @@ class ZetaAvatar extends ZetaStatelessWidget {
   final Color? borderColor;
 
   /// Status badge shown at lower right corner of avatar.
-  final ZetaAvatarBadge? lowerBadge;
+  final Widget? lowerBadge;
 
   /// Notification Badge shown at top right corner of avatar.
-  final ZetaAvatarBadge? upperBadge;
+  final Widget? upperBadge;
 
   /// Value passed into wrapping [Semantics] widget.
   ///
@@ -191,8 +193,8 @@ class ZetaAvatar extends ZetaStatelessWidget {
     String? initials,
     Color? backgroundColor,
     Color? borderColor,
-    ZetaAvatarBadge? lowerBadge,
-    ZetaAvatarBadge? upperBadge,
+    Widget? lowerBadge,
+    Widget? upperBadge,
     String? label,
     TextStyle? labelTextStyle,
     int? labelMaxLines,
@@ -301,9 +303,9 @@ class ZetaAvatar extends ZetaStatelessWidget {
                       right: Zeta.of(context).spacing.none,
                       child: Semantics(
                         value: semanticLowerBadgeLabel,
-                        child: upperBadge!.copyWith(
-                          size: size,
-                        ),
+                        child: upperBadge.runtimeType == ZetaAvatarBadge
+                            ? (upperBadge! as ZetaAvatarBadge).copyWith(size: size)
+                            : upperBadge,
                       ),
                     ),
                   if (lowerBadge != null)
@@ -312,7 +314,9 @@ class ZetaAvatar extends ZetaStatelessWidget {
                       bottom: Zeta.of(context).spacing.none,
                       child: Semantics(
                         value: semanticLowerBadgeLabel,
-                        child: lowerBadge!.copyWith(size: size),
+                        child: lowerBadge.runtimeType == ZetaAvatarBadge
+                            ? (lowerBadge! as ZetaAvatarBadge).copyWith(size: size)
+                            : upperBadge,
                       ),
                     ),
                 ],
@@ -348,8 +352,8 @@ class ZetaAvatar extends ZetaStatelessWidget {
     properties
       ..add(DiagnosticsProperty<ZetaAvatarSize>('size', size))
       ..add(DiagnosticsProperty<String?>('name', initials))
-      ..add(DiagnosticsProperty<ZetaAvatarBadge>('specialStatus', lowerBadge))
-      ..add(DiagnosticsProperty<ZetaAvatarBadge?>('badge', upperBadge))
+      ..add(DiagnosticsProperty<Widget>('lowerBadge', lowerBadge))
+      ..add(DiagnosticsProperty<Widget?>('upperBadge', upperBadge))
       ..add(DiagnosticsProperty<Color?>('backgroundColor', backgroundColor))
       ..add(ColorProperty('statusColor', borderColor))
       ..add(StringProperty('semanticUpperBadgeValue', semanticUpperBadgeLabel))
@@ -400,20 +404,26 @@ extension on ZetaAvatarSize {
   }
 
   double borderSize(BuildContext context) {
+    // TODO(UX-1304): Awaiting updated design specs for border size
     switch (this) {
       case ZetaAvatarSize.xxxl:
-        return 11;
+        return 11.12;
       case ZetaAvatarSize.xxl:
+        return 6.67;
       case ZetaAvatarSize.xl:
+        return 4.45;
       case ZetaAvatarSize.l:
+        return 3.56;
       case ZetaAvatarSize.m:
-        return Zeta.of(context).spacing.minimum;
-
+        return 2.66;
       case ZetaAvatarSize.s:
+        return 2.22;
       case ZetaAvatarSize.xs:
+        return 2;
       case ZetaAvatarSize.xxs:
+        return 1.78;
       case ZetaAvatarSize.xxxs:
-        return ZetaBorders.medium;
+        return 1.33;
     }
   }
 

lib/src/components/buttons/button.dart

@@ -202,9 +202,12 @@ class ZetaButton extends ZetaStatelessWidget {
                     size: iconSize,
                   ),
                 if (label.isNotEmpty)
-                  Text(
-                    label,
-                    style: _textStyle,
+                  Flexible(
+                    child: Text(
+                      label,
+                      style: _textStyle,
+                      textAlign: TextAlign.center,
+                    ).paddingVertical(Zeta.of(context).spacing.minimum),
                   ),
                 if (trailingIcon != null)
                   Icon(

lib/src/components/dialog/dialog.dart

@@ -106,6 +106,10 @@ class _ZetaDialog extends ZetaStatelessWidget {
       rounded: context.rounded,
       child: AlertDialog(
         surfaceTintColor: zeta.colors.surfacePrimary,
+        insetPadding: EdgeInsets.symmetric(
+          horizontal: Zeta.of(context).spacing.xl,
+          vertical: Zeta.of(context).spacing.xl_2,
+        ),
         shape: RoundedRectangleBorder(borderRadius: Zeta.of(context).radius.large),
         title: icon != null || title != null
             ? Column(

test/src/components/avatar/avatar_test.dart

@@ -48,8 +48,8 @@ void main() {
     final debugFillProperties = {
       'size': 'ZetaAvatarSize.xl',
       'name': 'null',
-      'specialStatus': 'null',
-      'badge': 'null',
+      'upperBadge': 'null',
+      'lowerBadge': 'null',
       'backgroundColor': 'null',
       'statusColor': 'null',
       'semanticUpperBadgeValue': '"upperBadge"',

test/test_utils/utils.dart

@@ -1,3 +1,5 @@
+// ignore_for_file: avoid_print
+
 import 'dart:io';
 
 import 'package:collection/collection.dart';
@@ -77,7 +79,12 @@ void debugFillPropertiesTest(Widget widget, Map<String, dynamic> properties) {
     widget.debugFillProperties(diagnostics);
 
     properties.forEach((key, value) {
-      expect(diagnostics.finder(key), value);
+      try {
+        expect(diagnostics.finder(key), value);
+      } catch (e) {
+        print('Error on $key');
+        rethrow;
+      }
     });
   });
 }