Repository: Automattic/wp-calypso
Pull request #102328: Stats: remove some legacy styles
Author: login: jsnajdr
Labels: name: [Feature] Stats
description: Everything related to our analytics product at /stats/
name: Janitorial
Created: 2025-04-02T10:14:27Z | Merged: 2025-04-02T18:53:11Z

I've been looking at usages of the `@extend .wp-brand-font` SCSS mixin, and found the `.stats__card-title` CSS class, and figured out it's no longer used. As well as the entire `.stats__card` styles, and also styles for "private site banner" and "Parse.ly stats".

Some PRs where these styles were added many years ago:
- #48809 (`stats__card`)
- #61796 (private banner)
- #55993 (Parse.ly)

None of these is to be found in today's code.

## Testing instructions:
Verify that the styles are indeed unused.


Diff:
diff --git a/client/my-sites/stats/style.scss b/client/my-sites/stats/style.scss
index c3fe8c52eb81..c3e401d30993 100644
--- a/client/my-sites/stats/style.scss
+++ b/client/my-sites/stats/style.scss
@@ -4,8 +4,6 @@
 @import "calypso/my-sites/stats/modernized-layout-styles";
 @import "calypso/my-sites/stats/theme-override-mixin";
 
-$stats-card-min-width: 390px;
-
 // Odyssey font overrides
 $font-sf-pro-display: "SF Pro Display", $sans;
 
@@ -82,168 +80,6 @@ $font-sf-pro-display: "SF Pro Display", $sans;
 	}
 }
 
-
-.stats-card {
-	@media (max-width: $break-medium) {
-		min-width: $stats-card-min-width;
-	}
-}
-
-.stats__card {
-	display: flex;
-	background: var(--color-surface);
-	box-shadow: 0 0 0 1px var(--color-border-subtle);
-	position: relative;
-	margin-bottom: 24px;
-
-	.stats__card-text,
-	.stats__card-illustration {
-		box-sizing: border-box;
-		padding: 24px;
-
-		@include breakpoint-deprecated( ">1040px" ) {
-			padding: 32px;
-		}
-	}
-
-	.stats__card-text {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-	}
-
-	.stats__card-illustration {
-		width: 25%;
-		align-self: auto;
-		flex-shrink: 0;
-		margin-left: auto;
-	}
-
-	.stats__card-title {
-		@extend .wp-brand-font;
-		font-size: $font-title-medium;
-		line-height: 36px;
-		margin-bottom: 4px;
-
-		@include breakpoint-deprecated( ">800px" ) {
-			line-height: 40px;
-		}
-	}
-
-	.stats__card-description {
-		margin-bottom: 24px;
-		font-size: $font-body;
-		line-height: 24px;
-		color: var(--color-text);
-
-		@include breakpoint-deprecated( ">800px" ) {
-			line-height: 28px;
-			margin-bottom: 32px;
-		}
-	}
-
-	.stats__card-actions {
-		display: flex;
-		padding-top: 0;
-		margin-top: auto;
-		font-size: $font-body-small;
-	}
-
-	.stats__card-action {
-		margin-right: 16px;
-	}
-}
-
-.stats__private-site-banner {
-	.banner__content {
-		.banner__action {
-			margin-top: 14px;
-			margin-right: 0;
-			@include breakpoint-deprecated( ">480px" ) {
-				margin-right: 40px;
-				margin-top: 0;
-
-				a {
-					width: 140px;
-					margin-left: 10px;
-				}
-			}
-		}
-	}
-
-	.dismissible-card__close-button {
-		transform: translateY(-50%);
-		-webkit-transform: translateY(-50%);
-		top: 50%;
-		@include breakpoint-deprecated( ">480px" ) {
-			top: unset;
-			transform: unset;
-			-webkit-transform: unset;
-		}
-	}
-	.banner__icons {
-		.banner__icon {
-			display: none;
-		}
-		.banner__icon-no-circle {
-			max-width: 48px;
-			max-height: 48px;
-			min-width: 48px;
-			min-height: 48px;
-		}
-	}
-}
-
-.stats__parsely-banner {
-	display: flex;
-	font-size: $font-body-small;
-	flex-wrap: wrap;
-	align-items: flex-start;
-	justify-content: space-around;
-	padding: 30px;
-	margin-top: 16px;
-
-	@include breakpoint-deprecated( ">960px" ) {
-		flex-direction: row;
-		align-items: center;
-	}
-
-	.formatted-header.is-left-align {
-		margin: 0 0 16px;
-	}
-
-	& > div {
-		flex: 1;
-		margin-right: 30px;
-	}
-
-	img {
-		margin-right: 30px;
-		width: 45px;
-		height: auto;
-	}
-
-	p {
-		color: var(--color-text-subtle);
-		@include breakpoint-deprecated( ">960px" ) {
-			margin-bottom: 0;
-		}
-	}
-
-	.button {
-		margin-left: auto;
-		justify-self: flex-end;
-
-		@include breakpoint-deprecated( ">960px" ) {
-			margin-left: 30px;
-		}
-	}
-
-	&::after {
-		display: none;
-	}
-}
-
 // Stats section scoped styles
 .is-section-stats {
 	&.color-scheme.is-classic-dark {
diff --git a/packages/components/src/horizontal-bar-list/stats-card.scss b/packages/components/src/horizontal-bar-list/stats-card.scss
index e90736f69ce2..be1a8c7edb45 100644
--- a/packages/components/src/horizontal-bar-list/stats-card.scss
+++ b/packages/components/src/horizontal-bar-list/stats-card.scss
@@ -17,6 +17,7 @@
 	background-color: var(--studio-white);
 
 	@media (max-width: $break-medium) {
+		min-width: 390px;
 		border-radius: 0;
 		border-left: 0;
 		border-right: 0;


Reviews:
user: login: tyxla
body: LGTM 👍 

I'd likely keep the `.stats-card` styles because there's a chance we might be needing that in unexpected ways. 
state: APPROVED
author_association: MEMBER
submitted_at: 2025-04-02T12:14:50Z
user: login: jsnajdr
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-02T12:37:29Z
user: login: tyxla
body: Looking great, thanks!
state: APPROVED
author_association: MEMBER
submitted_at: 2025-04-02T14:25:50Z
user: login: tyxla
body: Looking great, thanks!
state: APPROVED
author_association: MEMBER
submitted_at: 2025-04-02T14:25:51Z

Review comments:
diff_hunk: @@ -82,168 +82,6 @@ $font-sf-pro-display: "SF Pro Display", $sans;
 	}
 }
 
-
-.stats-card {
-	@media (max-width: $break-medium) {
-		min-width: $stats-card-min-width;
path: client/my-sites/stats/style.scss
user: login: tyxla
body: That `$stats-card-min-width` var could also be removed. 
created_at: 2025-04-02T12:11:50Z
author_association: MEMBER
diff_hunk: @@ -82,168 +82,6 @@ $font-sf-pro-display: "SF Pro Display", $sans;
 	}
 }
 
-
-.stats-card {
path: client/my-sites/stats/style.scss
user: login: tyxla
body: This is probably fine, but I'd triple check since we still have things like this:

https://github.com/Automattic/wp-calypso/blob/0990db38a4f013587d55908af2796950346d9a2e/packages/components/src/horizontal-bar-list/stats-hero-card.tsx#L7

and:

https://github.com/Automattic/wp-calypso/blob/0990db38a4f013587d55908af2796950346d9a2e/packages/components/src/horizontal-bar-list/stats-card.tsx#L8
created_at: 2025-04-02T12:13:25Z
author_association: MEMBER
diff_hunk: @@ -82,168 +82,6 @@ $font-sf-pro-display: "SF Pro Display", $sans;
 	}
 }
 
-
-.stats-card {
path: client/my-sites/stats/style.scss
user: login: jsnajdr
body: Oh, this is an oversight, I didn't mean to remove the styles for still-used `.stats-card`. Anyway, in da4fa3bab60 I moved the `min-width` style to a better place, to `stats-card.scss` where all the other `.stats-card` styles live. And inlined the `$stats-card-min-width` variable because it's used only once.
created_at: 2025-04-02T12:37:28Z
author_association: MEMBER

PR comments:
user: login: github-actions[bot]
created_at: 2025-04-02T10:14:38Z
body: <details>
<summary>Calypso Live <a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-139426">(direct link)</a></summary>
<table>
<tr>
<td>
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https%3A%2F%2Fcalypso.live%3Fimage%3Dregistry.a8c.com%2Fcalypso%2Fapp%3Abuild-139426%26flags%3Doauth&choe=UTF-8" />
</td>
<td>
<a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-139426">https://calypso.live?image=registry.a8c.com/calypso/app:build-139426</a>
</td>
</tr>
</table>
</details>
<details>
<summary>Jetpack Cloud live <a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-139426&env=jetpack">(direct link)</a></summary>
<table>
<tr>
<td>
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https%3A%2F%2Fcalypso.live%3Fimage%3Dregistry.a8c.com%2Fcalypso%2Fapp%3Abuild-139426%26env%3Djetpack%26flags%3Doauth&choe=UTF-8" />
</td>
<td>
<a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-139426&env=jetpack">https://calypso.live?image=registry.a8c.com/calypso/app:build-139426&env=jetpack</a>
</td>
</tr>
</table>
</details>
<details>
<summary>Automattic for Agencies live <a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-139426&env=a8c-for-agencies">(direct link)</a></summary>
<table>
<tr>
<td>
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https%3A%2F%2Fcalypso.live%3Fimage%3Dregistry.a8c.com%2Fcalypso%2Fapp%3Abuild-139426%26env%3Da8c-for-agencies%26flags%3Doauth&choe=UTF-8" />
</td>
<td>
<a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-139426&env=a8c-for-agencies">https://calypso.live?image=registry.a8c.com/calypso/app:build-139426&env=a8c-for-agencies</a>
</td>
</tr>
</table>
</details>
<!--calypso-live-watermark:apr@v1-->
author_association: NONE
user: login: matticbot
created_at: 2025-04-02T10:20:43Z
body: <!-- icfy-watermark: c52822 -->
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](http://iscalypsofastyet.com).
author_association: CONTRIBUTOR
user: login: matticbot
created_at: 2025-04-02T10:28:27Z
body: **This PR modifies the release build for the following Calypso Apps:**

_For info about this notification, see here: PCYsg-OT6-p2_

* notifications
* odyssey-stats
* wpcom-block-editor

To test WordPress.com changes, run `install-plugin.sh $pluginSlug remove/legacy-stats-styles` on your sandbox.
<!--calypso-app-artifacts-watermark:apr@v1-->
author_association: CONTRIBUTOR