feat: [MDS-448] Create Modal widget

example/lib/src/storybook/common/options.dart

@@ -47,11 +47,12 @@ List<Option<int>> colorOptions = const [
   Option(label: "whis100", value: 36),
   Option(label: "whis60", value: 37),
   Option(label: "whis10", value: 38),
-  Option(label: "none", value: 39),
+  Option(label: "transparent", value: 39),
+  Option(label: "null", value: 40),
 ];
 
 /// LUT for the color options.
-List<Color> colorTable(BuildContext context) => [
+List<Color?> colorTable(BuildContext context) => [
       context.moonColors!.piccolo,
       context.moonColors!.hit,
       context.moonColors!.beerus,
@@ -92,4 +93,5 @@ List<Color> colorTable(BuildContext context) => [
       context.moonColors!.whis60,
       context.moonColors!.whis10,
       Colors.transparent,
+      null,
     ];

example/lib/src/storybook/stories/modal.dart

@@ -0,0 +1,115 @@
+import 'package:example/src/storybook/common/options.dart';
+import 'package:flutter/material.dart';
+import 'package:moon_design/moon_design.dart';
+import 'package:storybook_flutter/storybook_flutter.dart';
+
+class ModalStory extends Story {
+  ModalStory()
+      : super(
+          name: "Modal",
+          builder: (context) {
+            final backgroundColorsKnob = context.knobs.options(
+              label: "backgroundColor",
+              description: "MoonColors variants for Modal background.",
+              initial: 40, // null
+              options: colorOptions,
+            );
+
+            final backgroundColor = colorTable(context)[backgroundColorsKnob];
+
+            final barrierColorsKnob = context.knobs.options(
+              label: "barrierColor",
+              description: "MoonColors variants for Modal barrier.",
+              initial: 40, // null
+              options: colorOptions,
+            );
+
+            final barrierColor = colorTable(context)[barrierColorsKnob];
+
+            final borderRadiusKnob = context.knobs.sliderInt(
+              max: 20,
+              initial: 8,
+              label: "borderRadius",
+              description: "Border radius for Modal.",
+            );
+
+            final setRtlModeKnob = context.knobs.boolean(
+              label: "RTL mode",
+              description: "Switch between LTR and RTL modes.",
+            );
+
+            Future<void> modalBuilder(BuildContext context) {
+              return showMoonModal<void>(
+                context: context,
+                useRootNavigator: false,
+                barrierColor: barrierColor,
+                builder: (_) {
+                  return MoonModal(
+                    backgroundColor: backgroundColor,
+                    borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()),
+                    child: Directionality(
+                      textDirection: Directionality.of(context),
+                      child: SizedBox(
+                        width: 300,
+                        child: Column(
+                          mainAxisSize: MainAxisSize.min,
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            Padding(
+                              padding: const EdgeInsets.fromLTRB(24, 20, 24, 16),
+                              child: Text(
+                                "Modal title",
+                                style: context.moonTypography!.heading.text18,
+                              ),
+                            ),
+                            Container(
+                              height: 1,
+                              color: context.moonColors!.trunks,
+                            ),
+                            Padding(
+                              padding: const EdgeInsets.fromLTRB(24, 16, 24, 16),
+                              child: Text(
+                                "Reopen the modal to see the new knob value changes.",
+                                style: context.moonTypography!.body.text14,
+                              ),
+                            ),
+                            Padding(
+                              padding: const EdgeInsets.fromLTRB(24, 16, 24, 24),
+                              child: MoonPrimaryButton(
+                                label: const Text("Okay"),
+                                isFullWidth: true,
+                                onTap: () => Navigator.of(context).pop(),
+                              ),
+                            ),
+                          ],
+                        ),
+                      ),
+                    ),
+                  );
+                },
+              );
+            }
+
+            return Directionality(
+              textDirection: setRtlModeKnob ? TextDirection.rtl : TextDirection.ltr,
+              child: Center(
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    const SizedBox(height: 64),
+                    Builder(
+                      builder: (context) {
+                        return MoonPrimaryButton(
+                          label: const Text("Open Modal"),
+                          onTap: () => modalBuilder(context),
+                        );
+                      },
+                    ),
+                    const SizedBox(height: 64),
+                  ],
+                ),
+              ),
+            );
+          },
+        );
+}

example/lib/src/storybook/storybook.dart

@@ -9,6 +9,7 @@ import 'package:example/src/storybook/stories/circular_progress.dart';
 import 'package:example/src/storybook/stories/icons.dart';
 import 'package:example/src/storybook/stories/linear_loader.dart';
 import 'package:example/src/storybook/stories/linear_progress.dart';
+import 'package:example/src/storybook/stories/modal.dart';
 import 'package:example/src/storybook/stories/popover.dart';
 import 'package:example/src/storybook/stories/radio.dart';
 import 'package:example/src/storybook/stories/switch.dart';
@@ -36,7 +37,7 @@ class StorybookPage extends StatelessWidget {
     return Stack(
       children: [
         Storybook(
-          initialStory: "Accordion",
+          initialStory: "Modal",
           plugins: _plugins,
           wrapperBuilder: (context, child) => MaterialApp(
             title: "Moon Design for Flutter",
@@ -78,6 +79,7 @@ class StorybookPage extends StatelessWidget {
             IconsStory(),
             LinearLoaderStory(),
             LinearProgressStory(),
+            ModalStory(),
             PopoverStory(),
             RadioStory(),
             SwitchStory(),

lib/moon_design.dart

@@ -10,6 +10,7 @@ export 'package:moon_design/src/theme/colors.dart';
 export 'package:moon_design/src/theme/effects/effects.dart';
 export 'package:moon_design/src/theme/loaders/circular_loader/circular_loader_theme.dart';
 export 'package:moon_design/src/theme/loaders/linear_loader/linear_loader_theme.dart';
+export 'package:moon_design/src/theme/modal/modal_theme.dart';
 export 'package:moon_design/src/theme/opacity.dart';
 export 'package:moon_design/src/theme/popover/popover_theme.dart';
 export 'package:moon_design/src/theme/progress/circular_progress/circular_progress_theme.dart';
@@ -47,6 +48,7 @@ export 'package:moon_design/src/widgets/common/progress_indicators/circular_prog
 export 'package:moon_design/src/widgets/common/progress_indicators/linear_progress_indicator.dart';
 export 'package:moon_design/src/widgets/loaders/circular_loader.dart';
 export 'package:moon_design/src/widgets/loaders/linear_loader.dart';
+export 'package:moon_design/src/widgets/modal/modal.dart';
 export 'package:moon_design/src/widgets/popover/popover.dart';
 export 'package:moon_design/src/widgets/progress/circular_progress.dart';
 export 'package:moon_design/src/widgets/progress/linear_progress.dart';

lib/src/theme/modal/modal_colors.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:moon_design/src/theme/colors.dart';
+
+@immutable
+class MoonModalColors extends ThemeExtension<MoonModalColors> with DiagnosticableTreeMixin {
+  static final light = MoonModalColors(
+    backgroundColor: MoonColors.light.gohan,
+    barrierColor: MoonColors.light.zeno,
+  );
+
+  static final dark = MoonModalColors(
+    backgroundColor: MoonColors.dark.gohan,
+    barrierColor: MoonColors.dark.zeno,
+  );
+
+  /// Modal background color.
+  final Color backgroundColor;
+
+  /// Modal barrier color.
+  final Color barrierColor;
+
+  const MoonModalColors({
+    required this.backgroundColor,
+    required this.barrierColor,
+  });
+
+  @override
+  MoonModalColors copyWith({
+    Color? backgroundColor,
+    Color? barrierColor,
+  }) {
+    return MoonModalColors(
+      backgroundColor: backgroundColor ?? this.backgroundColor,
+      barrierColor: barrierColor ?? this.barrierColor,
+    );
+  }
+
+  @override
+  MoonModalColors lerp(ThemeExtension<MoonModalColors>? other, double t) {
+    if (other is! MoonModalColors) return this;
+
+    return MoonModalColors(
+      backgroundColor: Color.lerp(backgroundColor, other.backgroundColor, t)!,
+      barrierColor: Color.lerp(barrierColor, other.barrierColor, t)!,
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonModalColors"))
+      ..add(ColorProperty("backgroundColor", backgroundColor))
+      ..add(ColorProperty("barrierColor", barrierColor));
+  }
+}

lib/src/theme/modal/modal_properties.dart

@@ -0,0 +1,62 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:moon_design/src/theme/borders.dart';
+
+@immutable
+class MoonModalProperties extends ThemeExtension<MoonModalProperties> with DiagnosticableTreeMixin {
+  static final properties = MoonModalProperties(
+    borderRadius: MoonBorders.borders.surfaceSm,
+    transitionDuration: const Duration(milliseconds: 200),
+    transitionCurve: Curves.easeInOutCubic,
+  );
+
+  /// Modal border radius.
+  final BorderRadius borderRadius;
+
+  /// Modal transition duration.
+  final Duration transitionDuration;
+
+  /// Modal transition curve.
+  final Curve transitionCurve;
+
+  const MoonModalProperties({
+    required this.borderRadius,
+    required this.transitionDuration,
+    required this.transitionCurve,
+  });
+
+  @override
+  MoonModalProperties copyWith({
+    BorderRadius? borderRadius,
+    Duration? transitionDuration,
+    Curve? transitionCurve,
+  }) {
+    return MoonModalProperties(
+      borderRadius: borderRadius ?? this.borderRadius,
+      transitionDuration: transitionDuration ?? this.transitionDuration,
+      transitionCurve: transitionCurve ?? this.transitionCurve,
+    );
+  }
+
+  @override
+  MoonModalProperties lerp(ThemeExtension<MoonModalProperties>? other, double t) {
+    if (other is! MoonModalProperties) return this;
+
+    return MoonModalProperties(
+      borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!,
+      transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t),
+      transitionCurve: other.transitionCurve,
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonModalProperties"))
+      ..add(DiagnosticsProperty<BorderRadius>("borderRadius", borderRadius))
+      ..add(DiagnosticsProperty<Duration>("transitionDuration", transitionDuration))
+      ..add(DiagnosticsProperty<Curve>("transitionCurve", transitionCurve));
+  }
+}

lib/src/theme/modal/modal_theme.dart

@@ -0,0 +1,59 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:moon_design/src/theme/modal/modal_colors.dart';
+import 'package:moon_design/src/theme/modal/modal_properties.dart';
+
+@immutable
+class MoonModalTheme extends ThemeExtension<MoonModalTheme> with DiagnosticableTreeMixin {
+  static final light = MoonModalTheme(
+    colors: MoonModalColors.light,
+    properties: MoonModalProperties.properties,
+  );
+
+  static final dark = MoonModalTheme(
+    colors: MoonModalColors.dark,
+    properties: MoonModalProperties.properties,
+  );
+
+  /// Checkbox colors.
+  final MoonModalColors colors;
+
+  /// Checkbox properties.
+  final MoonModalProperties properties;
+
+  const MoonModalTheme({
+    required this.colors,
+    required this.properties,
+  });
+
+  @override
+  MoonModalTheme copyWith({
+    MoonModalColors? colors,
+    MoonModalProperties? properties,
+  }) {
+    return MoonModalTheme(
+      colors: colors ?? this.colors,
+      properties: properties ?? this.properties,
+    );
+  }
+
+  @override
+  MoonModalTheme lerp(ThemeExtension<MoonModalTheme>? other, double t) {
+    if (other is! MoonModalTheme) return this;
+
+    return MoonModalTheme(
+      colors: colors.lerp(other.colors, t),
+      properties: properties.lerp(other.properties, t),
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) {
+    super.debugFillProperties(diagnosticProperties);
+    diagnosticProperties
+      ..add(DiagnosticsProperty("type", "MoonModalTheme"))
+      ..add(DiagnosticsProperty<MoonModalColors>("colors", colors))
+      ..add(DiagnosticsProperty<MoonModalProperties>("properties", properties));
+  }
+}