Merge pull request #63 from deriv-com/aizad/password-input-fix

Aizad/Fix Password Input Meter Issue
deriv-com · Feb 6, 2024 · e0eb003 · e0eb003
2 parents 4ed77ce + ac40f8a
commit e0eb003
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 15 deletions.
diff --git a/lib/components/Input/HelperMessage.scss b/lib/components/Input/HelperMessage.scss
@@ -9,6 +9,7 @@ $error_field: #ec3f3f;
   font-weight: 400;
   line-height: 18px;
   color: $inactive_color;
+  width: calc(100% - 16px);
   &--general {
     color: $inactive_color;
   }

diff --git a/lib/components/Input/Input.scss b/lib/components/Input/Input.scss
@@ -9,7 +9,7 @@ $border: 1px solid;
 .deriv-input__container {
   display: inline-block;
   position: relative;
-  width: fit-content;
+  width: min-content;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
@@ -122,5 +122,5 @@ $border: 1px solid;
   font-size: 12px;
   line-height: 1;
   margin: 2px 0 0 16px;
-  width: calc(100% - 16px);
+  min-width: 100%;
 }
diff --git a/lib/components/Input/index.tsx b/lib/components/Input/index.tsx
@@ -17,6 +17,7 @@ interface InputProps extends Omit<ComponentProps<"input">, "placeholder"> {
   variant?: InputVariants;
   message?: ReactNode;
   wrapperClassName?: string;
+  hideMessage?: boolean;
 }
 
 const InputVariant: Record<InputVariants, string> = {
@@ -41,6 +42,7 @@ export const Input = forwardRef(
       className,
       disabled,
       error,
+      hideMessage,
       id,
       label,
       leftPlaceholder,
@@ -91,16 +93,18 @@ export const Input = forwardRef(
             <div className="deriv-input__right-content">{rightPlaceholder}</div>
           )}
         </div>
-        <div className="deriv-input__helper-message">
-          {message && (
-            <HelperMessage
-              message={message}
-              variant={variant}
-              error={error}
-              disabled={disabled}
-            />
-          )}
-        </div>
+        {!hideMessage && (
+          <div className="deriv-input__helper-message">
+            {message && (
+              <HelperMessage
+                message={message}
+                variant={variant}
+                error={error}
+                disabled={disabled}
+              />
+            )}
+          </div>
+        )}
       </div>
     );
   }

diff --git a/lib/components/PasswordInput/PasswordInput.scss b/lib/components/PasswordInput/PasswordInput.scss
@@ -3,22 +3,24 @@ $SUCCESS: #4bb4b3;
 $ERROR: #ec3f3f;
 
 .deriv-password {
-  width: fit-content;
+  width: min-content;
   position: relative;
+  display: inline-block;
 
   &__meter {
+    position: absolute;
     z-index: -1;
-    bottom: 1px;
     border-radius: 0px 0px 4px 4px;
-    position: absolute;
     width: 100%;
     height: 4px;
     background-color: $NEUTRAL;
+    bottom: calc(100% - 42px);
   }
   &__icon {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
+    cursor: pointer;
   }
 }
diff --git a/src/stories/Input.stories.tsx b/src/stories/Input.stories.tsx
@@ -14,6 +14,7 @@ const meta = {
     message: "This is a helper message",
     error: false,
     disabled: false,
+    hideMessage: false,
   },
   argTypes: {
     leftPlaceholder: {
@@ -47,6 +48,11 @@ const meta = {
         type: "boolean",
       },
     },
+    hideMessage: {
+      control: {
+        type: "boolean",
+      },
+    },
   },
 } satisfies Meta<typeof Input>;
 

diff --git a/src/stories/PasswordInput.stories.tsx b/src/stories/PasswordInput.stories.tsx
@@ -8,6 +8,7 @@ const meta = {
   parameters: { layout: "centered" },
   tags: ["autodocs"],
   args: {
+    hideMessage: false,
     label: "Enter Password",
     value: "",
     onChange: () => {},
@@ -20,6 +21,12 @@ const meta = {
         disable: true,
       },
     },
+    variant: {
+      options: ["general", "success", "warning", "error"],
+      control: {
+        type: "select",
+      },
+    },
     onChange: {
       control: {
         disable: true,
@@ -30,6 +37,11 @@ const meta = {
         type: "boolean",
       },
     },
+    hideMessage: {
+      control: {
+        type: "boolean",
+      },
+    },
   },
 } satisfies Meta<typeof PasswordInput>;
 
@@ -57,3 +69,48 @@ export const Default: Story = {
     );
   },
 };
+
+export const HideMessage: Story = {
+  name: "Password Input with no message",
+  args: {
+    hideMessage: true,
+    label: "Enter Password",
+    value: "",
+    onChange: () => {},
+    hidePasswordMeter: false,
+    hint: "This is a hint message",
+  },
+  render: (args) => {
+    const [value, setValue] = useState("");
+
+    return (
+      <PasswordInput
+        {...args}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    );
+  },
+};
+
+export const HidePasswordMeter: Story = {
+  name: "Password Input with no password meter",
+  args: {
+    label: "Enter Password",
+    value: "",
+    onChange: () => {},
+    hidePasswordMeter: true,
+    hint: "This is a hint message",
+  },
+  render: (args) => {
+    const [value, setValue] = useState("");
+
+    return (
+      <PasswordInput
+        {...args}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    );
+  },
+};