fix: Textfield helper Text (#531)

* textfield

* Update textfield.dart

Author: tilucasoli

packages/remix/lib/src/components/textfield/textfield.dart

@@ -52,8 +52,7 @@ class TextFieldSpec extends Spec<TextFieldSpec>
 
   final Brightness keyboardAppearance;
   final Color? autocorrectionTextRectColor;
-
-  final FlexBoxSpec textFieldContainer;
+  final FlexBoxSpec outerContainer;
   final FlexBoxSpec container;
   final TextStyle? hintTextStyle;
   final TextSpec helperText;
@@ -89,7 +88,7 @@ class TextFieldSpec extends Spec<TextFieldSpec>
     Brightness? keyboardAppearance,
     this.autocorrectionTextRectColor,
     bool? cursorOpacityAnimates,
-    FlexBoxSpec? textFieldContainer,
+    FlexBoxSpec? outerContainer,
     FlexBoxSpec? container,
     this.hintTextStyle,
     TextSpec? helperText,
@@ -114,7 +113,7 @@ class TextFieldSpec extends Spec<TextFieldSpec>
         scrollPadding = scrollPadding ?? const EdgeInsets.all(20.0),
         clipBehavior = clipBehavior ?? Clip.hardEdge,
         keyboardAppearance = keyboardAppearance ?? Brightness.light,
-        textFieldContainer = textFieldContainer ?? const FlexBoxSpec(),
+        outerContainer = outerContainer ?? const FlexBoxSpec(),
         helperText = helperText ?? const TextSpec(),
         container = container ?? const FlexBoxSpec(),
         icon = icon ?? const IconSpec(),

packages/remix/lib/src/components/textfield/textfield.g.dart

@@ -79,9 +79,9 @@ class TextFieldStyle extends SpecStyle<TextFieldSpecUtility> {
 
     final $ = spec.utilities;
 
-    final textFieldContainerStyle = $.textFieldContainer.chain
+    final containerStyle = $.container.chain
       ..color.white()
-      ..padding.horizontal(12)
+      ..padding.horizontal(10)
       ..padding.vertical(8)
       ..borderRadius(6)
       ..border.all.color.grey.shade300()
@@ -95,7 +95,7 @@ class TextFieldStyle extends SpecStyle<TextFieldSpecUtility> {
       ..flex.crossAxisAlignment.center()
       ..flex.gap(8);
 
-    final containerStyle = $.container.flex.chain
+    final outerContainerStyle = $.outerContainer.flex.chain
       ..direction.vertical()
       ..mainAxisSize.min()
       ..mainAxisAlignment.start()
@@ -120,11 +120,11 @@ class TextFieldStyle extends SpecStyle<TextFieldSpecUtility> {
       ..style.fontSize(12)
       ..wrap.padding.left(12);
 
-    final focus = spec.on.focus($.textFieldContainer.border.all.color.black());
+    final focus = spec.on.focus($.container.border.all.color.black());
 
     return Style.create([
       platformSettings(spec).call(),
-      textFieldContainerStyle,
+      outerContainerStyle,
       $.floatingLabel.off(),
       $.selectionColor.black12(),
       containerStyle,
@@ -145,7 +145,7 @@ class TextFieldDarkStyle extends TextFieldStyle {
     final $ = spec.utilities;
     final cursor = $.cursorColor.grey.shade100();
 
-    final textFieldContainerStyle = $.textFieldContainer.chain
+    final containerStyle = $.container.chain
       ..color.black()
       ..border.all.color.grey.shade800()
       ..shadow.spreadRadius(0)
@@ -163,12 +163,12 @@ class TextFieldDarkStyle extends TextFieldStyle {
     final helperStyle = $.helperText.style.color.grey.shade400();
     final icon = $.icon.color.grey.shade300();
 
-    final focus = spec.on.focus($.textFieldContainer.border.all.color.white());
+    final focus = spec.on.focus($.container.border.all.color.white());
 
     return Style.create([
       super.makeStyle(spec).call(),
       cursor,
-      textFieldContainerStyle,
+      containerStyle,
       focus,
       textStyle,
       helperStyle,

packages/remix/lib/src/components/textfield/textfield_style.dart

@@ -7,7 +7,7 @@ class FortalezaTextFieldStyle extends TextFieldStyle {
   Style makeStyle(SpecConfiguration<TextFieldSpecUtility> spec) {
     final $ = spec.utilities;
 
-    final textFieldContainerStyle = $.textFieldContainer.chain
+    final containerStyle = $.container.chain
       ..color.$neutral(1)
       ..padding.horizontal.$space(3)
       ..padding.vertical.$space(2)
@@ -19,7 +19,7 @@ class FortalezaTextFieldStyle extends TextFieldStyle {
 
     final textStyle = [$.style.$text(2), $.style.color.$neutral(12)];
 
-    final containerStyle = $.container.flex.gap.$space(2);
+    final outerContainerStyle = $.outerContainer.flex.gap.$space(2);
 
     final hintStyle = [
       $.hintTextStyle.color.$neutral(9),
@@ -38,7 +38,7 @@ class FortalezaTextFieldStyle extends TextFieldStyle {
     final icon = $.icon.color.$accent();
 
     final focus = spec.on.focus(
-      $.textFieldContainer.chain
+      $.container.chain
         ..border.all.color.$accent()
         ..border.all.width(2),
     );
@@ -47,8 +47,8 @@ class FortalezaTextFieldStyle extends TextFieldStyle {
       super.makeStyle(spec).call(),
       $.floatingLabel.on(),
       $.cursorColor.$neutral(12),
-      textFieldContainerStyle,
       containerStyle,
+      outerContainerStyle,
       ...textStyle,
       ...hintStyle,
       ...floatingHintStyle,

packages/remix/lib/src/components/textfield/textfield_theme.dart

@@ -507,8 +507,10 @@ class _TextFieldState extends State<TextField>
     // }
 
     final style = widget.style ?? context.remix.components.textField;
-    final configuration =
-        TextFieldSpecConfiguration(context, TextFieldSpecUtility.self);
+    final configuration = TextFieldSpecConfiguration(
+      context,
+      TextFieldSpecUtility.self,
+    );
 
     final child = SpecBuilder(
       controller: _statesController,
@@ -519,10 +521,10 @@ class _TextFieldState extends State<TextField>
             (_effectiveFocusNode.hasFocus ||
                 _effectiveController.value.text.isNotEmpty);
 
-        return spec.container(
+        return spec.outerContainer(
           direction: Axis.vertical,
           children: [
-            spec.textFieldContainer(
+            spec.container(
               direction: Axis.horizontal,
               children: [
                 if (widget.prefixBuilder != null)
@@ -618,7 +620,8 @@ class _TextFieldState extends State<TextField>
                 if (widget.suffix != null) widget.suffix!,
               ],
             ),
-            spec.helperText(widget.helperText ?? ''),
+            if (widget.helperText != null)
+              spec.helperText(widget.helperText ?? ''),
           ],
         );
       },