WOOA7S-1695: Premium Analytics: centralize the widget-picker preview image-size fix in shared label components#50414
Open
Nikschavan wants to merge 3 commits into
Conversation
…erboardLabel Move the inert-context (widget picker) image sizing into the shared LeaderboardLabel via --jpa-leaderboard-image-* custom properties, add an imageFallback prop to hide missing images, render Referrers row labels through the shared component, and migrate the Authors, Locations, and Visitors-by-location overrides to the new properties.
Render click row labels through the shared LeaderboardLabel component so the picker-grid image-size fix applies, replacing the local ClickLabel markup and styles.
…ponent Relocate the inert-context avatar sizing from the widget's stylesheet into the shared SubscriberList styles and drop the now-empty widget CSS module.
Contributor
|
Thank you for your PR! When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:
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 🤖 Follow this PR Review Process:
If you have questions about anything, reach out in #jetpack-developers for guidance! |
github-actions
Bot
added
the
[Status] Needs Author Reply
Code Coverage SummaryThis 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. 🤷 |
Nikschavan
changed the title
Contributor
There was a problem hiding this comment.
Pull request overview
Centralizes the widget-picker (DataViews) inert-preview image sizing workaround into shared Premium Analytics components so individual widgets no longer need their own [inert] img { … } overrides.
Changes:
- Extend
LeaderboardLabelto handle inert-preview image sizing via CSS custom properties and addimageFallback="hidden"for iconless rows. - Migrate Clicks + Referrers row labels to
LeaderboardLabeland remove duplicated per-widget picker-preview CSS. - Move Subscribers list avatar sizing override into the shared
SubscriberListcomponent styles.
Reviewed changes
Copilot reviewed 15 out of 15 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| projects/packages/premium-analytics/widgets/subscribers-list/style.module.css | Removes widget-local inert picker avatar override (now handled by shared component). |
| projects/packages/premium-analytics/widgets/subscribers-list/render.tsx | Drops now-unneeded widget-local style wrapper. |
| projects/packages/premium-analytics/widgets/referrers/style.module.css | Switches favicon sizing to LeaderboardLabel CSS vars + updates link/label layout for shared label markup. |
| projects/packages/premium-analytics/widgets/referrers/render.tsx | Uses shared LeaderboardLabel for row labels (and hides missing icons). |
| projects/packages/premium-analytics/widgets/locations/style.module.css | Migrates flag sizing override to LeaderboardLabel CSS vars (removes inert rule). |
| projects/packages/premium-analytics/widgets/clicks/style.module.css | Switches favicon sizing to LeaderboardLabel CSS vars + updates link/label layout for shared label markup. |
| projects/packages/premium-analytics/widgets/clicks/render.tsx | Uses shared LeaderboardLabel for row labels (and hides missing icons). |
| projects/packages/premium-analytics/widgets/authors/style.module.css | Migrates avatar sizing override to LeaderboardLabel CSS vars (removes inert rule). |
| projects/packages/premium-analytics/packages/widgets-toolkit/src/widgets/visitors-by-location/visitors-by-location-widget.module.scss | Migrates flag sizing override to LeaderboardLabel CSS vars (removes inert rule). |
| projects/packages/premium-analytics/packages/widgets-toolkit/src/components/subscriber-list/subscriber-list.module.scss | Adds shared inert-preview override to keep avatars at 32px in picker previews. |
| projects/packages/premium-analytics/packages/widgets-toolkit/src/components/chart-leaderboard/leaderboard-label.tsx | Adds imageFallback support and conditional rendering for missing images. |
| projects/packages/premium-analytics/packages/widgets-toolkit/src/components/chart-leaderboard/leaderboard-label.module.scss | Adds CSS-var driven sizing + inert-preview override to counter DataViews stretching. |
| projects/packages/premium-analytics/changelog/refactor-subscribers-list-picker-image-fix | Changelog entry for moving Subscribers list preview fix into shared component. |
| projects/packages/premium-analytics/changelog/refactor-referrers-leaderboard-label | Changelog entry for centralizing leaderboard preview fix via LeaderboardLabel. |
| projects/packages/premium-analytics/changelog/fix-clicks-widget-preview-icon-picker-grid-size | Changelog entry for fixing Clicks preview favicons via shared label. |
Comment on lines
+121
to
+128
| /* Width is the constraint that sizes flags: the boot layout shell forces | ||
| img { height: auto } at higher specificity, so a height here never applies | ||
| in the dashboard. `fill` (not `initial`, a CSS-wide keyword that would | ||
| unset the custom property) keeps the flag's aspect ratio uncropped. */ | ||
| .leaderboardImage { | ||
| height: 20px; | ||
| --jpa-leaderboard-image-width: 28px; | ||
| --jpa-leaderboard-image-height: auto; | ||
| --jpa-leaderboard-image-fit: fill; |
Comment on lines
+47
to
55
| // Width is the constraint that sizes flags: the boot layout shell forces | ||
| // img { height: auto } at higher specificity, so a height here never | ||
| // applies in the dashboard. `fill` (not `initial`, a CSS-wide keyword | ||
| // that would unset the custom property) keeps the flag uncropped. | ||
| .leaderboardImage { | ||
| height: 20px; | ||
| --jpa-leaderboard-image-width: 28px; | ||
| --jpa-leaderboard-image-height: auto; | ||
| --jpa-leaderboard-image-fit: fill; | ||
| border-radius: var(--wpds-border-radius-sm, 2px); |
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
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.
Proposed changes
The widget picker renders live widget previews in an inert context where the preview grid stretches raw
imgelements to fill their container (.dataviews-view-picker-grid__media img { width: 100%; height: 100% }). Every widget that shows images was affected: Clicks favicons rendered enormous (WOOA7S-1695), and Authors, Locations, Visitors by location, and Subscribers list each carried their own near-identical per-widget workaround (e.g. #50393). Instead of patching each widget's stylesheet individually, this centralizes the picker-preview image-size fix in the shared components:LeaderboardLabelnow owns the inert-context image sizing via--jpa-leaderboard-image-*custom properties, and gains animageFallback="hidden"prop for rows without an icon.[inert]rules are removed.SubscriberListstyles.Net result: no per-widget picker fixes remain — the two shared components (
LeaderboardLabel,SubscriberList) own the counter-rule, and any future widget using them is covered automatically. The durable upstream fix is still for@wordpress/widget-dashboard/@wordpress/dataviewsto not apply media-thumbnail styling to widget previews; until then this keeps the workaround in one place per component instead of one per widget.Related product discussion/links
Does this pull request change what data or activity we track or use?
No.
Testing instructions
Before/after screenshots of the Clicks widget preview: to be added.