Unexpected Behavior in Password Component Width and Icon Customization #7633

[myigituzun]

This fixes #7633

Changes Made:
1. Fixed Full-Width Issue:
• Applied styles to container elements in the Password component for all themes, ensuring proper handling of className like w-full.
2. Added New Props:
• iconClassNames: Enables assigning custom classes to toggle mask icons (showIconClassName and hideIconClassName).
• onToggleMaskClick: Provides a callback function triggered on icon clicks to allow custom logic.

Example Usage:

<div className="card flex justify-content-center">
    <Password
        value={value}
        onChange={(e) => setValue(e.target.value)}
        toggleMask
        onToggleMaskClick={(state) => console.log(state)}
        className={'w-full'}
        iconClassNames={{
            className: 'mr-8',
            showIconClassName: 'text-red-500',
            hideIconClassName: 'text-yellow-700'
        }}
    />
</div>

Visual Output:

Let me know if additional changes or adjustments are required!

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Skipped Deployments

Name	Status	Preview	Updated (UTC)
primereact	⬜️ Ignored (Inspect)	Visit Preview	Jan 21, 2025 11:37pm
primereact-v9	⬜️ Ignored (Inspect)	Visit Preview	Jan 21, 2025 11:37pm

[melloware]

Assigned to PrimeTek since this is a theme change.