Skip to content

Fix misaligned show/hide icon in password fields#12472

Open
i-am-chitti wants to merge 1 commit into
WordPress:trunkfrom
i-am-chitti:trac-65605
Open

Fix misaligned show/hide icon in password fields#12472
i-am-chitti wants to merge 1 commit into
WordPress:trunkfrom
i-am-chitti:trac-65605

Conversation

@i-am-chitti

Copy link
Copy Markdown

Description

Trac ticket: https://core.trac.wordpress.org/ticket/65605

The password visibility (show/hide) toggle icon is misaligned within the password field on the Users → Add New User screen. The eye icon does not line up correctly with the "Hide"/"Show" label inside the button.

Root cause

This regressed from the fix for #65031, which corrected the same misalignment on the Profile / Edit User screen. That fix scoped the alignment CSS to a new .user-new-password-toggle class and only added that class to the button in user-edit.php:

.button.wp-hide-pw.user-new-password-toggle {
      display: inline-flex;
      align-items: center;
      column-gap: 4px;
}

The Add New User screen (user-new.php) uses the identical show/hide button (.button.wp-hide-pw with a .dashicons icon + .text label) but never received the class, so its icon fell back to inline vertical-align: middle and rendered misaligned.

Fix

Instead of adding the marker class to each screen, the alignment rule is generalized to target the toggle buttons directly, so every show/hide/cancel password button is aligned consistently with no per-screen markup:

.wp-core-ui .button.wp-hide-pw,
.wp-core-ui .button.wp-cancel-pw {
      display: inline-flex;
      align-items: center;
      column-gap: 4px;
}

The now-redundant .user-new-password-toggle class is removed from user-edit.php.

Testing Instructions

  1. Go to Users → Add New User and click Generate password. Confirm the eye icon is vertically centered with the "Hide" label inside the button.
  2. Go to Users → Profile → Set New Password. Confirm the show/hide and Cancel button icons remain aligned.
  3. Go to Settings → Writing → Post via email and confirm the password field's icon is still aligned (icon-only button).
  4. Check in an RTL locale and at mobile viewport widths.

Screenshots

Before on user-new.php -
image

After on user-new.php
image

Before on profile.php (no-change)
image

After on profile.php
image

Before on options-writing.php (no-change)
image

After on options-writing.php
image

@github-actions

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props iamchitti.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@github-actions

Copy link
Copy Markdown

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

  • All changes will be lost when closing a tab with a Playground instance.
  • All changes will be lost when refreshing the page.
  • A fresh instance is created each time the link below is clicked.
  • Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
    it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant