HLM-3950:: Digit Components changes pull out from CBO App (#210)

egovernments · Sep 26, 2023 · 30ef4bf · 30ef4bf
1 parent 9e02c4e
commit 30ef4bf
Show file tree

Hide file tree

Showing 12 changed files with 128 additions and 51 deletions.
diff --git a/packages/digit_components/lib/widgets/atoms/digit_action_dialog.dart b/packages/digit_components/lib/widgets/atoms/digit_action_dialog.dart
@@ -19,8 +19,14 @@ class DigitActionDialog extends StatelessWidget {
           builder: (context) => DigitActionDialog(widget: widget));
 
   @override
-  Widget build(BuildContext context) => AlertDialog(
-        insetPadding: EdgeInsets.zero,
-        content: widget,
-      );
+  Widget build(BuildContext context) => Center(
+    child: Wrap(
+      children: [
+        AlertDialog(
+          insetPadding: EdgeInsets.zero,
+          content: widget,
+        ),
+      ],
+    ),
+  );
 }
diff --git a/packages/digit_components/lib/widgets/atoms/digit_date_form_picker.dart b/packages/digit_components/lib/widgets/atoms/digit_date_form_picker.dart
@@ -24,8 +24,8 @@ class DigitDateFormPicker extends StatelessWidget {
   final IconData? icon;
   final String? tooltipMessage;
   final EdgeInsets? padding;
-  final String? cancelText;
-  final String? confirmText;
+  final String cancelText;
+  final String confirmText;
   final String? fieldHintText;
 
   const DigitDateFormPicker({

diff --git a/packages/digit_components/lib/widgets/atoms/digit_icon_button.dart b/packages/digit_components/lib/widgets/atoms/digit_icon_button.dart
@@ -4,6 +4,7 @@ class DigitIconButton extends StatelessWidget {
   final VoidCallback? onPressed;
   final String? iconText;
   final IconData? icon;
+  final ImageIcon? imageIcon;
   final Color? iconColor;
   final Color? iconTextColor;
 
@@ -12,6 +13,7 @@ class DigitIconButton extends StatelessWidget {
     this.onPressed,
     this.iconText,
     this.icon,
+    this.imageIcon,
     this.iconColor,
     this.iconTextColor,
   });
@@ -29,10 +31,11 @@ class DigitIconButton extends StatelessWidget {
         mainAxisSize: MainAxisSize.min,
         children: [
           Flexible(
-            child: Icon(
-              icon,
-              color: iconColor ?? theme.colorScheme.secondary,
-            ),
+            child: imageIcon ??
+                Icon(
+                  icon,
+                  color: iconColor ?? theme.colorScheme.secondary,
+                ),
           ),
           const SizedBox(
             width: 4,

diff --git a/packages/digit_components/lib/widgets/atoms/digit_outline_icon_button.dart b/packages/digit_components/lib/widgets/atoms/digit_outline_icon_button.dart
@@ -6,25 +6,39 @@ class DigitOutlineIconButton extends StatelessWidget {
   final IconData icon;
   final VoidCallback? onPressed;
   final Color? iconColor;
+  final ButtonStyle? buttonStyle;
+  final TextStyle? textStyle;
 
   const DigitOutlineIconButton({
     super.key,
     this.iconColor,
     required this.label,
     required this.icon,
     required this.onPressed,
+    this.buttonStyle,
+    this.textStyle,
   });
 
   @override
-  Widget build(BuildContext context) => OutlinedButton(
-        onPressed: onPressed,
-        child: Row(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Flexible(child: Icon(icon)),
-            const SizedBox(width: kPadding),
-            Text(label),
-          ],
-        ),
-      );
+  Widget build(BuildContext context) {
+    return OutlinedButton(
+      onPressed: onPressed,
+      style: buttonStyle,
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Flexible(
+              child: Icon(
+            icon,
+            color: iconColor,
+          )),
+          const SizedBox(width: kPadding),
+          Text(
+            label,
+            style: textStyle,
+          ),
+        ],
+      ),
+    );
+  }
 }
diff --git a/packages/digit_components/lib/widgets/atoms/digit_reactive_dropdown.dart b/packages/digit_components/lib/widgets/atoms/digit_reactive_dropdown.dart
@@ -13,7 +13,6 @@ class DigitReactiveDropdown<T> extends StatelessWidget {
   final Map<String, String Function(Object object)>? validationMessages;
   final EdgeInsets? padding;
   final double menuMaxHeight;
-  final bool isExpanded;
 
   const DigitReactiveDropdown({
     super.key,
@@ -27,7 +26,6 @@ class DigitReactiveDropdown<T> extends StatelessWidget {
     this.validationMessages,
     this.padding,
     this.menuMaxHeight = 500,
-    this.isExpanded = true,
   });
 
   @override
@@ -45,7 +43,7 @@ class DigitReactiveDropdown<T> extends StatelessWidget {
           ReactiveDropdownField(
             menuMaxHeight: menuMaxHeight,
             icon: const Icon(Icons.arrow_drop_down),
-            isExpanded: isExpanded,
+            isExpanded: true,
             onChanged: (control) {
               final value = control.value;
               if (value == null) return;
@@ -60,15 +58,14 @@ class DigitReactiveDropdown<T> extends StatelessWidget {
             items: menuItems
                 .map(
                   (e) => DropdownMenuItem<T>(
-                value: e,
-                child: Text(valueMapper(e)),
-              ),
-            )
+                    value: e,
+                    child: Text(valueMapper(e)),
+                  ),
+                )
                 .toList(),
           ),
         ],
       ),
     );
   }
 }
-
diff --git a/packages/digit_components/lib/widgets/atoms/digit_text_form_field.dart b/packages/digit_components/lib/widgets/atoms/digit_text_form_field.dart
@@ -24,7 +24,6 @@ class DigitTextFormField extends StatelessWidget {
   final void Function(FormControl<dynamic>)? onChanged;
   final TextCapitalization textCapitalization;
   final ControlValueAccessor<dynamic, String>? valueAccessor;
-  final List<FilteringTextInputFormatter>? inputFormatter;
   final Map<String, String Function(Object control)>? validationMessages;
   final List<TextInputFormatter>? inputFormatters;
   final String? prefixText;
@@ -54,7 +53,6 @@ class DigitTextFormField extends StatelessWidget {
     this.onChanged,
     this.minLength,
     this.inputFormatters,
-    this.inputFormatter,
     this.prefixIcon,
     this.prefixText,
     this.hintText,
@@ -79,10 +77,16 @@ class DigitTextFormField extends StatelessWidget {
                 textCapitalization: textCapitalization,
                 minLines: minLines,
                 maxLines: maxLines,
+                style: TextStyle(
+                    fontSize: 16,
+                    fontWeight: FontWeight.w400,
+                    color: readOnly
+                        ? const DigitColors().hintGrey
+                        : DigitTheme.instance.colorScheme.onBackground),
                 obscureText: obscureText,
                 focusNode: focusNode,
                 keyboardType: keyboardType,
-                inputFormatters: inputFormatter,
+                inputFormatters: inputFormatters,
                 valueAccessor: valueAccessor,
                 decoration: readOnly == true
                     ? InputDecoration(
@@ -102,7 +106,7 @@ class DigitTextFormField extends StatelessWidget {
                             const BoxConstraints(minWidth: 0, minHeight: 0),
                         prefixStyle: TextStyle(
                             fontSize: 16,
-                            fontWeight: FontWeight.w400,
+                            fontWeight: FontWeight.w200,
                             color: readOnly
                                 ? const DigitColors().hintGrey
                                 : DigitTheme.instance.colorScheme.onBackground),
@@ -119,7 +123,7 @@ class DigitTextFormField extends StatelessWidget {
                                       prefixText ?? '',
                                       style: TextStyle(
                                           fontSize: kIsWeb ? 15 : 16,
-                                          fontWeight: FontWeight.w400,
+                                          fontWeight: FontWeight.w200,
                                           color: readOnly
                                               ? const DigitColors().hintGrey
                                               : DigitTheme.instance.colorScheme
@@ -138,11 +142,12 @@ class DigitTextFormField extends StatelessWidget {
                         prefixIconConstraints:
                             const BoxConstraints(minWidth: 0, minHeight: 0),
                         prefixStyle: TextStyle(
-                            fontSize: 16,
-                            fontWeight: FontWeight.w400,
-                            color: readOnly
-                                ? const DigitColors().hintGrey
-                                : DigitTheme.instance.colorScheme.onBackground),
+                          fontSize: 16,
+                          fontWeight: FontWeight.w400,
+                          color: readOnly
+                              ? const DigitColors().hintGrey
+                              : DigitTheme.instance.colorScheme.onBackground,
+                        ),
                         prefixIcon: prefixIcon ??
                             (prefixText == ''
                                 ? null
@@ -155,12 +160,13 @@ class DigitTextFormField extends StatelessWidget {
                                     child: Text(
                                       prefixText ?? '',
                                       style: TextStyle(
-                                          fontSize: kIsWeb ? 15 : 16,
-                                          fontWeight: FontWeight.w400,
-                                          color: readOnly
-                                              ? const DigitColors().hintGrey
-                                              : DigitTheme.instance.colorScheme
-                                                  .onBackground),
+                                        fontSize: kIsWeb ? 15 : 16,
+                                        fontWeight: FontWeight.w400,
+                                        color: readOnly
+                                            ? const DigitColors().hintGrey
+                                            : DigitTheme.instance.colorScheme
+                                                .onBackground,
+                                      ),
                                     ),
                                   )),
                         suffixIcon: suffix == null
@@ -174,9 +180,10 @@ class DigitTextFormField extends StatelessWidget {
               alignment: Alignment.centerLeft,
               child: Text(hintText ?? '',
                   style: TextStyle(
-                      fontSize: 14,
-                      fontWeight: FontWeight.normal,
-                      color: const DigitColors().hintGrey)),
+                    fontSize: 14,
+                    fontWeight: FontWeight.normal,
+                    color: const DigitColors().hintGrey,
+                  )),
             )
           ],
         ),

diff --git a/packages/digit_components/lib/widgets/digit_dialog.dart b/packages/digit_components/lib/widgets/digit_dialog.dart
@@ -29,6 +29,7 @@ class DigitDialog extends StatelessWidget {
   Widget build(BuildContext context) => AlertDialog(
         title: options.title,
         content: options.content,
+        scrollable: options.isScrollable,
         actionsAlignment: MainAxisAlignment.spaceBetween,
         actions: <Widget>[
           if (options.primaryAction != null)
@@ -59,6 +60,7 @@ class DigitDialogOptions {
   final DigitDialogActions? secondaryAction;
   final bool barrierDismissible;
   final Color? barrierColor;
+  final bool isScrollable;
   final Key? key;
 
   const DigitDialogOptions({
@@ -70,6 +72,7 @@ class DigitDialogOptions {
     this.primaryAction,
     this.secondaryAction,
     this.barrierDismissible = false,
+    this.isScrollable = false,
     this.titlePadding = const EdgeInsets.all(kPadding),
     this.contentPadding = const EdgeInsets.all(kPadding),
     this.barrierColor,

diff --git a/packages/digit_components/lib/widgets/digit_dob_picker.dart b/packages/digit_components/lib/widgets/digit_dob_picker.dart
@@ -15,6 +15,8 @@ class DigitDobPicker extends StatelessWidget {
   final String monthsHintLabel;
   final String separatorLabel;
   final String yearsAndMonthsErrMsg;
+  final String cancelText;
+  final String confirmText;
 
   const DigitDobPicker({
     super.key,
@@ -27,6 +29,8 @@ class DigitDobPicker extends StatelessWidget {
     required this.monthsHintLabel,
     required this.separatorLabel,
     required this.yearsAndMonthsErrMsg,
+    this.confirmText = 'OK',
+    this.cancelText = 'Cancel',
   });
 
   @override
@@ -49,6 +53,8 @@ class DigitDobPicker extends StatelessWidget {
             DigitDateFormPicker(
               label: datePickerLabel,
               formControlName: datePickerFormControl,
+              cancelText: cancelText,
+              confirmText: confirmText,
             ),
             const SizedBox(height: 16),
             // Text widget to display a separator label between the date picker and age fields

diff --git a/packages/digit_components/lib/widgets/digit_info_card.dart b/packages/digit_components/lib/widgets/digit_info_card.dart
@@ -62,7 +62,7 @@ class DigitInfoCard extends StatelessWidget {
             padding: const EdgeInsets.all(kPadding),
             child: Text(
               description,
-              style: theme.textTheme.bodyLarge,
+              style: descStyle ?? theme.textTheme.bodyLarge,
               textAlign: TextAlign.start,
             ),
           )

diff --git a/packages/digit_components/lib/widgets/digit_text_field.dart b/packages/digit_components/lib/widgets/digit_text_field.dart
@@ -1,4 +1,5 @@
 import 'package:digit_components/digit_components.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 
@@ -23,6 +24,7 @@ class DigitTextField extends StatelessWidget {
   final bool readOnly;
   final bool? isFilled;
   final Widget? suffixIcon;
+  final Widget? prefixIcon;
 
   const DigitTextField({
     super.key,
@@ -46,6 +48,7 @@ class DigitTextField extends StatelessWidget {
     this.readOnly = false,
     this.isFilled,
     this.suffixIcon,
+    this.prefixIcon,
   });
 
   @override
@@ -78,6 +81,40 @@ class DigitTextField extends StatelessWidget {
           ),
           //maxLines = 1 if suffixIcon != null
           suffixIcon: suffixIcon,
+          errorBorder: OutlineInputBorder(
+            borderSide:
+                BorderSide(color: const DigitColors().lavaRed, width: 1.0),
+            borderRadius: BorderRadius.circular(4.0),
+          ),
+          focusedErrorBorder: OutlineInputBorder(
+            borderSide:
+                BorderSide(color: const DigitColors().lavaRed, width: 1.0),
+            borderRadius: BorderRadius.circular(4.0),
+          ),
+          prefixIconConstraints:
+              const BoxConstraints(minWidth: 0, minHeight: 0),
+          prefixStyle: TextStyle(
+              fontSize: 16,
+              fontWeight: FontWeight.w400,
+              color: isDisabled
+                  ? const DigitColors().cloudGray
+                  : DigitTheme.instance.colorScheme.onBackground),
+          prefixIcon: prefixIcon ??
+              (prefixText == ''
+                  ? null
+                  : Padding(
+                      padding: const EdgeInsets.only(
+                          top: 10, left: 10, bottom: 10, right: 0),
+                      child: Text(
+                        prefixText,
+                        style: TextStyle(
+                            fontSize: kIsWeb ? 15 : 16,
+                            fontWeight: FontWeight.w400,
+                            color: isDisabled
+                                ? const DigitColors().cloudGray
+                                : DigitTheme.instance.colorScheme.onBackground),
+                      ),
+                    )),
         ),
       ),
     );