refactor: Password input now uses text input (#109)

* update password input * fixed tests
ZebraDevs · Jun 24, 2024 · 5c1ec1d · 5c1ec1d
1 parent ccaf8a9
commit 5c1ec1d
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 199 deletions.
diff --git a/example/lib/pages/components/password_input_example.dart b/example/lib/pages/components/password_input_example.dart
@@ -38,11 +38,8 @@ class _PasswordInputExampleState extends State<PasswordInputExample> {
                   ZetaPasswordInput(
                     size: ZetaWidgetSize.medium,
                     rounded: false,
-                    footerText: 'Error state is triggered if the password contains digits',
-                    footerIcon: ZetaIcons.info_round,
                     hintText: 'Password',
                     controller: _passwordController,
-                    onChanged: (value) => _formKey.currentState?.validate(),
                     validator: (value) {
                       if (value != null) {
                         final regExp = RegExp(r'\d');
@@ -51,6 +48,12 @@ class _PasswordInputExampleState extends State<PasswordInputExample> {
                       return null;
                     },
                   ),
+                  ZetaButton.primary(
+                    label: 'Validate',
+                    onPressed: () {
+                      _formKey.currentState?.validate();
+                    },
+                  ),
                   SizedBox(height: ZetaSpacing.xl_6),
                   ...passwordInputExampleRow(ZetaWidgetSize.large),
                   Divider(height: ZetaSpacing.xl_10),
@@ -67,17 +70,26 @@ class _PasswordInputExampleState extends State<PasswordInputExample> {
 
 List<Widget> passwordInputExampleRow(ZetaWidgetSize size, {bool rounded = true}) {
   return [
-    ZetaPasswordInput(size: size, hintText: 'Password', rounded: rounded),
+    ZetaPasswordInput(
+      size: size,
+      hintText: 'Password',
+      rounded: rounded,
+      placeholder: 'Password',
+    ),
     SizedBox(height: 20),
-    ZetaPasswordInput(rounded: rounded, size: size, hintText: 'Password', enabled: false),
+    ZetaPasswordInput(
+      rounded: rounded,
+      size: size,
+      placeholder: 'Password',
+      disabled: true,
+    ),
     SizedBox(height: 20),
     ZetaPasswordInput(
       size: size,
       label: 'Label',
-      hintText: 'Password',
-      footerText: 'Default hint text',
+      placeholder: 'Password',
+      hintText: 'Default hint text',
       rounded: rounded,
-      footerIcon: ZetaIcons.info_round,
     ),
   ];
 }
diff --git a/example/test/password_input_test.dart b/example/test/password_input_test.dart
@@ -20,12 +20,12 @@ void main() {
         widget: ZetaPasswordInput(),
       ),
     );
-    final obscureIconOff = find.byIcon(ZetaIcons.visibility_off_sharp);
+    final obscureIconOff = find.byIcon(ZetaIcons.visibility_off_round);
     expect(obscureIconOff, findsOneWidget);
     await tester.tap(obscureIconOff);
     await tester.pump();
 
-    final obscureIconOn = find.byIcon(ZetaIcons.visibility_sharp);
+    final obscureIconOn = find.byIcon(ZetaIcons.visibility_round);
     expect(obscureIconOn, findsOneWidget);
   });
 
@@ -36,19 +36,25 @@ void main() {
       return null;
     }
 
+    final controller = TextEditingController();
+    controller.text = 'password123';
+    final formKey = GlobalKey<FormState>();
+
     await tester.pumpWidget(
       TestWidget(
-        widget: ZetaPasswordInput(
-          controller: TextEditingController(),
-          validator: testValidator,
+        widget: Form(
+          key: formKey,
+          child: ZetaPasswordInput(
+            controller: controller,
+            validator: testValidator,
+          ),
         ),
       ),
     );
-
-    final passwordField = find.byType(TextFormField);
-    await tester.enterText(passwordField, 'password12');
+    formKey.currentState?.validate();
     await tester.pump();
 
-    expect(find.text('Error'), findsOneWidget);
+    // There will be two matches for the error text as the form field itself contains a hidden one.
+    expect(find.text('Error'), findsExactly(2));
   });
 }
diff --git a/example/widgetbook/pages/components/password_input_widgetbook.dart b/example/widgetbook/pages/components/password_input_widgetbook.dart
@@ -33,20 +33,18 @@ class _PasswordState extends State<_Password> {
             ConstrainedBox(
               constraints: BoxConstraints(maxWidth: 328),
               child: ZetaPasswordInput(
-                enabled: context.knobs.boolean(label: 'Enabled', initialValue: true),
+                disabled: disabledKnob(context),
                 obscureText: context.knobs.boolean(label: 'Obscure text', initialValue: true),
                 size: context.knobs.list(
                   label: 'Size',
                   options: ZetaWidgetSize.values,
                   labelBuilder: enumLabelBuilder,
                 ),
                 rounded: rounded,
-                footerIcon:
-                    iconKnob(context, initial: ZetaIcons.star_half_round, name: 'Footer icon', rounded: rounded),
-                footerText: context.knobs.string(label: 'Footer Text'),
-                hintText: context.knobs.string(label: 'Hint text'),
+                hintText: context.knobs.string(label: 'Hint Text'),
+                placeholder: context.knobs.string(label: 'Placeholder'),
                 label: context.knobs.string(label: 'Label'),
-                onChanged: (_) => _formKey.currentState?.validate(),
+                onChange: (_) => _formKey.currentState?.validate(),
                 validator: (_) => enableValidation ? validationString : null,
                 controller: _passwordController,
               ),