From 74fee17dc5b9398da62476160887c8d43727c9e9 Mon Sep 17 00:00:00 2001 From: Luke Walton Date: Fri, 10 Jan 2025 10:57:57 +0000 Subject: [PATCH] chore: Rename ZetaBanner to ZetaSystemBanner to match Figma (#235) fix: remove capitals from issue_tracker url due to issue on pub.dev fix: Move Zebra head logo into library fix: Make ZetaAvatar._pixelSize extension private fix: Badge, button colors updated fix: Tag, chat item, list item now shrink rather than expands by default fix: Date and time inputs pass zeta context into their children feat: Make ZetaDialog public fix: Changed progress bar, notification list item shapes so they are not affected by contrast test: Update in page banner tests as banner no longer fully expands --- analysis_options.yaml | 1 + example/lib/home.dart | 2 +- example/lib/pages/assets/icons_example.dart | 2 +- .../lib/pages/components/banner_example.dart | 48 +-- .../components/system_banner_example.dart | 194 +++++++++++ example/macos/Podfile.lock | 2 +- .../pages/assets/icon_widgetbook.dart | 2 +- .../pages/components/banner_widgetbook.dart | 4 +- .../assets/logos}/zebra-logo-head.svg | 0 lib/src/components/avatars/avatar.dart | 90 ++--- lib/src/components/badges/label.dart | 33 +- lib/src/components/badges/priority_pill.dart | 40 +-- lib/src/components/badges/status_label.dart | 57 +--- lib/src/components/badges/tag.dart | 1 + .../bottom sheets/bottom_sheet.dart | 2 +- .../components/button_group/button_group.dart | 12 +- lib/src/components/buttons/button_style.dart | 34 +- lib/src/components/chat_item/chat_item.dart | 315 +++++++++--------- lib/src/components/components.dart | 2 +- .../components/contact_item/contact_item.dart | 1 + lib/src/components/date_input/date_input.dart | 2 +- lib/src/components/dialog/dialog.dart | 31 +- lib/src/components/dropdown/dropdown.dart | 6 + lib/src/components/fabs/fab.dart | 22 +- .../global_header/global_header.dart | 12 - .../in_page_banner/in_page_banner.dart | 56 +--- lib/src/components/list_item/list_item.dart | 1 + .../list_item/notification_list_item.dart | 6 +- lib/src/components/pagination/pagination.dart | 11 +- lib/src/components/progress/progress_bar.dart | 8 +- lib/src/components/slider/slider.dart | 3 + lib/src/components/stepper/stepper.dart | 1 + .../system_banner.dart} | 24 +- lib/src/components/time_input/time_input.dart | 2 +- lib/src/theme/breakpoints.dart | 12 +- lib/src/theme/contrast.dart | 18 +- lib/src/utils/enums.dart | 67 +++- pubspec.yaml | 5 +- test/src/components/banner/banner_test.dart | 52 +-- .../golden/in_page_banner_buttons.png | Bin 4385 -> 4654 bytes .../golden/in_page_banner_default.png | Bin 3925 -> 3959 bytes .../golden/in_page_banner_negative.png | Bin 3951 -> 3938 bytes .../golden/in_page_banner_positive.png | Bin 3841 -> 3839 bytes 43 files changed, 640 insertions(+), 541 deletions(-) create mode 100644 example/lib/pages/components/system_banner_example.dart rename {example/assets => lib/assets/logos}/zebra-logo-head.svg (100%) rename lib/src/components/{banner/banner.dart => system_banner/system_banner.dart} (88%) diff --git a/analysis_options.yaml b/analysis_options.yaml index 6bfc3f6f..22d452be 100644 --- a/analysis_options.yaml +++ b/analysis_options.yaml @@ -1 +1,2 @@ +# include: package:zds_analysis/analysis_options_lib_all_files.yaml include: package:zds_analysis/analysis_options_lib.yaml diff --git a/example/lib/home.dart b/example/lib/home.dart index dd32baf8..8446846d 100644 --- a/example/lib/home.dart +++ b/example/lib/home.dart @@ -4,7 +4,7 @@ import 'package:zeta_example/pages/components/accordion_example.dart'; import 'package:zeta_example/pages/components/avatar_rail_example.dart'; import 'package:zeta_example/pages/components/avatar_example.dart'; import 'package:zeta_example/pages/components/badges_example.dart'; -import 'package:zeta_example/pages/components/banner_example.dart'; +import 'package:zeta_example/pages/components/system_banner_example.dart'; import 'package:zeta_example/pages/components/bottom_sheet_example.dart'; import 'package:zeta_example/pages/components/breadcrumb_example.dart'; import 'package:zeta_example/pages/components/button_example.dart'; diff --git a/example/lib/pages/assets/icons_example.dart b/example/lib/pages/assets/icons_example.dart index e33d29de..92d85d4b 100644 --- a/example/lib/pages/assets/icons_example.dart +++ b/example/lib/pages/assets/icons_example.dart @@ -44,7 +44,7 @@ class _IconsExampleState extends State { onTap: () async { await Clipboard.setData(ClipboardData(text: 'ZetaIcons.' + e.key)); ScaffoldMessenger.of(context).showMaterialBanner( - ZetaBanner(context: context, title: 'Icon name copied'), + ZetaSystemBanner(context: context, title: 'Icon name copied'), ); await Future.delayed(Duration(seconds: 4)); ScaffoldMessenger.of(context).clearMaterialBanners(); diff --git a/example/lib/pages/components/banner_example.dart b/example/lib/pages/components/banner_example.dart index 9fb2a5c2..73dd7af9 100644 --- a/example/lib/pages/components/banner_example.dart +++ b/example/lib/pages/components/banner_example.dart @@ -19,34 +19,34 @@ class BannerExample extends StatelessWidget { children: [ Text('System Banner', style: ZetaTextStyles.displayMedium), _getTitle('Style variants'), - ZetaBanner( - type: ZetaBannerStatus.primary, + ZetaSystemBanner( + type: ZetaSystemBannerStatus.primary, title: 'Centered', context: context, titleCenter: true, leadingIcon: ZetaIcons.info, ), - ZetaBanner( - type: ZetaBannerStatus.primary, + ZetaSystemBanner( + type: ZetaSystemBannerStatus.primary, context: context, title: 'Title Left', ), - ZetaBanner( - type: ZetaBannerStatus.primary, + ZetaSystemBanner( + type: ZetaSystemBannerStatus.primary, context: context, title: 'Title left with arrow', titleCenter: true, trailing: ZetaIcon(ZetaIcons.chevron_right), ), - ZetaBanner( - type: ZetaBannerStatus.primary, + ZetaSystemBanner( + type: ZetaSystemBannerStatus.primary, title: 'Title left + Icon', titleCenter: true, context: context, leadingIcon: ZetaIcons.info, ), - ZetaBanner( - type: ZetaBannerStatus.primary, + ZetaSystemBanner( + type: ZetaSystemBannerStatus.primary, context: context, title: 'Title left + Icon with Arrow', titleCenter: true, @@ -54,10 +54,10 @@ class BannerExample extends StatelessWidget { trailing: IconButton( icon: ZetaIcon(ZetaIcons.chevron_right), onPressed: () { - ScaffoldMessenger.of(context).showMaterialBanner(ZetaBanner( + ScaffoldMessenger.of(context).showMaterialBanner(ZetaSystemBanner( title: 'Title', context: context, - type: ZetaBannerStatus.primary, + type: ZetaSystemBannerStatus.primary, trailing: IconButton( icon: ZetaIcon(ZetaIcons.close), onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(), @@ -67,8 +67,8 @@ class BannerExample extends StatelessWidget { ), ), _getTitle('Color variants'), - ZetaBanner( - type: ZetaBannerStatus.positive, + ZetaSystemBanner( + type: ZetaSystemBannerStatus.positive, context: context, title: 'Centered', titleCenter: true, @@ -76,10 +76,10 @@ class BannerExample extends StatelessWidget { trailing: IconButton( icon: ZetaIcon(ZetaIcons.chevron_right), onPressed: () { - ScaffoldMessenger.of(context).showMaterialBanner(ZetaBanner( + ScaffoldMessenger.of(context).showMaterialBanner(ZetaSystemBanner( title: 'Title', context: context, - type: ZetaBannerStatus.positive, + type: ZetaSystemBannerStatus.positive, trailing: IconButton( icon: ZetaIcon(ZetaIcons.close), onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(), @@ -88,8 +88,8 @@ class BannerExample extends StatelessWidget { }, ), ), - ZetaBanner( - type: ZetaBannerStatus.warning, + ZetaSystemBanner( + type: ZetaSystemBannerStatus.warning, title: 'Centered', context: context, titleCenter: true, @@ -97,10 +97,10 @@ class BannerExample extends StatelessWidget { trailing: IconButton( icon: ZetaIcon(ZetaIcons.chevron_right), onPressed: () { - ScaffoldMessenger.of(context).showMaterialBanner(ZetaBanner( + ScaffoldMessenger.of(context).showMaterialBanner(ZetaSystemBanner( title: 'Title', context: context, - type: ZetaBannerStatus.warning, + type: ZetaSystemBannerStatus.warning, trailing: IconButton( icon: ZetaIcon(ZetaIcons.close), onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(), @@ -109,8 +109,8 @@ class BannerExample extends StatelessWidget { }, ), ), - ZetaBanner( - type: ZetaBannerStatus.negative, + ZetaSystemBanner( + type: ZetaSystemBannerStatus.negative, title: 'Centered', context: context, titleCenter: true, @@ -118,10 +118,10 @@ class BannerExample extends StatelessWidget { trailing: IconButton( icon: ZetaIcon(ZetaIcons.chevron_right), onPressed: () { - ScaffoldMessenger.of(context).showMaterialBanner(ZetaBanner( + ScaffoldMessenger.of(context).showMaterialBanner(ZetaSystemBanner( title: 'Title', context: context, - type: ZetaBannerStatus.negative, + type: ZetaSystemBannerStatus.negative, trailing: IconButton( icon: ZetaIcon(ZetaIcons.close), onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(), diff --git a/example/lib/pages/components/system_banner_example.dart b/example/lib/pages/components/system_banner_example.dart new file mode 100644 index 00000000..73dd7af9 --- /dev/null +++ b/example/lib/pages/components/system_banner_example.dart @@ -0,0 +1,194 @@ +import 'package:flutter/material.dart'; +import 'package:zeta_example/widgets.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +class BannerExample extends StatelessWidget { + static const String name = 'Banner'; + + const BannerExample({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return ExampleScaffold( + name: BannerExample.name, + child: SingleChildScrollView( + child: Padding( + padding: EdgeInsets.all(20), + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text('System Banner', style: ZetaTextStyles.displayMedium), + _getTitle('Style variants'), + ZetaSystemBanner( + type: ZetaSystemBannerStatus.primary, + title: 'Centered', + context: context, + titleCenter: true, + leadingIcon: ZetaIcons.info, + ), + ZetaSystemBanner( + type: ZetaSystemBannerStatus.primary, + context: context, + title: 'Title Left', + ), + ZetaSystemBanner( + type: ZetaSystemBannerStatus.primary, + context: context, + title: 'Title left with arrow', + titleCenter: true, + trailing: ZetaIcon(ZetaIcons.chevron_right), + ), + ZetaSystemBanner( + type: ZetaSystemBannerStatus.primary, + title: 'Title left + Icon', + titleCenter: true, + context: context, + leadingIcon: ZetaIcons.info, + ), + ZetaSystemBanner( + type: ZetaSystemBannerStatus.primary, + context: context, + title: 'Title left + Icon with Arrow', + titleCenter: true, + leadingIcon: ZetaIcons.info, + trailing: IconButton( + icon: ZetaIcon(ZetaIcons.chevron_right), + onPressed: () { + ScaffoldMessenger.of(context).showMaterialBanner(ZetaSystemBanner( + title: 'Title', + context: context, + type: ZetaSystemBannerStatus.primary, + trailing: IconButton( + icon: ZetaIcon(ZetaIcons.close), + onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(), + ), + )); + }, + ), + ), + _getTitle('Color variants'), + ZetaSystemBanner( + type: ZetaSystemBannerStatus.positive, + context: context, + title: 'Centered', + titleCenter: true, + leadingIcon: ZetaIcons.info, + trailing: IconButton( + icon: ZetaIcon(ZetaIcons.chevron_right), + onPressed: () { + ScaffoldMessenger.of(context).showMaterialBanner(ZetaSystemBanner( + title: 'Title', + context: context, + type: ZetaSystemBannerStatus.positive, + trailing: IconButton( + icon: ZetaIcon(ZetaIcons.close), + onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(), + ), + )); + }, + ), + ), + ZetaSystemBanner( + type: ZetaSystemBannerStatus.warning, + title: 'Centered', + context: context, + titleCenter: true, + leadingIcon: ZetaIcons.info, + trailing: IconButton( + icon: ZetaIcon(ZetaIcons.chevron_right), + onPressed: () { + ScaffoldMessenger.of(context).showMaterialBanner(ZetaSystemBanner( + title: 'Title', + context: context, + type: ZetaSystemBannerStatus.warning, + trailing: IconButton( + icon: ZetaIcon(ZetaIcons.close), + onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(), + ), + )); + }, + ), + ), + ZetaSystemBanner( + type: ZetaSystemBannerStatus.negative, + title: 'Centered', + context: context, + titleCenter: true, + leadingIcon: ZetaIcons.info, + trailing: IconButton( + icon: ZetaIcon(ZetaIcons.chevron_right), + onPressed: () { + ScaffoldMessenger.of(context).showMaterialBanner(ZetaSystemBanner( + title: 'Title', + context: context, + type: ZetaSystemBannerStatus.negative, + trailing: IconButton( + icon: ZetaIcon(ZetaIcons.close), + onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(), + ), + )); + }, + ), + ), + const Divider(), + Text('In-Page Banner', style: ZetaTextStyles.displayMedium), + ZetaInPageBanner( + content: Text(_content), + status: ZetaWidgetStatus.info, + ), + ZetaInPageBanner( + content: Text(_content), + onClose: () {}, + status: ZetaWidgetStatus.positive, + title: 'Banner Title', + ), + ZetaInPageBanner( + content: Text(_content), + onClose: () {}, + status: ZetaWidgetStatus.warning, + title: 'Banner Title', + actions: [ZetaButton(label: 'Button', onPressed: () {})], + ), + ZetaInPageBanner( + content: Text(_content), + onClose: () {}, + status: ZetaWidgetStatus.negative, + title: 'Banner Title Banner Title Banner Title Banner Title', + ), + ZetaInPageBanner( + content: Text(_content), + onClose: () {}, + status: ZetaWidgetStatus.neutral, + title: 'Banner Title', + ) + ].divide(const SizedBox(height: 10)).toList(), + ), + ), + ), + ); + } + + final _content = 'Lorem ipsum dolor sit amet, conse ctetur cididunt ut' + 'labore et do lore magna aliqua.'; + + Widget _getTitle(String title) => Container(height: 50, child: Center(child: Text(title))); + + Column buildExampleBannerColumn( + ZetaWidgetStatus status, { + IconData? customIcon, + }) { + return Column( + mainAxisAlignment: MainAxisAlignment.spaceAround, + mainAxisSize: MainAxisSize.min, + children: [ + ZetaInPageBanner( + content: Text(_content), + onClose: () {}, + status: status, + title: 'Banner Title', + customIcon: customIcon, + ), + ], + ); + } +} diff --git a/example/macos/Podfile.lock b/example/macos/Podfile.lock index 1aff447e..0878796e 100644 --- a/example/macos/Podfile.lock +++ b/example/macos/Podfile.lock @@ -40,4 +40,4 @@ SPEC CHECKSUMS: PODFILE CHECKSUM: 353c8bcc5d5b0994e508d035b5431cfe18c1dea7 -COCOAPODS: 1.15.2 +COCOAPODS: 1.16.2 diff --git a/example/widgetbook/pages/assets/icon_widgetbook.dart b/example/widgetbook/pages/assets/icon_widgetbook.dart index 81c2ad68..acd5c4f9 100644 --- a/example/widgetbook/pages/assets/icon_widgetbook.dart +++ b/example/widgetbook/pages/assets/icon_widgetbook.dart @@ -31,7 +31,7 @@ Widget iconsUseCase(BuildContext context) { onTap: () async { await Clipboard.setData(ClipboardData(text: 'ZetaIcons.' + e.key)); ScaffoldMessenger.of(context).showMaterialBanner( - ZetaBanner(context: context, title: 'Icon name copied'), + ZetaSystemBanner(context: context, title: 'Icon name copied'), ); await Future.delayed(Duration(seconds: 4)); ScaffoldMessenger.of(context).clearMaterialBanners(); diff --git a/example/widgetbook/pages/components/banner_widgetbook.dart b/example/widgetbook/pages/components/banner_widgetbook.dart index 569262c8..4d29b13c 100644 --- a/example/widgetbook/pages/components/banner_widgetbook.dart +++ b/example/widgetbook/pages/components/banner_widgetbook.dart @@ -6,12 +6,12 @@ import '../../utils/scaffold.dart'; import '../../utils/utils.dart'; Widget bannerUseCase(BuildContext context) { - final banner = ZetaBanner( + final banner = ZetaSystemBanner( context: context, title: context.knobs.string(label: 'Title', initialValue: 'Banner Title'), type: context.knobs.list( label: 'Type', - options: ZetaBannerStatus.values, + options: ZetaSystemBannerStatus.values, labelBuilder: enumLabelBuilder, ), leadingIcon: iconKnob(context, nullable: true), diff --git a/example/assets/zebra-logo-head.svg b/lib/assets/logos/zebra-logo-head.svg similarity index 100% rename from example/assets/zebra-logo-head.svg rename to lib/assets/logos/zebra-logo-head.svg diff --git a/lib/src/components/avatars/avatar.dart b/lib/src/components/avatars/avatar.dart index bf13baa5..fc6d62a1 100644 --- a/lib/src/components/avatars/avatar.dart +++ b/lib/src/components/avatars/avatar.dart @@ -33,53 +33,34 @@ enum ZetaAvatarSize { /// [xxxs] 24 pixels xxxs; + /// Returns the calculated pixel size for the [ZetaAvatarSize]. double _pixelSize(BuildContext context) => ZetaAvatar.pixelSize(context, this); - double _borderSize(BuildContext context) { - // TODO(UX-1304): Awaiting updated design specs for border size - switch (this) { - case ZetaAvatarSize.xxxl: - 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 2.66; - case ZetaAvatarSize.s: - return 2.22; - case ZetaAvatarSize.xs: - return 2; - case ZetaAvatarSize.xxs: - return 1.78; - case ZetaAvatarSize.xxxs: - return 1.33; - } - } + double get _borderSize => switch (this) { + ZetaAvatarSize.xxxl => 11.12, + ZetaAvatarSize.xxl => 6.67, + ZetaAvatarSize.xl => 4.45, + ZetaAvatarSize.l => 3.56, + ZetaAvatarSize.m => 2.66, + ZetaAvatarSize.s => 2.22, + ZetaAvatarSize.xs => 2, + ZetaAvatarSize.xxs => 1.78, + ZetaAvatarSize.xxxs => 1.33, + }; double _fontSize(BuildContext context) => ZetaAvatar.fontSize(context, this); - TextStyle _labelStyle(BuildContext context) { - switch (this) { - case ZetaAvatarSize.xxxl: - return ZetaTextStyles.displaySmall; - case ZetaAvatarSize.xxl: - case ZetaAvatarSize.xl: - return ZetaTextStyles.bodyLarge; - case ZetaAvatarSize.l: - return ZetaTextStyles.bodyMedium; - case ZetaAvatarSize.m: - return ZetaTextStyles.bodySmall; - case ZetaAvatarSize.s: - case ZetaAvatarSize.xs: - case ZetaAvatarSize.xxs: - return ZetaTextStyles.bodyXSmall; - case ZetaAvatarSize.xxxs: - return ZetaTextStyles.bodyXSmall; - } - } + TextStyle _labelStyle(BuildContext context) => switch (this) { + ZetaAvatarSize.xxxl => ZetaTextStyles.displaySmall, + ZetaAvatarSize.xxl => ZetaTextStyles.bodyLarge, + ZetaAvatarSize.xl => ZetaTextStyles.bodyLarge, + ZetaAvatarSize.l => ZetaTextStyles.bodyMedium, + ZetaAvatarSize.m => ZetaTextStyles.bodySmall, + ZetaAvatarSize.s => ZetaTextStyles.bodyXSmall, + ZetaAvatarSize.xs => ZetaTextStyles.bodyXSmall, + ZetaAvatarSize.xxs => ZetaTextStyles.bodyXSmall, + ZetaAvatarSize.xxxs => ZetaTextStyles.bodyXSmall, + }; } /// An avatar is a visual representation of a user or entity. @@ -317,7 +298,7 @@ class ZetaAvatar extends ZetaStatelessWidget { height: pSize, decoration: BoxDecoration( border: borderColor != null ? Border.all(color: borderColor!, width: 0) : null, - borderRadius: Zeta.of(context).radius.full, + shape: BoxShape.circle, color: backgroundColor ?? (_showPlaceholder ? zetaColors.surfacePrimary : zetaColors.primitives.cool.shade20), ), @@ -327,14 +308,14 @@ class ZetaAvatar extends ZetaStatelessWidget { height: pSize, decoration: BoxDecoration( color: backgroundColor ?? zetaColors.surfaceHover, - border: Border.all(color: borderColor!, width: borderSize(context)), - borderRadius: Zeta.of(context).radius.full, + border: Border.all(color: borderColor!, width: borderSize), + shape: BoxShape.circle, ), child: innerContent, ) : DecoratedBox( decoration: BoxDecoration( - borderRadius: Zeta.of(context).radius.full, + shape: BoxShape.circle, color: backgroundColor ?? zetaColors.surfaceHover, ), child: innerContent, @@ -549,7 +530,7 @@ class ZetaAvatarBadge extends StatelessWidget { margin: const EdgeInsets.all(0.01), decoration: BoxDecoration( color: backgroundColor, - borderRadius: Zeta.of(context).radius.full, + shape: BoxShape.circle, ), child: value != null ? Center( @@ -575,25 +556,18 @@ class ZetaAvatarBadge extends StatelessWidget { width: type == ZetaAvatarBadgeType.icon ? paddedSize : badgeSize * 1.8, height: type == ZetaAvatarBadgeType.icon ? paddedSize : badgeSize, decoration: BoxDecoration( - borderRadius: Zeta.of(context).radius.full, + shape: BoxShape.circle, border: type != ZetaAvatarBadgeType.notification - ? Border.all( - width: borderSize, - color: Zeta.of(context).colors.surfacePrimary, - ) + ? Border.all(width: borderSize, color: Zeta.of(context).colors.surfaceDefault) : null, ), child: innerContent, ); } - double _getContainerSize(BuildContext context) { - return size._pixelSize(context) / 3; - } + double _getContainerSize(BuildContext context) => size._pixelSize(context) / 3; - double _getBorderSize(BuildContext context) { - return size._pixelSize(context) / 48; - } + double _getBorderSize(BuildContext context) => size._pixelSize(context) / 48; @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { diff --git a/lib/src/components/badges/label.dart b/lib/src/components/badges/label.dart index b9e8f5b8..09f985ce 100644 --- a/lib/src/components/badges/label.dart +++ b/lib/src/components/badges/label.dart @@ -38,7 +38,7 @@ class ZetaLabel extends ZetaStatelessWidget { @override Widget build(BuildContext context) { - final Color backgroundColor = status.labelBackgroundColor(context); + final Color backgroundColor = status.surfaceColor(context); final Color foregroundColor = status.labelForegroundColor(context); return Semantics( @@ -68,34 +68,3 @@ class ZetaLabel extends ZetaStatelessWidget { ..add(StringProperty('semanticLabel', semanticLabel)); } } - -extension on ZetaWidgetStatus { - Color labelBackgroundColor(BuildContext context) { - final colors = Zeta.of(context).colors; - switch (this) { - case ZetaWidgetStatus.info: - return colors.surfaceInfo; - case ZetaWidgetStatus.positive: - return colors.surfacePositive; - case ZetaWidgetStatus.warning: - return colors.surfaceWarning; - case ZetaWidgetStatus.negative: - return colors.surfaceNegative; - case ZetaWidgetStatus.neutral: - return colors.mainLight; - } - } - - Color labelForegroundColor(BuildContext context) { - final colors = Zeta.of(context).colors; - switch (this) { - case ZetaWidgetStatus.info: - case ZetaWidgetStatus.positive: - case ZetaWidgetStatus.warning: - case ZetaWidgetStatus.negative: - return colors.mainInverse; - case ZetaWidgetStatus.neutral: - return colors.mainDefault; - } - } -} diff --git a/lib/src/components/badges/priority_pill.dart b/lib/src/components/badges/priority_pill.dart index 6582a7c2..96c4d8fc 100644 --- a/lib/src/components/badges/priority_pill.dart +++ b/lib/src/components/badges/priority_pill.dart @@ -17,33 +17,19 @@ enum ZetaPriorityPillType { /// Sets the default color to `ZetaColors.green` and index to '3'. low; - Color _badgeColor(BuildContext context) { - final colors = Zeta.of(context).colors; - switch (this) { - case ZetaPriorityPillType.urgent: - return colors.mainNegative; - case ZetaPriorityPillType.high: - return colors.mainWarning; - case ZetaPriorityPillType.medium: - return colors.mainPrimary; - case ZetaPriorityPillType.low: - return colors.mainPositive; - } - } - - Color _lozengeColor(BuildContext context) { - final colors = Zeta.of(context).colors; - switch (this) { - case ZetaPriorityPillType.urgent: - return colors.surfaceNegativeSubtle; - case ZetaPriorityPillType.high: - return colors.surfaceWarningSubtle; - case ZetaPriorityPillType.medium: - return colors.surfacePrimarySubtle; - case ZetaPriorityPillType.low: - return colors.surfacePositiveSubtle; - } - } + Color _badgeColor(BuildContext context) => switch (this) { + ZetaPriorityPillType.urgent => Zeta.of(context).colors.mainNegative, + ZetaPriorityPillType.high => Zeta.of(context).colors.mainWarning, + ZetaPriorityPillType.medium => Zeta.of(context).colors.mainPrimary, + ZetaPriorityPillType.low => Zeta.of(context).colors.mainPositive, + }; + + Color _lozengeColor(BuildContext context) => switch (this) { + ZetaPriorityPillType.urgent => Zeta.of(context).colors.surfaceNegativeSubtle, + ZetaPriorityPillType.high => Zeta.of(context).colors.surfaceWarningSubtle, + ZetaPriorityPillType.medium => Zeta.of(context).colors.surfacePrimarySubtle, + ZetaPriorityPillType.low => Zeta.of(context).colors.surfacePositiveSubtle, + }; } /// The size of [ZetaPriorityPill]. diff --git a/lib/src/components/badges/status_label.dart b/lib/src/components/badges/status_label.dart index 5cde97a0..3fee7c38 100644 --- a/lib/src/components/badges/status_label.dart +++ b/lib/src/components/badges/status_label.dart @@ -40,9 +40,9 @@ class ZetaStatusLabel extends ZetaStatelessWidget { Widget build(BuildContext context) { final colors = Zeta.of(context).colors; - final Color backgroundColor = status.backgroundColor(colors); - final Color borderColor = status.borderColor(colors); - final Color iconColor = status.foregroundColor(colors); + final Color backgroundColor = status.surfaceSubtleColor(context); + final Color borderColor = status.borderColor(context); + final Color iconColor = status.mainColor(context); final Color textColor = colors.mainDefault; return Semantics( @@ -90,54 +90,3 @@ class ZetaStatusLabel extends ZetaStatelessWidget { ..add(StringProperty('semanticLabel', semanticLabel)); } } - -/// Extensions on [ZetaWidgetStatus]. -extension on ZetaWidgetStatus { - /// Gets background color from [ZetaWidgetStatus]. - Color backgroundColor(ZetaColors colors) { - switch (this) { - case ZetaWidgetStatus.info: - return colors.surfaceInfoSubtle; - case ZetaWidgetStatus.positive: - return colors.surfacePositiveSubtle; - case ZetaWidgetStatus.warning: - return colors.surfaceWarningSubtle; - case ZetaWidgetStatus.negative: - return colors.surfaceNegativeSubtle; - case ZetaWidgetStatus.neutral: - return colors.mainLight; - } - } - - /// Gets foreground color from [ZetaWidgetStatus]. - Color foregroundColor(ZetaColors colors) { - switch (this) { - case ZetaWidgetStatus.info: - return colors.mainInfo; - case ZetaWidgetStatus.positive: - return colors.mainPositive; - case ZetaWidgetStatus.warning: - return colors.mainWarning; - case ZetaWidgetStatus.negative: - return colors.mainNegative; - case ZetaWidgetStatus.neutral: - return colors.mainSubtle; - } - } - - /// Gets border color from [ZetaWidgetStatus]. - Color borderColor(ZetaColors colors) { - switch (this) { - case ZetaWidgetStatus.info: - return colors.borderInfo; - case ZetaWidgetStatus.positive: - return colors.borderPositive; - case ZetaWidgetStatus.warning: - return colors.borderWarning; - case ZetaWidgetStatus.negative: - return colors.borderNegative; - case ZetaWidgetStatus.neutral: - return colors.borderDefault; - } - } -} diff --git a/lib/src/components/badges/tag.dart b/lib/src/components/badges/tag.dart index c6ecea98..d329fca1 100644 --- a/lib/src/components/badges/tag.dart +++ b/lib/src/components/badges/tag.dart @@ -59,6 +59,7 @@ class ZetaTag extends ZetaStatelessWidget { return Semantics( value: semanticLabel ?? label, child: Row( + mainAxisSize: MainAxisSize.min, children: [ if (direction == ZetaTagDirection.left) _buildCustomPaint(context), Container( diff --git a/lib/src/components/bottom sheets/bottom_sheet.dart b/lib/src/components/bottom sheets/bottom_sheet.dart index fcde59a8..e8850e43 100644 --- a/lib/src/components/bottom sheets/bottom_sheet.dart +++ b/lib/src/components/bottom sheets/bottom_sheet.dart @@ -3,7 +3,7 @@ import 'package:flutter/material.dart'; import '../../../zeta_flutter.dart'; -///Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen. +/// Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen. /// /// To display a [ZetaBottomSheet], use the [showZetaBottomSheet] function. /// diff --git a/lib/src/components/button_group/button_group.dart b/lib/src/components/button_group/button_group.dart index b4facbef..df921f15 100644 --- a/lib/src/components/button_group/button_group.dart +++ b/lib/src/components/button_group/button_group.dart @@ -294,12 +294,15 @@ class _ZetaGroupButtonState extends State { leadingIcon = IconTheme( data: IconThemeData( size: iconSize, - color: widget.isInverse ? colors.mainInverse : colors.mainDefault, ), child: selectedItem!.icon!, ); } else if (selectedItem == null && widget.icon != null) { - leadingIcon = ZetaIcon(widget.icon, size: iconSize); + leadingIcon = ZetaIcon( + widget.icon, + size: iconSize, + color: widget.isInverse ? colors.mainInverse : colors.mainDefault, + ); } return Container( @@ -361,6 +364,11 @@ class _ZetaGroupButtonState extends State { Icon( dropdownIcon, size: Zeta.of(context).spacing.xl, + color: widget.onChange == null + ? colors.mainDisabled + : widget.isInverse + ? colors.mainInverse + : colors.mainDefault, ), ].divide(SizedBox(width: Zeta.of(context).spacing.minimum)).toList(), ).paddingAll(_padding), diff --git a/lib/src/components/buttons/button_style.dart b/lib/src/components/buttons/button_style.dart index 8c3d18e4..8650ba17 100644 --- a/lib/src/components/buttons/button_style.dart +++ b/lib/src/components/buttons/button_style.dart @@ -90,21 +90,6 @@ enum ZetaButtonType { bool get _border => this == ZetaButtonType.outline || this == ZetaButtonType.outlineSubtle; } -///Border utility functions -extension BorderFunctions on ZetaWidgetBorder { - ///Returns radius based on [ZetaWidgetBorder] - BorderRadius radius(BuildContext context) { - switch (this) { - case ZetaWidgetBorder.sharp: - return Zeta.of(context).radius.none; - case ZetaWidgetBorder.rounded: - return Zeta.of(context).radius.minimal; - case ZetaWidgetBorder.full: - return Zeta.of(context).radius.full; - } - } -} - /// Shared buttonStyle for buttons and icon buttons ButtonStyle buttonStyle( BuildContext context, @@ -175,5 +160,24 @@ ButtonStyle buttonStyle( }), elevation: const WidgetStatePropertyAll(0), padding: WidgetStateProperty.all(EdgeInsets.zero), + iconColor: WidgetStateProperty.resolveWith( + (states) { + if (states.contains(WidgetState.disabled)) { + return colors.mainDisabled; + } + switch (type) { + case ZetaButtonType.outline: + case ZetaButtonType.text: + return colors.mainPrimary; + case ZetaButtonType.outlineSubtle: + return colors.mainDefault; + case ZetaButtonType.primary: + case ZetaButtonType.secondary: + case ZetaButtonType.positive: + case ZetaButtonType.negative: + return colors.mainInverse; + } + }, + ), ); } diff --git a/lib/src/components/chat_item/chat_item.dart b/lib/src/components/chat_item/chat_item.dart index 268ad657..0d3b472d 100644 --- a/lib/src/components/chat_item/chat_item.dart +++ b/lib/src/components/chat_item/chat_item.dart @@ -117,182 +117,187 @@ class ZetaChatItem extends ZetaStatelessWidget { final actions = [...slidableActions]; - return ZetaRoundedScope( - rounded: context.rounded, - child: Semantics( - button: true, - child: SelectionContainer.disabled( - child: LayoutBuilder( - builder: (context, constraints) { - return Slidable( - enabled: actions.isNotEmpty, - endActionPane: actions.isEmpty - ? null - : ActionPane( - extentRatio: _getSlidableExtend( - slidableActionsCount: actions.length, - maxScreenWidth: constraints.maxWidth, - context: context, - ), - motion: const ScrollMotion(), - children: paleButtonColors != null - ? actions.map((action) => action.copyWith(paleColor: paleButtonColors)).toList() - : actions, - ), - child: ColoredBox( - color: highlighted ? colors.surfaceSelected : colors.surfaceDefault, - child: Material( - color: Colors.transparent, - child: InkWell( - onTap: onTap, - child: Semantics( - explicitChildNodes: explicitChildNodes, - child: Padding( - padding: EdgeInsets.symmetric( - horizontal: Zeta.of(context).spacing.medium, - vertical: Zeta.of(context).spacing.small, + return Column( + mainAxisSize: MainAxisSize.min, + children: [ + ZetaRoundedScope( + rounded: context.rounded, + child: Semantics( + button: true, + child: SelectionContainer.disabled( + child: LayoutBuilder( + builder: (context, constraints) { + return Slidable( + enabled: actions.isNotEmpty, + endActionPane: actions.isEmpty + ? null + : ActionPane( + extentRatio: _getSlidableExtend( + slidableActionsCount: actions.length, + maxScreenWidth: constraints.maxWidth, + context: context, + ), + motion: const ScrollMotion(), + children: paleButtonColors != null + ? actions.map((action) => action.copyWith(paleColor: paleButtonColors)).toList() + : actions, ), - child: Row( - children: [ - if (leading != null) _formatLeading!, - Flexible( - child: Padding( - padding: EdgeInsets.only(left: Zeta.of(context).spacing.medium), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Row( + child: ColoredBox( + color: highlighted ? colors.surfaceSelected : colors.surfaceDefault, + child: Material( + color: Colors.transparent, + child: InkWell( + onTap: onTap, + child: Semantics( + explicitChildNodes: explicitChildNodes, + child: Padding( + padding: EdgeInsets.symmetric( + horizontal: Zeta.of(context).spacing.medium, + vertical: Zeta.of(context).spacing.small, + ), + child: Row( + children: [ + if (leading != null) _formatLeading!, + Flexible( + child: Padding( + padding: EdgeInsets.only(left: Zeta.of(context).spacing.medium), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - if (highlighted) - Container( - margin: EdgeInsets.only(right: Zeta.of(context).spacing.minimum), - height: Zeta.of(context).spacing.small, - width: Zeta.of(context).spacing.small, - decoration: - BoxDecoration(color: colors.mainPrimary, shape: BoxShape.circle), - ), - Flexible( - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Flexible( - child: DefaultTextStyle( - maxLines: 1, - overflow: TextOverflow.ellipsis, - style: (highlighted - ? ZetaTextStyles.labelLarge - : ZetaTextStyles.bodyMedium) - .copyWith(color: colors.mainDefault), - child: title, - ), + Row( + children: [ + if (highlighted) + Container( + margin: EdgeInsets.only(right: Zeta.of(context).spacing.minimum), + height: Zeta.of(context).spacing.small, + width: Zeta.of(context).spacing.small, + decoration: + BoxDecoration(color: colors.mainPrimary, shape: BoxShape.circle), ), - Row( + Flexible( + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - if (time != null) - Text( - _dateFormat.format(time!), - style: ZetaTextStyles.bodyXSmall, - ), - IconTheme( - data: IconThemeData( - size: Zeta.of(context).spacing.large, + Flexible( + child: DefaultTextStyle( + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: (highlighted + ? ZetaTextStyles.labelLarge + : ZetaTextStyles.bodyMedium) + .copyWith(color: colors.mainDefault), + child: title, ), - child: Row( - children: [ - ...additionalIcons, - if (enabledNotificationIcon) - Padding( - padding: EdgeInsets.only( - left: Zeta.of(context).spacing.minimum, - ), - child: ZetaIcon( - ZetaIcons.error, - color: colors.mainSubtle, - ), - ), - if (enabledWarningIcon) - Padding( - padding: EdgeInsets.only( - left: Zeta.of(context).spacing.minimum, - ), - child: Icon( - Icons.circle_notifications, - color: colors.surfaceNegative, - ), - ), - if (_count != null) - Container( - margin: EdgeInsets.only( - left: Zeta.of(context).spacing.minimum, - ), - padding: EdgeInsets.symmetric( - horizontal: Zeta.of(context).spacing.small, - ), - decoration: BoxDecoration( - color: colors.mainPrimary, - borderRadius: Zeta.of(context).radius.full, - ), - child: Text( - _count!, - style: ZetaTextStyles.labelSmall.copyWith( - color: colors.mainInverse, + ), + Row( + children: [ + if (time != null) + Text( + _dateFormat.format(time!), + style: ZetaTextStyles.bodyXSmall, + ), + IconTheme( + data: IconThemeData( + size: Zeta.of(context).spacing.large, + ), + child: Row( + children: [ + ...additionalIcons, + if (enabledNotificationIcon) + Padding( + padding: EdgeInsets.only( + left: Zeta.of(context).spacing.minimum, + ), + child: ZetaIcon( + ZetaIcons.error, + color: colors.mainSubtle, + ), ), - ), - ), - ], - ), + if (enabledWarningIcon) + Padding( + padding: EdgeInsets.only( + left: Zeta.of(context).spacing.minimum, + ), + child: Icon( + Icons.circle_notifications, + color: colors.surfaceNegative, + ), + ), + if (_count != null) + Container( + margin: EdgeInsets.only( + left: Zeta.of(context).spacing.minimum, + ), + padding: EdgeInsets.symmetric( + horizontal: Zeta.of(context).spacing.small, + ), + decoration: BoxDecoration( + color: colors.mainPrimary, + borderRadius: Zeta.of(context).radius.full, + ), + child: Text( + _count!, + style: ZetaTextStyles.labelSmall.copyWith( + color: colors.mainInverse, + ), + ), + ), + ], + ), + ), + ], ), ], ), - ], - ), + ), + ], ), - ], - ), - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - crossAxisAlignment: CrossAxisAlignment.end, - children: [ - if (subtitle != null) - Flexible( - child: DefaultTextStyle( - maxLines: 2, - overflow: TextOverflow.ellipsis, - style: ZetaTextStyles.bodySmall.copyWith( - color: colors.mainSubtle, + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.end, + children: [ + if (subtitle != null) + Flexible( + child: DefaultTextStyle( + maxLines: 2, + overflow: TextOverflow.ellipsis, + style: ZetaTextStyles.bodySmall.copyWith( + color: colors.mainSubtle, + ), + child: subtitle!, + ), ), - child: subtitle!, - ), - ), - if (starred != null) - Padding( - padding: EdgeInsets.only( - left: Zeta.of(context).spacing.minimum, - ), - child: ZetaIcon( - starred! ? ZetaIcons.star : ZetaIcons.star_outline, - color: starred! ? colors.mainSecondary : null, - ), - ), + if (starred != null) + Padding( + padding: EdgeInsets.only( + left: Zeta.of(context).spacing.minimum, + ), + child: ZetaIcon( + starred! ? ZetaIcons.star : ZetaIcons.star_outline, + color: starred! ? colors.mainSecondary : null, + ), + ), + ], + ), ], ), - ], + ), ), - ), + ], ), - ], + ), ), ), ), ), - ), - ), - ); - }, + ); + }, + ), + ), ), ), - ), + ], ); } diff --git a/lib/src/components/components.dart b/lib/src/components/components.dart index e5c03397..ff79c452 100644 --- a/lib/src/components/components.dart +++ b/lib/src/components/components.dart @@ -6,7 +6,6 @@ export 'badges/label.dart'; export 'badges/priority_pill.dart'; export 'badges/status_label.dart'; export 'badges/tag.dart'; -export 'banner/banner.dart'; export 'bottom sheets/bottom_sheet.dart'; export 'bottom sheets/menu_items.dart'; export 'breadcrumb/breadcrumb.dart' hide TruncatedItem; @@ -50,6 +49,7 @@ export 'snack_bar/snack_bar.dart'; export 'stepper/stepper.dart' hide HorizontalStep, StepDivider, StepIcon, VerticalStep; export 'stepper_input/stepper_input.dart' hide ZetaStepperInputState; export 'switch/zeta_switch.dart'; +export 'system_banner/system_banner.dart'; export 'tabs/tab.dart'; export 'tabs/tab_bar.dart'; export 'text_input/text_input.dart'; diff --git a/lib/src/components/contact_item/contact_item.dart b/lib/src/components/contact_item/contact_item.dart index 72f7dd05..fa49ed42 100644 --- a/lib/src/components/contact_item/contact_item.dart +++ b/lib/src/components/contact_item/contact_item.dart @@ -3,6 +3,7 @@ import 'package:flutter/material.dart'; import '../../../zeta_flutter.dart'; /// A single row that contains avatar, title and subtitle. +/// /// {@category Components} /// /// Figma: https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=24828-46282&node-type=canvas&m=dev diff --git a/lib/src/components/date_input/date_input.dart b/lib/src/components/date_input/date_input.dart index fabad949..f8abdd84 100644 --- a/lib/src/components/date_input/date_input.dart +++ b/lib/src/components/date_input/date_input.dart @@ -235,7 +235,7 @@ class _ZetaDateInputState extends FormFieldState { lastDate: lastDate, initialEntryMode: widget.pickerInitialEntryMode ?? DatePickerEntryMode.calendar, initialDate: initialDate, - builder: (BuildContext context, Widget? child) { + builder: (BuildContext _, Widget? child) { return Theme( data: Theme.of(context).copyWith( dividerTheme: DividerThemeData(color: colors.borderSubtle), diff --git a/lib/src/components/dialog/dialog.dart b/lib/src/components/dialog/dialog.dart index c0db0391..e6332125 100644 --- a/lib/src/components/dialog/dialog.dart +++ b/lib/src/components/dialog/dialog.dart @@ -32,7 +32,7 @@ Future showZetaDialog( context: context, barrierDismissible: barrierDismissible, useRootNavigator: useRootNavigator, - builder: (_) => _ZetaDialog( + builder: (_) => ZetaDialog( headerAlignment: headerAlignment, icon: icon, title: title, @@ -53,8 +53,10 @@ Future showZetaDialog( /// Figma: https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=23954-93337&node-type=frame&m=dev /// /// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/dialog -class _ZetaDialog extends ZetaStatelessWidget { - const _ZetaDialog({ +class ZetaDialog extends ZetaStatelessWidget { + /// Creates a Zeta Dialog. + const ZetaDialog({ + super.key, this.headerAlignment = ZetaDialogHeaderAlignment.center, this.icon, this.title, @@ -68,15 +70,34 @@ class _ZetaDialog extends ZetaStatelessWidget { super.rounded, }); + /// The alignment of the header. final ZetaDialogHeaderAlignment headerAlignment; + + /// The icon to display in the header. final Widget? icon; + + /// The title to display in the header. final String? title; + + /// The message to display in the content. final String message; + + /// The label for the primary button. final String? primaryButtonLabel; + + /// The callback for the primary button. final VoidCallback? onPrimaryButtonPressed; + + /// The label for the secondary button. final String? secondaryButtonLabel; + + /// The callback for the secondary button. final VoidCallback? onSecondaryButtonPressed; + + /// The label for the tertiary button. final String? tertiaryButtonLabel; + + /// The callback for the tertiary button. final VoidCallback? onTertiaryButtonPressed; @override @@ -96,9 +117,9 @@ class _ZetaDialog extends ZetaStatelessWidget { ); final tertiaryButton = tertiaryButtonLabel == null ? null - : TextButton( + : ZetaButton.text( onPressed: onTertiaryButtonPressed, - child: Text(tertiaryButtonLabel!), + label: tertiaryButtonLabel!, ); final hasButton = primaryButton != null || secondaryButton != null || tertiaryButton != null; diff --git a/lib/src/components/dropdown/dropdown.dart b/lib/src/components/dropdown/dropdown.dart index 6b4d0cda..37bc4181 100644 --- a/lib/src/components/dropdown/dropdown.dart +++ b/lib/src/components/dropdown/dropdown.dart @@ -531,6 +531,12 @@ class _DropdownItemState extends State<_DropdownItem> { ButtonStyle _getStyle(ZetaColors colors) { return ButtonStyle( + iconColor: WidgetStateProperty.resolveWith((states) { + if (states.contains(WidgetState.disabled)) { + return colors.mainDisabled; + } + return colors.mainDefault; + }), backgroundColor: WidgetStateProperty.resolveWith((states) { if (states.contains(WidgetState.disabled)) { return colors.surfaceDisabled; diff --git a/lib/src/components/fabs/fab.dart b/lib/src/components/fabs/fab.dart index 183b70fe..f769e01f 100644 --- a/lib/src/components/fabs/fab.dart +++ b/lib/src/components/fabs/fab.dart @@ -255,7 +255,7 @@ class _ZetaFABState extends State { if (!widget.expanded && widget.label != null) Container( margin: EdgeInsets.only(top: Zeta.of(context).spacing.minimum), - width: 100, // TODODE: Is there a better way to do this? + width: 100, // TODO(DE): Is there a better way to do this? alignment: Alignment.center, child: Text( widget.label!, @@ -270,24 +270,6 @@ class _ZetaFABState extends State { extension on ZetaWidgetBorder { OutlinedBorder buttonShape({required bool isExpanded, required ZetaFabSize size, required BuildContext context}) { - if (this == ZetaWidgetBorder.full && !isExpanded) { - return const CircleBorder(); - } - if (this == ZetaWidgetBorder.sharp) { - return const RoundedRectangleBorder(); - } - return RoundedRectangleBorder( - borderRadius: BorderRadius.circular( - isExpanded - ? this == ZetaWidgetBorder.full - ? size == ZetaFabSize.small - ? Zeta.of(context).spacing.xl_3 - : Zeta.of(context).spacing.xl_8 - : Zeta.of(context).spacing.small - : size == ZetaFabSize.small - ? Zeta.of(context).spacing.small - : Zeta.of(context).spacing.large, - ), - ); + return RoundedRectangleBorder(borderRadius: radius(context)); } } diff --git a/lib/src/components/global_header/global_header.dart b/lib/src/components/global_header/global_header.dart index 00bac4d4..72af7a3f 100644 --- a/lib/src/components/global_header/global_header.dart +++ b/lib/src/components/global_header/global_header.dart @@ -85,18 +85,6 @@ class ZetaGlobalHeader extends ZetaStatefulWidget { } } -extension on DeviceType { - /// Render buttons along the top menu half - bool get isLarge { - return this == DeviceType.desktopL || this == DeviceType.desktopXL; - } - - /// Render search bar on bottom half of menu - bool get isSmall { - return this == DeviceType.mobilePortrait || this == DeviceType.mobileLandscape; - } -} - class _GlobalHeaderState extends State { int _selectedIndex = -1; diff --git a/lib/src/components/in_page_banner/in_page_banner.dart b/lib/src/components/in_page_banner/in_page_banner.dart index 1b6096d3..a03045d2 100644 --- a/lib/src/components/in_page_banner/in_page_banner.dart +++ b/lib/src/components/in_page_banner/in_page_banner.dart @@ -49,9 +49,9 @@ class ZetaInPageBanner extends ZetaStatelessWidget { final theme = Zeta.of(context); final hasTitle = title != null; final rounded = context.rounded; - final Color backgroundColor = status.backgroundColor(theme.colors); - final Color borderColor = status.borderColor(theme.colors); - final Color iconColor = status.foregroundColor(theme.colors); + final Color backgroundColor = status.surfaceSubtleInPageBannerColor(context); + final Color borderColor = status.borderColor(context); + final Color iconColor = status.mainColor(context); return ZetaRoundedScope( rounded: rounded, @@ -67,6 +67,7 @@ class ZetaInPageBanner extends ZetaStatelessWidget { ), child: Row( crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, children: [ Expanded( child: Padding( @@ -85,6 +86,7 @@ class ZetaInPageBanner extends ZetaStatelessWidget { Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, children: [ if (hasTitle) Text( @@ -151,52 +153,4 @@ extension on ZetaWidgetStatus { return ZetaIcons.info; } } - - /// Gets background color from [ZetaWidgetStatus] - Color backgroundColor(ZetaColors colors) { - switch (this) { - case ZetaWidgetStatus.info: - return colors.surfaceInfoSubtle; - case ZetaWidgetStatus.positive: - return colors.surfacePositiveSubtle; - case ZetaWidgetStatus.warning: - return colors.surfaceWarningSubtle; - case ZetaWidgetStatus.negative: - return colors.surfaceNegativeSubtle; - case ZetaWidgetStatus.neutral: - return colors.surfaceDefault; - } - } - - /// Gets foreground color from [ZetaWidgetStatus]. - Color foregroundColor(ZetaColors colors) { - switch (this) { - case ZetaWidgetStatus.info: - return colors.mainInfo; - case ZetaWidgetStatus.positive: - return colors.mainPositive; - case ZetaWidgetStatus.warning: - return colors.mainWarning; - case ZetaWidgetStatus.negative: - return colors.mainNegative; - case ZetaWidgetStatus.neutral: - return colors.mainDefault; - } - } - - /// Gets border color from [ZetaWidgetStatus]. - Color borderColor(ZetaColors colors) { - switch (this) { - case ZetaWidgetStatus.info: - return colors.borderInfo; - case ZetaWidgetStatus.positive: - return colors.borderPositive; - case ZetaWidgetStatus.warning: - return colors.borderWarning; - case ZetaWidgetStatus.negative: - return colors.borderNegative; - case ZetaWidgetStatus.neutral: - return colors.borderDefault; - } - } } diff --git a/lib/src/components/list_item/list_item.dart b/lib/src/components/list_item/list_item.dart index d5b14d02..0345d399 100644 --- a/lib/src/components/list_item/list_item.dart +++ b/lib/src/components/list_item/list_item.dart @@ -262,6 +262,7 @@ class ZetaListItem extends ZetaStatelessWidget { Flexible( child: title ?? Column( + mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [ if (primaryText != null && primaryText!.isNotEmpty) diff --git a/lib/src/components/list_item/notification_list_item.dart b/lib/src/components/list_item/notification_list_item.dart index 2a687839..22ac9afb 100644 --- a/lib/src/components/list_item/notification_list_item.dart +++ b/lib/src/components/list_item/notification_list_item.dart @@ -186,7 +186,7 @@ class ZetaNotificationListItem extends ZetaStatelessWidget { padding: const EdgeInsets.all(2), decoration: BoxDecoration( color: colors.surfaceNegative, - borderRadius: Zeta.of(context).radius.full, + shape: BoxShape.circle, ), child: ZetaIcon( ZetaIcons.important_notification, @@ -296,7 +296,7 @@ class ZetaNotificationBadge extends StatelessWidget { final ZetaAvatar? avatar; /// Image to display as notification badge. - final Image? image; + final Widget? image; /// Icon to display as notification badge. final IconData? icon; @@ -320,7 +320,7 @@ class ZetaNotificationBadge extends StatelessWidget { size: Size.square( Zeta.of(context).spacing.xl_8, ), // Image radius - child: image!.copyWith(fit: BoxFit.cover), + child: image is Image ? (image! as Image).copyWith(fit: BoxFit.cover) : image, ), ); } diff --git a/lib/src/components/pagination/pagination.dart b/lib/src/components/pagination/pagination.dart index 6bc26d36..bfbd3b69 100644 --- a/lib/src/components/pagination/pagination.dart +++ b/lib/src/components/pagination/pagination.dart @@ -126,10 +126,9 @@ class _ZetaPaginationState extends State { } } - void _onItemPressed(int value) { - setState(() { - _currentPage = value; - }); + void _onItemPressed(int? value) { + if (value == null) return; + setState(() => _currentPage = value); widget.onChange?.call(value); } @@ -224,9 +223,9 @@ class _ZetaPaginationState extends State { borderRadius: rounded ? Zeta.of(context).radius.minimal : Zeta.of(context).radius.none, ), // TODO(UX-1135): Replace with Zeta Dropdown - child: DropdownButton( + child: DropdownButton( items: items, - onChanged: (val) => _onItemPressed(val!), + onChanged: widget.onChange != null ? _onItemPressed : null, value: _currentPage, icon: const ZetaIcon(ZetaIcons.expand_more).paddingStart(Zeta.of(context).spacing.small), underline: const Nothing(), diff --git a/lib/src/components/progress/progress_bar.dart b/lib/src/components/progress/progress_bar.dart index 1b533a97..35b6d08a 100644 --- a/lib/src/components/progress/progress_bar.dart +++ b/lib/src/components/progress/progress_bar.dart @@ -119,7 +119,8 @@ class _ZetaProgressBarState extends ZetaProgressState { duration: ZetaAnimationLength.verySlow, height: _weight, child: LinearProgressIndicator( - borderRadius: context.rounded ? Zeta.of(context).radius.rounded : Zeta.of(context).radius.none, + borderRadius: const BorderRadius.all(Radius.circular(12)), + // TODO(Design): This does not use a token but is hardcoded value: widget.type == ZetaProgressBarType.indeterminate ? null : animation.value, backgroundColor: widget.type == ZetaProgressBarType.buffering ? colors.surfaceDisabled : Colors.transparent, @@ -145,10 +146,7 @@ class _ZetaProgressBarState extends ZetaProgressState { Container( width: _weight, height: _weight, - decoration: BoxDecoration( - color: colors.surfaceDisabled, - borderRadius: Zeta.of(context).radius.rounded, - ), + decoration: BoxDecoration(color: colors.surfaceDisabled, shape: BoxShape.circle), ), ], ); diff --git a/lib/src/components/slider/slider.dart b/lib/src/components/slider/slider.dart index 6058590f..9df6d07a 100644 --- a/lib/src/components/slider/slider.dart +++ b/lib/src/components/slider/slider.dart @@ -3,7 +3,10 @@ import 'package:flutter/material.dart'; import '../../../zeta_flutter.dart'; +// TODO(UX-1355): Create slider input field. + /// Slider component with customized styling. +/// /// {@category Components} /// /// Figma: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/slider diff --git a/lib/src/components/stepper/stepper.dart b/lib/src/components/stepper/stepper.dart index 4ca47bbd..8a27310f 100644 --- a/lib/src/components/stepper/stepper.dart +++ b/lib/src/components/stepper/stepper.dart @@ -100,6 +100,7 @@ class _ZetaStepperState extends State with TickerProviderStateMixin ZetaStepperType.vertical => IntrinsicWidth( child: Column( crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, children: widget.steps .map( (step) => VerticalStep( diff --git a/lib/src/components/banner/banner.dart b/lib/src/components/system_banner/system_banner.dart similarity index 88% rename from lib/src/components/banner/banner.dart rename to lib/src/components/system_banner/system_banner.dart index 4991e43f..bee5f0c1 100644 --- a/lib/src/components/banner/banner.dart +++ b/lib/src/components/system_banner/system_banner.dart @@ -2,8 +2,8 @@ import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import '../../../zeta_flutter.dart'; -/// [ZetaBanner] type -enum ZetaBannerStatus { +/// [ZetaSystemBanner] type +enum ZetaSystemBannerStatus { /// Primary background. primary, @@ -24,9 +24,9 @@ enum ZetaBannerStatus { /// Figma: https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=22195-43965 /// /// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/banners -class ZetaBanner extends MaterialBanner { - /// Constructor for [ZetaBanner]. See [MaterialBanner] for more information. - ZetaBanner({ +class ZetaSystemBanner extends MaterialBanner { + /// Constructor for [ZetaSystemBanner]. See [MaterialBanner] for more information. + ZetaSystemBanner({ super.key, required BuildContext context, @@ -36,8 +36,8 @@ class ZetaBanner extends MaterialBanner { /// The leading icon for the banner. IconData? leadingIcon, - /// The type of banner. See [ZetaBannerStatus]. - ZetaBannerStatus type = ZetaBannerStatus.primary, + /// The type of banner. See [ZetaSystemBannerStatus]. + ZetaSystemBannerStatus type = ZetaSystemBannerStatus.primary, /// Whether the title should be centered. bool titleCenter = false, @@ -123,17 +123,17 @@ class ZetaBanner extends MaterialBanner { actions: [const Nothing()], ); - static ZetaColorSwatch _backgroundColorFromType(BuildContext context, ZetaBannerStatus type) { + static ZetaColorSwatch _backgroundColorFromType(BuildContext context, ZetaSystemBannerStatus type) { final zeta = Zeta.of(context); switch (type) { - case ZetaBannerStatus.primary: + case ZetaSystemBannerStatus.primary: return zeta.colors.primitives.primary; - case ZetaBannerStatus.positive: + case ZetaSystemBannerStatus.positive: return zeta.colors.primitives.green; - case ZetaBannerStatus.warning: + case ZetaSystemBannerStatus.warning: return zeta.colors.primitives.orange; - case ZetaBannerStatus.negative: + case ZetaSystemBannerStatus.negative: return zeta.colors.primitives.red; } } diff --git a/lib/src/components/time_input/time_input.dart b/lib/src/components/time_input/time_input.dart index 074f3a01..c3f5f71e 100644 --- a/lib/src/components/time_input/time_input.dart +++ b/lib/src/components/time_input/time_input.dart @@ -233,7 +233,7 @@ class _ZetaTimeInputState extends FormFieldState { context: context, initialEntryMode: widget.pickerInitialEntryMode ?? TimePickerEntryMode.dial, initialTime: value ?? TimeOfDay.now(), - builder: (BuildContext context, Widget? child) { + builder: (BuildContext _, Widget? child) { return Theme( data: Theme.of(context).copyWith( timePickerTheme: TimePickerThemeData( diff --git a/lib/src/theme/breakpoints.dart b/lib/src/theme/breakpoints.dart index 53139072..9396f431 100644 --- a/lib/src/theme/breakpoints.dart +++ b/lib/src/theme/breakpoints.dart @@ -21,7 +21,13 @@ enum DeviceType { desktopL, /// A device with width between 1440 and 1920. - desktopXL, + desktopXL; + + /// If the device is a desktop. + bool get isLarge => this == DeviceType.desktopL || this == DeviceType.desktopXL; + + /// If the device is a mobile. + bool get isSmall => this == DeviceType.mobilePortrait || this == DeviceType.mobileLandscape; } /// Utils to determine the [DeviceType] from some box constraints. @@ -41,9 +47,7 @@ extension BreakpointFull on BuildContext { /// Determines the [DeviceType] from the current context. /// /// Returns based on the full size of the screen, so can be inaccurate in certain scenarios. - DeviceType get deviceType { - return _resolveDeviceType(MediaQuery.of(this).size.width); - } + DeviceType get deviceType => _resolveDeviceType(MediaQuery.of(this).size.width); } DeviceType _resolveDeviceType(double width) { diff --git a/lib/src/theme/contrast.dart b/lib/src/theme/contrast.dart index d82de289..3d0066e8 100644 --- a/lib/src/theme/contrast.dart +++ b/lib/src/theme/contrast.dart @@ -11,14 +11,7 @@ enum ZetaContrast { /// /// For [ZetaContrast.aa], it returns 60. /// For [ZetaContrast.aaa], it returns 80. - int get primary { - switch (this) { - case ZetaContrast.aa: - return 60; - case ZetaContrast.aaa: - return 80; - } - } + int get primary => switch (this) { ZetaContrast.aa => 60, ZetaContrast.aaa => 80 }; /// Returns the target contrast value. /// @@ -32,12 +25,5 @@ enum ZetaContrast { /// These values serve as benchmarks for the contrast between the colours on a app's text /// and background. Being able to measure and adjust this contrast plays a critical role in /// improving a app's accessibility. - double get targetContrast { - switch (this) { - case ZetaContrast.aa: - return 4.53; - case ZetaContrast.aaa: - return 8.33; - } - } + double get targetContrast => switch (this) { ZetaContrast.aa => 4.53, ZetaContrast.aaa => 8.33 }; } diff --git a/lib/src/utils/enums.dart b/lib/src/utils/enums.dart index 7bf2157e..79041a3a 100644 --- a/lib/src/utils/enums.dart +++ b/lib/src/utils/enums.dart @@ -1,3 +1,5 @@ +import 'package:flutter/widgets.dart'; + import '../../zeta_flutter.dart'; /// Border options for [ZetaButton]. @@ -9,7 +11,14 @@ enum ZetaWidgetBorder { rounded, /// Fully rounded border. - full, + full; + + /// Returns the border radius for the given [ZetaWidgetBorder]. + BorderRadius radius(BuildContext context) => switch (this) { + ZetaWidgetBorder.sharp => Zeta.of(context).radius.none, + ZetaWidgetBorder.rounded => Zeta.of(context).radius.rounded, + ZetaWidgetBorder.full => Zeta.of(context).radius.full, + }; } /// Size options for [ZetaIndicator], [ZetaButton], [ZetaPasswordInput]. @@ -39,7 +48,61 @@ enum ZetaWidgetStatus { negative, /// Neutral widget; defaults to grey color scheme. - neutral, + neutral; + + /// Gets the surface color for [ZetaWidgetStatus]. + Color surfaceColor(BuildContext context) => switch (this) { + ZetaWidgetStatus.info => Zeta.of(context).colors.surfaceInfo, + ZetaWidgetStatus.positive => Zeta.of(context).colors.surfacePositive, + ZetaWidgetStatus.warning => Zeta.of(context).colors.surfaceWarning, + ZetaWidgetStatus.negative => Zeta.of(context).colors.surfaceNegative, + ZetaWidgetStatus.neutral => Zeta.of(context).colors.mainLight, + }; + + /// Gets the label foreground color for [ZetaWidgetStatus]. + Color labelForegroundColor(BuildContext context) => switch (this) { + ZetaWidgetStatus.info => Zeta.of(context).colors.mainInverse, + ZetaWidgetStatus.positive => Zeta.of(context).colors.mainInverse, + ZetaWidgetStatus.warning => Zeta.of(context).colors.mainInverse, + ZetaWidgetStatus.negative => Zeta.of(context).colors.mainInverse, + ZetaWidgetStatus.neutral => Zeta.of(context).colors.mainDefault, + }; + + /// Gets the surface subtle color for [ZetaWidgetStatus]. + Color surfaceSubtleColor(BuildContext context) => switch (this) { + ZetaWidgetStatus.info => Zeta.of(context).colors.surfaceInfoSubtle, + ZetaWidgetStatus.positive => Zeta.of(context).colors.surfacePositiveSubtle, + ZetaWidgetStatus.warning => Zeta.of(context).colors.surfaceWarningSubtle, + ZetaWidgetStatus.negative => Zeta.of(context).colors.surfaceNegativeSubtle, + ZetaWidgetStatus.neutral => Zeta.of(context).colors.mainLight, + }; + + /// Gets the surface subtle color for [ZetaWidgetStatus]. + Color surfaceSubtleInPageBannerColor(BuildContext context) => switch (this) { + ZetaWidgetStatus.info => Zeta.of(context).colors.surfaceInfoSubtle, + ZetaWidgetStatus.positive => Zeta.of(context).colors.surfacePositiveSubtle, + ZetaWidgetStatus.warning => Zeta.of(context).colors.surfaceWarningSubtle, + ZetaWidgetStatus.negative => Zeta.of(context).colors.surfaceNegativeSubtle, + ZetaWidgetStatus.neutral => Zeta.of(context).colors.surfaceDefault, + }; + + /// Gets foreground color from [ZetaWidgetStatus]. + Color mainColor(BuildContext context) => switch (this) { + ZetaWidgetStatus.info => Zeta.of(context).colors.mainInfo, + ZetaWidgetStatus.positive => Zeta.of(context).colors.mainPositive, + ZetaWidgetStatus.warning => Zeta.of(context).colors.mainWarning, + ZetaWidgetStatus.negative => Zeta.of(context).colors.mainNegative, + ZetaWidgetStatus.neutral => Zeta.of(context).colors.mainSubtle, + }; + + /// Gets border color for [ZetaWidgetStatus]. + Color borderColor(BuildContext context) => switch (this) { + ZetaWidgetStatus.info => Zeta.of(context).colors.borderInfo, + ZetaWidgetStatus.positive => Zeta.of(context).colors.borderPositive, + ZetaWidgetStatus.warning => Zeta.of(context).colors.borderWarning, + ZetaWidgetStatus.negative => Zeta.of(context).colors.borderNegative, + ZetaWidgetStatus.neutral => Zeta.of(context).colors.borderDefault, + }; } /// The requirement options for a Form Field. diff --git a/pubspec.yaml b/pubspec.yaml index 0a5337cb..f28e1828 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -5,7 +5,7 @@ description: Zeta is the new, formal, standardized Zebra Design System based off and so many aspects are incomplete. homepage: https://github.com/ZebraDevs/zeta_flutter repository: https://github.com/ZebraDevs/zeta_flutter -issue_tracker: https://github.com/ZebraDevs/zeta_flutter/issues +issue_tracker: https://github.com/zebradevs/zeta_flutter/issues documentation: https://design.zebra.com/flutter/dartdoc/index.html platforms: @@ -39,7 +39,7 @@ dev_dependencies: image: ^4.2.0 mockito: ^5.4.4 path: ^1.9.0 - zds_analysis: ^1.0.1 + zds_analysis: ^1.1.1 flutter: fonts: @@ -62,4 +62,5 @@ flutter: - asset: lib/generated/icons/zeta-icons-sharp.ttf assets: - lib/assets/flags/ + - lib/assets/logos/ uses-material-design: true diff --git a/test/src/components/banner/banner_test.dart b/test/src/components/banner/banner_test.dart index b24fd290..6333215b 100644 --- a/test/src/components/banner/banner_test.dart +++ b/test/src/components/banner/banner_test.dart @@ -7,17 +7,17 @@ import '../../../test_utils/test_app.dart'; import '../../../test_utils/tolerant_comparator.dart'; import '../../../test_utils/utils.dart'; -ZetaColorSwatch _colorFromType(BuildContext context, ZetaBannerStatus type) { +ZetaColorSwatch _colorFromType(BuildContext context, ZetaSystemBannerStatus type) { final zeta = Zeta.of(context); switch (type) { - case ZetaBannerStatus.primary: + case ZetaSystemBannerStatus.primary: return zeta.colors.primitives.primary; - case ZetaBannerStatus.positive: + case ZetaSystemBannerStatus.positive: return zeta.colors.primitives.green; - case ZetaBannerStatus.warning: + case ZetaSystemBannerStatus.warning: return zeta.colors.primitives.orange; - case ZetaBannerStatus.negative: + case ZetaSystemBannerStatus.negative: return zeta.colors.primitives.red; } } @@ -32,13 +32,13 @@ void main() { }); group('Accessibility Tests', () { - for (final type in ZetaBannerStatus.values) { + for (final type in ZetaSystemBannerStatus.values) { testWidgets('meets contrast ratio guideline for $type', (WidgetTester tester) async { await tester.pumpWidget( TestApp( home: Builder( builder: (context) { - return ZetaBanner( + return ZetaSystemBanner( context: context, title: 'Banner Title', leadingIcon: Icons.info, @@ -65,7 +65,7 @@ void main() { return TestApp( home: Builder( builder: (context) { - return ZetaBanner( + return ZetaSystemBanner( context: context, title: 'Banner Title', semanticLabel: semanticLabelText, @@ -98,7 +98,7 @@ void main() { return TestApp( home: Builder( builder: (context) { - return ZetaBanner( + return ZetaSystemBanner( context: context, title: titleText, ); @@ -121,12 +121,12 @@ void main() { }); group('Content Tests', () { - testWidgets('ZetaBanner title is correct', (WidgetTester tester) async { + testWidgets('ZetaSystemBanner title is correct', (WidgetTester tester) async { await tester.pumpWidget( TestApp( home: Builder( builder: (context) { - return ZetaBanner( + return ZetaSystemBanner( context: context, title: 'Banner Title', ); @@ -138,12 +138,12 @@ void main() { expect(textFinder, findsOneWidget); }); - testWidgets('ZetaBanner leading icon is correct', (WidgetTester tester) async { + testWidgets('ZetaSystemBanner leading icon is correct', (WidgetTester tester) async { await tester.pumpWidget( TestApp( home: Builder( builder: (context) { - return ZetaBanner( + return ZetaSystemBanner( context: context, title: 'Banner Title', leadingIcon: Icons.info, @@ -164,7 +164,7 @@ void main() { TestApp( home: Builder( builder: (context) { - return ZetaBanner( + return ZetaSystemBanner( context: context, title: 'Banner Title', trailing: const ZetaIconButton(icon: ZetaIcons.close), @@ -200,7 +200,7 @@ void main() { TestApp( home: Builder( builder: (context) { - return ZetaBanner( + return ZetaSystemBanner( context: context, title: 'Banner Title', leadingIcon: ZetaIcons.info, @@ -221,7 +221,7 @@ void main() { TestApp( home: Builder( builder: (context) { - return ZetaBanner( + return ZetaSystemBanner( context: context, title: 'Banner Title', leadingIcon: ZetaIcons.info, @@ -242,7 +242,7 @@ void main() { TestApp( home: Builder( builder: (context) { - return ZetaBanner( + return ZetaSystemBanner( context: context, title: 'Banner Title', ); @@ -259,13 +259,13 @@ void main() { }); group('Styling Tests', () { - for (final type in ZetaBannerStatus.values) { + for (final type in ZetaSystemBannerStatus.values) { testWidgets('title styles are correct for $type', (WidgetTester tester) async { await tester.pumpWidget( TestApp( home: Builder( builder: (context) { - return ZetaBanner( + return ZetaSystemBanner( context: context, title: 'Banner Title', type: type, @@ -291,7 +291,7 @@ void main() { TestApp( home: Builder( builder: (context) { - return ZetaBanner( + return ZetaSystemBanner( context: context, title: 'Banner Title', leadingIcon: Icons.info, @@ -313,7 +313,7 @@ void main() { TestApp( home: Builder( builder: (context) { - return ZetaBanner( + return ZetaSystemBanner( context: context, title: 'Banner Title', type: type, @@ -322,8 +322,8 @@ void main() { ), ), ); - final Finder finder = find.byType(ZetaBanner); - final ZetaBanner widget = tester.firstWidget(finder); + final Finder finder = find.byType(ZetaSystemBanner); + final ZetaSystemBanner widget = tester.firstWidget(finder); expect(widget.backgroundColor, equals(_colorFromType(tester.element(finder), type))); }); @@ -333,12 +333,12 @@ void main() { group('Interaction Tests', () {}); group('Golden Tests', () { - for (final type in ZetaBannerStatus.values) { + for (final type in ZetaSystemBannerStatus.values) { goldenTest( goldenFile, Builder( builder: (context) { - return ZetaBanner( + return ZetaSystemBanner( context: context, title: 'Banner Title', leadingIcon: Icons.info, @@ -348,7 +348,7 @@ void main() { }, ), 'banner_${type.toString().split('.').last}', - widgetType: ZetaBanner, + widgetType: ZetaSystemBanner, ); } }); diff --git a/test/src/components/in_page_banner/golden/in_page_banner_buttons.png b/test/src/components/in_page_banner/golden/in_page_banner_buttons.png index e7ed4b128a86d8bba204151f99e33996c33939c3..a6c773308f4119ccb3387db673b834c8bdcff72a 100644 GIT binary patch literal 4654 zcmeH|dr;F?7RN6k5VYm>N7VuXYiErk3R~n+0f9Oqr3kbX2#+M7QYC}{E`&!C5>`gV zK?*aDA_Po3)MX8jpvXfY1hj%KkANYGJd!{W5Ml@zLx2#nmvweJ-QC$f{$1`rzk7f8 z-gD3W+;h(N>KCDb<~wb60szc|K06T(fUzS0h-foY_@^T4Vmka7WrPPF2b@8>c{o63 z91n^xgNP;wNGY68!K2Y(3ZCVn$d>C6Ma?u^$op|{pp8!E zDx}bk`H>_YIX#b03E}#BQKAP%6Js&j>^9kZ0K7=hQOC(1O3`R+Y2tJ(?Ttw>HPZj|3wCAkIEQysV91Q@351o;>T2p^_EswkQ<}h3o5b+VmxDxnQmd z8`VTIgbN}g^VBK>Co8KtKF0!@AGl=lw9mEt)B?(H^|XZ85g}h4=VER^#}m{KQUC2G zANfOn_87rq-(7n4Q77spQ@);6e6qSEuYYuOG=OIZK*MF{L;kXMU3b8-58&uK>_ro} zqb}3*WmSuu4ezJ;v3Uz(#gQ#i{gH{%R0aCTOWpJ$u-My8ZE<`zE;E%b$4q*vjNEY@Lll! zQjY(+=<;y(r|@Kd7YsKmKUaqcRhe|r*&z*0(wiod8vcO8UWkb-G&v#fVVMBNi6=S>eC;K{EROj zp>@8Zn73x$>|;MU6BE+7%W%U8h(GebT+qB<7_(*XNYy~{&`RHxb4EaMhJ;8w=s#(= zb?ThEokbho_+5y+R;Ef;pAinjQ~E}CbLpDyB5}BmdiplwPd1n(1~;}TFgWBk|`c{iI}W* zJPJ%+suQt7;~7fIF^UhT-9g56qIyFwlHF4B5LUKna6_V3{jf4jPYg#PK8GFJf*>+lv4&D9dGVy0yXMCH0RgF<3HtTd+9cT rZ35c_wh3$#*e0+|V4J}IHG$3dNGCW2R?X%40Jflj&=Z{F2^aqXq@KI0 literal 4385 zcmeH~drZ?;6vuCYNy9_LY(fPY(PWzFaDcN|d8kv7sjxY(_42EY+#*b4aFL%>xYL4p9UpM&?Jm9kO=GqS|G`^YpwDaC_Fd zWefRhFP`zTiW$ycDSD;bSGF+Wb*sU6CahO-NF@tI*?%}F; zDQHh`d?hxGt-2;SnVNd*)YS0d(5cb3kermDd8|Qr93l3hhCDn%@}c&HdgH709Hl@l zLtBt=+(gb`hcGLRK|!u-dp+UIh0$u3VN_!@3`7=4ujo}c!G(g^vMVF11$DEJSJChQ z^j}n#ZI$Wb@Ul*F5`Fp)!?(VY5S%l9LLv47;KVsqBOlL+FXgl)@_mci$SN~D0I`cg zSiriQxWoeh|3zy6VCDl106`8;0NlgQdDSQ|x-lmETQWzV{aSob-y;rgO4s*h_4)zO z^@-Z0P?D*?fbwiZ$;b-x{XUB>#by<$vuFS$vPNNI8%1oxF*2*QcPWAa&DZO1f~-B!(b3X^oKdQFFIsbIBBlv1o#PJxDLco}0RXZS z7Jx!eXjrq62>`%hUNsKgE^~a&)lUy}b@$nN6ux1MoG+7|0ib;6>RQN{lrb89_zX%z z{3h-ul&QVGn%N_-ox%>hE+Cro z#(E|t2t0(uEg+jYJUpBqG1;l-(cEF^9R5=1b;aKphW~7Ar>I;TtJIOprA3v9OhXU9 zEPvFXI9>Dj@#Fd3-2#J@El$a1P*qw08h>VE3oFnfg9fccJ6qU%QQEOBl>t4^!a)FP6 zSDs}ZXuW_M(AHoiUQ`Sv(!t~ zSDk^ds+z>~^$W+vTOKFFP4tb%OKBV0#c*L~kMP~y)8+_zG9C4aUu~TB=rzj?Rx{(| zkcr2z{DjIPtma^ZXP)Lxm?c=-R1w3kF1c^Fb~XUK+!s8(BkkVq_v^S21J=~m)^=pW z9LcCQwUHY-O~$g^lP@>+GEm*X3EVM@Tw;+u#WPTaLM&5H={>^zB;$j1o#I)f&p)J( z9&WUB>H@iY>url6@9i;GO9Zd?16U0DpU-`3`n<@gVn|IJIq0%{utCAxe59VlZo8A~ ziecWr>4~`&Rx$(5OlY}Y%cG&Vh9~I|iS|x$vpggdotk_iSUiK2N|m&qpv*gdMse_O z*3kYTYl8vJDI@cm=gITVbGJMl&08xO*-Kt(duqgDX2K9cZ4m>zL@d_Y!z1*D59wo=+F8G zVsGq3huD_DlC27{4}6+#DD6S8j@lHAcCt9tLs_-6CwpN5PfLr{|Cf|SsS7C1pqBcaYuU?mM=1*?0aD)H= diff --git a/test/src/components/in_page_banner/golden/in_page_banner_default.png b/test/src/components/in_page_banner/golden/in_page_banner_default.png index d1dc47c035c3d4dbb76885b688fe6784ddefe539..4a3594d9389430c4d34004f4abd7b5cc324c72fa 100644 GIT binary patch delta 962 zcmV;z13moJ9`_!QKz|P*NklJT5egDS>_tyC zDfJ)lAE;mv6v2Z%*n^e&4|q^|^B*XRKMuVl^kfAUu@SwriKL26k(#uLn@o0-9_l%o zo#}hBo7W5G_I#e_Gjn_MJTtR4pU-c<`IqbC&#$~UE??Rn^MC8N1^@uSG928TjAIW> z$H`Mi#>0WS0i>?>z>J%9R%)8otn^N)P$ zk#XT~7j`|rjC1_tM=y>izx?DvI{*N{qLvmQkAH29!w=l~n5&m|7a#xt!2aM@u#-^& z7?a!r5P!3@KO+3ax5ha5kvktV|If0n1^@u;MN12ii?1&0OaK7De&rD?001Df&>fJc zUijbz008j+a0dhc0Lbi#09jvO?5ir1wY9|-Sa5#P{g-i$wM9Pz003BmrF{wg!}P0{ ze!c1y004j`*b{d^004mfL4W`N02u)S003kJ2$S6d7)QD1|A=tw`qp^Jxt*Pz zF~%6{>+ARQ+!$j#|J)D8Y&N^=IRF6IYwq~~na}6r=fC{fs@M2Xeec=l1PA~C_XUq& z0h3V#JUM2%>IMFn&5h0R-S0em*K^z3+hdF|rqjE7i}l?2?|TFQfcwEcA0QhW8{_Lw zKeOsJ004j`@CX)@F$5@oCL6QKxUqF>)q4N{0Q=aDty^PbHW`zn$EV}13tOw+2LJ%r z$KE=>HI5#ij>*YWN5=18erH@bcWqq1wzKNJ004k}Wb5kAIRB@s<99E=Gftj5GS=qv z`R%{|_4;`2?0e(#rR{O^hR3l00D$E9105SK3St~6HHd&MyXUkHm^fT$H|!wero2(&Ffwf007u8-gtTDFTa^N_2Aar`}oFeeD98n7jL_N z=A)lo_i6wDz<%|oCujcf{h7@(&(3`4&ULQ?008V~w|-*gU(d~Ko_lrXx+Cje2LJ%r z&knzL=Ip;`HVD_f2mkTz)0sydn zO9#mBpP2dM50;z#*nKniJofgk{rs06nCJie{BjSPnLBU4Ykv9br-Jf@=BYi* zAG`I~yzt@+OV6+39^d`;6La?+ckgKj003A8N3Z|@fXvcwK>pvyzc6#?hD%>_?$w#o z-&w`e004li)k*^7w)m0!XlUD*Fet=p{mv0A001Df^c#?S9((I^rEP8P?Iq3T#>UtmFvRmGtBfPpx|e003Y`9Kiwr05Spu0077c5C8xmBR~KE zfQ$eE001%qlW+nFlVk!AM{KWqflE1i?(97Jjjvty-0tq~%*$;dyOmVtB;%%AOHYdGaSJJlUD*FlVk!FJ|jQ?0D#Q) zx)->VLkADdR~~xgvgdYoc4lT~d;9XfUOhMS)^`K|fNRA&IzSE{JUE}b?}2r%0RRB3 zh$C3DK?NTQli&pHe>M-_ICJ)ub*}*c0PJUHUzs_45!f$7O_05@kAHOggi^byNvp?UQ zr@yr|XP%vT^R;!a2mk==7l&?`Ir`z56A$ms@lRiv{{fHB600|E47r>D0000rx!0~r>*ZkR4Nl$>#Gpzt6nS@A!q^%uF^nH>dYr|I^t1?aO0&?Z%kizJD_S003rTa`3>I99003Z*n7;eo*#663$KBujZY(|b zr7>AQ`@`wJ&wX|*edg(T?*;$>>`_~<{c&twd1Wk2-?}jtpZe6i_W=L^_OQiIetb-? z-y93mjoV|ge;41p_W=L^_OQvy@|dn~jD>kG0ssI!K9gVpAb)8$!~eN@ZEWBC=L5|y zu6}fU;MmdKTn_*MJYsegApd^xr{nEQKYyUv!zaHo*3O;T&Gi5Pz$0c?0RjL3JUaey z_3F5B^X3E1uC1<)j~zR<>m6nmARjsX^|5g1!}mRN@76oxUl)Edt1AHjfE_sh;*Z9U zFI{?|*>9daIe#vmJHP84W)>iaPknVP9a+8anXT(LcN`$M@7x(Loc;ce_u1aw9@8-$ zON%>u#CmRwG0wj5{8&DCaL0210Pv`J=wHFw+}s>5{p#2AUgLdr=DXh+Lx2DP5PJUf z>2dhbq5GbB`_`@Tg9{gCdhbIYAOHZs?0xIhsd4nk6ASk}bM5+DGY=5|1Cv|<9)FqH z&+uM5ae6GQEZ_Icz4eV*T?YUFJc4ExARAZyFsqLO008zVe?$lX0FR+BpExmAR#xtN zW_^8q=J)O@K-SKk8Efax%x)V103h-5l`C_(*O$-%0D#Ox{|eTD{RhVPPJesHb6Z>6 zV=|^=acO6dSkI0BKO+DDyx%UKI~+eQo;yF+9Ul4s*}s3^_{P_soA(+30Kg1*1q+jr z1BQRIFj-k1)Afyc?*RY+>|xXOjWJnS9t)Ert7H4kzt4Lg003YQ+kW$JV{&A5EG$0r z`EmD`m&ewtZ;a`C>+{|V007uSrtiEvwqAK{-2KJnvH0xqG1=VQoZfrm&tv=Y@5jAs z*T=YXciuY!004W$WclEjJh3(wpFKVno_-GUe*rS@r2qhc$Ae$N0<)n50SgxY1WDz0RR9107*qoM6N<$g7Ig+w*UYD delta 899 zcmV-}1AP4A9`7EIL4O%ZL_t(|obBDqi{57$fZ=xzCY^+)GfgL{hg~bJ|A9zByQqk| zapeKD2E|$-l^{(T0tTfZjf$X9j3TzU5J6C^DCoii)gro2)fQZ6&7n!BiJ7#YnT!jU z!juftd(6yrt>5Q+pWpK4J55a{lhx%P|9mWc_3`oQslSeE7k@7e004lEFumvIvGZ+j z9rH&X8oSdg}xCkDEX6-p$?(007vcF8%0d`LziYGi0RRBDuwCzb z$C&*2`7yn+^d0h;-o0zH_W=L^wy>F7=f}!ROJjPo7XbhOwhsZ5e*zwpZ~+E?cD;lD z{`(7K@R#wL9SRJ!7*Y|k!+!$j#dhC(0 zYi{nk=KuiUMzrn#x$yOGkC(pny>-nleCnfP|B2(Td2TY9j355wsde3Pqd0!}b7Ke) z006d$bq5Fl0C3~@$3IVx7tf!6U)Styd-skvzw!1B*<(WjWbdI*kLme6Yo58bba9;j z+BY}iIsgFRI-Pvt$??SZf3U9EkAL`s8-zHP4(mckXow zlY9apf7y_q;eFwghsN~oU2C4Xc6oUtt^xo6ZeSY{Aj?nxVIyAVf84b5rg8MpXRmwi z>eZDoHCD&W?DaifJvYXGpAi56wu}GkKO)?@bH{k_!2O%O1^@tTDGxnzY|PEgt$F6k zl`F5y-RlmJ{U?r({U?rZU;TzZ>U1 z|Jc}f@+)I%GMTI{KlO{T^w>AXtEc`lu3h@qX73090BjL6^S6v0ci$g57LFVobML!v Z{0Bzv(Lr1KtbqUk002ovPDHLkV1nDB*U$g} diff --git a/test/src/components/in_page_banner/golden/in_page_banner_positive.png b/test/src/components/in_page_banner/golden/in_page_banner_positive.png index 2ec287daa8984d9b1312785cd7f3b712f0df2060..76eec09aa2d0514a88b7a15d9713228870d611a8 100644 GIT binary patch delta 820 zcmV-41Izq@9{(MXL4T=9L_t(|obBDgi(O|Kz~L{GOeQn2lGv0c+Tw^psYT492!a&c zq}zbFvJ2_TT|f#_C~jH`{tsCybfM6qE((RBn^q~*R%s9$O{GmzOiVG(Wadu7bWsm30AfH`q}^Tv4h$_L}+zrHbk z@b$;WzMsAJtL<;CK0Lm0{42BG4FCX`Q-8kvkMYL~=f=XNwU5R__dPJ{eE}L4FwGYRo z|Ni?^&7Sz&7sl$*`*(9Z006MZ>?%N>``ruU#dEKHs@c;Ie|wxgeP%bu0{{Sfj7P8l z0D#P{?tuKiC%*aJadi2f+g@|+#`W>@w_csrkpKX|9y7H7dFngg8xMT`*ln+Q|36oD z93UGvHpcVMJiFt4Zry*nHOBTB`w#5@OwWxm#?#L}GnQADcRU9G0DH~U0_0AaOeW*k zzkF%dYur&!{q!eec?b{y0Op@}KmY)Mi~s=u05Spu0077c5C8xmBR~KEfQ$eE001%q z1ONcYOznR_zW>7WV`cHsZLeA1+L+dH006)qG_?Tv+trKH`Y2og0ANme1PcHF$n5G4 z$l23p#@W+nrne0M05I3w0RaF2GE;j8$&m2 z?+5?@cZ1J-fE-*}8bAEele1m}005W*k6;0l5d$)R7FHIQ#`@OgtoHx_0Or{G*5+7Q zTpA0<4<8wSzj|rb`v3p{bL{-pi{tp=BV*yzmrsu0yz}~a>*D#bHrbfy^4hhradT_dI|2Xzb7FaMX`DEGWSm+( yIUczW_rXsBWY$Xo004Ifzk&s`0RvSF7Cr{dXRvzyxs6Kz0000Tv6)HI(6m93X3;2A3sUg|VnM_# z1dA?W#f`WSL5Ly*q}UdU3YFr*KcL#IM4=18l)4CR;>V&`>cXP5Dz+7)rIIG0NjvE@ zLtMBKgp>^9J!W!U>)&(EbCx&fyu901S643||I1VJy{8_Z=YLM0npfX=eEWPoJ2DKb}4{pLq8NHhUic z0ALII*lq8dKO?>J_gOf1@wM4?!_sE&0{{SQVK*<|IA>Qb%)(|b0ssJ9Ka;@&B!8L3 z^$xyx_T_o$!kKl=zH|4@bKBl`yydxzD;MYC2OqlX>#wb?&0L<@zPSDWdTwUsfrlQP z<(VrcKGO9o?BgAohN?s_`2?Kt+@A__s#MM z5C8zK4?e*H001)UegpEKzVQA-vo3e}#w(sVyK;Vh^t+QAaXSD2;2O0d0dnt0KRf&P z?7QNbQ?H&DAOHYxo%0D6lR*S1Y&PVN2tW7O!?W{kOIJMe`kNOw;#L3vz%^_`0_4xH z{9_|7^Iw*hcFfTSzJAqnYnLv~%*^)1t9!h9Zsy<52mk=riwy~o|CJkd?3gbe`O;>u z0RRAOkaY*hvBO8_*x{oaxeEXQu*LZiIm_U+uW z*}DM%09(Y%7tYNuUU+7{ee%cigS)>v+g4XsFF*18)AQZm{B)i>{kJ*)#>!^z2mk