fix: [MDS-460] Various minor bug fixes (#95)

- Fix buttons with Tooltip are sticky. - Fix Storybook button naming and colors are inconsistent. - Fix overlay based stories should start as disabled at start.
coingaming · Mar 24, 2023 · 4e1772b · 4e1772b
1 parent 5cbd8e1
commit 4e1772b
Show file tree

Hide file tree

Showing 17 changed files with 33 additions and 28 deletions.
diff --git a/...ple/lib/src/storybook/common/options.dart → ...b/src/storybook/common/color_options.dart b/...ple/lib/src/storybook/common/options.dart → ...b/src/storybook/common/color_options.dart
diff --git a/example/lib/src/storybook/stories/accordion.dart b/example/lib/src/storybook/stories/accordion.dart
@@ -1,4 +1,4 @@
-import 'package:example/src/storybook/common/options.dart';
+import 'package:example/src/storybook/common/color_options.dart';
 import 'package:example/src/storybook/common/widgets/text_divider.dart';
 import 'package:flutter/material.dart';
 import 'package:moon_design/moon_design.dart';

diff --git a/example/lib/src/storybook/stories/avatar.dart b/example/lib/src/storybook/stories/avatar.dart
@@ -1,4 +1,4 @@
-import 'package:example/src/storybook/common/options.dart';
+import 'package:example/src/storybook/common/color_options.dart';
 import 'package:example/src/storybook/common/widgets/text_divider.dart';
 import 'package:flutter/material.dart';
 import 'package:moon_design/moon_design.dart';

diff --git a/example/lib/src/storybook/stories/button.dart b/example/lib/src/storybook/stories/button.dart
@@ -1,4 +1,4 @@
-import 'package:example/src/storybook/common/options.dart';
+import 'package:example/src/storybook/common/color_options.dart';
 import 'package:example/src/storybook/common/widgets/text_divider.dart';
 import 'package:flutter/material.dart';
 import 'package:moon_design/moon_design.dart';

diff --git a/example/lib/src/storybook/stories/checkbox.dart b/example/lib/src/storybook/stories/checkbox.dart
@@ -1,4 +1,4 @@
-import 'package:example/src/storybook/common/options.dart';
+import 'package:example/src/storybook/common/color_options.dart';
 import 'package:example/src/storybook/common/widgets/text_divider.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';

diff --git a/example/lib/src/storybook/stories/chip.dart b/example/lib/src/storybook/stories/chip.dart
@@ -1,4 +1,4 @@
-import 'package:example/src/storybook/common/options.dart';
+import 'package:example/src/storybook/common/color_options.dart';
 import 'package:example/src/storybook/common/widgets/text_divider.dart';
 import 'package:flutter/material.dart';
 import 'package:moon_design/moon_design.dart';

diff --git a/example/lib/src/storybook/stories/circular_loader.dart b/example/lib/src/storybook/stories/circular_loader.dart
@@ -1,4 +1,4 @@
-import 'package:example/src/storybook/common/options.dart';
+import 'package:example/src/storybook/common/color_options.dart';
 import 'package:flutter/material.dart';
 import 'package:moon_design/moon_design.dart';
 import 'package:storybook_flutter/storybook_flutter.dart';

diff --git a/example/lib/src/storybook/stories/circular_progress.dart b/example/lib/src/storybook/stories/circular_progress.dart
@@ -1,4 +1,4 @@
-import 'package:example/src/storybook/common/options.dart';
+import 'package:example/src/storybook/common/color_options.dart';
 import 'package:flutter/material.dart';
 import 'package:moon_design/moon_design.dart';
 import 'package:storybook_flutter/storybook_flutter.dart';

diff --git a/example/lib/src/storybook/stories/linear_loader.dart b/example/lib/src/storybook/stories/linear_loader.dart
@@ -1,4 +1,4 @@
-import 'package:example/src/storybook/common/options.dart';
+import 'package:example/src/storybook/common/color_options.dart';
 import 'package:flutter/material.dart';
 import 'package:moon_design/moon_design.dart';
 import 'package:storybook_flutter/storybook_flutter.dart';

diff --git a/example/lib/src/storybook/stories/linear_progress.dart b/example/lib/src/storybook/stories/linear_progress.dart
@@ -1,4 +1,4 @@
-import 'package:example/src/storybook/common/options.dart';
+import 'package:example/src/storybook/common/color_options.dart';
 import 'package:flutter/material.dart';
 import 'package:moon_design/moon_design.dart';
 import 'package:storybook_flutter/storybook_flutter.dart';

diff --git a/example/lib/src/storybook/stories/modal.dart b/example/lib/src/storybook/stories/modal.dart
@@ -1,4 +1,4 @@
-import 'package:example/src/storybook/common/options.dart';
+import 'package:example/src/storybook/common/color_options.dart';
 import 'package:flutter/material.dart';
 import 'package:moon_design/moon_design.dart';
 import 'package:storybook_flutter/storybook_flutter.dart';
@@ -69,7 +69,7 @@ class ModalStory extends Story {
                             Padding(
                               padding: const EdgeInsets.fromLTRB(24, 16, 24, 16),
                               child: Text(
-                                "Reopen the modal to see the new knob value changes.",
+                                "Reopen the modal to view the updated knob value.",
                                 style: context.moonTypography!.body.text14,
                               ),
                             ),
@@ -100,7 +100,7 @@ class ModalStory extends Story {
                     Builder(
                       builder: (context) {
                         return MoonFilledButton(
-                          label: const Text("Open Modal"),
+                          label: const Text("Tap me"),
                           onTap: () => modalBuilder(context),
                         );
                       },

diff --git a/example/lib/src/storybook/stories/popover.dart b/example/lib/src/storybook/stories/popover.dart
@@ -1,8 +1,10 @@
-import 'package:example/src/storybook/common/options.dart';
+import 'package:example/src/storybook/common/color_options.dart';
 import 'package:flutter/material.dart';
 import 'package:moon_design/moon_design.dart';
 import 'package:storybook_flutter/storybook_flutter.dart';
 
+bool show = false;
+
 class PopoverStory extends Story {
   PopoverStory()
       : super(
@@ -65,8 +67,6 @@ class PopoverStory extends Story {
               description: "Switch between LTR and RTL modes.",
             );
 
-            bool show = true;
-
             return Directionality(
               textDirection: setRtlModeKnob ? TextDirection.rtl : TextDirection.ltr,
               child: Center(
@@ -112,12 +112,11 @@ class PopoverStory extends Story {
                               ],
                             ),
                           ),
-                          child: MoonButton(
-                            backgroundColor: context.moonColors!.bulma,
+                          child: MoonFilledButton(
                             onTap: () {
                               setState(() => show = true);
                             },
-                            label: const Text("MDS"),
+                            label: const Text("Tap me"),
                           ),
                         );
                       },

diff --git a/example/lib/src/storybook/stories/radio.dart b/example/lib/src/storybook/stories/radio.dart
@@ -1,4 +1,4 @@
-import 'package:example/src/storybook/common/options.dart';
+import 'package:example/src/storybook/common/color_options.dart';
 import 'package:example/src/storybook/common/widgets/text_divider.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';

diff --git a/example/lib/src/storybook/stories/switch.dart b/example/lib/src/storybook/stories/switch.dart
@@ -1,4 +1,4 @@
-import 'package:example/src/storybook/common/options.dart';
+import 'package:example/src/storybook/common/color_options.dart';
 import 'package:example/src/storybook/common/widgets/text_divider.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/foundation.dart';

diff --git a/example/lib/src/storybook/stories/tag.dart b/example/lib/src/storybook/stories/tag.dart
@@ -1,4 +1,4 @@
-import 'package:example/src/storybook/common/options.dart';
+import 'package:example/src/storybook/common/color_options.dart';
 import 'package:flutter/material.dart';
 import 'package:moon_design/moon_design.dart';
 import 'package:storybook_flutter/storybook_flutter.dart';

diff --git a/example/lib/src/storybook/stories/tooltip.dart b/example/lib/src/storybook/stories/tooltip.dart
@@ -1,9 +1,11 @@
-import 'package:example/src/storybook/common/options.dart';
+import 'package:example/src/storybook/common/color_options.dart';
 import 'package:example/src/storybook/common/widgets/text_divider.dart';
 import 'package:flutter/material.dart';
 import 'package:moon_design/moon_design.dart';
 import 'package:storybook_flutter/storybook_flutter.dart';
 
+bool show = false;
+
 class TooltipStory extends Story {
   TooltipStory()
       : super(
@@ -94,8 +96,6 @@ class TooltipStory extends Story {
               description: "Switch between LTR and RTL modes.",
             );
 
-            bool show = true;
-
             return Directionality(
               textDirection: setRtlModeKnob ? TextDirection.rtl : TextDirection.ltr,
               child: Center(
@@ -119,18 +119,17 @@ class TooltipStory extends Story {
                           arrowTipDistance: arrowTipDistanceKnob,
                           tooltipShadows: showShadowKnob == true ? null : [],
                           content: Text(customLabelTextKnob),
-                          child: MoonButton(
-                            backgroundColor: context.moonColors!.bulma,
+                          child: MoonFilledButton(
                             onTap: () {
                               setState(() => show = true);
                             },
-                            label: const Text("MDS"),
+                            label: const Text("Tap me"),
                           ),
                         );
                       },
                     ),
                     const SizedBox(height: 40),
-                    const TextDivider(text: "Default tooltip"),
+                    const TextDivider(text: "Default on hover tooltip"),
                     const SizedBox(height: 32),
                     MoonFilledButton(
                       showTooltip: true,

diff --git a/lib/src/widgets/common/base_control.dart b/lib/src/widgets/common/base_control.dart
@@ -219,6 +219,12 @@ class _MoonBaseControlState extends State<MoonBaseControl> {
     }
   }
 
+  void _handleTapCancel() {
+    if (_isPressed && mounted) {
+      setState(() => _isPressed = false);
+    }
+  }
+
   void _handleLongPress() {
     if (widget.onLongPress == null) return;
 
@@ -392,6 +398,7 @@ class _MoonBaseControlState extends State<MoonBaseControl> {
                 onLongPress: _handleLongPress,
                 onLongPressStart: _handleLongPressStart,
                 onLongPressUp: _handleLongPressUp,
+                onTapCancel: _handleTapCancel,
                 onHorizontalDragStart: _handleHorizontalDragStart,
                 onHorizontalDragEnd: _handleHorizontalDragEnd,
                 onVerticalDragStart: _handleVerticalDragStart,