From 51b4172d3e926e9fa2c87fd1be4f2c2ec5b4a71b Mon Sep 17 00:00:00 2001 From: Luke Walton Date: Wed, 6 Nov 2024 16:50:43 +0000 Subject: [PATCH] fix(UX-1303): Update avatar boarder width (#202) test(UX-1305): Update avatar test test: Add a log on debugFillPropertiesTest if it fails fix(UX-1298): ZetaDialog button overflow --- example/macos/Podfile.lock | 12 +++---- lib/src/components/avatars/avatar.dart | 38 +++++++++++++-------- lib/src/components/buttons/button.dart | 9 +++-- lib/src/components/dialog/dialog.dart | 4 +++ test/src/components/avatar/avatar_test.dart | 4 +-- test/test_utils/utils.dart | 9 ++++- 6 files changed, 50 insertions(+), 26 deletions(-) diff --git a/example/macos/Podfile.lock b/example/macos/Podfile.lock index 4d2c877c..fbd492e5 100644 --- a/example/macos/Podfile.lock +++ b/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,8 +26,8 @@ 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 @@ -35,8 +35,8 @@ 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 diff --git a/lib/src/components/avatars/avatar.dart b/lib/src/components/avatars/avatar.dart index 79453f2d..145d9e7c 100644 --- a/lib/src/components/avatars/avatar.dart +++ b/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('size', size)) ..add(DiagnosticsProperty('name', initials)) - ..add(DiagnosticsProperty('specialStatus', lowerBadge)) - ..add(DiagnosticsProperty('badge', upperBadge)) + ..add(DiagnosticsProperty('lowerBadge', lowerBadge)) + ..add(DiagnosticsProperty('upperBadge', upperBadge)) ..add(DiagnosticsProperty('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; } } diff --git a/lib/src/components/buttons/button.dart b/lib/src/components/buttons/button.dart index c6e8f590..63acbfb9 100644 --- a/lib/src/components/buttons/button.dart +++ b/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( diff --git a/lib/src/components/dialog/dialog.dart b/lib/src/components/dialog/dialog.dart index fb051c06..e5ac4f5e 100644 --- a/lib/src/components/dialog/dialog.dart +++ b/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( diff --git a/test/src/components/avatar/avatar_test.dart b/test/src/components/avatar/avatar_test.dart index 10ab2880..528d5aca 100644 --- a/test/src/components/avatar/avatar_test.dart +++ b/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"', diff --git a/test/test_utils/utils.dart b/test/test_utils/utils.dart index ec5c9704..406d598e 100644 --- a/test/test_utils/utils.dart +++ b/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 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; + } }); }); }