Update documentation

forus-labs · Jun 30, 2024 · a166606 · a166606
1 parent 660b0c3
commit a166606
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 37 deletions.
diff --git a/docs/pages/docs/text-field.mdx b/docs/pages/docs/text-field.mdx
@@ -2,7 +2,8 @@ import { Tabs } from 'nextra/components';
 import { Widget } from '../../components/widget';
 
 # Text Fields
-A text field lets the user enter text, either with hardware keyboard or with an onscreen keyboard.
+A text field lets the user enter text, either with hardware keyboard or with an onscreen keyboard. It can also be used
+in a form.
 
 <Tabs items={['Preview', 'Code']}>
   <Tabs.Tab>
@@ -14,7 +15,7 @@ A text field lets the user enter text, either with hardware keyboard or with an
       enabled: enabled,
       label: 'Email',
       hint: '[email protected]',
-    )
+    );
     ```
   </Tabs.Tab>
 </Tabs>
@@ -26,9 +27,9 @@ A text field lets the user enter text, either with hardware keyboard or with an
 ```dart
 FTextField(
   enabled: true,
-  label: 'Email',
+  label: Text('Email'),
   hint: '[email protected]',
-  footer: 'Enter your email associated with your Forui account.',
+  footer: Text('Enter your email associated with your Forui account.'),
   keyboardType: TextInputType.emailAddress,
   textCapitalization: TextCapitalization.none,
 );
@@ -38,28 +39,26 @@ FTextField(
 
 ```dart
 FTextField.email(
-  label: 'Email',
   hint: '[email protected]',
-  footer: 'Enter your email associated with your Forui account.',
+  footer: Text('Enter your email associated with your Forui account.'),
 );
 ```
 
 ### `FTextField.password(...)`
 
 ```dart
 FTextField.password(
-  label: 'Password',
-  footer: 'Your password must be at least 8 characters long.',
+  footer: Text('Your password must be at least 8 characters long.'),
 );
 ```
 
 ### `FTextField.multiline(...)`
 
 ```dart
 FTextField.multiline(
-  label: 'Description',
+  label: Text('Description'),
   hint: 'Enter a description...',
-  footer: 'Enter a description of the item.',
+  footer: Text('Enter a description of the item.'),
 );
 ```
 
@@ -75,7 +74,6 @@ FTextField.multiline(
   <Tabs.Tab>
     ```dart
     FTextField.email(
-      label: 'Email',
       hint: '[email protected]',
     );
     ```
@@ -92,7 +90,7 @@ FTextField.multiline(
   <Tabs.Tab>
     ```dart
     FTextField.email(
-      label: 'Email',
+      enabled: false
       hint: '[email protected]',
     );
     ```
@@ -110,7 +108,6 @@ FTextField.multiline(
     ```dart
     FTextField.password(
       controller: TextEditingController(text: 'My password'),
-      label: 'Password',
     );
     ```
   </Tabs.Tab>
@@ -125,10 +122,62 @@ FTextField.multiline(
   <Tabs.Tab>
     ```dart
     FTextField.multiline(
-      label: 'Leave a review',
+      label: Text('Leave a review'),
       maxLines: 4,
     );
     ```
   </Tabs.Tab>
 </Tabs>
 
+
+### Form
+
+<Tabs items={['Preview', 'Code']}>
+  <Tabs.Tab>
+    <Widget name='text-field' variant='form' query={{}}/>
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```dart
+    class LoginForm extends StatefulWidget {
+      const LoginForm({super.key});
+
+      @override
+      State<LoginForm> createState() => _LoginFormState();
+    }
+
+    class _LoginFormState extends State<LoginForm> {
+      final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
+
+      @override
+      void initState() {
+        super.initState();
+      }
+
+      @override
+      Widget build(BuildContext context) => Form(
+        key: _formKey,
+        child: Column(
+          children: [
+            FTextField.email(
+              hint: '[email protected]',
+              help: const Text(''),
+              validator: (value) => (value?.contains('@') ?? false) ? null : 'Please enter a valid email.',
+            ),
+            const SizedBox(height: 4),
+            FTextField.password(
+              hint: '',
+              help: const Text(''),
+              validator: (value) => 8 <= (value?.length ?? 0) ? null : 'Password must be at least 8 characters long.',
+            ),
+            const SizedBox(height: 30),
+            FButton(
+              rawLabel: const Text('Login'),
+              onPress: () => _formKey.currentState!.validate(),
+            ),
+          ],
+        ),
+      );
+    }
+    ```
+  </Tabs.Tab>
+</Tabs>
diff --git a/forui/example/lib/main.dart b/forui/example/lib/main.dart
@@ -46,14 +46,12 @@ class _ExampleWidgetState extends State<ExampleWidget> {
       child: Column(
         children: [
           FTextField.email(
-            label: const Text('Email'),
             hint: '[email protected]',
             help: const Text(''),
             validator: (value) => (value?.contains('@') ?? false) ? null : 'Please enter a valid email.',
           ),
           const SizedBox(height: 4),
           FTextField.password(
-            label: const Text('Password'),
             hint: '',
             help: const Text(''),
             validator: (value) => (value?.length ?? 0) >= 8 ? null : 'Password must be at least 8 characters long.',

diff --git a/forui/lib/src/widgets/text_field/text_field.dart b/forui/lib/src/widgets/text_field/text_field.dart
@@ -545,8 +545,8 @@ final class FTextField extends StatelessWidget {
   /// Creates a [FTextField] configured for emails.
   const FTextField.email({
     this.style,
-    this.label,
-    this.hint = 'Email',
+    this.label = const Text('Email'),
+    this.hint,
     this.help,
     this.error,
     this.magnifierConfiguration,
@@ -607,8 +607,8 @@ final class FTextField extends StatelessWidget {
   /// when handling the creation of new passwords.
   const FTextField.password({
     this.style,
-    this.label,
-    this.hint = 'Password',
+    this.label = const Text('Password'),
+    this.hint,
     this.help,
     this.error,
     this.magnifierConfiguration,

diff --git a/forui/test/src/widgets/text_field/text_field_golden_test.dart b/forui/test/src/widgets/text_field/text_field_golden_test.dart
@@ -86,7 +86,6 @@ void main() {
                     child: FTextField.email(
                       controller: controller,
                       autofocus: focused_,
-                      label: const Text('Email'),
                       hint: '[email protected]',
                     ),
                   ),
@@ -113,7 +112,6 @@ void main() {
                     child: FTextField.password(
                       controller: controller,
                       autofocus: focused_,
-                      label: const Text('Password'),
                       hint: 'password',
                     ),
                   ),

diff --git a/samples/analysis_options.yaml b/samples/analysis_options.yaml
@@ -3,4 +3,8 @@ analyzer:
   errors:
     diagnostic_describe_all_properties: ignore
     public_member_api_docs: ignore
-    unused_result: ignore
+    unused_result: ignore
+
+linter:
+  rules:
+    - require_trailing_commas
diff --git a/samples/lib/main.dart b/samples/lib/main.dart
@@ -93,6 +93,6 @@ class _AppRouter extends $_AppRouter {
         AutoRoute(
           path: '/switch/default',
           page: SwitchRoute.page,
-        )
+        ),
       ];
 }
diff --git a/samples/lib/widgets/text_field.dart b/samples/lib/widgets/text_field.dart
@@ -44,7 +44,6 @@ class PasswordTextFieldPage extends SampleScaffold {
             padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 30),
             child: FTextField.password(
               controller: TextEditingController(text: 'My password'),
-              label: const Text('Password'),
             ),
           ),
         ],
@@ -79,7 +78,10 @@ class FormTextFieldPage extends SampleScaffold {
   });
 
   @override
-  Widget child(BuildContext context) => const LoginForm();
+  Widget child(BuildContext context) => const Padding(
+    padding: EdgeInsets.all(15.0),
+    child: LoginForm(),
+  );
 }
 
 class LoginForm extends StatefulWidget {
@@ -103,26 +105,21 @@ class _LoginFormState extends State<LoginForm> {
     child: Column(
       children: [
         FTextField.email(
-          label: const Text('Email'),
           hint: '[email protected]',
           help: const Text(''),
           validator: (value) => (value?.contains('@') ?? false) ? null : 'Please enter a valid email.',
         ),
         const SizedBox(height: 4),
         FTextField.password(
-          label: const Text('Password'),
           hint: '',
           help: const Text(''),
-          validator: (value) => (value?.length ?? 0) >= 8 ? null : 'Password must be at least 8 characters long.',
+          validator: (value) => 8 <= (value?.length ?? 0) ? null : 'Password must be at least 8 characters long.',
+        ),
+        const SizedBox(height: 30),
+        FButton(
+          rawLabel: const Text('Login'),
+          onPress: () => _formKey.currentState!.validate(),
         ),
-        const SizedBox(height: 4),
-        Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 30),
-          child: FButton(
-            rawLabel: const Text('Login'),
-            onPress: () => _formKey.currentState!.validate(),
-          ),
-        )
       ],
     ),
   );