Update primary buttons on signup #103144

adamwoodnz · 2025-05-06T04:54:34Z

Related to https://linear.app/a8c/issue/DSGCOM-93/update-primary-buttons-on-signup

Proposed Changes

Update the signup forms:

Replace the signup A8C primary button with a core button to fix accessibility issues and bring consistency with login buttons (replaced in Consistent buttons on login #102639) and social buttons (replaced in Add interactive states for social buttons in login and signup #100807)
Standardize the height (40px) and border radius (2px) of text inputs and buttons, unless the brand has specific styling (like Woo)
Add stories for each product to help in checking for regressions, eg. when upgrading core components

Why are these changes being made?

These signup screens have inconsistent buttons heights and border radii, missing or incorrectly applied brand colors, and some have no visible focus styles for the primary button.

Focus styles are necessary for accessibility
Consistent button styles and behaviours form a more high quality experience

Testing Instructions

Storybook

Run yarn storybook: start and the storybook should open in your browser.
Browse the sign up submit button stories at http://localhost:6006/?path=/story/client-blocks-signup-submit-button--default
Test using prop toggles, hover and focus states, and brands

Product

Open the signup screen for each product (see links below)
Check the interactive states for each primary button (particularly hover and focus) - hover background should generally use a darker product accent color (some don't have this, eg. Akismet, Blaze), and the focus ring color should use the accent color. Compare with other buttons, eg social. Focus ring should be the same, but background change should be different.
Tab through the form to ensure the buttons are focusable
Activate the buttons to ensure the actions still fire
Check for responsiveness - mobile and ipad size (Crowdsignal in particular has quite a different responsive layout)

Signup links

WordPress.com -> 'Continue with email' button
Akismet -> 'Continue with email' button
Woo
Blaze Pro
Jetpack Cloud
A4A - Can't link due to GitHub OSS scan rules: go to automatt_c.com/for-agencies/ and click 'Log in', then 'Create an Account'. Edit the URL and change the host to calypso.localhost:3000
VIP
Crowdsignal
Partner Portal - Can't link due to GitHub OSS scan rules: go to hosts.automatt_c.com and you should be redirected to log in, then click 'Create an account'. Edit the URL and change the host to calypso.localhost:3000
WP.Cloud - Can't link due to GitHub OSS scan rules: go to wp.cloud and click 'start here', then 'Create an account'. Edit the URL and change the host to calypso.localhost:3000

Screenshots (showing primary buttons focused)

Brand	Before	After
WordPress.com
Blaze Pro
Jetpack Cloud
Akismet
Woo
VIP
A4A
WP Cloud
Crowdsignal desktop
Crowdsignal mobile

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
- For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

github-actions · 2025-05-06T04:54:46Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-143719

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-143719&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-143719&env=a8c-for-agencies

matticbot · 2025-05-06T05:04:05Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~519 bytes added 📈 [gzipped])

name               parsed_size           gzip_size
stepper-user-step       +571 B  (+0.1%)     +113 B  (+0.1%)
jetpack-connect         +545 B  (+0.0%)     +151 B  (+0.0%)
accept-invite           +545 B  (+0.1%)     +157 B  (+0.1%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~86 bytes removed 📉 [gzipped])

name                          parsed_size           gzip_size
async-load-signup-steps-user       -585 B  (-0.1%)      -86 B  (-0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

adamwoodnz · 2025-05-07T23:34:00Z

client/layout/masterbar/woo.scss

@@ -156,7 +156,7 @@ $breakpoint-mobile: 660px;
 	a:not(.social-buttons__button),
 	.wp-login__links a,
 	.wp-login__links button,
-	.button:not(.social-buttons__button),
+	.button,


These don't exist anymore, all social buttons were migrated to core buttons in #100807

adamwoodnz · 2025-05-07T23:35:09Z

client/signup/style.scss

-		button.signup-form__submit[disabled],
-		button.signup-form__submit:disabled,
-		button.signup-form__submit.disabled {
+		.button.signup-form__submit[disabled],
+		.button.signup-form__submit:disabled,
+		.button.signup-form__submit.disabled {
 			background-color: var(--studio-gray-20);
 			color: var(--color-surface);
 		}

-		button.signup-form__submit {
+		.button.signup-form__submit {


Stop these styles bleeding into core buttons. There is still a .signup-form__submit to be migrated:

wp-calypso/client/my-sites/invites/invite-accept-logged-out/index.jsx

Line 153 in 3ab6adb

<FormButton className="signup-form__submit" onClick={ this.clickSignInLink }>

adamwoodnz · 2025-05-07T23:36:40Z

client/components/logged-out-form/footer.scss

+	.components-button.is-primary {
+		width: 100%;
+		justify-content: center;
+	}


See discussion: #103142 (comment)

adamwoodnz · 2025-05-08T00:08:11Z

client/blocks/signup-form/style.scss

@@ -1,6 +1,7 @@
 @import "@wordpress/base-styles/breakpoints";
 @import "@wordpress/base-styles/mixins";
 @import "@automattic/onboarding/styles/mixins";
+@import "../../assets/stylesheets/shared/mixins/breakpoints";


Storybook build of this individual file fails without explicit imports for this dependency

adamwoodnz · 2025-05-08T00:08:33Z

client/components/logged-out-form/footer.scss

@@ -1,3 +1,5 @@
+@import "../../assets/stylesheets/shared/mixins/elevation";


Storybook build of this individual file fails without explicit imports for this dependency

adamwoodnz · 2025-05-08T00:34:39Z

client/jetpack-connect/test/__snapshots__/signup.js.snap

@@ -213,8 +213,7 @@ exports[`JetpackSignup should render 1`] = `
                .
              </p>
              <button
-                class="button signup-form__submit form-button is-primary"
-                locale="en"


I cannot find any code which depends on this non-standard attribute. I'd expect if it was used it would be using the standard data-locale. It's passed to all FormButton components via the localize higher order component, and is no longer added to the DOM now that we're using a core Button. I believe the FormButton should be omitting it when adding props to the element, along with translate.

adamwoodnz · 2025-05-08T04:14:43Z

client/blocks/signup-form/index.jsx

-				<div>
-					<LoggedOutFormLinks>
-						<span>{ this.props.translate( 'Already have an account?' ) }&nbsp;</span>
-						<LoggedOutFormLinkItem href={ this.getLoginLink() }>
-							{ this.props.translate( 'Log in here' ) }
-						</LoggedOutFormLinkItem>
-					</LoggedOutFormLinks>
-				</div>


A login link is already rendered above the form, this removes the duplicate.

Before After

These screenshots also show the links colors I fixed @jasmussen, but none of these orange elements, nor the grey terms text meet WCAG contrast requirements:

Indeed, excellent catch and thank you for surfacing this. This is a great example of why we want to build systems first as much as possible, so we can unify disparate-but-similar interfaces and elevate all of them together.

Regarding the duplicate login link, the end-state design would probably be to use the Calypso screen as a template. That has a log-in link in the top right corner of the entire screen, as persistent affordance across related screens when you're not logged in.

Near term, or small-fix territory, you can either choose to have both of those, or delete the former one. My instinct would be to keep the bottom link in context of the log-in button, not the one near the header. I.e. delete this:

Keep this:

In both cases, ensure to end every sentence with a period. I.e. "Already have an account? Log in."

The second issue is the contrast issue. I'm not aware of which designer(s) were attached to this in the past that might have additional context. The easiest fix if we are to fix it here, would be blueberry hyperlinks, black text on the orange button (if we are to keep the orange accent color):

Ironically that visually feels like lower contrast though, which just surfaces some of the WCAG algorithms and how they feel dated. In that sense, if the best fix is likely to replace the orange with the blueberry (or a blue from the Blaze palette), and keep the orange brand color for bigger swing contexts.

Both of those are in redesign territory, though, so the immediate fix may be to do as little as possible for this PR, and then separately file an issue that pings the Blaze team about this issue.

Updated in 1c07f9d

New screenshot:

Looks great. Can you add a period at the end of the sentence, so it's "First, create your WordPress.com account."?

Not a blocker.

Done in 2f08f67

Issue created for contrast issues, and added to the audit project: DOTCOM-13184: Blaze Pro login/signup screens do not meet WCAG 2 AA minimum contrast ratio thresholds

- Remove duplicate top link and customise copy - Fix translation and accessibility of lower link

matticbot · 2025-05-12T03:34:16Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

help-center
notifications
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug dsgcom-93-update-primary-buttons-on-signup on your sandbox.

tellthemachines

Code LGTM! Just one non-blocking comment on the snapshots below.

Something unrelated to this PR that I noticed: on Crowdsignal and Blaze Pro I'm seeing "Create a site" as the page title. That sounds weird given neither of those products are about creating sites. I'm guessing that's the default message for creating a wordpress.com account but given the diversity of products leveraging this signup we should perhaps make it something more generic like "Create your account"?

tellthemachines · 2025-05-13T05:34:42Z

client/jetpack-connect/test/__snapshots__/signup.js.snap

@@ -500,8 +499,7 @@ exports[`JetpackSignup should render with locale suggestions 1`] = `
                .
              </p>
              <button
-                class="button signup-form__submit form-button is-primary"
-                locale="en"


If this test is meant to test that JetpackSignup should render with locale suggestions and we've removed the locale, shouldn't we also delete the test?

(I'm not sure this was working correctly to start with as the test sets locale="es" and this snapshot had locale="en")

Good question. I believe the locale attribute on the button isn't actually used or related to the test. I ran a diff on the snapshot output and the locale="es" in the test props results in a different signup URL:

href="/log-in/jetpack/es?site=http%3A%2F%2Fan.example.site&redirect_to=https%3A%2F%2Fexample.com%2F&email_address=email%40an.example.site&from=banner-44-slide-1-dashboard"

vs

href="/log-in/jetpack?site=http%3A%2F%2Fan.example.site&redirect_to=https%3A%2F%2Fexample.com%2F&email_address=email%40an.example.site&from=banner-44-slide-1-dashboard"

So I think it's still valid.

Oh that makes sense!

adamwoodnz · 2025-05-13T21:57:03Z

Something unrelated to this PR that I noticed: on Crowdsignal and Blaze Pro I'm seeing "Create a site" as the page title. That sounds weird given neither of those products are about creating sites. I'm guessing that's the default message for creating a wordpress.com account but given the diversity of products leveraging this signup we should perhaps make it something more generic like "Create your account"?

Yeah nice spotting, I hadn't noticed that, but I see it on all the sites that use http://calypso.localhost:3000/start/wpcc/oauth2-user?... for signup (also Woo, VIP, Jetpack Cloud, etc.)

Issue created.

a8ci18n · 2025-05-14T00:21:16Z

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/17467615

Some locales (Hebrew) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Thank you @adamwoodnz for including a screenshot in the description! This is really helpful for our translators.

a8ci18n · 2025-05-18T17:29:01Z

Translation for this Pull Request has now been finished.

adamwoodnz self-assigned this May 6, 2025

adamwoodnz added Accessibility (a11y) [Feature] Authentication Everything login and authentication. labels May 6, 2025

Base automatically changed from dsgcom-38-update-primary-buttons-on-log-in-page to trunk May 7, 2025 00:26

adamwoodnz force-pushed the dsgcom-93-update-primary-buttons-on-signup branch 7 times, most recently from af7eb8c to 09c6f6a Compare May 7, 2025 23:04

adamwoodnz commented May 7, 2025

View reviewed changes

adamwoodnz force-pushed the dsgcom-93-update-primary-buttons-on-signup branch 2 times, most recently from c853902 to 09700b7 Compare May 7, 2025 23:57

adamwoodnz commented May 8, 2025

View reviewed changes

adamwoodnz force-pushed the dsgcom-93-update-primary-buttons-on-signup branch from e77503d to c5c4d8b Compare May 8, 2025 00:34

adamwoodnz commented May 8, 2025

View reviewed changes

adamwoodnz marked this pull request as ready for review May 8, 2025 04:21

adamwoodnz requested review from mirka, jasmussen, chihsuan and tellthemachines May 8, 2025 04:21

matticbot added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels May 8, 2025

adamwoodnz added 16 commits May 12, 2025 13:42

Replace signup button with core button

cc46f08

Use core button for passwordless signup submit

ad85423

Use core button for crowdsignal signup buttons

a06f31d

Add signup submit button stories

05aaa3c

Stop crowdsignal button style bleed

ee8e6a7

Style Akismet social signup button

fafc388

Use relative imports for sign up form components

e2d2302

Reduce scope of logged out footer changes

36be322

Fix Akismet styles

38c67da

Remove remaining social button overrides

96b6c6f

Simplify Crowdsignal styles

307b06b

Simplify Akismet styles

ccc0a8c

Scope form button styles so they don't affect core buttons

a8e6d6b

Update brand button copy in stories

138b5e5

Update Jetpack snapshots

a3ae375

Fix Blaze link colors

09acc1b

adamwoodnz force-pushed the dsgcom-93-update-primary-buttons-on-signup branch 2 times, most recently from b00c3c9 to eb512e9 Compare May 12, 2025 02:46

adamwoodnz added 3 commits May 12, 2025 15:25

Update Blaze login links

2f08f67

- Remove duplicate top link and customise copy - Fix translation and accessibility of lower link

Fix color contrast issue with terms of service copy

36ec18b

Remove redundant button content centering

68da482

adamwoodnz force-pushed the dsgcom-93-update-primary-buttons-on-signup branch from eb512e9 to 68da482 Compare May 12, 2025 03:26

tellthemachines approved these changes May 13, 2025

View reviewed changes

adamwoodnz merged commit 1f38196 into trunk May 13, 2025
14 checks passed

adamwoodnz deleted the dsgcom-93-update-primary-buttons-on-signup branch May 13, 2025 22:07

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label May 13, 2025

		@@ -1,3 +1,5 @@
		@import "../../assets/stylesheets/shared/mixins/elevation";

Update primary buttons on signup #103144

Update primary buttons on signup #103144

Uh oh!

Conversation

adamwoodnz commented May 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Why are these changes being made?

Testing Instructions

Storybook

Product

Signup links

Screenshots (showing primary buttons focused)

Pre-merge Checklist

Uh oh!

github-actions bot commented May 6, 2025 • edited by matticbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented May 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

adamwoodnz May 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

adamwoodnz May 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

adamwoodnz May 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

matticbot commented May 12, 2025

Uh oh!

tellthemachines left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

adamwoodnz commented May 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

a8ci18n commented May 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

a8ci18n commented May 18, 2025

Uh oh!

Uh oh!

adamwoodnz commented May 6, 2025 •

edited

Loading

github-actions bot commented May 6, 2025 •

edited by matticbot

Loading

matticbot commented May 6, 2025 •

edited

Loading

adamwoodnz May 7, 2025 •

edited

Loading

adamwoodnz May 8, 2025 •

edited

Loading

adamwoodnz May 8, 2025 •

edited

Loading

adamwoodnz commented May 13, 2025 •

edited

Loading

a8ci18n commented May 14, 2025 •

edited

Loading