fix spacing

cengage · Oct 4, 2023 · 0c53a36 · 0c53a36
1 parent 3dfb148
commit 0c53a36
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 9 deletions.
diff --git a/packages/react-magma-dom/src/components/InputBase/index.tsx b/packages/react-magma-dom/src/components/InputBase/index.tsx
@@ -459,12 +459,15 @@ const IconButtonContainer = styled.span<{
 const PasswordButtonContainer = styled.span<{
   size?: InputSize;
   theme: ThemeInterface;
-  buttonWidth: string;
+  buttonWidth: number;
 }>`
   background-color: transparent;
   width: 0;
   transform: translate(
-    -${props => props.buttonWidth},
+    ${props =>
+      props.size === InputSize.large
+        ? `${-props.buttonWidth - 8}px`
+        : `${-props.buttonWidth - 6}px`},
     ${props =>
       props.size === InputSize.large ? props.theme.spaceScale.spacing03 : '6px'}
   );
@@ -617,6 +620,10 @@ export const InputBase = React.forwardRef<HTMLInputElement, InputBaseProps>(
       setValue(event.target.value);
     }
 
+    const passwordBtnWidth = Number(
+      children?.props?.children[0].ref?.current?.offsetWidth
+    );
+
     return (
       <InputContainer>
         <InputWrapper
@@ -735,9 +742,7 @@ export const InputBase = React.forwardRef<HTMLInputElement, InputBaseProps>(
               inputSize === InputSize.large ? InputSize.large : InputSize.medium
             }
             theme={theme}
-            buttonWidth={
-              children?.props?.children[0].ref?.current?.offsetWidth + 6 + 'px'
-            }
+            buttonWidth={passwordBtnWidth}
           >
             {children}
           </PasswordButtonContainer>

diff --git a/packages/react-magma-dom/src/components/PasswordInput/index.tsx b/packages/react-magma-dom/src/components/PasswordInput/index.tsx
@@ -127,14 +127,25 @@ export const PasswordInput = React.forwardRef<
     HIDE_PASSWORD_BUTTON_TEXT === i18n.password.hidden.buttonText;
 
   const buttonRef = React.useRef<HTMLButtonElement>();
+
+  const getButtonWidth = () => {
+    if (usesDefaultText) {
+      if (inputSize === InputSize.large) {
+        return '64px';
+      }
+      return '54px';
+    } else {
+      return `${buttonRef?.current?.offsetWidth}px`;
+    }
+  }
 
   const getInputStyle = () => {
     if (isPasswordMaskButtonHidden) {
       return {};
     } else if (inputSize === InputSize.medium && usesDefaultText) {
       return { width: 'calc(100% - 52px)' };
     } else if (inputSize === InputSize.large && usesDefaultText) {
-      return { width: 'calc(100% - 56px)' };
+      return { width: 'calc(100% - 64px)' };
     } else {
       return { width: `calc(100% - ${buttonRef?.current?.offsetWidth}px)` };
     }
@@ -190,11 +201,11 @@ export const PasswordInput = React.forwardRef<
                   : ButtonSize.medium
               }
               style={{
-                borderRadius: theme.borderRadius,
+                borderRadius: theme.borderRadiusSmall,
                 margin: '0 3px 0 0',
-                width: usesDefaultText ? '54px' : null,
+                width: getButtonWidth(),
                 minWidth: 0,
-                maxWidth: `${buttonRef?.current?.offsetWidth}px`,
+                maxWidth: getButtonWidth(),
               }}
               type={ButtonType.button}
               variant={ButtonVariant.link}