Timepicker - update error message design (#1781)

* timepicker - update error message design * Change update error message color * Make corrections
mdbootstrap · Jul 18, 2023 · f08d33a · f08d33a
1 parent f77a1a2
commit f08d33a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/site/content/docs/standard/forms/timepicker/a.html b/site/content/docs/standard/forms/timepicker/a.html
@@ -1467,6 +1467,20 @@ <h4 class="mb-5 text-lg font-bold">Via JavaScript</h4>
                     Sets styles of Timepicker toggle button.
                   </td>
                 </tr>
+                <tr
+                  class="border-b bg-white dark:border-neutral-500 dark:bg-neutral-600">
+                  <td
+                    class="border-r px-6 py-4 font-medium dark:border-neutral-500 max-lg:whitespace-nowrap">
+                    <code>invalidFeedback</code>
+                  </td>
+                  <td
+                    class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
+                    block absolute text-sm text-red-500 dark:text-red-300
+                  </td>
+                  <td class="px-6 py-4 max-lg:whitespace-nowrap">
+                    Sets styles of Timepicker invalid feedback.
+                  </td>
+                </tr>
               </tbody>
             </table>
           </div>

diff --git a/src/js/forms/timepicker/index.js b/src/js/forms/timepicker/index.js
@@ -263,6 +263,7 @@ const DefaultClasses = {
     "hover:bg-[#00000014] focus:bg-[#00000014] focus:outline-none text-[0.8rem] box-border font-medium leading-[40px] tracking-[.1rem] uppercase border-none bg-transparent [transition:background-color_250ms_cubic-bezier(0.4,0,0.2,1)_0ms,box-shadow_250ms_cubic-bezier(0.4,0,0.2,1)_0ms,border_250ms_cubic-bezier(0.4,0,0.2,1)_0ms] outline-none rounded-[100%] h-[48px] min-w-[48px] inline-block ml-[30px] text-white py-1 px-2 mb-0",
   timepickerToggleButton:
     "h-4 w-4 ml-auto absolute outline-none border-none bg-transparent right-1.5 top-1/2 -translate-x-1/2 -translate-y-1/2 transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] cursor-pointer hover:text-[#3b71ca] focus:text-[#3b71ca] dark:hover:text-[#3b71ca] dark:focus:text-[#3b71ca] dark:text-white",
+  invalidFeedback: "block absolute text-sm text-red-500 dark:text-red-300",
 };
 
 const DefaultClassesType = {
@@ -310,6 +311,7 @@ const DefaultClassesType = {
   timepickerInlineModePm: "string",
   timepickerInlineSubmitButton: "string",
   timepickerToggleButton: "string",
+  invalidFeedback: "string",
 };
 
 /*
@@ -2676,6 +2678,7 @@ class Timepicker {
     if (appendValidationInfo) {
       inValidDiv = element("div");
       inValidDiv.setAttribute(ATTR_TIMEPICKER_INVALID_FEEDBACK, "");
+      Manipulator.addClass(inValidDiv, this._classes.invalidFeedback);
       inValidDiv.innerHTML = invalidLabel;
     }