diff --git a/packages/react-magma-dom/src/components/InputBase/index.tsx b/packages/react-magma-dom/src/components/InputBase/index.tsx index 1b8c8757d..96a025c7c 100644 --- 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( setValue(event.target.value); } + const passwordBtnWidth = Number( + children?.props?.children[0].ref?.current?.offsetWidth + ); + return ( ( inputSize === InputSize.large ? InputSize.large : InputSize.medium } theme={theme} - buttonWidth={ - children?.props?.children[0].ref?.current?.offsetWidth + 6 + 'px' - } + buttonWidth={passwordBtnWidth} > {children} diff --git a/packages/react-magma-dom/src/components/PasswordInput/index.tsx b/packages/react-magma-dom/src/components/PasswordInput/index.tsx index 1a228fe3a..760f8c1be 100644 --- a/packages/react-magma-dom/src/components/PasswordInput/index.tsx +++ b/packages/react-magma-dom/src/components/PasswordInput/index.tsx @@ -127,6 +127,17 @@ export const PasswordInput = React.forwardRef< HIDE_PASSWORD_BUTTON_TEXT === i18n.password.hidden.buttonText; const buttonRef = React.useRef(); + + const getButtonWidth = () => { + if (usesDefaultText) { + if (inputSize === InputSize.large) { + return '64px'; + } + return '54px'; + } else { + return `${buttonRef?.current?.offsetWidth}px`; + } + } const getInputStyle = () => { if (isPasswordMaskButtonHidden) { @@ -134,7 +145,7 @@ export const PasswordInput = React.forwardRef< } 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}