Update post list stats column to use icons#4136
Merged
Conversation
Contributor
📝 WalkthroughWalkthroughThis PR refactors the Parse.ly post list stats component display by updating time formatting conventions (seconds display changes from "Ns sec." to "Ns"), removing unit label suffixes from metric values (e.g., "page views"), redesigning the stats layout with flexbox styling, and introducing a helper function for consistent stat span rendering with screen reader text. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 PHPStan (2.1.44)Invalid configuration: Warning Review ran into problems🔥 ProblemsTimed out fetching pipeline failures after 30000ms Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
acicovic
added
Changelog: Changed
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (4)
src/content-helper/post-list-stats/post-list-stats.scss (3)
15-27: Consider converting icon dimensions to rem units.Per coding guidelines, dimensions >= 3px should use the
to_remfunction. The4pxgap and16pxicon sizes qualify.♻️ Proposed fix
.parsely-post-page-views, .parsely-post-visitors, .parsely-post-avg-time { display: flex; align-items: center; - gap: 4px; + gap: to_rem(4px); .dashicons { - font-size: 16px; - width: 16px; - height: 16px; + font-size: to_rem(16px); + width: to_rem(16px); + height: to_rem(16px); } }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/content-helper/post-list-stats/post-list-stats.scss` around lines 15 - 27, Replace the pixel values in the post-list-stats styles with rems using the to_rem helper: update the gap: 4px on the .parsely-post-page-views, .parsely-post-visitors, .parsely-post-avg-time rule to use to_rem(4px), and change .dashicons font-size: 16px, width: 16px, height: 16px to to_rem(16px) so all dimensions >=3px follow the coding guideline; keep selectors (.parsely-post-page-views, .parsely-post-visitors, .parsely-post-avg-time and .dashicons) unchanged.
10-13: Consider using a color variable.Per coding guidelines, colors should use variables defined in
src/content-helper/common/css/variables.scssinstead of hardcoding values. Check if there's an existing variable for this gray tone (#959da5), or consider adding one for consistency.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/content-helper/post-list-stats/post-list-stats.scss` around lines 10 - 13, The .parsely-post-stats-placeholder rule is using a hardcoded color `#959da5`; update it to use a Sass color variable from src/content-helper/common/css/variables.scss (or add a new variable there if none exists) and replace the literal with that variable; ensure you import the variables file at the top of post-list-stats.scss if it isn’t already imported and choose a clear variable name (or reuse an existing one) so the rule uses the variable instead of the hex value.
3-6: Consider converting dimensions to rem units.Per coding guidelines, dimensions greater than or equal to 3px should be converted to rem units using the
to_remfunction. The8pxgap value qualifies.♻️ Proposed fix
.parsely-post-stats { cursor: default; display: flex; flex-wrap: wrap; - gap: 2px 8px; + gap: 2px to_rem(8px); min-height: 54px; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/content-helper/post-list-stats/post-list-stats.scss` around lines 3 - 6, The gap declaration in post-list-stats.scss uses a pixel value that violates the guideline; update the gap: 2px 8px rule to convert the 8px dimension to rem via the to_rem helper (i.e., keep the 2px as-is and replace the 8px with a call to to_rem for 8px) so the rule reads gap: 2px <to_rem(8)> using the to_rem function referenced by the codebase and ensure the change is made in the selector where gap is defined in post-list-stats.scss.src/content-helper/post-list-stats/post-list-stats.ts (1)
103-117: Missing@sincetag in JSDoc.Per coding guidelines, every JSDoc comment should include a
@sincetag indicating the next version of the plugin to include this code.📝 Proposed fix
/** * Gets HTML for a single stat metric span with an icon and screen-reader label. * + * `@since` 3.x.x + * * `@param` {string} className CSS class for the outer span. * `@param` {string} dashicon Dashicon class name (without `dashicons` prefix). * `@param` {string} srText Full screen reader text (including the value). * `@param` {string} value The metric value to display visually. */🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/content-helper/post-list-stats/post-list-stats.ts` around lines 103 - 117, The JSDoc for the getStatSpan function is missing a `@since` tag; update the comment block above function getStatSpan to include a `@since` annotation with the next plugin release version (e.g. `@since` 1.0.0 or your next release placeholder), keeping the JSDoc style consistent with other files so the tag appears alongside the existing param descriptions.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/content-helper/post-list-stats/post-list-stats.scss`:
- Around line 15-27: Replace the pixel values in the post-list-stats styles with
rems using the to_rem helper: update the gap: 4px on the
.parsely-post-page-views, .parsely-post-visitors, .parsely-post-avg-time rule to
use to_rem(4px), and change .dashicons font-size: 16px, width: 16px, height:
16px to to_rem(16px) so all dimensions >=3px follow the coding guideline; keep
selectors (.parsely-post-page-views, .parsely-post-visitors,
.parsely-post-avg-time and .dashicons) unchanged.
- Around line 10-13: The .parsely-post-stats-placeholder rule is using a
hardcoded color `#959da5`; update it to use a Sass color variable from
src/content-helper/common/css/variables.scss (or add a new variable there if
none exists) and replace the literal with that variable; ensure you import the
variables file at the top of post-list-stats.scss if it isn’t already imported
and choose a clear variable name (or reuse an existing one) so the rule uses the
variable instead of the hex value.
- Around line 3-6: The gap declaration in post-list-stats.scss uses a pixel
value that violates the guideline; update the gap: 2px 8px rule to convert the
8px dimension to rem via the to_rem helper (i.e., keep the 2px as-is and replace
the 8px with a call to to_rem for 8px) so the rule reads gap: 2px <to_rem(8)>
using the to_rem function referenced by the codebase and ensure the change is
made in the selector where gap is defined in post-list-stats.scss.
In `@src/content-helper/post-list-stats/post-list-stats.ts`:
- Around line 103-117: The JSDoc for the getStatSpan function is missing a
`@since` tag; update the comment block above function getStatSpan to include a
`@since` annotation with the next plugin release version (e.g. `@since` 1.0.0 or
your next release placeholder), keeping the JSDoc style consistent with other
files so the tag appears alongside the existing param descriptions.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: aac0eb24-eee6-4aa1-bf99-02236f64aee2
⛔ Files ignored due to path filters (4)
build/content-helper/post-list-stats-rtl.cssis excluded by!build/**build/content-helper/post-list-stats.asset.phpis excluded by!build/**build/content-helper/post-list-stats.cssis excluded by!build/**build/content-helper/post-list-stats.jsis excluded by!build/**
📒 Files selected for processing (7)
src/Utils/class-utils.phpsrc/content-helper/post-list-stats/class-post-list-stats.phpsrc/content-helper/post-list-stats/post-list-stats.scsssrc/content-helper/post-list-stats/post-list-stats.tstests/Integration/ContentHelper/ContentHelperPostListStatsTest.phptests/Unit/Utils/UtilsTest.phptests/js/content-helper/post-list-stats.test.tsx
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
1 participant
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.
Summary
This PR updates the Parse.ly Stats admin column to display metrics using Dashicons instead of plain text labels, making it more compact. Includes i18n and accessibility improvements and a stylesheet dependency fix.
Before
<br/>separators, no iconswp-i18n), causing a WP warningAfter
sprintf/__()so translators can reorder the value within the phrase; visible values carryaria-hidden="true"to prevent double-readingScreenshots
850px viewport
1200px viewport
1500px viewport
Summary by CodeRabbit
New Features
Style