From c0a9668a1c6b99aa5d45075aebddf0ea4d8f640f Mon Sep 17 00:00:00 2001 From: Luke Walton Date: Tue, 4 Jun 2024 14:58:43 +0100 Subject: [PATCH] build: merge from upstream (#48) chore: Add deprecation warnings to old tokens docs: adding link to template repo --- README.md | 22 ++- .../components/notification_list_example.dart | 2 +- example/widgetbook/pages/introduction.dart | 20 +-- lib/src/components/checkbox/checkbox.dart | 8 +- .../list_item/notification_list_item.dart | 21 +-- lib/src/theme/tokens.dart | 137 +++++++++++++++++- 6 files changed, 175 insertions(+), 35 deletions(-) diff --git a/README.md b/README.md index d8f0c390..3557897e 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,20 @@ flutter: ">=3.16.0" To install `zeta_flutter`, follow the instructions [here](https://pub.dev/packages/zeta_flutter/install). +## Example + +An example app can be found in this repo under `/example`. This shows all components in an example app, as well as a widgetbook instance. + +## Previewing the components + +To view examples of all the components in the library, you can pull this repo and run either the example app or widgetbook instance. + +You can also view the latest release at [Zeta](https://zeta-ds.web.app/) or the latest commits to main [here](https://zeta-flutter-main.web.app/). + +## Template + +If you are starting a new project using Zeta, we recommend starting with [Zeta Flutter Template](https://github.com/zebradevs/zeta_flutter_template). This template project handles the basic app setup, but these steps can also be followed [below](#Usage). + ## Usage Zeta offers flexibility in theming through its `ZetaProvider` widget. Here's a breakdown of its features: @@ -92,14 +106,8 @@ To tie everything together, use the `ZetaProvider` constructor. The `builder` ar With these configurations, Zeta makes it easy to achieve consistent theming throughout your Flutter application. -## Viewing the components - -To view examples of all the components in the library, you can pull this repo and run either the example app or widgetbook instance. - -You can also view the latest release at [Zeta](https://zeta-ds.web.app/) or the latest commits to main [here](https://zeta-flutter-main.web.app/). - ## Licensing -This software is licensed with the MIT license (see [LICENSE](./LICENSE)). +This software is licensed with the MIT license (see [LICENSE](./LICENSE) and [THIRD PARTY LICENSES](./LICENSE-3RD-PARTY)). --- diff --git a/example/lib/pages/components/notification_list_example.dart b/example/lib/pages/components/notification_list_example.dart index a6ad01bb..6c015bcb 100644 --- a/example/lib/pages/components/notification_list_example.dart +++ b/example/lib/pages/components/notification_list_example.dart @@ -59,7 +59,7 @@ class _NotificationListItemExampleState extends State { @override Widget build(BuildContext context) { final colors = Zeta.of(context).colors; - final radius = Radius.circular(ZetaSpacing.x5); + final radius = Radius.circular(ZetaSpacing.xL); final isDark = Zeta.of(context).brightness == Brightness.dark; final config = isDark ? MarkdownConfig.darkConfig : MarkdownConfig.defaultConfig; @@ -35,7 +35,7 @@ class _IntroductionWidgetbookState extends State { backgroundColor: colors.black, body: SingleChildScrollView( child: Padding( - padding: EdgeInsets.symmetric(vertical: ZetaSpacing.xxl, horizontal: ZetaSpacing.s), + padding: EdgeInsets.symmetric(vertical: ZetaSpacing.xL10, horizontal: ZetaSpacing.medium), child: Column( mainAxisSize: MainAxisSize.max, children: [ @@ -46,10 +46,10 @@ class _IntroductionWidgetbookState extends State { ), child: Padding( padding: EdgeInsets.fromLTRB( - ZetaSpacing.x10, - ZetaSpacing.x1 * 15, - ZetaSpacing.x12, - ZetaSpacing.x10, + ZetaSpacing.xL6, + ZetaSpacing.xL9, + ZetaSpacing.xL8, + ZetaSpacing.xL6, ), child: Row( children: [ @@ -66,7 +66,7 @@ class _IntroductionWidgetbookState extends State { ]) : null, ), - SizedBox(width: largeScreen ? ZetaSpacing.x10 : ZetaSpacing.x5), + SizedBox(width: largeScreen ? ZetaSpacing.xL6 : ZetaSpacing.xL), Expanded( child: Text( // x-release-please-start-version @@ -85,7 +85,7 @@ class _IntroductionWidgetbookState extends State { borderRadius: BorderRadius.only(bottomLeft: radius, bottomRight: radius), ), width: double.infinity, - padding: EdgeInsets.all(ZetaSpacing.x8), + padding: EdgeInsets.all(ZetaSpacing.xL4), child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ @@ -155,12 +155,12 @@ class _CodeWrapperWidget extends StatelessWidget { ), if (language.isNotEmpty) Positioned( - top: ZetaSpacing.x2, + top: ZetaSpacing.small, right: 0, child: SelectionContainer.disabled( child: Container( child: Text(language), - padding: EdgeInsets.symmetric(vertical: ZetaSpacing.x1, horizontal: ZetaSpacing.x3), + padding: EdgeInsets.symmetric(vertical: ZetaSpacing.minimum, horizontal: ZetaSpacing.medium), decoration: BoxDecoration(color: colors.cool.shade40, borderRadius: ZetaRadius.rounded), ), ), diff --git a/lib/src/components/checkbox/checkbox.dart b/lib/src/components/checkbox/checkbox.dart index 17c644f9..9ab1abe6 100644 --- a/lib/src/components/checkbox/checkbox.dart +++ b/lib/src/components/checkbox/checkbox.dart @@ -179,7 +179,7 @@ class _CheckboxState extends State<_Checkbox> { ? ZetaIcons.remove_round : ZetaIcons.remove_sharp, color: !widget.disabled ? theme.colors.white : theme.colors.iconDisabled, - size: ZetaSpacing.x3_5, + size: ZetaSpacingBase.x3_5, ); return Flex( @@ -198,11 +198,7 @@ class _CheckboxState extends State<_Checkbox> { ), ], color: _getBackground(theme), -<<<<<<< HEAD - border: Border.all(color: _getBorderColor(theme), width: ZetaSpacing.x0_5), -======= - border: widget.enabled ? Border.all(color: _getBorderColor(theme), width: ZetaSpacingBase.x0_5) : null, ->>>>>>> 57778e5 (update : Spacings + radii (#47)) + border: Border.all(color: _getBorderColor(theme), width: ZetaSpacingBase.x0_5), borderRadius: widget.rounded ? ZetaRadius.minimal : ZetaRadius.none, ), width: ZetaSpacing.xL, diff --git a/lib/src/components/list_item/notification_list_item.dart b/lib/src/components/list_item/notification_list_item.dart index 460420e1..a23b405a 100644 --- a/lib/src/components/list_item/notification_list_item.dart +++ b/lib/src/components/list_item/notification_list_item.dart @@ -116,27 +116,27 @@ class _ZetaNotificationListItemState extends State { style: ZetaTextStyles.bodySmall.apply(color: colors.textDisabled), ), Container( - padding: const EdgeInsets.all(ZetaSpacing.x0_5), + padding: const EdgeInsets.all(2), decoration: BoxDecoration(color: colors.surfaceNegative, borderRadius: ZetaRadius.full), child: Icon( ZetaIcons.important_notification_round, color: colors.white, - size: ZetaSpacing.x3, + size: ZetaSpacing.medium, ), ), - ].gap(ZetaSpacing.x1), + ].gap(ZetaSpacing.minimum), ), ], ), widget.body, - ].gap(ZetaSpacing.x1), + ].gap(ZetaSpacing.minimum), ), ), - ].gap(ZetaSpacing.x2), + ].gap(ZetaSpacing.small), ), Container(alignment: Alignment.centerRight, child: widget.action), ], - ).paddingAll(ZetaSpacing.x2), + ).paddingAll(ZetaSpacing.small), ); } @@ -144,8 +144,9 @@ class _ZetaNotificationListItemState extends State { return BoxDecoration( color: widget.notificationRead ? colors.surfacePrimary : colors.surfaceSelected, borderRadius: ZetaRadius.rounded, - border: - (widget.showDivider ?? false) ? Border(bottom: BorderSide(width: ZetaSpacing.x1, color: colors.blue)) : null, + border: (widget.showDivider ?? false) + ? Border(bottom: BorderSide(width: ZetaSpacing.minimum, color: colors.blue)) + : null, ); } } @@ -212,13 +213,13 @@ class ZetaNotificationBadge extends StatelessWidget { : icon != null ? Icon( icon, - size: ZetaSpacing.x12, + size: ZetaSpacing.xL8, color: iconColor, ) : ClipRRect( borderRadius: ZetaRadius.rounded, child: SizedBox.fromSize( - size: const Size.square(ZetaSpacing.x12), // Image radius + size: const Size.square(ZetaSpacing.xL8), // Image radius child: image!.copyWith(fit: BoxFit.cover), ), ); diff --git a/lib/src/theme/tokens.dart b/lib/src/theme/tokens.dart index 41025080..006da941 100644 --- a/lib/src/theme/tokens.dart +++ b/lib/src/theme/tokens.dart @@ -4,7 +4,6 @@ import 'package:flutter/material.dart'; /// /// Values are doubles, and can be used for padding, margins and other spacings. /// -// TODO(thelukewalton): Refactor to match latest designs. /// Semantic zeta spacings. class ZetaSpacing { /// No spacing => 0px. @@ -54,6 +53,138 @@ class ZetaSpacing { /// 11xL spacing => 96px static const double xL11 = ZetaSpacingBase.x15; + + /// Base multiplier used to calculate spacing values. + @Deprecated('Use minimum instead ' 'This size has been deprecated as of 0.11.0') + static const double spacingBaseMultiplier = 4; + + /// 2dp space. + @Deprecated('Use ZetaSpacingBase.x0_5 instead ' 'This size has been deprecated as of 0.11.0') + static const double x0_5 = spacingBaseMultiplier * 0.5; + + /// 4dp space. + @Deprecated('Use minimum instead ' 'This size has been deprecated as of 0.11.0') + static const double x1 = spacingBaseMultiplier; + + /// 4dp space. + @Deprecated('Use minimum instead ' 'This size has been deprecated as of 0.11.0') + static const double xxs = spacingBaseMultiplier; + + /// 8dp space. + @Deprecated('Use small instead ' 'This size has been deprecated as of 0.11.0') + static const double x2 = spacingBaseMultiplier * 2; + + /// 8dp space. + @Deprecated('Use small instead ' 'This size has been deprecated as of 0.11.0') + static const double xs = spacingBaseMultiplier * 2; + + /// 10dp space. + @Deprecated('Use ZetaSpacingBase.x2_5 instead ' 'This size has been deprecated as of 0.11.0') + static const double x2_5 = spacingBaseMultiplier * 2.5; + + /// 12dp space. + @Deprecated('Use medium instead ' 'This size has been deprecated as of 0.11.0') + static const double x3 = spacingBaseMultiplier * 3; + + /// 12dp space. + @Deprecated('Use medium instead ' 'This size has been deprecated as of 0.11.0') + static const double s = spacingBaseMultiplier * 3; + + /// 14dp space. + @Deprecated('Use ZetaSpacingBase.x3_5 instead ' 'This size has been deprecated as of 0.11.0') + static const double x3_5 = spacingBaseMultiplier * 3.5; + + /// 16dp space. + @Deprecated('Use large instead ' 'This size has been deprecated as of 0.11.0') + static const double x4 = spacingBaseMultiplier * 4; + + /// 16dp space. + @Deprecated('Use large instead ' 'This size has been deprecated as of 0.11.0') + static const double b = spacingBaseMultiplier * 4; + + /// 20dp space. + @Deprecated('Use xL instead ' 'This size has been deprecated as of 0.11.0') + static const double x5 = spacingBaseMultiplier * 5; + + /// 24dp space. + @Deprecated('Use xL2 instead ' 'This size has been deprecated as of 0.11.0') + static const double x6 = spacingBaseMultiplier * 6; + + /// 24dp space. + @Deprecated('Use xL2 instead ' 'This size has been deprecated as of 0.11.0') + static const double m = spacingBaseMultiplier * 6; + + /// 28dp space. + @Deprecated('Use xL3 instead ' 'This size has been deprecated as of 0.11.0') + static const double x7 = spacingBaseMultiplier * 7; + + /// 30dp space. + @Deprecated('Use ZetaSpacingBase.x7_5 instead ' 'This size has been deprecated as of 0.11.0') + static const double x7_5 = spacingBaseMultiplier * 7.5; + + /// 32dp space. + @Deprecated('Use xL4 instead ' 'This size has been deprecated as of 0.11.0') + static const double x8 = spacingBaseMultiplier * 8; + + /// 32dp space. + @Deprecated('Use xL4 instead ' 'This size has been deprecated as of 0.11.0') + static const double l = spacingBaseMultiplier * 8; + + /// 36dp space. + @Deprecated('Use xL5 instead ' 'This size has been deprecated as of 0.11.0') + static const double x9 = spacingBaseMultiplier * 9; + + /// 40dp space. + @Deprecated('Use xL6 instead ' 'This size has been deprecated as of 0.11.0') + static const double x10 = spacingBaseMultiplier * 10; + + /// 44dp space. + @Deprecated('Use xL7 instead ' 'This size has been deprecated as of 0.11.0') + static const double x11 = spacingBaseMultiplier * 11; + + /// 48dp space. + @Deprecated('Use xL8 instead ' 'This size has been deprecated as of 0.11.0') + static const double x12 = spacingBaseMultiplier * 12; + + /// 52dp Space. + @Deprecated('This size has been deprecated as of 0.11.0') + static const double x13 = spacingBaseMultiplier * 13; + + /// 56dp Space. + @Deprecated('Use ZetaSpacingBase.x12_5 instead ' 'This size has been deprecated as of 0.11.0') + static const double x14 = spacingBaseMultiplier * 14; + + /// 64dp space. + @Deprecated('Use xL9 instead ' 'This size has been deprecated as of 0.11.0') + static const double x16 = spacingBaseMultiplier * 16; + + /// 64dp space. + @Deprecated('Use xL9 instead ' 'This size has been deprecated as of 0.11.0') + static const double xl = spacingBaseMultiplier * 16; + + /// 80dp space. + @Deprecated('Use xL10 instead ' 'This size has been deprecated as of 0.11.0') + static const double x20 = spacingBaseMultiplier * 20; + + /// 80dp space. + @Deprecated('Use xL10 instead ' 'This size has been deprecated as of 0.11.0') + static const double xxl = spacingBaseMultiplier * 20; + + /// 96dp space. + @Deprecated('Use xL11 instead ' 'This size has been deprecated as of 0.11.0') + static const double x24 = spacingBaseMultiplier * 24; + + /// 96dp space. + @Deprecated('Use xL11 instead ' 'This size has been deprecated as of 0.11.0') + static const double xxxl = spacingBaseMultiplier * 24; + + /// 120dp space + @Deprecated('Use ZetaSpacingBase.x30 instead ' 'This size has been deprecated as of 0.11.0') + static const double x30 = spacingBaseMultiplier * 30; + + /// 200dp space + @Deprecated('Use ZetaSpacingBase.x50 instead ' 'This size has been deprecated as of 0.11.0') + static const double x50 = spacingBaseMultiplier * 50; } /// Semantic zeta radii. @@ -75,6 +206,10 @@ class ZetaRadius { /// Full radius => 360px radius. static const BorderRadius full = ZetaRadiusBase.x4; + + /// Wide border radius; 24px radius. + @Deprecated('Use xL instead ' 'This size has been deprecated as of 0.11.0') + static const BorderRadius wide = BorderRadius.all(Radius.circular(ZetaSpacing.m)); } ///Tokens that are used for Spacing