PasswordField - adding a new prop to render the "Show/Hide" button (#…

…2759) * chore: added renderShowHideButton prop to PasswordField component * chore: updated README * chore: test update * chore: changeset * chore: comment update
commercetools · Mar 26, 2024 · 3f91547 · 3f91547
1 parent 4c7fff5
commit 3f91547
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 2 deletions.
diff --git a/.changeset/twelve-months-bow.md 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
@@ -71,6 +71,7 @@ export default Example;
 | `onInfoButtonClick`    | `Function`<br/>[See signature.](#signature-onInfoButtonClick)                                         |          |           | Function called when info button is pressed.&#xA;<br />&#xA;Info button will only be visible when this prop is passed.                                                                                                                                                |
 | `hintIcon`             | `ReactElement`                                                                                        |          |           | Icon to be displayed beside the hint text.&#xA;<br />&#xA;Will only get rendered when `hint` is passed as well.                                                                                                                                                       |
 | `badge`                | `ReactNode`                                                                                           |          |           | Badge to be displayed beside the label.&#xA;<br />&#xA;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
@@ -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
@@ -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<HTMLButtonElement>
 ) => void;
 
-const defaultProps: Pick<TPasswordField, 'horizontalConstraint'> = {
+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
@@ -102,5 +102,14 @@ export const component = () => (
         renderWarning={() => 'Custom warning'}
       />
     </Spec>
+    <Spec label="with not rendered show/hide password button">
+      <PasswordField
+        title="Welcome Text"
+        value={value}
+        onChange={() => {}}
+        horizontalConstraint={7}
+        renderShowHideButton={false}
+      />
+    </Spec>
   </Suite>
 );