fix: change css for input

Author: aizad-deriv

lib/components/Input/HelperMessage.tsx

@@ -9,8 +9,8 @@ export interface HelperMessageProps {
   variant?: InputVariants;
   disabled?: boolean;
 }
-
-const MessageVariant: Record<InputVariants, string> = {
+type TMessageVariant = Exclude<InputVariants, "disabled">;
+const MessageVariant: Record<TMessageVariant, string> = {
   general: "deriv-helper-message__general",
   success: "deriv-helper-message__success",
   warning: "deriv-helper-message__warning",
@@ -26,7 +26,8 @@ const HelperMessage = ({
   <p
     className={clsx("deriv-helper-message", {
       [MessageVariant["general"]]: disabled,
-      [MessageVariant[error ? "error" : variant]]: !disabled,
+      [MessageVariant[error ? "error" : (variant as TMessageVariant)]]:
+        !disabled,
     })}
   >
     {message}

lib/components/Input/Input.scss

@@ -8,22 +8,39 @@ $inactive_color: #999999;
 $border: 1px solid;
 
 .deriv-input {
-  display: inline-block;
+  display: inline-flex;
   position: relative;
+  border-radius: 4px;
+  width: 328px;
+  box-sizing: border-box;
+  text-align: left;
+  padding: 10px 16px;
+  border: $border;
+
+  &__general {
+    border-color: $inactive_color;
+    &:focus-within {
+      border-color: $active_color;
+    }
+  }
+  &__error {
+    border-color: $error_field;
+  }
+  &__success {
+    border-color: $success_color;
+  }
+
+  &__active {
+    border-color: $active_color;
+  }
+
+  &__disabled {
+    border-color: $disabled_color;
+  }
 
   &--field {
     width: 100%;
-    padding: 10px 16px;
     outline: none;
-    border-radius: 4px;
-    width: 328px;
-    box-sizing: border-box;
-    outline: none;
-    text-align: left;
-    &:disabled {
-      border: $border $disabled_color;
-      color: $inactive_color;
-    }
     &::placeholder {
       visibility: hidden;
     }
@@ -37,24 +54,6 @@ $border: 1px solid;
         height: fit-content;
       }
     }
-    &__general {
-      border: $border $inactive_color;
-      &:focus {
-        border: $border $active_color;
-      }
-    }
-    &__error {
-      border: $border $error_field;
-      &:focus {
-        border: $border $error_field;
-      }
-    }
-    &__success {
-      border: $border $success_color;
-      &:focus {
-        border: $border $success_color;
-      }
-    }
   }
 
   &--label {
@@ -78,38 +77,36 @@ $border: 1px solid;
     &__success {
       color: $success_color;
     }
+    &__active {
+      color: $active_color;
+    }
+
+    &__disabled {
+      color: $disabled_color;
+    }
   }
 
   &--helper-message {
+    top: 100%;
     position: absolute;
     left: 16px;
-    margin-top: 2px;
     line-height: 1;
   }
 
   &--right-content {
-    position: absolute;
-    right: 16px;
-    bottom: 25%;
+    margin-left: 16px;
   }
 }
 
-.deriv-input--field__general:disabled + .deriv-input--label,
-.deriv-input--field__error:disabled + .deriv-input--label,
-.deriv-input--field__success:disabled + .deriv-input--label {
-  color: $inactive_color;
-  cursor: not-allowed;
-}
-
-.deriv-input--field:focus + .deriv-input--label {
+.deriv-input__general .deriv-input--field:focus + .deriv-input--label {
   color: $active_color;
 }
 
-.deriv-input--field__error:focus + .deriv-input--label {
+.deriv-input__error .deriv-input--field:focus + .deriv-input--label {
   color: $error_field;
 }
 
-.deriv-input--field__success:focus + .deriv-input--label {
+.deriv-input__success .deriv-input--field:focus + .deriv-input--label {
   color: $success_color;
 }
 

lib/components/Input/index.tsx

@@ -3,7 +3,12 @@ import clsx from "clsx";
 import HelperMessage from "./HelperMessage";
 import "./Input.scss";
 
-export type InputVariants = "general" | "success" | "error" | "warning";
+export type InputVariants =
+  | "general"
+  | "success"
+  | "error"
+  | "warning"
+  | "disabled";
 interface InputProps
   extends Omit<ComponentProps<"input">, "style" | "placeholder"> {
   label?: string;
@@ -15,17 +20,19 @@ interface InputProps
 }
 
 const InputVariant: Record<InputVariants, string> = {
-  general: "deriv-input--field__general",
-  success: "deriv-input--field__success",
-  warning: "deriv-input--field__general",
-  error: "deriv-input--field__error",
+  general: "deriv-input__general",
+  success: "deriv-input__success",
+  warning: "deriv-input__general",
+  error: "deriv-input__error",
+  disabled: "deriv-input__disabled",
 };
 
 const LabelVariant: Record<InputVariants, string> = {
   general: "deriv-input--label__general",
   success: "deriv-input--label__success",
   warning: "deriv-input--label__general",
   error: "deriv-input--label__error",
+  disabled: "deriv-input--label__disabled",
 };
 
 export const Input = ({
@@ -41,24 +48,33 @@ export const Input = ({
   ...rest
 }: InputProps) => {
   return (
-    <div className="deriv-input">
+    <div
+      className={clsx(
+        "deriv-input",
+        className,
+        InputVariant[error ? "error" : variant],
+        {
+          "deriv-input__disabled": disabled,
+        }
+      )}
+    >
       {leftPlaceholder && (
         <div className="deriv-input--left-content">{leftPlaceholder}</div>
       )}
       <input
         placeholder={label}
-        className={clsx(
-          "deriv-input--field",
-          className,
-          InputVariant[error ? "error" : variant]
-        )}
+        className="deriv-input--field"
         id={id}
+        disabled={disabled}
         {...rest}
       />
       <label
         className={clsx(
           "deriv-input--label",
-          LabelVariant[error ? "error" : variant]
+          LabelVariant[error ? "error" : variant],
+          {
+            "deriv-input--label__disabled": disabled,
+          }
         )}
         htmlFor={id}
       >