From e05a193daadf6b41bff24d6affc8dfd2a1fc3567 Mon Sep 17 00:00:00 2001
From: atanasyordanov21 <63714308+atanasyordanov21@users.noreply.github.com>
Date: Fri, 5 Apr 2024 16:08:00 +0300
Subject: [PATCH] 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
---
 .../pages/components/date_input_example.dart  | 10 +++++-----
 lib/src/components/date_input/date_input.dart | 20 ++++++++++---------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/example/lib/pages/components/date_input_example.dart b/example/lib/pages/components/date_input_example.dart
index 2f8c9470..83ac0812 100644
--- 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
index 1de3d6f6..83c07811 100644
--- 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) {