From 51638bd4d5e9306deb538725726fb085d55fd425 Mon Sep 17 00:00:00 2001
From: Sarin-Udompanish <86759822+Sarin-Udompanish@users.noreply.github.com>
Date: Tue, 14 Jun 2022 15:28:36 +0700
Subject: [PATCH] fix(datetime-picker): change warning and error border style
 to make it consistent with textfield (#356)

* fix(datetime-picker): change icon color on warning state

* fix(datetime-picker): change warning and error style to consistent with textfield

* fix(datetime-picker): change focused color

Co-authored-by: Theeraphat-Sorasetsakul <86758473+Theeraphat-Sorasetsakul@users.noreply.github.com>
---
 .../src/datetime-picker/__demo__/index.html   |  9 ++++++
 .../custom-elements/ef-datetime-picker.less   | 28 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/packages/elements/src/datetime-picker/__demo__/index.html b/packages/elements/src/datetime-picker/__demo__/index.html
index 29cb1611d3..0789ef0f28 100644
--- a/packages/elements/src/datetime-picker/__demo__/index.html
+++ b/packages/elements/src/datetime-picker/__demo__/index.html
@@ -93,6 +93,8 @@
             <ef-checkbox id="weekendsOnly">Weekends Only</ef-checkbox>
             <ef-checkbox id="readonly">Readonly</ef-checkbox>
             <ef-checkbox id="disabled">Disabled</ef-checkbox>
+            <ef-checkbox id="warning">Warning</ef-checkbox>
+            <ef-checkbox id="error">Error</ef-checkbox>
           </p>
           <p>
             <ef-checkbox id="inputTriggerDisabled">Input Trigger Disabled</ef-checkbox>
@@ -121,6 +123,7 @@
             duplex: dateTimePicker.duplex,
             timepicker: dateTimePicker.timepicker,
             amPm: dateTimePicker.amPm,
+            warning: dateTimePicker.warning,
             error: dateTimePicker.error,
             showSeconds: dateTimePicker.showSeconds,
             lang: dateTimePicker.lang,
@@ -292,6 +295,12 @@
         document.getElementById('disabled').addEventListener('checked-changed', ({ detail: { value } }) => {
           dateTimePicker.disabled = value || undefined;
         });
+        document.getElementById('warning').addEventListener('checked-changed', ({ detail: { value } }) => {
+          dateTimePicker.warning = value || undefined;
+        });
+        document.getElementById('error').addEventListener('checked-changed', ({ detail: { value } }) => {
+          dateTimePicker.error = value || undefined;
+        });
         document.getElementById('readonly').addEventListener('checked-changed', ({ detail: { value } }) => {
           dateTimePicker.readonly = value || undefined;
         });
diff --git a/packages/halo-theme/src/custom-elements/ef-datetime-picker.less b/packages/halo-theme/src/custom-elements/ef-datetime-picker.less
index 12c198d88b..b50b7ce5ec 100644
--- a/packages/halo-theme/src/custom-elements/ef-datetime-picker.less
+++ b/packages/halo-theme/src/custom-elements/ef-datetime-picker.less
@@ -28,6 +28,32 @@
     }
   }
 
+  &[warning]:not([focused]) {
+    border-color: @control-warning-color;
+  }
+
+  &[error]:not([focused]) {
+    border-color: @control-error-color;
+  }
+
+  &[warning]:hover:not([readonly]):not([focused]) {
+    border-color: @control-hover-warning-color;
+  }
+
+  &[warning][disabled],
+  &[warning][readonly]:not([focused]) {
+    border-color: fade(@control-hover-warning-color, 50%);
+  }
+
+  &[error]:hover:not([readonly]):not([focused])  {
+    border-color: @control-hover-error-color;
+  }
+
+  &[error][disabled],
+  &[error][readonly]:not([focused]) {
+    border-color: fade(@control-hover-error-color, 50%);
+  }
+
   &[disabled] {
     [part=icon] {
       color: @input-disabled-text-color
@@ -36,7 +62,7 @@
 
   &[focused],
   &[focused][error][warning],
-  &:not([disabled]):hover {
+  &:not([disabled]):not([error]):not([warning]):hover {
     [part=icon] {
       color: @scheme-color-secondary;