fix: Update banners (#41)

* 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 <[email protected]> * 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 <[email protected]> Co-authored-by: github-actions <[email protected]> * [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 <[email protected]> Co-authored-by: github-actions <[email protected]> * fix(main): ListItem disabled color (#8) * fix(main): ListItem disabled color * [automated commit] lint format and import sort --------- Co-authored-by: github-actions <[email protected]> * 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 <[email protected]> Co-authored-by: github-actions <[email protected]> * 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 <[email protected]> * feat(main): Tabs (#11) * feat(main): Tabs * [automated commit] lint format and import sort --------- Co-authored-by: github-actions <[email protected]> * 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 <[email protected]> Co-authored-by: ahmed-osman3 <[email protected]> Co-authored-by: Osman <[email protected]> Co-authored-by: github-actions <[email protected]> Co-authored-by: Luke Walton <[email protected]> Co-authored-by: Simeon Dimitrov <[email protected]> Co-authored-by: sd-athlon <[email protected]> * 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 <[email protected]> Co-authored-by: github-actions <[email protected]> * [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 <[email protected]> Co-authored-by: github-actions <[email protected]> * fix(main): ListItem disabled color (#8) * fix(main): ListItem disabled color * [automated commit] lint format and import sort --------- Co-authored-by: github-actions <[email protected]> * 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 <[email protected]> Co-authored-by: github-actions <[email protected]> * 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 <[email protected]> * feat(main): Tabs (#11) * feat(main): Tabs * [automated commit] lint format and import sort --------- Co-authored-by: github-actions <[email protected]> * 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 <[email protected]> Co-authored-by: ahmed-osman3 <[email protected]> Co-authored-by: Osman <[email protected]> Co-authored-by: github-actions <[email protected]> Co-authored-by: Luke Walton <[email protected]> Co-authored-by: Simeon Dimitrov <[email protected]> Co-authored-by: sd-athlon <[email protected]> * 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 <[email protected]> Co-authored-by: github-actions <[email protected]> * [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 <[email protected]> Co-authored-by: github-actions <[email protected]> * fix(main): ListItem disabled color (#8) * fix(main): ListItem disabled color * [automated commit] lint format and import sort --------- Co-authored-by: github-actions <[email protected]> * 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 <[email protected]> Co-authored-by: github-actions <[email protected]> * 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 <[email protected]> * feat(main): Tabs (#11) * feat(main): Tabs * [automated commit] lint format and import sort --------- Co-authored-by: github-actions <[email protected]> * 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 <[email protected]> Co-authored-by: ahmed-osman3 <[email protected]> Co-authored-by: Osman <[email protected]> Co-authored-by: github-actions <[email protected]> Co-authored-by: Luke Walton <[email protected]> Co-authored-by: Simeon Dimitrov <[email protected]> Co-authored-by: sd-athlon <[email protected]> * 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 <[email protected]> Co-authored-by: github-actions <[email protected]> * [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 <[email protected]> Co-authored-by: github-actions <[email protected]> * fix(main): ListItem disabled color (#8) * fix(main): ListItem disabled color * [automated commit] lint format and import sort --------- Co-authored-by: github-actions <[email protected]> * 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 <[email protected]> Co-authored-by: github-actions <[email protected]> * 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 <[email protected]> * feat(main): Tabs (#11) * feat(main): Tabs * [automated commit] lint format and import sort --------- Co-authored-by: github-actions <[email protected]> * 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 <[email protected]> Co-authored-by: ahmed-osman3 <[email protected]> Co-authored-by: Osman <[email protected]> Co-authored-by: github-actions <[email protected]> Co-authored-by: Luke Walton <[email protected]> Co-authored-by: Simeon Dimitrov <[email protected]> Co-authored-by: sd-athlon <[email protected]> * Navigation rail (#27) * create NavigationRail * restore main.dart in example * navigation rail example * create widgetbook * add SafeArea; rename parameter wordWrap * add MouseRegion & SelectionContainer.disabled * Component tooltip (#31) * create tooltip * create Widgetbook for ZetaTooltip * add LayoutBuilder * [automated commit] lint format and import sort --------- Co-authored-by: github-actions <[email protected]> * 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 <[email protected]> * Component phone input (#28) * 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 <[email protected]> Co-authored-by: github-actions <[email protected]> * [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 <[email protected]> Co-authored-by: github-actions <[email protected]> * fix(main): ListItem disabled color (#8) * fix(main): ListItem disabled color * [automated commit] lint format and import sort --------- Co-authored-by: github-actions <[email protected]> * 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 <[email protected]> Co-authored-by: github-actions <[email protected]> * 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 <[email protected]> * feat(main): Tabs (#11) * feat(main): Tabs * [automated commit] lint format and import sort --------- Co-authored-by: github-actions <[email protected]> * 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 * countries search * add searchHint * fix comments --------- Co-authored-by: Luke <[email protected]> Co-authored-by: ahmed-osman3 <[email protected]> Co-authored-by: Osman <[email protected]> Co-authored-by: github-actions <[email protected]> Co-authored-by: Luke Walton <[email protected]> Co-authored-by: Simeon Dimitrov <[email protected]> Co-authored-by: sd-athlon <[email protected]> * use ZetaWidgetSize from enums.dart (#32) * Component tooltip (#33) * create tooltip * create Widgetbook for ZetaTooltip * add LayoutBuilder * [automated commit] lint format and import sort * fix text overflow when there is horizontal arrow and maxWidth is null --------- Co-authored-by: github-actions <[email protected]> * Component search bar (#29) * create ZetaSearchBar with examples * create Widgetbook for ZetaSearchBar * rename callback * full instead of stadium shape * default hint Search * add parameters showLeadingIcon & showSpeechToText * fix comments * use ZetaWidgetBorder & ZetaWidgetSize from enums.dart * Component phone input (#34) * 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 <[email protected]> Co-authored-by: github-actions <[email protected]> * [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 <[email protected]> Co-authored-by: github-actions <[email protected]> * fix(main): ListItem disabled color (#8) * fix(main): ListItem disabled color * [automated commit] lint format and import sort --------- Co-authored-by: github-actions <[email protected]> * 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 <[email protected]> Co-authored-by: github-actions <[email protected]> * 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 <[email protected]> * feat(main): Tabs (#11) * feat(main): Tabs * [automated commit] lint format and import sort --------- Co-authored-by: github-actions <[email protected]> * 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 * countries search * add searchHint * fix comments * use ZetaSearchBar in CountriesDialog --------- Co-authored-by: Luke <[email protected]> Co-authored-by: ahmed-osman3 <[email protected]> Co-authored-by: Osman <[email protected]> Co-authored-by: github-actions <[email protected]> Co-authored-by: Luke Walton <[email protected]> Co-authored-by: Simeon Dimitrov <[email protected]> Co-authored-by: sd-athlon <[email protected]> * Select input (#35) * create ZetaSelectInput * add extra parameters; improve * leading icon; error handling in example * _MenuPosition * widgetbook * restore all menu items on each open * fix setState * initialize _menuSize with Size.zero * Filter Selection (#36) * Filter Selection * use divide * ZetaScreenHeaderBar (#39) * fix & update banners * refactor Priority Pill * local size in ZetaPriorityPill * add Padding around all UseCase in Widgetbook * ZetaPriorityPillSize * remove ZetaWorkcloudIndicator --------- Co-authored-by: Luke <[email protected]> Co-authored-by: github-actions <[email protected]> Co-authored-by: ahmed-osman3 <[email protected]> Co-authored-by: Osman <[email protected]> Co-authored-by: Luke Walton <[email protected]> Co-authored-by: Simeon Dimitrov <[email protected]> Co-authored-by: sd-athlon <[email protected]>
ZebraDevs · May 2, 2024 · 0a881b5 · 0a881b5
1 parent c2dd630
commit 0a881b5
Show file tree

Hide file tree

Showing 11 changed files with 224 additions and 331 deletions.
diff --git a/example/lib/pages/components/badges_example.dart b/example/lib/pages/components/badges_example.dart
@@ -20,14 +20,14 @@ class BadgesExample extends StatelessWidget {
             _StatusLabel(),
             _DividingText('Priority Pill'),
             _PriorityPill(),
+            const SizedBox(height: ZetaSpacing.l),
+            _PriorityPill(size: ZetaPriorityPillSize.small),
             _DividingText('Badge'),
             _Badge(),
             _DividingText('Indicators'),
             _Indicators(),
             _DividingText('Tags'),
             _Tags(),
-            _DividingText('WorkCloud indicators'),
-            _WorkcloudIndicators(),
           ],
         ),
       ),
@@ -56,8 +56,10 @@ class _StatusLabel extends StatelessWidget {
       mainAxisAlignment: MainAxisAlignment.spaceEvenly,
       crossAxisAlignment: CrossAxisAlignment.center,
       children: [
+        ZetaStatusLabel(label: 'Label', status: type),
+        ZetaStatusLabel(label: 'Label', status: type, customIcon: ZetaIcons.star_round),
         ZetaStatusLabel(label: 'Label', status: type, rounded: false),
-        ZetaStatusLabel(label: 'Label', status: type, rounded: true),
+        ZetaStatusLabel(label: 'Label', status: type, rounded: false, customIcon: ZetaIcons.star_sharp),
       ],
     );
   }
@@ -77,16 +79,45 @@ class _StatusLabel extends StatelessWidget {
 }
 
 class _PriorityPill extends StatelessWidget {
-  const _PriorityPill();
+  const _PriorityPill({
+    this.size = ZetaPriorityPillSize.large,
+  });
+
+  final ZetaPriorityPillSize size;
 
   @override
   Widget build(BuildContext context) {
     return Row(
-      mainAxisSize: MainAxisSize.min,
+      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
       children: [
-        ZetaPriorityPill(index: 1000, priority: 'Rounded', rounded: true),
-        ZetaPriorityPill(index: 2, priority: 'Sharp', rounded: false),
-      ].divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(),
+        Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            ZetaPriorityPill(size: size, isBadge: true),
+            ZetaPriorityPill(size: size, isBadge: true, type: ZetaPriorityPillType.high),
+            ZetaPriorityPill(size: size, isBadge: true, type: ZetaPriorityPillType.medium),
+            ZetaPriorityPill(size: size, isBadge: true, type: ZetaPriorityPillType.low),
+          ].divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(),
+        ),
+        Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            ZetaPriorityPill(size: size),
+            ZetaPriorityPill(size: size, type: ZetaPriorityPillType.high),
+            ZetaPriorityPill(size: size, type: ZetaPriorityPillType.medium),
+            ZetaPriorityPill(size: size, type: ZetaPriorityPillType.low),
+          ].divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(),
+        ),
+        Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            ZetaPriorityPill(size: size, rounded: false),
+            ZetaPriorityPill(size: size, rounded: false, type: ZetaPriorityPillType.high),
+            ZetaPriorityPill(size: size, rounded: false, type: ZetaPriorityPillType.medium),
+            ZetaPriorityPill(size: size, rounded: false, type: ZetaPriorityPillType.low),
+          ].divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(),
+        ),
+      ],
     );
   }
 }
@@ -99,8 +130,8 @@ class _Badge extends StatelessWidget {
       mainAxisAlignment: MainAxisAlignment.spaceEvenly,
       crossAxisAlignment: CrossAxisAlignment.center,
       children: [
-        ZetaBadge(label: 'Label', status: type, rounded: false),
         ZetaBadge(label: 'Label', status: type),
+        ZetaBadge(label: 'Label', status: type, rounded: false),
       ],
     );
   }
@@ -130,7 +161,8 @@ class _Indicators extends StatelessWidget {
         Column(
           children: [
             Text(
-              'ZetaIndicator.icon',
+              'ZetaIndicator\nicon',
+              textAlign: TextAlign.center,
               style: TextStyle(fontWeight: FontWeight.bold),
             ),
             const SizedBox(height: 15),
@@ -164,7 +196,11 @@ class _Indicators extends StatelessWidget {
         const SizedBox.square(dimension: ZetaSpacing.xl),
         Column(
           children: [
-            Text('ZetaIndicator.notification', style: TextStyle(fontWeight: FontWeight.bold)),
+            Text(
+              'ZetaIndicator\nnotification',
+              textAlign: TextAlign.center,
+              style: TextStyle(fontWeight: FontWeight.bold),
+            ),
             const SizedBox(height: 15),
             Row(
               mainAxisSize: MainAxisSize.min,
@@ -216,50 +252,3 @@ class _Tags extends StatelessWidget {
     );
   }
 }
-
-class _WorkcloudIndicators extends StatelessWidget {
-  const _WorkcloudIndicators();
-
-  Widget workcloudIndicatorExampleRow(ZetaWorkcloudIndicatorType type) {
-    return Row(
-      mainAxisAlignment: MainAxisAlignment.spaceBetween,
-      children: [
-        ZetaWorkcloudIndicator(
-          priorityType: type,
-          prioritySize: ZetaWidgetSize.large,
-          icon: ZetaIcons.star_half_round,
-          label: 'Label',
-        ),
-        ZetaWorkcloudIndicator(
-          prioritySize: ZetaWidgetSize.medium,
-          index: '14',
-          priorityType: type,
-          label: 'Label!',
-        ),
-        ZetaWorkcloudIndicator(
-          priorityType: type,
-        ),
-      ],
-    );
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return Column(
-      children: [
-        SizedBox(height: 30),
-        Column(
-          children: [
-            Row(
-              mainAxisAlignment: MainAxisAlignment.spaceBetween,
-              children: [Text('Medium'), Text('Small'), Text('X-Small')],
-            ),
-            ...List.generate(10, (index) {
-              return workcloudIndicatorExampleRow(ZetaWorkcloudIndicatorType.values[index]);
-            }),
-          ].divide(const SizedBox.square(dimension: ZetaSpacing.s)).toList(),
-        ).paddingAll(ZetaSpacing.m)
-      ],
-    );
-  }
-}
diff --git a/example/test/priority_pill_test.dart b/example/test/priority_pill_test.dart
@@ -9,7 +9,7 @@ void main() {
       TestWidget(
         widget: ZetaPriorityPill(
           priority: 'High',
-          index: 2,
+          index: '2',
         ),
       ),
     );

diff --git a/example/test/workcloud_indicator_test.dart b/example/test/workcloud_indicator_test.dart
diff --git a/example/widgetbook/main.dart b/example/widgetbook/main.dart
@@ -79,8 +79,6 @@ class HotReload extends StatelessWidget {
                 WidgetbookUseCase(name: 'Badge', builder: (context) => badgeUseCase(context)),
                 WidgetbookUseCase(name: 'Indicators', builder: (context) => indicatorsUseCase(context)),
                 WidgetbookUseCase(name: 'Tags', builder: (context) => tagsUseCase(context)),
-                WidgetbookUseCase(
-                    name: 'Workcloud Indicators', builder: (context) => workcloudIndicatorsUseCase(context)),
               ],
             ),
             WidgetbookUseCase(name: 'Avatar', builder: (context) => avatarUseCase(context)),

diff --git a/example/widgetbook/pages/components/badges_widgetbook.dart b/example/widgetbook/pages/components/badges_widgetbook.dart
@@ -9,35 +9,55 @@ Widget statusLabelUseCase(BuildContext context) {
   final bool rounded = roundedKnob(context);
 
   return WidgetbookTestWidget(
-    widget: ZetaStatusLabel(
-      label: context.knobs.string(label: 'Label', initialValue: 'Label'),
-      rounded: rounded,
-      status: context.knobs.list(
-        label: 'Status',
-        labelBuilder: enumLabelBuilder,
-        options: ZetaWidgetStatus.values,
+    widget: Padding(
+      padding: const EdgeInsets.all(ZetaSpacing.m),
+      child: ZetaStatusLabel(
+        label: context.knobs.string(label: 'Label', initialValue: 'Label'),
+        rounded: rounded,
+        status: context.knobs.list(
+          label: 'Status',
+          labelBuilder: enumLabelBuilder,
+          options: ZetaWidgetStatus.values,
+        ),
+        customIcon: iconKnob(context, rounded: rounded),
       ),
-      customIcon: iconKnob(context, rounded: rounded),
     ),
   );
 }
 
 Widget priorityPillUseCase(BuildContext context) => WidgetbookTestWidget(
-      widget: ZetaPriorityPill(
-        index: context.knobs.int.slider(label: 'Index'),
-        priority: context.knobs.string(label: 'Priority', initialValue: 'Priority'),
-        rounded: roundedKnob(context),
+      widget: Padding(
+        padding: const EdgeInsets.all(ZetaSpacing.m),
+        child: ZetaPriorityPill(
+          index: context.knobs.string(label: 'Index'),
+          priority: context.knobs.string(label: 'Label'),
+          size: context.knobs.list<ZetaPriorityPillSize>(
+            label: 'Size',
+            options: ZetaPriorityPillSize.values,
+            labelBuilder: (value) => value.name.capitalize(),
+          ),
+          type: context.knobs.list<ZetaPriorityPillType>(
+            label: 'Priority',
+            options: ZetaPriorityPillType.values,
+            labelBuilder: (value) => value.name.capitalize(),
+          ),
+          rounded: context.knobs.boolean(label: 'Rounded', initialValue: true),
+          isBadge: context.knobs.boolean(label: 'Badge'),
+        ),
       ),
     );
 
 Widget badgeUseCase(BuildContext context) => WidgetbookTestWidget(
-      widget: ZetaBadge(
-        label: context.knobs.string(label: 'Label', initialValue: 'Label'),
-        rounded: roundedKnob(context),
-        status: context.knobs.list(
-          label: 'Status',
-          options: ZetaWidgetStatus.values,
-          labelBuilder: enumLabelBuilder,
+      widget: Padding(
+        padding: const EdgeInsets.all(ZetaSpacing.m),
+        child: ZetaBadge(
+          label: context.knobs.string(label: 'Label', initialValue: 'Label'),
+          rounded: roundedKnob(context),
+          status: context.knobs.list(
+            label: 'Status',
+            options: ZetaWidgetStatus.values,
+            labelBuilder: enumLabelBuilder,
+          ),
         ),
       ),
     );
@@ -46,59 +66,43 @@ Widget indicatorsUseCase(BuildContext context) {
   final bool rounded = roundedKnob(context);
 
   return WidgetbookTestWidget(
-    widget: ZetaIndicator(
-      type: context.knobs.list(
-        label: 'Type',
-        options: ZetaIndicatorType.values,
-        labelBuilder: enumLabelBuilder,
-      ),
-      icon: iconKnob(context, rounded: rounded),
-      inverse: context.knobs.boolean(label: 'Inverse Border'),
-      size: context.knobs.list(
-        label: 'Size',
-        labelBuilder: enumLabelBuilder,
-        options: ZetaWidgetSize.values,
+    widget: Padding(
+      padding: const EdgeInsets.all(ZetaSpacing.m),
+      child: ZetaIndicator(
+        type: context.knobs.list(
+          label: 'Type',
+          options: ZetaIndicatorType.values,
+          labelBuilder: enumLabelBuilder,
+        ),
+        icon: iconKnob(context, rounded: rounded),
+        inverse: context.knobs.boolean(label: 'Inverse Border'),
+        size: context.knobs.list(
+          label: 'Size',
+          labelBuilder: enumLabelBuilder,
+          options: ZetaWidgetSize.values,
+        ),
+        value: context.knobs.int.slider(label: 'Value'),
       ),
-      value: context.knobs.int.slider(label: 'Value'),
     ),
   );
 }
 
 Widget tagsUseCase(BuildContext context) => WidgetbookTestWidget(
-      widget: Row(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          ZetaTag(
-            label: context.knobs.string(label: 'Label', initialValue: 'Tag'),
-            rounded: roundedKnob(context),
-            direction: context.knobs.list(
-              label: 'Direction',
-              options: ZetaTagDirection.values,
-              labelBuilder: enumLabelBuilder,
+      widget: Padding(
+        padding: const EdgeInsets.all(ZetaSpacing.m),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            ZetaTag(
+              label: context.knobs.string(label: 'Label', initialValue: 'Tag'),
+              rounded: roundedKnob(context),
+              direction: context.knobs.list(
+                label: 'Direction',
+                options: ZetaTagDirection.values,
+                labelBuilder: enumLabelBuilder,
+              ),
             ),
-          ),
-        ],
+          ],
+        ),
       ),
     );
-
-Widget workcloudIndicatorsUseCase(BuildContext context) {
-  final bool rounded = roundedKnob(context);
-
-  return WidgetbookTestWidget(
-    widget: ZetaWorkcloudIndicator(
-      index: context.knobs.string(label: 'Index', initialValue: '1'),
-      label: context.knobs.string(label: 'Label', initialValue: 'Label'),
-      prioritySize: context.knobs.list(
-        label: 'Size',
-        labelBuilder: enumLabelBuilder,
-        options: ZetaWidgetSize.values,
-      ),
-      priorityType: context.knobs.list(
-        label: 'Type',
-        labelBuilder: enumLabelBuilder,
-        options: ZetaWorkcloudIndicatorType.values,
-      ),
-      icon: iconKnob(context, rounded: rounded, nullable: true),
-    ),
-  );
-}
diff --git a/lib/src/components/badges/badge.dart b/lib/src/components/badges/badge.dart
@@ -36,7 +36,7 @@ class ZetaBadge extends StatelessWidget {
       padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.x1, vertical: ZetaSpacing.x0_5),
       decoration: BoxDecoration(
         color: backgroundColor,
-        borderRadius: rounded ? ZetaRadius.minimal : ZetaRadius.minimal,
+        borderRadius: rounded ? ZetaRadius.minimal : ZetaRadius.none,
       ),
       child: Text(
         label,