From 0a881b580f1f52402ae15b55cc72b8c26027254b Mon Sep 17 00:00:00 2001 From: atanasyordanov21 <63714308+atanasyordanov21@users.noreply.github.com> Date: Tue, 30 Apr 2024 19:15:41 +0300 Subject: [PATCH] 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 * 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 Co-authored-by: github-actions * [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 Co-authored-by: github-actions * fix(main): ListItem disabled color (#8) * fix(main): ListItem disabled color * [automated commit] lint format and import sort --------- Co-authored-by: github-actions * 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 Co-authored-by: github-actions * 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 * feat(main): Tabs (#11) * feat(main): Tabs * [automated commit] lint format and import sort --------- Co-authored-by: github-actions * 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 Co-authored-by: ahmed-osman3 <99483750+ahmed-osman3@users.noreply.github.com> Co-authored-by: Osman Co-authored-by: github-actions Co-authored-by: Luke Walton Co-authored-by: Simeon Dimitrov Co-authored-by: sd-athlon <163880004+sd-athlon@users.noreply.github.com> * 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 Co-authored-by: github-actions * [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 Co-authored-by: github-actions * fix(main): ListItem disabled color (#8) * fix(main): ListItem disabled color * [automated commit] lint format and import sort --------- Co-authored-by: github-actions * 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 Co-authored-by: github-actions * 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 * feat(main): Tabs (#11) * feat(main): Tabs * [automated commit] lint format and import sort --------- Co-authored-by: github-actions * 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 Co-authored-by: ahmed-osman3 <99483750+ahmed-osman3@users.noreply.github.com> Co-authored-by: Osman Co-authored-by: github-actions Co-authored-by: Luke Walton Co-authored-by: Simeon Dimitrov 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 Co-authored-by: github-actions * [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 Co-authored-by: github-actions * fix(main): ListItem disabled color (#8) * fix(main): ListItem disabled color * [automated commit] lint format and import sort --------- Co-authored-by: github-actions * 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 Co-authored-by: github-actions * 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 * feat(main): Tabs (#11) * feat(main): Tabs * [automated commit] lint format and import sort --------- Co-authored-by: github-actions * 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 Co-authored-by: ahmed-osman3 <99483750+ahmed-osman3@users.noreply.github.com> Co-authored-by: Osman Co-authored-by: github-actions Co-authored-by: Luke Walton Co-authored-by: Simeon Dimitrov 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 Co-authored-by: github-actions * [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 Co-authored-by: github-actions * fix(main): ListItem disabled color (#8) * fix(main): ListItem disabled color * [automated commit] lint format and import sort --------- Co-authored-by: github-actions * 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 Co-authored-by: github-actions * 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 * feat(main): Tabs (#11) * feat(main): Tabs * [automated commit] lint format and import sort --------- Co-authored-by: github-actions * 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 Co-authored-by: ahmed-osman3 <99483750+ahmed-osman3@users.noreply.github.com> Co-authored-by: Osman Co-authored-by: github-actions Co-authored-by: Luke Walton Co-authored-by: Simeon Dimitrov Co-authored-by: sd-athlon <163880004+sd-athlon@users.noreply.github.com> * 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 * 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 * 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 Co-authored-by: github-actions * [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 Co-authored-by: github-actions * fix(main): ListItem disabled color (#8) * fix(main): ListItem disabled color * [automated commit] lint format and import sort --------- Co-authored-by: github-actions * 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 Co-authored-by: github-actions * 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 * feat(main): Tabs (#11) * feat(main): Tabs * [automated commit] lint format and import sort --------- Co-authored-by: github-actions * 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 Co-authored-by: ahmed-osman3 <99483750+ahmed-osman3@users.noreply.github.com> Co-authored-by: Osman Co-authored-by: github-actions Co-authored-by: Luke Walton Co-authored-by: Simeon Dimitrov Co-authored-by: sd-athlon <163880004+sd-athlon@users.noreply.github.com> * 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 * 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 Co-authored-by: github-actions * [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 Co-authored-by: github-actions * fix(main): ListItem disabled color (#8) * fix(main): ListItem disabled color * [automated commit] lint format and import sort --------- Co-authored-by: github-actions * 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 Co-authored-by: github-actions * 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 * feat(main): Tabs (#11) * feat(main): Tabs * [automated commit] lint format and import sort --------- Co-authored-by: github-actions * 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 Co-authored-by: ahmed-osman3 <99483750+ahmed-osman3@users.noreply.github.com> Co-authored-by: Osman Co-authored-by: github-actions Co-authored-by: Luke Walton Co-authored-by: Simeon Dimitrov Co-authored-by: sd-athlon <163880004+sd-athlon@users.noreply.github.com> * 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 Co-authored-by: github-actions Co-authored-by: ahmed-osman3 <99483750+ahmed-osman3@users.noreply.github.com> Co-authored-by: Osman Co-authored-by: Luke Walton Co-authored-by: Simeon Dimitrov Co-authored-by: sd-athlon <163880004+sd-athlon@users.noreply.github.com> --- .../lib/pages/components/badges_example.dart | 105 +++++------ example/test/priority_pill_test.dart | 2 +- example/test/workcloud_indicator_test.dart | 15 -- example/widgetbook/main.dart | 2 - .../pages/components/badges_widgetbook.dart | 136 ++++++++------- lib/src/components/badges/badge.dart | 2 +- lib/src/components/badges/priority_pill.dart | 124 ++++++++++--- lib/src/components/badges/status_label.dart | 2 +- .../badges/workcloud_indicator.dart | 164 ------------------ lib/src/utils/enums.dart | 2 +- lib/zeta_flutter.dart | 1 - 11 files changed, 224 insertions(+), 331 deletions(-) delete mode 100644 example/test/workcloud_indicator_test.dart delete mode 100644 lib/src/components/badges/workcloud_indicator.dart diff --git a/example/lib/pages/components/badges_example.dart b/example/lib/pages/components/badges_example.dart index 76d28534..839d6e1f 100644 --- 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 index b2bd6557..6c24544a 100644 --- 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 deleted file mode 100644 index 5d7ee833..00000000 --- a/example/test/workcloud_indicator_test.dart +++ /dev/null @@ -1,15 +0,0 @@ -import 'package:flutter_test/flutter_test.dart'; -import 'package:zeta_flutter/zeta_flutter.dart'; - -import 'test_components.dart'; - -void main() { - testWidgets('ZetaWorkcloud creates priority pill', (WidgetTester tester) async { - await tester.pumpWidget( - TestWidget( - widget: ZetaWorkcloudIndicator(index: '1'), - ), - ); - expect(find.text('1'), findsOneWidget); - }); -} diff --git a/example/widgetbook/main.dart b/example/widgetbook/main.dart index 3b53bea0..1f9b73d1 100644 --- 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 index 4b17f1bd..3585d9d1 100644 --- 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( + label: 'Size', + options: ZetaPriorityPillSize.values, + labelBuilder: (value) => value.name.capitalize(), + ), + type: context.knobs.list( + 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 index b4fa87d8..f32419b5 100644 --- 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, diff --git a/lib/src/components/badges/priority_pill.dart b/lib/src/components/badges/priority_pill.dart index 8e027667..6d5974af 100644 --- a/lib/src/components/badges/priority_pill.dart +++ b/lib/src/components/badges/priority_pill.dart @@ -3,15 +3,58 @@ import 'package:flutter/material.dart'; import '../../../zeta_flutter.dart'; -///Zeta Priority Pill. +/// The type of [ZetaPriorityPill]. +enum ZetaPriorityPillType { + /// sets the color to a shade of red + urgent, + + /// sets the color to a shade of orange + high, + + /// sets the color to a shade of blue + medium, + + /// sets the color to a shade of green + low, +} + +/// The size of [ZetaPriorityPill]. +enum ZetaPriorityPillSize { + /// large + large, + + /// small + small, +} + +extension on ZetaPriorityPillType { + ZetaColorSwatch color(BuildContext context) { + final colors = Zeta.of(context).colors; + switch (this) { + case ZetaPriorityPillType.urgent: + return colors.red; + case ZetaPriorityPillType.high: + return colors.orange; + case ZetaPriorityPillType.medium: + return colors.blue; + case ZetaPriorityPillType.low: + return colors.green; + } + } +} + +/// Zeta Priority Pill. /// /// This badge is used to indicate the order of importance. class ZetaPriorityPill extends StatelessWidget { ///Constructs [ZetaPriorityPill] const ZetaPriorityPill({ - required this.index, - required this.priority, + this.index, + this.priority, this.rounded = true, + this.isBadge = false, + this.type = ZetaPriorityPillType.urgent, + this.size = ZetaPriorityPillSize.large, super.key, }); @@ -19,43 +62,79 @@ class ZetaPriorityPill extends StatelessWidget { final bool rounded; /// Leading number in component. - final int index; + final String? index; /// Text in main part of component. - final String priority; + final String? priority; + + /// Indicates if it is badge or lozenge. + /// + /// Default is `false` (lozenge). + final bool isBadge; + + /// The type of [ZetaPriorityPill]. + /// + /// Default is 'ZetaPriorityPillType.urgent' + final ZetaPriorityPillType type; + + /// The size of [ZetaPriorityPill]. + /// + /// Default is `ZetaWidgetSize.large`. + final ZetaPriorityPillSize size; @override Widget build(BuildContext context) { - final theme = Zeta.of(context); - final backgroundColor = theme.colors.primary; - final Color foregroundColor = backgroundColor.onColor; + final color = type.color(context); + final size = this.size == ZetaPriorityPillSize.small ? ZetaSpacing.x5 : ZetaSpacing.x7; return DecoratedBox( decoration: BoxDecoration( borderRadius: rounded ? ZetaRadius.full : ZetaRadius.none, - color: backgroundColor.shade10, + color: color.shade10, ), child: Row( mainAxisSize: MainAxisSize.min, children: [ Container( alignment: Alignment.center, - height: ZetaSpacing.x7, - width: ZetaSpacing.x7, + height: size, + width: size, decoration: BoxDecoration( shape: rounded ? BoxShape.circle : BoxShape.rectangle, - color: backgroundColor, + color: color, ), - child: Text(index.formatMaxChars(), style: ZetaTextStyles.bodySmall.apply(color: foregroundColor)), - ), - Padding( - padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.x2, vertical: ZetaSpacing.x1), child: Text( - priority, - style: ZetaTextStyles.bodySmall, - overflow: TextOverflow.ellipsis, + (index?.isEmpty ?? true) + ? (type == ZetaPriorityPillType.urgent + ? type.name.substring(0, 1).capitalize() + : type.index.toString()) + : index!.substring(0, 1).capitalize(), + style: this.size == ZetaPriorityPillSize.small + ? ZetaTextStyles.labelSmall.copyWith( + fontSize: 11, + height: 1.1, + color: color.onColor, + ) + : ZetaTextStyles.labelMedium.apply(color: color.onColor), ), ), + if (!isBadge) + Padding( + padding: const EdgeInsets.symmetric( + horizontal: ZetaSpacing.x2, + vertical: ZetaSpacing.x1, + ), + child: Text( + (priority?.isEmpty ?? true) ? type.name.capitalize() : priority!, + style: this.size == ZetaPriorityPillSize.small + ? ZetaTextStyles.bodyXSmall.copyWith( + fontSize: 11, + height: 1.1, + ) + : ZetaTextStyles.bodySmall, + overflow: TextOverflow.ellipsis, + ), + ), ], ), ); @@ -65,8 +144,11 @@ class ZetaPriorityPill extends StatelessWidget { void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties - ..add(IntProperty('index', index)) + ..add(StringProperty('index', index)) ..add(StringProperty('priority', priority)) - ..add(DiagnosticsProperty('rounded', rounded)); + ..add(DiagnosticsProperty('rounded', rounded)) + ..add(DiagnosticsProperty('isBadge', isBadge)) + ..add(EnumProperty('type', type)) + ..add(EnumProperty('size', size)); } } diff --git a/lib/src/components/badges/status_label.dart b/lib/src/components/badges/status_label.dart index acb035d5..a31837c7 100644 --- a/lib/src/components/badges/status_label.dart +++ b/lib/src/components/badges/status_label.dart @@ -36,7 +36,7 @@ class ZetaStatusLabel extends StatelessWidget { decoration: BoxDecoration( color: colors.shade10, border: Border.all(color: colors.border), - borderRadius: rounded ? ZetaRadius.full : ZetaRadius.minimal, + borderRadius: rounded ? ZetaRadius.full : ZetaRadius.none, ), child: Padding( padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.x2, vertical: ZetaSpacing.x0_5), diff --git a/lib/src/components/badges/workcloud_indicator.dart b/lib/src/components/badges/workcloud_indicator.dart deleted file mode 100644 index c1efefde..00000000 --- a/lib/src/components/badges/workcloud_indicator.dart +++ /dev/null @@ -1,164 +0,0 @@ -import 'package:flutter/foundation.dart'; -import 'package:flutter/material.dart'; - -import '../../../zeta_flutter.dart'; - -///Indicator Type -enum ZetaWorkcloudIndicatorType { - /// Red. - one, - - /// Orange - two, - - /// Blue. - three, - - /// Green. - four, - - /// Purple. - five, - - /// Pink. - six, - - /// Yellow. - seven, - - /// Teal - eight, - - /// Cool grey. - nine, - - /// Warn grey. - ten, -} - -extension on ZetaWorkcloudIndicatorType { - ZetaColorSwatch color(BuildContext context) { - final colors = Zeta.of(context).colors; - switch (this) { - case ZetaWorkcloudIndicatorType.one: - return colors.red; - case ZetaWorkcloudIndicatorType.two: - return colors.orange; - case ZetaWorkcloudIndicatorType.three: - return colors.blue; - case ZetaWorkcloudIndicatorType.four: - return colors.green; - case ZetaWorkcloudIndicatorType.five: - return colors.purple; - case ZetaWorkcloudIndicatorType.six: - return colors.pink; - case ZetaWorkcloudIndicatorType.seven: - return colors.yellow; - case ZetaWorkcloudIndicatorType.eight: - return colors.teal; - case ZetaWorkcloudIndicatorType.nine: - return colors.cool; - case ZetaWorkcloudIndicatorType.ten: - return colors.warm; - } - } -} - -/// Zeta Workcloud Indicator. -/// -/// There are 10 available levels in which ether the values 1 through 10 can be used, -/// or icons can be passed. -class ZetaWorkcloudIndicator extends StatelessWidget { - ///Constructs [ZetaWorkcloudIndicator] - const ZetaWorkcloudIndicator({ - super.key, - this.priorityType = ZetaWorkcloudIndicatorType.one, - this.prioritySize = ZetaWidgetSize.small, - this.label, - this.index, - this.icon, - }); - - /// The type of priority. - final ZetaWorkcloudIndicatorType priorityType; - - /// The size of Priority Pill. - /// - /// Defaults to 'small'. - final ZetaWidgetSize prioritySize; - - /// Text label. Not shown when [prioritySize] is [ZetaWidgetSize.small] - final String? label; - - /// Index value. Typically a number. - /// - /// If null, and no icon is provided, the index will match the [priorityType]. - /// - /// It is recommended to not exceed 2 characters here. - final String? index; - - /// Custom icon. If not null, this will replace the index text. - final IconData? icon; - - @override - Widget build(BuildContext context) { - final ZetaColorSwatch color = priorityType.color(context); - final textStyle = prioritySize == ZetaWidgetSize.large ? ZetaTextStyles.bodySmall : ZetaTextStyles.bodyXSmall; - - return DecoratedBox( - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(ZetaSpacing.l), - color: color.shade20, - ), - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - SizedBox.square( - dimension: prioritySize == ZetaWidgetSize.large ? ZetaSpacing.x6 : ZetaSpacing.x5, - child: Container( - alignment: Alignment.center, - decoration: BoxDecoration( - shape: BoxShape.circle, - color: priorityType == ZetaWorkcloudIndicatorType.nine ? color.shade80 : color, - ), - child: Center( - child: icon != null - ? Icon( - icon, - size: prioritySize == ZetaWidgetSize.large ? ZetaSpacing.x4 : ZetaSpacing.x3_5, - color: color.onColor, - ) - : Text( - index ?? (priorityType.index + 1).toString(), - style: textStyle.apply(color: color.onColor), - textAlign: TextAlign.center, - ), - ), - ), - ), - if (prioritySize != ZetaWidgetSize.small) - Container( - constraints: const BoxConstraints(minWidth: ZetaSpacing.x9), - padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.xs), - child: Text(label ?? '', style: textStyle, overflow: TextOverflow.ellipsis), - ), - ], - ), - ); - } - - @override - void debugFillProperties(DiagnosticPropertiesBuilder properties) { - super.debugFillProperties(properties); - properties - ..add( - EnumProperty('priorityType', priorityType), - ) - ..add( - EnumProperty('prioritySize', prioritySize), - ) - ..add(StringProperty('label', label)) - ..add(StringProperty('index', index)) - ..add(DiagnosticsProperty('icon', icon)); - } -} diff --git a/lib/src/utils/enums.dart b/lib/src/utils/enums.dart index 787a4f24..1597c56f 100644 --- a/lib/src/utils/enums.dart +++ b/lib/src/utils/enums.dart @@ -12,7 +12,7 @@ enum ZetaWidgetBorder { full, } -/// Size options for [ZetaIndicator], [ZetaWorkcloudIndicator], [ZetaButton], [ZetaPasswordInput]. +/// Size options for [ZetaIndicator], [ZetaButton], [ZetaPasswordInput]. enum ZetaWidgetSize { /// large large, diff --git a/lib/zeta_flutter.dart b/lib/zeta_flutter.dart index 70b9e30c..612034ee 100644 --- a/lib/zeta_flutter.dart +++ b/lib/zeta_flutter.dart @@ -10,7 +10,6 @@ export 'src/components/badges/indicator.dart'; export 'src/components/badges/priority_pill.dart'; export 'src/components/badges/status_label.dart'; export 'src/components/badges/tag.dart'; -export 'src/components/badges/workcloud_indicator.dart'; export 'src/components/banners/in_page_banner.dart'; export 'src/components/banners/system_banner.dart'; export 'src/components/bottom sheets/bottom_sheet.dart';