refactor: Made the documentation and behaviour for disabling componen…

…ts more consistent. (#86) * adding macros, consistent disabled behaviour * deprecation warnings * shared knobs * deprecation warnings
ZebraDevs · Jun 5, 2024 · de8ac28 · de8ac28
1 parent 05a32ac
commit de8ac28
Show file tree

Hide file tree

Showing 34 changed files with 131 additions and 107 deletions.
diff --git a/example/lib/pages/components/dropdown_example.dart b/example/lib/pages/components/dropdown_example.dart
@@ -41,13 +41,8 @@ class _DropdownExampleState extends State<DropdownExample> {
               crossAxisAlignment: CrossAxisAlignment.center,
               children: [
                 ZetaDropdown(
-                  disabled: true,
                   type: ZetaDropdownMenuType.standard,
-                  onChange: (value) {
-                    setState(() {
-                      selectedItem = value;
-                    });
-                  },
+                  onChange: (_) {},
                   value: selectedItem,
                   items: items,
                 ),
@@ -58,11 +53,13 @@ class _DropdownExampleState extends State<DropdownExample> {
           ZetaDropdown(
             items: items,
             value: selectedItem,
+            onChange: (_) {},
             type: ZetaDropdownMenuType.checkbox,
           ),
           ZetaDropdown(
             items: items,
             value: selectedItem,
+            onChange: (_) {},
             size: ZetaDropdownSize.mini,
             type: ZetaDropdownMenuType.radio,
           ),

diff --git a/example/lib/pages/components/search_bar_example.dart b/example/lib/pages/components/search_bar_example.dart
@@ -58,7 +58,7 @@ class _SearchBarExampleState extends State<SearchBarExample> {
             Padding(
               padding: const EdgeInsets.all(20),
               child: ZetaSearchBar(
-                enabled: false,
+                disabled: true,
               ),
             ),
             Padding(

diff --git a/example/lib/pages/components/tabs_example.dart b/example/lib/pages/components/tabs_example.dart
@@ -22,6 +22,7 @@ class _TabsExampleState extends State<TabsExample> {
             length: 2,
             child: ZetaTabBar(
               context: context,
+              onTap: (int) => print(int),
               tabs: [
                 ZetaTab(icon: Icon(ZetaIcons.star_round), text: "Tab Item"),
                 ZetaTab(icon: Icon(ZetaIcons.star_round), text: "Tab Item"),
@@ -35,6 +36,7 @@ class _TabsExampleState extends State<TabsExample> {
               child: ZetaTabBar(
                 context: context,
                 isScrollable: true,
+                onTap: (int) => print(int),
                 tabs: [
                   ZetaTab(text: "Tab Item"),
                   ZetaTab(text: "Tab Item"),
@@ -52,7 +54,6 @@ class _TabsExampleState extends State<TabsExample> {
               child: ZetaTabBar(
                 context: context,
                 isScrollable: true,
-                enabled: false,
                 tabs: [
                   ZetaTab(icon: Icon(ZetaIcons.star_sharp), text: "Tab Item"),
                   ZetaTab(icon: Icon(ZetaIcons.star_sharp), text: "Tab Item"),

diff --git a/example/widgetbook/pages/components/button_widgetbook.dart b/example/widgetbook/pages/components/button_widgetbook.dart
@@ -43,7 +43,7 @@ Widget iconButtonUseCase(BuildContext context) {
   return WidgetbookTestWidget(
     widget: ZetaIconButton(
       icon: iconKnob(context, rounded: borderType != ZetaWidgetBorder.sharp)!,
-      onPressed: context.knobs.boolean(label: 'Disabled') ? null : () {},
+      onPressed: disabledKnob(context) ? null : () {},
       borderType: borderType,
       size: context.knobs.list(
         label: 'Size',
@@ -62,7 +62,7 @@ Widget iconButtonUseCase(BuildContext context) {
 Widget buttonGroupUseCase(BuildContext context) {
   final bool rounded = roundedKnob(context);
 
-  final onPressed = context.knobs.boolean(label: 'Disabled', initialValue: false) ? null : () {};
+  final onPressed = disabledKnob(context) ? null : () {};
 
   return WidgetbookTestWidget(
       widget: ZetaButtonGroup(

diff --git a/example/widgetbook/pages/components/checkbox_widgetbook.dart b/example/widgetbook/pages/components/checkbox_widgetbook.dart
@@ -11,12 +11,7 @@ Widget checkboxUseCase(BuildContext context) {
   return WidgetbookTestWidget(
     widget: StatefulBuilder(
       builder: (context, setState) {
-        ValueChanged<bool>? onChanged = context.knobs.boolean(
-          label: 'Enabled',
-          initialValue: true,
-        )
-            ? (b2) => setState(() => b = b2)
-            : null;
+        ValueChanged<bool>? onChanged = !disabledKnob(context) ? (b2) => setState(() => b = b2) : null;
         return ZetaCheckbox(
           value: b,
           onChanged: onChanged,

diff --git a/example/widgetbook/pages/components/date_input_widgetbook.dart b/example/widgetbook/pages/components/date_input_widgetbook.dart
@@ -3,6 +3,7 @@ import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
+import '../../utils/utils.dart';
 
 Widget dateInputUseCase(BuildContext context) {
   String? _errorText;
@@ -15,7 +16,7 @@ Widget dateInputUseCase(BuildContext context) {
           initialValue: 'Invalid date',
         );
         final rounded = context.knobs.boolean(label: 'Rounded', initialValue: true);
-        final disabled = context.knobs.boolean(label: 'Disabled', initialValue: false);
+        final disabled = disabledKnob(context);
         final size = context.knobs.list<ZetaWidgetSize>(
           label: 'Size',
           options: ZetaWidgetSize.values,

diff --git a/example/widgetbook/pages/components/dropdown_widgetbook.dart b/example/widgetbook/pages/components/dropdown_widgetbook.dart
@@ -7,14 +7,11 @@ import '../../utils/utils.dart';
 
 Widget dropdownUseCase(BuildContext context) => WidgetbookTestWidget(
       widget: Center(
-        child: DropdownExample(context),
+        child: DropdownExample(),
       ),
     );
 
 class DropdownExample extends StatefulWidget {
-  const DropdownExample(this.c);
-  final BuildContext c;
-
   @override
   State<DropdownExample> createState() => _DropdownExampleState();
 }
@@ -35,18 +32,17 @@ class _DropdownExampleState extends State<DropdownExample> {
   ];
 
   @override
-  Widget build(BuildContext _) {
+  Widget build(BuildContext context) {
     return ZetaDropdown(
-      type: widget.c.knobs.list(
+      type: context.knobs.list(
         label: "Dropdown type",
         options: ZetaDropdownMenuType.values,
         labelBuilder: enumLabelBuilder,
       ),
-      onChange: (value) {},
+      onChange: disabledKnob(context) ? null : (value) {},
       items: items,
-      rounded: widget.c.knobs.boolean(label: "Rounded"),
-      disabled: widget.c.knobs.boolean(label: "Disabled"),
-      size: widget.c.knobs.list(
+      rounded: context.knobs.boolean(label: "Rounded"),
+      size: context.knobs.list(
         label: 'Size',
         options: ZetaDropdownSize.values,
         labelBuilder: enumLabelBuilder,

diff --git a/example/widgetbook/pages/components/navigation_rail_widgetbook.dart b/example/widgetbook/pages/components/navigation_rail_widgetbook.dart
@@ -20,7 +20,7 @@ Widget navigationRailUseCase(BuildContext context) {
     initial: rounded ? ZetaIcons.star_round : ZetaIcons.star_sharp,
   );
   final wordWrap = context.knobs.boolean(label: 'Word wrap', initialValue: true);
-  final disabled = context.knobs.boolean(label: 'Disabled', initialValue: false);
+  final disabled = disabledKnob(context);
   final itemsList = items.split(',').where((element) => element.trim().isNotEmpty).toList();
   return SafeArea(
     child: WidgetbookTestWidget(

diff --git a/example/widgetbook/pages/components/pagination_widgetbook.dart b/example/widgetbook/pages/components/pagination_widgetbook.dart
@@ -3,6 +3,7 @@ import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
+import '../../utils/utils.dart';
 
 Widget paginationUseCase(BuildContext context) => WidgetbookTestWidget(
       widget: ZetaPagination(
@@ -12,7 +13,7 @@ Widget paginationUseCase(BuildContext context) => WidgetbookTestWidget(
           options: ZetaPaginationType.values,
           labelBuilder: (value) => value.name.split('.').last.toUpperCase(),
         ),
-        rounded: context.knobs.boolean(label: 'Rounded'),
-        disabled: context.knobs.boolean(label: 'Disabled'),
+        rounded: roundedKnob(context),
+        onChange: disabledKnob(context) ? null : (_) {},
       ),
     );
diff --git a/example/widgetbook/pages/components/radio_widgetbook.dart b/example/widgetbook/pages/components/radio_widgetbook.dart
@@ -1,8 +1,8 @@
 import 'package:flutter/material.dart';
-import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
+import '../../utils/utils.dart';
 
 Widget radioButtonUseCase(BuildContext context) {
   String option1 = 'Label 1';
@@ -12,9 +12,8 @@ Widget radioButtonUseCase(BuildContext context) {
   return WidgetbookTestWidget(
     widget: StatefulBuilder(
       builder: (context, setState) {
-        ValueChanged<String?>? onChanged = context.knobs.boolean(label: 'Enabled', initialValue: true)
-            ? (value) => setState(() => groupValue = value)
-            : null;
+        ValueChanged<String?>? onChanged =
+            !disabledKnob(context) ? (value) => setState(() => groupValue = value) : null;
         return Padding(
           padding: const EdgeInsets.all(ZetaSpacing.x5),
           child: Column(

diff --git a/example/widgetbook/pages/components/search_bar_widgetbook.dart b/example/widgetbook/pages/components/search_bar_widgetbook.dart
@@ -3,6 +3,7 @@ import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
+import '../../utils/utils.dart';
 
 const List<String> _items = [
   'The quick...',
@@ -22,10 +23,8 @@ Widget searchBarUseCase(BuildContext context) {
           label: 'Hint',
           initialValue: 'Search',
         );
-        final enabled = context.knobs.boolean(
-          label: 'Enabled',
-          initialValue: true,
-        );
+        final disabled = disabledKnob(context);
+
         final size = context.knobs.list<ZetaWidgetSize>(
           label: 'Size',
           options: ZetaWidgetSize.values,
@@ -53,7 +52,7 @@ Widget searchBarUseCase(BuildContext context) {
               ZetaSearchBar(
                 size: size,
                 shape: shape,
-                enabled: enabled,
+                disabled: disabled,
                 hint: hint,
                 showLeadingIcon: showLeadingIcon,
                 showSpeechToText: showSpeechToText,

diff --git a/example/widgetbook/pages/components/stepper_input_widgetbook.dart b/example/widgetbook/pages/components/stepper_input_widgetbook.dart
@@ -16,8 +16,8 @@ Widget stepperInputUseCase(BuildContext context) {
         options: ZetaStepperInputSize.values,
         labelBuilder: enumLabelBuilder,
       ),
-      rounded: context.knobs.boolean(label: 'Rounded', initialValue: true),
-      onChange: context.knobs.boolean(label: 'Disabled', initialValue: false) ? null : (_) {},
+      rounded: roundedKnob(context),
+      onChange: disabledKnob(context) ? null : (_) {},
     ),
   );
 }
diff --git a/example/widgetbook/pages/components/stepper_widgetbook.dart b/example/widgetbook/pages/components/stepper_widgetbook.dart
@@ -3,6 +3,7 @@ import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
+import '../../utils/utils.dart';
 
 Widget stepperUseCase(BuildContext context) {
   int currentStep = 0;
@@ -24,7 +25,7 @@ Widget stepperUseCase(BuildContext context) {
     labelBuilder: (type) => type.name,
   );
 
-  final rounded = context.knobs.boolean(label: 'Rounded', initialValue: true);
+  final rounded = roundedKnob(context);
 
   final enabledContent = context.knobs.boolean(label: 'Enabled Content', initialValue: true);
 

diff --git a/example/widgetbook/pages/components/switch_widgetbook.dart b/example/widgetbook/pages/components/switch_widgetbook.dart
@@ -11,9 +11,7 @@ Widget switchUseCase(BuildContext context) {
   return WidgetbookTestWidget(
     widget: StatefulBuilder(
       builder: (context, setState) {
-        ValueChanged<bool?>? onChanged = context.knobs.boolean(label: 'Enabled', initialValue: true)
-            ? (value) => setState(() => isOn = value)
-            : null;
+        ValueChanged<bool?>? onChanged = !disabledKnob(context) ? (value) => setState(() => isOn = value) : null;
         return Padding(
           padding: const EdgeInsets.all(ZetaSpacing.x5),
           child: Column(

diff --git a/example/widgetbook/pages/components/tabs_widgetbook.dart b/example/widgetbook/pages/components/tabs_widgetbook.dart
@@ -3,6 +3,7 @@ import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
+import '../../utils/utils.dart';
 
 Widget tabsUseCase(BuildContext context) {
   return WidgetbookTestWidget(
@@ -15,10 +16,12 @@ Widget tabsUseCase(BuildContext context) {
               length: 2,
               child: ZetaTabBar(
                 context: context,
-                enabled: context.knobs.boolean(
-                  label: "Enabled",
-                  initialValue: true,
-                ),
+                onTap: context.knobs.boolean(
+                  label: "Disabled",
+                  initialValue: false,
+                )
+                    ? null
+                    : (_) {},
                 tabs: [
                   ZetaTab(icon: Icon(ZetaIcons.star_round), text: "Tab Item"),
                   ZetaTab(icon: Icon(ZetaIcons.star_round), text: "Tab Item"),
@@ -32,7 +35,7 @@ Widget tabsUseCase(BuildContext context) {
               length: 5,
               child: ZetaTabBar(
                 context: context,
-                enabled: context.knobs.boolean(label: "Enabled"),
+                onTap: disabledKnob(context) ? null : (_) {},
                 isScrollable: true,
                 tabs: [
                   ZetaTab(text: "Tab Item"),

diff --git a/example/widgetbook/pages/components/text_input_widgetbook.dart b/example/widgetbook/pages/components/text_input_widgetbook.dart
@@ -3,6 +3,7 @@ import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
+import '../../utils/utils.dart';
 
 Widget textInputUseCase(BuildContext context) {
   return WidgetbookTestWidget(
@@ -20,8 +21,8 @@ Widget textInputUseCase(BuildContext context) {
           label: 'Hint',
           initialValue: 'Default hint text',
         );
-        final rounded = context.knobs.boolean(label: 'Rounded', initialValue: true);
-        final disabled = context.knobs.boolean(label: 'Disabled', initialValue: false);
+        final rounded = roundedKnob(context);
+        final disabled = disabledKnob(context);
         final size = context.knobs.list<ZetaWidgetSize>(
           label: 'Size',
           options: ZetaWidgetSize.values,

diff --git a/example/widgetbook/pages/components/time_input_widgetbook.dart b/example/widgetbook/pages/components/time_input_widgetbook.dart
@@ -3,6 +3,7 @@ import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
+import '../../utils/utils.dart';
 
 Widget timeInputUseCase(BuildContext context) {
   String? _errorText;
@@ -22,8 +23,8 @@ Widget timeInputUseCase(BuildContext context) {
           label: 'Hint',
           initialValue: 'Default hint text',
         );
-        final rounded = context.knobs.boolean(label: 'Rounded', initialValue: true);
-        final disabled = context.knobs.boolean(label: 'Disabled', initialValue: false);
+        final rounded = roundedKnob(context);
+        final disabled = disabledKnob(context);
         final size = context.knobs.list<ZetaWidgetSize>(
           label: 'Size',
           options: ZetaWidgetSize.values,

diff --git a/example/widgetbook/utils/utils.dart b/example/widgetbook/utils/utils.dart
@@ -41,3 +41,8 @@ IconData? iconKnob(
 }
 
 bool roundedKnob(BuildContext context) => context.knobs.boolean(label: 'Rounded');
+
+bool disabledKnob(BuildContext context) => context.knobs.boolean(
+      label: 'Disabled',
+      initialValue: false,
+    );
diff --git a/lib/src/components/accordion/accordion.dart b/lib/src/components/accordion/accordion.dart
@@ -24,11 +24,7 @@ class ZetaAccordion extends StatefulWidget {
   /// If null, component will render as disabled.
   final Widget? child;
 
-  /// {@template zeta-component-rounded}
-  /// Sets rounded or sharp border of the containing box and the icon style.
-  ///
-  /// Defaults to `true`.
-  /// {@endtemplate}
+  /// {@macro zeta-component-rounded}
   final bool rounded;
 
   /// Determines if the [ZetaAccordion]s should be in a box.

diff --git a/lib/src/components/badges/badge.dart b/lib/src/components/badges/badge.dart
@@ -18,11 +18,7 @@ class ZetaBadge extends StatelessWidget {
   /// {@macro zeta-component-rounded}
   final bool rounded;
 
-  /// {@template zeta-component-badge-status}
-  /// Indicates the status of the badge.
-  ///
-  /// Defaults to "info"
-  /// {@endtemplate}
+  /// {@macro zeta-component-badge-status}
   final ZetaWidgetStatus status;
 
   /// Label of the badge.