fix: minor bugs on ZetaChatItem (#105)

chore: rename debounce file chore: Update widgetbook to pull readme from github docs: Fix documentation macros
ZebraDevs · Jun 17, 2024 · c37e51d · c37e51d
1 parent 928f450
commit c37e51d
Show file tree

Hide file tree

Showing 26 changed files with 86 additions and 74 deletions.
diff --git 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<void> 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<VoidCallback?>.has('onTap', onTap))
-      ..add(DiagnosticsProperty<bool>('starred', starred))
+      ..add(DiagnosticsProperty<bool?>('starred', starred))
       ..add(
         ObjectFlagProperty<VoidCallback?>.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
@@ -55,7 +55,7 @@ class ZetaCheckbox extends FormField<bool> {
 
   /// Called when the value of the checkbox should change.
   ///
-  /// {@macro on-change-disable}
+  /// {@macro zeta-widget-change-disable}
   final ValueChanged<bool>? 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
@@ -110,7 +110,7 @@ class ZetaDropdown<T> extends ZetaStatefulWidget {
 
   /// Called with the selected value whenever the dropdown is changed.
   ///
-  /// {@macro on-change-disable}
+  /// {@macro zeta-widget-change-disable}
   final ValueSetter<ZetaDropdownItem<T>>? onChange;
 
   /// Called when the dropdown is dismissed.

diff --git 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
@@ -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
@@ -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
@@ -25,7 +25,7 @@ class ZetaRadio<T> extends ZetaStatefulWidget {
 
   /// Callback function to call when the Radio Button is tapped.
   ///
-  /// {@macro on-change-disable}
+  /// {@macro zeta-widget-change-disable}
   final ValueChanged<T?>? 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
@@ -40,7 +40,7 @@ class ZetaSearchBar extends StatefulWidget {
   /// A callback, which is invoked when the microphone button is pressed.
   final Future<String?> 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
@@ -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<int>? onChange;
 
   @override

diff --git 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<bool?>? onChanged;
 
   /// Variant of switch for different platforms.

diff --git a/lib/src/interfaces/form_field.dart b/lib/src/interfaces/form_field.dart
@@ -23,7 +23,7 @@ abstract class ZetaFormField<T> 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
@@ -26,8 +26,8 @@ class ZetaColorSwatch extends ColorSwatch<int> 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
@@ -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
@@ -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: {