Skip to content

Use theme-aware background in DataViews#74

Merged
kzamanbd merged 3 commits intomainfrom
fix/dataviews-theme-aware-background
Mar 31, 2026
Merged

Use theme-aware background in DataViews#74
kzamanbd merged 3 commits intomainfrom
fix/dataviews-theme-aware-background

Conversation

@juah255
Copy link
Copy Markdown
Contributor

@juah255 juah255 commented Mar 30, 2026

Summary

  • Replace hardcoded bg-white with bg-background in SkeletonTable rows and header cells
  • Add background-color: var(--background) to the DataViews header CSS so it respects the active theme

Test plan

  • Verify DataViews table and skeleton loader use the correct background in light and dark themes
  • Confirm no visual regression in default (light) theme

🤖 Generated with Claude Code

Summary by CodeRabbit

  • New Features
    • Skeleton loading now supports distinct table, grid and list views for clearer loading states.
  • Style
    • Unified backgrounds for table, header, pagination and no-results to the themed app background.
    • Demo layouts migrated to utility-based styling and adjusted spacing.
    • Header and toolbar alignment/responsive behavior refined for better small-screen layout.
  • Chore
    • Demo sample data now uses realistic first/last name generation.

Replace hardcoded bg-white with bg-background CSS variable so
DataViews table and skeleton loader respect the active theme.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 30, 2026

Caution

Review failed

Pull request was closed or merged during review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: a5ca0f9e-6bdf-4fb2-9ef1-a9aec0ddcabe

📥 Commits

Reviewing files that changed from the base of the PR and between 0e4186b and 29ae7eb.

📒 Files selected for processing (3)
  • src/components/wordpress/DataViews.stories.tsx
  • src/components/wordpress/dataviews.tsx
  • src/components/wordpress/style.css
✅ Files skipped from review due to trivial changes (1)
  • src/components/wordpress/style.css
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/components/wordpress/DataViews.stories.tsx

📝 Walkthrough

Walkthrough

Filter toolbar and header alignment classes were adjusted; SkeletonTable gained an optional viewType prop and now renders distinct skeletons for grid, list, and table; styles for dataviews backgrounds and table cell vertical alignment were centralized; Storybook examples switched inline styles to Tailwind and adjusted sample data generation.

Changes

Cohort / File(s) Summary
DataViews component
src/components/wordpress/dataviews.tsx
Toolbar wrapper class changed to conditionally use sm:flex (responsive behavior); main header wrapper dropped items-center; SkeletonTable API: added optional viewType prop (default 'table') and renders separate skeleton UIs for 'grid', 'list', and 'table'; DataViews passes viewType={view.type} during loading.
Styling
src/components/wordpress/style.css
Added background-color: var(--background, #FFFFFF) rules for .pui-root-dataviews and descendants; removed duplicate background from .pui-root-dataviews:not(.custom-layout); added background to .dataviews-no-results and .dataviews-pagination; set vertical-align: middle on .dataviews-wrapper .dataviews-view-table tbody td.
Storybook / examples
src/components/wordpress/DataViews.stories.tsx
Sample user generation updated to use firstNames/lastNames for name and email; PosterGrid and related layout markup refactored from inline style to Tailwind className utilities; removed defaultLayouts={{ table: {} }} and replaced style={{ padding: "2px" }} with p-0.5.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20–30 minutes

Possibly related PRs

Poem

🐰 I hopped through classes, neat and spry,

Switched bones of skeletons to suit each eye.
Grid, list, and table—placeholders now sing,
Tailwind stitched cards with a fluttering wing.
A tiny rabbit nods: the UI's spring.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'Use theme-aware background in DataViews' directly aligns with the core objective of making DataViews respect active themes by replacing hardcoded background colors with theme-aware variables, as confirmed by all three modified files.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/dataviews-theme-aware-background

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/components/wordpress/dataviews.tsx (1)

389-412: ⚠️ Potential issue | 🟠 Major

Fix TypeScript configuration to resolve typecheck failure.

The typecheck command fails due to a deprecated baseUrl option in tsconfig.json. TypeScript will remove support for baseUrl in version 7.0. Add "ignoreDeprecations": "6.0" to the compilerOptions in tsconfig.json to resolve the TS5101 error and allow npm run typecheck to pass, which is required before pushing changes to the main branch.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/wordpress/dataviews.tsx` around lines 389 - 412, The TS
typecheck fails due to a deprecated "baseUrl" in tsconfig.json (TS5101); open
tsconfig.json and add "ignoreDeprecations": "6.0" to the "compilerOptions"
object to suppress the deprecation error (preserving the existing "baseUrl"),
then run npm run typecheck to confirm the error is resolved; reference the
tsconfig.json "compilerOptions" entry when making this change.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@src/components/wordpress/dataviews.tsx`:
- Around line 389-412: The TS typecheck fails due to a deprecated "baseUrl" in
tsconfig.json (TS5101); open tsconfig.json and add "ignoreDeprecations": "6.0"
to the "compilerOptions" object to suppress the deprecation error (preserving
the existing "baseUrl"), then run npm run typecheck to confirm the error is
resolved; reference the tsconfig.json "compilerOptions" entry when making this
change.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 388ec29d-e3c6-4e4c-ade4-6b3793b9602e

📥 Commits

Reviewing files that changed from the base of the PR and between 7806051 and 05a341a.

📒 Files selected for processing (2)
  • src/components/wordpress/dataviews.tsx
  • src/components/wordpress/style.css

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/components/wordpress/DataViews.stories.tsx (1)

1019-1033: ⚠️ Potential issue | 🟡 Minor

Restore explicit defaultLayouts for this custom-layout story.

With defaultLayouts removed, DataViews falls back to internal defaults (table, list, grid) in src/components/wordpress/dataviews.tsx (Line 517-Line 521, Line 541). That changes this story’s behavior and can expose layout states that don’t match the always-custom PosterGrid render.

Suggested fix
       <DataViews<User>
         getItemId={(item) => item.id}
         namespace="dataviews-demo"
         paginationInfo={{
           totalItems: filteredUsers.length,
           totalPages: getTotalPages(filteredUsers.length, view.perPage),
         }}
         data={paginatedData}
         view={view}
         fields={fields}
         onChangeView={setView}
+        defaultLayouts={{ table: {} }}
       >
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/wordpress/DataViews.stories.tsx` around lines 1019 - 1033, The
story removes the explicit defaultLayouts prop causing DataViews to fall back to
internal defaults (table/list/grid) and expose layouts incompatible with the
custom PosterGrid; restore an explicit defaultLayouts prop on the DataViews
invocation (the <DataViews<User> ...> story) to a layout array that only
includes the custom layout(s) used by PosterGrid (e.g., ['grid'] or the custom
layout id), so DataViews will initialize to and constrain to the expected custom
layout instead of internal defaults; update the DataViews JSX to pass
defaultLayouts={[/* your custom layout id(s) like 'grid' */]} alongside existing
props.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@src/components/wordpress/DataViews.stories.tsx`:
- Around line 1019-1033: The story removes the explicit defaultLayouts prop
causing DataViews to fall back to internal defaults (table/list/grid) and expose
layouts incompatible with the custom PosterGrid; restore an explicit
defaultLayouts prop on the DataViews invocation (the <DataViews<User> ...>
story) to a layout array that only includes the custom layout(s) used by
PosterGrid (e.g., ['grid'] or the custom layout id), so DataViews will
initialize to and constrain to the expected custom layout instead of internal
defaults; update the DataViews JSX to pass defaultLayouts={[/* your custom
layout id(s) like 'grid' */]} alongside existing props.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 6eed79cb-6007-420a-ad4e-2f6fcefed156

📥 Commits

Reviewing files that changed from the base of the PR and between 05a341a and 0e4186b.

📒 Files selected for processing (2)
  • src/components/wordpress/DataViews.stories.tsx
  • src/components/wordpress/style.css
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/components/wordpress/style.css

…tonTable rendering for grid and list views, and add vertical alignment to table cells
@kzamanbd kzamanbd merged commit 037a6b2 into main Mar 31, 2026
1 check passed
@kzamanbd kzamanbd deleted the fix/dataviews-theme-aware-background branch March 31, 2026 05:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants