From c37e51d1b2be40e03d35f63db79939247315696c Mon Sep 17 00:00:00 2001 From: Luke Walton Date: Mon, 17 Jun 2024 17:58:47 +0100 Subject: [PATCH] fix: minor bugs on ZetaChatItem (#105) chore: rename debounce file chore: Update widgetbook to pull readme from github docs: Fix documentation macros --- example/widgetbook/main.dart | 13 ++++++-- .../components/chat_item_widgetbook.dart | 2 +- lib/src/components/badges/label.dart | 6 +++- .../components/button_group/button_group.dart | 4 ++- lib/src/components/buttons/button.dart | 2 +- lib/src/components/buttons/icon_button.dart | 2 +- .../components/buttons/input_icon_button.dart | 4 ++- lib/src/components/chat_item/chat_item.dart | 33 +++++++++++-------- lib/src/components/checkbox/checkbox.dart | 3 +- lib/src/components/dropdown/dropdown.dart | 2 +- lib/src/components/fabs/fab.dart | 2 +- .../navigation_rail/navigation_rail.dart | 2 +- lib/src/components/pagination/pagination.dart | 2 +- lib/src/components/radio/radio.dart | 2 +- lib/src/components/search_bar/search_bar.dart | 2 +- .../stepper_input/stepper_input.dart | 2 +- lib/src/components/switch/zeta_switch.dart | 2 +- lib/src/interfaces/form_field.dart | 2 +- lib/src/theme/color_swatch.dart | 4 +-- lib/src/theme/colors.dart | 5 +-- lib/src/theme/colors_base.dart | 27 ++++++++------- lib/src/theme/theme_data.dart | 6 +++- lib/src/utils/documentation_macros.dart | 20 ----------- lib/src/utils/extensions.dart | 2 +- lib/src/utils/utils.dart | 4 +++ lib/zeta_flutter.dart | 5 +-- 26 files changed, 86 insertions(+), 74 deletions(-) delete mode 100644 lib/src/utils/documentation_macros.dart create mode 100644 lib/src/utils/utils.dart diff --git a/example/widgetbook/main.dart b/example/widgetbook/main.dart index 9c0ac3f1..ee79298c 100644 --- a/example/widgetbook/main.dart +++ b/example/widgetbook/main.dart @@ -53,12 +53,19 @@ import 'pages/theme/radius_widgetbook.dart'; import 'pages/theme/spacing_widgetbook.dart'; import 'pages/theme/typography_widgetbook.dart'; import 'utils/zebra.dart'; +import 'package:http/http.dart' as http; Future main() async { WidgetsFlutterBinding.ensureInitialized(); - // String readme = await rootBundle.loadString('../README.md'); - - runApp(HotReload(readme: 'TODO: cannot import readme on windows')); + String response = ''; + try { + response = + (await http.get(Uri.parse('https://raw.githubusercontent.com/ZebraDevs/zeta_flutter/main/README.md'))).body; + } catch (e) { + debugPrint('Can not read readme'); + } finally { + runApp(HotReload(readme: response)); + } } class HotReload extends StatefulWidget { diff --git a/example/widgetbook/pages/components/chat_item_widgetbook.dart b/example/widgetbook/pages/components/chat_item_widgetbook.dart index 936e9564..e7350a00 100644 --- a/example/widgetbook/pages/components/chat_item_widgetbook.dart +++ b/example/widgetbook/pages/components/chat_item_widgetbook.dart @@ -13,7 +13,7 @@ Widget chatItemWidgetBook(BuildContext context) { 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 starred = context.knobs.booleanOrNull(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); diff --git a/lib/src/components/badges/label.dart b/lib/src/components/badges/label.dart index 267a20a4..bf856707 100644 --- a/lib/src/components/badges/label.dart +++ b/lib/src/components/badges/label.dart @@ -19,7 +19,11 @@ class ZetaLabel extends ZetaStatelessWidget { super.key, }); - /// {@macro zeta-component-badge-status} + /// {@template zeta-component-badge-status} + /// Indicates the status of the badge. + /// + /// Defaults to "info" + /// {@endtemplate} final ZetaWidgetStatus status; /// Label of the badge. diff --git a/lib/src/components/button_group/button_group.dart b/lib/src/components/button_group/button_group.dart index 911f09a4..94acf1fd 100644 --- a/lib/src/components/button_group/button_group.dart +++ b/lib/src/components/button_group/button_group.dart @@ -127,7 +127,9 @@ class ZetaGroupButton extends ZetaStatefulWidget { /// Function for when [ZetaGroupButton] is clicked. /// - /// {@macro on-change-disable} + /// {@template zeta-widget-change-disable} + /// Setting this to null will disable the widget. + /// {@endtemplate} final VoidCallback? onPressed; /// Content of dropdown. diff --git a/lib/src/components/buttons/button.dart b/lib/src/components/buttons/button.dart index df0e9c7f..2a4aac53 100644 --- a/lib/src/components/buttons/button.dart +++ b/lib/src/components/buttons/button.dart @@ -99,7 +99,7 @@ class ZetaButton extends StatelessWidget { /// Called when the button is tapped or otherwise activated. /// - /// {@macro on-change-disable} + /// {@macro zeta-widget-change-disable} final VoidCallback? onPressed; /// The coloring type of the button diff --git a/lib/src/components/buttons/icon_button.dart b/lib/src/components/buttons/icon_button.dart index 9b0c3fe6..137da668 100644 --- a/lib/src/components/buttons/icon_button.dart +++ b/lib/src/components/buttons/icon_button.dart @@ -83,7 +83,7 @@ class ZetaIconButton extends ZetaStatelessWidget { /// Called when the button is tapped or otherwise activated. /// - /// {@macro on-change-disable} + /// {@macro zeta-widget-change-disable} final VoidCallback? onPressed; /// The coloring type of the button diff --git a/lib/src/components/buttons/input_icon_button.dart b/lib/src/components/buttons/input_icon_button.dart index 93bb6368..b7ffc928 100644 --- a/lib/src/components/buttons/input_icon_button.dart +++ b/lib/src/components/buttons/input_icon_button.dart @@ -21,7 +21,9 @@ class InputIconButton extends StatelessWidget { /// On tap final VoidCallback onTap; - /// Disables the icon and its on tap + /// {@template zeta-widget-disabled} + /// Disables the widget. + /// {@endtemplate} final bool disabled; /// The size of the icon diff --git a/lib/src/components/chat_item/chat_item.dart b/lib/src/components/chat_item/chat_item.dart index d8c3eac5..7b078fe1 100644 --- a/lib/src/components/chat_item/chat_item.dart +++ b/lib/src/components/chat_item/chat_item.dart @@ -21,7 +21,7 @@ class ZetaChatItem extends ZetaStatelessWidget { this.additionalIcons = const [], this.count, this.onTap, - this.starred = false, + this.starred, this.onMenuMoreTap, this.onCallTap, this.onDeleteTap, @@ -62,7 +62,9 @@ class ZetaChatItem extends ZetaStatelessWidget { final VoidCallback? onTap; /// Whether the chat list is starred. - final bool starred; + /// + /// If null, the star will not be rendered. + final bool? starred; /// Callback for slidable action - menu more. final VoidCallback? onMenuMoreTap; @@ -205,13 +207,13 @@ class ZetaChatItem extends ZetaStatelessWidget { child: Row( children: [ ...additionalIcons, - if (enabledWarningIcon) + if (enabledNotificationIcon) Padding( padding: const EdgeInsets.only( left: ZetaSpacing.minimum, ), child: Icon( - ZetaIcons.info_round, + ZetaIcons.error_round, color: colors.cool.shade70, ), ), @@ -267,15 +269,16 @@ class ZetaChatItem extends ZetaStatelessWidget { child: subtitle, ), ), - Padding( - padding: const EdgeInsets.only( - left: ZetaSpacing.minimum, - ), - child: Icon( - starred ? ZetaIcons.star_sharp : ZetaIcons.star_outline_sharp, - color: starred ? colors.yellow.shade60 : null, + if (starred != null) + Padding( + padding: const EdgeInsets.only( + left: ZetaSpacing.minimum, + ), + child: Icon( + starred! ? ZetaIcons.star_sharp : ZetaIcons.star_outline_sharp, + color: starred! ? colors.yellow.shade60 : null, + ), ), - ), ], ), ], @@ -310,7 +313,7 @@ class ZetaChatItem extends ZetaStatelessWidget { ) ..add(IntProperty('count', count)) ..add(ObjectFlagProperty.has('onTap', onTap)) - ..add(DiagnosticsProperty('starred', starred)) + ..add(DiagnosticsProperty('starred', starred)) ..add( ObjectFlagProperty.has('onMenuMoreTap', onMenuMoreTap), ) @@ -340,7 +343,9 @@ class _ZetaSlidableAction extends StatelessWidget { child: Padding( padding: const EdgeInsets.only(left: ZetaSpacing.minimum), child: IconButton( - onPressed: () => onPressed, + onPressed: () { + onPressed?.call(); + }, style: IconButton.styleFrom( backgroundColor: backgroundColor, foregroundColor: foregroundColor, diff --git a/lib/src/components/checkbox/checkbox.dart b/lib/src/components/checkbox/checkbox.dart index eafa55ef..113839c7 100644 --- a/lib/src/components/checkbox/checkbox.dart +++ b/lib/src/components/checkbox/checkbox.dart @@ -55,7 +55,7 @@ class ZetaCheckbox extends FormField { /// Called when the value of the checkbox should change. /// - /// {@macro on-change-disable} + /// {@macro zeta-widget-change-disable} final ValueChanged? onChanged; /// The label displayed next to the checkbox @@ -108,6 +108,7 @@ class _Checkbox extends ZetaStatefulWidget { final bool error; + /// {@macro zeta-widget-disabled} final bool disabled; @override diff --git a/lib/src/components/dropdown/dropdown.dart b/lib/src/components/dropdown/dropdown.dart index 73ecd3b9..2a124a48 100644 --- a/lib/src/components/dropdown/dropdown.dart +++ b/lib/src/components/dropdown/dropdown.dart @@ -110,7 +110,7 @@ class ZetaDropdown extends ZetaStatefulWidget { /// Called with the selected value whenever the dropdown is changed. /// - /// {@macro on-change-disable} + /// {@macro zeta-widget-change-disable} final ValueSetter>? onChange; /// Called when the dropdown is dismissed. diff --git a/lib/src/components/fabs/fab.dart b/lib/src/components/fabs/fab.dart index 9953eef8..f3c6b08d 100644 --- a/lib/src/components/fabs/fab.dart +++ b/lib/src/components/fabs/fab.dart @@ -57,7 +57,7 @@ class ZetaFAB extends StatefulWidget { /// Called when the button is tapped or otherwise activated. /// - /// {@macro on-change-disable} + /// {@macro zeta-widget-change-disable} final VoidCallback? onPressed; /// The [ZetaFAB] uses this controller to react to scroll change and shrink/expand itself. diff --git a/lib/src/components/navigation_rail/navigation_rail.dart b/lib/src/components/navigation_rail/navigation_rail.dart index bf2d6df3..81bf6d6c 100644 --- a/lib/src/components/navigation_rail/navigation_rail.dart +++ b/lib/src/components/navigation_rail/navigation_rail.dart @@ -221,6 +221,6 @@ class ZetaNavigationRailItem { /// Optional item's icon. final Widget? icon; - /// Indicates that this navigation item is inaccessible. + /// {@macro zeta-widget-disabled} final bool disabled; } diff --git a/lib/src/components/pagination/pagination.dart b/lib/src/components/pagination/pagination.dart index cc7d2344..13e041e6 100644 --- a/lib/src/components/pagination/pagination.dart +++ b/lib/src/components/pagination/pagination.dart @@ -47,7 +47,7 @@ class ZetaPagination extends ZetaStatefulWidget { /// A callback executed every time the page changes. /// - /// {@macro on-change-disable} + /// {@macro zeta-widget-change-disable} final void Function(int value)? onChange; /// The type of the pagination. diff --git a/lib/src/components/radio/radio.dart b/lib/src/components/radio/radio.dart index 14967a2d..c2ec3c18 100644 --- a/lib/src/components/radio/radio.dart +++ b/lib/src/components/radio/radio.dart @@ -25,7 +25,7 @@ class ZetaRadio extends ZetaStatefulWidget { /// Callback function to call when the Radio Button is tapped. /// - /// {@macro on-change-disable} + /// {@macro zeta-widget-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 abbf4fda..eb00cf24 100644 --- a/lib/src/components/search_bar/search_bar.dart +++ b/lib/src/components/search_bar/search_bar.dart @@ -40,7 +40,7 @@ class ZetaSearchBar extends StatefulWidget { /// A callback, which is invoked when the microphone button is pressed. final Future Function()? onSpeechToText; - /// {@macro on-change-disable} + /// {@macro zeta-widget-disabled} final bool disabled; /// Determines if there should be a leading icon. diff --git a/lib/src/components/stepper_input/stepper_input.dart b/lib/src/components/stepper_input/stepper_input.dart index 71d7271a..a3d17ea2 100644 --- a/lib/src/components/stepper_input/stepper_input.dart +++ b/lib/src/components/stepper_input/stepper_input.dart @@ -45,7 +45,7 @@ class ZetaStepperInput extends ZetaStatefulWidget { /// Called with the value of the stepper whenever it is changed. /// - /// {@macro on-change-disable} + /// {@macro zeta-widget-change-disable} final ValueChanged? onChange; @override diff --git a/lib/src/components/switch/zeta_switch.dart b/lib/src/components/switch/zeta_switch.dart index 39c9f3c0..b6fc20b5 100644 --- a/lib/src/components/switch/zeta_switch.dart +++ b/lib/src/components/switch/zeta_switch.dart @@ -42,7 +42,7 @@ class ZetaSwitch extends StatelessWidget { /// Called when the value of the switch should change. /// - /// {@macro on-change-disable} + /// {@macro zeta-widget-change-disable} final ValueChanged? onChanged; /// Variant of switch for different platforms. diff --git a/lib/src/interfaces/form_field.dart b/lib/src/interfaces/form_field.dart index e621c80d..8f5152f7 100644 --- a/lib/src/interfaces/form_field.dart +++ b/lib/src/interfaces/form_field.dart @@ -23,7 +23,7 @@ abstract class ZetaFormField extends ZetaStatefulWidget { super.key, }); - /// {@macro disabled} + /// {@macro zeta-widget-disabled} final bool disabled; /// The initial value of the form field. diff --git a/lib/src/theme/color_swatch.dart b/lib/src/theme/color_swatch.dart index 20c3ddb1..0d124612 100644 --- a/lib/src/theme/color_swatch.dart +++ b/lib/src/theme/color_swatch.dart @@ -26,8 +26,8 @@ class ZetaColorSwatch extends ColorSwatch with EquatableMixin { /// This factory constructor creates a color swatch based on a provided primary color. /// The darker and lighter shades are determined by predefined percentage values. /// - /// It ensures that the 60th and 80th shades from swatch are abide by the AA and AAA accessibility standards on [background], respectively. - /// [background] color defaults to [ZetaColorBase.warm] shade10. + /// It ensures that the 60th and 80th shades from swatch are abide by the AA and AAA accessibility standards on `background`, respectively. + /// `background` color defaults to [ZetaColorBase.warm] shade10. /// {@endtemplate} factory ZetaColorSwatch.fromColor( Color primary, { diff --git a/lib/src/theme/colors.dart b/lib/src/theme/colors.dart index 685aa2f8..f6ceef20 100644 --- a/lib/src/theme/colors.dart +++ b/lib/src/theme/colors.dart @@ -186,7 +186,6 @@ class ZetaColors extends Equatable { final Brightness brightness; /// Represents the Zeta accessibility standard. - /// {@macro zeta-color-dark} final ZetaContrast contrast; /// Primary color swatch. @@ -956,7 +955,9 @@ extension ZetaColorGetters on ColorScheme { /// /// {@macro zeta-color-dark} /// - /// {@macro zeta-color-aaa} + /// {@template zeta-color-aaa} + /// When changing from AA to AAA, the color will increase by 2 stops on the swatch. + /// {@endtemplate} Color get positive => green; /// Red negative color. diff --git a/lib/src/theme/colors_base.dart b/lib/src/theme/colors_base.dart index 62a3235e..a4097a01 100644 --- a/lib/src/theme/colors_base.dart +++ b/lib/src/theme/colors_base.dart @@ -51,7 +51,12 @@ abstract final class ZetaColorBase { /// Pure /// - /// {@macro zeta-colors-swatch} + /// {@template zeta-color-swatch} + /// Contains shades from 10 (light) to 100 (dark). + /// + /// See also: + /// * [ZetaColorSwatch]. + /// {@endtemplate} static const ZetaColorSwatch pure = ZetaColorSwatch( primary: 0xFF151519, swatch: { @@ -63,7 +68,7 @@ abstract final class ZetaColorBase { /// Cool /// - /// {@macro zeta-colors-swatch} + /// {@macro zeta-color-swatch} static const ZetaColorSwatch cool = ZetaColorSwatch( primary: 0xFF7a8190, swatch: { @@ -82,7 +87,7 @@ abstract final class ZetaColorBase { /// Warm /// - /// {@macro zeta-colors-swatch} + /// {@macro zeta-color-swatch} static const ZetaColorSwatch warm = ZetaColorSwatch( primary: 0xFF858585, swatch: { @@ -101,7 +106,7 @@ abstract final class ZetaColorBase { /// Blue /// - /// {@macro zeta-colors-swatch} + /// {@macro zeta-color-swatch} static const ZetaColorSwatch blue = ZetaColorSwatch( primary: 0xFF0073e6, swatch: { @@ -120,7 +125,7 @@ abstract final class ZetaColorBase { /// Green /// - /// {@macro zeta-colors-swatch} + /// {@macro zeta-color-swatch} static const ZetaColorSwatch green = ZetaColorSwatch( primary: 0xFF00864f, swatch: { @@ -139,7 +144,7 @@ abstract final class ZetaColorBase { /// Red /// - /// {@macro zeta-colors-swatch} + /// {@macro zeta-color-swatch} static const ZetaColorSwatch red = ZetaColorSwatch( primary: 0xFFd70015, swatch: { @@ -158,7 +163,7 @@ abstract final class ZetaColorBase { /// Orange /// - /// {@macro zeta-colors-swatch} + /// {@macro zeta-color-swatch} static const ZetaColorSwatch orange = ZetaColorSwatch( primary: 0xFFae6500, swatch: { @@ -177,7 +182,7 @@ abstract final class ZetaColorBase { /// Purple /// - /// {@macro zeta-colors-swatch} + /// {@macro zeta-color-swatch} static const ZetaColorSwatch purple = ZetaColorSwatch( primary: 0xFF7e0cff, swatch: { @@ -196,7 +201,7 @@ abstract final class ZetaColorBase { /// Yellow /// - /// {@macro zeta-colors-swatch} + /// {@macro zeta-color-swatch} static const ZetaColorSwatch yellow = ZetaColorSwatch( primary: 0xFF8d7400, swatch: { @@ -215,7 +220,7 @@ abstract final class ZetaColorBase { /// Teal /// - /// {@macro zeta-colors-swatch} + /// {@macro zeta-color-swatch} static const ZetaColorSwatch teal = ZetaColorSwatch( primary: 0xFF1a8080, swatch: { @@ -234,7 +239,7 @@ abstract final class ZetaColorBase { /// Pink /// - /// {@macro zeta-colors-swatch} + /// {@macro zeta-color-swatch} static const ZetaColorSwatch pink = ZetaColorSwatch( primary: 0xFFd30589, swatch: { diff --git a/lib/src/theme/theme_data.dart b/lib/src/theme/theme_data.dart index 162d1f0e..0217903e 100644 --- a/lib/src/theme/theme_data.dart +++ b/lib/src/theme/theme_data.dart @@ -71,7 +71,11 @@ class ZetaThemeData extends Equatable { /// Defaults to a dark mode color palette with default Zeta colors if not explicitly provided. ZetaColors get colorsDark => _colorsDark; - /// {@macro zeta-component-rounded} + /// {@template zeta-component-rounded} + /// Sets rounded or sharp border of the containing box and the icon style. + /// + /// Defaults to `true`. + /// {@endtemplate} final bool rounded; /// Applies the given [contrast] to the current [ZetaThemeData] and returns a new [ZetaThemeData] with the updated contrast. diff --git a/lib/src/utils/documentation_macros.dart b/lib/src/utils/documentation_macros.dart deleted file mode 100644 index 1ee4989d..00000000 --- a/lib/src/utils/documentation_macros.dart +++ /dev/null @@ -1,20 +0,0 @@ -/// {@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; diff --git a/lib/src/utils/extensions.dart b/lib/src/utils/extensions.dart index 12d1a65d..014819ec 100644 --- a/lib/src/utils/extensions.dart +++ b/lib/src/utils/extensions.dart @@ -18,7 +18,7 @@ extension ListDivider on Iterable { } } - /// Space out a list of wigets with gap of fixed width + /// Space out a list of widgets with gap of fixed width List gap(double gap) { return divide( SizedBox.square( diff --git a/lib/src/utils/utils.dart b/lib/src/utils/utils.dart new file mode 100644 index 00000000..99e032c0 --- /dev/null +++ b/lib/src/utils/utils.dart @@ -0,0 +1,4 @@ +export './debounce.dart'; +export './enums.dart'; +export './extensions.dart'; +export './rounded.dart'; diff --git a/lib/zeta_flutter.dart b/lib/zeta_flutter.dart index 682fecd3..9bbb1ca6 100644 --- a/lib/zeta_flutter.dart +++ b/lib/zeta_flutter.dart @@ -64,9 +64,6 @@ export 'src/theme/theme_data.dart'; export 'src/theme/theme_service.dart'; export 'src/theme/tokens.dart'; export 'src/theme/typography.dart'; -export 'src/utils/debounce.dart'; -export 'src/utils/enums.dart'; -export 'src/utils/extensions.dart'; -export 'src/utils/rounded.dart'; +export 'src/utils/utils.dart'; export 'src/zeta.dart'; export 'src/zeta_provider.dart';