feat!: [MDS-1264] Release v1.0.0 (#432)

Co-authored-by: Hub <79840500+GittHub-d@users.noreply.github.com> Co-authored-by: Birgitt Majas <birgitt.majas@yolo.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
coingaming · Aug 2, 2024 · a7c8713 · a7c8713
1 parent 5259f24
commit a7c8713
Show file tree

Hide file tree

Showing 37 changed files with 547 additions and 1,101 deletions.
diff --git a/README.md b/README.md
@@ -7,6 +7,10 @@
 _Note: This project uses **[Release Please](https://github.com/googleapis/release-please)** and **[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/)** spec, please follow the conventions or consider using **[Commitizen](https://github.com/commitizen/cz-cli)**
 to write commit messages._
 
+## Disclaimer
+
+The current major release, v1.0.0, will be maintained as-is and will not receive further updates, except for patches. The v1 theming is based on the soon-to-be deprecated Moon Design Figma v1 and lacks flexibility. For greater control over theming with v1 of moon_flutter, it is recommended to create custom wrapper widgets around the moon_flutter widgets that align with your project's specific theming requirements.
+
 ## Resources
 
 - 📱 [Playground](https://flutter.moon.io)
@@ -22,7 +26,13 @@ final lightTokens = MoonTokens.light.copyWith(
     textPrimary: Colors.amber,
   ),
   typography: MoonTypography.typography.copyWith(
-    heading: MoonTypography.typography.heading.apply(fontFamily: "DMSans"),
+    heading: MoonTypography.typography.heading.apply(
+      // Using variable font and bumping down the font weight compared to the
+      // baseline 600 for heading.
+      fontFamily: "DMSans",
+      fontWeightDelta: -1,
+      fontVariations: [const FontVariation('wght', 500)],
+    ),
   ),
 );
 

diff --git a/example/assets/code_snippets/breadcrumb.md b/example/assets/code_snippets/breadcrumb.md
@@ -11,7 +11,6 @@ class BreadcrumbStory extends StatefulWidget {
 
 class _BreadcrumbStoryState extends State<BreadcrumbStory> {
   bool _showDropdown = false;
-  Color? _dropdownIconColor;
 
   @override
   Widget build(BuildContext context) {
@@ -50,38 +49,21 @@ class _BreadcrumbStoryState extends State<BreadcrumbStory> {
                 ? MoonIcons.controls_chevron_right_small_16_light
                 : MoonIcons.controls_chevron_left_small_16_light,
           ),
-          showMoreWidget: MoonDropdown(
-            show: _showDropdown,
-            onTapOutside: () => setState(() {
-              _showDropdown = false;
-              _dropdownIconColor = context.moonColors!.iconSecondary;
-            }),
-            content: Column(
-              children: List.generate(
-                3,
-                (int index) => MoonMenuItem(
-                  onTap: () {},
-                  label: Text('Page ${index + 1}'),
-                ),
-              ),
-            ),
-            child: Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 8),
-              child: MouseRegion(
-                onHover: (PointerHoverEvent _) {
-                  setState(() => _dropdownIconColor = context.moonColors!.iconPrimary);
-                },
-                onExit: (PointerExitEvent _) {
-                  if (!_showDropdown) setState(() => _dropdownIconColor = context.moonColors!.iconSecondary);
-                },
-                child: MoonButton.icon(
-                  buttonSize: MoonButtonSize.xs,
-                  hoverEffectColor: Colors.transparent,
-                  iconColor: _dropdownIconColor ?? context.moonColors!.iconSecondary,
-                  onTap: () => setState(() => _showDropdown = !_showDropdown),
-                  icon: const Icon(MoonIcons.generic_burger_regular_16_light),
+          showMoreWidget: MoonBreadcrumbItem(
+            onTap: () => setState(() => _showDropdown = !_showDropdown),
+            label: MoonDropdown(
+              show: _showDropdown,
+              onTapOutside: () => setState(() => _showDropdown = false),
+              content: Column(
+                children: List.generate(
+                  3,
+                  (int index) => MoonMenuItem(
+                    onTap: () {},
+                    label: Text('Page ${index + 1}'),
+                  ),
                 ),
               ),
+              child: const Icon(MoonIcons.generic_burger_regular_16_light),
             ),
           ),
           items: List.generate(

diff --git a/example/lib/src/storybook/stories/primitives/bottom_sheet.dart b/example/lib/src/storybook/stories/primitives/bottom_sheet.dart
@@ -65,7 +65,9 @@ class BottomSheetStory extends StatelessWidget {
             ? MediaQuery.of(context).size.height * heightKnob
             : MediaQuery.of(context).size.height * 0.7,
         closeProgressThreshold: closeProgressThresholdKnob,
-        borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
+        borderRadius: borderRadiusKnob != null
+            ? BorderRadius.circular(borderRadiusKnob.toDouble())
+            : null,
         builder: (BuildContext context) => Column(
           children: [
             Container(
@@ -84,7 +86,7 @@ class BottomSheetStory extends StatelessWidget {
                   child: Center(
                     child: Text(
                       'Pick your choice!',
-                      style: MoonTypography.typography.heading.text16,
+                      style: MoonTypography.typography.body.text16,
                     ),
                   ),
                 ),

diff --git a/example/lib/src/storybook/stories/primitives/breadcrumb.dart b/example/lib/src/storybook/stories/primitives/breadcrumb.dart
@@ -1,6 +1,7 @@
+import 'dart:math';
+
 import 'package:example/src/storybook/common/color_options.dart';
 import 'package:example/src/storybook/common/widgets/text_divider.dart';
-import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:moon_design/moon_design.dart';
 import 'package:storybook_flutter/storybook_flutter.dart';
@@ -16,7 +17,6 @@ class BreadcrumbStory extends StatefulWidget {
 
 class _BreadcrumbStoryState extends State<BreadcrumbStory> {
   bool _showDropdown = false;
-  Color? _dropdownIconColor;
 
   @override
   Widget build(BuildContext context) {
@@ -98,6 +98,35 @@ class _BreadcrumbStoryState extends State<BreadcrumbStory> {
       description: "Show widget in MoonBreadcrumb item trailing slot.",
     );
 
+    final List<MoonBreadcrumbItem> breadcrumbItems = List.generate(
+      itemCountKnob ?? 7,
+      (int index) {
+        final bool isHomePage = index == 0;
+
+        return MoonBreadcrumbItem(
+          semanticLabel: index.toString(),
+          onTap: () => MoonToast.show(
+            context,
+            displayDuration: const Duration(seconds: 1),
+            label: Text(isHomePage ? 'Home Page' : 'Page $index'),
+          ),
+          leading: showLeadingKnob && isHomePage
+              ? const Icon(
+                  MoonIcons.generic_home_16_light,
+                  size: 16,
+                )
+              : null,
+          label: Text(isHomePage ? 'Home' : 'Page $index'),
+          trailing: showTrailingKnob && isHomePage
+              ? const Icon(
+                  MoonIcons.generic_home_16_light,
+                  size: 16,
+                )
+              : null,
+        );
+      },
+    );
+
     return Center(
       child: SingleChildScrollView(
         padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0),
@@ -108,50 +137,28 @@ class _BreadcrumbStoryState extends State<BreadcrumbStory> {
               text: "MoonBreadcrumb",
               paddingTop: 0,
             ),
-            Column(
-              children: [
-                MoonBreadcrumb(
-                  visibleItemCount: visibleItemCountKnob ?? 3,
-                  gap: gapKnob?.toDouble(),
-                  padding: const EdgeInsets.symmetric(horizontal: 16),
-                  hoverEffectColor: hoverEffectColor,
-                  dividerColor: dividerColor,
-                  itemTextStyle: TextStyle(color: itemColor),
-                  currentItemTextStyle: TextStyle(color: currentItemColor),
-                  items: List.generate(
-                    itemCountKnob ?? 7,
-                    (int index) {
-                      final bool isHomePage = index == 0;
-
-                      return MoonBreadcrumbItem(
-                        onTap: () => MoonToast.show(
-                          context,
-                          displayDuration: const Duration(seconds: 1),
-                          label: Text(isHomePage ? 'Home Page' : 'Page $index'),
-                        ),
-                        leading:
-                            showLeadingKnob && isHomePage ? const Icon(MoonIcons.generic_home_16_light, size: 16) : null,
-                        label: Text(isHomePage ? 'Home' : 'Page $index'),
-                        trailing:
-                            showTrailingKnob && isHomePage ? const Icon(MoonIcons.generic_home_16_light, size: 16) : null,
-                      );
-                    },
-                  ),
-                ),
-                const SizedBox(height: 16),
-                MoonButton(
-                  backgroundColor: context.moonColors!.piccolo,
-                  onTap: () => setState(() => {}),
-                  label: Text(
-                    'Reset',
-                    style: TextStyle(color: context.moonColors!.goten),
-                  ),
-                ),
-              ],
+            MoonBreadcrumb(
+              visibleItemCount: visibleItemCountKnob ?? 3,
+              gap: gapKnob?.toDouble(),
+              padding: const EdgeInsets.symmetric(horizontal: 16),
+              hoverEffectColor: hoverEffectColor,
+              dividerColor: dividerColor,
+              itemTextStyle: TextStyle(color: itemColor),
+              currentItemTextStyle: TextStyle(color: currentItemColor),
+              items: breadcrumbItems,
+            ),
+            const SizedBox(height: 32),
+            MoonButton(
+              backgroundColor: context.moonColors!.piccolo,
+              onTap: () => setState(() => {}),
+              label: Text(
+                'Reset',
+                style: TextStyle(color: context.moonColors!.goten),
+              ),
             ),
             const TextDivider(text: "Custom MoonBreadcrumb with MoonDropdown"),
             StatefulBuilder(
-              builder: (context, setState) {
+              builder: (BuildContext context, StateSetter setState) {
                 return MoonBreadcrumb(
                   visibleItemCount: visibleItemCountKnob ?? 3,
                   gap: gapKnob?.toDouble(),
@@ -168,74 +175,37 @@ class _BreadcrumbStoryState extends State<BreadcrumbStory> {
                         ? MoonIcons.controls_chevron_right_small_16_light
                         : MoonIcons.controls_chevron_left_small_16_light,
                   ),
-                  showMoreWidget: MoonDropdown(
-                    show: _showDropdown,
-                    onTapOutside: () => setState(() {
-                      _showDropdown = false;
-                      _dropdownIconColor = context.moonColors!.iconSecondary;
-                    }),
-                    content: Column(
-                      children: List.generate(
-                        4,
-                        (int index) => MoonMenuItem(
-                          width: 120,
-                          onTap: () => MoonToast.show(
-                            context,
-                            displayDuration: const Duration(seconds: 1),
+                  showMoreWidget: MoonBreadcrumbItem(
+                    onTap: () => setState(() => _showDropdown = !_showDropdown),
+                    label: MoonDropdown(
+                      maxHeight: 250,
+                      maxWidth: 150,
+                      show: _showDropdown,
+                      onTapOutside: () => setState(() => _showDropdown = false),
+                      content: ListView(
+                        shrinkWrap: true,
+                        padding: EdgeInsets.zero,
+                        children: List.generate(
+                          max(
+                            (itemCountKnob ?? 7) - (visibleItemCountKnob ?? 3),
+                            0,
+                          ),
+                          (int index) => MoonMenuItem(
+                            onTap: () => MoonToast.show(
+                              context,
+                              displayDuration: const Duration(seconds: 1),
+                              label: Text('Page ${index + 1}'),
+                            ),
                             label: Text('Page ${index + 1}'),
                           ),
-                          label: Text('Page ${index + 1}'),
                         ),
                       ),
-                    ),
-                    child: Padding(
-                      padding: EdgeInsets.symmetric(horizontal: gapKnob?.toDouble() ?? 8),
-                      child: MouseRegion(
-                        onHover: (PointerHoverEvent event) {
-                          setState(() => _dropdownIconColor = hoverEffectColor ?? context.moonColors!.iconPrimary);
-                        },
-                        onExit: (PointerExitEvent event) {
-                          if (!_showDropdown) {
-                            setState(() => _dropdownIconColor = itemColor ?? context.moonColors!.iconSecondary);
-                          }
-                        },
-                        child: MoonButton.icon(
-                          buttonSize: MoonButtonSize.xs,
-                          hoverEffectColor: Colors.transparent,
-                          iconColor: _dropdownIconColor ?? context.moonColors!.iconSecondary,
-                          icon: const Icon(MoonIcons.generic_burger_regular_16_light),
-                          onTap: () => setState(() => _showDropdown = !_showDropdown),
-                        ),
+                      child: const Icon(
+                        MoonIcons.generic_burger_regular_16_light,
                       ),
                     ),
                   ),
-                  items: List.generate(
-                    itemCountKnob ?? 7,
-                    (int index) {
-                      final bool isHomePage = index == 0;
-
-                      return MoonBreadcrumbItem(
-                        onTap: () => MoonToast.show(
-                          context,
-                          displayDuration: const Duration(seconds: 1),
-                          label: Text(isHomePage ? 'Home Page' : 'Page $index'),
-                        ),
-                        leading: showLeadingKnob && isHomePage
-                            ? const Icon(
-                                MoonIcons.generic_home_16_light,
-                                size: 16,
-                              )
-                            : null,
-                        label: Text(isHomePage ? 'Home' : 'Page $index'),
-                        trailing: showTrailingKnob && isHomePage
-                            ? const Icon(
-                                MoonIcons.generic_home_16_light,
-                                size: 16,
-                              )
-                            : null,
-                      );
-                    },
-                  ),
+                  items: breadcrumbItems,
                 );
               },
             ),

diff --git a/example/lib/src/storybook/stories/primitives/drawer.dart b/example/lib/src/storybook/stories/primitives/drawer.dart
@@ -55,13 +55,11 @@ class DrawerStory extends StatelessWidget {
         drawerScrimColor: barrierColor,
         drawer: MoonDrawer(
           backgroundColor: backgroundColor,
-          barrierColor: barrierColorKnob != null
-              ? barrierColor
-              : context.moonTheme?.drawerTheme.colors.barrierColor ?? MoonColors.light.zeno,
           borderRadius: BorderRadiusDirectional.horizontal(
             end: Radius.circular(borderRadiusKnob?.toDouble() ?? 0),
           ),
-          width: drawerWidthKnob?.toDouble() ?? MediaQuery.of(context).size.width,
+          width: drawerWidthKnob?.toDouble() ??
+              MediaQuery.of(context).size.width * 0.8,
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
@@ -82,7 +80,10 @@ class DrawerStory extends StatelessWidget {
           child: Builder(
             builder: (BuildContext context) {
               return Padding(
-                padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0),
+                padding: const EdgeInsets.symmetric(
+                  vertical: 64.0,
+                  horizontal: 16.0,
+                ),
                 child: MoonFilledButton(
                   label: const Text("Tap me"),
                   onTap: () => Scaffold.of(context).openDrawer(),

diff --git a/example/lib/src/storybook/stories/primitives/linear_progress.dart b/example/lib/src/storybook/stories/primitives/linear_progress.dart
@@ -44,7 +44,8 @@ class LinearProgressStory extends StatelessWidget {
       options: colorOptions,
     );
 
-    final backgroundColor = colorTable(context)[progressBackgroundColorKnob ?? 40];
+    final backgroundColor =
+        colorTable(context)[progressBackgroundColorKnob ?? 40];
 
     final pinColorKnob = context.knobs.nullable.options(
       label: "pinColor",
@@ -116,13 +117,15 @@ class LinearProgressStory extends StatelessWidget {
 
     return Center(
       child: Padding(
-        padding: const EdgeInsets.symmetric(vertical: 64, horizontal: 16),
+        padding: const EdgeInsets.symmetric(vertical: 64, horizontal: 20),
         child: MoonLinearProgress(
           linearProgressSize: progressSizeKnob,
           value: linearProgressValueKnob,
           color: color,
           backgroundColor: backgroundColor,
-          borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
+          borderRadius: borderRadiusKnob != null
+              ? BorderRadius.circular(borderRadiusKnob.toDouble())
+              : null,
           showMinLabel: showMinLabelKnob,
           showMaxLabel: showMaxLabelKnob,
           showPin: showPinKnob,

diff --git a/example/lib/src/storybook/stories/primitives/tab_bar.dart b/example/lib/src/storybook/stories/primitives/tab_bar.dart
@@ -186,6 +186,7 @@ class _TabBarStoryState extends State<TabBarStory>
                   tabs: List.generate(
                     4,
                     (int index) => MoonTab(
+                      disabled: index == 1,
                       trailing: const Icon(MoonIcons.other_frame_24_light),
                       tabStyle: tabStyle,
                     ),