From 0d23f7cbb9fdbb6114b47837b99b83829e74c79a Mon Sep 17 00:00:00 2001 From: Luke Walton Date: Fri, 8 Mar 2024 12:19:08 +0000 Subject: [PATCH] fix: Widgetbook icons and reusable snippets (#35) Co-authored-by: github-actions --- .github/workflows/on-main.yml | 47 +++++ .github/workflows/on-release.yml | 3 - .github/workflows/pull-request.yml | 3 - .github/workflows/release-please.yml | 17 -- example/lib/home.dart | 8 +- .../lib/pages/components/button_example.dart | 57 +++-- .../pages/components/progress_example.dart | 16 +- example/lib/pages/theme/radius_example.dart | 76 +++++++ example/lib/pages/theme/spacing_example.dart | 133 ++++++++++++ .../lib/pages/theme/typography_example.dart | 133 ++++-------- example/lib/widgets.dart | 90 -------- example/pubspec.yaml | 1 - example/widgetbook/main.dart | 13 +- .../pages/assets/icon_widgetbook.dart | 2 +- .../components/accordion_widgetbook.dart | 5 +- .../pages/components/badges_widgetbook.dart | 157 ++++++-------- .../pages/components/banner_widgetbook.dart | 80 +++---- .../components/bottom_sheet_widgetbook.dart | 40 ++-- .../pages/components/button_widgetbook.dart | 196 +++++++----------- .../pages/components/checkbox_widgetbook.dart | 56 ++--- .../pages/components/chip_widgetbook.dart | 34 +-- .../pages/components/dial_pad_widgetbook.dart | 41 ++-- .../components/in_page_banner_widgetbook.dart | 24 +-- .../components/navigation_bar_widgetbook.dart | 3 +- .../components/password_input_widgetbook.dart | 27 +-- .../pages/components/progress_widgetbook.dart | 38 ++-- .../pages/theme/typography_widgetbook.dart | 29 +-- example/widgetbook/utils/utils.dart | 38 ++++ lib/src/components/badges/indicator.dart | 13 +- .../components/banners/in_page_banner.dart | 2 +- lib/src/components/buttons/button_group.dart | 138 ++++++------ lib/src/components/buttons/button_style.dart | 15 +- lib/src/components/dial_pad/dial_pad.dart | 56 ++--- lib/src/components/progress/progress.dart | 4 +- lib/src/components/progress/progress_bar.dart | 22 +- .../components/progress/progress_circle.dart | 5 +- lib/src/utils/utils.dart | 2 + lib/zeta_flutter.dart | 1 + 38 files changed, 818 insertions(+), 807 deletions(-) create mode 100644 .github/workflows/on-main.yml delete mode 100644 .github/workflows/release-please.yml create mode 100644 example/lib/pages/theme/radius_example.dart create mode 100644 example/lib/pages/theme/spacing_example.dart create mode 100644 example/widgetbook/utils/utils.dart diff --git a/.github/workflows/on-main.yml b/.github/workflows/on-main.yml new file mode 100644 index 00000000..615b41fb --- /dev/null +++ b/.github/workflows/on-main.yml @@ -0,0 +1,47 @@ +name: release-please +on: + push: + branches: + - main + +permissions: + contents: write + pull-requests: write + +jobs: + release-please: + runs-on: ubuntu-latest + steps: + - uses: google-github-actions/release-please-action@v4 + with: + token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} + code-quality: + runs-on: ubuntu-latest + timeout-minutes: 20 + steps: + - uses: actions/checkout@v4 + with: + token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} + - name: Get branch name + id: branch-name + uses: tj-actions/branch-names@v7.0.7 + - uses: subosito/flutter-action@v2 + - name: Setup flutter + run: flutter pub get + - name: Lint and format + run: | + dart format . -l 120 + dart fix --apply + flutter analyze + cd example && flutter test + - name: Check for modified files + id: git-check + run: echo "modified=$(if [ -n "$(git status --porcelain)" ]; then echo "true"; else echo "false"; fi)" >> $GITHUB_ENV + - name: Update changes in GitHub repository + if: env.modified == 'true' + run: | + git config --global user.name "github-actions" + git config --global user.email "github-actions@github.com" + git add -A + git commit -m '[automated commit] lint format and import sort' + git push -f diff --git a/.github/workflows/on-release.yml b/.github/workflows/on-release.yml index fa3879e3..79b678a9 100644 --- a/.github/workflows/on-release.yml +++ b/.github/workflows/on-release.yml @@ -15,9 +15,6 @@ jobs: - uses: dart-lang/setup-dart@v1 - name: Install Flutter uses: subosito/flutter-action@v2 - with: - flutter-version: "3.16.x" - channel: "stable" - name: Install dependencies run: flutter pub get - name: Format code diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml index 68f50255..31513970 100644 --- a/.github/workflows/pull-request.yml +++ b/.github/workflows/pull-request.yml @@ -59,9 +59,6 @@ jobs: id: branch-name uses: tj-actions/branch-names@v7.0.7 - uses: subosito/flutter-action@v2 - with: - flutter-version: "3.19.x" - channel: "stable" - name: Setup flutter run: flutter pub get - name: Lint and format diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml deleted file mode 100644 index 197446e0..00000000 --- a/.github/workflows/release-please.yml +++ /dev/null @@ -1,17 +0,0 @@ -name: release-please -on: - push: - branches: - - main - -permissions: - contents: write - pull-requests: write - -jobs: - release-please: - runs-on: ubuntu-latest - steps: - - uses: google-github-actions/release-please-action@v4 - with: - token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} diff --git a/example/lib/home.dart b/example/lib/home.dart index 34446d63..da7d414b 100644 --- a/example/lib/home.dart +++ b/example/lib/home.dart @@ -14,6 +14,9 @@ import 'package:zeta_example/pages/theme/color_example.dart'; import 'package:zeta_example/pages/components/password_input_example.dart'; import 'package:zeta_example/pages/components/progress_example.dart'; import 'package:zeta_example/pages/assets/icons_example.dart'; +import 'package:zeta_example/pages/theme/radius_example.dart'; +import 'package:zeta_example/pages/theme/spacing_example.dart'; +import 'package:zeta_example/pages/theme/typography_example.dart'; import 'package:zeta_example/widgets.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; @@ -41,6 +44,9 @@ final List components = [ final List theme = [ Component(ColorExample.name, (context) => const ColorExample()), + Component(TypographyExample.name, (context) => const TypographyExample()), + Component(RadiusExample.name, (context) => const RadiusExample()), + Component(SpacingExample.name, (context) => const SpacingExample()), ]; final List assets = [ Component(IconsExample.name, (context) => const IconsExample()), @@ -77,7 +83,7 @@ final GoRouter router = GoRouter( )) .toList(), ), - ) + ), ], ), ], diff --git a/example/lib/pages/components/button_example.dart b/example/lib/pages/components/button_example.dart index 4728b39f..151478d5 100644 --- a/example/lib/pages/components/button_example.dart +++ b/example/lib/pages/components/button_example.dart @@ -111,16 +111,10 @@ class _ButtonExampleState extends State { Column( children: groupButtons(ZetaWidgetBorder.rounded), ), - Text('Floating Action Buttons', - style: ZetaTextStyles.displayMedium), - Text('Tap buttons to change current FAB: ', - style: ZetaTextStyles.bodyMedium), - Wrap( - children: - fabs.divide(SizedBox.square(dimension: 10)).toList()), - ] - .divide(const SizedBox.square(dimension: ZetaSpacing.m)) - .toList(), + Text('Floating Action Buttons', style: ZetaTextStyles.displayMedium), + Text('Tap buttons to change current FAB: ', style: ZetaTextStyles.bodyMedium), + Wrap(children: fabs.divide(SizedBox.square(dimension: 10)).toList()), + ].divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(), ), ), Expanded(child: const SizedBox()), @@ -178,43 +172,42 @@ class _ButtonExampleState extends State { List groupButtons(ZetaWidgetBorder) { return [ - ZetaButtonGroup( - isLarge: true, - rounded: true, - buttons: [ - GroupButton( + ZetaButtonGroup(isLarge: true, rounded: true, buttons: [ + ZetaGroupButton( + onPressed: () {}, label: "Label", ), - GroupButton( + ZetaGroupButton( + onPressed: () {}, label: "Label", ), ]), - ZetaButtonGroup( - isLarge: true, - rounded: true, - buttons: [ - GroupButton( + ZetaButtonGroup(isLarge: true, rounded: true, buttons: [ + ZetaGroupButton( + onPressed: () {}, label: "Label", ), - GroupButton.dropdown( + ZetaGroupButton.dropdown( onPressed: () {}, label: "Label", + dropdown: SizedBox(height: 100, width: 100), ), ]), ZetaButtonGroup( - isLarge: true, - rounded: true, + isLarge: true, + rounded: true, buttons: [ - GroupButton.icon( + ZetaGroupButton.icon( icon: ZetaIcons.star_round, + onPressed: () {}, label: "Label", ), - GroupButton.dropdown( + ZetaGroupButton.dropdown( onPressed: () {}, label: "Label", + dropdown: SizedBox(height: 100, width: 100), ), - GroupButton.icon( - + ZetaGroupButton.icon( icon: ZetaIcons.star_round, label: "Label", ), @@ -222,19 +215,19 @@ class _ButtonExampleState extends State { ), ZetaButtonGroup( isLarge: true, - rounded: true, + rounded: true, buttons: [ - GroupButton.icon( + ZetaGroupButton.icon( icon: ZetaIcons.star_round, label: "Label", onPressed: () {}, ), - GroupButton.icon( + ZetaGroupButton.icon( icon: ZetaIcons.star_round, label: "Label", onPressed: () {}, ), - GroupButton.icon( + ZetaGroupButton.icon( icon: ZetaIcons.star_round, label: "Label", onPressed: () {}, diff --git a/example/lib/pages/components/progress_example.dart b/example/lib/pages/components/progress_example.dart index 3622cd0d..5bfc6642 100644 --- a/example/lib/pages/components/progress_example.dart +++ b/example/lib/pages/components/progress_example.dart @@ -41,11 +41,7 @@ class ProgressExampleState extends State { SizedBox( height: 20, ), - Wrapper( - stepsCompleted: 0, - type: ZetaProgressBarType.standard, - isThin: false, - stateChangeable: true), + Wrapper(stepsCompleted: 0, type: ZetaProgressBarType.standard, isThin: false, stateChangeable: true), SizedBox( height: 20, ), @@ -118,9 +114,7 @@ class _WrapperState extends State { void setLoading() { setState(() { - type = type == ZetaProgressBarType.buffering - ? ZetaProgressBarType.standard - : ZetaProgressBarType.buffering; + type = type == ZetaProgressBarType.buffering ? ZetaProgressBarType.standard : ZetaProgressBarType.buffering; }); } @@ -150,13 +144,11 @@ class _WrapperState extends State { mainAxisAlignment: MainAxisAlignment.center, children: [ widget.type != ZetaProgressBarType.indeterminate - ? FilledButton( - onPressed: increasePercentage, child: Text("Increase")) + ? FilledButton(onPressed: increasePercentage, child: Text("Increase")) : Container(), const SizedBox(width: 40), widget.stateChangeable! - ? FilledButton( - onPressed: setLoading, child: Text("Start Buffering")) + ? FilledButton(onPressed: setLoading, child: Text("Start Buffering")) : SizedBox.shrink() ], ) diff --git a/example/lib/pages/theme/radius_example.dart b/example/lib/pages/theme/radius_example.dart new file mode 100644 index 00000000..ba1bb92a --- /dev/null +++ b/example/lib/pages/theme/radius_example.dart @@ -0,0 +1,76 @@ +import 'package:flutter/material.dart'; +import 'package:zeta_example/widgets.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +class RadiusExample extends StatelessWidget { + static const String name = 'Radius'; + + const RadiusExample({super.key}); + + @override + Widget build(BuildContext context) { + List radii = [ + ZetaRadius.none, + ZetaRadius.minimal, + ZetaRadius.rounded, + ZetaRadius.wide, + ZetaRadius.full + ]; + final colors = Zeta.of(context).colors; + return ExampleScaffold( + name: name, + child: SingleChildScrollView( + padding: EdgeInsets.all(ZetaSpacing.m), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Column( + children: radii + .map((rad) { + return Container( + width: 250, + height: 100, + decoration: BoxDecoration( + borderRadius: rad, + color: Zeta.of(context).colors.blue.shade30, + border: Border.all(color: colors.blue.shade80, width: 3), + ), + child: Center( + child: Container( + decoration: BoxDecoration( + borderRadius: rad, + color: Zeta.of(context).colors.surfacePrimary, + border: Border.all(color: colors.blue.shade50, width: 3), + ), + padding: EdgeInsets.all(ZetaSpacing.b), + child: Text( + rad.radiusString.split('.').last.capitalize(), + style: ZetaTextStyles.titleMedium.apply( + color: Zeta.of(context).colors.textDefault, + fontStyle: FontStyle.normal, + decoration: TextDecoration.none, + ), + ), + ), + ), + ); + }) + .divide(const SizedBox(height: ZetaSpacing.l)) + .toList(), + ), + ], + ), + ), + ); + } +} + +extension on BorderRadius { + String get radiusString { + if (topLeft.x == 0) return 'ZetaRadius.none'; + if (topLeft.x == 4) return 'ZetaRadius.minimal'; + if (topLeft.x == 8) return 'ZetaRadius.rounded'; + if (topLeft.x == 24) return 'ZetaRadius.wide'; + return 'ZetaRadius.full'; + } +} diff --git a/example/lib/pages/theme/spacing_example.dart b/example/lib/pages/theme/spacing_example.dart new file mode 100644 index 00000000..d21ab5bb --- /dev/null +++ b/example/lib/pages/theme/spacing_example.dart @@ -0,0 +1,133 @@ +import 'package:flutter/material.dart'; +import 'package:path_drawing/path_drawing.dart'; +import 'package:zeta_example/widgets.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +Map namedSpacings = { + 'xxs': ZetaSpacing.xxs, + 'xs': ZetaSpacing.xs, + 's': ZetaSpacing.s, + 'b': ZetaSpacing.b, + 'm': ZetaSpacing.m, + 'l': ZetaSpacing.l, + 'xl': ZetaSpacing.xl, + 'xxl': ZetaSpacing.xxl, + 'xxxl': ZetaSpacing.xxxl, +}; +Map valueSpacings = { + 'x1': ZetaSpacing.x1, + 'x2': ZetaSpacing.x2, + 'x3': ZetaSpacing.x3, + 'x3.5': ZetaSpacing.x3_5, + 'x4': ZetaSpacing.x4, + 'x5': ZetaSpacing.x5, + 'x6': ZetaSpacing.x6, + 'x7': ZetaSpacing.x7, + 'x8': ZetaSpacing.x8, + 'x9': ZetaSpacing.x9, + 'x10': ZetaSpacing.x10, + 'x11': ZetaSpacing.x11, + 'x12': ZetaSpacing.x12, + 'x13': ZetaSpacing.x13, + 'x14': ZetaSpacing.x14, + 'x16': ZetaSpacing.x16, + 'x20': ZetaSpacing.x20, + 'x24': ZetaSpacing.x24, +}; + +class SpacingExample extends StatelessWidget { + const SpacingExample({super.key}); + static const String name = 'Spacing'; + + @override + Widget build(BuildContext context) { + return ExampleScaffold( + name: name, + child: SingleChildScrollView( + child: SingleChildScrollView( + scrollDirection: Axis.horizontal, + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: valueSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(), + ), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: namedSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(), + ) + ], + ), + ), + ), + ); + } +} + +class _SpacingDemo extends StatelessWidget { + final MapEntry size; + + const _SpacingDemo(this.size); + + @override + Widget build(BuildContext context) { + final colors = Zeta.of(context).colors; + return Container( + color: colors.blue.shade30, + margin: EdgeInsets.all(ZetaSpacing.m), + child: CustomPaint( + painter: _TagPainter(color: colors.pink), + child: LayoutBuilder(builder: (context, c2) { + return Container( + margin: EdgeInsets.all(size.value), + padding: EdgeInsets.all(ZetaSpacing.s), + color: colors.surfacePrimary, + child: Text( + 'ZetaSpacing.' + size.key, + style: ZetaTextStyles.titleMedium.apply( + color: Zeta.of(context).colors.textDefault, + fontStyle: FontStyle.normal, + decoration: TextDecoration.none, + ), + ), + ); + }), + ), + ); + } +} + +class _TagPainter extends CustomPainter { + const _TagPainter({ + required this.color, + }); + + final Color color; + + @override + void paint(Canvas canvas, Size size) { + final Paint paint = Paint() + ..color = color + ..style = PaintingStyle.stroke; + + final horizontal = Path() + ..moveTo(0, (size.height / 2)) + ..lineTo(size.width, (size.height / 2)) + ..close(); + + final vertical = Path() + ..moveTo(size.width / 2, 0) + ..lineTo(size.width / 2, size.height) + ..close(); + + canvas.drawPath(dashPath(horizontal, dashArray: CircularIntervalList([2, 3])), paint); + canvas.drawPath( + dashPath(vertical, dashArray: CircularIntervalList([2, 3]), dashOffset: DashOffset.absolute(size.height)), + paint, + ); + } + + @override + bool shouldRepaint(covariant CustomPainter oldDelegate) => false; +} diff --git a/example/lib/pages/theme/typography_example.dart b/example/lib/pages/theme/typography_example.dart index 80e9542b..7e9efcee 100644 --- a/example/lib/pages/theme/typography_example.dart +++ b/example/lib/pages/theme/typography_example.dart @@ -11,102 +11,53 @@ class TypographyExample extends StatelessWidget { @override Widget build(BuildContext context) { - final dedicatedSizes = [ - ExampleModel( - example: Text(exampleText, style: ZetaTextStyles.displayLarge), - code: "Text('...', style: ZetaTextStyles.displayLarge)", - title: 'Display Large', - ), - ExampleModel( - example: Text(exampleText, style: ZetaTextStyles.displayMedium), - code: "Text('...', style: ZetaTextStyles.displayMedium)", - title: 'Display Medium', - ), - ExampleModel( - example: Text(exampleText, style: ZetaTextStyles.displaySmall), - code: "Text('...', style: ZetaTextStyles.displaySmall)", - title: 'Display Small', - ), - ExampleModel( - example: Text(exampleText, style: ZetaTextStyles.heading1), - code: "Text('...', style: ZetaTextStyles.heading1)", - title: 'Heading 1', - ), - ExampleModel( - example: Text(exampleText, style: ZetaTextStyles.heading2), - code: "Text('...', style: ZetaTextStyles.heading2)", - title: 'Heading 2', - ), - ExampleModel( - example: Text(exampleText, style: ZetaTextStyles.heading3), - code: "Text('...', style: ZetaTextStyles.heading3)", - title: 'Heading 3', - ), - ExampleModel( - example: Text(exampleText, style: ZetaTextStyles.titleLarge), - code: "Text('...', style: ZetaTextStyles.titleLarge)", - title: 'Title Large', - ), - ExampleModel( - example: Text(exampleText, style: ZetaTextStyles.titleMedium), - code: "Text('...', style: ZetaTextStyles.titleMedium)", - title: 'Title Medium', - ), - ExampleModel( - example: Text(exampleText, style: ZetaTextStyles.titleSmall), - code: "Text('...', style: ZetaTextStyles.titleSmall)", - title: 'Title Small', - ), - ExampleModel( - example: Text(exampleText, style: ZetaTextStyles.bodyLarge), - code: "Text('...', style: ZetaTextStyles.titleLarge)", - title: 'Body Large', - ), - ExampleModel( - example: Text(exampleText, style: ZetaTextStyles.bodyMedium), - code: "Text('...', style: ZetaTextStyles.titleMedium)", - title: 'Body Medium', - ), - ExampleModel( - example: Text(exampleText, style: ZetaTextStyles.bodySmall), - code: "Text('...', style: ZetaTextStyles.titleSmall)", - title: 'Body Small', - ), - ExampleModel( - example: Text(exampleText, style: ZetaTextStyles.labelLarge), - code: "Text('...', style: ZetaTextStyles.labelLarge)", - title: 'Label Large', - ), - ExampleModel( - example: Text(exampleText, style: ZetaTextStyles.labelMedium), - code: "Text('...', style: ZetaTextStyles.labelMedium)", - title: 'Label Medium', - ), - ExampleModel( - example: Text(exampleText, style: ZetaTextStyles.labelSmall), - code: "Text('...', style: ZetaTextStyles.labelSmall)", - title: 'Label Small', - ), - ExampleModel( - example: Text(exampleText, style: ZetaTextStyles.labelIndicator), - code: "Text('...', style: ZetaTextStyles.labelIndicator)", - title: 'Label Indicator', - ), - ExampleModel( - example: Text(exampleText, style: ZetaTextStyles.labelTiny), - code: "Text('...', style: ZetaTextStyles.labelTiny)", - title: 'Label Tiny', - ), - ]; + final typography = { + 'Display Large': ZetaTextStyles.displayLarge, + 'Display Medium': ZetaTextStyles.displayMedium, + 'Display Small': ZetaTextStyles.displaySmall, + 'Heading 1': ZetaTextStyles.heading1, + 'Heading 2': ZetaTextStyles.heading2, + 'Heading 3': ZetaTextStyles.heading3, + 'Title Large': ZetaTextStyles.titleLarge, + 'Title Medium': ZetaTextStyles.titleMedium, + 'Title Small': ZetaTextStyles.titleSmall, + 'Body Large': ZetaTextStyles.bodyLarge, + 'Body Medium': ZetaTextStyles.bodyMedium, + 'Body Small': ZetaTextStyles.bodySmall, + 'Label Large': ZetaTextStyles.labelLarge, + 'Label Medium': ZetaTextStyles.labelMedium, + 'Label Small': ZetaTextStyles.labelSmall, + 'Label Indicator': ZetaTextStyles.labelIndicator, + 'Label Tiny': ZetaTextStyles.labelTiny, + }; return ExampleScaffold( name: name, child: SingleChildScrollView( - padding: EdgeInsets.all(ZetaSpacing.s), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, + padding: EdgeInsets.all(ZetaSpacing.l), + child: Row( children: [ - ...dedicatedSizes.map(ExampleBuilder.new), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: typography.entries + .map( + (e) => [ + Text(e.key, style: e.value), + const SizedBox(height: ZetaSpacing.xxs), + Text( + 'Font Size: ' + + e.value.fontSize!.toInt().toString() + + ', Line Height: ' + + (e.value.height! * e.value.fontSize!).toInt().toString() + + ', Weight: ' + + e.value.fontWeight!.value.toString(), + style: ZetaTextStyles.bodyMedium, + ), + const SizedBox(height: ZetaSpacing.xl), + ], + ) + .expand((element) => element) + .toList()), ], ), ), diff --git a/example/lib/widgets.dart b/example/lib/widgets.dart index afbe3023..6523f821 100644 --- a/example/lib/widgets.dart +++ b/example/lib/widgets.dart @@ -1,66 +1,9 @@ import 'package:flutter/material.dart'; -import 'package:google_fonts/google_fonts.dart'; import 'package:zeta_example/utils/theme_color_switch.dart'; import 'package:zeta_example/utils/theme_constrast_switch.dart'; import 'package:zeta_example/utils/theme_mode_switch.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; -class ExampleModel { - final Widget example; - final String code; - final String? token; - final String? description; - final Widget? wDescription; - final String? title; - - const ExampleModel({ - required this.example, - required this.code, - this.token, - this.description, - this.wDescription, - this.title, - }); -} - -class ExampleBuilder extends StatelessWidget { - final ExampleModel model; - - const ExampleBuilder(this.model, {super.key}); - - @override - Widget build(BuildContext context) { - return Row( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - if (model.token != null) - Container( - height: 7, - width: 7, - decoration: BoxDecoration(color: Theme.of(context).colorScheme.onSurface, shape: BoxShape.circle), - ).paddingVertical(ZetaSpacing.x9).paddingHorizontal(ZetaSpacing.x4), - if (model.title != null && MediaQuery.of(context).size.width > 767) Expanded(child: Text(model.title!)), - Expanded( - flex: 5, - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - if (model.title != null && MediaQuery.of(context).size.width <= 767) Text(model.title!), - if (model.token != null) CodeExample(code: model.token!), - if (model.description != null) Text(model.description!), - if (model.wDescription != null) model.wDescription!, - model.example, - Container(color: const Color(0xFFF5F5F5)), - CodeExample(code: model.code, fill: true), - ], - ), - ), - const SizedBox(height: 7, width: 7).paddingVertical(ZetaSpacing.x9).paddingHorizontal(ZetaSpacing.x4), - ], - ); - } -} - class ExampleScaffold extends StatelessWidget { final String name; final Widget child; @@ -107,36 +50,3 @@ class ExampleScaffold extends StatelessWidget { ); } } - -class CodeExample extends StatelessWidget { - final String code; - final bool fill; - - const CodeExample({required this.code, this.fill = false, super.key}); - - @override - Widget build(BuildContext context) { - final colors = Zeta.of(context).colors; - final widget = Container( - color: colors.surfaceDisabled, - padding: EdgeInsets.all(ZetaSpacing.x4), - child: Text(code, style: GoogleFonts.ibmPlexMono(color: colors.textDefault)), - ); - - return (fill - ? Row( - children: [ - Expanded( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Row(children: [Expanded(child: widget)]), - ], - ), - ) - ], - ) - : widget) - .paddingVertical(ZetaSpacing.x4); - } -} diff --git a/example/pubspec.yaml b/example/pubspec.yaml index 7d5b7701..1e97afde 100644 --- a/example/pubspec.yaml +++ b/example/pubspec.yaml @@ -12,7 +12,6 @@ dependencies: flutter: sdk: flutter go_router: ^11.1.2 - google_fonts: 6.1.0 path_drawing: ^1.0.1 shared_preferences: ^2.2.2 zeta_flutter: diff --git a/example/widgetbook/main.dart b/example/widgetbook/main.dart index a976b089..8abeaece 100644 --- a/example/widgetbook/main.dart +++ b/example/widgetbook/main.dart @@ -57,13 +57,14 @@ class HotReload extends StatelessWidget { WidgetbookUseCase(name: 'Icon Button', builder: (context) => iconButtonUseCase(context)), WidgetbookUseCase( name: 'Floating Action Button', builder: (context) => floatingActionButtonUseCase(context)), + WidgetbookUseCase(name: 'Group Button', builder: (context) => buttonGroupUseCase(context)), ], ), WidgetbookUseCase(name: 'Banners', builder: (context) => bannerUseCase(context)), WidgetbookUseCase(name: 'In Page Banners', builder: (context) => inPageBannerUseCase(context)), WidgetbookUseCase(name: 'Accordion', builder: (context) => accordionUseCase(context)), WidgetbookComponent( - name: 'Badge', + name: 'Chips', useCases: [ WidgetbookUseCase(name: 'Filter Chip', builder: (context) => filterChipUseCase(context)), WidgetbookUseCase(name: 'Input Chip', builder: (context) => inputChipUseCase(context)), @@ -71,20 +72,14 @@ class HotReload extends StatelessWidget { ], ), WidgetbookUseCase(name: 'Password Input', builder: (context) => passwordInputUseCase(context)), - WidgetbookComponent( - name: 'Bottom Sheet', - useCases: [ - WidgetbookUseCase(name: 'Content', builder: (context) => bottomSheetContentUseCase(context)), - WidgetbookUseCase(name: 'Live', builder: (context) => bottomSheetLiveUseCase(context)), - ], - ), + WidgetbookUseCase(name: 'Bottom Sheet', builder: (context) => bottomSheetContentUseCase(context)), WidgetbookUseCase(name: 'Dial Pad', builder: (context) => dialPadUseCase(context)), WidgetbookUseCase(name: 'Navigation Bar', builder: (context) => navigationBarUseCase(context)), WidgetbookComponent( name: 'Progress', useCases: [ WidgetbookUseCase(name: 'Bar', builder: (context) => progressBarUseCase(context)), - WidgetbookUseCase(name : 'Circle', builder : (context) => progressCircleUseCase(context)) + WidgetbookUseCase(name: 'Circle', builder: (context) => progressCircleUseCase(context)) ], ), ]..sort((a, b) => a.name.compareTo(b.name)), diff --git a/example/widgetbook/pages/assets/icon_widgetbook.dart b/example/widgetbook/pages/assets/icon_widgetbook.dart index 32ba0c94..5dfc5ab5 100644 --- a/example/widgetbook/pages/assets/icon_widgetbook.dart +++ b/example/widgetbook/pages/assets/icon_widgetbook.dart @@ -46,7 +46,7 @@ Widget iconsUseCase(BuildContext context) { }, child: Column( mainAxisAlignment: MainAxisAlignment.center, - children: [Icon(e.value, size: 40), Text(nameArr, textAlign: TextAlign.center)], + children: [Icon(e.value, size: ZetaSpacing.x10), Text(nameArr, textAlign: TextAlign.center)], ), ), ); diff --git a/example/widgetbook/pages/components/accordion_widgetbook.dart b/example/widgetbook/pages/components/accordion_widgetbook.dart index 85cd8b92..79c3bee5 100644 --- a/example/widgetbook/pages/components/accordion_widgetbook.dart +++ b/example/widgetbook/pages/components/accordion_widgetbook.dart @@ -3,10 +3,11 @@ import 'package:widgetbook/widgetbook.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; import '../../test/test_components.dart'; +import '../../utils/utils.dart'; Widget accordionUseCase(BuildContext context) => WidgetbookTestWidget( widget: Padding( - padding: const EdgeInsets.all(20), + padding: const EdgeInsets.all(ZetaSpacing.x5), child: ZetaAccordion( child: context.knobs.boolean(label: 'Disabled') ? null @@ -20,7 +21,7 @@ Widget accordionUseCase(BuildContext context) => WidgetbookTestWidget( ), title: context.knobs.string(label: 'Accordion Title', initialValue: 'Title'), contained: context.knobs.boolean(label: 'Contained', initialValue: false), - rounded: context.knobs.boolean(label: 'Rounded', initialValue: false), + rounded: roundedKnob(context), ), ), ); diff --git a/example/widgetbook/pages/components/badges_widgetbook.dart b/example/widgetbook/pages/components/badges_widgetbook.dart index 293cc5b5..d10cdb0d 100644 --- a/example/widgetbook/pages/components/badges_widgetbook.dart +++ b/example/widgetbook/pages/components/badges_widgetbook.dart @@ -3,88 +3,66 @@ import 'package:widgetbook/widgetbook.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; import '../../test/test_components.dart'; +import '../../utils/utils.dart'; -Widget statusLabelUseCase(BuildContext context) => WidgetbookTestWidget( - widget: ZetaStatusLabel( - label: context.knobs.string(label: 'Label', initialValue: 'Label'), - rounded: context.knobs.boolean(label: 'Rounded'), - status: context.knobs.list( - label: 'Status', - labelBuilder: (value) => value.name.split('.').last.capitalize(), - options: ZetaWidgetStatus.values, - ), - customIcon: context.knobs.list( - label: 'Icon', - options: [ - ZetaIcons.star_half_round, - ZetaIcons.add_alert_round, - ZetaIcons.add_box_round, - ZetaIcons.barcode_round, - ], - labelBuilder: (value) { - if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round'; - if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round'; - if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round'; - if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round'; - return ''; - }, - ), +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, ), - ); + 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: context.knobs.boolean(label: 'Rounded'), + rounded: roundedKnob(context), ), ); + Widget badgeUseCase(BuildContext context) => WidgetbookTestWidget( widget: ZetaBadge( label: context.knobs.string(label: 'Label', initialValue: 'Label'), - rounded: context.knobs.boolean(label: 'Rounded'), + rounded: roundedKnob(context), status: context.knobs.list( label: 'Status', options: ZetaWidgetStatus.values, - labelBuilder: (value) => value.name.split('.').last.capitalize(), + labelBuilder: enumLabelBuilder, ), ), ); -Widget indicatorsUseCase(BuildContext context) => WidgetbookTestWidget( - widget: Center( - child: ZetaIndicator( - type: context.knobs.list( - label: 'Type', - options: ZetaIndicatorType.values, - labelBuilder: (value) => value.name.split('.').last.capitalize(), - ), - icon: context.knobs.list( - label: 'Icon', - options: [ - Icon(ZetaIcons.star_half_round), - Icon(ZetaIcons.add_alert_round), - Icon(ZetaIcons.add_box_round), - Icon(ZetaIcons.barcode_round), - ], - labelBuilder: (value) { - if (value?.icon == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round'; - if (value?.icon == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round'; - if (value?.icon == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round'; - if (value?.icon == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round'; - return ''; - }, - ), - inverse: context.knobs.boolean(label: 'Inverse Border'), - size: context.knobs.list( - label: 'Size', - labelBuilder: (value) => value.name.split('.').last.capitalize(), - options: ZetaWidgetSize.values, - ), - value: context.knobs.int.slider(label: 'Value'), - ), +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, + ), + value: context.knobs.int.slider(label: 'Value'), + ), + ); +} Widget tagsUseCase(BuildContext context) => WidgetbookTestWidget( widget: Row( @@ -92,7 +70,7 @@ Widget tagsUseCase(BuildContext context) => WidgetbookTestWidget( children: [ ZetaTag( label: context.knobs.string(label: 'Label', initialValue: 'Tag'), - rounded: context.knobs.boolean(label: 'Rounded'), + rounded: roundedKnob(context), direction: context.knobs.list( label: 'Direction', options: ZetaTagDirection.values, @@ -103,35 +81,24 @@ Widget tagsUseCase(BuildContext context) => WidgetbookTestWidget( ), ); -Widget workcloudIndicatorsUseCase(BuildContext context) => 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: (value) => value.name.split('.').last.capitalize(), - options: ZetaWidgetSize.values, - ), - priorityType: context.knobs.list( - label: 'Type', - labelBuilder: (value) => value.name.split('.').last.capitalize(), - options: ZetaWorkcloudIndicatorType.values, - ), - icon: context.knobs.listOrNull( - label: 'Icon', - options: [ - ZetaIcons.star_half_round, - ZetaIcons.add_alert_round, - ZetaIcons.add_box_round, - ZetaIcons.barcode_round, - ], - initialOption: null, - labelBuilder: (value) { - if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round'; - if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round'; - if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round'; - if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round'; - return ''; - }, - )), - ); +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: (value) => value.name.split('.').last.capitalize(), + options: ZetaWidgetSize.values, + ), + priorityType: context.knobs.list( + label: 'Type', + labelBuilder: (value) => value.name.split('.').last.capitalize(), + options: ZetaWorkcloudIndicatorType.values, + ), + icon: iconKnob(context, rounded: rounded, nullable: true), + ), + ); +} diff --git a/example/widgetbook/pages/components/banner_widgetbook.dart b/example/widgetbook/pages/components/banner_widgetbook.dart index 6192e4c1..85792576 100644 --- a/example/widgetbook/pages/components/banner_widgetbook.dart +++ b/example/widgetbook/pages/components/banner_widgetbook.dart @@ -3,42 +3,48 @@ import 'package:widgetbook/widgetbook.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; import '../../test/test_components.dart'; +import '../../utils/utils.dart'; -Widget bannerUseCase(BuildContext context) => WidgetbookTestWidget( - widget: Padding( - padding: EdgeInsets.all(20), - child: Column( - children: [ - ZetaSystemBanner( - context: context, - title: context.knobs.string(label: 'Title', initialValue: 'Banner Title'), - type: context.knobs.list( - label: 'Type', - options: ZetaSystemBannerStatus.values, - labelBuilder: (value) => value.name.split('.').last.capitalize(), - ), - leadingIcon: context.knobs.list( - label: 'Icon', - options: [ - ZetaIcons.star_half_round, - ZetaIcons.add_alert_round, - ZetaIcons.add_box_round, - ZetaIcons.barcode_round, - ], - labelBuilder: (value) { - if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round'; - if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round'; - if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round'; - if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round'; - return ''; - }, - ), - titleStart: context.knobs.boolean(label: 'Center title'), - trailing: context.knobs.boolean(label: 'Trailing Icon') - ? IconButton(icon: Icon(ZetaIcons.chevron_right_round), onPressed: () {}) - : null, - ), - ], - ), +Widget bannerUseCase(BuildContext context) { + final rounded = roundedKnob(context); + + final banner = ZetaSystemBanner( + context: context, + title: context.knobs.string(label: 'Title', initialValue: 'Banner Title'), + type: context.knobs.list( + label: 'Type', + options: ZetaSystemBannerStatus.values, + labelBuilder: (value) => value.name.split('.').last.capitalize(), + ), + leadingIcon: iconKnob(context, rounded: rounded, nullable: true), + titleStart: context.knobs.boolean(label: 'Center title'), + trailing: Icon(iconKnob( + context, + rounded: rounded, + nullable: true, + name: 'trailing', + initial: ZetaIcons.chevron_right_round, + )), + ); + + return WidgetbookTestWidget( + widget: Padding( + padding: EdgeInsets.all(ZetaSpacing.x5), + child: Column( + children: [ + banner, + const SizedBox(height: ZetaSpacing.xl), + ZetaButton.text( + label: 'Popup', + onPressed: () { + ScaffoldMessenger.of(context).showMaterialBanner(banner); + Future.delayed(Duration(seconds: 2)).then( + (value) => ScaffoldMessenger.of(context).clearMaterialBanners(), + ); + }, + ) + ], ), - ); + ), + ); +} diff --git a/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart b/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart index 85069247..86274219 100644 --- a/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart +++ b/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart @@ -3,39 +3,45 @@ import 'package:widgetbook/widgetbook.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; import '../../test/test_components.dart'; +import '../../utils/utils.dart'; -Widget bottomSheetContentUseCase(BuildContext context) => WidgetbookTestWidget( - widget: Padding( - padding: const EdgeInsets.all(20), - child: _bottomSheet(context), - ), - ); - -Widget bottomSheetLiveUseCase(BuildContext context) { +Widget bottomSheetContentUseCase(BuildContext context) { final sheet = _bottomSheet(context); + return WidgetbookTestWidget( - widget: ElevatedButton( - child: Text('Open'), - onPressed: () { - showModalBottomSheet(context: context, builder: (_) => sheet); - }, + widget: Padding( + padding: const EdgeInsets.all(ZetaSpacing.x5), + child: Column( + children: [ + sheet, + const SizedBox(height: ZetaSpacing.xl), + ZetaButton.text( + label: 'Open', + onPressed: () => showModalBottomSheet(context: context, builder: (_) => sheet), + ) + ], + ), ), ); } ZetaBottomSheet _bottomSheet(BuildContext context) { + final bool rounded = roundedKnob(context); + final leadingIcon = iconKnob(context, rounded: rounded, nullable: true, initial: null); + final trailingIcon = iconKnob(context, rounded: rounded, nullable: true, initial: ZetaIcons.chevron_right_round); + return ZetaBottomSheet( centerTitle: context.knobs.boolean(label: 'Center title', initialValue: true), title: context.knobs.string(label: 'Title', initialValue: 'Title'), body: Wrap( - spacing: 12, - runSpacing: 12, + spacing: ZetaSpacing.x3, + runSpacing: ZetaSpacing.x3, children: List.generate( 6, (index) => ZetaMenuItem( type: context.knobs.boolean(label: 'Grid') ? ZetaMenuItemType.vertical : ZetaMenuItemType.horizontal, - leading: context.knobs.boolean(label: 'Leading Icon') ? Icon(ZetaIcons.star_round) : null, - trailing: context.knobs.boolean(label: 'Trailing Icon') ? Icon(ZetaIcons.chevron_right_round) : null, + leading: leadingIcon != null ? Icon(leadingIcon) : null, + trailing: trailingIcon != null ? Icon(trailingIcon) : null, label: Text('Menu Item'), onTap: context.knobs.boolean(label: 'Disabled') ? null : () {}, ), diff --git a/example/widgetbook/pages/components/button_widgetbook.dart b/example/widgetbook/pages/components/button_widgetbook.dart index 6a62ca5d..45ce0033 100644 --- a/example/widgetbook/pages/components/button_widgetbook.dart +++ b/example/widgetbook/pages/components/button_widgetbook.dart @@ -3,116 +3,89 @@ import 'package:widgetbook/widgetbook.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; import '../../test/test_components.dart'; +import '../../utils/utils.dart'; Widget buttonUseCase(BuildContext context) => WidgetbookTestWidget( widget: ZetaButton( label: context.knobs.string(label: 'Text', initialValue: 'Button'), onPressed: context.knobs.boolean(label: 'Disabled') ? null : () {}, - borderType: context.knobs.boolean(label: 'Rounded') ? ZetaWidgetBorder.rounded : ZetaWidgetBorder.sharp, + borderType: context.knobs.list( + label: 'Border type', + labelBuilder: enumLabelBuilder, + options: ZetaWidgetBorder.values, + ), size: context.knobs.list( label: 'Size', options: ZetaWidgetSize.values, - labelBuilder: (value) => value.name.split('.').last.capitalize(), + labelBuilder: enumLabelBuilder, ), type: context.knobs.list( label: 'Type', options: ZetaButtonType.values, - labelBuilder: (value) => value.name.split('.').last.capitalize(), + labelBuilder: enumLabelBuilder, ), ), ); -Widget iconButtonUseCase(BuildContext context) => WidgetbookTestWidget( - widget: ZetaIconButton( - icon: context.knobs.list( - label: 'Icon', - options: [ - ZetaIcons.star_half_round, - ZetaIcons.add_alert_round, - ZetaIcons.add_box_round, - ZetaIcons.barcode_round, - ], - labelBuilder: (value) { - if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round'; - if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round'; - if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round'; - if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round'; - return ''; - }, - ), - onPressed: context.knobs.boolean(label: 'Disabled') ? null : () {}, - borderType: context.knobs.boolean(label: 'Rounded') ? ZetaWidgetBorder.rounded : ZetaWidgetBorder.sharp, - size: context.knobs.list( - label: 'Size', - labelBuilder: (value) => value.name.split('.').last.capitalize(), - options: ZetaWidgetSize.values, - ), - type: context.knobs.list( - label: 'Type', - options: ZetaButtonType.values, - labelBuilder: (value) => value.name.split('.').last.capitalize(), - ), +Widget iconButtonUseCase(BuildContext context) { + final borderType = context.knobs.list( + label: 'Border type', + options: ZetaWidgetBorder.values, + labelBuilder: enumLabelBuilder, + ); + return WidgetbookTestWidget( + widget: ZetaIconButton( + icon: iconKnob(context, rounded: borderType != ZetaWidgetBorder.sharp)!, + onPressed: context.knobs.boolean(label: 'Disabled') ? null : () {}, + borderType: borderType, + size: context.knobs.list( + label: 'Size', + labelBuilder: enumLabelBuilder, + options: ZetaWidgetSize.values, ), - ); + type: context.knobs.list( + label: 'Type', + options: ZetaButtonType.values, + labelBuilder: enumLabelBuilder, + ), + ), + ); +} -Widget buttonGroupUseCase(BuildContext context) => WidgetbookTestWidget( - widget: ZetaButtonGroup( - isLarge: context.knobs.boolean(label: 'isLarge'), - rounded: context.knobs.boolean(label: 'rounded'), - buttons: [ - GroupButton( - label: context.knobs.string(label: 'button1Title'), - onPressed: - context.knobs.boolean(label: 'button1Dropdown') ? () {} : null, - icon: context.knobs.listOrNull( - label: 'button1Icon', - options: [ - ZetaIcons.star_round, - ], - labelBuilder: (value) { - if (value == ZetaIcons.star_half_round) - return 'ZetaIcons.star_half_round'; - return ''; - }, - ), - ), - GroupButton( - label: context.knobs.string(label: 'button2Title'), - onPressed: - context.knobs.boolean(label: 'button2Dropdown') ? () {} : null, - icon: context.knobs.listOrNull( - label: 'button2Icon', - options: [ - ZetaIcons.star_round, - ], - labelBuilder: (value) { - if (value == ZetaIcons.star_half_round) - return 'ZetaIcons.star_half_round'; - return ''; - }, - ), - ), - GroupButton( - label: context.knobs.string(label: 'button3Title'), - onPressed: - context.knobs.boolean(label: 'button3Dropdown') ? () {} : null, - icon: context.knobs.listOrNull( - label: 'button3Icon', - options: [ - ZetaIcons.star_round, - ], - labelBuilder: (value) { - if (value == ZetaIcons.star_half_round) - return 'ZetaIcons.star_half_round'; - return ''; - }, - ), - ) - ], - )); +Widget buttonGroupUseCase(BuildContext context) { + final bool rounded = roundedKnob(context); + + final onPressed = context.knobs.boolean(label: 'Disabled', initialValue: false) ? null : () {}; -Widget floatingActionButtonUseCase(BuildContext context) => - WidgetbookTestWidget( + return WidgetbookTestWidget( + widget: ZetaButtonGroup( + isLarge: context.knobs.boolean(label: 'Large'), + rounded: rounded, + isInverse: context.knobs.boolean(label: 'Inverse'), + buttons: [ + ZetaGroupButton( + label: context.knobs.string(label: 'Button 1 Title', initialValue: 'Button'), + onPressed: onPressed, + icon: iconKnob(context, name: 'Button 1 Icon', nullable: true, initial: null, rounded: rounded), + dropdown: context.knobs.boolean(label: 'Button 1 Dropdown') ? Container() : null, + ), + ZetaGroupButton( + label: context.knobs.string(label: 'Button 2 Title'), + onPressed: onPressed, + icon: iconKnob(context, name: 'Button 2 Icon', nullable: true, initial: null, rounded: rounded), + dropdown: context.knobs.boolean(label: 'Button 2 Dropdown') ? Container() : null, + ), + ZetaGroupButton( + label: context.knobs.string(label: 'Button 3 Title'), + onPressed: onPressed, + icon: iconKnob(context, name: 'Button 3 Icon', nullable: true, initial: null, rounded: rounded), + dropdown: context.knobs.boolean(label: 'Button 3 Dropdown') ? Container() : null, + ) + ], + )); +} + +Widget floatingActionButtonUseCase(BuildContext context) => WidgetbookTestWidget( widget: Padding(padding: EdgeInsets.all(20), child: FabWidget(context)), ); @@ -141,50 +114,35 @@ class _FabWidgetState extends State { @override Widget build(BuildContext _) { + final shape = widget.c.knobs.list( + label: 'Shape', + options: ZetaWidgetBorder.values, + labelBuilder: enumLabelBuilder, + ); return SizedBox( height: MediaQuery.of(context).size.height * 0.9, child: Scaffold( body: ListView.builder( + key: PageStorageKey(0), itemCount: MediaQuery.of(context).size.height.toInt(), controller: _scrollController, - itemBuilder: (context, index) { - return Text("$index"); - }, + itemBuilder: (context, index) => Text("$index"), ), floatingActionButton: ZetaFAB( scrollController: _scrollController, label: widget.c.knobs.string(label: 'Label', initialValue: 'Floating Action Button'), onPressed: widget.c.knobs.boolean(label: 'Disabled') ? null : () {}, - icon: widget.c.knobs.list( - label: 'Icon', - options: [ - ZetaIcons.star_half_round, - ZetaIcons.add_alert_round, - ZetaIcons.add_box_round, - ZetaIcons.barcode_round, - ], - labelBuilder: (value) { - if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round'; - if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round'; - if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round'; - if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round'; - return ''; - }, - ), - shape: widget.c.knobs.list( - label: 'Shape', - options: ZetaWidgetBorder.values, - labelBuilder: (value) => value.name.split('.').last.capitalize(), - ), + icon: iconKnob(context, rounded: shape != ZetaWidgetBorder.sharp)!, + shape: shape, size: widget.c.knobs.list( - label: 'Shape', + label: 'Size', options: ZetaFabSize.values, - labelBuilder: (value) => value.name.split('.').last.capitalize(), + labelBuilder: enumLabelBuilder, ), type: widget.c.knobs.list( - label: 'Shape', + label: 'Type', options: ZetaFabType.values, - labelBuilder: (value) => value.name.split('.').last.capitalize(), + labelBuilder: enumLabelBuilder, ), ), ), diff --git a/example/widgetbook/pages/components/checkbox_widgetbook.dart b/example/widgetbook/pages/components/checkbox_widgetbook.dart index 47de4701..63ea3365 100644 --- a/example/widgetbook/pages/components/checkbox_widgetbook.dart +++ b/example/widgetbook/pages/components/checkbox_widgetbook.dart @@ -3,40 +3,24 @@ import 'package:widgetbook/widgetbook.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; import '../../test/test_components.dart'; - -Widget checkboxUseCase(BuildContext context) => WidgetbookTestWidget( - widget: _CheckState(context: context, initialState: true), - ); - -class _CheckState extends StatefulWidget { - final BuildContext context; - final bool? initialState; - const _CheckState({required this.context, this.initialState}); - - @override - State<_CheckState> createState() => __CheckStateState(); -} - -class __CheckStateState extends State<_CheckState> { - bool? b = null; - - @override - void initState() { - super.initState(); - b = widget.initialState; - } - - @override - Widget build(BuildContext _) { - dynamic onChanged = - context.knobs.boolean(label: 'Enabled', initialValue: true) ? (b2) => setState(() => b = b2) : null; - - return ZetaCheckbox( - value: b, - onChanged: onChanged, - useIndeterminate: context.knobs.boolean(label: 'Use Indeterminate', initialValue: true), - rounded: context.knobs.boolean(label: 'Rounded'), - label: context.knobs.string(label: 'Label', initialValue: 'Checkbox'), - ); - } +import '../../utils/utils.dart'; + +Widget checkboxUseCase(BuildContext context) { + bool? b = true; + + return WidgetbookTestWidget( + widget: StatefulBuilder( + builder: (context, setState) { + dynamic onChanged = + context.knobs.boolean(label: 'Enabled', initialValue: true) ? (b2) => setState(() => b = b2) : null; + return ZetaCheckbox( + value: b, + onChanged: onChanged, + useIndeterminate: context.knobs.boolean(label: 'Use Indeterminate', initialValue: true), + rounded: roundedKnob(context), + label: context.knobs.string(label: 'Label', initialValue: 'Checkbox'), + ); + }, + ), + ); } diff --git a/example/widgetbook/pages/components/chip_widgetbook.dart b/example/widgetbook/pages/components/chip_widgetbook.dart index f6cae53c..78c61d14 100644 --- a/example/widgetbook/pages/components/chip_widgetbook.dart +++ b/example/widgetbook/pages/components/chip_widgetbook.dart @@ -3,35 +3,17 @@ import 'package:widgetbook/widgetbook.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; import '../../test/test_components.dart'; +import '../../utils/utils.dart'; Widget inputChipUseCase(BuildContext context) { - final trailing = context.knobs.listOrNull( - label: 'Icon', - options: [ - ZetaIcons.star_half_round, - ZetaIcons.add_alert_round, - ZetaIcons.add_box_round, - ZetaIcons.barcode_round, - ], - initialOption: null, - labelBuilder: (value) { - if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round'; - if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round'; - if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round'; - if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round'; - return ''; - }, - ); + final bool rounded = roundedKnob(context); + final trailing = iconKnob(context); + return WidgetbookTestWidget( widget: ZetaInputChip( label: context.knobs.string(label: 'Label', initialValue: 'Label'), - leading: context.knobs.boolean(label: 'Avatar') - ? ZetaAvatar( - initials: 'AZ', - size: ZetaAvatarSize.xs, - ) - : null, - rounded: context.knobs.boolean(label: 'Rounded'), + leading: context.knobs.boolean(label: 'Avatar') ? ZetaAvatar(initials: 'AZ', size: ZetaAvatarSize.xs) : null, + rounded: rounded, trailing: trailing != null ? Icon(trailing) : null, ), ); @@ -40,7 +22,7 @@ Widget inputChipUseCase(BuildContext context) { Widget filterChipUseCase(BuildContext context) => WidgetbookTestWidget( widget: ZetaFilterChip( label: context.knobs.string(label: 'Label', initialValue: 'Label'), - rounded: context.knobs.boolean(label: 'Rounded'), + rounded: roundedKnob(context), selected: context.knobs.boolean(label: 'Selected'), ), ); @@ -48,7 +30,7 @@ Widget filterChipUseCase(BuildContext context) => WidgetbookTestWidget( Widget assistChipUseCase(BuildContext context) => WidgetbookTestWidget( widget: ZetaAssistChip( label: context.knobs.string(label: 'Label', initialValue: 'Label'), - rounded: context.knobs.boolean(label: 'Rounded'), + rounded: roundedKnob(context), leading: context.knobs.boolean(label: 'Icon') ? Icon(ZetaIcons.star_round) : null, ), ); diff --git a/example/widgetbook/pages/components/dial_pad_widgetbook.dart b/example/widgetbook/pages/components/dial_pad_widgetbook.dart index 55ac5c33..38c1e654 100644 --- a/example/widgetbook/pages/components/dial_pad_widgetbook.dart +++ b/example/widgetbook/pages/components/dial_pad_widgetbook.dart @@ -6,24 +6,25 @@ import '../../test/test_components.dart'; Widget dialPadUseCase(BuildContext context) => WidgetbookTestWidget( widget: SingleChildScrollView( - scrollDirection: Axis.horizontal, - child: ZetaDialPad( - buttonValues: context.knobs.boolean(label: 'Change to emoji') - ? { - 'πŸ˜€': '', - 'πŸ₯²': '', - 'πŸ₯³': '', - '🀠': '', - '😨': '', - 'πŸ‘€': '', - '🐀': '', - '🐞': '', - '🦊': '', - 'πŸ†': '', - '⛺️': '', - '🧽': '' - } - : null, - buttonsPerRow: context.knobs.int.slider(label: 'Buttons per row', initialValue: 3, min: 1, max: 9), - )), + scrollDirection: Axis.horizontal, + child: ZetaDialPad( + buttonValues: context.knobs.boolean(label: 'Change to emoji') + ? { + 'πŸ˜€': '', + 'πŸ₯²': '', + 'πŸ₯³': '', + '🀠': '', + '😨': '', + 'πŸ‘€': '', + '🐀': '', + '🐞': '', + '🦊': '', + 'πŸ†': '', + '⛺️': '', + '🧽': '' + } + : null, + buttonsPerRow: context.knobs.int.slider(label: 'Buttons per row', initialValue: 3, min: 1, max: 9), + ), + ), ); diff --git a/example/widgetbook/pages/components/in_page_banner_widgetbook.dart b/example/widgetbook/pages/components/in_page_banner_widgetbook.dart index 16938b86..ea2f6462 100644 --- a/example/widgetbook/pages/components/in_page_banner_widgetbook.dart +++ b/example/widgetbook/pages/components/in_page_banner_widgetbook.dart @@ -3,10 +3,11 @@ import 'package:widgetbook/widgetbook.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; import '../../test/test_components.dart'; +import '../../utils/utils.dart'; Widget inPageBannerUseCase(BuildContext context) => WidgetbookTestWidget( widget: Padding( - padding: EdgeInsets.all(20), + padding: EdgeInsets.all(ZetaSpacing.x5), child: ZetaInPageBanner( content: Text( context.knobs.string( @@ -17,11 +18,11 @@ Widget inPageBannerUseCase(BuildContext context) => WidgetbookTestWidget( status: context.knobs.list( label: 'Severity', options: ZetaWidgetStatus.values, - labelBuilder: (value) => value.name.split('.').last.capitalize(), + labelBuilder: enumLabelBuilder, ), onClose: context.knobs.boolean(label: 'Show Close icon') ? () {} : null, title: context.knobs.string(label: 'Title', initialValue: 'Title'), - rounded: context.knobs.boolean(label: 'Rounded'), + rounded: roundedKnob(context), actions: () { final x = context.knobs.list(label: 'Show Buttons', options: [0, 1, 2]); @@ -35,22 +36,7 @@ Widget inPageBannerUseCase(BuildContext context) => WidgetbookTestWidget( } return []; }(), - customIcon: context.knobs.list( - label: 'Icon', - options: [ - ZetaIcons.star_half_round, - ZetaIcons.add_alert_round, - ZetaIcons.add_box_round, - ZetaIcons.barcode_round, - ], - labelBuilder: (value) { - if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round'; - if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round'; - if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round'; - if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round'; - return ''; - }, - ), + customIcon: iconKnob(context, nullable: true), ), ), ); diff --git a/example/widgetbook/pages/components/navigation_bar_widgetbook.dart b/example/widgetbook/pages/components/navigation_bar_widgetbook.dart index 8b73cc40..a092c2a0 100644 --- a/example/widgetbook/pages/components/navigation_bar_widgetbook.dart +++ b/example/widgetbook/pages/components/navigation_bar_widgetbook.dart @@ -4,11 +4,12 @@ import 'package:widgetbook/widgetbook.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; import '../../test/test_components.dart'; +import '../../utils/utils.dart'; Widget navigationBarUseCase(BuildContext context) { List items = List.generate( context.knobs.int.slider(label: 'Items', min: 2, max: 6, initialValue: 2), - (index) => ZetaNavigationBarItem(icon: ZetaIcons.star_round, label: 'Label $index'), + (index) => ZetaNavigationBarItem(icon: iconKnob(context)!, label: 'Label $index'), ); int currIndex = 0; bool showButton = context.knobs.boolean(label: 'Button'); diff --git a/example/widgetbook/pages/components/password_input_widgetbook.dart b/example/widgetbook/pages/components/password_input_widgetbook.dart index d3a56b05..f6714267 100644 --- a/example/widgetbook/pages/components/password_input_widgetbook.dart +++ b/example/widgetbook/pages/components/password_input_widgetbook.dart @@ -3,6 +3,7 @@ import 'package:widgetbook/widgetbook.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; import '../../test/test_components.dart'; +import '../../utils/utils.dart'; Widget passwordInputUseCase(BuildContext context) => _Password(); @@ -21,6 +22,9 @@ class _PasswordState extends State<_Password> { Widget build(BuildContext _) { final enableValidation = context.knobs.boolean(label: 'Enable validation', initialValue: false); final validationString = context.knobs.string(label: 'Error label', initialValue: 'Incorrect'); + + final bool rounded = roundedKnob(context); + return Form( key: _formKey, child: WidgetbookTestWidget( @@ -29,31 +33,16 @@ class _PasswordState extends State<_Password> { ConstrainedBox( constraints: BoxConstraints(maxWidth: 328), child: ZetaPasswordInput( - rounded: context.knobs.boolean(label: 'Rounded'), enabled: context.knobs.boolean(label: 'Enabled', initialValue: true), obscureText: context.knobs.boolean(label: 'Obscure text', initialValue: true), size: context.knobs.list( label: 'Size', options: ZetaWidgetSize.values, - labelBuilder: (value) => value.name.split('.').last.capitalize(), - ), - footerIcon: context.knobs.listOrNull( - label: 'Icon', - options: [ - ZetaIcons.star_half_round, - ZetaIcons.add_alert_round, - ZetaIcons.add_box_round, - ZetaIcons.barcode_round, - ], - labelBuilder: (value) { - if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round'; - if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round'; - if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round'; - if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round'; - return ''; - }, - initialOption: null, + labelBuilder: enumLabelBuilder, ), + rounded: rounded, + footerIcon: + iconKnob(context, initial: ZetaIcons.star_half_round, name: 'Footer icon', rounded: rounded), footerText: context.knobs.string(label: 'Footer Text'), hintText: context.knobs.string(label: 'Hint text'), label: context.knobs.string(label: 'Label'), diff --git a/example/widgetbook/pages/components/progress_widgetbook.dart b/example/widgetbook/pages/components/progress_widgetbook.dart index 3dfcbb83..af08949d 100644 --- a/example/widgetbook/pages/components/progress_widgetbook.dart +++ b/example/widgetbook/pages/components/progress_widgetbook.dart @@ -3,38 +3,36 @@ import 'package:widgetbook/widgetbook.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; import '../../test/test_components.dart'; +import '../../utils/utils.dart'; Widget progressBarUseCase(BuildContext context) => WidgetbookTestWidget( widget: LayoutBuilder(builder: (context, constraints) { return SizedBox( width: constraints.maxWidth - ZetaSpacing.xl, child: ZetaProgressBar( - progress: context.knobs.double - .slider(label: 'Progress', min: 0, max: 1, initialValue: 0.5) - .toDouble(), + progress: context.knobs.double.slider(label: 'Progress', min: 0, max: 1, initialValue: 0.5).toDouble(), type: context.knobs.list( - label: 'Type', - options: ZetaProgressBarType.values, - labelBuilder: (value) => value.name), + label: 'Type', + options: ZetaProgressBarType.values, + labelBuilder: enumLabelBuilder, + ), isThin: context.knobs.boolean(label: 'Thin'), - rounded: context.knobs.boolean(label: 'Rounded'), + rounded: roundedKnob(context), label: context.knobs.stringOrNull(label: 'Label'), ), ); }), ); -Widget progressCircleUseCase(BuildContext context) => - WidgetbookTestWidget(widget: - ZetaProgressCircle( - progress: context.knobs.double - .slider(label: 'Progress', min: 0, max: 1, initialValue: 0.5) - .toDouble(), - rounded: context.knobs.boolean(label: 'Rounded'), - size: context.knobs.list( - initialOption: ZetaCircleSizes.xl, - label: 'Size', - options: ZetaCircleSizes.values, - labelBuilder: (value) => value.name), - ), +Widget progressCircleUseCase(BuildContext context) => WidgetbookTestWidget( + widget: ZetaProgressCircle( + progress: context.knobs.double.slider(label: 'Progress', min: 0, max: 1, initialValue: 0.5).toDouble(), + rounded: roundedKnob(context), + size: context.knobs.list( + initialOption: ZetaCircleSizes.xl, + label: 'Size', + options: ZetaCircleSizes.values, + labelBuilder: enumLabelBuilder, + ), + ), ); diff --git a/example/widgetbook/pages/theme/typography_widgetbook.dart b/example/widgetbook/pages/theme/typography_widgetbook.dart index 33d3b184..f768f354 100644 --- a/example/widgetbook/pages/theme/typography_widgetbook.dart +++ b/example/widgetbook/pages/theme/typography_widgetbook.dart @@ -23,17 +23,20 @@ const Map allTypes = { 'Label tiny': ZetaTextStyles.labelTiny, }; -Widget typographyUseCase(BuildContext context) => Text( - context.knobs.string(label: 'Text', initialValue: 'The quick brown fox jumps over the lazy dog.'), - style: context.knobs - .list( - label: 'Sizes', - labelBuilder: (p0) => allTypes.entries.firstWhere((element) => element.value == p0).key, - options: allTypes.values.toList(), - ) - .apply( - color: Zeta.of(context).colors.textDefault, - fontStyle: FontStyle.normal, - decoration: TextDecoration.none, - ), +Widget typographyUseCase(BuildContext context) => Padding( + padding: const EdgeInsets.all(ZetaSpacing.m), + child: Text( + context.knobs.string(label: 'Text', initialValue: 'The quick brown fox jumps over the lazy dog.'), + style: context.knobs + .list( + label: 'Sizes', + labelBuilder: (p0) => allTypes.entries.firstWhere((element) => element.value == p0).key, + options: allTypes.values.toList(), + ) + .apply( + color: Zeta.of(context).colors.textDefault, + fontStyle: FontStyle.normal, + decoration: TextDecoration.none, + ), + ), ); diff --git a/example/widgetbook/utils/utils.dart b/example/widgetbook/utils/utils.dart new file mode 100644 index 00000000..4baec50c --- /dev/null +++ b/example/widgetbook/utils/utils.dart @@ -0,0 +1,38 @@ +import 'package:flutter/material.dart'; +import 'package:widgetbook/widgetbook.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +String iconLabelBuilder(IconData? value, [bool rounded = true]) { + return ((rounded + ? iconsRounded.entries.firstWhere((element) => element.value == value) + : iconsSharp.entries.firstWhere((element) => element.value == value)) + .key + .split('.') + .last + .split('_') + ..removeLast()) + .join(' '); +} + +List iconOptions(rounded) => rounded ? iconsRounded.values.toList() : iconsSharp.values.toList(); + +String enumLabelBuilder(Enum value) => value.name.split('.').last.capitalize(); + +IconData? iconKnob(BuildContext context, + {bool rounded = true, bool nullable = false, String name = 'Icon', final IconData? initial}) { + return nullable + ? context.knobs.listOrNull( + label: name, + options: iconOptions(rounded), + labelBuilder: (value) => iconLabelBuilder(value, rounded), + initialOption: initial, + ) + : context.knobs.list( + label: name, + options: iconOptions(rounded), + labelBuilder: (value) => iconLabelBuilder(value, rounded), + initialOption: initial, + ); +} + +bool roundedKnob(BuildContext context) => context.knobs.boolean(label: 'Rounded'); diff --git a/lib/src/components/badges/indicator.dart b/lib/src/components/badges/indicator.dart index baf8f4d0..7b5a91d6 100644 --- a/lib/src/components/badges/indicator.dart +++ b/lib/src/components/badges/indicator.dart @@ -57,7 +57,7 @@ class ZetaIndicator extends StatelessWidget { final bool inverse; /// Indicator icon, default: `ZetaIcons.star_round`. - final Icon? icon; + final IconData? icon; /// Value for the type `notification`. final int? value; @@ -66,7 +66,7 @@ class ZetaIndicator extends StatelessWidget { ZetaIndicator copyWith({ ZetaIndicatorType? type, ZetaWidgetSize? size, - Icon? icon, + IconData? icon, int? value, bool? inverse, }) { @@ -113,9 +113,10 @@ class ZetaIndicator extends StatelessWidget { case ZetaIndicatorType.icon: final iconSize = _getIconSize(size); return Center( - child: IconTheme( - data: IconThemeData(color: foregroundColor, size: iconSize), - child: icon ?? const Icon(ZetaIcons.star_round), + child: Icon( + icon ?? ZetaIcons.star_round, + color: foregroundColor, + size: iconSize, ), ); case ZetaIndicatorType.notification: @@ -159,7 +160,7 @@ class ZetaIndicator extends StatelessWidget { ..add(DiagnosticsProperty('type', type)) ..add(DiagnosticsProperty('size', size)) ..add(DiagnosticsProperty('value', value)) - ..add(DiagnosticsProperty('icon', icon)) + ..add(DiagnosticsProperty('icon', icon)) ..add(DiagnosticsProperty('inverseBorder', inverse)); } } diff --git a/lib/src/components/banners/in_page_banner.dart b/lib/src/components/banners/in_page_banner.dart index 227703be..15d9e20b 100644 --- a/lib/src/components/banners/in_page_banner.dart +++ b/lib/src/components/banners/in_page_banner.dart @@ -62,7 +62,7 @@ class ZetaInPageBanner extends StatelessWidget { Padding( padding: const EdgeInsetsDirectional.only(top: ZetaSpacing.x3, start: ZetaSpacing.x2_5), child: Icon( - status.icon(rounded: rounded), + customIcon ?? status.icon(rounded: rounded), size: ZetaSpacing.x5, color: status == ZetaWidgetStatus.neutral ? theme.colors.textDefault : colors.icon, ), diff --git a/lib/src/components/buttons/button_group.dart b/lib/src/components/buttons/button_group.dart index d60c27be..52b8ea20 100644 --- a/lib/src/components/buttons/button_group.dart +++ b/lib/src/components/buttons/button_group.dart @@ -5,21 +5,26 @@ import '../../../zeta_flutter.dart'; /// Zeta Button Group class ZetaButtonGroup extends StatelessWidget { - /// Constructs [ZetaButtonGroup] from a list of [GroupButton]s - const ZetaButtonGroup( - {super.key, - required this.buttons, - required this.rounded, - required this.isLarge,}); - - /// Determines size of [GroupButton] + /// Constructs [ZetaButtonGroup] from a list of [ZetaGroupButton]s + const ZetaButtonGroup({ + super.key, + required this.buttons, + required this.rounded, + required this.isLarge, + this.isInverse = false, + }); + + /// Determines size of [ZetaGroupButton]. final bool isLarge; - /// Determinses border radius of [GroupButton] + /// {@macro zeta-component-rounded} final bool rounded; - /// [GroupButton]s to be rendered in list - final List buttons; + /// [ZetaGroupButton]s to be rendered in list. + final List buttons; + + /// If widget should be rendered in inverted colors. + final bool isInverse; @override Widget build(BuildContext context) { @@ -29,13 +34,14 @@ class ZetaButtonGroup extends StatelessWidget { ); } - /// Returns [GroupButton]s with there appropriate styling. - List getButtons() { + /// Returns [ZetaGroupButton]s with there appropriate styling. + List getButtons() { for (final element in buttons) { element .._isInitial = element._isFinal = false .._isLarge = isLarge - .._rounded = rounded; + .._rounded = rounded + .._isInverse = isInverse; } buttons.first._isInitial = true; @@ -43,69 +49,81 @@ class ZetaButtonGroup extends StatelessWidget { return buttons; } + @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties - ..add(DiagnosticsProperty('isLarge', isLarge)) - ..add(DiagnosticsProperty('rounded', rounded)); + ..add(DiagnosticsProperty('isLarge', isLarge)) + ..add(DiagnosticsProperty('rounded', rounded)) + ..add(DiagnosticsProperty('isInverse', isInverse)); } } +// TODO(UX-854): Create country variant. + /// Group Button item // ignore: must_be_immutable -class GroupButton extends StatefulWidget { - /// Constructs [GroupButton] - GroupButton({ +class ZetaGroupButton extends StatefulWidget { + /// Constructs [ZetaGroupButton] + ZetaGroupButton({ super.key, this.label, this.icon, this.onPressed, + this.dropdown, }); /// Constructs dropdown group button - GroupButton.dropdown({ + ZetaGroupButton.dropdown({ super.key, required this.onPressed, + required this.dropdown, this.icon, this.label, }); ///Constructs group button with icon - GroupButton.icon({ + ZetaGroupButton.icon({ super.key, required this.icon, + this.dropdown, this.onPressed, this.label, }); - /// Label for [GroupButton] + /// Label for [ZetaGroupButton]. final String? label; - /// Optional icon for [GroupButton] + /// Optional icon for [ZetaGroupButton]. final IconData? icon; - /// Function for when [GroupButton] is clicked. + /// Function for when [ZetaGroupButton] is clicked. final VoidCallback? onPressed; - ///If [GroupButton] is large + /// Content of dropdown. + final Widget? dropdown; + + ///If [ZetaGroupButton] is large. bool _isLarge = false; - ///If [GroupButton] is rounded + ///If [ZetaGroupButton] is rounded. bool _rounded = false; - /// If [GroupButton] is the first button in its list. + /// If [ZetaGroupButton] is the first button in its list. bool _isInitial = false; - /// If [GroupButton] is the final button in its list. + /// If [ZetaGroupButton] is the final button in its list. bool _isFinal = false; + bool _isInverse = false; + @override - State createState() => _GroupButtonState(); + State createState() => _ZetaGroupButtonState(); - /// Returns copy of [GroupButton] with fields. - GroupButton copyWith({bool? isFinal, bool? isInitial}) { - return GroupButton( + /// Returns copy of [ZetaGroupButton] with fields. + ZetaGroupButton copyWith({bool? isFinal, bool? isInitial}) { + return ZetaGroupButton( key: key, label: label, icon: icon, @@ -123,35 +141,28 @@ class GroupButton extends StatefulWidget { } } -class _GroupButtonState extends State { - late bool selected; +class _ZetaGroupButtonState extends State { late MaterialStatesController controller; @override void initState() { super.initState(); - selected = false; controller = MaterialStatesController(); - } - - void onPressed() { - if(widget.onPressed != null){ - widget.onPressed?.call(); - setState(() { - selected = !selected; + controller.addListener(() { + if (!controller.value.contains(MaterialState.disabled) && context.mounted && mounted) { + // TODO(UX-1005): setState causing exception when going from disabled to enabled. + setState(() {}); + } }); - } } @override Widget build(BuildContext context) { final colors = Zeta.of(context).colors; - final borderType = - widget._rounded ? ZetaWidgetBorder.rounded : ZetaWidgetBorder.sharp; + final borderType = widget._rounded ? ZetaWidgetBorder.rounded : ZetaWidgetBorder.sharp; - final BorderSide borderSide = - _getBorderSide(controller.value, colors, false); + final BorderSide borderSide = _getBorderSide(controller.value, colors, false); return Container( decoration: BoxDecoration( @@ -159,14 +170,18 @@ class _GroupButtonState extends State { top: borderSide, left: borderSide, bottom: borderSide, - right: (widget._isFinal) ? borderSide : BorderSide.none, + right: controller.value.contains(MaterialState.focused) + ? BorderSide(color: colors.blue.shade50, width: 2) + : (widget._isFinal) + ? borderSide + : BorderSide.none, ), borderRadius: _getRadius(borderType), ), padding: EdgeInsets.zero, child: FilledButton( statesController: controller, - onPressed: onPressed, + onPressed: widget.onPressed, // TODO(UX-1006): Dropdown style: getStyle(borderType, colors), child: SelectionContainer.disabled( child: Row( @@ -174,8 +189,8 @@ class _GroupButtonState extends State { children: [ if (widget.icon != null) Icon(widget.icon), Text(widget.label!), - if (widget.onPressed != null) - const Icon(ZetaIcons.expand_more_round), + if (widget.dropdown != null) // TODO(UX-1006): Dropdown + Icon(widget._rounded ? ZetaIcons.expand_more_round : ZetaIcons.expand_more_sharp, size: 20), ], ).paddingAll(_padding), ), @@ -190,13 +205,13 @@ class _GroupButtonState extends State { ZetaColors colors, bool finalButton, ) { - if(selected) return BorderSide(color: colors.black); + if (states.contains(MaterialState.focused)) { + return BorderSide(color: colors.blue.shade50, width: ZetaSpacing.x0_5); + } + if (widget._isInverse) return BorderSide(color: colors.black); if (states.contains(MaterialState.disabled)) { return BorderSide(color: colors.cool.shade40); } - if (states.contains(MaterialState.focused)) { - return BorderSide(color: colors.blue, width: ZetaSpacing.x0_5); - } return BorderSide( color: finalButton ? colors.borderDefault : colors.borderSubtle, ); @@ -223,11 +238,10 @@ class _GroupButtonState extends State { shape: MaterialStateProperty.all( RoundedRectangleBorder( borderRadius: _getRadius(borderType), - ), ), backgroundColor: MaterialStateProperty.resolveWith((states) { - if (selected) return colors.black; + if (widget._isInverse) return colors.cool.shade100; if (states.contains(MaterialState.disabled)) { return colors.surfaceDisabled; @@ -238,13 +252,13 @@ class _GroupButtonState extends State { if (states.contains(MaterialState.hovered)) { return colors.cool.shade20; } - return colors.white; + return colors.surfacePrimary; }), foregroundColor: MaterialStateProperty.resolveWith((states) { if (states.contains(MaterialState.disabled)) { return colors.textDisabled; } - if (selected) return colors.black.onColor; + if (widget._isInverse) return colors.cool.shade100.onColor; return colors.textDefault; }), elevation: const MaterialStatePropertyAll(0), @@ -255,10 +269,6 @@ class _GroupButtonState extends State { @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); - properties - ..add(DiagnosticsProperty('selected', selected)) - ..add( - DiagnosticsProperty('controller', controller), - ); + properties.add(DiagnosticsProperty('controller', controller)); } } diff --git a/lib/src/components/buttons/button_style.dart b/lib/src/components/buttons/button_style.dart index 26662d9b..8a3ed9fb 100644 --- a/lib/src/components/buttons/button_style.dart +++ b/lib/src/components/buttons/button_style.dart @@ -55,8 +55,7 @@ extension ButtonFunctions on ZetaButtonType { } /// Returns if button has border - bool get border => - this == ZetaButtonType.outline || this == ZetaButtonType.outlineSubtle; + bool get border => this == ZetaButtonType.outline || this == ZetaButtonType.outlineSubtle; ///Returns if button is solid bool get solid => index < 4; @@ -86,9 +85,8 @@ ButtonStyle buttonStyle( ZetaButtonType type, Color? backgroundColor, ) { - final ZetaColorSwatch color = backgroundColor != null - ? ZetaColorSwatch.fromColor(backgroundColor) - : type.color(colors); + final ZetaColorSwatch color = + backgroundColor != null ? ZetaColorSwatch.fromColor(backgroundColor) : type.color(colors); final bool isSolid = type.solid || backgroundColor != null; @@ -131,8 +129,7 @@ ButtonStyle buttonStyle( } }, ), - overlayColor: - MaterialStateProperty.resolveWith((Set states) { + overlayColor: MaterialStateProperty.resolveWith((Set states) { return null; }), side: MaterialStateProperty.resolveWith((Set states) { @@ -145,9 +142,7 @@ ButtonStyle buttonStyle( } if (type.border) { return BorderSide( - color: type == ZetaButtonType.outline - ? colors.primary.border - : colors.borderDefault, + color: type == ZetaButtonType.outline ? colors.primary.border : colors.borderDefault, ); } diff --git a/lib/src/components/dial_pad/dial_pad.dart b/lib/src/components/dial_pad/dial_pad.dart index 61f8a609..0d098932 100644 --- a/lib/src/components/dial_pad/dial_pad.dart +++ b/lib/src/components/dial_pad/dial_pad.dart @@ -3,32 +3,14 @@ import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; import '../../../zeta_flutter.dart'; -import '../../utils/utils.dart'; - -const Map _defaultButtonValues = { - '1': '', - '2': 'ABC', - '3': 'DEF', - '4': 'GHI', - '5': 'JKL', - '6': 'MNO', - '7': 'PQRS', - '8': 'TUV', - '9': 'WXYZ', - '*': '', - '0': '+', - '#': '', -}; - -const int _defaultButtonsPerRow = 3; /// Dial pad gives the user the ability to dial a number and start a call. It also has a quick dial security action and a delete entry action. class ZetaDialPad extends StatefulWidget { /// Constructs a [ZetaDialPad]. const ZetaDialPad({ super.key, - this.buttonsPerRow = _defaultButtonsPerRow, - this.buttonValues = _defaultButtonValues, + this.buttonsPerRow = ZetaDialPad.defaultButtonsPerRow, + this.buttonValues = ZetaDialPad.defaultButtonValues, this.onNumber, this.onText, }); @@ -39,16 +21,39 @@ class ZetaDialPad extends StatefulWidget { /// Callback when number is tapped. Returns the small value from the button after a small delay, i,e, a,b,c etc. final ValueChanged? onText; - /// Number of buttons to show on each row. Defaults to 3. + /// Number of buttons to show on each row. Defaults to 3 [defaultButtonsPerRow]. final int? buttonsPerRow; /// Map of values to show on the buttons. /// - /// Key is the large character, i.e. 1, 2, 3. + /// * Key is large value, typically a single digit or special character. + /// * Value is the smaller value, typically 3/4 alphabetical characters. /// - /// Value is the smaller character(s): i.e. 'ABC' + /// Defaults ot [defaultButtonValues]. final Map? buttonValues; + /// Default button values (english) for [ZetaDialPad]. + /// + /// * Key is large value, typically a single digit or special character. + /// * Value is the smaller value, typically 3/4 alphabetical characters. + static const Map defaultButtonValues = { + '1': '', + '2': 'ABC', + '3': 'DEF', + '4': 'GHI', + '5': 'JKL', + '6': 'MNO', + '7': 'PQRS', + '8': 'TUV', + '9': 'WXYZ', + '*': '', + '0': '+', + '#': '', + }; + + /// Default number of buttons per row for [ZetaDialPad]. + static const int defaultButtonsPerRow = 3; + @override State createState() => _ZetaDialPadState(); @@ -64,9 +69,9 @@ class ZetaDialPad extends StatefulWidget { } class _ZetaDialPadState extends State { - int get _buttonsPerRow => widget.buttonsPerRow ?? _defaultButtonsPerRow; + int get _buttonsPerRow => widget.buttonsPerRow ?? ZetaDialPad.defaultButtonsPerRow; - Map get _buttonValues => widget.buttonValues ?? _defaultButtonValues; + Map get _buttonValues => widget.buttonValues ?? ZetaDialPad.defaultButtonValues; String? _lastTapped; int _tapCounter = 0; @@ -114,6 +119,7 @@ class _ZetaDialPadState extends State { shrinkWrap: true, semanticChildCount: _buttonValues.length, mainAxisSpacing: ZetaSpacing.x6, + physics: const NeverScrollableScrollPhysics(), crossAxisSpacing: ZetaSpacing.x9, children: _buttonValues.entries .map( diff --git a/lib/src/components/progress/progress.dart b/lib/src/components/progress/progress.dart index 732da64c..3ad63440 100644 --- a/lib/src/components/progress/progress.dart +++ b/lib/src/components/progress/progress.dart @@ -34,7 +34,9 @@ abstract class ZetaProgressState extends State with T super.initState(); progress = widget.progress; controller = AnimationController( - vsync: this, duration: const Duration(milliseconds: 200),); + vsync: this, + duration: const Duration(milliseconds: 200), + ); animation = Tween( begin: widget.progress, // Start value end: widget.progress, // End value (initially same as start value) diff --git a/lib/src/components/progress/progress_bar.dart b/lib/src/components/progress/progress_bar.dart index 939e9fe2..37a2ce86 100644 --- a/lib/src/components/progress/progress_bar.dart +++ b/lib/src/components/progress/progress_bar.dart @@ -98,8 +98,7 @@ class _ZetaProgressBarState extends ZetaProgressState { children: [ Text( widget.label ?? - (widget.label == null && - widget.type != ZetaProgressBarType.indeterminate + (widget.label == null && widget.type != ZetaProgressBarType.indeterminate ? '${(animation.value * 100).toInt()}%' : ''), style: ZetaTextStyles.titleMedium, @@ -115,17 +114,13 @@ class _ZetaProgressBarState extends ZetaProgressState { height: _weight, child: LinearProgressIndicator( borderRadius: _border, - value: widget.type == ZetaProgressBarType.indeterminate - ? null - : animation.value, - backgroundColor: widget.type == ZetaProgressBarType.buffering - ? colors.surfaceDisabled - : Colors.transparent, + value: widget.type == ZetaProgressBarType.indeterminate ? null : animation.value, + backgroundColor: + widget.type == ZetaProgressBarType.buffering ? colors.surfaceDisabled : Colors.transparent, ), ), ), - if (widget.type == ZetaProgressBarType.buffering) - bufferingWidget(colors), + if (widget.type == ZetaProgressBarType.buffering) bufferingWidget(colors), ], ), ], @@ -133,8 +128,7 @@ class _ZetaProgressBarState extends ZetaProgressState { } /// Returns border based on widgets border type. - BorderRadius get _border => - widget.rounded ? ZetaRadius.rounded : ZetaRadius.none; + BorderRadius get _border => widget.rounded ? ZetaRadius.rounded : ZetaRadius.none; /// Returns thickness of progress bar based on its weight. double get _weight => widget.isThin ? ZetaSpacing.x2 : ZetaSpacing.x4; @@ -148,7 +142,9 @@ class _ZetaProgressBarState extends ZetaProgressState { width: _weight, height: _weight, decoration: BoxDecoration( - color: colors.surfaceDisabled, borderRadius: ZetaRadius.rounded,), + color: colors.surfaceDisabled, + borderRadius: ZetaRadius.rounded, + ), ), ], ); diff --git a/lib/src/components/progress/progress_circle.dart b/lib/src/components/progress/progress_circle.dart index 0156ffcc..90f48c5b 100644 --- a/lib/src/components/progress/progress_circle.dart +++ b/lib/src/components/progress/progress_circle.dart @@ -36,7 +36,7 @@ class ZetaProgressCircle extends ZetaProgress { ///Size of [ZetaProgressCircle] final ZetaCircleSizes size; - ///{@macro zeta-component-rounded} + ///{@macro zeta-component-rounded} final bool rounded; @override @@ -102,7 +102,7 @@ class ZetaProgressCircleState extends ZetaProgressState { ///Class definition for [CirclePainter] class CirclePainter extends CustomPainter { ///Constructor for [CirclePainter] - CirclePainter({this.progress = 0, this.rounded = true,required this.colors}); + CirclePainter({this.progress = 0, this.rounded = true, required this.colors}); ///Percentage of progress in decimal value, defaults to 0 final double progress; @@ -122,7 +122,6 @@ class CirclePainter extends CustomPainter { if (rounded) _paint.strokeCap = StrokeCap.round; _paint.color = colors.primary; - const double fullCircle = 2 * math.pi; canvas.drawArc( diff --git a/lib/src/utils/utils.dart b/lib/src/utils/utils.dart index 7171d6a3..99ae2153 100644 --- a/lib/src/utils/utils.dart +++ b/lib/src/utils/utils.dart @@ -1,5 +1,7 @@ import 'dart:async'; +export './extensions.dart'; + const Duration _debounceDuration = Duration(milliseconds: 500); /// Debounce utility diff --git a/lib/zeta_flutter.dart b/lib/zeta_flutter.dart index 7600bc88..9c887252 100644 --- a/lib/zeta_flutter.dart +++ b/lib/zeta_flutter.dart @@ -37,4 +37,5 @@ export 'src/theme/tokens.dart'; export 'src/theme/typography.dart'; export 'src/utils/enums.dart'; export 'src/utils/extensions.dart'; +export 'src/utils/utils.dart'; export 'src/zeta.dart';