refactor(UX-1099): ZetaPhoneInput now uses ZetaTextInput (#137)

feat: Added focus node and keyboard type properties to ZetaTextInput
fix: Dropdown menus now scroll

example/lib/pages/components/phone_input_example.dart

@@ -25,10 +25,26 @@ class _PhoneInputExampleState extends State<PhoneInputExample> {
               padding: const EdgeInsets.all(20),
               child: ZetaPhoneInput(
                 label: 'Phone number',
-                hint: 'Enter your phone number',
+                hintText: 'Enter your phone number',
                 hasError: _errorText != null,
                 errorText: _errorText,
-                onChanged: (value) {
+                onChange: (value) {
+                  if (value?.isEmpty ?? true) setState(() => _errorText = null);
+                  print(value);
+                },
+                initialCountry: 'GB',
+                countries: ['US', 'GB', 'DE', 'AT', 'FR', 'IT', 'BG'],
+              ),
+            ),
+            Padding(
+              padding: const EdgeInsets.all(20),
+              child: ZetaPhoneInput(
+                label: 'Phone number',
+                hintText: 'Enter your phone number',
+                hasError: _errorText != null,
+                size: ZetaWidgetSize.large,
+                errorText: 'Error',
+                onChange: (value) {
                   if (value?.isEmpty ?? true) setState(() => _errorText = null);
                   print(value);
                 },
@@ -45,8 +61,15 @@ class _PhoneInputExampleState extends State<PhoneInputExample> {
               padding: const EdgeInsets.all(20),
               child: ZetaPhoneInput(
                 label: 'Phone number',
-                hint: 'Enter your phone number',
-                enabled: false,
+                hintText: 'Enter your phone number',
+                disabled: true,
+              ),
+            ),
+            Padding(
+              padding: const EdgeInsets.all(20),
+              child: ZetaPhoneInput(
+                label: 'Phone number',
+                hintText: 'Enter your phone number',
               ),
             ),
           ],

example/widgetbook/pages/components/phone_input_widgetbook.dart

@@ -16,11 +16,10 @@ Widget phoneInputUseCase(BuildContext context) {
         return Padding(
           padding: const EdgeInsets.all(ZetaSpacing.xl_1),
           child: ZetaPhoneInput(
-            enabled: enabled,
+            disabled: !enabled,
             label: 'Phone number',
-            hint: 'Enter your phone number',
+            hintText: 'Enter your phone number',
             countries: countries.isEmpty ? null : countries.toUpperCase().split(','),
-            useRootNavigator: false,
           ),
         );
       },

lib/src/components/dropdown/dropdown.dart

@@ -477,17 +477,19 @@ class _DropdownItemState<T> extends State<_DropdownItem<T>> {
           statesController: controller,
           style: _getStyle(colors),
           child: Padding(
-            padding: widget.menuType == ZetaDropdownMenuType.radio
-                ? const EdgeInsets.only(right: ZetaSpacing.medium)
-                : const EdgeInsets.symmetric(
-                    vertical: ZetaSpacingBase.x2_5,
-                    horizontal: ZetaSpacing.medium,
-                  ),
+            padding: const EdgeInsets.symmetric(
+              vertical: ZetaSpacingBase.x2_5,
+              horizontal: ZetaSpacing.medium,
+            ),
             child: Row(
               mainAxisSize: MainAxisSize.min,
               children: [
                 if (leading != null) leading,
-                Expanded(child: Text(widget.value.label)),
+                Expanded(
+                  child: Text(
+                    widget.value.label,
+                  ),
+                ),
               ],
             ),
           ),
@@ -639,21 +641,23 @@ class _ZetaDropDownMenuState<T> extends State<_ZetaDropDownMenu<T>> {
             )
           : null,
       child: IntrinsicWidth(
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: widget.items
-              .map((item) {
-                return _DropdownItem(
-                  value: item,
-                  onPress: () => widget.onSelected(item),
-                  selected: item.value == widget.selected,
-                  allocateLeadingSpace: widget.allocateLeadingSpace,
-                  menuType: widget.menuType,
-                );
-              })
-              .divide(const SizedBox(height: ZetaSpacing.minimum))
-              .toList(),
+        child: SingleChildScrollView(
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: widget.items
+                .map((item) {
+                  return _DropdownItem(
+                    value: item,
+                    onPress: () => widget.onSelected(item),
+                    selected: item.value == widget.selected,
+                    allocateLeadingSpace: widget.allocateLeadingSpace,
+                    menuType: widget.menuType,
+                  );
+                })
+                .divide(const SizedBox(height: ZetaSpacing.minimum))
+                .toList(),
+          ),
         ),
       ),
     );