Perform updates to TextBox (#754)

bdlukaa · Mar 4, 2023 · cf9f377 · cf9f377
2 parents 00964a8 + 03a6fb0
commit cf9f377
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,5 @@
 ## [next]
+
 - Dynamically adding/removing items in NavigationPane ([#744](https://github.com/bdlukaa/fluent_ui/issues/744))
   ```dart
   if (_itemKeys.length != widget.pane?.effectiveItems.length) {
@@ -30,6 +31,9 @@
     }
   )
   ```
+- Use correct height and padding on `TextBox` ([#754](https://github.com/bdlukaa/fluent_ui/pull/754))
+- Updated `TextBox` cursor to match the native implementation ([#754](https://github.com/bdlukaa/fluent_ui/pull/754))
+- `TextBox` state is now updated correctly when focused ([#754](https://github.com/bdlukaa/fluent_ui/pull/754))
 
 ## 4.4.0
 

diff --git a/example/lib/screens/forms/text_box.dart b/example/lib/screens/forms/text_box.dart
@@ -20,16 +20,20 @@ class TextBoxPage extends ScrollablePage {
         'uniform, plaintext format.\n\n'
         'TextBox has a number of features that can simplify text entry. It comes '
         'with a familiar, built-in context menu with support for copying and '
-        'pasting text. The "clear all" button lets a user quickly delete all '
-        'text that has been entered. It also has spell checking capabilities '
-        'built in and enabled by default.',
+        'pasting text. It also has spell checking capabilities built in and '
+        'enabled by default.',
       ),
       subtitle(content: const Text('A simple TextBox')),
       CardHighlight(
         child: Row(children: const [
           Expanded(child: TextBox()),
           SizedBox(width: 10.0),
-          Expanded(child: TextBox(enabled: false, placeholder: 'Disabled'))
+          Expanded(
+            child: TextBox(
+              enabled: false,
+              placeholder: 'Disabled TextBox',
+            ),
+          )
         ]),
         codeSnippet: '''TextBox()''',
       ),
@@ -44,11 +48,13 @@ class TextBoxPage extends ScrollablePage {
             expands: false,
           ),
         ),
-        codeSnippet: '''TextBox(
-  header: 'Enter your name:',
-  placeholder: 'Name',
-  expands: false,
-),''',
+        codeSnippet: '''InfoLabel(
+  label: 'Enter your name:',
+  child: const TextBox(
+    placeholder: 'Name',
+    expands: false,
+  ),
+)''',
       ),
       subtitle(
         content: const Text('A read-only TextBox with various properties set'),
@@ -60,7 +66,7 @@ class TextBoxPage extends ScrollablePage {
           style: TextStyle(
             fontFamily: 'Arial',
             fontSize: 24.0,
-            letterSpacing: 8,
+            letterSpacing: 8.0,
             color: Color(0xFF5178BE),
             fontStyle: FontStyle.italic,
           ),
@@ -71,7 +77,7 @@ class TextBoxPage extends ScrollablePage {
   style: TextStyle(
     fontFamily: 'Arial,
     fontSize: 24.0,
-    letterSpacing: 8,
+    letterSpacing: 8.0,
     color: Color(0xFF5178BE),
     fontStyle: FontStyle.italic,
   ),

diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -201,10 +201,10 @@ packages:
     dependency: "direct main"
     description:
       name: go_router
-      sha256: f611d4396469c46db1c61e934a86e2a590ce02de2a6050d01f677879ce151f4a
+      sha256: b4bb06205ec607278b6fc23db238278417bca84a3905779cc68d1eb7afae37e2
       url: "https://pub.dev"
     source: hosted
-    version: "6.0.1"
+    version: "6.2.0"
   html:
     dependency: transitive
     description:

diff --git a/lib/src/controls/form/text_box.dart b/lib/src/controls/form/text_box.dart
@@ -6,7 +6,7 @@ import 'package:flutter/gestures.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter/services.dart';
 
-const kTextBoxPadding = EdgeInsets.symmetric(horizontal: 10.0, vertical: 5);
+const kTextBoxPadding = EdgeInsetsDirectional.fromSTEB(10, 5, 6, 6);
 
 /// Visibility of text field overlays based on the state of the current text entry.
 ///
@@ -170,7 +170,7 @@ class TextBox extends StatefulWidget {
     this.onTapOutside,
     this.inputFormatters,
     this.enabled,
-    this.cursorWidth = 1.5,
+    this.cursorWidth = 1,
     this.cursorHeight,
     this.cursorRadius = const Radius.circular(2.0),
     this.cursorColor,
@@ -257,7 +257,7 @@ class TextBox extends StatefulWidget {
 
   /// Padding around the text entry area between the [prefix] and [suffix].
   ///
-  /// Defaults to a padding of 10 pixels horizontally and 5 pixels vertically.
+  /// Defaults to [kTextBoxPadding]
   final EdgeInsetsGeometry padding;
 
   /// A lighter colored placeholder hint that appears on the first line of the
@@ -566,7 +566,11 @@ class TextBox extends StatefulWidget {
       ..add(DiagnosticsProperty<FocusNode>('focusNode', focusNode,
           defaultValue: null))
       ..add(DiagnosticsProperty<BoxDecoration>('decoration', decoration))
-      ..add(DiagnosticsProperty<EdgeInsetsGeometry>('padding', padding))
+      ..add(DiagnosticsProperty<EdgeInsetsGeometry>(
+        'padding',
+        padding,
+        defaultValue: kTextBoxPadding,
+      ))
       ..add(StringProperty('placeholder', placeholder))
       ..add(
           DiagnosticsProperty<TextStyle>('placeholderStyle', placeholderStyle))
@@ -601,7 +605,7 @@ class TextBox extends StatefulWidget {
       ..add(EnumProperty<MaxLengthEnforcement>(
           'maxLengthEnforcement', maxLengthEnforcement,
           defaultValue: null))
-      ..add(DoubleProperty('cursorWidth', cursorWidth, defaultValue: 2.0))
+      ..add(DoubleProperty('cursorWidth', cursorWidth, defaultValue: 1.0))
       ..add(DoubleProperty('cursorHeight', cursorHeight, defaultValue: null))
       ..add(DiagnosticsProperty<Radius>('cursorRadius', cursorRadius,
           defaultValue: null))
@@ -974,7 +978,7 @@ class _TextBoxState extends State<TextBox>
     }
 
     final enabled = widget.enabled ?? true;
-    const cursorOffset = Offset(0, -1);
+    const cursorOffset = Offset(0, 0);
     final formatters = <TextInputFormatter>[
       ...?widget.inputFormatters,
       if (widget.maxLength != null)
@@ -1171,6 +1175,15 @@ class _TextBoxState extends State<TextBox>
               forceEnabled: enabled,
               hitTestBehavior: HitTestBehavior.translucent,
               builder: (context, states) {
+                // Since we manage focus outside of the HoverButton (see focusEnabled: false)
+                // we need to add the focused state when the field is focused
+                //
+                // widgets below this can call `HoverButton.of(context).states.isFocused`
+                // and have the correct value
+                if (_effectiveFocusNode.hasFocus) {
+                  states = {...states, ButtonStates.focused};
+                }
+
                 return DecoratedBox(
                   decoration: BoxDecoration(
                     borderRadius: radius,
@@ -1193,10 +1206,11 @@ class _TextBoxState extends State<TextBox>
                     image: widget.decoration?.image,
                     shape: widget.decoration?.shape,
                   ),
-                  child: AnimatedContainer(
-                    duration: themeData.fasterAnimationDuration,
-                    curve: themeData.animationCurve,
+                  child: Container(
                     foregroundDecoration: foregroundDecoration,
+                    constraints: const BoxConstraints(
+                      minHeight: 32.0,
+                    ),
                     child:
                         _selectionGestureDetectorBuilder.buildGestureDetector(
                       behavior: HitTestBehavior.translucent,