diff --git a/.changeset/twelve-months-bow.md b/.changeset/twelve-months-bow.md
new file mode 100644
index 0000000000..f2772a27c6
--- /dev/null
+++ b/.changeset/twelve-months-bow.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/password-field': patch
+---
+
+Adding a prop to `PasswordField` that determines whether to render the "Show/Hide" button for password.
diff --git a/packages/components/fields/password-field/README.md b/packages/components/fields/password-field/README.md
index 64a7589654..cbc0387e2e 100644
--- a/packages/components/fields/password-field/README.md
+++ b/packages/components/fields/password-field/README.md
@@ -71,6 +71,7 @@ export default Example;
| `onInfoButtonClick` | `Function`
[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. |
| `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text.
Will only get rendered when `hint` is passed as well. |
| `badge` | `ReactNode` | | | Badge to be displayed beside the label.
Might be used to display additional information about the content of the field (E.g verified email) |
+| `renderShowHideButton` | `boolean` | | `true` | Determines whether to render the "Show/Hide" button for the password field. |
## Signatures
diff --git a/packages/components/fields/password-field/src/password-field.story.js b/packages/components/fields/password-field/src/password-field.story.js
index da138857f8..dfafb99b5e 100644
--- a/packages/components/fields/password-field/src/password-field.story.js
+++ b/packages/components/fields/password-field/src/password-field.story.js
@@ -92,6 +92,7 @@ storiesOf('Components|Fields', module)
}
hintIcon={hintIcon}
badge={text('badge', '')}
+ renderShowHideButton={boolean('renderShowHideButton', true)}
/>
);
}}
diff --git a/packages/components/fields/password-field/src/password-field.tsx b/packages/components/fields/password-field/src/password-field.tsx
index 85a7202c30..84a2db3231 100644
--- a/packages/components/fields/password-field/src/password-field.tsx
+++ b/packages/components/fields/password-field/src/password-field.tsx
@@ -176,6 +176,10 @@ export type TPasswordField = {
* Might be used to display additional information about the content of the field (E.g verified email)
*/
badge?: ReactNode;
+ /**
+ * Determines whether to render the "Show/Hide" button for the password field.
+ */
+ renderShowHideButton?: boolean;
};
type TTogglePasswordVisibilityHandler = (
@@ -185,8 +189,12 @@ type TTogglePasswordVisibilityHandler = (
| KeyboardEvent
) => void;
-const defaultProps: Pick = {
+const defaultProps: Pick<
+ TPasswordField,
+ 'horizontalConstraint' | 'renderShowHideButton'
+> = {
horizontalConstraint: 'scale',
+ renderShowHideButton: true,
};
const PasswordField = (props: TPasswordField) => {
@@ -195,7 +203,8 @@ const PasswordField = (props: TPasswordField) => {
const id = useFieldId(props.id, sequentialId);
const hasError = props.touched && hasErrors(props.errors);
const hasWarning = props.touched && hasWarnings(props.warnings);
- const canInteract = !props.isDisabled && !props.isReadOnly;
+ const canInteract =
+ !props.isDisabled && !props.isReadOnly && props.renderShowHideButton;
if (!props.isReadOnly) {
warning(
diff --git a/packages/components/fields/password-field/src/password-field.visualroute.jsx b/packages/components/fields/password-field/src/password-field.visualroute.jsx
index 8beaee402c..90c3f2aa70 100644
--- a/packages/components/fields/password-field/src/password-field.visualroute.jsx
+++ b/packages/components/fields/password-field/src/password-field.visualroute.jsx
@@ -102,5 +102,14 @@ export const component = () => (
renderWarning={() => 'Custom warning'}
/>
+
+ {}}
+ horizontalConstraint={7}
+ renderShowHideButton={false}
+ />
+
);