Fix/minorbugs (#72)

fix: Remove calls to zeta in button that are not needed
fix: enable mouse region on desktop for selectable areas
fix: Correct colors on Radio button hover / focus states
fix: breadcrumb rounded icon
fix: navigation bar text color

chore: Correct syntax on buttongroup.copywith
chore: rename ZetaAppbar to ZetaTopAppBar to be match designs
chore: rename ZetaBadge to ZetaLabel to match designs
chore: rename ZetaSystemBanner to ZetaBanner to match designs
chore: reorganize directories to match designs

example/lib/home.dart

@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:zeta_example/pages/components/accordion_example.dart';
-import 'package:zeta_example/pages/components/app_bar_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';
@@ -35,6 +34,7 @@ import 'package:zeta_example/pages/components/tabs_example.dart';
 import 'package:zeta_example/pages/components/pagination_example.dart';
 import 'package:zeta_example/pages/components/time_input_example.dart';
 import 'package:zeta_example/pages/components/tooltip_example.dart';
+import 'package:zeta_example/pages/components/top_app_bar_example.dart';
 import 'package:zeta_example/pages/theme/color_example.dart';
 import 'package:zeta_example/pages/components/password_input_example.dart';
 import 'package:zeta_example/pages/components/progress_example.dart';
@@ -54,7 +54,7 @@ class Component {
 
 final List<Component> components = [
   Component(AccordionExample.name, (context) => const AccordionExample()),
-  Component(AppBarExample.name, (context) => const AppBarExample()),
+  Component(TopAppBarExample.name, (context) => const TopAppBarExample()),
   Component(AvatarExample.name, (context) => const AvatarExample()),
   Component(BannerExample.name, (context) => const BannerExample()),
   Component(BadgesExample.name, (context) => const BadgesExample()),

example/lib/pages/components/app_bar_example.dart → example/lib/pages/components/top_app_bar_example.dart

@@ -4,16 +4,16 @@ import 'package:flutter/material.dart';
 import 'package:zeta_example/widgets.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-class AppBarExample extends StatefulWidget {
-  const AppBarExample({super.key});
+class TopAppBarExample extends StatefulWidget {
+  const TopAppBarExample({super.key});
 
-  static const String name = 'AppBar';
+  static const String name = 'TopAppBar';
 
   @override
-  State<AppBarExample> createState() => _AppBarExampleState();
+  State<TopAppBarExample> createState() => _TopAppBarExampleState();
 }
 
-class _AppBarExampleState extends State<AppBarExample> {
+class _TopAppBarExampleState extends State<TopAppBarExample> {
   late final _searchController = AppBarSearchController();
 
   void _showHideSearch() {
@@ -23,14 +23,14 @@ class _AppBarExampleState extends State<AppBarExample> {
   @override
   Widget build(BuildContext context) {
     return ExampleScaffold(
-      name: AppBarExample.name,
+      name: TopAppBarExample.name,
       child: SingleChildScrollView(
         child: Column(
           children: [
             // Default
             Padding(
               padding: const EdgeInsets.only(top: ZetaSpacing.x4),
-              child: ZetaAppBar(
+              child: ZetaTopAppBar(
                 leading: IconButton(
                   onPressed: () {},
                   icon: Icon(Icons.menu_rounded),
@@ -64,8 +64,8 @@ class _AppBarExampleState extends State<AppBarExample> {
             // Centered
             Padding(
               padding: const EdgeInsets.only(top: ZetaSpacing.x4),
-              child: ZetaAppBar(
-                type: ZetaAppBarType.centeredTitle,
+              child: ZetaTopAppBar(
+                type: ZetaTopAppBarType.centeredTitle,
                 leading: IconButton(
                   onPressed: () {},
                   icon: Icon(Icons.menu_rounded),
@@ -83,7 +83,7 @@ class _AppBarExampleState extends State<AppBarExample> {
             // Contextual
             Padding(
               padding: const EdgeInsets.only(top: ZetaSpacing.x4),
-              child: ZetaAppBar(
+              child: ZetaTopAppBar(
                 leading: IconButton(
                   onPressed: () {},
                   icon: Icon(ZetaIcons.close_round),
@@ -115,8 +115,8 @@ class _AppBarExampleState extends State<AppBarExample> {
               padding: const EdgeInsets.only(top: ZetaSpacing.x4),
               child: Column(
                 children: [
-                  ZetaAppBar(
-                    type: ZetaAppBarType.centeredTitle,
+                  ZetaTopAppBar(
+                    type: ZetaTopAppBarType.centeredTitle,
                     leading: BackButton(),
                     title: Text("Title"),
                     actions: [
@@ -151,8 +151,8 @@ class _AppBarExampleState extends State<AppBarExample> {
             // Extended
             Padding(
               padding: const EdgeInsets.only(top: ZetaSpacing.x4),
-              child: ZetaAppBar(
-                type: ZetaAppBarType.extendedTitle,
+              child: ZetaTopAppBar(
+                type: ZetaTopAppBarType.extendedTitle,
                 leading: IconButton(
                   onPressed: () {},
                   icon: Icon(Icons.menu),

example/widgetbook/main.dart

@@ -4,7 +4,7 @@ import 'package:zeta_flutter/zeta_flutter.dart';
 
 import 'pages/assets/icon_widgetbook.dart';
 import 'pages/components/accordion_widgetbook.dart';
-import 'pages/components/app_bar_widgetbook.dart';
+import 'pages/components/top_app_bar_widgetbook.dart';
 import 'pages/components/avatar_widgetbook.dart';
 import 'pages/components/badges_widgetbook.dart';
 import 'pages/components/banner_widgetbook.dart';
@@ -62,10 +62,10 @@ class HotReload extends StatelessWidget {
           isInitiallyExpanded: false,
           children: [
             WidgetbookComponent(
-              name: 'App Bar',
+              name: 'Top App Bar',
               useCases: [
-                WidgetbookUseCase(name: 'Default', builder: (context) => defaultAppBarUseCase(context)),
-                WidgetbookUseCase(name: 'Search', builder: (context) => searchAppBarUseCase(context)),
+                WidgetbookUseCase(name: 'Default', builder: (context) => defaultTopAppBarUseCase(context)),
+                WidgetbookUseCase(name: 'Search', builder: (context) => searchTopAppBarUseCase(context)),
               ],
             ),
             WidgetbookComponent(

example/widgetbook/pages/components/dialog_widgetbook.dart

@@ -39,7 +39,6 @@ Widget dialogUseCase(BuildContext context) {
               onPressed: () => showZetaDialog(
                 context,
                 useRootNavigator: false,
-                zeta: zeta,
                 rounded: rounded,
                 barrierDismissible: barrierDismissible,
                 headerAlignment: headerAlignment,
@@ -57,7 +56,6 @@ Widget dialogUseCase(BuildContext context) {
               onPressed: () => showZetaDialog(
                 context,
                 useRootNavigator: false,
-                zeta: zeta,
                 rounded: rounded,
                 barrierDismissible: barrierDismissible,
                 headerAlignment: headerAlignment,
@@ -76,7 +74,6 @@ Widget dialogUseCase(BuildContext context) {
               onPressed: () => showZetaDialog(
                 context,
                 useRootNavigator: false,
-                zeta: zeta,
                 rounded: rounded,
                 barrierDismissible: barrierDismissible,
                 headerAlignment: headerAlignment,

example/widgetbook/pages/components/app_bar_widgetbook.dart → example/widgetbook/pages/components/top_app_bar_widgetbook.dart

@@ -6,20 +6,19 @@ import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
 
-Widget defaultAppBarUseCase(BuildContext context) {
+Widget defaultTopAppBarUseCase(BuildContext context) {
   return WidgetbookTestWidget(
     widget: StatefulBuilder(
       builder: (context, setState) {
         final title = context.knobs.string(label: "Title", initialValue: "Title");
-
         final type = context.knobs.list(
           label: "Type",
           options: [
-            ZetaAppBarType.defaultAppBar,
-            ZetaAppBarType.centeredTitle,
-            ZetaAppBarType.extendedTitle,
+            ZetaTopAppBarType.defaultAppBar,
+            ZetaTopAppBarType.centeredTitle,
+            ZetaTopAppBarType.extendedTitle,
           ],
-          initialOption: ZetaAppBarType.defaultAppBar,
+          initialOption: ZetaTopAppBarType.defaultAppBar,
           labelBuilder: (type) => type.name,
         );
 
@@ -48,7 +47,7 @@ Widget defaultAppBarUseCase(BuildContext context) {
           labelBuilder: (icon) => icon.key.toString(),
         );
 
-        return ZetaAppBar(
+        return ZetaTopAppBar(
           leading: IconButton(
             onPressed: () {},
             icon: leadingIcon,
@@ -77,7 +76,7 @@ Widget defaultAppBarUseCase(BuildContext context) {
   );
 }
 
-Widget searchAppBarUseCase(BuildContext context) {
+Widget searchTopAppBarUseCase(BuildContext context) {
   return WidgetbookTestWidget(
     widget: _SearchUseCase(),
   );
@@ -100,11 +99,11 @@ class _SearchUseCaseState extends State<_SearchUseCase> {
     final type = context.knobs.list(
       label: "Type",
       options: [
-        ZetaAppBarType.defaultAppBar,
-        ZetaAppBarType.centeredTitle,
-        ZetaAppBarType.extendedTitle,
+        ZetaTopAppBarType.defaultAppBar,
+        ZetaTopAppBarType.centeredTitle,
+        ZetaTopAppBarType.extendedTitle,
       ],
-      initialOption: ZetaAppBarType.defaultAppBar,
+      initialOption: ZetaTopAppBarType.defaultAppBar,
       labelBuilder: (type) => type.name,
     );
 
@@ -135,7 +134,7 @@ class _SearchUseCaseState extends State<_SearchUseCase> {
       initialValue: false,
     );
 
-    return ZetaAppBar(
+    return ZetaTopAppBar(
       leading: IconButton(
         onPressed: () {},
         icon: leadingIcon,

lib/src/components/buttons/button.dart

@@ -12,7 +12,6 @@ class ZetaButton extends StatelessWidget {
     this.type = ZetaButtonType.primary,
     this.size = ZetaWidgetSize.medium,
     this.borderType = ZetaWidgetBorder.rounded,
-    this.zeta,
     this.leadingIcon,
     this.trailingIcon,
     super.key,
@@ -24,7 +23,6 @@ class ZetaButton extends StatelessWidget {
     this.onPressed,
     this.size = ZetaWidgetSize.medium,
     this.borderType = ZetaWidgetBorder.rounded,
-    this.zeta,
     this.leadingIcon,
     this.trailingIcon,
     super.key,
@@ -36,7 +34,6 @@ class ZetaButton extends StatelessWidget {
     this.onPressed,
     this.size = ZetaWidgetSize.medium,
     this.borderType = ZetaWidgetBorder.rounded,
-    this.zeta,
     this.leadingIcon,
     this.trailingIcon,
     super.key,
@@ -48,7 +45,6 @@ class ZetaButton extends StatelessWidget {
     this.onPressed,
     this.size = ZetaWidgetSize.medium,
     this.borderType = ZetaWidgetBorder.rounded,
-    this.zeta,
     this.leadingIcon,
     this.trailingIcon,
     super.key,
@@ -60,7 +56,6 @@ class ZetaButton extends StatelessWidget {
     this.onPressed,
     this.size = ZetaWidgetSize.medium,
     this.borderType = ZetaWidgetBorder.rounded,
-    this.zeta,
     this.leadingIcon,
     this.trailingIcon,
     super.key,
@@ -72,7 +67,6 @@ class ZetaButton extends StatelessWidget {
     this.onPressed,
     this.size = ZetaWidgetSize.medium,
     this.borderType = ZetaWidgetBorder.rounded,
-    this.zeta,
     this.leadingIcon,
     this.trailingIcon,
     super.key,
@@ -84,7 +78,6 @@ class ZetaButton extends StatelessWidget {
     this.onPressed,
     this.size = ZetaWidgetSize.medium,
     this.borderType = ZetaWidgetBorder.rounded,
-    this.zeta,
     this.leadingIcon,
     this.trailingIcon,
     super.key,
@@ -96,7 +89,6 @@ class ZetaButton extends StatelessWidget {
     this.onPressed,
     this.size = ZetaWidgetSize.medium,
     this.borderType = ZetaWidgetBorder.rounded,
-    this.zeta,
     this.leadingIcon,
     this.trailingIcon,
     super.key,
@@ -118,11 +110,7 @@ class ZetaButton extends StatelessWidget {
   /// Size of the button. Defaults to large.
   final ZetaWidgetSize size;
 
-  /// Sometimes we need to pass Zeta from outside,
-  /// like for example from [showZetaDialog]
-  final Zeta? zeta;
-
-  /// Leading icon of button. Goes infront of button.
+  /// Leading icon of button. Goes in front of button.
   final IconData? leadingIcon;
 
   /// Trailing icon of button. Goes behind button.
@@ -145,7 +133,6 @@ class ZetaButton extends StatelessWidget {
       type: type ?? this.type,
       size: size ?? this.size,
       borderType: borderType ?? this.borderType,
-      zeta: zeta,
       leadingIcon: leadingIcon ?? this.leadingIcon,
       trailingIcon: trailingIcon ?? this.trailingIcon,
       key: key ?? this.key,
@@ -154,7 +141,7 @@ class ZetaButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final zeta = this.zeta ?? Zeta.of(context);
+    final zeta = Zeta.of(context);
     final colors = zeta.colors;
     return ConstrainedBox(
       constraints: BoxConstraints(minHeight: _minConstraints, minWidth: _minConstraints),

lib/src/components/buttons/button_group.dart

@@ -41,11 +41,11 @@ class ZetaButtonGroup extends StatelessWidget {
     for (final (index, button) in buttons.indexed) {
       mappedButtons.add(
         button.copyWith(
-          large: isLarge,
-          inverse: isInverse,
-          round: rounded,
-          fin: index == buttons.length - 1,
-          initial: index == 0,
+          isLarge: isLarge,
+          isInverse: isInverse,
+          rounded: rounded,
+          isFinal: index == buttons.length - 1,
+          isInitial: index == 0,
         ),
       );
     }
@@ -153,23 +153,23 @@ class ZetaGroupButton extends StatefulWidget {
 
   /// Returns copy of [ZetaGroupButton] with fields.
   ZetaGroupButton copyWith({
-    bool? fin,
-    bool? initial,
-    bool? large,
-    bool? round,
-    bool? inverse,
+    bool? isFinal,
+    bool? isInitial,
+    bool? isLarge,
+    bool? rounded,
+    bool? isInverse,
   }) {
     return ZetaGroupButton._(
       key: key,
       label: label,
       icon: icon,
       onPressed: onPressed,
       dropdown: dropdown,
-      isFinal: fin ?? isFinal,
-      isInitial: initial ?? isInitial,
-      isLarge: large ?? isLarge,
-      rounded: round ?? rounded,
-      isInverse: inverse ?? isInverse,
+      isFinal: isFinal ?? this.isFinal,
+      isInitial: isInitial ?? this.isInitial,
+      isLarge: isLarge ?? this.isLarge,
+      rounded: rounded ?? this.rounded,
+      isInverse: isInverse ?? this.isInverse,
     );
   }