Merge pull request #1341 from undp/develop

Release 1.2.10
undp · Aug 8, 2024 · 978bfff · 978bfff
2 parents 9fd3f68 + 82f0433
commit 978bfff
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 8 deletions.
diff --git a/docs/css/components/input-fields.min.css b/docs/css/components/input-fields.min.css
diff --git a/docs/css/components/language-switcher.min.css b/docs/css/components/language-switcher.min.css
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@undp/design-system",
-  "version": "1.2.9",
+  "version": "1.2.10",
   "description": "UNDP Design System",
   "homepage": "https://design.undp.org",
   "main": "index.js",

diff --git a/stories/Components/Forms/InputFields/InputFields.jsx b/stories/Components/Forms/InputFields/InputFields.jsx
@@ -18,7 +18,27 @@ export function Inputcomponent({
     } else {
       inputElement.current.blur();
     }
+    // State initialization when the page is loaded
+    updateInputState();
+
+    // Update state when the value changes
+    inputElement.current.addEventListener('input', updateInputState);
+
+    return () => {
+      inputElement.current.removeEventListener('input', updateInputState);
+    };
   }, [state]);
+
+  const updateInputState = () => {
+    if (inputElement.current.value) {
+      inputElement.current.classList.remove('empty');
+      inputElement.current.classList.add('filled');
+    } else {
+      inputElement.current.classList.remove('filled');
+      inputElement.current.classList.add('empty');
+    }
+  };
+
   return (
     <>
       {labelText && <label className={cls((`${state}` == 'disabled') ? `${state}` : '')} htmlFor={[`${type}`]}>{ labelText }</label>}

diff --git a/stories/Components/Forms/InputFields/input-fields.scss b/stories/Components/Forms/InputFields/input-fields.scss
@@ -95,10 +95,21 @@ input[type=date] {
   background-color: $color-white;
   color: $color-gray-500;
   padding-left: $spacing-08;
+  position: relative;
+  appearance: none;
 
   &.disabled {
     background-image: url(~icons/date-disabled.svg);
   }
+
+  &.empty {
+    color: $color-gray-500;
+  }
+
+  &.filled {
+    color: $color-black;
+  }
+
 }
 
 input[type=search] {
@@ -125,9 +136,19 @@ textarea {
 
 input[type='date']::-webkit-calendar-picker-indicator {
   appearance: none;
-  left: 3px;
-  opacity: 0;
+  opacity: 1;
   position: absolute;
+  // -moz-position: absolute;
+  margin-inline-start: -1.7rem;
+  // -moz-top: 0;
+  // -moz-left: 0;
+  // -moz-right: 0;
+  // -moz-bottom: 0;
+  width: 1rem;
+  height: 1rem;
+  color: rgba(0, 0, 0, 0);
+  background: rgba(0, 0, 0, 0);
+  cursor: pointer;
 }
 
 [dir='rtl'] {
@@ -170,9 +191,21 @@ input[type='date']::-webkit-calendar-picker-indicator {
   }
 
   input[type='date']::-webkit-calendar-picker-indicator {
-    left: inherit;
+    // left: inherit;
     position: absolute;
-    right: 27px;
+    text-align: initial;
+    opacity: 1;
+    margin-right: 0.75rem;
+    // padding: auto 0;
+    // right: 27px;
+    top: 1;
+    left: 1;
+    right: 0;
+    bottom: 1;
+    width: 1rem;
+    height: 1rem;
+    color: rgba(0, 0, 0, 0);
+    background: rgba(0, 0, 0, 0);
   }
 
   input::-webkit-date-and-time-value {

diff --git a/stories/Components/UIcomponents/LanguageSwitcher/language-switcher.scss b/stories/Components/UIcomponents/LanguageSwitcher/language-switcher.scss
@@ -78,7 +78,7 @@
     }
 
     &::after {
-      @include transition(0.2s ease-in-out);
+      @include transition(transform 0.2s ease-in-out);
 
       background-color: $color-blue-600;
       content: '';
@@ -109,6 +109,11 @@
     &.white {
       color: $color-white;
 
+      &:focus,
+      &:hover {
+        filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);;
+      }
+
       &::before {
         background: url(~icons/language-white.svg) no-repeat left center;
       }