fix(PasswordInput): Update placement of Show/Hide button on Large input size

.changeset/fix-passInputLarge.md

@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix(PasswordInput): Update placement of Show/Hide button on Large input size

packages/react-magma-dom/src/components/InputBase/index.tsx

@@ -459,9 +459,8 @@ const PasswordButtonContainer = styled.span<{
   background-color: transparent;
   width: 0;
   transform: translate(
-    -${props => (props.size === InputSize.large ? props.theme.spaceScale.spacing10 : '60px')},
-    ${props =>
-      props.size === InputSize.large ? props.theme.spaceScale.spacing03 : '5px'}
+    -${props => (props.size === InputSize.large ? '58px' : '60px')},
+    ${props => props.theme.spaceScale.spacing02}
   );
 `;
 
@@ -581,13 +580,13 @@ export const InputBase = React.forwardRef<HTMLInputElement, InputBaseProps>(
     const [value, setValue] = React.useState<
       string | ReadonlyArray<string> | number
     >(
-      props.defaultValue !== undefined &&
-        props.defaultValue !== null 
+      props.defaultValue !== undefined && props.defaultValue !== null
         ? props.defaultValue
         : props.value || ''
     );
 
-    const maxLengthNum = !hasCharacterCounter && maxLength ? maxLength : undefined;
+    const maxLengthNum =
+      !hasCharacterCounter && maxLength ? maxLength : undefined;
 
     React.useEffect(() => {
       if (props.value !== undefined && props.value !== null) {

packages/react-magma-dom/src/components/PasswordInput/PasswordInput.stories.tsx

@@ -3,6 +3,7 @@ import { PasswordInput, PasswordInputProps } from '.';
 import { Card, CardBody } from '../Card';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import { LabelPosition } from '../Label';
+import { InputSize } from '../InputBase';
 
 const Template: Story<PasswordInputProps> = args => (
   <PasswordInput {...args} labelText="Password" />
@@ -35,6 +36,12 @@ export default {
         type: 'number',
       },
     },
+    inputSize: {
+      control: {
+        type: 'select',
+        options: InputSize,
+      }
+    }
   },
 } as Meta;
 

packages/react-magma-dom/src/components/PasswordInput/index.tsx

@@ -27,6 +27,11 @@ export interface PasswordInputProps
    * @default "Hide"
    */
   hidePasswordButtonText?: string;
+  /**
+   * Relative size of the component
+   * @default InputSize.medium
+   */
+  inputSize?: InputSize;
   isInverse?: boolean;
   /**
    * If true, label text will be hidden visually, but will still be read by assistive technology