Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix: 6555 Missing PT Option for IconField in Password #6560

Merged
merged 9 commits into from
May 3, 2024
Merged

Fix: 6555 Missing PT Option for IconField in Password #6560

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a17d1e7
passing classname to IconField
KirilCycle May 3, 2024
77d238f
update PaswordBase props
KirilCycle May 3, 2024
23cdcbc
update: use iconField PT to pass props to IconField
KirilCycle May 3, 2024
fa16949
update docs
KirilCycle May 3, 2024
7979f68
update iconField docs description
KirilCycle May 3, 2024
536d2df
formatting
KirilCycle May 3, 2024
5630f08
tiny fix
KirilCycle May 3, 2024
c978d1f
Update Password.js
melloware May 3, 2024
cd6763f
Update PasswordBase.js
melloware May 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion components/lib/password/Password.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -481,8 +481,18 @@ export const Password = React.memo(
let input = <InputText {...inputTextProps} />;

if (icon) {
const iconField = props.iconField;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think you need the iconField part?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well, I thought that in the future it would be easier to access the needed field value

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can already change the icons with props.hideIcon etc.

            if (unmaskedState) {
                icon = props.hideIcon || <EyeSlashIcon {...hideIconProps} />;
            } else {
                icon = props.showIcon || <EyeIcon {...showIconProps} />;
            }

const iconFieldProps = iconField
? mergeProps(
{
className: classNames(iconField.className)
},
ptm('iconField')
)
: {};

input = (
<IconField>
<IconField {...iconFieldProps}>
<InputIcon>{icon}</InputIcon>
{input}
</IconField>
Expand Down
1 change: 1 addition & 0 deletions components/lib/password/PasswordBase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ export const PasswordBase = ComponentBase.extend({
header: null,
content: null,
footer: null,
iconField: null,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think you need this we aren't adding a new property just a new passthrough.

Copy link
Contributor Author

@KirilCycle KirilCycle May 3, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Without this it wont work 'React does not recognize the iconField prop on a DOM'

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just updated your PR can you do a git pull and test again with my changes?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okey

showIcon: null,
hideIcon: null,
icon: null,
Expand Down
4 changes: 4 additions & 0 deletions components/lib/password/password.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,10 @@ export interface PasswordPassThroughOptions {
* Used to control React Transition API.
*/
transition?: PasswordPassThroughTransitionType;
/**
* Uses to pass attributes to the IconField component
*/
iconField?: PasswordPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
}

/**
Expand Down
Loading