[WIP] Update shadcn controls to latest version#1205
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- Updated 47 shadcn UI components from registry - Replaced incorrect radix-ui package with individual @radix-ui/* packages - Fixed import paths from @/registry/* to relative paths - Added use-mobile hook for sidebar component - Fixed icon-sm button size references to use icon variant - Fixed Slot component imports in custom components - Updated dependencies in package.json and pnpm-lock.yaml - Build successful Agent-Logs-Url: https://github.com/objectstack-ai/objectui/sessions/05fb973c-72d7-4b10-a572-8e218fe226eb Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Contributor
❌ Console Performance Budget
📦 Bundle Size Report
Size Limits
|
- Add hideOverlay prop support to SheetContent component - Fix ViewSwitcher icon-sm button size to use standard 'icon' size - Fix resizable component to use correct react-resizable-panels v4 exports (Group, Panel, Separator) - All packages now build successfully (42/42 tasks) - Fixed console app build error Agent-Logs-Url: https://github.com/objectstack-ai/objectui/sessions/204857cb-fe22-45ba-98b0-a7fa71dc7db9 Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
- Update Dialog snapshot to match new shadcn styling - Fix Slider WCAG accessibility by forwarding aria-label to Thumb element - All 1908 component tests now passing Agent-Logs-Url: https://github.com/objectstack-ai/objectui/sessions/204857cb-fe22-45ba-98b0-a7fa71dc7db9 Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Contributor
❌ Console Performance Budget
📦 Bundle Size Report
Size Limits
|
Contributor
❌ Console Performance Budget
📦 Bundle Size Report
Size Limits
|
- Add sidebar color CSS custom properties to @theme section - Add sidebar base colors to :root for light mode - Add sidebar colors to .dark for dark mode - Fixes sidebar menu rendering issues after shadcn upgrade Agent-Logs-Url: https://github.com/objectstack-ai/objectui/sessions/d18adb23-dd47-4f83-9bfb-7c147e93f672 Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Contributor
❌ Console Performance Budget
📦 Bundle Size Report
Size Limits
|
…icon mode Agent-Logs-Url: https://github.com/objectstack-ai/objectui/sessions/b8b21739-18da-4974-80cd-ea520cd5c250 Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Contributor
❌ Console Performance Budget
📦 Bundle Size Report
Size Limits
|
Collaborator
|
@claude[agent] 左侧菜单展开后，应该显示的 label 都不见了。 |
Agent-Logs-Url: https://github.com/objectstack-ai/objectui/sessions/8cec2e3b-5b00-4d90-9a9d-8b1e90a5ca45 Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Contributor
Author
已修复！问题是 CSS 规则将 已通过 Playwright 测试验证：
Fixed in commit ab29743
|
Contributor
❌ Console Performance Budget
📦 Bundle Size Report
Size Limits
|
Collaborator
|
@claude[agent] 左侧菜单展开后还是不对，很多应该显示文字的地方文字看不到。请使用 playwright 仔细测试并解决所有的问题。 |
Agent-Logs-Url: https://github.com/objectstack-ai/objectui/sessions/cff42d5a-b0cf-4ca5-9c41-1aba38af1dc6 Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Copilot stopped work on behalf of
hotlong due to an error
April 13, 2026 07:28
Contributor
❌ Console Performance Budget
📦 Bundle Size Report
Size Limits
|
Contributor
The sidebar was not showing text labels and menu text properly when expanded in icon mode. This was caused by unconditional `group-data-[collapsible=icon]` classes that didn't check the `data-state` attribute. Changes: 1. Replaced complex Tailwind group-data classes in sidebarMenuButtonVariants with simpler semantic class names (`sidebar-menu-button-icon-mode`, `sidebar-menu-button-icon-mode-lg`) 2. Added comprehensive CSS rules that check BOTH data-collapsible AND data-state attributes 3. When expanded (data-state="expanded"): - Labels have opacity: 1 (fully visible) - Menu buttons use full width (100%) instead of being constrained to 2rem - All text content is properly displayed 4. When collapsed (data-state="collapsed"): - Labels have opacity: 0 (hidden) - Menu buttons constrained to 2rem x 2rem (icon only) - Text content hidden This fix ensures that all text (group labels, menu button labels, sub-menu items) is visible when the sidebar is expanded, resolving the issue where text was not showing after expansion. Agent-Logs-Url: https://github.com/objectstack-ai/objectui/sessions/90957339-73b0-4709-b11e-3b9cc8f855d7 Co-authored-by: xuyushun441-sys <255036401+xuyushun441-sys@users.noreply.github.com>
Contributor
Author
|
已修复侧边栏文本显示问题！ 问题根源： 解决方案：
现在侧边栏展开后，所有文本（分组标签、菜单项文字、子菜单等）都能正确显示了。 Fixed in commit 85a512a |
Contributor
❌ Console Performance Budget
📦 Bundle Size Report
Size Limits
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the repo’s shadcn/Radix UI layer to newer upstream versions, including migrating from the radix-ui aggregator package to individual @radix-ui/react-* packages, and adjusts sidebar styling to work with Tailwind 4’s limitations around group-data-* rule generation.
Changes:
- Replace
radix-uiimports with direct@radix-ui/react-*imports across shadcn UI components and update dependencies/lockfile accordingly. - Update button sizing usage (removing
icon-sm/icon-lgvariants) and adjust call sites to usesize="icon". - Add explicit CSS rules + a Playwright e2e spec to validate sidebar text visibility when toggling collapsed/expanded in icon mode.
Reviewed changes
Copilot reviewed 53 out of 54 changed files in this pull request and generated 16 comments.
Show a summary per file
| File | Description |
|---|---|
| test-tailwind-rule.mjs | Adds a Playwright debug script to inspect generated Tailwind rules. |
| test-size-class.mjs | Adds a Playwright debug script to inspect computed sizing styles. |
| test-find-rules.mjs | Adds a Playwright debug script to search for conflicting CSS rules. |
| test-debug-css.mjs | Adds a Playwright debug script to dump sidebar selector/rule matching. |
| test-comprehensive.mjs | Adds a comprehensive Playwright debug script for sidebar visibility/state. |
| test-all-rules.mjs | Adds a Playwright debug script to list rules matching a target class. |
| pnpm-lock.yaml | Updates lockfile for new Radix package set and removal of radix-ui. |
| packages/plugin-view/src/ViewSwitcher.tsx | Updates icon button sizing usage to match the new Button API. |
| packages/components/src/ui/tooltip.tsx | Switches Tooltip primitives import to @radix-ui/react-tooltip. |
| packages/components/src/ui/toggle.tsx | Switches Toggle primitives import to @radix-ui/react-toggle. |
| packages/components/src/ui/toggle-group.tsx | Switches ToggleGroup primitives import to @radix-ui/react-toggle-group. |
| packages/components/src/ui/toast.tsx | Switches Toast primitives import to @radix-ui/react-toast. |
| packages/components/src/ui/tabs.tsx | Switches Tabs primitives import to @radix-ui/react-tabs. |
| packages/components/src/ui/switch.tsx | Switches Switch primitives import to @radix-ui/react-switch. |
| packages/components/src/ui/slider.tsx | Switches Slider primitives import to @radix-ui/react-slider and changes aria handling. |
| packages/components/src/ui/sidebar.tsx | Updates sidebar internals (Slot import, sizing classes, icon-mode handling, rail behavior). |
| packages/components/src/ui/sheet.tsx | Switches Sheet (Dialog) primitives import to @radix-ui/react-dialog. |
| packages/components/src/ui/separator.tsx | Switches Separator primitives import to @radix-ui/react-separator. |
| packages/components/src/ui/select.tsx | Switches Select primitives import to @radix-ui/react-select. |
| packages/components/src/ui/scroll-area.tsx | Switches ScrollArea primitives import to @radix-ui/react-scroll-area. |
| packages/components/src/ui/resizable.tsx | Updates react-resizable-panels imports to named exports. |
| packages/components/src/ui/radio-group.tsx | Switches RadioGroup primitives import to @radix-ui/react-radio-group. |
| packages/components/src/ui/progress.tsx | Switches Progress primitives import to @radix-ui/react-progress. |
| packages/components/src/ui/popover.tsx | Switches Popover primitives import to @radix-ui/react-popover. |
| packages/components/src/ui/navigation-menu.tsx | Switches NavigationMenu primitives import to @radix-ui/react-navigation-menu. |
| packages/components/src/ui/menubar.tsx | Switches Menubar primitives import to @radix-ui/react-menubar. |
| packages/components/src/ui/label.tsx | Switches Label primitives import to @radix-ui/react-label. |
| packages/components/src/ui/hover-card.tsx | Switches HoverCard primitives import to @radix-ui/react-hover-card. |
| packages/components/src/ui/form.tsx | Switches Slot/Label imports to direct Radix packages. |
| packages/components/src/ui/dropdown-menu.tsx | Switches DropdownMenu primitives import to @radix-ui/react-dropdown-menu. |
| packages/components/src/ui/drawer.tsx | Tightens Drawer types to Radix element refs/component props. |
| packages/components/src/ui/dialog.tsx | Switches Dialog primitives import to @radix-ui/react-dialog and updates layout/close button. |
| packages/components/src/ui/context-menu.tsx | Switches ContextMenu primitives import to @radix-ui/react-context-menu. |
| packages/components/src/ui/command.tsx | Updates Dialog prop typing to DialogProps from @radix-ui/react-dialog. |
| packages/components/src/ui/collapsible.tsx | Switches Collapsible primitives import to @radix-ui/react-collapsible. |
| packages/components/src/ui/checkbox.tsx | Switches Checkbox primitives import to @radix-ui/react-checkbox. |
| packages/components/src/ui/chart.tsx | Adds file header and "use client" directive. |
| packages/components/src/ui/button.tsx | Switches Slot import to @radix-ui/react-slot and removes icon-sm/icon-lg sizes. |
| packages/components/src/ui/breadcrumb.tsx | Switches Slot import to @radix-ui/react-slot. |
| packages/components/src/ui/avatar.tsx | Switches Avatar primitives import to @radix-ui/react-avatar. |
| packages/components/src/ui/aspect-ratio.tsx | Switches AspectRatio primitives import to @radix-ui/react-aspect-ratio. |
| packages/components/src/ui/alert-dialog.tsx | Switches AlertDialog primitives import to @radix-ui/react-alert-dialog. |
| packages/components/src/ui/accordion.tsx | Switches Accordion primitives import to @radix-ui/react-accordion. |
| packages/components/src/renderers/complex/data-table.tsx | Updates icon button sizing usage (icon-sm → icon) across table actions/pagination. |
| packages/components/src/index.css | Adds sidebar theme tokens and explicit Tailwind-4 compatibility CSS for sidebar. |
| packages/components/src/custom/sort-builder.tsx | Updates icon button sizing usage (icon-sm → icon). |
| packages/components/src/custom/mobile-dialog-content.tsx | Switches Dialog primitives import to @radix-ui/react-dialog. |
| packages/components/src/custom/item.tsx | Switches Slot import to @radix-ui/react-slot and updates usage. |
| packages/components/src/custom/filter-builder.tsx | Updates icon button sizing usage (icon-sm → icon). |
| packages/components/src/custom/field.tsx | Switches Slot import to @radix-ui/react-slot and updates usage. |
| packages/components/src/custom/button-group.tsx | Switches Slot import to @radix-ui/react-slot and updates usage. |
| packages/components/src/tests/snapshots/snapshot-critical.test.tsx.snap | Updates snapshots for dialog structural/class changes. |
| packages/components/package.json | Adds explicit @radix-ui/react-* dependencies and removes radix-ui. |
| e2e/sidebar-text-visibility.spec.ts | Adds Playwright coverage for sidebar text visibility in icon mode. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
Comments suppressed due to low confidence (2)
packages/plugin-view/src/ViewSwitcher.tsx:285
- These action buttons moved from
size="icon-sm"(32×32) tosize="icon"(40×40). In a tab/header control this can noticeably change spacing and alignment. If you want to preserve the previous sizing, add explicitclassNameheight/width overrides (e.g. 8×8) or introduce a smaller icon size variant.
packages/components/src/renderers/complex/data-table.tsx:1004 - Row action buttons changed from
icon-smtoicon(40×40). In a dense table this can increase row height/padding and reduce information density. If the intent is to keep the compact buttons, add per-button size overrides (e.g.classNamefor 32×32) or reintroduce a compact icon size variant.
<>
<Button
variant="ghost"
size="icon"
onClick={() => cancelRowChanges(rowIndex)}
disabled={isSaving}
title="Cancel changes"
>
<X className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => saveRow(rowIndex)}
disabled={isSaving}
title="Save row"
>
<Save className="h-4 w-4 text-green-600" />
</Button>
Comment on lines
194
to
200
| if (collapsible === "none") { | ||
| return ( | ||
| <div | ||
| className={cn( | ||
| "flex h-full w-[var(--sidebar-width)] flex-col bg-sidebar text-sidebar-foreground", | ||
| "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground", | ||
| className | ||
| )} |
Comment on lines
212
to
216
| <SheetContent | ||
| data-sidebar="sidebar" | ||
| data-mobile="true" | ||
| className="w-[var(--sidebar-width)] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden" | ||
| className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden" | ||
| style={ |
Comment on lines
243
to
251
| <div | ||
| className={cn( | ||
| "relative w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear", | ||
| "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear", | ||
| "group-data-[collapsible=offcanvas]:w-0", | ||
| "group-data-[side=right]:rotate-180", | ||
| variant === "floating" || variant === "inset" | ||
| ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]" | ||
| : "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]" | ||
| : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]" | ||
| )} |
Comment on lines
253
to
+262
| <div | ||
| className={cn( | ||
| "fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear md:flex", | ||
| "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex", | ||
| side === "left" | ||
| ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" | ||
| : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", | ||
| // Adjust the padding for floating and inset variants. | ||
| variant === "floating" || variant === "inset" | ||
| ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]" | ||
| : "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l", | ||
| : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l", |
Comment on lines
+209
to
+212
| .group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:hidden { | ||
| display: block; | ||
| } | ||
|
|
Comment on lines
+1
to
+12
| import { chromium } from 'playwright'; | ||
|
|
||
| async function findSizeClass() { | ||
| const browser = await chromium.launch({ headless: true }); | ||
| const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } }); | ||
|
|
||
| try { | ||
| await page.goto('http://localhost:5174/console/', { waitUntil: 'networkidle', timeout: 30000 }); | ||
| await page.waitForTimeout(3000); | ||
|
|
||
| const analysis = await page.evaluate(() => { | ||
| const button = document.querySelector('[data-sidebar="menu-button"]'); |
Comment on lines
+1
to
+15
| import { chromium } from 'playwright'; | ||
|
|
||
| async function findConflictingRules() { | ||
| const browser = await chromium.launch({ headless: true }); | ||
| const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } }); | ||
|
|
||
| try { | ||
| await page.goto('http://localhost:5174/console/', { waitUntil: 'networkidle', timeout: 30000 }); | ||
| await page.waitForTimeout(3000); | ||
|
|
||
| const rules = await page.evaluate(() => { | ||
| const button = document.querySelector('[data-sidebar="menu-button"]'); | ||
| if (!button) return { error: 'Button not found' }; | ||
|
|
||
| // Get ALL CSS rules that might affect the button's width |
Comment on lines
+1
to
+15
| import { chromium } from 'playwright'; | ||
|
|
||
| async function debugCSSSelectors() { | ||
| const browser = await chromium.launch({ headless: true }); | ||
| const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } }); | ||
|
|
||
| try { | ||
| await page.goto('http://localhost:5174/console/', { waitUntil: 'networkidle', timeout: 30000 }); | ||
| await page.waitForTimeout(3000); | ||
|
|
||
| const debug = await page.evaluate(() => { | ||
| const button = document.querySelector('[data-sidebar="menu-button"]'); | ||
| if (!button) return { error: 'Button not found' }; | ||
|
|
||
| const classes = button.className; |
Comment on lines
+1
to
+20
| import { chromium } from 'playwright'; | ||
| import { mkdirSync } from 'fs'; | ||
|
|
||
| try { | ||
| mkdirSync('/tmp/playwright-logs', { recursive: true }); | ||
| } catch (e) {} | ||
|
|
||
| async function comprehensiveTextVisibilityTest() { | ||
| console.log('Starting comprehensive sidebar text visibility test...'); | ||
| const browser = await chromium.launch({ headless: true }); | ||
| const page = await browser.newPage({ | ||
| viewport: { width: 1920, height: 1080 } | ||
| }); | ||
|
|
||
| try { | ||
| await page.goto('http://localhost:5173/console/', { waitUntil: 'networkidle', timeout: 30000 }); | ||
| await page.waitForTimeout(3000); | ||
|
|
||
| console.log('\n=== EXPANDED STATE (DEFAULT) ==='); | ||
| await page.screenshot({ path: '/tmp/playwright-logs/comprehensive-expanded.png', fullPage: true }); |
Comment on lines
+1
to
+12
| import { chromium } from 'playwright'; | ||
|
|
||
| async function checkAllRulesForButton() { | ||
| const browser = await chromium.launch({ headless: true }); | ||
| const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } }); | ||
|
|
||
| try { | ||
| await page.goto('http://localhost:5174/console/', { waitUntil: 'networkidle', timeout: 30000 }); | ||
| await page.waitForTimeout(3000); | ||
|
|
||
| const analysis = await page.evaluate(() => { | ||
| const button = document.querySelector('[data-sidebar="menu-button"]'); |
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.
Cloud agent has begun work on /shadcn 控件升级到最新版 and will update this pull request as work progresses.
Original prompt
Created from VS Code.