feat: [MDS-915] Modify MoonToast to align with design (#320)

coingaming · Dec 21, 2023 · 7837be9 · 7837be9
1 parent 9129811
commit 7837be9
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 22 deletions.
diff --git a/example/lib/src/storybook/stories/toast.dart b/example/lib/src/storybook/stories/toast.dart
@@ -114,6 +114,11 @@ class ToastStory extends StatelessWidget {
       initial: true,
     );
 
+    final showBodyKnob = context.knobs.boolean(
+      label: "body",
+      description: "Show widget in MoonToast body slot.",
+    );
+
     return Center(
       child: Padding(
         padding: const EdgeInsets.symmetric(vertical: 64),
@@ -144,6 +149,15 @@ class ToastStory extends StatelessWidget {
                     MoonIcons.generic_star_24_light,
                     color: iconColor,
                   ),
+                  body: showBodyKnob
+                      ? Align(
+                          alignment: AlignmentDirectional.centerStart,
+                          child: Text(
+                            "Here goes MoonToast body",
+                            style: TextStyle(color: textColor),
+                          ),
+                        )
+                      : null,
                 );
               },
             );

diff --git a/lib/src/theme/toast/toast_properties.dart b/lib/src/theme/toast/toast_properties.dart
@@ -8,8 +8,11 @@ class MoonToastProperties extends ThemeExtension<MoonToastProperties> with Diagn
   /// Toast border radius.
   final BorderRadiusGeometry borderRadius;
 
-  /// Space between toast children.
-  final double gap;
+  /// The horizontal space between toast leading, trailing and title.
+  final double horizontalGap;
+
+  /// The vertical space between toast header and body.
+  final double verticalGap;
 
   /// Toast display duration.
   final Duration displayDuration;
@@ -28,7 +31,8 @@ class MoonToastProperties extends ThemeExtension<MoonToastProperties> with Diagn
 
   const MoonToastProperties({
     required this.borderRadius,
-    required this.gap,
+    required this.horizontalGap,
+    required this.verticalGap,
     required this.displayDuration,
     required this.transitionDuration,
     required this.transitionCurve,
@@ -39,7 +43,8 @@ class MoonToastProperties extends ThemeExtension<MoonToastProperties> with Diagn
   @override
   MoonToastProperties copyWith({
     BorderRadiusGeometry? borderRadius,
-    double? gap,
+    double? horizontalGap,
+    double? verticalGap,
     Duration? displayDuration,
     Duration? transitionDuration,
     Curve? transitionCurve,
@@ -48,7 +53,8 @@ class MoonToastProperties extends ThemeExtension<MoonToastProperties> with Diagn
   }) {
     return MoonToastProperties(
       borderRadius: borderRadius ?? this.borderRadius,
-      gap: gap ?? this.gap,
+      horizontalGap: horizontalGap ?? this.horizontalGap,
+      verticalGap: verticalGap ?? this.verticalGap,
       displayDuration: displayDuration ?? this.displayDuration,
       transitionDuration: transitionDuration ?? this.transitionDuration,
       transitionCurve: transitionCurve ?? this.transitionCurve,
@@ -63,7 +69,8 @@ class MoonToastProperties extends ThemeExtension<MoonToastProperties> with Diagn
 
     return MoonToastProperties(
       borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!,
-      gap: lerpDouble(gap, other.gap, t)!,
+      horizontalGap: lerpDouble(horizontalGap, other.horizontalGap, t)!,
+      verticalGap: lerpDouble(verticalGap, other.verticalGap, t)!,
       displayDuration: lerpDuration(displayDuration, other.displayDuration, t),
       transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t),
       transitionCurve: other.transitionCurve,
@@ -78,7 +85,7 @@ class MoonToastProperties extends ThemeExtension<MoonToastProperties> with Diagn
     properties
       ..add(DiagnosticsProperty("type", "MoonToastProperties"))
       ..add(DiagnosticsProperty<BorderRadiusGeometry>("borderRadius", borderRadius))
-      ..add(DoubleProperty("gap", gap))
+      ..add(DoubleProperty("horizontalGap", horizontalGap))
       ..add(DiagnosticsProperty<Duration>("displayDuration", displayDuration))
       ..add(DiagnosticsProperty<Duration>("transitionDuration", transitionDuration))
       ..add(DiagnosticsProperty<Curve>("transitionCurve", transitionCurve))

diff --git a/lib/src/theme/toast/toast_theme.dart b/lib/src/theme/toast/toast_theme.dart
@@ -37,7 +37,8 @@ class MoonToastTheme extends ThemeExtension<MoonToastTheme> with DiagnosticableT
         properties = properties ??
             MoonToastProperties(
               borderRadius: tokens.borders.surfaceSm,
-              gap: tokens.sizes.x2s,
+              horizontalGap: tokens.sizes.x2s,
+              verticalGap: tokens.sizes.x3s,
               displayDuration: const Duration(seconds: 3),
               transitionDuration: tokens.transitions.defaultTransitionDuration,
               transitionCurve: tokens.transitions.defaultTransitionCurve,

diff --git a/lib/src/widgets/toast/toast.dart b/lib/src/widgets/toast/toast.dart
@@ -48,8 +48,11 @@ class MoonToast {
     /// The background color of the toast.
     Color? backgroundColor,
 
-    /// The horizontal space between toast children.
-    double? gap,
+    /// The horizontal space between toast leading, trailing and title.
+    double? horizontalGap,
+
+    /// The vertical space between toast header and body.
+    double? verticalGap,
 
     /// The width of the toast. If null the toast will be as wide as its children.
     double? width,
@@ -90,6 +93,9 @@ class MoonToast {
 
     /// The widget in the trailing slot of the toast.
     Widget? trailing,
+
+    /// The widget in the body slot of the toast.
+    Widget? body,
   }) {
     final BorderRadiusGeometry effectiveBorderRadius =
         borderRadius ?? context.moonTheme?.toastTheme.properties.borderRadius ?? MoonBorders.borders.surfaceSm;
@@ -110,7 +116,11 @@ class MoonToast {
     final TextStyle effectiveTextStyle =
         context.moonTheme?.toastTheme.properties.textStyle ?? MoonTypography.typography.body.textDefault;
 
-    final double effectiveGap = gap ?? context.moonTheme?.toastTheme.properties.gap ?? MoonSizes.sizes.x2s;
+    final double effectiveHorizontalGap =
+        horizontalGap ?? context.moonTheme?.toastTheme.properties.horizontalGap ?? MoonSizes.sizes.x2s;
+
+    final double effectiveVerticalGap =
+        verticalGap ?? context.moonTheme?.toastTheme.properties.verticalGap ?? MoonSizes.sizes.x3s;
 
     final Duration effectiveDisplayDuration =
         displayDuration ?? context.moonTheme?.toastTheme.properties.displayDuration ?? const Duration(seconds: 3);
@@ -202,19 +212,29 @@ class MoonToast {
                               borderRadius: effectiveBorderRadius.squircleBorderRadius(context),
                             ),
                           ),
-                      child: Row(
+                      child: Column(
                         mainAxisSize: MainAxisSize.min,
-                        mainAxisAlignment: width != null ? MainAxisAlignment.spaceBetween : MainAxisAlignment.center,
-                        textDirection: Directionality.of(context),
                         children: [
-                          if (leading != null) ...[
-                            leading,
-                            SizedBox(width: effectiveGap),
-                          ],
-                          Flexible(child: title),
-                          if (trailing != null) ...[
-                            SizedBox(width: effectiveGap),
-                            trailing,
+                          Row(
+                            mainAxisSize: MainAxisSize.min,
+                            mainAxisAlignment:
+                                width != null ? MainAxisAlignment.spaceBetween : MainAxisAlignment.center,
+                            textDirection: Directionality.of(context),
+                            children: [
+                              if (leading != null) ...[
+                                leading,
+                                SizedBox(width: effectiveHorizontalGap),
+                              ],
+                              Flexible(child: title),
+                              if (trailing != null) ...[
+                                SizedBox(width: effectiveHorizontalGap),
+                                trailing,
+                              ],
+                            ],
+                          ),
+                          if (body != null) ...[
+                            SizedBox(height: effectiveVerticalGap),
+                            body,
                           ],
                         ],
                       ),