Fix `_wp-components-overrides.scss` by increasing selector specifity #79708

alshakero · 2023-07-20T20:23:23Z

Follow up to #79692.

This PR increases the selectors in wp-components-overrides in make wp.com styles take precedence over wp.org styles (that come from @wordpress/components.

This PR will fix all Stepper flows.

Testing

Go to /setup/domain-transfer.
Check the first two steps.
The buttons should have blue-50 and should have good hover state.

Go to /setup/link-in-bio.
Check the second step.
The buttons should have blue-50 and should have good hover state.

github-actions · 2023-07-20T20:23:36Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2023-07-20T20:36:28Z

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

lsl · 2023-07-21T00:42:36Z

...anding/stepper/declarative-flow/internals/steps-repository/domain-transfer-intro/styles.scss

+	--wp-components-color-accent: var(--studio-blue-50);
+	--wp-components-color-accent-darker-20: var(--studio-blue-60);
+	--wp-components-color-accent-darker-10: var(--studio-blue-60);
+}


Can this be done globally?

Made this fix on Stepper level. It seems a couple of flows were affected by updating @wordpress/components.

p1689919222911329-slack-C05CT832K2T

renancarvalho

Hi Omar, thank you for working on this one. Looks nice!

Besides the disabled state that you mentioned, I just missed the border radius 4px;

alshakero · 2023-07-21T09:13:16Z

I just missed the border radius 4px;

Great catch, fixed.

renancarvalho

LGTM 👍

This reverts commit a7177e3.

This reverts commit 6789223.

noahtallen · 2023-07-21T20:59:26Z

Thanks for fixing this! I noticed two issues in the link in bio flow:

Screen.Recording.2023-07-21.at.1.58.02.PM.mov

The progress bar is misaligned (maybe unrelated to this PR)
I think the hover color on the primary button is still using the WP color scheme, since it looks slightly purple. (might be wrong about this!)

lsl · 2023-07-24T03:30:57Z

...anding/stepper/declarative-flow/internals/steps-repository/domain-transfer-intro/styles.scss

-				opacity: 1;
-			}
+			justify-content: center;
+			border-radius: 4px;


Can the border-radius change be done at the component level? Using button components in calypso shouldn't involve usage level CSS.

Maybe we need a new isLarge style option for the button component? height, font-weight, and border-radius could be done there. There is an isSmall prop already available.

lsl · 2023-07-24T03:44:47Z

client/assets/stylesheets/_wp-components-overrides.scss

@@ -11,14 +11,16 @@
 }

 /* @wordpress/components Button overrides */
-.components-button {
+a.components-button,
+button.components-button {


Feels like we're missing a root cause here, why is adding this a fix?

As long as we're importing our overrides (this file) after the wordpress styles get imported (@wordpress/components/build-style/style), then we shouldn't need this change right?

I think what's happening is client/assets/stylesheets/style.css is being loaded into the stepper framework, where maybe previously it wasn't?

The client style.css file pulls in these lines:

wp-calypso/client/assets/stylesheets/style.scss

Lines 18 to 21 in a610546

@import "@wordpress/components/build-style/style";

// Overrides for @wordpress/components

@import "./wp-components-overrides";

Then later in the stepper framework pull in wordpress/component styles again here:

wp-calypso/client/landing/stepper/declarative-flow/internals/global.scss

Line 4 in a610546

@import "@wordpress/components/build-style/style";

This overrides our overrides back with original styling.

I think the fix is to remove that line and then add our new overrides as required for wordpress/components in either the calypso-wide override file client/assets/stylesheets/_wp-components-overrides.scss or the stepper framework's client/landing/stepper/declarative-flow/internals/global.scss depending on which is more appropriate for the override.

I confirmed that if you remove that import line in global.scss and then add in the color overrides again:

// WordPress.org components no longer use blue-50 as the primary color. // This changes the primary color to blue-50 to conform to the WordPress.com colors. :root { --wp-components-color-accent: var(--studio-blue-50); --wp-components-color-accent-darker-20: var(--studio-blue-60); --wp-components-color-accent-darker-10: var(--studio-blue-60); }

That the links have the right color in the link-in-bio flow.

We likely still need a new disabled button style added into the calypso-wide overrides file for a complete fix. Commented below.

Great investigation @lsl, I created a first version of this idea here.

Thanks Louis! Much appreciated.

lsl · 2023-07-24T04:14:26Z

...ding/stepper/declarative-flow/internals/steps-repository/domain-transfer-domains/styles.scss

+	button.components-button.bulk-domain-transfer__cta {
+		&:disabled {
+			background: var(--studio-gray-5);
+		}
+	}


Can we move this over to the wp-components-overrides file and generalize for all buttons? or if that's not an option right now at least into the stepper global.scss?

paulopmt1 · 2023-07-27T11:58:32Z

Thanks for your work here @alshakero. Based on it, I've created this follow-up task that fixed the style issue. So we can probably close this one.

alshakero · 2023-07-28T14:09:04Z

I really really appreciate it! I was deep in other tasks.

Populate CSS variables to match the design

77ded48

alshakero requested a review from renancarvalho July 20, 2023 20:24

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jul 20, 2023

alshakero requested a review from mtias July 20, 2023 20:24

alshakero mentioned this pull request Jul 20, 2023

Domain transfer: Fix CTA button color #79692

Merged

lsl reviewed Jul 21, 2023

View reviewed changes

More general solution

0fd06fd

alshakero changed the title ~~Domain Transfer: populate CSS variables to match the design~~ Stepper: populate CSS variables to have WordPress.com colors (vs .orgs) Jul 21, 2023

renancarvalho reviewed Jul 21, 2023

View reviewed changes

Add border-radius to button

d183d2a

Fix comment

ffb92f9

renancarvalho self-requested a review July 21, 2023 09:16

Remove extraneous props

05ae6dd

renancarvalho approved these changes Jul 21, 2023

View reviewed changes

alshakero added 4 commits July 21, 2023 12:03

Fix the root cause

a7177e3

Revert "Fix the root cause"

6789223

This reverts commit a7177e3.

Revert "Revert "Fix the root cause""

ff5d1f2

This reverts commit 6789223.

Style disabled state in the step

f157e20

alshakero changed the title ~~Stepper: populate CSS variables to have WordPress.com colors (vs .orgs)~~ Fix _wp-components-overrides.scss by increasing selector specifity Jul 21, 2023

lsl reviewed Jul 24, 2023

View reviewed changes

lsl mentioned this pull request Jul 25, 2023

Fix link-in-bio styles. #79756

Merged

7 tasks

paulopmt1 mentioned this pull request Jul 25, 2023

Fixing duplicate override and using global overrides on Button for Domain Transfer and Link in Bio #79851

Merged

7 tasks

alshakero closed this Jul 28, 2023

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 Jul 28, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix `_wp-components-overrides.scss` by increasing selector specifity #79708

Fix `_wp-components-overrides.scss` by increasing selector specifity #79708

alshakero commented Jul 20, 2023 •

edited

Loading

github-actions bot commented Jul 20, 2023 •

edited by matticbot

Loading

matticbot commented Jul 20, 2023

lsl Jul 21, 2023

alshakero Jul 21, 2023

renancarvalho left a comment

alshakero commented Jul 21, 2023

renancarvalho left a comment

noahtallen commented Jul 21, 2023 •

edited

Loading

lsl Jul 24, 2023

lsl Jul 24, 2023

paulopmt1 Jul 25, 2023

alshakero Jul 26, 2023

lsl Jul 24, 2023

paulopmt1 commented Jul 27, 2023

alshakero commented Jul 28, 2023

	@import "@wordpress/components/build-style/style";

	// Overrides for @wordpress/components
	@import "./wp-components-overrides";

Fix _wp-components-overrides.scss by increasing selector specifity #79708

Fix _wp-components-overrides.scss by increasing selector specifity #79708

Conversation

alshakero commented Jul 20, 2023 • edited Loading

Testing

github-actions bot commented Jul 20, 2023 • edited by matticbot Loading

matticbot commented Jul 20, 2023

lsl Jul 21, 2023

Choose a reason for hiding this comment

alshakero Jul 21, 2023

Choose a reason for hiding this comment

renancarvalho left a comment

Choose a reason for hiding this comment

alshakero commented Jul 21, 2023

renancarvalho left a comment

Choose a reason for hiding this comment

noahtallen commented Jul 21, 2023 • edited Loading

lsl Jul 24, 2023

Choose a reason for hiding this comment

lsl Jul 24, 2023

Choose a reason for hiding this comment

paulopmt1 Jul 25, 2023

Choose a reason for hiding this comment

alshakero Jul 26, 2023

Choose a reason for hiding this comment

lsl Jul 24, 2023

Choose a reason for hiding this comment

paulopmt1 commented Jul 27, 2023

alshakero commented Jul 28, 2023

Fix `_wp-components-overrides.scss` by increasing selector specifity #79708

Fix `_wp-components-overrides.scss` by increasing selector specifity #79708

alshakero commented Jul 20, 2023 •

edited

Loading

github-actions bot commented Jul 20, 2023 •

edited by matticbot

Loading

noahtallen commented Jul 21, 2023 •

edited

Loading