Skip to content

Podcast: align bottom Stats cards with wpcom Stats card module look#48761

Open
robertbpugh wants to merge 4 commits into
trunkfrom
update/podcast-stats-bottom-cards-wpcom-styling
Open

Podcast: align bottom Stats cards with wpcom Stats card module look#48761
robertbpugh wants to merge 4 commits into
trunkfrom
update/podcast-stats-bottom-cards-wpcom-styling

Conversation

@robertbpugh
Copy link
Copy Markdown
Contributor

Summary

Visually align the Top episodes, By app, and Locations Stats cards with the wpcom Stats card module look so the Stats tab reads as one consistent surface.

  • Real 1px border + 5px radius, no shadow.
  • Larger 20px / 500-weight section titles.
  • 24px content padding; header pads 24/24/12 with no divider.
  • Scoped via &:not(.podcast-stats-chart) so the Downloads chart card stays as-is.

Test plan

  • On the podcast Stats tab, confirm Top episodes, By app, and Locations cards show the new border, radius, header padding, and 20px title.
  • Confirm the Downloads chart card (4 summary tiles + chart) is unchanged.
  • Confirm the per-episode Stats view inherits the same look on its bottom cards.
  • RTL spot-check (logical padding properties).

robertbpugh and others added 2 commits May 12, 2026 21:01
Restyles the SectionCard wrapper used by Top episodes, By app, and By
location so the cards read like the Calypso Stats card modules: real
1px border, no box-shadow, 20px title, and 24px content padding. Scoped
off the Downloads chart card so its layout stays unchanged.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings May 13, 2026 01:05
@robertbpugh robertbpugh self-assigned this May 13, 2026
@robertbpugh robertbpugh requested a review from arcangelini May 13, 2026 01:05
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 13, 2026

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

  • To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack or WordPress.com Site Helper), and enable the update/podcast-stats-bottom-cards-wpcom-styling branch.
  • To test on Simple, run the following command on your sandbox:
bin/jetpack-downloader test jetpack update/podcast-stats-bottom-cards-wpcom-styling
bin/jetpack-downloader test jetpack-mu-wpcom-plugin update/podcast-stats-bottom-cards-wpcom-styling

Interested in more tips and information?

  • In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
  • Read more about our development workflow here: PCYsg-eg0-p2
  • Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

@github-actions
Copy link
Copy Markdown
Contributor

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

  • ✅ Include a description of your PR changes.
  • 🔴 Add a "[Status]" label (In Progress, Needs Review, ...).
  • 🔴 Add testing instructions.
  • 🔴 Specify whether this PR includes any changes to data or privacy.
  • ✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖


🔴 Action required: Please include detailed testing steps, explaining how to test your change, like so:

## Testing instructions:

* Go to '..'
*

🔴 Action required: We would recommend that you add a section to the PR description to specify whether this PR includes any changes to data or privacy, like so:

## Does this pull request change what data or activity we track or use?

My PR adds *x* and *y*.

Follow this PR Review Process:

  1. Ensure all required checks appearing at the bottom of this PR are passing.
  2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
  3. You can use GitHub's Reviewers functionality to request a review.
  4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

@github-actions github-actions Bot added [Package] Podcast [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. labels May 13, 2026
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates the Podcast dashboard Stats tab styling so the non-chart stats cards (Top episodes, By app, Locations, and similar “bottom” cards) visually match the WordPress.com “card module” appearance while keeping the downloads chart card unchanged.

Changes:

  • Restyles .podcast-stats__section-card (excluding .podcast-stats-chart) to use a 1px border, 5px radius, no shadow, and updated internal padding.
  • Increases section title typography within the affected cards to a larger 20px/500-weight style.
  • Adds a changelog entry documenting the visual alignment update.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File Description
projects/packages/podcast/src/dashboard/stats/style.scss Applies the new card-module styling to non-chart Stats cards while explicitly excluding the downloads chart card.
projects/packages/podcast/changelog/update-podcast-stats-bottom-cards-wpcom-styling Documents the UI styling change for the Podcast Stats cards.

Significance: patch
Type: changed

Podcast: visually align the Top episodes, By app, and Locations Stats cards with the wpcom Stats card module look (real border, larger header, 24px padding).
@jp-launch-control
Copy link
Copy Markdown

jp-launch-control Bot commented May 13, 2026

Code Coverage Summary

This PR did not change code coverage!

That could be good or bad, depending on the situation. Everything covered before, and still is? Great! Nothing was covered before? Not so great. 🤷

Full summary · PHP report · JS report

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@robertbpugh
Copy link
Copy Markdown
Contributor Author

@copilot apply changes based on the comments in this thread

Agent-Logs-Url: https://github.com/Automattic/jetpack/sessions/8bd8ddd0-a863-47f5-8657-d1d07b160ff0

Co-authored-by: robertbpugh <52668747+robertbpugh@users.noreply.github.com>
Copy link
Copy Markdown
Contributor

Copilot AI commented May 13, 2026

@copilot apply changes based on the comments in this thread

Addressed in 7c9a441: updated the changelog entry to use user-facing wording (“WordPress.com”) and aligned it with the existing “Stats tab:” style from the review thread. This is a changelog-only update, so there are no UI changes to screenshot.

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

Labels

[Package] Podcast [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants