fix(datetime-picker): change warning and error border style to make i…

…t 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 <[email protected]>
Refinitiv · Jun 14, 2022 · 51638bd · 51638bd
1 parent 1f5d6aa
commit 51638bd
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 1 deletion.
diff --git 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
@@ -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;