fix: Avatar update (#30)

* chore: update contributing * fix: Fix button group immutability (#1) * Fix errors * fix copywith function * [automated commit] lint format and import sort --------- Co-authored-by: Osman <AO3856@zebra.com> Co-authored-by: github-actions <github-actions@github.com> * [automated commit] lint format and import sort * update on-main to push to firebase (#3) * ci: move firebase to flutter main host for qa (#4) * feat: Add List Item (#5) * feat: Add List Item * [automated commit] lint format and import sort --------- Co-authored-by: Simeon Dimitrov <simeon.dimitrov.work@gmail.com> Co-authored-by: github-actions <github-actions@github.com> * Component dialog (#18) * create showZetaDialog * finished dialog for DeviceType.mobilePortrait * dialog variant for bigger screens * create widgetbook; add Zeta parameter, also in ZetaButton * useRootNavigator: false * feat(main): AppBar (#19) * feat(main): AppBar * [automated commit] lint format and import sort --------- Co-authored-by: github-actions <github-actions@github.com> * Component dialog (#22) * chore: update contributing * fix: Fix button group immutability (#1) * Fix errors * fix copywith function * [automated commit] lint format and import sort --------- Co-authored-by: Osman <AO3856@zebra.com> Co-authored-by: github-actions <github-actions@github.com> * [automated commit] lint format and import sort * update on-main to push to firebase (#3) * ci: move firebase to flutter main host for qa (#4) * feat: Add List Item (#5) * feat: Add List Item * [automated commit] lint format and import sort --------- Co-authored-by: Simeon Dimitrov <simeon.dimitrov.work@gmail.com> Co-authored-by: github-actions <github-actions@github.com> * fix(main): ListItem disabled color (#8) * fix(main): ListItem disabled color * [automated commit] lint format and import sort --------- Co-authored-by: github-actions <github-actions@github.com> * feat : Dropdown menu (#7) * Create dropdown * Add sizes * create stoyrybook and add size * Fix errrs and respond to comments * Fix issues * [automated commit] lint format and import sort * Alter isLarge * Fix spacing * [automated commit] lint format and import sort * Alter leading styles * [automated commit] lint format and import sort --------- Co-authored-by: Osman <AO3856@zebra.com> Co-authored-by: github-actions <github-actions@github.com> * Component ZetaSwitch (#6) * create ZetaSwitch * ZetaSwitch using MaterialSwitch * widgetbook for ZetaSwitch * remove hover; fix initState * add showHover parameter * add comments 'Zeta change' in material_switch.dart * remove size parameter and factory constructors * fix example and widgetbook * Component Zeta Radio Button (#9) * create component Zeta Radio Button * remove hover color * fix label line height * feat(main): SnackBar (#10) * add snackbar example * Add snackbar widgetbook * feat(main): SnackBar * [automated commit] lint format and import sort * remove view icon * Add view icon * Add widgetbook icon helper * [automated commit] lint format and import sort * fix alphabetical imports * Fix delete and error background color --------- Co-authored-by: github-actions <github-actions@github.com> * feat(main): Tabs (#11) * feat(main): Tabs * [automated commit] lint format and import sort --------- Co-authored-by: github-actions <github-actions@github.com> * chore: Update text styles (#13) * fix: switch on web (#14) * Component date input (#12) * create ZetaDateInput * create different ZetaDateInput variants * fix show error style * date validation and input mask; documentation for ZetaDateInput properties * create widgetbook * changes according to comments * create showZetaDialog * finished dialog for DeviceType.mobilePortrait * Component date input (#16) * create ZetaDateInput * create different ZetaDateInput variants * fix show error style * date validation and input mask; documentation for ZetaDateInput properties * create widgetbook * changes according to comments * fix Typography of Date Input * restore * remove text line height * dialog variant for bigger screens * create widgetbook; add Zeta parameter, also in ZetaButton * useRootNavigator: false * add iconKnob in Dialog widgetbook * final iconData = iconKnob --------- Co-authored-by: Luke <lwalton@zebra.com> Co-authored-by: ahmed-osman3 <99483750+ahmed-osman3@users.noreply.github.com> Co-authored-by: Osman <AO3856@zebra.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Luke Walton <thelukewalton@users.noreply.github.com> Co-authored-by: Simeon Dimitrov <simeon.dimitrov.work@gmail.com> Co-authored-by: sd-athlon <163880004+sd-athlon@users.noreply.github.com> * Merge * Component phone input (#21) * chore: update contributing * fix: Fix button group immutability (#1) * Fix errors * fix copywith function * [automated commit] lint format and import sort --------- Co-authored-by: Osman <AO3856@zebra.com> Co-authored-by: github-actions <github-actions@github.com> * [automated commit] lint format and import sort * update on-main to push to firebase (#3) * ci: move firebase to flutter main host for qa (#4) * feat: Add List Item (#5) * feat: Add List Item * [automated commit] lint format and import sort --------- Co-authored-by: Simeon Dimitrov <simeon.dimitrov.work@gmail.com> Co-authored-by: github-actions <github-actions@github.com> * fix(main): ListItem disabled color (#8) * fix(main): ListItem disabled color * [automated commit] lint format and import sort --------- Co-authored-by: github-actions <github-actions@github.com> * feat : Dropdown menu (#7) * Create dropdown * Add sizes * create stoyrybook and add size * Fix errrs and respond to comments * Fix issues * [automated commit] lint format and import sort * Alter isLarge * Fix spacing * [automated commit] lint format and import sort * Alter leading styles * [automated commit] lint format and import sort --------- Co-authored-by: Osman <AO3856@zebra.com> Co-authored-by: github-actions <github-actions@github.com> * Component ZetaSwitch (#6) * create ZetaSwitch * ZetaSwitch using MaterialSwitch * widgetbook for ZetaSwitch * remove hover; fix initState * add showHover parameter * add comments 'Zeta change' in material_switch.dart * remove size parameter and factory constructors * fix example and widgetbook * Component Zeta Radio Button (#9) * create component Zeta Radio Button * remove hover color * fix label line height * feat(main): SnackBar (#10) * add snackbar example * Add snackbar widgetbook * feat(main): SnackBar * [automated commit] lint format and import sort * remove view icon * Add view icon * Add widgetbook icon helper * [automated commit] lint format and import sort * fix alphabetical imports * Fix delete and error background color --------- Co-authored-by: github-actions <github-actions@github.com> * feat(main): Tabs (#11) * feat(main): Tabs * [automated commit] lint format and import sort --------- Co-authored-by: github-actions <github-actions@github.com> * chore: Update text styles (#13) * fix: switch on web (#14) * Component date input (#12) * create ZetaDateInput * create different ZetaDateInput variants * fix show error style * date validation and input mask; documentation for ZetaDateInput properties * create widgetbook * changes according to comments * Component date input (#16) * create ZetaDateInput * create different ZetaDateInput variants * fix show error style * date validation and input mask; documentation for ZetaDateInput properties * create widgetbook * changes according to comments * fix Typography of Date Input * restore * remove text line height * ZetaPhoneInput initial commit * complete ZetaPhoneInput; add flags * create phoneInputUseCase in Widgetbook * refactor phone input to use native alert dialog --------- Co-authored-by: Luke <lwalton@zebra.com> Co-authored-by: ahmed-osman3 <99483750+ahmed-osman3@users.noreply.github.com> Co-authored-by: Osman <AO3856@zebra.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Luke Walton <thelukewalton@users.noreply.github.com> Co-authored-by: Simeon Dimitrov <simeon.dimitrov.work@gmail.com> Co-authored-by: sd-athlon <163880004+sd-athlon@users.noreply.github.com> * restore main.dart in example (#23) * Component phone input (#24) * chore: update contributing * fix: Fix button group immutability (#1) * Fix errors * fix copywith function * [automated commit] lint format and import sort --------- Co-authored-by: Osman <AO3856@zebra.com> Co-authored-by: github-actions <github-actions@github.com> * [automated commit] lint format and import sort * update on-main to push to firebase (#3) * ci: move firebase to flutter main host for qa (#4) * feat: Add List Item (#5) * feat: Add List Item * [automated commit] lint format and import sort --------- Co-authored-by: Simeon Dimitrov <simeon.dimitrov.work@gmail.com> Co-authored-by: github-actions <github-actions@github.com> * fix(main): ListItem disabled color (#8) * fix(main): ListItem disabled color * [automated commit] lint format and import sort --------- Co-authored-by: github-actions <github-actions@github.com> * feat : Dropdown menu (#7) * Create dropdown * Add sizes * create stoyrybook and add size * Fix errrs and respond to comments * Fix issues * [automated commit] lint format and import sort * Alter isLarge * Fix spacing * [automated commit] lint format and import sort * Alter leading styles * [automated commit] lint format and import sort --------- Co-authored-by: Osman <AO3856@zebra.com> Co-authored-by: github-actions <github-actions@github.com> * Component ZetaSwitch (#6) * create ZetaSwitch * ZetaSwitch using MaterialSwitch * widgetbook for ZetaSwitch * remove hover; fix initState * add showHover parameter * add comments 'Zeta change' in material_switch.dart * remove size parameter and factory constructors * fix example and widgetbook * Component Zeta Radio Button (#9) * create component Zeta Radio Button * remove hover color * fix label line height * feat(main): SnackBar (#10) * add snackbar example * Add snackbar widgetbook * feat(main): SnackBar * [automated commit] lint format and import sort * remove view icon * Add view icon * Add widgetbook icon helper * [automated commit] lint format and import sort * fix alphabetical imports * Fix delete and error background color --------- Co-authored-by: github-actions <github-actions@github.com> * feat(main): Tabs (#11) * feat(main): Tabs * [automated commit] lint format and import sort --------- Co-authored-by: github-actions <github-actions@github.com> * chore: Update text styles (#13) * fix: switch on web (#14) * Component date input (#12) * create ZetaDateInput * create different ZetaDateInput variants * fix show error style * date validation and input mask; documentation for ZetaDateInput properties * create widgetbook * changes according to comments * Component date input (#16) * create ZetaDateInput * create different ZetaDateInput variants * fix show error style * date validation and input mask; documentation for ZetaDateInput properties * create widgetbook * changes according to comments * fix Typography of Date Input * restore * remove text line height * ZetaPhoneInput initial commit * complete ZetaPhoneInput; add flags * create phoneInputUseCase in Widgetbook * refactor phone input to use native alert dialog * don't use root navigator in widgetbook --------- Co-authored-by: Luke <lwalton@zebra.com> Co-authored-by: ahmed-osman3 <99483750+ahmed-osman3@users.noreply.github.com> Co-authored-by: Osman <AO3856@zebra.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Luke Walton <thelukewalton@users.noreply.github.com> Co-authored-by: Simeon Dimitrov <simeon.dimitrov.work@gmail.com> Co-authored-by: sd-athlon <163880004+sd-athlon@users.noreply.github.com> * Component phone input (#25) * chore: update contributing * fix: Fix button group immutability (#1) * Fix errors * fix copywith function * [automated commit] lint format and import sort --------- Co-authored-by: Osman <AO3856@zebra.com> Co-authored-by: github-actions <github-actions@github.com> * [automated commit] lint format and import sort * update on-main to push to firebase (#3) * ci: move firebase to flutter main host for qa (#4) * feat: Add List Item (#5) * feat: Add List Item * [automated commit] lint format and import sort --------- Co-authored-by: Simeon Dimitrov <simeon.dimitrov.work@gmail.com> Co-authored-by: github-actions <github-actions@github.com> * fix(main): ListItem disabled color (#8) * fix(main): ListItem disabled color * [automated commit] lint format and import sort --------- Co-authored-by: github-actions <github-actions@github.com> * feat : Dropdown menu (#7) * Create dropdown * Add sizes * create stoyrybook and add size * Fix errrs and respond to comments * Fix issues * [automated commit] lint format and import sort * Alter isLarge * Fix spacing * [automated commit] lint format and import sort * Alter leading styles * [automated commit] lint format and import sort --------- Co-authored-by: Osman <AO3856@zebra.com> Co-authored-by: github-actions <github-actions@github.com> * Component ZetaSwitch (#6) * create ZetaSwitch * ZetaSwitch using MaterialSwitch * widgetbook for ZetaSwitch * remove hover; fix initState * add showHover parameter * add comments 'Zeta change' in material_switch.dart * remove size parameter and factory constructors * fix example and widgetbook * Component Zeta Radio Button (#9) * create component Zeta Radio Button * remove hover color * fix label line height * feat(main): SnackBar (#10) * add snackbar example * Add snackbar widgetbook * feat(main): SnackBar * [automated commit] lint format and import sort * remove view icon * Add view icon * Add widgetbook icon helper * [automated commit] lint format and import sort * fix alphabetical imports * Fix delete and error background color --------- Co-authored-by: github-actions <github-actions@github.com> * feat(main): Tabs (#11) * feat(main): Tabs * [automated commit] lint format and import sort --------- Co-authored-by: github-actions <github-actions@github.com> * chore: Update text styles (#13) * fix: switch on web (#14) * Component date input (#12) * create ZetaDateInput * create different ZetaDateInput variants * fix show error style * date validation and input mask; documentation for ZetaDateInput properties * create widgetbook * changes according to comments * Component date input (#16) * create ZetaDateInput * create different ZetaDateInput variants * fix show error style * date validation and input mask; documentation for ZetaDateInput properties * create widgetbook * changes according to comments * fix Typography of Date Input * restore * remove text line height * ZetaPhoneInput initial commit * complete ZetaPhoneInput; add flags * create phoneInputUseCase in Widgetbook * refactor phone input to use native alert dialog * don't use root navigator in widgetbook * pass parameter useRootNavigator * restore some missing countries in the list --------- Co-authored-by: Luke <lwalton@zebra.com> Co-authored-by: ahmed-osman3 <99483750+ahmed-osman3@users.noreply.github.com> Co-authored-by: Osman <AO3856@zebra.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Luke Walton <thelukewalton@users.noreply.github.com> Co-authored-by: Simeon Dimitrov <simeon.dimitrov.work@gmail.com> Co-authored-by: sd-athlon <163880004+sd-athlon@users.noreply.github.com> * Update avatar * Update avatar * [automated commit] lint format and import sort * Navigation rail (#27) * create NavigationRail * restore main.dart in example * navigation rail example * create widgetbook * add SafeArea; rename parameter wordWrap * add MouseRegion & SelectionContainer.disabled * Respond to comments * Component tooltip (#31) * create tooltip * create Widgetbook for ZetaTooltip * add LayoutBuilder * [automated commit] lint format and import sort --------- Co-authored-by: github-actions <github-actions@github.com> * feat(main): Segmented control (#26) * feat(main): AppBar * Add segmented control * [automated commit] lint format and import sort * Fix mouse cursor, disable selection container and tap area * [automated commit] lint format and import sort --------- Co-authored-by: github-actions <github-actions@github.com> * [automated commit] lint format and import sort * Add pill notifications * [automated commit] lint format and import sort * Remove notification border * Change sizes --------- Co-authored-by: Luke <lwalton@zebra.com> Co-authored-by: Osman <AO3856@zebra.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Luke Walton <thelukewalton@users.noreply.github.com> Co-authored-by: Simeon Dimitrov <simeon.dimitrov.work@gmail.com> Co-authored-by: atanasyordanov21 <63714308+atanasyordanov21@users.noreply.github.com> Co-authored-by: sd-athlon <163880004+sd-athlon@users.noreply.github.com>
ZebraDevs · May 2, 2024 · 3f51508 · 3f51508
1 parent e07fc48
commit 3f51508
Show file tree

Hide file tree

Showing 5 changed files with 301 additions and 101 deletions.
diff --git a/example/lib/pages/components/avatar_example.dart b/example/lib/pages/components/avatar_example.dart
@@ -202,7 +202,7 @@ class AvatarExample extends StatelessWidget {
                                 children: [
                                   ZetaAvatar.image(
                                     size: size,
-                                    upperBadge: ZetaIndicator.notification(value: 3),
+                                    upperBadge: ZetaAvatarBadge.notification(value: 3),
                                   ),
                                   const SizedBox(height: 20),
                                 ],
@@ -217,7 +217,7 @@ class AvatarExample extends StatelessWidget {
                                   ZetaAvatar.image(
                                     size: size,
                                     borderColor: Zeta.of(context).colors.green,
-                                    upperBadge: ZetaIndicator.notification(value: 3),
+                                    upperBadge: ZetaAvatarBadge.notification(value: 3),
                                   ),
                                   const SizedBox(height: 20),
                                 ],
@@ -231,7 +231,7 @@ class AvatarExample extends StatelessWidget {
                                 children: [
                                   ZetaAvatar.image(
                                     size: size,
-                                    upperBadge: ZetaIndicator.notification(value: 3),
+                                    upperBadge: ZetaAvatarBadge.notification(value: 3),
                                     image: image,
                                   ),
                                   const SizedBox(height: 20),
@@ -247,7 +247,7 @@ class AvatarExample extends StatelessWidget {
                                   ZetaAvatar.image(
                                     size: size,
                                     borderColor: Zeta.of(context).colors.green,
-                                    upperBadge: ZetaIndicator.notification(value: 3),
+                                    upperBadge: ZetaAvatarBadge.notification(value: 3),
                                     image: image,
                                   ),
                                   const SizedBox(height: 20),
@@ -294,7 +294,7 @@ class AvatarExample extends StatelessWidget {
                                   ZetaAvatar.initials(
                                     size: size,
                                     initials: 'AB',
-                                    upperBadge: ZetaIndicator.notification(value: 3),
+                                    upperBadge: ZetaAvatarBadge.notification(value: 3),
                                   ),
                                   const SizedBox(height: 20),
                                 ],
@@ -310,7 +310,7 @@ class AvatarExample extends StatelessWidget {
                                     size: size,
                                     initials: 'AB',
                                     borderColor: Zeta.of(context).colors.green,
-                                    upperBadge: ZetaIndicator.notification(value: 3),
+                                    upperBadge: ZetaAvatarBadge.notification(value: 3),
                                   ),
                                   const SizedBox(height: 20),
                                 ],
@@ -355,7 +355,7 @@ class AvatarExample extends StatelessWidget {
                                 children: [
                                   ZetaAvatar.image(
                                     size: size,
-                                    lowerBadge: ZetaIndicator.icon(),
+                                    lowerBadge: ZetaAvatarBadge.icon(),
                                   ),
                                   const SizedBox(height: 20),
                                 ],
@@ -370,7 +370,7 @@ class AvatarExample extends StatelessWidget {
                                   ZetaAvatar.image(
                                     size: size,
                                     borderColor: Zeta.of(context).colors.green,
-                                    lowerBadge: ZetaIndicator.icon(),
+                                    lowerBadge: ZetaAvatarBadge.icon(),
                                   ),
                                   const SizedBox(height: 20),
                                 ],
@@ -384,7 +384,7 @@ class AvatarExample extends StatelessWidget {
                                 children: [
                                   ZetaAvatar.image(
                                     size: size,
-                                    lowerBadge: ZetaIndicator.icon(),
+                                    lowerBadge: ZetaAvatarBadge.icon(),
                                     image: image,
                                   ),
                                   const SizedBox(height: 20),
@@ -400,7 +400,7 @@ class AvatarExample extends StatelessWidget {
                                   ZetaAvatar.image(
                                     size: size,
                                     borderColor: Zeta.of(context).colors.green,
-                                    lowerBadge: ZetaIndicator.icon(),
+                                    lowerBadge: ZetaAvatarBadge.icon(),
                                     image: image,
                                   ),
                                   const SizedBox(height: 20),
@@ -447,7 +447,7 @@ class AvatarExample extends StatelessWidget {
                                   ZetaAvatar.initials(
                                     size: size,
                                     initials: 'AB',
-                                    lowerBadge: ZetaIndicator.icon(),
+                                    lowerBadge: ZetaAvatarBadge.icon(),
                                   ),
                                   const SizedBox(height: 20),
                                 ],
@@ -463,7 +463,7 @@ class AvatarExample extends StatelessWidget {
                                     size: size,
                                     initials: 'AB',
                                     borderColor: Zeta.of(context).colors.green,
-                                    lowerBadge: ZetaIndicator.icon(),
+                                    lowerBadge: ZetaAvatarBadge.icon(),
                                   ),
                                   const SizedBox(height: 20),
                                 ],
@@ -509,8 +509,8 @@ class AvatarExample extends StatelessWidget {
                                   ZetaAvatar.image(
                                     size: size,
                                     image: image,
-                                    upperBadge: ZetaIndicator.notification(value: 3),
-                                    lowerBadge: ZetaIndicator.icon(),
+                                    upperBadge: ZetaAvatarBadge.notification(value: 3),
+                                    lowerBadge: ZetaAvatarBadge.icon(),
                                   ),
                                   const SizedBox(height: 20),
                                 ],
@@ -526,8 +526,8 @@ class AvatarExample extends StatelessWidget {
                                     size: size,
                                     image: image,
                                     borderColor: Zeta.of(context).colors.green,
-                                    upperBadge: ZetaIndicator.notification(value: 3),
-                                    lowerBadge: ZetaIndicator.icon(),
+                                    upperBadge: ZetaAvatarBadge.notification(value: 3),
+                                    lowerBadge: ZetaAvatarBadge.icon(),
                                   ),
                                   const SizedBox(height: 20),
                                 ],
@@ -541,8 +541,8 @@ class AvatarExample extends StatelessWidget {
                                   ZetaAvatar.initials(
                                     size: size,
                                     initials: 'AB',
-                                    upperBadge: ZetaIndicator.notification(value: 3),
-                                    lowerBadge: ZetaIndicator.icon(),
+                                    upperBadge: ZetaAvatarBadge.notification(value: 3),
+                                    lowerBadge: ZetaAvatarBadge.icon(),
                                   ),
                                   const SizedBox(height: 20),
                                 ],
@@ -558,8 +558,8 @@ class AvatarExample extends StatelessWidget {
                                     size: size,
                                     initials: 'AB',
                                     borderColor: Zeta.of(context).colors.green,
-                                    upperBadge: ZetaIndicator.notification(value: 3),
-                                    lowerBadge: ZetaIndicator.icon(),
+                                    upperBadge: ZetaAvatarBadge.notification(value: 3),
+                                    lowerBadge: ZetaAvatarBadge.icon(),
                                   ),
                                   const SizedBox(height: 20),
                                 ],
@@ -580,15 +580,23 @@ class AvatarExample extends StatelessWidget {
 extension on ZetaAvatarSize {
   double get pixelSize {
     switch (this) {
+      case ZetaAvatarSize.xxxl:
+        return ZetaSpacing.x50;
+      case ZetaAvatarSize.xxl:
+        return ZetaSpacing.x30;
       case ZetaAvatarSize.xl:
-        return ZetaSpacing.x16;
+        return ZetaSpacing.x20;
       case ZetaAvatarSize.l:
-        return ZetaSpacing.x12;
+        return ZetaSpacing.x16;
       case ZetaAvatarSize.m:
-        return ZetaSpacing.x10;
+        return ZetaSpacing.x12;
       case ZetaAvatarSize.s:
-        return ZetaSpacing.x8;
+        return ZetaSpacing.x10;
       case ZetaAvatarSize.xs:
+        return ZetaSpacing.x9;
+      case ZetaAvatarSize.xxs:
+        return ZetaSpacing.x8;
+      case ZetaAvatarSize.xxxs:
         return ZetaSpacing.x6;
     }
   }

diff --git a/example/widgetbook/pages/components/avatar_widgetbook.dart b/example/widgetbook/pages/components/avatar_widgetbook.dart
@@ -6,6 +6,7 @@ import '../../test/test_components.dart';
 
 Widget avatarUseCase(BuildContext context) {
   final Widget image = Image.asset('assets/Omer.jpg', fit: BoxFit.cover);
+  final colors = Zeta.of(context).colors;
 
   return WidgetbookTestWidget(
     widget: ZetaAvatar(
@@ -15,12 +16,26 @@ Widget avatarUseCase(BuildContext context) {
         options: ZetaAvatarSize.values,
         labelBuilder: (value) => value.name.split('.').last.toUpperCase(),
       ),
-      lowerBadge: context.knobs.boolean(label: 'Status Badge', initialValue: false) ? ZetaIndicator.icon() : null,
-      borderColor: context.knobs.colorOrNull(label: 'Outline', initialValue: null),
-      upperBadge:
-          context.knobs.boolean(label: 'Notification Badge', initialValue: false) ? ZetaIndicator.notification() : null,
+      upperBadge: context.knobs.boolean(label: 'Status Badge', initialValue: false)
+          ? ZetaAvatarBadge.icon(
+              icon: ZetaIcons.close_round,
+              iconColor: context.knobs.colorOrNull(label: "Badge Icon Color"),
+              color: context.knobs.colorOrNull(label: "Upper Badge Color", initialValue: colors.green) ??
+                  colors.iconDefault,
+            )
+          : null,
+      borderColor: context.knobs.colorOrNull(
+        label: 'Outline',
+      ),
+      lowerBadge: context.knobs.boolean(label: 'Notification Badge', initialValue: false)
+          ? ZetaAvatarBadge.notification(
+              value: context.knobs.intOrNull.input(label: "Value", initialValue: 1),
+            )
+          : null,
       initials: context.knobs.stringOrNull(label: 'Initials', initialValue: null),
-      backgroundColor: context.knobs.colorOrNull(label: 'Background color'),
+      backgroundColor: context.knobs.colorOrNull(
+        label: 'Background color',
+      ),
     ),
   );
 }