diff --git a/example/lib/pages/components/badges_example.dart b/example/lib/pages/components/badges_example.dart index 27d4b3a9..f016fb85 100644 --- a/example/lib/pages/components/badges_example.dart +++ b/example/lib/pages/components/badges_example.dart @@ -130,8 +130,8 @@ class _Badge extends StatelessWidget { mainAxisAlignment: MainAxisAlignment.spaceEvenly, crossAxisAlignment: CrossAxisAlignment.center, children: [ - ZetaBadge(label: 'Label', status: type), - ZetaBadge(label: 'Label', status: type, rounded: false), + ZetaLabel(label: 'Label', status: type), + ZetaLabel(label: 'Label', status: type, rounded: false), ], ); } diff --git a/example/lib/pages/components/banner_example.dart b/example/lib/pages/components/banner_example.dart index b6513599..002848c8 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'), - ZetaSystemBanner( - type: ZetaSystemBannerStatus.primary, + ZetaBanner( + type: ZetaBannerStatus.primary, title: 'Centered', context: context, titleStart: true, leadingIcon: ZetaIcons.info_round, ), - ZetaSystemBanner( - type: ZetaSystemBannerStatus.primary, + ZetaBanner( + type: ZetaBannerStatus.primary, context: context, title: 'Title Left', ), - ZetaSystemBanner( - type: ZetaSystemBannerStatus.primary, + ZetaBanner( + type: ZetaBannerStatus.primary, context: context, title: 'Title left with arrow', titleStart: true, trailing: Icon(ZetaIcons.chevron_right_round), ), - ZetaSystemBanner( - type: ZetaSystemBannerStatus.primary, + ZetaBanner( + type: ZetaBannerStatus.primary, title: 'Title left + Icon', titleStart: true, context: context, leadingIcon: ZetaIcons.info_round, ), - ZetaSystemBanner( - type: ZetaSystemBannerStatus.primary, + ZetaBanner( + type: ZetaBannerStatus.primary, context: context, title: 'Title left + Icon with Arrow', titleStart: true, @@ -54,10 +54,10 @@ class BannerExample extends StatelessWidget { trailing: IconButton( icon: Icon(ZetaIcons.chevron_right_round), onPressed: () { - ScaffoldMessenger.of(context).showMaterialBanner(ZetaSystemBanner( + ScaffoldMessenger.of(context).showMaterialBanner(ZetaBanner( title: 'Title', context: context, - type: ZetaSystemBannerStatus.primary, + type: ZetaBannerStatus.primary, trailing: IconButton( icon: Icon(ZetaIcons.close_round), onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(), @@ -67,8 +67,8 @@ class BannerExample extends StatelessWidget { ), ), _getTitle('Color variants'), - ZetaSystemBanner( - type: ZetaSystemBannerStatus.positive, + ZetaBanner( + type: ZetaBannerStatus.positive, context: context, title: 'Centered', titleStart: true, @@ -76,10 +76,10 @@ class BannerExample extends StatelessWidget { trailing: IconButton( icon: Icon(ZetaIcons.chevron_right_round), onPressed: () { - ScaffoldMessenger.of(context).showMaterialBanner(ZetaSystemBanner( + ScaffoldMessenger.of(context).showMaterialBanner(ZetaBanner( title: 'Title', context: context, - type: ZetaSystemBannerStatus.positive, + type: ZetaBannerStatus.positive, trailing: IconButton( icon: Icon(ZetaIcons.close_round), onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(), @@ -88,8 +88,8 @@ class BannerExample extends StatelessWidget { }, ), ), - ZetaSystemBanner( - type: ZetaSystemBannerStatus.warning, + ZetaBanner( + type: ZetaBannerStatus.warning, title: 'Centered', context: context, titleStart: true, @@ -97,10 +97,10 @@ class BannerExample extends StatelessWidget { trailing: IconButton( icon: Icon(ZetaIcons.chevron_right_round), onPressed: () { - ScaffoldMessenger.of(context).showMaterialBanner(ZetaSystemBanner( + ScaffoldMessenger.of(context).showMaterialBanner(ZetaBanner( title: 'Title', context: context, - type: ZetaSystemBannerStatus.warning, + type: ZetaBannerStatus.warning, trailing: IconButton( icon: Icon(ZetaIcons.close_round), onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(), @@ -109,8 +109,8 @@ class BannerExample extends StatelessWidget { }, ), ), - ZetaSystemBanner( - type: ZetaSystemBannerStatus.negative, + ZetaBanner( + type: ZetaBannerStatus.negative, title: 'Centered', context: context, titleStart: true, @@ -118,10 +118,10 @@ class BannerExample extends StatelessWidget { trailing: IconButton( icon: Icon(ZetaIcons.chevron_right_round), onPressed: () { - ScaffoldMessenger.of(context).showMaterialBanner(ZetaSystemBanner( + ScaffoldMessenger.of(context).showMaterialBanner(ZetaBanner( title: 'Title', context: context, - type: ZetaSystemBannerStatus.negative, + type: ZetaBannerStatus.negative, trailing: IconButton( icon: Icon(ZetaIcons.close_round), onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(), diff --git a/example/lib/pages/components/pagination_example.dart b/example/lib/pages/components/pagination_example.dart index df318ed5..8409708c 100644 --- a/example/lib/pages/components/pagination_example.dart +++ b/example/lib/pages/components/pagination_example.dart @@ -20,7 +20,7 @@ class _PaginationExampleState extends State { name: PaginationExample.name, child: Center( child: Padding( - padding: const EdgeInsets.all(64), + padding: const EdgeInsets.all(ZetaSpacing.xL9), child: Column( children: [ Expanded( diff --git a/example/test/badge_test.dart b/example/test/badge_test.dart index 0028007d..2450b2b7 100644 --- a/example/test/badge_test.dart +++ b/example/test/badge_test.dart @@ -7,15 +7,15 @@ void main() { testWidgets('Initializes with correct parameters', (WidgetTester tester) async { await tester.pumpWidget( TestWidget( - widget: ZetaBadge( + widget: ZetaLabel( label: 'Test Label', status: ZetaWidgetStatus.warning, ), ), ); - final zetaBadgeFinder = find.byType(ZetaBadge); - final ZetaBadge badge = tester.firstWidget(zetaBadgeFinder); + final zetaBadgeFinder = find.byType(ZetaLabel); + final ZetaLabel badge = tester.firstWidget(zetaBadgeFinder); expect(badge.rounded, true); expect(badge.label, 'Test Label'); diff --git a/example/test/priority_pill_test.dart b/example/test/priority_pill_test.dart index 6c24544a..32f6acad 100644 --- a/example/test/priority_pill_test.dart +++ b/example/test/priority_pill_test.dart @@ -8,7 +8,7 @@ void main() { await tester.pumpWidget( TestWidget( widget: ZetaPriorityPill( - priority: 'High', + label: 'High', index: '2', ), ), diff --git a/example/widgetbook/main.dart b/example/widgetbook/main.dart index 3b903802..ef12e236 100644 --- a/example/widgetbook/main.dart +++ b/example/widgetbook/main.dart @@ -1,5 +1,8 @@ +import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; +import 'package:flutter/rendering.dart'; import 'package:flutter/services.dart'; +import 'package:flutter_test/flutter_test.dart'; import 'package:widgetbook/widgetbook.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; @@ -67,6 +70,34 @@ class HotReload extends StatefulWidget { } class _HotReloadState extends State { + closeAddonsPanel(_) async { + final renderObj = context.findRenderObject(); + final size = MediaQuery.of(context).size; + if (size.width > 799) { + if (renderObj is RenderBox) { + await Future.delayed(Duration(milliseconds: 10)); + final pos = Offset(size.width - 50, 10); + final hitTestResult = BoxHitTestResult(); + renderObj.hitTest(hitTestResult, position: pos); + final entry = hitTestResult.path.firstWhere((e) => e is BoxHitTestEntry) as BoxHitTestEntry; + final event1 = PointerDownEvent(position: pos); + final event2 = PointerUpEvent(position: pos); + + GestureBinding.instance + ..dispatchEvent(event1, hitTestResult) + ..dispatchEvent(event2, hitTestResult) + ..handleEvent(event1, entry) + ..handleEvent(event2, entry); + } + } + } + + @override + void initState() { + super.initState(); + WidgetsBinding.instance.addPostFrameCallback(closeAddonsPanel); + } + @override Widget build(BuildContext context) { return Widgetbook( @@ -94,15 +125,11 @@ class _HotReloadState extends State { useCases: [ WidgetbookUseCase(name: 'Status Label', builder: (context) => statusLabelUseCase(context)), WidgetbookUseCase(name: 'Priority Pill', builder: (context) => priorityPillUseCase(context)), - WidgetbookUseCase(name: 'Badge', builder: (context) => badgeUseCase(context)), + WidgetbookUseCase(name: 'Label', builder: (context) => labelUseCase(context)), WidgetbookUseCase(name: 'Indicators', builder: (context) => indicatorsUseCase(context)), WidgetbookUseCase(name: 'Tags', builder: (context) => tagsUseCase(context)), ], ), - WidgetbookUseCase( - name: 'Chat Item', - builder: (context) => chatItemWidgetBook(context), - ), WidgetbookComponent( name: 'Buttons', useCases: [ @@ -128,41 +155,48 @@ class _HotReloadState extends State { WidgetbookUseCase(name: 'Circle', builder: (context) => progressCircleUseCase(context)) ], ), + WidgetbookComponent( + name: 'List Items', + useCases: [ + WidgetbookUseCase(name: 'List Item', builder: (context) => listItemUseCase(context)), + WidgetbookUseCase( + name: 'Notification List Item', builder: (context) => notificationListItemUseCase(context)), + WidgetbookUseCase(name: 'Contact Item', builder: (context) => contactItemUseCase(context)), + WidgetbookUseCase(name: 'Chat List Item', builder: (context) => chatItemWidgetBook(context)), + ], + ), WidgetbookUseCase(name: 'Accordion', builder: (context) => accordionUseCase(context)), WidgetbookUseCase(name: 'Avatar', builder: (context) => avatarUseCase(context)), - WidgetbookUseCase(name: 'BreadCrumbs', builder: (context) => breadCrumbsUseCase(context)), WidgetbookUseCase(name: 'Banners', builder: (context) => bannerUseCase(context)), + WidgetbookUseCase(name: 'Bottom Sheet', builder: (context) => bottomSheetContentUseCase(context)), + WidgetbookUseCase(name: 'BreadCrumbs', builder: (context) => breadCrumbsUseCase(context)), WidgetbookUseCase(name: 'Checkbox', builder: (context) => checkboxUseCase(context)), - WidgetbookUseCase(name: 'Contact Item', builder: (context) => contactItemUseCase(context)), - WidgetbookUseCase(name: "Dropdown", builder: (context) => dropdownUseCase(context)), - WidgetbookUseCase(name: 'In Page Banners', builder: (context) => inPageBannerUseCase(context)), - WidgetbookUseCase(name: 'Password Input', builder: (context) => passwordInputUseCase(context)), - WidgetbookUseCase(name: 'Content', builder: (context) => bottomSheetContentUseCase(context)), + WidgetbookUseCase(name: 'Bottom Sheet', builder: (context) => bottomSheetContentUseCase(context)), + WidgetbookUseCase(name: 'Date Input', builder: (context) => dateInputUseCase(context)), WidgetbookUseCase(name: 'Dial Pad', builder: (context) => dialPadUseCase(context)), + WidgetbookUseCase(name: 'Dialog', builder: (context) => dialogUseCase(context)), + WidgetbookUseCase(name: 'Filter Selection', builder: (context) => filterSelectionUseCase(context)), WidgetbookUseCase(name: 'Global Header', builder: (context) => globalHeaderUseCase(context)), - WidgetbookUseCase(name: 'List Item', builder: (context) => listItemUseCase(context)), - WidgetbookUseCase( - name: 'Notification List Item', builder: (context) => notificationListItemUseCase(context)), + WidgetbookUseCase(name: 'In Page Banners', builder: (context) => inPageBannerUseCase(context)), WidgetbookUseCase(name: 'Navigation Bar', builder: (context) => navigationBarUseCase(context)), + WidgetbookUseCase(name: 'Navigation Rail', builder: (context) => navigationRailUseCase(context)), WidgetbookUseCase(name: 'Pagination', builder: (context) => paginationUseCase(context)), + WidgetbookUseCase(name: 'Password Input', builder: (context) => passwordInputUseCase(context)), + WidgetbookUseCase(name: 'Phone Input', builder: (context) => phoneInputUseCase(context)), WidgetbookUseCase(name: 'Radio Button', builder: (context) => radioButtonUseCase(context)), + WidgetbookUseCase(name: 'Screen Header Bar', builder: (context) => screenHeaderBarUseCase(context)), + WidgetbookUseCase(name: 'Search Bar', builder: (context) => searchBarUseCase(context)), WidgetbookUseCase(name: 'Segmented Control', builder: (context) => segmentedControlUseCase(context)), - WidgetbookUseCase(name: 'Switch', builder: (context) => switchUseCase(context)), + WidgetbookUseCase(name: 'Select Input', builder: (context) => selectInputUseCase(context)), WidgetbookUseCase(name: 'Snack Bar', builder: (context) => snackBarUseCase(context)), - WidgetbookUseCase(name: 'Date Input', builder: (context) => dateInputUseCase(context)), - WidgetbookUseCase(name: 'Tabs', builder: (context) => tabsUseCase(context)), - WidgetbookUseCase(name: 'Phone Input', builder: (context) => phoneInputUseCase(context)), - WidgetbookUseCase(name: 'Stepper', builder: (context) => stepperUseCase(context)), WidgetbookUseCase(name: 'Stepper Input', builder: (context) => stepperInputUseCase(context)), - WidgetbookUseCase(name: 'Dialog', builder: (context) => dialogUseCase(context)), - WidgetbookUseCase(name: 'Search Bar', builder: (context) => searchBarUseCase(context)), - WidgetbookUseCase(name: 'Navigation Rail', builder: (context) => navigationRailUseCase(context)), - WidgetbookUseCase(name: 'Tooltip', builder: (context) => tooltipUseCase(context)), - WidgetbookUseCase(name: 'Select Input', builder: (context) => selectInputUseCase(context)), - WidgetbookUseCase(name: 'Screen Header Bar', builder: (context) => screenHeaderBarUseCase(context)), - WidgetbookUseCase(name: 'Filter Selection', builder: (context) => filterSelectionUseCase(context)), - WidgetbookUseCase(name: 'Time Input', builder: (context) => timeInputUseCase(context)), + WidgetbookUseCase(name: 'Stepper', builder: (context) => stepperUseCase(context)), + WidgetbookUseCase(name: 'Switch', builder: (context) => switchUseCase(context)), + WidgetbookUseCase(name: 'Tabs', builder: (context) => tabsUseCase(context)), WidgetbookUseCase(name: 'Text Input', builder: (context) => textInputUseCase(context)), + WidgetbookUseCase(name: 'Time Input', builder: (context) => timeInputUseCase(context)), + WidgetbookUseCase(name: 'Tooltip', builder: (context) => tooltipUseCase(context)), + WidgetbookUseCase(name: "Dropdown", builder: (context) => dropdownUseCase(context)), ]..sort((a, b) => a.name.compareTo(b.name)), ), WidgetbookCategory( diff --git a/example/widgetbook/pages/assets/icon_widgetbook.dart b/example/widgetbook/pages/assets/icon_widgetbook.dart index 8f0736a5..e66ea91e 100644 --- a/example/widgetbook/pages/assets/icon_widgetbook.dart +++ b/example/widgetbook/pages/assets/icon_widgetbook.dart @@ -40,7 +40,7 @@ Widget iconsUseCase(BuildContext context) { onTap: () async { await Clipboard.setData(ClipboardData(text: 'ZetaIcons.' + e.key)); ScaffoldMessenger.of(context).showMaterialBanner( - ZetaSystemBanner(context: context, title: 'Icon name copied'), + ZetaBanner(context: context, title: 'Icon name copied'), ); await Future.delayed(Duration(seconds: 4)); ScaffoldMessenger.of(context).clearMaterialBanners(); diff --git a/example/widgetbook/pages/components/accordion_widgetbook.dart b/example/widgetbook/pages/components/accordion_widgetbook.dart index 22ee9ae1..4ac22280 100644 --- a/example/widgetbook/pages/components/accordion_widgetbook.dart +++ b/example/widgetbook/pages/components/accordion_widgetbook.dart @@ -6,6 +6,7 @@ import '../../test/test_components.dart'; import '../../utils/utils.dart'; Widget accordionUseCase(BuildContext context) => WidgetbookTestWidget( + screenSize: Size(1280, 720), widget: Padding( padding: const EdgeInsets.all(ZetaSpacing.xL), child: ZetaAccordion( diff --git a/example/widgetbook/pages/components/avatar_widgetbook.dart b/example/widgetbook/pages/components/avatar_widgetbook.dart index 38cf250a..337670d0 100644 --- a/example/widgetbook/pages/components/avatar_widgetbook.dart +++ b/example/widgetbook/pages/components/avatar_widgetbook.dart @@ -12,27 +12,25 @@ Widget avatarUseCase(BuildContext context) { widget: ZetaAvatar( image: context.knobs.boolean(label: 'Image') ? image : null, size: context.knobs.list( - label: 'Size', - options: ZetaAvatarSize.values, - labelBuilder: (value) => value.name.split('.').last.toUpperCase(), - initialOption: ZetaAvatarSize.m), + label: 'Size', + options: ZetaAvatarSize.values, + labelBuilder: (value) => value.name.split('.').last.toUpperCase(), + initialOption: ZetaAvatarSize.m, + ), upperBadge: context.knobs.boolean(label: 'Status Badge', initialValue: false) ? ZetaAvatarBadge.icon( icon: ZetaIcons.close_round, - iconColor: context.knobs.colorOrNull(label: "Badge Icon Color"), color: context.knobs.colorOrNull(label: "Upper Badge Color", initialValue: colors.green) ?? colors.iconDefault, ) : null, - borderColor: context.knobs.colorOrNull( - label: 'Outline', - ), + borderColor: context.knobs.colorOrNull(label: 'Outline', initialValue: colors.green), lowerBadge: context.knobs.boolean(label: 'Notification Badge', initialValue: false) ? ZetaAvatarBadge.notification( value: context.knobs.intOrNull.input(label: "Value", initialValue: 1), ) : null, - initials: context.knobs.stringOrNull(label: 'Initials', initialValue: null), + initials: context.knobs.stringOrNull(label: 'Initials', initialValue: 'AZ'), backgroundColor: context.knobs.colorOrNull(label: 'Background color', initialValue: colors.purple.shade80), ), ); diff --git a/example/widgetbook/pages/components/badges_widgetbook.dart b/example/widgetbook/pages/components/badges_widgetbook.dart index 316df5c4..063e8541 100644 --- a/example/widgetbook/pages/components/badges_widgetbook.dart +++ b/example/widgetbook/pages/components/badges_widgetbook.dart @@ -25,32 +25,42 @@ Widget statusLabelUseCase(BuildContext context) { ); } -Widget priorityPillUseCase(BuildContext context) => WidgetbookTestWidget( - widget: Padding( - padding: const EdgeInsets.all(ZetaSpacing.xL2), - child: ZetaPriorityPill( - index: context.knobs.string(label: 'Index'), - priority: context.knobs.string(label: 'Label'), - size: context.knobs.list( - label: 'Size', - options: ZetaPriorityPillSize.values, - labelBuilder: (value) => value.name.capitalize(), - ), - type: context.knobs.list( - label: 'Priority', - options: ZetaPriorityPillType.values, - labelBuilder: (value) => value.name.capitalize(), - ), - rounded: context.knobs.boolean(label: 'Rounded', initialValue: true), - isBadge: context.knobs.boolean(label: 'Badge'), +Widget priorityPillUseCase(BuildContext context) { + final colors = Zeta.of(context).colors; + return WidgetbookTestWidget( + widget: Padding( + padding: const EdgeInsets.all(ZetaSpacing.xL2), + child: ZetaPriorityPill( + index: context.knobs.string(label: 'Index', initialValue: 'U'), + label: context.knobs.string(label: 'Label', initialValue: 'Urgent'), + size: context.knobs.list( + label: 'Size', + options: ZetaPriorityPillSize.values, + labelBuilder: (value) => value.name.capitalize(), + ), + type: context.knobs.list( + label: 'Priority', + options: ZetaPriorityPillType.values, + labelBuilder: (value) => value.name.capitalize(), + ), + rounded: context.knobs.boolean(label: 'Rounded', initialValue: true), + isBadge: context.knobs.boolean(label: 'Badge'), + customColor: context.knobs.listOrNull( + label: 'Custom color', + options: colors.rainbow, + labelBuilder: (value) { + return colors.rainbowMap.entries.firstWhere((v) => v.value == value).key.capitalize(); + }, ), ), - ); + ), + ); +} -Widget badgeUseCase(BuildContext context) => WidgetbookTestWidget( +Widget labelUseCase(BuildContext context) => WidgetbookTestWidget( widget: Padding( padding: const EdgeInsets.all(ZetaSpacing.xL2), - child: ZetaBadge( + child: ZetaLabel( label: context.knobs.string(label: 'Label', initialValue: 'Label'), rounded: roundedKnob(context), status: context.knobs.list( @@ -82,6 +92,7 @@ Widget indicatorsUseCase(BuildContext context) { options: ZetaWidgetSize.values, ), value: context.knobs.int.slider(label: 'Value'), + color: context.knobs.colorOrNull(label: 'Custom color'), ), ), ); diff --git a/example/widgetbook/pages/components/banner_widgetbook.dart b/example/widgetbook/pages/components/banner_widgetbook.dart index 4153ac50..c04b9299 100644 --- a/example/widgetbook/pages/components/banner_widgetbook.dart +++ b/example/widgetbook/pages/components/banner_widgetbook.dart @@ -8,12 +8,12 @@ import '../../utils/utils.dart'; Widget bannerUseCase(BuildContext context) { final rounded = roundedKnob(context); - final banner = ZetaSystemBanner( + final banner = ZetaBanner( context: context, title: context.knobs.string(label: 'Title', initialValue: 'Banner Title'), type: context.knobs.list( label: 'Type', - options: ZetaSystemBannerStatus.values, + options: ZetaBannerStatus.values, labelBuilder: enumLabelBuilder, ), leadingIcon: iconKnob(context, rounded: rounded, nullable: true), @@ -28,23 +28,21 @@ Widget bannerUseCase(BuildContext context) { ); return WidgetbookTestWidget( - widget: Padding( - padding: EdgeInsets.all(ZetaSpacing.xL), - child: Column( - children: [ - banner, - const SizedBox(height: ZetaSpacing.xL9), - ZetaButton.text( - label: 'Popup', - onPressed: () { - ScaffoldMessenger.of(context).showMaterialBanner(banner); - Future.delayed(Duration(seconds: 2)).then( - (value) => ScaffoldMessenger.of(context).clearMaterialBanners(), - ); - }, - ) - ], - ), + removeBody: true, + widget: Column( + children: [ + banner, + const SizedBox(height: ZetaSpacing.xL9), + ZetaButton.text( + label: 'Popup', + onPressed: () { + ScaffoldMessenger.of(context).showMaterialBanner(banner); + Future.delayed(Duration(seconds: 2)).then( + (value) => ScaffoldMessenger.of(context).clearMaterialBanners(), + ); + }, + ) + ], ), ); } diff --git a/example/widgetbook/pages/components/button_widgetbook.dart b/example/widgetbook/pages/components/button_widgetbook.dart index be4b71d1..f148a21e 100644 --- a/example/widgetbook/pages/components/button_widgetbook.dart +++ b/example/widgetbook/pages/components/button_widgetbook.dart @@ -93,7 +93,8 @@ Widget buttonGroupUseCase(BuildContext context) { } Widget floatingActionButtonUseCase(BuildContext context) => WidgetbookTestWidget( - widget: Padding(padding: EdgeInsets.all(20), child: FabWidget(context)), + screenSize: Size(1280, 720), + widget: Padding(padding: EdgeInsets.all(ZetaSpacing.xL), child: FabWidget(context)), ); class FabWidget extends StatefulWidget { @@ -136,6 +137,7 @@ class _FabWidgetState extends State { itemBuilder: (context, index) => Text("$index"), ), floatingActionButton: ZetaFAB( + initiallyExpanded: true, scrollController: _scrollController, label: widget.c.knobs.string(label: 'Label', initialValue: 'Floating Action Button'), onPressed: widget.c.knobs.boolean(label: 'Disabled') ? null : () {}, diff --git a/example/widgetbook/pages/components/chat_item_widgetbook.dart b/example/widgetbook/pages/components/chat_item_widgetbook.dart index 7c55a1cb..936e9564 100644 --- a/example/widgetbook/pages/components/chat_item_widgetbook.dart +++ b/example/widgetbook/pages/components/chat_item_widgetbook.dart @@ -6,25 +6,18 @@ import '../../test/test_components.dart'; Widget chatItemWidgetBook(BuildContext context) { final title = context.knobs.string(label: 'Title', initialValue: 'Chat name ID'); - final subtitle = context.knobs.string( label: 'Subtitle', initialValue: 'Dummy text to represent the first lines of most recent message', ); - final count = context.knobs.int.input(label: 'Count', initialValue: 3); - final enabledWarningIcon = context.knobs.boolean(label: 'Warning Icon', initialValue: false); final enabledNotificationIcon = context.knobs.boolean(label: 'Notification Icon', initialValue: false); final starred = context.knobs.boolean(label: 'Starred', initialValue: false); - final enabledOnTap = context.knobs.boolean(label: 'Enabled Tap', initialValue: true); final enabledOnDelete = context.knobs.boolean(label: 'Delete', initialValue: true); - final enabledOnMenuMore = context.knobs.boolean(label: 'Menu More', initialValue: true); - final enabledOnCall = context.knobs.boolean(label: 'Call', initialValue: true); - final enabledOnPtt = context.knobs.boolean(label: 'Ptt', initialValue: true); return WidgetbookTestWidget( @@ -39,9 +32,7 @@ Widget chatItemWidgetBook(BuildContext context) { onMenuMoreTap: enabledOnMenuMore ? () {} : null, onPttTap: enabledOnPtt ? () {} : null, starred: starred, - leading: const ZetaAvatar( - size: ZetaAvatarSize.l, - ), + leading: const ZetaAvatar.initials(initials: 'AZ', size: ZetaAvatarSize.m), title: Text(title), subtitle: Text(subtitle), ), diff --git a/example/widgetbook/pages/components/chip_widgetbook.dart b/example/widgetbook/pages/components/chip_widgetbook.dart index 78c61d14..9caaee6f 100644 --- a/example/widgetbook/pages/components/chip_widgetbook.dart +++ b/example/widgetbook/pages/components/chip_widgetbook.dart @@ -12,7 +12,14 @@ Widget inputChipUseCase(BuildContext context) { return WidgetbookTestWidget( widget: ZetaInputChip( label: context.knobs.string(label: 'Label', initialValue: 'Label'), - leading: context.knobs.boolean(label: 'Avatar') ? ZetaAvatar(initials: 'AZ', size: ZetaAvatarSize.xs) : null, + leading: context.knobs.boolean(label: 'Avatar', initialValue: true) + ? ZetaAvatar( + initials: 'AZ', + image: context.knobs.boolean(label: 'Avatar Image') + ? Image.asset('assets/Omer.jpg', fit: BoxFit.cover) + : null, + ) + : null, rounded: rounded, trailing: trailing != null ? Icon(trailing) : null, ), @@ -23,14 +30,17 @@ Widget filterChipUseCase(BuildContext context) => WidgetbookTestWidget( widget: ZetaFilterChip( label: context.knobs.string(label: 'Label', initialValue: 'Label'), rounded: roundedKnob(context), - selected: context.knobs.boolean(label: 'Selected'), + selected: context.knobs.boolean(label: 'Selected', initialValue: true), ), ); -Widget assistChipUseCase(BuildContext context) => WidgetbookTestWidget( - widget: ZetaAssistChip( - label: context.knobs.string(label: 'Label', initialValue: 'Label'), - rounded: roundedKnob(context), - leading: context.knobs.boolean(label: 'Icon') ? Icon(ZetaIcons.star_round) : null, - ), - ); +Widget assistChipUseCase(BuildContext context) { + final rounded = roundedKnob(context); + return WidgetbookTestWidget( + widget: ZetaAssistChip( + label: context.knobs.string(label: 'Label', initialValue: 'Label'), + rounded: rounded, + leading: Icon(iconKnob(context, rounded: rounded)), + ), + ); +} diff --git a/example/widgetbook/pages/components/list_item_widgetbook.dart b/example/widgetbook/pages/components/list_item_widgetbook.dart index e545cf7c..c2ff83ad 100644 --- a/example/widgetbook/pages/components/list_item_widgetbook.dart +++ b/example/widgetbook/pages/components/list_item_widgetbook.dart @@ -16,8 +16,8 @@ Widget listItemUseCase(BuildContext context) { final leading = context.knobs.boolean(label: 'Leading', initialValue: false) ? Container( - width: 48, - height: 48, + width: ZetaSpacing.xL8, + height: ZetaSpacing.xL8, decoration: BoxDecoration(borderRadius: ZetaRadius.rounded), child: Placeholder(), ) diff --git a/example/widgetbook/pages/components/stepper_input_widgetbook.dart b/example/widgetbook/pages/components/stepper_input_widgetbook.dart index d8de1472..798db6c3 100644 --- a/example/widgetbook/pages/components/stepper_input_widgetbook.dart +++ b/example/widgetbook/pages/components/stepper_input_widgetbook.dart @@ -9,8 +9,8 @@ Widget stepperInputUseCase(BuildContext context) { return WidgetbookTestWidget( widget: ZetaStepperInput( initialValue: context.knobs.int.input(label: 'Initial value'), - min: context.knobs.int.input(label: 'Minimum value'), - max: context.knobs.int.input(label: 'Maximum value'), + min: context.knobs.int.input(label: 'Minimum value', initialValue: 0), + max: context.knobs.int.input(label: 'Maximum value', initialValue: 10), size: context.knobs.list( label: 'Size', options: ZetaStepperInputSize.values, diff --git a/example/widgetbook/test/test_components.dart b/example/widgetbook/test/test_components.dart index e1d5d476..dba5e42b 100644 --- a/example/widgetbook/test/test_components.dart +++ b/example/widgetbook/test/test_components.dart @@ -16,21 +16,23 @@ class WidgetbookTestWidget extends StatelessWidget { @override Widget build(BuildContext context) { - final size = screenSize ?? const Size(1280, 720); - return Scaffold( backgroundColor: backgroundColor ?? Colors.transparent, body: removeBody ? widget - : Center( - child: SizedBox( - width: size.width, - height: size.height, - child: MediaQuery( - data: MediaQueryData(size: Size(size.width, size.height)), - child: SingleChildScrollView(child: Center(child: widget)), + : Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + SizedBox( + width: screenSize?.width, + height: screenSize?.height, + child: MediaQuery( + data: MediaQueryData( + size: Size(screenSize?.width ?? double.infinity, screenSize?.height ?? double.infinity)), + child: SingleChildScrollView(child: Center(child: widget)), + ), ), - ), + ], ), ); } diff --git a/lib/src/components/accordion/accordion.dart b/lib/src/components/accordion/accordion.dart index d2f8e47c..d4dd51c5 100644 --- a/lib/src/components/accordion/accordion.dart +++ b/lib/src/components/accordion/accordion.dart @@ -2,8 +2,6 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import '../../../zeta_flutter.dart'; -/// Zeta Accordion component. -/// /// The accordion is a control element comprising a vertically stacked list of items, /// such as labels or thumbnails. Each item can be "expanded" or "collapsed" to reveal /// the content associated with that item. There can be zero expanded items, exactly one, @@ -94,6 +92,7 @@ class _ZetaAccordionState extends State with TickerProviderStateM Widget build(BuildContext context) { final zetaColors = Zeta.of(context).colors; final borderColor = _disabled ? zetaColors.borderDisabled : zetaColors.borderSubtle; + final childTextStyle = ZetaTextStyles.h5.apply(color: zetaColors.textDefault); return DecoratedBox( decoration: BoxDecoration( border: widget.contained ? Border.all(color: borderColor) : Border(top: BorderSide(color: borderColor)), @@ -142,7 +141,7 @@ class _ZetaAccordionState extends State with TickerProviderStateM } }), child: Padding( - padding: const EdgeInsets.all(16), + padding: const EdgeInsets.all(ZetaSpacing.large), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ @@ -169,15 +168,16 @@ class _ZetaAccordionState extends State with TickerProviderStateM sizeFactor: _animation, axisAlignment: -1, child: Padding( - padding: const EdgeInsets.fromLTRB(ZetaSpacing.large, 0, ZetaSpacing.large, ZetaSpacing.large), + padding: const EdgeInsets.fromLTRB( + ZetaSpacing.large, + ZetaSpacing.none, + ZetaSpacing.large, + ZetaSpacing.large, + ), child: Theme( - data: Theme.of(context).copyWith( - listTileTheme: ListTileThemeData( - titleTextStyle: ZetaTextStyles.titleSmall.apply(color: zetaColors.textDefault), - ), - ), + data: Theme.of(context).copyWith(listTileTheme: ListTileThemeData(titleTextStyle: childTextStyle)), child: DefaultTextStyle( - style: ZetaTextStyles.titleSmall, + style: childTextStyle, child: widget.child ?? const SizedBox(), ), ), diff --git a/lib/src/components/avatars/avatar.dart b/lib/src/components/avatars/avatar.dart index cc07d499..125f5759 100644 --- a/lib/src/components/avatars/avatar.dart +++ b/lib/src/components/avatars/avatar.dart @@ -32,7 +32,7 @@ enum ZetaAvatarSize { xxxs, } -/// ZetaAvatar component +/// An avatar is a visual representation of a user or entity. class ZetaAvatar extends StatelessWidget { /// Constructor for [ZetaAvatar] const ZetaAvatar({ @@ -141,7 +141,7 @@ class ZetaAvatar extends StatelessWidget { size == ZetaAvatarSize.xs ? initials!.substring(0, 1) : initials!, style: TextStyle( fontSize: size.fontSize, - letterSpacing: 0, + letterSpacing: ZetaSpacing.none, color: backgroundColor?.onColor, fontWeight: FontWeight.w500, ), @@ -192,15 +192,15 @@ class ZetaAvatar extends StatelessWidget { ), if (upperBadge != null) Positioned( - right: 0, + right: ZetaSpacing.none, child: upperBadge!.copyWith( size: size, ), ), if (lowerBadge != null) Positioned( - right: 0, - bottom: 0, + right: ZetaSpacing.none, + bottom: ZetaSpacing.none, child: lowerBadge!.copyWith( size: size, ), @@ -279,8 +279,9 @@ enum ZetaAvatarBadgeType { notification, } -/// ZetaAvatarBadge component - +/// Badge component used with [ZetaAvatar] as either [ZetaAvatar.upperBadge] or[ ZetaAvatar.lowerBadge]. +/// +/// Sizes and styles are managed by the parent [ZetaAvatar]. class ZetaAvatarBadge extends StatelessWidget { /// Constructor for [ZetaAvatarBadge] const ZetaAvatarBadge({ @@ -316,7 +317,7 @@ class ZetaAvatarBadge extends StatelessWidget { const ZetaAvatarBadge.notification({ super.key, - required this.value, + this.value, }) : size = ZetaAvatarSize.xxxl, icon = null, iconColor = null, @@ -364,7 +365,8 @@ class ZetaAvatarBadge extends StatelessWidget { @override Widget build(BuildContext context) { final colors = Zeta.of(context).colors; - final backgroundColor = type == ZetaAvatarBadgeType.notification ? colors.surfaceNegative : color; + final Color backgroundColor = + type == ZetaAvatarBadgeType.notification ? colors.surfaceNegative : (color ?? colors.primary); final badgeSize = _getContainerSize(); final borderSize = _getBorderSize(); final paddedSize = badgeSize + ZetaSpacing.minimum; @@ -380,7 +382,7 @@ class ZetaAvatarBadge extends StatelessWidget { child: Text( value! > 99 ? '99+' : '$value', style: TextStyle( - color: backgroundColor?.onColor, + color: backgroundColor.onColor, fontSize: ((10 / 12) * badgeSize) - 2, height: 1, ), @@ -390,7 +392,7 @@ class ZetaAvatarBadge extends StatelessWidget { ? Icon( icon, size: badgeSize - borderSize, - color: iconColor ?? backgroundColor?.onColor, + color: iconColor ?? backgroundColor.onColor, ) : null, ); diff --git a/lib/src/components/badges/indicator.dart b/lib/src/components/badges/indicator.dart index 1e3e7a01..24f2e10c 100644 --- a/lib/src/components/badges/indicator.dart +++ b/lib/src/components/badges/indicator.dart @@ -158,7 +158,7 @@ class ZetaIndicator extends StatelessWidget { case ZetaWidgetSize.medium: return ZetaSpacing.small; case ZetaWidgetSize.small: - return 0; + return ZetaSpacing.none; } } diff --git a/lib/src/components/badges/badge.dart b/lib/src/components/badges/label.dart similarity index 61% rename from lib/src/components/badges/badge.dart rename to lib/src/components/badges/label.dart index 151fdd0a..74d35e65 100644 --- a/lib/src/components/badges/badge.dart +++ b/lib/src/components/badges/label.dart @@ -3,12 +3,16 @@ import 'package:flutter/material.dart'; import '../../../zeta_flutter.dart'; +///Zeta Badge. +@Deprecated('Use ZetaLabel instead. ' 'This widget has been renamed as of 0.11.0') +typedef ZetaBadge = ZetaLabel; + /// Zeta Badge. /// /// Text badges notify users of line items that need attention. -class ZetaBadge extends StatelessWidget { - ///Constructs [ZetaBadge]. - const ZetaBadge({ +class ZetaLabel extends StatelessWidget { + ///Constructs [ZetaLabel]. + const ZetaLabel({ required this.label, this.status = ZetaWidgetStatus.info, this.rounded = true, @@ -26,7 +30,7 @@ class ZetaBadge extends StatelessWidget { @override Widget build(BuildContext context) { - final Color backgroundColor = status.colorSwatch(context); + final Color backgroundColor = status.labelBackgroundColor(context); return Container( padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.minimum, vertical: ZetaSpacingBase.x0_5), @@ -51,3 +55,21 @@ class ZetaBadge extends StatelessWidget { ..add(DiagnosticsProperty('rounded', rounded)); } } + +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.shade40; + case ZetaWidgetStatus.negative: + return colors.surfaceNegative; + case ZetaWidgetStatus.neutral: + return colors.cool.shade30; + } + } +} diff --git a/lib/src/components/badges/priority_pill.dart b/lib/src/components/badges/priority_pill.dart index 9206e336..bcdacd9d 100644 --- a/lib/src/components/badges/priority_pill.dart +++ b/lib/src/components/badges/priority_pill.dart @@ -1,29 +1,31 @@ +// ignore_for_file: deprecated_member_use_from_same_package + import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import '../../../zeta_flutter.dart'; -/// The type of [ZetaPriorityPill]. +/// The type of [ZetaPriorityPill]; determines the default [ZetaPriorityPill.customColor], [ZetaPriorityPill.index] and [ZetaPriorityPill.label]. enum ZetaPriorityPillType { - /// sets the color to a shade of red + /// Sets the default color to `ZetaColors.red` and index to 'U'. urgent, - /// sets the color to a shade of orange + /// Sets the default color to `ZetaColors.orange` and index to '1'. high, - /// sets the color to a shade of blue + /// Sets the default color to `ZetaColors.blue` and index to '2'. medium, - /// sets the color to a shade of green + /// Sets the default color to `ZetaColors.green` and index to '3'. low, } /// The size of [ZetaPriorityPill]. enum ZetaPriorityPillSize { - /// large + /// Large size contains both badge and lozenge. large, - /// small + /// Small size contains badge only. small, } @@ -43,30 +45,40 @@ extension on ZetaPriorityPillType { } } -/// Zeta Priority Pill. -/// /// This badge is used to indicate the order of importance. class ZetaPriorityPill extends StatelessWidget { ///Constructs [ZetaPriorityPill] const ZetaPriorityPill({ this.index, - this.priority, + @Deprecated('Use label instead. ' 'This variable has been renamed as of 0.11.0') this.priority, + this.label, this.rounded = true, this.isBadge = false, this.type = ZetaPriorityPillType.urgent, this.size = ZetaPriorityPillSize.large, + this.customColor, super.key, }); /// {@macro zeta-component-rounded} final bool rounded; - /// Leading number in component. + /// Leading number / character in component. Will be truncated to single character. + /// + /// Defaults to value based on [type]. + /// * Urgent = U + /// * High = 1 + /// * Medium = 2 + /// * Low = 3 final String? index; /// Text in main part of component. + @Deprecated('Use label instead. ' 'This variable has been renamed as of 0.11.0') final String? priority; + /// Text in main part of component. + final String? label; + /// Indicates if it is badge or lozenge. /// /// Default is `false` (lozenge). @@ -74,18 +86,22 @@ class ZetaPriorityPill extends StatelessWidget { /// The type of [ZetaPriorityPill]. /// - /// Default is 'ZetaPriorityPillType.urgent' + /// Default is [ZetaPriorityPillType.urgent] final ZetaPriorityPillType type; /// The size of [ZetaPriorityPill]. /// - /// Default is `ZetaWidgetSize.large`. + /// Default is [ZetaWidgetSize.large]. final ZetaPriorityPillSize size; + /// Color override + final ZetaColorSwatch? customColor; + @override Widget build(BuildContext context) { - final color = type.color(context); + final ZetaColorSwatch color = customColor ?? type.color(context); final size = this.size == ZetaPriorityPillSize.small ? ZetaSpacing.xL : ZetaSpacing.xL3; + final label = this.label ?? priority; return DecoratedBox( decoration: BoxDecoration( @@ -111,8 +127,8 @@ class ZetaPriorityPill extends StatelessWidget { : index!.substring(0, 1).capitalize(), style: this.size == ZetaPriorityPillSize.small ? ZetaTextStyles.labelSmall.copyWith( - fontSize: 11, - height: 1.1, + fontSize: 10, + height: 13 / 10, color: color.onColor, ) : ZetaTextStyles.labelMedium.apply(color: color.onColor), @@ -125,11 +141,11 @@ class ZetaPriorityPill extends StatelessWidget { vertical: ZetaSpacing.minimum, ), child: Text( - (priority?.isEmpty ?? true) ? type.name.capitalize() : priority!, + (label?.isEmpty ?? true) ? type.name.capitalize() : label!, style: this.size == ZetaPriorityPillSize.small ? ZetaTextStyles.bodyXSmall.copyWith( - fontSize: 11, - height: 1.1, + fontSize: 10, + height: 13 / 10, ) : ZetaTextStyles.bodySmall, overflow: TextOverflow.ellipsis, @@ -145,10 +161,12 @@ class ZetaPriorityPill extends StatelessWidget { super.debugFillProperties(properties); properties ..add(StringProperty('index', index)) - ..add(StringProperty('priority', priority)) ..add(DiagnosticsProperty('rounded', rounded)) ..add(DiagnosticsProperty('isBadge', isBadge)) ..add(EnumProperty('type', type)) - ..add(EnumProperty('size', size)); + ..add(EnumProperty('size', size)) + ..add(StringProperty('label', label)) + ..add(ColorProperty('customColor', customColor)) + ..add(StringProperty('priority', priority)); } } diff --git a/lib/src/components/banners/system_banner.dart b/lib/src/components/banner/banner.dart similarity index 79% rename from lib/src/components/banners/system_banner.dart rename to lib/src/components/banner/banner.dart index 49b06f4a..410b0756 100644 --- a/lib/src/components/banners/system_banner.dart +++ b/lib/src/components/banner/banner.dart @@ -5,8 +5,16 @@ import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import '../../../zeta_flutter.dart'; -/// [ZetaSystemBanner] type -enum ZetaSystemBannerStatus { +/// [ZetaBanner] type. +@Deprecated('Use ZetaBannerStatus instead. ' 'This widget has been renamed as of 0.11.0') +typedef ZetaSystemBannerStatus = ZetaBannerStatus; + +/// Zeta Banner. Extends [MaterialBanner]. +@Deprecated('Use ZetaBanner instead. ' 'This widget has been renamed as of 0.11.0') +typedef ZetaSystemBanner = ZetaBanner; + +/// [ZetaBanner] type +enum ZetaBannerStatus { /// Primary background. primary, @@ -20,18 +28,18 @@ enum ZetaSystemBannerStatus { negative, } -/// ZetaSystemBanner. Extends [MaterialBanner]. +/// Zeta Banner. Extends [MaterialBanner]. /// /// A banner displays an important, succinct message, and provides action for users to address. /// It draws the attention to the message by displaying it at the top in various colors. -class ZetaSystemBanner extends MaterialBanner { - /// Constructor for [ZetaSystemBanner]. See [MaterialBanner] for more information. - ZetaSystemBanner({ +class ZetaBanner extends MaterialBanner { + /// Constructor for [ZetaBanner]. See [MaterialBanner] for more information. + ZetaBanner({ required BuildContext context, required String title, super.key, IconData? leadingIcon, - ZetaSystemBannerStatus type = ZetaSystemBannerStatus.primary, + ZetaBannerStatus type = ZetaBannerStatus.primary, bool titleStart = false, Widget? trailing, }) : super( @@ -85,17 +93,17 @@ class ZetaSystemBanner extends MaterialBanner { ], ); - static ZetaColorSwatch _backgroundColorFromType(BuildContext context, ZetaSystemBannerStatus type) { + static ZetaColorSwatch _backgroundColorFromType(BuildContext context, ZetaBannerStatus type) { final zeta = Zeta.of(context); switch (type) { - case ZetaSystemBannerStatus.primary: + case ZetaBannerStatus.primary: return zeta.colors.primary; - case ZetaSystemBannerStatus.positive: + case ZetaBannerStatus.positive: return zeta.colors.surfacePositive; - case ZetaSystemBannerStatus.warning: + case ZetaBannerStatus.warning: return zeta.colors.orange; - case ZetaSystemBannerStatus.negative: + case ZetaBannerStatus.negative: return zeta.colors.surfaceNegative; } } diff --git a/lib/src/components/bottom sheets/bottom_sheet.dart b/lib/src/components/bottom sheets/bottom_sheet.dart index 06c260b2..184a69d5 100644 --- a/lib/src/components/bottom sheets/bottom_sheet.dart +++ b/lib/src/components/bottom sheets/bottom_sheet.dart @@ -31,7 +31,7 @@ class ZetaBottomSheet extends StatelessWidget { return Container( padding: const EdgeInsets.fromLTRB( ZetaSpacing.xL, - 0, + ZetaSpacing.none, ZetaSpacing.xL, ZetaSpacing.xL, ), @@ -59,11 +59,14 @@ class ZetaBottomSheet extends StatelessWidget { ), ), if (title != null) - Align( - alignment: centerTitle ? Alignment.center : Alignment.centerLeft, - child: Text( - title!, - style: ZetaTextStyles.titleMedium, + Padding( + padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.medium, vertical: ZetaSpacing.xL2), + child: Align( + alignment: centerTitle ? Alignment.center : Alignment.centerLeft, + child: Text( + title!, + style: ZetaTextStyles.titleMedium, + ), ), ), Material( diff --git a/lib/src/components/breadcrumbs/breadcrumbs.dart b/lib/src/components/breadcrumbs/breadcrumbs.dart index 7cb9b7a8..ff3835ae 100644 --- a/lib/src/components/breadcrumbs/breadcrumbs.dart +++ b/lib/src/components/breadcrumbs/breadcrumbs.dart @@ -63,16 +63,16 @@ class _ZetaBreadCrumbsState extends State { child: Row( children: renderedChildren(widget.children) .divide( - const Row( + Row( children: [ - SizedBox( + const SizedBox( width: ZetaSpacing.small, ), Icon( - ZetaIcons.chevron_right_round, + widget.rounded ? ZetaIcons.chevron_right_round : ZetaIcons.chevron_right_sharp, size: ZetaSpacing.xL, ), - SizedBox( + const SizedBox( width: ZetaSpacing.small, ), ], @@ -308,7 +308,7 @@ class _BreadCrumbsTruncatedState extends State { }), padding: WidgetStateProperty.all(EdgeInsets.zero), minimumSize: WidgetStateProperty.all(Size.zero), - elevation: const WidgetStatePropertyAll(0), + elevation: const WidgetStatePropertyAll(ZetaSpacing.none), ), child: Icon( widget.rounded ? ZetaIcons.more_horizontal_round : ZetaIcons.more_horizontal_sharp, diff --git a/lib/src/components/buttons/button_group.dart b/lib/src/components/button_group/button_group.dart similarity index 97% rename from lib/src/components/buttons/button_group.dart rename to lib/src/components/button_group/button_group.dart index 305b326c..1c15a0bf 100644 --- a/lib/src/components/buttons/button_group.dart +++ b/lib/src/components/button_group/button_group.dart @@ -9,8 +9,8 @@ class ZetaButtonGroup extends StatelessWidget { const ZetaButtonGroup({ super.key, required this.buttons, - required this.rounded, - required this.isLarge, + this.rounded = true, + this.isLarge = false, this.isInverse = false, }); @@ -246,10 +246,7 @@ class _ZetaGroupButtonState extends State { if (widget.icon != null) Icon(widget.icon, size: ZetaSpacing.xL), Text(widget.label ?? '', style: ZetaTextStyles.labelMedium), if (widget.dropdown != null) // TODO(UX-1006): Dropdown - Icon( - widget.rounded ? ZetaIcons.expand_more_round : ZetaIcons.expand_more_sharp, - size: ZetaSpacing.xL, - ), + Icon(widget.rounded ? ZetaIcons.expand_more_round : ZetaIcons.expand_more_sharp, size: ZetaSpacing.xL), ].divide(const SizedBox(width: ZetaSpacing.minimum)).toList(), ).paddingAll(_padding), ), @@ -320,7 +317,7 @@ class _ZetaGroupButtonState extends State { if (widget.isInverse) return colors.cool.shade100.onColor; return colors.textDefault; }), - elevation: const WidgetStatePropertyAll(0), + elevation: const WidgetStatePropertyAll(ZetaSpacing.none), padding: WidgetStateProperty.all(EdgeInsets.zero), ); } diff --git a/lib/src/components/buttons/button_style.dart b/lib/src/components/buttons/button_style.dart index 9e85bba9..50cbacd1 100644 --- a/lib/src/components/buttons/button_style.dart +++ b/lib/src/components/buttons/button_style.dart @@ -61,8 +61,6 @@ extension ButtonFunctions on ZetaButtonType { bool get solid => index < 4; } -extension on ZetaColors {} - ///Border utility functions extension BorderFunctions on ZetaWidgetBorder { ///Returns radius based on [ZetaWidgetBorder] @@ -91,7 +89,7 @@ ButtonStyle buttonStyle( final bool isSolid = type.solid || backgroundColor != null; return ButtonStyle( - minimumSize: WidgetStateProperty.all(const Size.square(32)), + minimumSize: WidgetStateProperty.all(const Size.square(ZetaSpacing.xL4)), shape: WidgetStateProperty.all( RoundedRectangleBorder(borderRadius: borderType.radius), ), diff --git a/lib/src/components/chips/chip.dart b/lib/src/components/chips/chip.dart index 76711cdf..ab9005cb 100644 --- a/lib/src/components/chips/chip.dart +++ b/lib/src/components/chips/chip.dart @@ -83,6 +83,21 @@ class _ZetaChipState extends State { selected = widget.selected ?? false; } + Widget _renderLeading(Color foregroundColor) { + if (leading.runtimeType == Icon) { + return IconTheme( + data: IconThemeData( + color: foregroundColor, + size: ZetaSpacing.xL, + ), + child: leading!, + ); + } else if (leading.runtimeType == ZetaAvatar) { + return (leading! as ZetaAvatar).copyWith(size: ZetaAvatarSize.xxxs); + } + return leading!; + } + @override Widget build(BuildContext context) { final colors = Zeta.of(context).colors; @@ -136,23 +151,16 @@ class _ZetaChipState extends State { padding: WidgetStateProperty.all( EdgeInsets.fromLTRB( widget.leading != null ? ZetaSpacingBase.x2_5 : ZetaSpacing.medium, - 0, + ZetaSpacing.none, widget.trailing != null ? ZetaSpacingBase.x2_5 : ZetaSpacing.medium, - 0, + ZetaSpacing.none, ), ), ), child: Row( mainAxisSize: MainAxisSize.min, children: [ - if (leading != null) - IconTheme( - data: IconThemeData( - color: foregroundColor, - size: ZetaSpacing.xL, - ), - child: leading!, - ), + if (leading != null) _renderLeading(foregroundColor), Text(widget.label), if (widget.trailing != null) IconTheme( diff --git a/lib/src/components/dropdown/dropdown.dart b/lib/src/components/dropdown/dropdown.dart index 05b270a4..c291d63d 100644 --- a/lib/src/components/dropdown/dropdown.dart +++ b/lib/src/components/dropdown/dropdown.dart @@ -366,10 +366,7 @@ class _DropdownItemState extends State<_DropdownItem> { }, ); case ZetaDropdownMenuType.standard: - return widget.value.icon ?? - const SizedBox( - width: 24, - ); + return widget.value.icon ?? const SizedBox(width: ZetaSpacing.xL2); } } diff --git a/lib/src/components/buttons/fab.dart b/lib/src/components/fabs/fab.dart similarity index 80% rename from lib/src/components/buttons/fab.dart rename to lib/src/components/fabs/fab.dart index 992a3d4a..2eb525ea 100644 --- a/lib/src/components/buttons/fab.dart +++ b/lib/src/components/fabs/fab.dart @@ -29,13 +29,14 @@ enum ZetaFabSize { class ZetaFAB extends StatefulWidget { ///Constructs [ZetaFAB]. const ZetaFAB({ - required this.scrollController, - required this.label, + this.label, + this.scrollController, + this.onPressed, this.type = ZetaFabType.primary, this.size = ZetaFabSize.small, this.shape = ZetaWidgetBorder.full, this.icon = ZetaIcons.add_round, - this.onPressed, + this.initiallyExpanded = false, super.key, }); @@ -59,18 +60,26 @@ class ZetaFAB extends StatefulWidget { /// {@macro on-change-disable} final VoidCallback? onPressed; - /// The [ZetaFAB] uses this controller to react to scroll change - /// and shrink/expand itself - final ScrollController scrollController; + /// The [ZetaFAB] uses this controller to react to scroll change and shrink/expand itself. + /// + /// If null, the FAB will never change from its initial size. + final ScrollController? scrollController; - ///The label of the button - final String label; + ///The label of the button. + /// + /// If null, the FAB will never grow. + final String? label; /// Icon for the button /// /// Defaults to [ZetaIcons.add_round]. final IconData icon; + /// Whether the FAB starts as expanded. + /// + /// If [scrollController] or [label] are null, this is the permanent state of the FAB. + final bool initiallyExpanded; + @override State createState() => _ZetaFABState(); @@ -82,29 +91,29 @@ class ZetaFAB extends StatefulWidget { ..add(EnumProperty('buttonSize', size)) ..add(EnumProperty('buttonShape', shape)) ..add(ObjectFlagProperty.has('onPressed', onPressed)) - ..add( - DiagnosticsProperty( - 'scrollController', - scrollController, - ), - ) + ..add(DiagnosticsProperty('scrollController', scrollController)) ..add(StringProperty('buttonLabel', label)) - ..add(DiagnosticsProperty('buttonIcon', icon)); + ..add(DiagnosticsProperty('buttonIcon', icon)) + ..add(DiagnosticsProperty('initiallyExpanded', initiallyExpanded)); } } class _ZetaFABState extends State { - bool _isExpanded = false; + bool __isExpanded = false; + bool get _isExpanded => __isExpanded; + set _isExpanded(bool value) { + if (value && widget.label != null || !value) __isExpanded = value; + } @override void initState() { super.initState(); - _isExpanded = false; - widget.scrollController.addListener(_scrollListener); + _isExpanded = (widget.initiallyExpanded && widget.label != null) || false; + widget.scrollController?.addListener(_scrollListener); } void _scrollListener() { - final expanded = widget.scrollController.position.userScrollDirection == ScrollDirection.reverse; + final expanded = widget.scrollController?.position.userScrollDirection == ScrollDirection.reverse; if (_isExpanded != expanded) { setState(() => _isExpanded = expanded); } @@ -112,7 +121,7 @@ class _ZetaFABState extends State { @override void dispose() { - widget.scrollController.removeListener(_scrollListener); + widget.scrollController?.removeListener(_scrollListener); super.dispose(); } @@ -154,12 +163,10 @@ class _ZetaFABState extends State { mainAxisSize: MainAxisSize.min, children: [ Icon(widget.icon, size: widget.size.iconSize), - if (_isExpanded) + if (_isExpanded && widget.label != null) Row( mainAxisSize: MainAxisSize.min, - children: [ - Text(widget.label, style: ZetaTextStyles.labelLarge), - ], + children: [Text(widget.label!, style: ZetaTextStyles.labelLarge)], ), ].divide(const SizedBox(width: ZetaSpacing.small)).toList(), ), diff --git a/lib/src/components/global_header/global_header.dart b/lib/src/components/global_header/global_header.dart index 2de08169..0e07db42 100644 --- a/lib/src/components/global_header/global_header.dart +++ b/lib/src/components/global_header/global_header.dart @@ -78,7 +78,7 @@ class _GlobalHeaderState extends State { crossAxisAlignment: CrossAxisAlignment.start, children: [ SizedBox( - height: 48, + height: ZetaSpacing.xL8, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, // Top Section @@ -98,7 +98,7 @@ class _GlobalHeaderState extends State { Row( children: [ ...widget.actionButtons.map( - (e) => IconButton(onPressed: e.onPressed, icon: e.icon, iconSize: 24), + (e) => IconButton(onPressed: e.onPressed, icon: e.icon, iconSize: ZetaSpacing.xL2), ), if (widget.onAppsButton != null) ...[ Container( diff --git a/lib/src/components/banners/in_page_banner.dart b/lib/src/components/in_page_banner/in_page_banner.dart similarity index 90% rename from lib/src/components/banners/in_page_banner.dart rename to lib/src/components/in_page_banner/in_page_banner.dart index 73e94d49..05558e8a 100644 --- a/lib/src/components/banners/in_page_banner.dart +++ b/lib/src/components/in_page_banner/in_page_banner.dart @@ -3,9 +3,11 @@ import 'package:flutter/material.dart'; import '../../../zeta_flutter.dart'; -///Zeta In Page Banner +/// Zeta In Page Banner. +/// +/// In page banners display an important, succinct message, and may provide actions for users to address. Banners should be displayed at the top of the screen,below a top app bar. Only one banner should be shown at a time. class ZetaInPageBanner extends StatelessWidget { - ///Constructs [ZetaInPageBanner] + /// Constructs [ZetaInPageBanner]. const ZetaInPageBanner({ super.key, required this.content, @@ -17,18 +19,18 @@ class ZetaInPageBanner extends StatelessWidget { this.actions = const [], }); - ///The content of the banner. Typically [Text]. + /// The content of the banner. Typically [Text]. final Widget content; /// {@macro zeta-component-rounded} final bool rounded; - ///Determines the color of the banner. + /// Determines the color of the banner. /// - ///Defaults to [ZetaWidgetStatus.info]. + /// Defaults to [ZetaWidgetStatus.info]. final ZetaWidgetStatus status; - ///Title of the banner. + /// Title of the banner. final String? title; /// Leading icon on top left of banner. diff --git a/lib/src/components/navigation bar/navigation_bar.dart b/lib/src/components/navigation bar/navigation_bar.dart index affc88fa..7dda1f3b 100644 --- a/lib/src/components/navigation bar/navigation_bar.dart +++ b/lib/src/components/navigation bar/navigation_bar.dart @@ -219,7 +219,7 @@ class _NavigationItem extends StatelessWidget { @override Widget build(BuildContext context) { final colors = Zeta.of(context).colors; - final elementColor = selected ? colors.primary : colors.textDisabled; + final elementColor = selected ? colors.primary : colors.textSubtle; return Material( color: colors.surfacePrimary, diff --git a/lib/src/components/navigation_rail/navigation_rail.dart b/lib/src/components/navigation_rail/navigation_rail.dart index 6624b9f9..6f4bc13d 100644 --- a/lib/src/components/navigation_rail/navigation_rail.dart +++ b/lib/src/components/navigation_rail/navigation_rail.dart @@ -171,7 +171,7 @@ class _ZetaNavigationRailItemContent extends StatelessWidget { : selected ? zeta.colors.textDefault : zeta.colors.cool.shade70, - size: 24, + size: ZetaSpacing.xL2, ), child: icon!, ), diff --git a/lib/src/components/phone_input/phone_input.dart b/lib/src/components/phone_input/phone_input.dart index 18fbb136..9d9373f8 100644 --- a/lib/src/components/phone_input/phone_input.dart +++ b/lib/src/components/phone_input/phone_input.dart @@ -163,8 +163,8 @@ class _ZetaPhoneInputState extends State { child: Row( children: [ SizedBox( - width: 64, - height: 48, + width: ZetaSpacing.xL9, + height: ZetaSpacing.xL8, child: DecoratedBox( decoration: BoxDecoration( color: widget.enabled ? zeta.colors.surfacePrimary : zeta.colors.cool.shade30, @@ -295,7 +295,7 @@ class _ZetaPhoneInputState extends State { child: Row( children: [ Padding( - padding: const EdgeInsets.only(right: 8), + padding: const EdgeInsets.only(right: ZetaSpacing.small), child: Icon( showError && widget.enabled ? (widget.rounded ? ZetaIcons.error_round : ZetaIcons.error_sharp) diff --git a/lib/src/components/progress/progress_circle.dart b/lib/src/components/progress/progress_circle.dart index f5fc9abb..0161fa74 100644 --- a/lib/src/components/progress/progress_circle.dart +++ b/lib/src/components/progress/progress_circle.dart @@ -114,7 +114,7 @@ class CirclePainter extends CustomPainter { final ZetaColors colors; final _paint = Paint() - ..strokeWidth = 4 + ..strokeWidth = ZetaSpacing.minimum ..style = PaintingStyle.stroke; @override diff --git a/lib/src/components/select_input/select_input.dart b/lib/src/components/select_input/select_input.dart index 5db08cb2..bbc3a07e 100644 --- a/lib/src/components/select_input/select_input.dart +++ b/lib/src/components/select_input/select_input.dart @@ -370,7 +370,7 @@ class _InputComponentState extends State<_InputComponent> { child: Row( children: [ Padding( - padding: const EdgeInsets.only(right: 8), + padding: const EdgeInsets.only(right: ZetaSpacing.small), child: Icon( showError && widget.enabled ? (widget.rounded ? ZetaIcons.error_round : ZetaIcons.error_sharp) diff --git a/lib/src/components/snack_bar/snack_bar.dart b/lib/src/components/snack_bar/snack_bar.dart index f0bfb43d..b1ee0f50 100644 --- a/lib/src/components/snack_bar/snack_bar.dart +++ b/lib/src/components/snack_bar/snack_bar.dart @@ -241,13 +241,13 @@ class _IconButton extends StatelessWidget { style: IconButton.styleFrom( padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.medium), tapTargetSize: MaterialTapTargetSize.shrinkWrap, - minimumSize: const Size(20, 20), + minimumSize: const Size(ZetaSpacing.xL, ZetaSpacing.xL), ), onPressed: onPressed, icon: Icon( ZetaIcons.close_round, color: color, - size: 20, + size: ZetaSpacing.xL, ), ), ); diff --git a/lib/src/components/stepper_input/stepper_input.dart b/lib/src/components/stepper_input/stepper_input.dart index 65a49d9e..fae0a5c4 100644 --- a/lib/src/components/stepper_input/stepper_input.dart +++ b/lib/src/components/stepper_input/stepper_input.dart @@ -140,7 +140,7 @@ class _ZetaStepperInputState extends State { type: ZetaButtonType.outlineSubtle, size: widget.size == ZetaStepperInputSize.medium ? ZetaWidgetSize.medium : ZetaWidgetSize.large, borderType: widget.rounded ? ZetaWidgetBorder.rounded : ZetaWidgetBorder.sharp, - onPressed: !_disabled + onPressed: !_disabled && (increase ? _value != widget.max : _value != widget.min) ? () => _onChange( _value + (increase ? 1 : -1), ) diff --git a/lib/src/components/tabs/tab_bar.dart b/lib/src/components/tabs/tab_bar.dart index ef7260a9..51661bf0 100644 --- a/lib/src/components/tabs/tab_bar.dart +++ b/lib/src/components/tabs/tab_bar.dart @@ -21,7 +21,7 @@ class ZetaTabBar extends TabBar { indicator: UnderlineTabIndicator( borderSide: BorderSide( color: Zeta.of(context).colors.primary, - width: onTap != null ? 4 : 0, + width: onTap != null ? ZetaSpacing.minimum : ZetaSpacing.none, ), borderRadius: ZetaRadius.none, ), diff --git a/lib/src/components/tooltip/tooltip.dart b/lib/src/components/tooltip/tooltip.dart index b0a7bf71..b996f81d 100644 --- a/lib/src/components/tooltip/tooltip.dart +++ b/lib/src/components/tooltip/tooltip.dart @@ -80,7 +80,7 @@ class ZetaTooltip extends StatelessWidget { final horizontalArrowWidth = [ZetaTooltipArrowDirection.left, ZetaTooltipArrowDirection.right].contains(arrowDirection) ? _horizontalArrowSize.width - : 0; + : ZetaSpacing.none; return LayoutBuilder( builder: (context, constraints) { diff --git a/lib/src/components/top_app_bar/extended_top_app_bar.dart b/lib/src/components/top_app_bar/extended_top_app_bar.dart index 30566b91..3ddf7ccb 100644 --- a/lib/src/components/top_app_bar/extended_top_app_bar.dart +++ b/lib/src/components/top_app_bar/extended_top_app_bar.dart @@ -48,12 +48,15 @@ class ZetaExtendedAppBarDelegate extends SliverPersistentHeaderDelegate { Positioned( top: shrinks ? (_topMax + (-1 * shrinkOffset)).clamp( - _topMin - (searchController != null && searchController!.isEnabled ? _searchBarOffsetTop : 0), + _topMin - + (searchController != null && searchController!.isEnabled + ? _searchBarOffsetTop + : ZetaSpacing.none), _topMax, ) : _topMax, left: shrinks ? ((shrinkOffset / _maxExtent) * ZetaSpacingBase.x50).clamp(_leftMin, _leftMax) : _leftMin, - right: searchController != null && searchController!.isEnabled ? _searchBarOffsetRight : 0, + right: searchController != null && searchController!.isEnabled ? _searchBarOffsetRight : ZetaSpacing.none, child: title, ), if (leading != null) Positioned(top: ZetaSpacing.medium, left: ZetaSpacing.small, child: leading!), diff --git a/lib/src/theme/colors.dart b/lib/src/theme/colors.dart index 1a6b9530..b6e5354b 100644 --- a/lib/src/theme/colors.dart +++ b/lib/src/theme/colors.dart @@ -581,9 +581,20 @@ class ZetaColors { /// True if current [ZetaColors] object uses dark mode colors. bool get isDarkMode => brightness == Brightness.dark; - /// Colorful colors. + /// List of colorful colors. List get rainbow => [red, orange, yellow, green, blue, teal, pink]; + /// Map of colorful colors. + Map get rainbowMap => { + 'red': red, + 'orange': orange, + 'yellow': yellow, + 'green': green, + 'blue': blue, + 'teal': teal, + 'pink': pink, + }; + /// Helper function to adjust color swatch values based on brightness and contrast static ZetaColorSwatch _adjustedValue( ZetaColorSwatch? value, diff --git a/lib/src/utils/enums.dart b/lib/src/utils/enums.dart index f0441546..6fa1f6e2 100644 --- a/lib/src/utils/enums.dart +++ b/lib/src/utils/enums.dart @@ -24,7 +24,7 @@ enum ZetaWidgetSize { small, } -/// Status options for [ZetaBadge], [ZetaStatusLabel], [ZetaInPageBanner]. +/// Status options for [ZetaLabel], [ZetaStatusLabel], [ZetaInPageBanner]. enum ZetaWidgetStatus { /// Information widget; defaults to purple color scheme. info, diff --git a/lib/zeta_flutter.dart b/lib/zeta_flutter.dart index 63c76cae..2e6f3964 100644 --- a/lib/zeta_flutter.dart +++ b/lib/zeta_flutter.dart @@ -4,20 +4,18 @@ library zeta_flutter; export 'src/assets/icons.dart'; export 'src/components/accordion/accordion.dart'; export 'src/components/avatars/avatar.dart'; -export 'src/components/badges/badge.dart'; export 'src/components/badges/indicator.dart'; +export 'src/components/badges/label.dart'; export 'src/components/badges/priority_pill.dart'; export 'src/components/badges/status_label.dart'; export 'src/components/badges/tag.dart'; -export 'src/components/banners/in_page_banner.dart'; -export 'src/components/banners/system_banner.dart'; +export 'src/components/banner/banner.dart'; export 'src/components/bottom sheets/bottom_sheet.dart'; export 'src/components/bottom sheets/menu_items.dart'; export 'src/components/breadcrumbs/breadcrumbs.dart'; +export 'src/components/button_group/button_group.dart'; export 'src/components/buttons/button.dart'; -export 'src/components/buttons/button_group.dart'; export 'src/components/buttons/button_style.dart'; -export 'src/components/buttons/fab.dart'; export 'src/components/buttons/icon_button.dart'; export 'src/components/chat_item/chat_item.dart'; export 'src/components/checkbox/checkbox.dart'; @@ -27,9 +25,11 @@ export 'src/components/date_input/date_input.dart'; export 'src/components/dial_pad/dial_pad.dart'; export 'src/components/dialog/dialog.dart'; export 'src/components/dropdown/dropdown.dart'; +export 'src/components/fabs/fab.dart'; export 'src/components/filter_selection/filter_selection.dart'; export 'src/components/global_header/global_header.dart'; export 'src/components/global_header/header_tab_item.dart'; +export 'src/components/in_page_banner/in_page_banner.dart'; export 'src/components/list_item/list_item.dart'; export 'src/components/list_item/notification_list_item.dart'; export 'src/components/navigation bar/navigation_bar.dart';