diff --git a/src/components/InputBox/InputBox.stories.tsx b/src/components/InputBox/InputBox.stories.tsx index 93f716b7..c4a292e3 100644 --- a/src/components/InputBox/InputBox.stories.tsx +++ b/src/components/InputBox/InputBox.stories.tsx @@ -91,6 +91,15 @@ PasswordInput.args = { type: "password", }; +export const PasswordInputRevealDisabled = Template.bind({}); +PasswordInputRevealDisabled.args = { + label: "An input box", + required: true, + tooltip: "Tooltip text", + type: "password", + passwordRevealEnabled: false, +}; + export const WithOverlayIcon = Template.bind({}); WithOverlayIcon.args = { label: "An input box", diff --git a/src/components/InputBox/InputBox.styles.ts b/src/components/InputBox/InputBox.styles.ts index 6e85078b..3112a916 100644 --- a/src/components/InputBox/InputBox.styles.ts +++ b/src/components/InputBox/InputBox.styles.ts @@ -192,6 +192,9 @@ export const containerSizeSmall = css({ }); export const containerOverlayIcon = css({ + "& input": { + paddingRight: 37, + }, "& .accessoryIcon": { right: 37, }, diff --git a/src/components/InputBox/InputBox.types.ts b/src/components/InputBox/InputBox.types.ts index 412b4a09..b59f4a92 100644 --- a/src/components/InputBox/InputBox.types.ts +++ b/src/components/InputBox/InputBox.types.ts @@ -43,4 +43,5 @@ export interface InputBoxProps sizeMode?: InputBoxSize; orientation?: InputBoxOrientation; disableErrorUntilFocus?: boolean; + passwordRevealEnabled?: boolean; } diff --git a/src/components/InputBox/index.tsx b/src/components/InputBox/index.tsx index 2f548267..5a8ea2f5 100644 --- a/src/components/InputBox/index.tsx +++ b/src/components/InputBox/index.tsx @@ -63,6 +63,7 @@ const Inputdiv = React.forwardRef< onFocus, disableErrorUntilFocus = false, children, + passwordRevealEnabled = true, value, ...props }, @@ -86,7 +87,7 @@ const Inputdiv = React.forwardRef< let inputdivWrapperIcon = overlayIcon; let inputdivWrapperType = type; - if (type === "password" && !overlayIcon) { + if (type === "password" && passwordRevealEnabled && !overlayIcon) { inputdivWrapperIcon = toggleTextInput ? : ; inputdivWrapperType = toggleTextInput ? "text" : "password"; } @@ -110,7 +111,9 @@ const Inputdiv = React.forwardRef< css={[ containerStyles, sizeMode === "small" ? containerSizeSmall : {}, - overlayIcon || type === "password" ? containerOverlayIcon : {}, + overlayIcon || (type === "password" && passwordRevealEnabled) + ? containerOverlayIcon + : {}, css({ flexDirection: orientation === "vertical" ? "column" : "row" }), overrideThemes, ]}