Login: Last used login method badge#110447
Draft
nuriapenya wants to merge 3 commits intotrunkfrom
Draft
Conversation
Replaces the two-card "Previously used" UI with a tab-style badge attached to the matching social button, so returning users can see at a glance how they signed in last without splitting the form. Part of DSGCOM-441. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Jetpack Cloud Live (direct link)
Automattic for Agencies Live (direct link)
Dashboard Live (dotcom) (direct link)
|
Contributor
|
This PR modifies the release build for the following Calypso Apps: For info about this notification, see here: PCYsg-OT6-p2
To test WordPress.com changes, run |
nuriapenya
changed the title
- Cover password (email/username field) and magic-login as last-used methods, in addition to social providers. - Restyle the badge to a floating chip on the top-right of the matched element, mirroring @wordpress/components Badge sizing/typography with the WP accent color as fill. - Override the wp-button's inset grey box-shadow (incl. :hover/:focus) so only the accent border is drawn on the matched element. - Set overflow:visible on the social Card + buttons containers so the pill can extend past the right edge. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
Author
Testing all the optionsPassword
Apple
GitHub
Magic link
Jetpack
|
The sign-in-with-paypal flag is only true in development.json, so the button is dev-only chrome that does not appear for real users. Flipping it off in dev removes the noise so dev parity matches production. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
simison
reviewed
May 5, 2026
| overflow: visible; | ||
| } | ||
|
|
||
| // Mirrors @wordpress/components Badge styling (padding, radius, sizing, |
Member
There was a problem hiding this comment.
Instead of mirroring, we could use the actual Badge component and apply only absolute positioning styles to it.
Note that there's also a new badge component in @wordpress/ui, which is the latest, compared to one in Calypso (aka @automattic/components) or older WP components (aka @wordpress/components).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Part of DSGCOM-441.
Proposed Changes
LastUsedBadgecomponent: a floating "Last used" chip on the top-right of the matched element, styled to match@wordpress/components.login-form.jsx(which split the form and reshuffled button order) with the inline badge.sign-in-with-paypaloff inconfig/development.json(production already had it off).Why
Returning users often forget which method they used. The existing two-card UI is very confusing: There's a split in the form, we reshuffled button order, and overall, it's not obvious what was used previously. Showing a simple label on top of the option makes it more clear for the users:
Testing
To test the other options, use DevTools → Application → Cookies →
calypso.localhostand edit the value inline:password→ Email / password option.google/apple/github→ Social buttons.magic-login→ Email me a login link.qr-code→ Jetpack.Open questions
Note
I'm considering only showing the badge for the social buttons (right column). Reason: 90% of logins are already happening via email/password - there's no need to highlight that option. Check the testing below ↓