Unexpected Behavior in Password Component Width and Icon Customization #7633

components/lib/password/Password.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import PrimeReact, { PrimeReactContext, ariaLabel, localeOption } from '../api/Api';
+import PrimeReact, { ariaLabel, localeOption, PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
@@ -10,7 +10,7 @@ import { InputIcon } from '../inputicon/InputIcon';
 import { InputText } from '../inputtext/InputText';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Portal } from '../portal/Portal';
-import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils';
+import { classNames, DomHandler, IconUtils, ObjectUtils, ZIndexUtils } from '../utils/Utils';
 import { PasswordBase } from './PasswordBase';
 
 export const Password = React.memo(
@@ -155,6 +155,7 @@ export const Password = React.memo(
 
         const toggleMask = () => {
             setUnmaskedState((prevUnmasked) => !prevUnmasked);
+            props.onToggleMaskClick?.(unmaskedState);
         };
 
         const show = () => {
@@ -309,7 +310,7 @@ export const Password = React.memo(
                 {
                     role: 'switch',
                     tabIndex: props.tabIndex || '0',
-                    className: cx('hideIcon'),
+                    className: classNames(props.iconClassNames?.className, props.iconClassNames?.hideIconClassName, cx('hideIcon')),
                     onClick: toggleMask,
                     onKeyDown: onToggleMaskKeyDown,
                     'aria-label': ariaLabel('passwordHide') || 'Hide Password',
@@ -322,7 +323,7 @@ export const Password = React.memo(
                 {
                     role: 'switch',
                     tabIndex: props.tabIndex || '0',
-                    className: cx('showIcon'),
+                    className: classNames(props.iconClassNames?.className, props.iconClassNames?.showIconClassName, cx('showIcon')),
                     onClick: toggleMask,
                     onKeyDown: onToggleMaskKeyDown,
                     'aria-label': ariaLabel('passwordShow') || 'Show Password',

components/lib/password/PasswordBase.js

@@ -29,31 +29,31 @@ const styles = `
         position: relative;
         display: inline-flex;
     }
-    
+
     .p-password-panel {
         position: absolute;
         top: 0;
         left: 0;
     }
-    
+
     .p-password .p-password-panel {
         min-width: 100%;
     }
-    
+
     .p-password-meter {
         height: 10px;
     }
-    
+
     .p-password-strength {
         height: 100%;
         width: 0%;
         transition: width 1s ease-in-out;
     }
-    
+
     .p-fluid .p-password {
         display: flex;
     }
-    
+
     .p-password-input::-ms-reveal,
     .p-password-input::-ms-clear {
         display: none;
@@ -81,6 +81,7 @@ export const PasswordBase = ComponentBase.extend({
         strongRegex: '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})',
         feedback: true,
         toggleMask: false,
+        onToggleMaskClick: null,
         appendTo: null,
         header: null,
         content: null,
@@ -92,6 +93,7 @@ export const PasswordBase = ComponentBase.extend({
         tooltipOptions: null,
         style: null,
         className: null,
+        iconClassNames: null,
         inputStyle: null,
         inputClassName: null,
         invalid: false,

components/lib/password/password.d.ts

@@ -225,6 +225,28 @@ export interface PasswordProps extends Omit<React.DetailedHTMLProps<React.InputH
      * @defaultValue false
      */
     toggleMask?: boolean | undefined;
+    /**
+     * Callback to invoke when the mask toggle button is clicked.
+     * @param {boolean} state - Current state of the mask (true if unmasked, false if masked).
+     */
+    onToggleMaskClick?: (state: boolean) => void | undefined;
+    /**
+     * Object containing class names for icon elements in the Password component.
+     */
+    iconClassNames?: {
+        /**
+         * General style class applied to all icons.
+         */
+        className?: string | undefined;
+        /**
+         * Style class applied to the show icon (used to display the password).
+         */
+        showIconClassName?: string | undefined;
+        /**
+         * Style class applied to the hide icon (used to mask the password).
+         */
+        hideIconClassName?: string | undefined;
+    };
     /**
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body

components/lib/togglebutton/ToggleButton.js

@@ -4,7 +4,7 @@ import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps, useMountEffect } from '../hooks/Hooks';
 import { Ripple } from '../ripple/Ripple';
 import { Tooltip } from '../tooltip/Tooltip';
-import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils';
+import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
 import { ToggleButtonBase } from './ToggleButtonBase';
 
 export const ToggleButton = React.memo(
@@ -101,7 +101,7 @@ export const ToggleButton = React.memo(
             {
                 ref: elementRef,
                 id: props.id,
-                className: classNames(props.className, cx('root', { hasIcon, hasLabel })),
+                className: cx('root', { hasIcon, hasLabel }),
                 'data-p-highlight': props.checked,
                 'data-p-disabled': props.disabled
             },
@@ -133,7 +133,7 @@ export const ToggleButton = React.memo(
 
         const boxProps = mergeProps(
             {
-                className: cx('box', { hasIcon, hasLabel })
+                className: classNames(props.className, cx('box', { hasIcon, hasLabel }))
             },
             ptm('box')
         );

public/themes/arya-blue/theme.css

@@ -1392,6 +1392,12 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.625rem;
   }
+  .p-password > .p-icon-field {
+    width: 100%;
+  }
+  .p-password-input {
+    width: 100%;
+  }
   .p-icon-field {
     position: relative;
   }

public/themes/arya-green/theme.css

@@ -1392,6 +1392,12 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.625rem;
   }
+  .p-password > .p-icon-field {
+    width: 100%;
+  }
+  .p-password-input {
+    width: 100%;
+  }
   .p-icon-field {
     position: relative;
   }

public/themes/arya-orange/theme.css

@@ -1392,6 +1392,12 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.625rem;
   }
+  .p-password > .p-icon-field {
+    width: 100%;
+  }
+  .p-password-input {
+    width: 100%;
+  }
   .p-icon-field {
     position: relative;
   }

public/themes/arya-purple/theme.css

@@ -1392,6 +1392,12 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.625rem;
   }
+  .p-password > .p-icon-field {
+    width: 100%;
+  }
+  .p-password-input {
+    width: 100%;
+  }
   .p-icon-field {
     position: relative;
   }

public/themes/bootstrap4-dark-blue/theme.css

@@ -1395,6 +1395,12 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.9375rem;
   }
+  .p-password > .p-icon-field {
+    width: 100%;
+  }
+  .p-password-input {
+    width: 100%;
+  }
   .p-icon-field {
     position: relative;
   }

public/themes/bootstrap4-dark-purple/theme.css

@@ -1395,6 +1395,12 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.9375rem;
   }
+  .p-password > .p-icon-field {
+    width: 100%;
+  }
+  .p-password-input {
+    width: 100%;
+  }
   .p-icon-field {
     position: relative;
   }

public/themes/bootstrap4-light-blue/theme.css

@@ -1395,6 +1395,12 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.9375rem;
   }
+  .p-password > .p-icon-field {
+    width: 100%;
+  }
+  .p-password-input {
+    width: 100%;
+  }
   .p-icon-field {
     position: relative;
   }

public/themes/bootstrap4-light-purple/theme.css

@@ -1395,6 +1395,12 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.9375rem;
   }
+  .p-password > .p-icon-field {
+    width: 100%;
+  }
+  .p-password-input {
+    width: 100%;
+  }
   .p-icon-field {
     position: relative;
   }

public/themes/fluent-light/theme.css

@@ -1392,6 +1392,12 @@
     font-size: 1.25rem;
     padding: 0.625rem 0.625rem;
   }
+  .p-password > .p-icon-field {
+    width: 100%;
+  }
+  .p-password-input {
+    width: 100%;
+  }
   .p-icon-field {
     position: relative;
   }

public/themes/lara-dark-amber/theme.css

@@ -1409,6 +1409,12 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-password > .p-icon-field {
+    width: 100%;
+  }
+  .p-password-input {
+    width: 100%;
+  }
   .p-icon-field {
     position: relative;
   }

public/themes/lara-dark-blue/theme.css

@@ -1409,6 +1409,12 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-password > .p-icon-field {
+    width: 100%;
+  }
+  .p-password-input {
+    width: 100%;
+  }
   .p-icon-field {
     position: relative;
   }

public/themes/lara-dark-cyan/theme.css

@@ -1409,6 +1409,12 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-password > .p-icon-field {
+    width: 100%;
+  }
+  .p-password-input {
+    width: 100%;
+  }
   .p-icon-field {
     position: relative;
   }

public/themes/lara-dark-green/theme.css

@@ -1409,6 +1409,12 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-password > .p-icon-field {
+    width: 100%;
+  }
+  .p-password-input {
+    width: 100%;
+  }
   .p-icon-field {
     position: relative;
   }

public/themes/lara-dark-indigo/theme.css

@@ -1409,6 +1409,12 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-password > .p-icon-field {
+    width: 100%;
+  }
+  .p-password-input {
+    width: 100%;
+  }
   .p-icon-field {
     position: relative;
   }

public/themes/lara-dark-pink/theme.css

@@ -1409,6 +1409,12 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-password > .p-icon-field {
+    width: 100%;
+  }
+  .p-password-input {
+    width: 100%;
+  }
   .p-icon-field {
     position: relative;
   }

public/themes/lara-dark-purple/theme.css

@@ -1409,6 +1409,12 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-password > .p-icon-field {
+    width: 100%;
+  }
+  .p-password-input {
+    width: 100%;
+  }
   .p-icon-field {
     position: relative;
   }

public/themes/lara-dark-teal/theme.css

@@ -1409,6 +1409,12 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-password > .p-icon-field {
+    width: 100%;
+  }
+  .p-password-input {
+    width: 100%;
+  }
   .p-icon-field {
     position: relative;
   }

public/themes/lara-light-amber/theme.css

@@ -1409,6 +1409,12 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-password > .p-icon-field {
+    width: 100%;
+  }
+  .p-password-input {
+    width: 100%;
+  }
   .p-icon-field {
     position: relative;
   }

public/themes/lara-light-blue/theme.css

@@ -1409,6 +1409,12 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-password > .p-icon-field {
+    width: 100%;
+  }
+  .p-password-input {
+    width: 100%;
+  }
   .p-icon-field {
     position: relative;
   }