fix: [MDS-997] Fix MoonTextInputGroup not being interactable and mino…

…r story fixes (#351)
coingaming · Feb 15, 2024 · ee9e0cc · ee9e0cc
1 parent bd2e436
commit ee9e0cc
Show file tree

Hide file tree

Showing 10 changed files with 19 additions and 23 deletions.
diff --git a/example/lib/src/storybook/stories/switch.dart b/example/lib/src/storybook/stories/switch.dart
@@ -96,12 +96,10 @@ class _SwitchStoryState extends State<SwitchStory> {
               activeTrackWidget: const Text(
                 "ON",
                 textAlign: TextAlign.center,
-                style: TextStyle(fontSize: 7),
               ),
               inactiveTrackWidget: const Text(
                 "OFF",
                 textAlign: TextAlign.center,
-                style: TextStyle(fontSize: 7),
               ),
               value: switchTextValue,
               onChanged: (bool newValue) => setState(() => switchTextValue = newValue),

diff --git a/example/lib/src/storybook/stories/tag.dart b/example/lib/src/storybook/stories/tag.dart
@@ -85,7 +85,7 @@ class TagStory extends StatelessWidget {
       initial: true,
     );
 
-    final setUpperCase = context.knobs.boolean(
+    final setUpperCaseKnob = context.knobs.boolean(
       label: "isUpperCase",
       description: "Use upper case text for MoonTag.",
     );
@@ -97,7 +97,7 @@ class TagStory extends StatelessWidget {
           borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
           onTap: () {},
           tagSize: tagSizeKnob,
-          isUpperCase: setUpperCase,
+          isUpperCase: setUpperCaseKnob,
           backgroundColor: backgroundColor,
           leading: showLeadingKnob
               ? Icon(
@@ -107,7 +107,7 @@ class TagStory extends StatelessWidget {
               : null,
           label: showLabelKnob
               ? Text(
-                  setUpperCase ? customLabelTextKnob.toUpperCase() : customLabelTextKnob,
+                  setUpperCaseKnob ? customLabelTextKnob.toUpperCase() : customLabelTextKnob,
                   style: TextStyle(color: textColor),
                 )
               : null,

diff --git a/example/lib/src/storybook/storybook.dart b/example/lib/src/storybook/storybook.dart
@@ -29,6 +29,7 @@ class StorybookPage extends StatelessWidget {
       routeWrapperBuilder: RouteWrapperBuilder(
         title: "Moon Design for Flutter",
         theme: ThemeData.light().copyWith(
+          scaffoldBackgroundColor: const Color(0xfffafafa), // Use old Material2 scaffold background color
           extensions: <ThemeExtension<dynamic>>[
             MoonTheme(
               tokens: MoonTokens.light.copyWith(

diff --git a/lib/src/theme/switch/switch_sizes.dart b/lib/src/theme/switch/switch_sizes.dart
@@ -30,7 +30,7 @@ class MoonSwitchSizes extends ThemeExtension<MoonSwitchSizes> with Diagnosticabl
               thumbSizeValue: tokens.sizes.x3s,
               iconSizeValue: tokens.sizes.x3s,
               padding: EdgeInsets.all(tokens.sizes.x6s),
-              textStyle: tokens.typography.caption.text6.copyWith(letterSpacing: kIsWeb ? 0.5 : 0.1),
+              textStyle: tokens.typography.caption.text6.copyWith(letterSpacing: 0),
             ),
         xs = xs ??
             MoonSwitchSizeProperties(
@@ -39,7 +39,7 @@ class MoonSwitchSizes extends ThemeExtension<MoonSwitchSizes> with Diagnosticabl
               thumbSizeValue: tokens.sizes.x2s,
               iconSizeValue: tokens.sizes.x2s,
               padding: EdgeInsets.all(tokens.sizes.x5s),
-              textStyle: tokens.typography.caption.text8.copyWith(letterSpacing: kIsWeb ? 0.5 : 0.1),
+              textStyle: tokens.typography.caption.text8.copyWith(letterSpacing: 0.1),
             ),
         sm = sm ??
             MoonSwitchSizeProperties(
@@ -48,7 +48,7 @@ class MoonSwitchSizes extends ThemeExtension<MoonSwitchSizes> with Diagnosticabl
               thumbSizeValue: tokens.sizes.xs,
               iconSizeValue: tokens.sizes.xs,
               padding: EdgeInsets.all(tokens.sizes.x5s),
-              textStyle: tokens.typography.caption.text10.copyWith(letterSpacing: kIsWeb ? 0.5 : 0.1),
+              textStyle: tokens.typography.caption.text10.copyWith(letterSpacing: 0.1),
             );
 
   @override

diff --git a/lib/src/theme/tag/tag_sizes.dart b/lib/src/theme/tag/tag_sizes.dart
@@ -31,7 +31,7 @@ class MoonTagSizes extends ThemeExtension<MoonTagSizes> with DiagnosticableTreeM
               iconSizeValue: tokens.sizes.x3s,
               padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x4s),
               textStyle: tokens.typography.body.text9,
-              upperCaseTextStyle: tokens.typography.caption.text9,
+              upperCaseTextStyle: tokens.typography.caption.text9.copyWith(height: 1.4),
             ),
         xs = xs ??
             MoonTagSizeProperties(
@@ -41,7 +41,7 @@ class MoonTagSizes extends ThemeExtension<MoonTagSizes> with DiagnosticableTreeM
               iconSizeValue: tokens.sizes.x2s,
               padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x4s),
               textStyle: tokens.typography.body.text12,
-              upperCaseTextStyle: tokens.typography.caption.text10,
+              upperCaseTextStyle: tokens.typography.caption.text10.copyWith(height: 1.6),
             ),
         sm = sm ??
             MoonTagSizeProperties(
@@ -51,7 +51,7 @@ class MoonTagSizes extends ThemeExtension<MoonTagSizes> with DiagnosticableTreeM
               iconSizeValue: tokens.sizes.x2s,
               padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x2s),
               textStyle: tokens.typography.body.text12,
-              upperCaseTextStyle: tokens.typography.caption.text10,
+              upperCaseTextStyle: tokens.typography.caption.text10.copyWith(height: 1.6),
             );
 
   @override

diff --git a/lib/src/theme/text_input/text_input_sizes.dart b/lib/src/theme/text_input/text_input_sizes.dart
@@ -47,7 +47,7 @@ class MoonTextInputSizes extends ThemeExtension<MoonTextInputSizes> with Diagnos
               iconSizeValue: tokens.sizes.xs,
               padding: EdgeInsets.symmetric(
                 horizontal: tokens.sizes.x3s,
-                vertical: 6,
+                vertical: tokens.sizes.x5s,
               ),
               textStyle: tokens.typography.body.textDefault,
             ),
@@ -59,7 +59,7 @@ class MoonTextInputSizes extends ThemeExtension<MoonTextInputSizes> with Diagnos
               iconSizeValue: tokens.sizes.xs,
               padding: EdgeInsets.symmetric(
                 horizontal: tokens.sizes.x3s,
-                vertical: tokens.sizes.x4s,
+                vertical: 6,
               ),
               textStyle: tokens.typography.body.text16,
             ),
@@ -71,7 +71,7 @@ class MoonTextInputSizes extends ThemeExtension<MoonTextInputSizes> with Diagnos
               iconSizeValue: tokens.sizes.xs,
               padding: EdgeInsets.symmetric(
                 horizontal: tokens.sizes.x2s,
-                vertical: 10,
+                vertical: 9,
               ),
               textStyle: tokens.typography.body.text16,
             );

diff --git a/lib/src/widgets/common/moon_icon.dart b/lib/src/widgets/common/moon_icon.dart
@@ -7,7 +7,7 @@ class MoonIcon extends StatelessWidget {
   /// Creates a Moon Design icon.
   ///
   /// This is necessary to ensure that custom icons are rendered correctly in mobile Safari.
-  @Deprecated("Unnecessary with current moon_icons icon font")
+  @Deprecated("Unnecessary with current moon_icons icon font. Use regular Icon widget instead.")
   const MoonIcon(
     this.icon, {
     super.key,

diff --git a/lib/src/widgets/text_input_group/text_input_group.dart b/lib/src/widgets/text_input_group/text_input_group.dart
@@ -330,6 +330,7 @@ class _MoonTextInputGroupState extends State<MoonTextInputGroup> {
           isFocusable: false,
           showFocusEffect: false,
           onTap: widget.enabled ? () {} : null,
+          propagateGesturesToChild: true,
           builder: (BuildContext context, bool isEnabled, bool isHovered, bool isFocused, bool isPressed) {
             return BorderContainer(
               clipBehavior: widget.clipBehavior ?? Clip.none,

diff --git a/test/accordion_test.dart b/test/accordion_test.dart
@@ -144,12 +144,10 @@ class GroupedAccordionTestWidget extends StatefulWidget {
   });
 
   @override
-  State<GroupedAccordionTestWidget> createState() =>
-      _GroupedAccordionTestWidgetState();
+  State<GroupedAccordionTestWidget> createState() => _GroupedAccordionTestWidgetState();
 }
 
-class _GroupedAccordionTestWidgetState
-    extends State<GroupedAccordionTestWidget> {
+class _GroupedAccordionTestWidgetState extends State<GroupedAccordionTestWidget> {
   AccordionItems? _currentlyOpenAccordionItem = AccordionItems.first;
 
   @override

diff --git a/test/text_input_test.dart b/test/text_input_test.dart
@@ -128,8 +128,7 @@ void main() {
   });
 }
 
-const validText =
-    'Lorem Ipsum is simply dummy text of the printing and typesetting industry';
+const validText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry';
 const invalidText = 'Lorem';
 
 const hint = 'Hint';
@@ -167,8 +166,7 @@ class TestWidget extends StatelessWidget {
                     key: widgetKey,
                     enabled: enabled,
                     hintText: hint,
-                    validator: (String? value) =>
-                        value != null && value.length < 10 ? error : null,
+                    validator: (String? value) => value != null && value.length < 10 ? error : null,
                     leading: showLeading ? const Icon(leadingIcon) : null,
                     trailing: showTrailing ? const Icon(trailingIcon) : null,
                     helper: showHelper ? const Text(helper) : null,