Skip to content

[Bug Fix] DataTable: shadcn's 24px under the toolbar, and register look differences that render the same - #657

Closed
pierry01 wants to merge 3 commits into
ruby-ui:mainfrom
pierry01:fix/data-table-look-divergences
Closed

pierry01 wants to merge 3 commits into
ruby-ui:mainfrom
pierry01:fix/data-table-look-divergences

Conversation

@pierry01

@pierry01 pierry01 commented Nov 5, 2026 •

Copy link
Copy Markdown
Contributor

Related issue

None opened. Follow-up of the shadcn audit on #579.

Description

The DataTable left 16px between the toolbar and the table; shadcn's dashboard-01 block leaves 24px (the toolbar sits in Tabs gap-6). DataTableToolbar now adds pb-2 on top of the root's space-y-4, so the table, rows, summary and pagination land on the same coordinates as shadcn's at 1280×800.

The other two ❌ the audit reported render the same and are now registered with a match in audit/divergences/data_table.yml:

  • Columns trigger display: inline-flex vs flex: same classes; shadcn's button is a flex item and gets blockified, RubyUI's sits inside the DropdownMenu wrappers. Same box.
  • Row checkbox display: block / text-align: start vs the Base UI <span>'s flex / left: the native input has no children or text to lay out. Same 16×16 box.

The RubyUI audit fixture now renders the badges as shadcn's does (px-1.5 text-muted-foreground), which also removes a 1px per row difference.

light
dark

shadcn audit · main
shadcn audit  ruby-ui/ruby_ui
  base 1fd93db0  head 1fd93db0  shadcn 8a353667
⚠️ Environment  font: "Inter Variable", "system-ui", -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "sans-serif" vs "Inter Variable", sans-serif (light)
⚠️ Environment  font: "Inter Variable", "system-ui", -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "sans-serif" vs "Inter Variable", sans-serif (dark)
✅ Theme  neutral tokens match shadcn
DataTable  (ref: bases/base/blocks/dashboard-01/components/data-table.tsx + style-vega.css @ 8a353667)
  ❌ Look       display: inline-flex
               vega: display: flex
               DataTableColumnToggle — closed/light, open/light, focus/light, after-esc/light, closed/dark, open/dark, focus/dark, after-esc/dark
               ↳ computed styles (shadcn-audit collect)
  ❌ Look       column-gap: normal; display: inline-block; gap: normal; padding-bottom: 4px; padding-right: 32px; padding-top: 4px; row-gap: normal; text-align: start
               vega: column-gap: 6px; display: flex; gap: 6px; padding-bottom: 8px; padding-right: 8px; padding-top: 8px; row-gap: 6px; text-align: center
               DataTablePerPageSelect — closed/light, open/light, focus/light, after-esc/light, closed/dark, open/dark, focus/dark, after-esc/dark
               ↳ computed styles (shadcn-audit collect)
  ❌ Look       display: block; text-align: start
               vega: display: flex; text-align: left
               DataTableRowCheckbox — closed/light, open/light, focus/light, after-esc/light, closed/dark, open/dark, focus/dark, after-esc/dark
               ↳ computed styles (shadcn-audit collect)
  ⏸ Look       properties: font-family, width
               DataTableColumnToggle, DropdownMenuContent, DataTablePerPageSelect, DataTableRowCheckbox — explained by environment diff: font
  ⚠️ ARIA       aria-expanded: (none); aria-haspopup: (none); snapshot: only here: - combobox "Rows per page": |   - option "5" |   - option "10" [selected] |   - option "25" |   - option "50"
               shadcn: aria-expanded: false; aria-haspopup: listbox; snapshot: only here: - combobox "Rows per page": "10"
               DataTablePerPageSelect — closed/light, open/light, focus/light, after-esc/light, closed/dark, open/dark, focus/dark, after-esc/dark
               ↳ accessibility tree (shadcn-audit collect)
  ✅ ARIA       DataTableColumnToggle, DropdownMenuContent, DataTableRowCheckbox: accessibility tree matches
               ↳ accessibility tree (shadcn-audit collect)
  ❌ Look       DataTable root space-y-4: 16px between the toolbar and the table
               vega: Tabs gap-6 around the toolbar: 24px between the toolbar and the table
               Measured at 1280x800: table top at y=72 vs y=80. The DataTable part maps to null, so collect doesn't grade it.
               ↳ bases/base/blocks/dashboard-01/components/data-table.tsx:434
shadcn audit · this PR
shadcn audit  ruby-ui/ruby_ui
  base 1fd93db0  head ceffe44d  shadcn 8a353667
⚠️ Environment  font: "Inter Variable", "system-ui", -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "sans-serif" vs "Inter Variable", sans-serif (light)
⚠️ Environment  font: "Inter Variable", "system-ui", -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "sans-serif" vs "Inter Variable", sans-serif (dark)
✅ Theme  neutral tokens match shadcn
DataTable  (ref: bases/base/blocks/dashboard-01/components/data-table.tsx + style-vega.css @ 8a353667)
  ✅ Look       display: inline-flex — intentional
               DataTableColumnToggle — Same classes on both sides; only the parent differs. RubyUI's DropdownMenu needs its wrapper elements for the Stimulus controller and the popover. The trigger's box is identical (1142.9, 24, 113.1x32 at 1280x800).
               ↳ audit/divergences/data_table.yml
  ❌ Look       column-gap: normal; display: inline-block; gap: normal; padding-bottom: 4px; padding-right: 32px; padding-top: 4px; row-gap: normal; text-align: start
               vega: column-gap: 6px; display: flex; gap: 6px; padding-bottom: 8px; padding-right: 8px; padding-top: 8px; row-gap: 6px; text-align: center
               DataTablePerPageSelect — closed/light, open/light, focus/light, after-esc/light, closed/dark, open/dark, focus/dark, after-esc/dark
               ↳ computed styles (shadcn-audit collect)
  ✅ Look       display: block — intentional
               DataTableRowCheckbox — The native input draws its check itself and has no children to lay out, so display flex would change nothing; same 16x16 box and x position on both sides.
               ↳ audit/divergences/data_table.yml
  ✅ Look       text-align: start — intentional
               DataTableRowCheckbox — start and left are the same in LTR, and a checkbox input has no text to align.
               ↳ audit/divergences/data_table.yml
  ⏸ Look       properties: font-family, width
               DataTableColumnToggle, DropdownMenuContent, DataTablePerPageSelect, DataTableRowCheckbox — explained by environment diff: font
  ⚠️ ARIA       aria-expanded: (none); aria-haspopup: (none); snapshot: only here: - combobox "Rows per page": |   - option "5" |   - option "10" [selected] |   - option "25" |   - option "50"
               shadcn: aria-expanded: false; aria-haspopup: listbox; snapshot: only here: - combobox "Rows per page": "10"
               DataTablePerPageSelect — closed/light, open/light, focus/light, after-esc/light, closed/dark, open/dark, focus/dark, after-esc/dark
               ↳ accessibility tree (shadcn-audit collect)
  ✅ ARIA       DataTableColumnToggle, DropdownMenuContent, DataTableRowCheckbox: accessibility tree matches
               ↳ accessibility tree (shadcn-audit collect)
  ✅ Look       DataTableToolbar pb-2 on top of space-y-4: 24px between the toolbar and the table
               Measured at 1280x800: table box, rows, summary and pagination at the same coordinates on both sides (table top y=80, summary y=257.5).
               ↳ bases/base/blocks/dashboard-01/components/data-table.tsx:434

The per-page select ❌ in both lists is fixed by #579.

Testing instructions

  • cd gem && bundle exec rake → 776 runs, 0 failures, StandardRB clean.
  • /docs/data_table: the table starts 24px below the toolbar.
  • cd audit && bundle exec exe/shadcn-audit collect data_table … → the Columns trigger and row checkbox lines come out ✅ intentional.

🤖 Generated with Claude Code


Summary by cubic

Fixes the DataTable toolbar gap so the table lands 24px below the toolbar, matching shadcn's dashboard-01 block at 1280×800, and registers three look differences that render identically as intentional divergences in the audit.

  • DataTableToolbar gains pb-2 on top of DataTable's space-y-4; the gap was previously 16px.
  • Records the Columns trigger's inline-flex and the row checkbox's block/start as intentional matches in audit/divergences/data_table.yml; the resulting boxes are identical on both sides.
  • The audit fixture now renders badges with px-1.5 text-muted-foreground, matching shadcn's classes and removing a 1px-per-row difference.

Written for commit ceffe44. Summary will update on new commits.

View guided diff

@pierry01
pierry01 requested a review from cirdes as a code owner November 5, 2026 16:57
@pierry01
pierry01 removed the request for review from cirdes November 5, 2026 16:58

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

No issues found across 5 files

View guided diff | Re-trigger cubic

@pierry01 pierry01 self-assigned this Nov 5, 2026
@cirdes

cirdes commented Nov 6, 2026

Copy link
Copy Markdown
Collaborator

Thanks @pierry01! This landed on main through #579, which carried #659 on top of it: the same badge and toolbar-spacing fixes, the same checkbox divergences, plus the status icons from the block. The Columns trigger is fixed instead of registered (the toggle's wrappers are display: contents, so the button is a flex item like shadcn's). Your diagnosis matched what we found, so closing this one as superseded.

@cirdes cirdes closed this Nov 6, 2026
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