From de8ac28f3dd129e432a03ca477ec400727bd4d1b Mon Sep 17 00:00:00 2001 From: mikecoomber <58986130+mikecoomber@users.noreply.github.com> Date: Wed, 5 Jun 2024 14:05:49 +0100 Subject: [PATCH] refactor: Made the documentation and behaviour for disabling components more consistent. (#86) * adding macros, consistent disabled behaviour * deprecation warnings * shared knobs * deprecation warnings --- .../pages/components/dropdown_example.dart | 9 +++---- .../pages/components/search_bar_example.dart | 2 +- .../lib/pages/components/tabs_example.dart | 3 ++- .../pages/components/button_widgetbook.dart | 4 +-- .../pages/components/checkbox_widgetbook.dart | 7 +----- .../components/date_input_widgetbook.dart | 3 ++- .../pages/components/dropdown_widgetbook.dart | 16 +++++------- .../navigation_rail_widgetbook.dart | 2 +- .../components/pagination_widgetbook.dart | 5 ++-- .../pages/components/radio_widgetbook.dart | 7 +++--- .../components/search_bar_widgetbook.dart | 9 +++---- .../components/stepper_input_widgetbook.dart | 4 +-- .../pages/components/stepper_widgetbook.dart | 3 ++- .../pages/components/switch_widgetbook.dart | 4 +-- .../pages/components/tabs_widgetbook.dart | 13 ++++++---- .../components/text_input_widgetbook.dart | 5 ++-- .../components/time_input_widgetbook.dart | 5 ++-- example/widgetbook/utils/utils.dart | 5 ++++ lib/src/components/accordion/accordion.dart | 6 +---- lib/src/components/badges/badge.dart | 6 +---- lib/src/components/buttons/button.dart | 12 +++++---- lib/src/components/buttons/button_group.dart | 3 ++- lib/src/components/buttons/fab.dart | 2 ++ lib/src/components/buttons/icon_button.dart | 2 ++ lib/src/components/checkbox/checkbox.dart | 2 ++ lib/src/components/dropdown/dropdown.dart | 14 +++++------ lib/src/components/pagination/pagination.dart | 20 +++++++-------- lib/src/components/radio/radio.dart | 2 ++ lib/src/components/search_bar/search_bar.dart | 25 ++++++++++--------- .../stepper_input/stepper_input.dart | 5 ++-- lib/src/components/switch/zeta_switch.dart | 2 ++ lib/src/components/tabs/tab_bar.dart | 9 ++++--- lib/src/interfaces/form_field.dart | 2 +- lib/src/utils/documentation_macros.dart | 20 +++++++++++++++ 34 files changed, 131 insertions(+), 107 deletions(-) create mode 100644 lib/src/utils/documentation_macros.dart diff --git a/example/lib/pages/components/dropdown_example.dart b/example/lib/pages/components/dropdown_example.dart index 2fb0ee93..0a0c6faa 100644 --- a/example/lib/pages/components/dropdown_example.dart +++ b/example/lib/pages/components/dropdown_example.dart @@ -41,13 +41,8 @@ class _DropdownExampleState extends State { 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 { 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 index 693deea2..9b357322 100644 --- 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 { 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 index 135d6b83..0dcc8077 100644 --- a/example/lib/pages/components/tabs_example.dart +++ b/example/lib/pages/components/tabs_example.dart @@ -22,6 +22,7 @@ class _TabsExampleState extends State { 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 { 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 { 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 index 81e9f12a..be4b71d1 100644 --- 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 index af313f17..1b61d51e 100644 --- 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? onChanged = context.knobs.boolean( - label: 'Enabled', - initialValue: true, - ) - ? (b2) => setState(() => b = b2) - : null; + ValueChanged? 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 index 6cfa77de..695e027b 100644 --- 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( label: 'Size', options: ZetaWidgetSize.values, diff --git a/example/widgetbook/pages/components/dropdown_widgetbook.dart b/example/widgetbook/pages/components/dropdown_widgetbook.dart index 053c277a..5aea90a8 100644 --- 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 createState() => _DropdownExampleState(); } @@ -35,18 +32,17 @@ class _DropdownExampleState extends State { ]; @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 index f981bfd7..3e4b5138 100644 --- 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 index 2d383ec4..5c4074fd 100644 --- 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 index e8aacdc4..87e0a4ad 100644 --- 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? onChanged = context.knobs.boolean(label: 'Enabled', initialValue: true) - ? (value) => setState(() => groupValue = value) - : null; + ValueChanged? 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 index fb4b3b1c..080be59f 100644 --- 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 _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( 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 index e57fb11f..d8de1472 100644 --- 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 index 4c06303f..39d1ea34 100644 --- 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 index 0ee2f9c3..d1ef6471 100644 --- 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? onChanged = context.knobs.boolean(label: 'Enabled', initialValue: true) - ? (value) => setState(() => isOn = value) - : null; + ValueChanged? 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 index ca0687d5..ee6e4ca5 100644 --- 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 index bddb4ef6..a479f3a3 100644 --- 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( 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 index 507c885a..a7dec047 100644 --- 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( label: 'Size', options: ZetaWidgetSize.values, diff --git a/example/widgetbook/utils/utils.dart b/example/widgetbook/utils/utils.dart index d994643b..e9e44a44 100644 --- 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 index 208044e8..cd7199af 100644 --- 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 index f32419b5..123744f2 100644 --- 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. diff --git a/lib/src/components/buttons/button.dart b/lib/src/components/buttons/button.dart index b7e93f4f..672030bf 100644 --- a/lib/src/components/buttons/button.dart +++ b/lib/src/components/buttons/button.dart @@ -94,17 +94,19 @@ class ZetaButton extends StatelessWidget { super.key, }) : type = ZetaButtonType.text; - ///Button label + /// Button label final String label; - ///Called when the button is tapped or otherwise activated. + /// Called when the button is tapped or otherwise activated. + /// + /// {@macro on-change-disable} final VoidCallback? onPressed; - ///The coloring type of the button + /// The coloring type of the button final ZetaButtonType type; - ///Whether or not the button is sharp or rounded - ///Defaults to rounded + /// Whether or not the button is sharp or rounded + /// Defaults to [ZetaWidgetBorder.rounded] final ZetaWidgetBorder borderType; /// Size of the button. Defaults to large. diff --git a/lib/src/components/buttons/button_group.dart b/lib/src/components/buttons/button_group.dart index 001a4e60..8d462a76 100644 --- a/lib/src/components/buttons/button_group.dart +++ b/lib/src/components/buttons/button_group.dart @@ -127,6 +127,8 @@ class ZetaGroupButton extends StatefulWidget { final IconData? icon; /// Function for when [ZetaGroupButton] is clicked. + /// + /// {@macro on-change-disable} final VoidCallback? onPressed; /// Content of dropdown. @@ -145,7 +147,6 @@ class ZetaGroupButton extends StatefulWidget { final bool isFinal; /// If [ZetaGroupButton] is inverse. - final bool isInverse; @override diff --git a/lib/src/components/buttons/fab.dart b/lib/src/components/buttons/fab.dart index 8a5cee49..f54853d5 100644 --- a/lib/src/components/buttons/fab.dart +++ b/lib/src/components/buttons/fab.dart @@ -55,6 +55,8 @@ class ZetaFAB extends StatefulWidget { final ZetaWidgetBorder shape; /// Called when the button is tapped or otherwise activated. + /// + /// {@macro on-change-disable} final VoidCallback? onPressed; /// The [ZetaFAB] uses this controller to react to scroll change diff --git a/lib/src/components/buttons/icon_button.dart b/lib/src/components/buttons/icon_button.dart index 9825349d..46ed9b75 100644 --- a/lib/src/components/buttons/icon_button.dart +++ b/lib/src/components/buttons/icon_button.dart @@ -82,6 +82,8 @@ class ZetaIconButton extends StatelessWidget { final IconData icon; /// Called when the button is tapped or otherwise activated. + /// + /// {@macro on-change-disable} final VoidCallback? onPressed; /// The coloring type of the button diff --git a/lib/src/components/checkbox/checkbox.dart b/lib/src/components/checkbox/checkbox.dart index 145f632a..40e176ea 100644 --- a/lib/src/components/checkbox/checkbox.dart +++ b/lib/src/components/checkbox/checkbox.dart @@ -54,6 +54,8 @@ class ZetaCheckbox extends FormField { final bool value; /// Called when the value of the checkbox should change. + /// + /// {@macro on-change-disable} final ValueChanged? onChanged; /// The label displayed next to the checkbox diff --git a/lib/src/components/dropdown/dropdown.dart b/lib/src/components/dropdown/dropdown.dart index 1d9d883e..d1188dcb 100644 --- a/lib/src/components/dropdown/dropdown.dart +++ b/lib/src/components/dropdown/dropdown.dart @@ -55,9 +55,9 @@ class ZetaDropdown extends StatefulWidget { const ZetaDropdown({ required this.items, this.onChange, + @Deprecated('Set onChange to null. ' 'Disabled is deprecated as of 0.11.0') bool disabled = false, this.value, this.rounded = true, - this.disabled = false, this.type = ZetaDropdownMenuType.standard, this.size = ZetaDropdownSize.standard, super.key, @@ -72,14 +72,13 @@ class ZetaDropdown extends StatefulWidget { final T? value; /// Called with the selected value whenever the dropdown is changed. + /// + /// {@macro on-change-disable} final ValueSetter? onChange; /// {@macro zeta-component-rounded} final bool rounded; - /// Disables the dropdown. - final bool disabled; - /// The type of the dropdown menu. /// /// Defaults to [ZetaDropdownMenuType.standard] @@ -101,8 +100,7 @@ class ZetaDropdown extends StatefulWidget { ..add(IterableProperty>('items', items)) ..add(DiagnosticsProperty('selectedItem', value)) ..add(ObjectFlagProperty?>.has('onChange', onChange)) - ..add(EnumProperty('size', size)) - ..add(DiagnosticsProperty('disabled', disabled)); + ..add(EnumProperty('size', size)); } } @@ -130,7 +128,7 @@ class _ZetaDropDownState extends State> { if (oldWidget.value != widget.value) { setState(_setSelectedItem); } - if (widget.disabled) { + if (widget.onChange != null) { unawaited( Future.delayed(Duration.zero).then( (value) => _tooltipController.hide(), @@ -206,7 +204,7 @@ class _ZetaDropDownState extends State> { ); }, child: _DropdownItem( - onPress: !widget.disabled ? onTap : null, + onPress: widget.onChange != null ? onTap : null, value: _selectedItem ?? widget.items.first, allocateLeadingSpace: widget.type == ZetaDropdownMenuType.standard && _selectedItem?.icon != null, rounded: widget.rounded, diff --git a/lib/src/components/pagination/pagination.dart b/lib/src/components/pagination/pagination.dart index e6546bd9..9d31923a 100644 --- a/lib/src/components/pagination/pagination.dart +++ b/lib/src/components/pagination/pagination.dart @@ -26,7 +26,7 @@ class ZetaPagination extends StatefulWidget { this.onChange, this.currentPage = 1, this.rounded = true, - this.disabled = false, + @Deprecated('Set onChange to null. ' 'Disabled is deprecated as of 0.11.0') bool disabled = false, super.key, }) : assert( pages > 0, @@ -48,10 +48,9 @@ class ZetaPagination extends StatefulWidget { /// {@macro zeta-component-rounded} final bool rounded; - /// Disables the pagination. - final bool disabled; - /// A callback executed every time the page changes. + /// + /// {@macro on-change-disable} final void Function(int value)? onChange; /// The type of the pagination. @@ -69,7 +68,6 @@ class ZetaPagination extends StatefulWidget { ..add(IntProperty('pages', pages)) ..add(IntProperty('currentPage', currentPage)) ..add(DiagnosticsProperty('rounded', rounded)) - ..add(DiagnosticsProperty('disabled', disabled)) ..add(ObjectFlagProperty.has('onChange', onChange)) ..add(EnumProperty('type', type)); } @@ -79,6 +77,8 @@ class _ZetaPaginationState extends State { late int _currentPage; final _paginationKey = GlobalKey(); + bool get _disabled => widget.onChange == null; + @override void initState() { super.initState(); @@ -108,7 +108,7 @@ class _ZetaPaginationState extends State { onPressed: () => _onItemPressed(value), selected: _currentPage == value, rounded: widget.rounded, - disabled: widget.disabled, + disabled: _disabled, ); } @@ -219,13 +219,13 @@ class _ZetaPaginationState extends State { _PaginationItem( icon: widget.rounded ? ZetaIcons.first_page_round : ZetaIcons.first_page_sharp, onPressed: () => _onItemPressed(1), - disabled: widget.disabled, + disabled: _disabled, rounded: widget.rounded, ), _PaginationItem( icon: widget.rounded ? ZetaIcons.chevron_left_round : ZetaIcons.chevron_left_sharp, onPressed: () => _onItemPressed(max(1, _currentPage - 1)), - disabled: widget.disabled, + disabled: _disabled, rounded: widget.rounded, ), if (!showDropdown) ...numberedPaginationItems else paginationDropdown, @@ -234,7 +234,7 @@ class _ZetaPaginationState extends State { onPressed: () => _onItemPressed( min(widget.pages, _currentPage + 1), ), - disabled: widget.disabled, + disabled: _disabled, rounded: widget.rounded, ), if (!showDropdown) @@ -243,7 +243,7 @@ class _ZetaPaginationState extends State { onPressed: () => _onItemPressed( widget.pages, ), - disabled: widget.disabled, + disabled: _disabled, rounded: widget.rounded, ), ]; diff --git a/lib/src/components/radio/radio.dart b/lib/src/components/radio/radio.dart index ab5292b1..a575f06b 100644 --- a/lib/src/components/radio/radio.dart +++ b/lib/src/components/radio/radio.dart @@ -23,6 +23,8 @@ class ZetaRadio extends StatefulWidget { final T? groupValue; /// Callback function to call when the Radio Button is tapped. + /// + /// {@macro on-change-disable} final ValueChanged? onChanged; /// The label which appears next to the Radio Button, on the right side. diff --git a/lib/src/components/search_bar/search_bar.dart b/lib/src/components/search_bar/search_bar.dart index 514ae3f8..098a2ab2 100644 --- a/lib/src/components/search_bar/search_bar.dart +++ b/lib/src/components/search_bar/search_bar.dart @@ -13,17 +13,18 @@ class ZetaSearchBar extends StatefulWidget { this.initialValue, this.onChanged, this.onSpeechToText, - this.enabled = true, + this.disabled = false, this.showLeadingIcon = true, this.showSpeechToText = true, + @Deprecated('Use disabled instead. ' 'enabled is deprecated as of 0.11.0') bool enabled = true, }); /// Determines the size of the input field. - /// Default is `ZetaSearchBarSize.large` + /// Default is [ZetaWidgetSize.large] final ZetaWidgetSize? size; /// Determines the shape of the input field. - /// Default is `ZetaSearchBarShape.rounded` + /// Default is [ZetaWidgetBorder.rounded] final ZetaWidgetBorder? shape; /// If provided, displays a hint inside the input field. @@ -39,8 +40,8 @@ class ZetaSearchBar extends StatefulWidget { /// A callback, which is invoked when the microphone button is pressed. final Future Function()? onSpeechToText; - /// Determines if the input field should be enabled (default) or disabled. - final bool enabled; + /// {@macro on-change-disable} + final bool disabled; /// Determines if there should be a leading icon. /// Default is `true`. @@ -59,7 +60,7 @@ class ZetaSearchBar extends StatefulWidget { ..add(EnumProperty('size', size)) ..add(EnumProperty('shape', shape)) ..add(StringProperty('hint', hint)) - ..add(DiagnosticsProperty('enabled', enabled)) + ..add(DiagnosticsProperty('enabled', disabled)) ..add(ObjectFlagProperty.has('onChanged', onChanged)) ..add(StringProperty('initialValue', initialValue)) ..add(ObjectFlagProperty.has('onSpeechToText', onSpeechToText)) @@ -101,7 +102,7 @@ class _ZetaSearchBarState extends State { final iconSize = _iconSize(_size); return TextFormField( - enabled: widget.enabled, + enabled: !widget.disabled, controller: _controller, keyboardType: TextInputType.text, onChanged: (value) => setState(() => widget.onChanged?.call(value)), @@ -114,14 +115,14 @@ class _ZetaSearchBarState extends State { ), hintText: widget.hint ?? 'Search', hintStyle: ZetaTextStyles.bodyMedium.copyWith( - color: widget.enabled ? zeta.colors.textDefault : zeta.colors.cool.shade50, + color: !widget.disabled ? zeta.colors.textDefault : zeta.colors.cool.shade50, ), prefixIcon: widget.showLeadingIcon ? Padding( padding: const EdgeInsets.only(left: ZetaSpacing.x2_5, right: ZetaSpacing.xs), child: Icon( sharp ? ZetaIcons.search_sharp : ZetaIcons.search_round, - color: widget.enabled ? zeta.colors.cool.shade70 : zeta.colors.cool.shade50, + color: !widget.disabled ? zeta.colors.cool.shade70 : zeta.colors.cool.shade50, size: iconSize, ), ) @@ -134,7 +135,7 @@ class _ZetaSearchBarState extends State { child: Row( mainAxisSize: MainAxisSize.min, children: [ - if (_controller.text.isNotEmpty && widget.enabled) ...[ + if (_controller.text.isNotEmpty && !widget.disabled) ...[ IconButton( visualDensity: const VisualDensity( horizontal: -4, @@ -191,8 +192,8 @@ class _ZetaSearchBarState extends State { minHeight: ZetaSpacing.m, minWidth: ZetaSpacing.m, ), - filled: widget.enabled ? null : true, - fillColor: widget.enabled ? null : zeta.colors.cool.shade30, + filled: !widget.disabled ? null : true, + fillColor: !widget.disabled ? null : zeta.colors.cool.shade30, enabledBorder: _defaultInputBorder(zeta, shape: _shape), focusedBorder: _focusedInputBorder(zeta, shape: _shape), disabledBorder: _defaultInputBorder(zeta, shape: _shape), diff --git a/lib/src/components/stepper_input/stepper_input.dart b/lib/src/components/stepper_input/stepper_input.dart index 417cc1ff..7291d37f 100644 --- a/lib/src/components/stepper_input/stepper_input.dart +++ b/lib/src/components/stepper_input/stepper_input.dart @@ -47,6 +47,8 @@ class ZetaStepperInput extends StatefulWidget { final int? max; /// Called with the value of the stepper whenever it is changed. + /// + /// {@macro on-change-disable} final ValueChanged? onChange; @override @@ -67,12 +69,11 @@ class ZetaStepperInput extends StatefulWidget { class _ZetaStepperInputState extends State { final TextEditingController _controller = TextEditingController(); int _value = 0; - late final bool _disabled; + bool get _disabled => widget.onChange == null; @override void initState() { super.initState(); - _disabled = widget.onChange == null; if (widget.initialValue != null) { _value = widget.initialValue!; } diff --git a/lib/src/components/switch/zeta_switch.dart b/lib/src/components/switch/zeta_switch.dart index 1dc1c7c6..7a9e7899 100644 --- a/lib/src/components/switch/zeta_switch.dart +++ b/lib/src/components/switch/zeta_switch.dart @@ -41,6 +41,8 @@ class ZetaSwitch extends StatelessWidget { final bool? value; /// Called when the value of the switch should change. + /// + /// {@macro on-change-disable} final ValueChanged? onChanged; /// Variant of switch for different platforms. diff --git a/lib/src/components/tabs/tab_bar.dart b/lib/src/components/tabs/tab_bar.dart index bfbf2bf9..ef7260a9 100644 --- a/lib/src/components/tabs/tab_bar.dart +++ b/lib/src/components/tabs/tab_bar.dart @@ -8,7 +8,7 @@ class ZetaTabBar extends TabBar { required BuildContext context, required List super.tabs, TabAlignment super.tabAlignment = TabAlignment.center, - bool enabled = true, + @Deprecated('Use disabled instead. ' 'enabled is deprecated as of 0.11.0') bool enabled = true, super.isScrollable, super.enableFeedback, super.dragStartBehavior, @@ -21,15 +21,16 @@ class ZetaTabBar extends TabBar { indicator: UnderlineTabIndicator( borderSide: BorderSide( color: Zeta.of(context).colors.primary, - width: enabled ? 4 : 0, + width: onTap != null ? 4 : 0, ), borderRadius: ZetaRadius.none, ), + splashFactory: null, labelStyle: ZetaTextStyles.labelLarge.copyWith( - color: enabled ? Zeta.of(context).colors.textDefault : Zeta.of(context).colors.textDisabled, + color: onTap != null ? Zeta.of(context).colors.textDefault : Zeta.of(context).colors.textDisabled, ), unselectedLabelStyle: ZetaTextStyles.labelLarge.copyWith( - color: enabled ? Zeta.of(context).colors.textSubtle : Zeta.of(context).colors.textDisabled, + color: onTap != null ? Zeta.of(context).colors.textSubtle : Zeta.of(context).colors.textDisabled, ), ); } diff --git a/lib/src/interfaces/form_field.dart b/lib/src/interfaces/form_field.dart index ef302113..37671e24 100644 --- a/lib/src/interfaces/form_field.dart +++ b/lib/src/interfaces/form_field.dart @@ -23,7 +23,7 @@ abstract class ZetaFormField extends StatefulWidget { super.key, }); - /// Disables the form field. + /// {@macro disabled} final bool disabled; /// The initial value of the form field. diff --git a/lib/src/utils/documentation_macros.dart b/lib/src/utils/documentation_macros.dart new file mode 100644 index 00000000..1ee4989d --- /dev/null +++ b/lib/src/utils/documentation_macros.dart @@ -0,0 +1,20 @@ +/// {@template zeta-component-rounded} +/// Sets rounded or sharp border of the containing box and the icon style. +/// +/// Defaults to `true`. +/// {@endtemplate} + +/// {@template zeta-component-badge-status} +/// Indicates the status of the badge. +/// +/// Defaults to "info" +/// {@endtemplate} + +/// {@template on-change-disable} +/// Setting this to null will disable the widget. +/// {@endtemplate} + +/// {@template disabled} +/// Disables the widget. +/// {@endtemplate} +library;