fix: sidebar text visibility in icon mode when expanded

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>

Author: Claude

e2e/sidebar-text-visibility.spec.ts

@@ -0,0 +1,141 @@
+import { test, expect } from '@playwright/test';
+import { waitForReactMount, CONSOLE_BASE } from './helpers';
+
+/**
+ * Sidebar text visibility tests
+ *
+ * These tests validate that the sidebar displays text correctly
+ * when toggled between collapsed (icon mode) and expanded states.
+ */
+
+test.describe('Sidebar Text Visibility', () => {
+  test('should show all text labels when sidebar is expanded in icon mode', async ({ page }) => {
+    await page.goto(`${CONSOLE_BASE}/`);
+    await waitForReactMount(page);
+
+    // Wait for sidebar to be visible
+    const sidebar = page.locator('[data-sidebar="sidebar"]').first();
+    await expect(sidebar).toBeVisible();
+
+    // Find the sidebar toggle button
+    const toggleButton = page.locator('[data-sidebar="trigger"]').first();
+    await expect(toggleButton).toBeVisible();
+
+    // Get the parent sidebar element that has data-state attribute
+    const sidebarGroup = page.locator('.group[data-collapsible="icon"]').first();
+
+    // First, collapse the sidebar if it's expanded
+    let currentState = await sidebarGroup.getAttribute('data-state');
+    if (currentState === 'expanded') {
+      await toggleButton.click();
+      await page.waitForTimeout(300); // Wait for animation
+      currentState = await sidebarGroup.getAttribute('data-state');
+      expect(currentState).toBe('collapsed');
+    }
+
+    // Now expand the sidebar
+    await toggleButton.click();
+    await page.waitForTimeout(300); // Wait for animation
+
+    // Verify sidebar is expanded
+    currentState = await sidebarGroup.getAttribute('data-state');
+    expect(currentState).toBe('expanded');
+
+    // Check that group labels are visible
+    const groupLabels = page.locator('[data-sidebar="group-label"]');
+    const labelCount = await groupLabels.count();
+
+    if (labelCount > 0) {
+      for (let i = 0; i < labelCount; i++) {
+        const label = groupLabels.nth(i);
+
+        // Check opacity
+        const opacity = await label.evaluate((el) => {
+          return window.getComputedStyle(el).opacity;
+        });
+        expect(parseFloat(opacity), `Group label ${i} should be fully visible (opacity: 1)`).toBe(1);
+
+        // Check display
+        const display = await label.evaluate((el) => {
+          return window.getComputedStyle(el).display;
+        });
+        expect(display, `Group label ${i} should not be hidden`).not.toBe('none');
+      }
+    }
+
+    // Check that menu button text is visible
+    const menuButtons = page.locator('[data-sidebar="menu-button"]');
+    const buttonCount = await menuButtons.count();
+
+    if (buttonCount > 0) {
+      for (let i = 0; i < buttonCount; i++) {
+        const button = menuButtons.nth(i);
+
+        // Check that button has proper width (not constrained to icon size)
+        const width = await button.evaluate((el) => {
+          return window.getComputedStyle(el).width;
+        });
+
+        // In expanded mode, button should not be constrained to 2rem (32px)
+        const widthPx = parseFloat(width);
+        expect(widthPx, `Menu button ${i} should be wider than icon size (${widthPx}px)`).toBeGreaterThan(32);
+      }
+    }
+
+    // Take a screenshot for visual verification
+    await page.screenshot({
+      path: '/tmp/sidebar-expanded.png',
+      fullPage: false
+    });
+
+    console.log(`Found ${labelCount} group labels and ${buttonCount} menu buttons`);
+  });
+
+  test('should hide text labels when sidebar is collapsed in icon mode', async ({ page }) => {
+    await page.goto(`${CONSOLE_BASE}/`);
+    await waitForReactMount(page);
+
+    const sidebar = page.locator('[data-sidebar="sidebar"]').first();
+    await expect(sidebar).toBeVisible();
+
+    const toggleButton = page.locator('[data-sidebar="trigger"]').first();
+    await expect(toggleButton).toBeVisible();
+
+    const sidebarGroup = page.locator('.group[data-collapsible="icon"]').first();
+
+    // Expand first if needed
+    let currentState = await sidebarGroup.getAttribute('data-state');
+    if (currentState === 'collapsed') {
+      await toggleButton.click();
+      await page.waitForTimeout(300);
+    }
+
+    // Now collapse
+    await toggleButton.click();
+    await page.waitForTimeout(300);
+
+    currentState = await sidebarGroup.getAttribute('data-state');
+    expect(currentState).toBe('collapsed');
+
+    // Check that group labels are hidden
+    const groupLabels = page.locator('[data-sidebar="group-label"]');
+    const labelCount = await groupLabels.count();
+
+    if (labelCount > 0) {
+      for (let i = 0; i < labelCount; i++) {
+        const label = groupLabels.nth(i);
+
+        const opacity = await label.evaluate((el) => {
+          return window.getComputedStyle(el).opacity;
+        });
+        expect(parseFloat(opacity), `Group label ${i} should be hidden (opacity: 0) when collapsed`).toBe(0);
+      }
+    }
+
+    // Take a screenshot
+    await page.screenshot({
+      path: '/tmp/sidebar-collapsed.png',
+      fullPage: false
+    });
+  });
+});

packages/components/src/index.css

@@ -158,7 +158,8 @@ body {
   color: hsl(var(--foreground));
 }
 
-/* Sidebar group-data variants - explicit rules for Tailwind 4 compatibility */
+/* Sidebar explicit rules for Tailwind 4 compatibility */
+
 /* Icon mode: collapsed state = icon width, expanded state = full width */
 .group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\] {
   width: var(--sidebar-width-icon);
@@ -184,66 +185,58 @@ body {
   width: var(--sidebar-width);
 }
 
-/* Labels and actions visibility - only hide when BOTH icon mode AND collapsed */
+/* Labels visibility - only hide when BOTH icon mode AND collapsed */
 .group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:opacity-0 {
   opacity: 0;
 }
 
+.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:opacity-0 {
+  opacity: 1;
+}
+
 .group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:-mt-8 {
   margin-top: -2rem;
 }
 
+.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:-mt-8 {
+  margin-top: 0;
+}
+
 .group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:hidden {
   display: none;
 }
 
+.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:hidden {
+  display: block;
+}
+
 .group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
   overflow: hidden;
 }
 
-/* Menu button size - only constrain size when collapsed */
-.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:\!size-8 {
-  width: 2rem !important;
-  height: 2rem !important;
+.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
+  overflow: visible;
 }
 
-.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:\!p-2 {
+/* Menu button behavior - collapsed = icon only, expanded = full width */
+.group[data-collapsible="icon"][data-state="collapsed"] .sidebar-menu-button-icon-mode {
+  width: 2rem !important;
+  height: 2rem !important;
   padding: 0.5rem !important;
 }
 
-.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:\!p-0 {
-  padding: 0 !important;
+.group[data-collapsible="icon"][data-state="expanded"] .sidebar-menu-button-icon-mode {
+  width: 100%;
+  height: auto;
+  padding: 0.5rem;
 }
 
-/* When expanded, ensure labels are visible and menu buttons are normal size */
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:opacity-0 {
-  opacity: 1 !important;
-}
-
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:-mt-8 {
-  margin-top: 0 !important;
-}
-
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:hidden {
-  display: block !important;
-}
-
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
-  overflow: visible !important;
-}
-
-/* CRITICAL: Reset size constraint in expanded state - use width: 100% to fill container */
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:\!size-8 {
-  width: 100% !important;
-  height: auto !important;
-}
-
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:\!p-2 {
-  padding: 0.5rem !important;
+.group[data-collapsible="icon"][data-state="collapsed"] .sidebar-menu-button-icon-mode-lg {
+  padding: 0 !important;
 }
 
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:\!p-0 {
-  padding: 0 !important;
+.group[data-collapsible="icon"][data-state="expanded"] .sidebar-menu-button-icon-mode-lg {
+  padding: 0.5rem;
 }
 
 /* Offcanvas mode: always collapsed = 0 width */