fix: [MDS-517] Fix TextInput and TextArea bugs

example/lib/src/storybook/common/widgets/error.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+import 'package:moon_design/moon_design.dart';
+
+class StoryErrorWidget extends StatelessWidget {
+  final String errorText;
+
+  const StoryErrorWidget({
+    super.key,
+    required this.errorText,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        const MoonIcon(MoonIcons.info_16, size: 16),
+        const SizedBox(width: 4),
+        Text(errorText),
+      ],
+    );
+  }
+}

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

@@ -1,4 +1,5 @@
 import 'package:example/src/storybook/common/color_options.dart';
+import 'package:example/src/storybook/common/widgets/error.dart';
 import 'package:flutter/material.dart';
 import 'package:moon_design/moon_design.dart';
 import 'package:storybook_flutter/storybook_flutter.dart';
@@ -82,6 +83,22 @@ class TextAreaStory extends Story {
               initial: true,
             );
 
+            final growableKnob = context.knobs.boolean(
+              label: "Growable",
+              description: "Whether the MoonTextArea has no fixed height and is growable",
+            );
+
+            final hasFocusEffectKnob = context.knobs.boolean(
+              label: "hasFocusEffect",
+              description: "Whether to display focus effect around MoonTextInput.",
+              initial: true,
+            );
+
+            final showHelperKnob = context.knobs.boolean(
+              label: "helper",
+              description: "Show widget in MoonTextArea helper slot.",
+            );
+
             return Center(
               child: Column(
                 mainAxisAlignment: MainAxisAlignment.center,
@@ -91,10 +108,12 @@ class TextAreaStory extends Story {
                     child: Builder(
                       builder: (context) {
                         return Column(
+                          mainAxisSize: MainAxisSize.min,
                           children: [
                             MoonTextArea(
                               enabled: enabledKnob,
-                              height: 300,
+                              hasFocusEffect: hasFocusEffectKnob,
+                              height: growableKnob ? null : 200,
                               textColor: textColor,
                               hintTextColor: hintTextColor,
                               backgroundColor: backgroundColor,
@@ -107,7 +126,8 @@ class TextAreaStory extends Story {
                               validator: (value) => value?.length != null && value!.length < 10
                                   ? "The text should be longer than 10 characters."
                                   : null,
-                              errorBuilder: (context, errorText) => Text(errorText!),
+                              helper: showHelperKnob ? const Text("Supporting text") : null,
+                              errorBuilder: (context, errorText) => StoryErrorWidget(errorText: errorText!),
                             ),
                             const SizedBox(height: 16),
                             MoonFilledButton(

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

@@ -1,9 +1,13 @@
 import 'package:example/src/storybook/common/color_options.dart';
+import 'package:example/src/storybook/common/widgets/error.dart';
 import 'package:flutter/material.dart';
 import 'package:moon_design/moon_design.dart';
 import 'package:storybook_flutter/storybook_flutter.dart';
 
-TextEditingController _textEditingController = TextEditingController();
+TextEditingController _textController = TextEditingController();
+TextEditingController _passwordController = TextEditingController();
+
+bool _hidePassword = true;
 
 class TextInputStory extends Story {
   TextInputStory()
@@ -97,6 +101,17 @@ class TextInputStory extends Story {
               initial: true,
             );
 
+            final hasFocusEffectKnob = context.knobs.boolean(
+              label: "hasFocusEffect",
+              description: "Whether to display focus effect around MoonTextInput.",
+              initial: true,
+            );
+
+            final hasFloatingLabelKnob = context.knobs.boolean(
+              label: "hasFloatingLabel",
+              description: "Whether MoonTextInput has floating label.",
+            );
+
             final showLeadingKnob = context.knobs.boolean(
               label: "leading",
               description: "Show widget in MoonTextInput leading slot.",
@@ -109,9 +124,9 @@ class TextInputStory extends Story {
               initial: true,
             );
 
-            final showSupportingKnob = context.knobs.boolean(
-              label: "supporting",
-              description: "Show widget in MoonTextInput supporting slot.",
+            final showHelperKnob = context.knobs.boolean(
+              label: "helper",
+              description: "Show widget in MoonTextInput helper slot.",
             );
 
             return Center(
@@ -124,41 +139,98 @@ class TextInputStory extends Story {
                       builder: (context) {
                         return Column(
                           children: [
-                            SizedBox(
-                              height: 86,
-                              child: MoonTextInput(
-                                controller: _textEditingController,
-                                textInputSize: textInputSizesKnob,
-                                enabled: enabledKnob,
-                                textColor: textColor,
-                                hintTextColor: hintTextColor,
-                                backgroundColor: backgroundColor,
-                                activeBorderColor: activeBorderColor,
-                                inactiveBorderColor: inactiveBorderColor,
-                                errorBorderColor: errorBorderColor,
-                                borderRadius: borderRadiusKnob != null
-                                    ? BorderRadius.circular(borderRadiusKnob.toDouble())
-                                    : null,
-                                hintText: "Enter your text here...",
-                                validator: (value) => value?.length != null && value!.length < 10
-                                    ? "The text should be longer than 10 characters."
-                                    : null,
-                                leading: showLeadingKnob ? const MoonIcon(MoonIcons.search_24) : null,
-                                trailing: showTrailingKnob
-                                    ? MoonButton.icon(
-                                        icon: MoonIcon(
-                                          MoonIcons.close_24,
-                                          color: DefaultTextStyle.of(context).style.color,
+                            MoonFormTextInput(
+                              controller: _textController,
+                              enabled: enabledKnob,
+                              textInputSize: textInputSizesKnob,
+                              hasFocusEffect: hasFocusEffectKnob,
+                              hasFloatingLabel: hasFloatingLabelKnob,
+                              textColor: textColor,
+                              hintTextColor: hintTextColor,
+                              backgroundColor: backgroundColor,
+                              activeBorderColor: activeBorderColor,
+                              inactiveBorderColor: inactiveBorderColor,
+                              errorBorderColor: errorBorderColor,
+                              borderRadius:
+                                  borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
+                              hintText: "Enter your text here (over 10 characters)",
+                              validator: (value) => value?.length != null && value!.length < 10
+                                  ? "The text should be longer than 10 characters."
+                                  : null,
+                              leading: showLeadingKnob
+                                  ? const MoonIcon(
+                                      MoonIcons.search_24,
+                                      size: 24,
+                                    )
+                                  : null,
+                              trailing: showTrailingKnob
+                                  ? MouseRegion(
+                                      cursor: SystemMouseCursors.click,
+                                      child: GestureDetector(
+                                        child: const MoonIcon(
+                                          MoonIcons.close_small_24,
+                                          size: 24,
                                         ),
-                                        buttonSize: MoonButtonSize.xs,
-                                        onTap: () => _textEditingController.clear(),
-                                      )
-                                    : null,
-                                supporting: showSupportingKnob ? const Text("Supporting text") : null,
-                                errorBuilder: (context, errorText) => Text(errorText!),
-                              ),
+                                        onTap: () => _textController.clear(),
+                                      ),
+                                    )
+                                  : null,
+                              helper: showHelperKnob ? const Text("Supporting text") : null,
+                              errorBuilder: (context, errorText) => StoryErrorWidget(errorText: errorText!),
+                            ),
+                            const SizedBox(height: 16),
+                            StatefulBuilder(
+                              builder: (context, setState) {
+                                return MoonFormTextInput(
+                                  controller: _passwordController,
+                                  enabled: enabledKnob,
+                                  keyboardType: TextInputType.visiblePassword,
+                                  obscureText: _hidePassword,
+                                  textInputSize: textInputSizesKnob,
+                                  hasFocusEffect: hasFocusEffectKnob,
+                                  hasFloatingLabel: hasFloatingLabelKnob,
+                                  textColor: textColor,
+                                  hintTextColor: hintTextColor,
+                                  backgroundColor: backgroundColor,
+                                  activeBorderColor: activeBorderColor,
+                                  inactiveBorderColor: inactiveBorderColor,
+                                  errorBorderColor: errorBorderColor,
+                                  borderRadius: borderRadiusKnob != null
+                                      ? BorderRadius.circular(borderRadiusKnob.toDouble())
+                                      : null,
+                                  hintText: "Enter password (123abc)",
+                                  validator: (value) => value != "123abc" ? "Wrong password." : null,
+                                  leading: showLeadingKnob
+                                      ? const MoonIcon(
+                                          MoonIcons.search_24,
+                                          size: 24,
+                                        )
+                                      : null,
+                                  trailing: showTrailingKnob
+                                      ? MouseRegion(
+                                          cursor: SystemMouseCursors.click,
+                                          child: GestureDetector(
+                                            child: IntrinsicWidth(
+                                              child: Align(
+                                                alignment: Alignment.centerRight,
+                                                child: Text(
+                                                  _hidePassword ? "Show" : "Hide",
+                                                  style: DefaultTextStyle.of(context)
+                                                      .style
+                                                      .copyWith(decoration: TextDecoration.underline),
+                                                ),
+                                              ),
+                                            ),
+                                            onTap: () => setState(() => _hidePassword = !_hidePassword),
+                                          ),
+                                        )
+                                      : null,
+                                  helper: showHelperKnob ? const Text("Supporting text") : null,
+                                  errorBuilder: (context, errorText) => StoryErrorWidget(errorText: errorText!),
+                                );
+                              },
                             ),
-                            const SizedBox(height: 8),
+                            const SizedBox(height: 24),
                             MoonFilledButton(
                               label: const Text("Submit"),
                               onTap: () => Form.of(context).validate(),

example/lib/src/storybook/storybook.dart

@@ -66,6 +66,7 @@ class StorybookPage extends StatelessWidget {
                   child: Scaffold(
                     extendBody: true,
                     extendBodyBehindAppBar: true,
+                    resizeToAvoidBottomInset: false,
                     body: Padding(
                       padding: const EdgeInsets.symmetric(horizontal: 16.0),
                       child: child,

lib/moon_design.dart

@@ -1,3 +1,4 @@
+/// Moon Design for Flutter
 library moon_design;
 
 export 'package:moon_design/src/theme/accordion/accordion_theme.dart';
@@ -65,6 +66,7 @@ export 'package:moon_design/src/widgets/radio/radio.dart';
 export 'package:moon_design/src/widgets/switch/switch.dart';
 export 'package:moon_design/src/widgets/tag/tag.dart';
 export 'package:moon_design/src/widgets/text_area/text_area.dart';
+export 'package:moon_design/src/widgets/text_input/form_text_input.dart';
 export 'package:moon_design/src/widgets/text_input/text_input.dart';
 export 'package:moon_design/src/widgets/toast/toast.dart';
 export 'package:moon_design/src/widgets/tooltip/tooltip.dart';

lib/src/theme/text_area/text_area_properties.dart

@@ -11,10 +11,10 @@ class MoonTextAreaProperties extends ThemeExtension<MoonTextAreaProperties> with
     borderRadius: MoonBorders.borders.interactiveSm,
     transitionDuration: const Duration(milliseconds: 200),
     transitionCurve: Curves.easeInOutCubic,
-    supportingPadding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x3s, vertical: MoonSizes.sizes.x4s),
-    textPadding: const EdgeInsets.all(16),
+    supportingPadding: EdgeInsets.only(top: MoonSizes.sizes.x4s),
+    textPadding: EdgeInsets.all(MoonSizes.sizes.x2s),
     textStyle: MoonTextStyles.body.text16,
-    supportingTextStyle: MoonTextStyles.body.text12,
+    helperTextStyle: MoonTextStyles.body.text12,
   );
 
   /// TextArea border radius.
@@ -26,7 +26,7 @@ class MoonTextAreaProperties extends ThemeExtension<MoonTextAreaProperties> with
   /// TextArea transition curve.
   final Curve transitionCurve;
 
-  /// The padding around TextArea supporting widget or error builder.
+  /// The padding around TextArea helper widget or error builder.
   final EdgeInsetsGeometry supportingPadding;
 
   /// TextArea text padding.
@@ -35,8 +35,8 @@ class MoonTextAreaProperties extends ThemeExtension<MoonTextAreaProperties> with
   /// TextArea text style.
   final TextStyle textStyle;
 
-  /// TextArea supporting or error text style.
-  final TextStyle supportingTextStyle;
+  /// TextArea helper or error text style.
+  final TextStyle helperTextStyle;
 
   const MoonTextAreaProperties({
     required this.borderRadius,
@@ -45,7 +45,7 @@ class MoonTextAreaProperties extends ThemeExtension<MoonTextAreaProperties> with
     required this.supportingPadding,
     required this.textPadding,
     required this.textStyle,
-    required this.supportingTextStyle,
+    required this.helperTextStyle,
   });
 
   @override
@@ -56,7 +56,7 @@ class MoonTextAreaProperties extends ThemeExtension<MoonTextAreaProperties> with
     EdgeInsetsGeometry? supportingPadding,
     EdgeInsetsGeometry? textPadding,
     TextStyle? textStyle,
-    TextStyle? supportingTextStyle,
+    TextStyle? helperTextStyle,
   }) {
     return MoonTextAreaProperties(
       borderRadius: borderRadius ?? this.borderRadius,
@@ -65,7 +65,7 @@ class MoonTextAreaProperties extends ThemeExtension<MoonTextAreaProperties> with
       supportingPadding: supportingPadding ?? this.supportingPadding,
       textPadding: textPadding ?? this.textPadding,
       textStyle: textStyle ?? this.textStyle,
-      supportingTextStyle: supportingTextStyle ?? this.supportingTextStyle,
+      helperTextStyle: helperTextStyle ?? this.helperTextStyle,
     );
   }
 
@@ -80,7 +80,7 @@ class MoonTextAreaProperties extends ThemeExtension<MoonTextAreaProperties> with
       supportingPadding: EdgeInsetsGeometry.lerp(supportingPadding, other.supportingPadding, t)!,
       textPadding: EdgeInsetsGeometry.lerp(textPadding, other.textPadding, t)!,
       textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!,
-      supportingTextStyle: TextStyle.lerp(supportingTextStyle, other.supportingTextStyle, t)!,
+      helperTextStyle: TextStyle.lerp(helperTextStyle, other.helperTextStyle, t)!,
     );
   }
 
@@ -95,6 +95,6 @@ class MoonTextAreaProperties extends ThemeExtension<MoonTextAreaProperties> with
       ..add(DiagnosticsProperty<EdgeInsetsGeometry>("supportingPadding", supportingPadding))
       ..add(DiagnosticsProperty<EdgeInsetsGeometry>("textPadding", textPadding))
       ..add(DiagnosticsProperty<TextStyle>("textStyle", textStyle))
-      ..add(DiagnosticsProperty<TextStyle>("supportingTextStyle", supportingTextStyle));
+      ..add(DiagnosticsProperty<TextStyle>("helperTextStyle", helperTextStyle));
   }
 }