Component date input (#16)

* create ZetaDateInput * create different ZetaDateInput variants * fix show error style * date validation and input mask; documentation for ZetaDateInput properties * create widgetbook * changes according to comments * fix Typography of Date Input * restore * remove text line height
ZebraDevs · Apr 12, 2024 · e05a193 · e05a193
1 parent 96e5d42
commit e05a193
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 14 deletions.
diff --git a/example/lib/pages/components/date_input_example.dart b/example/lib/pages/components/date_input_example.dart
@@ -23,7 +23,7 @@ class _DateInputExampleState extends State<DateInputExample> {
           children: [
             Padding(
               padding: const EdgeInsets.only(top: 20),
-              child: Text('Rounded', style: ZetaTextStyles.titleSmall),
+              child: Text('Rounded', style: ZetaTextStyles.titleMedium),
             ),
             Padding(
               padding: const EdgeInsets.all(20),
@@ -46,7 +46,7 @@ class _DateInputExampleState extends State<DateInputExample> {
             Divider(color: Colors.grey[200]),
             Padding(
               padding: const EdgeInsets.only(top: 20),
-              child: Text('Sharp', style: ZetaTextStyles.titleSmall),
+              child: Text('Sharp', style: ZetaTextStyles.titleMedium),
             ),
             Padding(
               padding: const EdgeInsets.all(20),
@@ -61,7 +61,7 @@ class _DateInputExampleState extends State<DateInputExample> {
             Divider(color: Colors.grey[200]),
             Padding(
               padding: const EdgeInsets.only(top: 20),
-              child: Text('Disabled', style: ZetaTextStyles.titleSmall),
+              child: Text('Disabled', style: ZetaTextStyles.titleMedium),
             ),
             Padding(
               padding: const EdgeInsets.all(20),
@@ -74,7 +74,7 @@ class _DateInputExampleState extends State<DateInputExample> {
             Divider(color: Colors.grey[200]),
             Padding(
               padding: const EdgeInsets.only(top: 20),
-              child: Text('Medium', style: ZetaTextStyles.titleSmall),
+              child: Text('Medium', style: ZetaTextStyles.titleMedium),
             ),
             Padding(
               padding: const EdgeInsets.all(20),
@@ -88,7 +88,7 @@ class _DateInputExampleState extends State<DateInputExample> {
             Divider(color: Colors.grey[200]),
             Padding(
               padding: const EdgeInsets.only(top: 20),
-              child: Text('Small', style: ZetaTextStyles.titleSmall),
+              child: Text('Small', style: ZetaTextStyles.titleMedium),
             ),
             Padding(
               padding: const EdgeInsets.all(20),

diff --git a/lib/src/components/date_input/date_input.dart b/lib/src/components/date_input/date_input.dart
@@ -186,8 +186,7 @@ class _ZetaDateInputState extends State<ZetaDateInput> {
             padding: const EdgeInsets.only(bottom: 5),
             child: Text(
               widget.label!,
-              style: ZetaTextStyles.bodyLarge.copyWith(
-                height: 1.33,
+              style: ZetaTextStyles.bodyMedium.copyWith(
                 color: widget.enabled ? zeta.colors.textDefault : zeta.colors.cool.shade50,
               ),
             ),
@@ -198,7 +197,7 @@ class _ZetaDateInputState extends State<ZetaDateInput> {
           inputFormatters: [_dateFormatter],
           keyboardType: TextInputType.number,
           onChanged: (_) => _onChanged(),
-          style: ZetaTextStyles.bodyLarge.copyWith(height: 1.5),
+          style: _size == ZetaDateInputSize.small ? ZetaTextStyles.bodyXSmall : ZetaTextStyles.bodyMedium,
           decoration: InputDecoration(
             isDense: true,
             contentPadding: EdgeInsets.symmetric(
@@ -236,10 +235,13 @@ class _ZetaDateInputState extends State<ZetaDateInput> {
               minHeight: ZetaSpacing.m,
               minWidth: ZetaSpacing.m,
             ),
-            hintStyle: ZetaTextStyles.bodyLarge.copyWith(
-              color: widget.enabled ? zeta.colors.textDefault : zeta.colors.cool.shade50,
-              height: 1.5,
-            ),
+            hintStyle: _size == ZetaDateInputSize.small
+                ? ZetaTextStyles.bodyXSmall.copyWith(
+                    color: widget.enabled ? zeta.colors.textDefault : zeta.colors.cool.shade50,
+                  )
+                : ZetaTextStyles.bodyMedium.copyWith(
+                    color: widget.enabled ? zeta.colors.textDefault : zeta.colors.cool.shade50,
+                  ),
             filled: !widget.enabled || hasError ? true : null,
             fillColor: widget.enabled
                 ? hasError
@@ -275,7 +277,7 @@ class _ZetaDateInputState extends State<ZetaDateInput> {
                 Expanded(
                   child: Text(
                     showError && widget.enabled ? widget.errorText! : widget.hint!,
-                    style: ZetaTextStyles.bodySmall.copyWith(
+                    style: ZetaTextStyles.bodyXSmall.copyWith(
                       color: hintErrorColor,
                     ),
                   ),
@@ -290,7 +292,7 @@ class _ZetaDateInputState extends State<ZetaDateInput> {
   double _inputVerticalPadding(ZetaDateInputSize size) => switch (size) {
         ZetaDateInputSize.large => ZetaSpacing.x3,
         ZetaDateInputSize.medium => ZetaSpacing.x2,
-        ZetaDateInputSize.small => ZetaSpacing.x1,
+        ZetaDateInputSize.small => ZetaSpacing.x2,
       };
 
   double _iconSize(ZetaDateInputSize size) => switch (size) {