@hanzogui/kitchen-sink 3.0.5

package/tests/ListItem.test.tsx

@@ -0,0 +1,129 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+import { getStyles } from './utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'ThemedListItem', type: 'useCase' })
+})
+
+test('ListItem renders correctly with default theme', async ({ page }) => {
+  const listItem = page.locator('#themed-list-item-default')
+  const title = listItem.getByText('Default', { exact: true })
+  const subTitle = listItem.getByText('Default list item', { exact: true })
+
+  await expect(listItem).toBeVisible()
+  await expect(title).toBeVisible()
+  await expect(subTitle).toBeVisible()
+
+  const styles = await getStyles(listItem)
+  expect(styles.backgroundColor).toBe('rgb(242, 242, 242)')
+})
+
+test('ListItem renders correctly with light theme', async ({ page }) => {
+  const listItem = page.locator('#themed-list-item-light')
+  const title = listItem.getByText('<Theme ="light"/>', { exact: true })
+  const subTitle = listItem.getByText('Forcing light theme', { exact: true })
+
+  await expect(listItem).toBeVisible()
+  await expect(title).toBeVisible()
+  await expect(subTitle).toBeVisible()
+
+  const styles = await getStyles(listItem)
+  expect(styles.backgroundColor).toBe('rgb(242, 242, 242)')
+})
+
+test('ListItem renders correctly with dark theme', async ({ page }) => {
+  const listItem = page.locator('#themed-list-item-dark')
+  const title = listItem.getByText('<Theme ="dark"/>', { exact: true })
+  const subTitle = listItem.getByText('Forcing dark theme', { exact: true })
+
+  await expect(listItem).toBeVisible()
+  await expect(title).toBeVisible()
+  await expect(subTitle).toBeVisible()
+
+  const styles = await getStyles(listItem)
+  expect(styles.backgroundColor).toBe('rgb(10, 10, 10)')
+})
+
+test('ListItem with accent theme renders correctly in light theme', async ({ page }) => {
+  const listItem = page.locator('#themed-list-item-light-accent')
+  const title = listItem.getByText('<Theme name="accent">', { exact: true })
+  const subTitle = listItem.getByText('light + accent = light_accent (contrasting)', {
+    exact: true,
+  })
+
+  await expect(listItem).toBeVisible()
+  await expect(title).toBeVisible()
+  await expect(subTitle).toBeVisible()
+
+  // Accent theme inverts colors - light + accent = dark background
+  const styles = await getStyles(listItem)
+  const match = styles.backgroundColor.match(/rgb\((\d+), (\d+), (\d+)\)/)
+  expect(match).toBeTruthy()
+  const [, r, g, b] = match!.map(Number)
+  expect(r).toBeLessThan(50)
+  expect(g).toBeLessThan(50)
+  expect(b).toBeLessThan(50)
+})
+
+test('ListItem with accent theme renders correctly in dark theme', async ({ page }) => {
+  const listItem = page.locator('#themed-list-item-dark-accent')
+  const title = listItem.getByText('<Theme name="accent">', { exact: true })
+  const subTitle = listItem.getByText('dark + accent = dark_accent (contrasting)', {
+    exact: true,
+  })
+
+  await expect(listItem).toBeVisible()
+  await expect(title).toBeVisible()
+  await expect(subTitle).toBeVisible()
+
+  // Accent theme inverts colors - dark + accent = light background
+  const styles = await getStyles(listItem)
+  const match = styles.backgroundColor.match(/rgb\((\d+), (\d+), (\d+)\)/)
+  expect(match).toBeTruthy()
+  const [, r, g, b] = match!.map(Number)
+  expect(r).toBeGreaterThan(200)
+  expect(g).toBeGreaterThan(200)
+  expect(b).toBeGreaterThan(200)
+})
+
+test('ListItem renders correctly with outlined variant', async ({ page }) => {
+  const listItem = page.locator('#themed-list-item-outlined')
+  const title = listItem.getByText('Outlined', { exact: true })
+  const subTitle = listItem.getByText('Using variant prop', { exact: true })
+
+  await expect(listItem).toBeVisible()
+  await expect(title).toBeVisible()
+  await expect(subTitle).toBeVisible()
+
+  const styles = await getStyles(listItem)
+  // Outlined variant has transparent background and border
+  expect(styles.backgroundColor).toBe('rgba(0, 0, 0, 0)')
+  expect(styles.borderWidth).toBe('1px')
+})
+
+test('ListItem.Apply passes color to children icons', async ({ page }) => {
+  const listItem = page.locator('#themed-list-item-apply-color')
+  const title = listItem.getByText('With Apply color', { exact: true })
+
+  await expect(listItem).toBeVisible()
+  await expect(title).toBeVisible()
+
+  // Check that the icon received the color from Apply context
+  const icon = listItem.locator('svg')
+  await expect(icon).toBeVisible()
+})
+
+test('ListItem.Apply passes variant to children', async ({ page }) => {
+  const listItem = page.locator('#themed-list-item-apply-variant')
+  const title = listItem.getByText('With Apply variant', { exact: true })
+
+  await expect(listItem).toBeVisible()
+  await expect(title).toBeVisible()
+
+  const styles = await getStyles(listItem)
+  // Outlined variant applied via Apply context
+  expect(styles.backgroundColor).toBe('rgba(0, 0, 0, 0)')
+  expect(styles.borderWidth).toBe('1px')
+})

package/tests/MediaQueriesV5.test.tsx

@@ -0,0 +1,113 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+import { getStyles } from './utils'
+
+/**
+ * Tests for v5 media queries with mobile-first (minWidth) and desktop-first (maxWidth)
+ *
+ * v5 uses:
+ * - minWidth for base queries ($sm, $md, $lg, etc.) - mobile-first: larger wins
+ * - maxWidth for max-* queries ($max-sm, $max-md, etc.) - desktop-first: smaller wins
+ *
+ * NOTE: These tests are currently skipped because the kitchen-sink webpack build
+ * evaluates the config selection at bundle time (when window.location is undefined),
+ * not at runtime. The v5config query param doesn't work for dynamic config switching.
+ *
+ * The v5 media config itself is correct - see code/core/config/src/v5-media.ts
+ * To properly test, the kitchen-sink would need to be built with v5 config as default,
+ * or use a different mechanism for config switching.
+ */
+
+test.describe.skip('v5 Media Queries', () => {
+  test.describe('Mobile-first (minWidth) - larger breakpoints should win', () => {
+    test.beforeEach(async ({ page }) => {
+      // use v5config query param to enable v5 media config
+      await setupPage(page, {
+        name: 'MediaQueriesV5',
+        type: 'useCase',
+        searchParams: { v5config: 'true' },
+      })
+    })
+
+    test('on large viewport (1280px), $lg should win over $sm and $md', async ({
+      page,
+    }) => {
+      await page.setViewportSize({ width: 1280, height: 800 })
+      const element = page.locator('[data-testid="test-mobile-first"]')
+      const styles = await getStyles(element)
+      // lg (1024) should be active and win over sm (640) and md (768)
+      expect(styles.backgroundColor).toBe('rgb(0, 128, 0)') // green from $lg
+    })
+
+    test('on medium viewport (900px), $md should win over $sm', async ({ page }) => {
+      await page.setViewportSize({ width: 900, height: 800 })
+      const element = page.locator('[data-testid="test-mobile-first"]')
+      const styles = await getStyles(element)
+      // md (768) should be active and win over sm (640)
+      expect(styles.backgroundColor).toBe('rgb(255, 165, 0)') // orange from $md
+    })
+
+    test('on small viewport (700px), $sm should apply', async ({ page }) => {
+      await page.setViewportSize({ width: 700, height: 800 })
+      const element = page.locator('[data-testid="test-mobile-first"]')
+      const styles = await getStyles(element)
+      // only sm (640) should be active
+      expect(styles.backgroundColor).toBe('rgb(255, 255, 0)') // yellow from $sm
+    })
+
+    test('on tiny viewport (500px), base (red) should apply', async ({ page }) => {
+      await page.setViewportSize({ width: 500, height: 800 })
+      const element = page.locator('[data-testid="test-mobile-first"]')
+      const styles = await getStyles(element)
+      // none of the breakpoints should be active
+      expect(styles.backgroundColor).toBe('rgb(255, 0, 0)') // red (base)
+    })
+  })
+
+  test.describe('Desktop-first (maxWidth) - smaller breakpoints should win', () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, {
+        name: 'MediaQueriesV5',
+        type: 'useCase',
+        searchParams: { v5config: 'true' },
+      })
+    })
+
+    test('on tiny viewport (500px), $max-sm should win over $max-md and $max-lg', async ({
+      page,
+    }) => {
+      await page.setViewportSize({ width: 500, height: 800 })
+      const element = page.locator('[data-testid="test-desktop-first"]')
+      const styles = await getStyles(element)
+      // max-sm (640), max-md (768), max-lg (1024) all match, but max-sm should win
+      expect(styles.backgroundColor).toBe('rgb(255, 255, 0)') // yellow from $max-sm
+    })
+
+    test('on medium viewport (700px), $max-md should win over $max-lg', async ({
+      page,
+    }) => {
+      await page.setViewportSize({ width: 700, height: 800 })
+      const element = page.locator('[data-testid="test-desktop-first"]')
+      const styles = await getStyles(element)
+      // max-md (768), max-lg (1024) match, but max-md should win
+      expect(styles.backgroundColor).toBe('rgb(255, 165, 0)') // orange from $max-md
+    })
+
+    test('on large viewport (900px), $max-lg should apply', async ({ page }) => {
+      await page.setViewportSize({ width: 900, height: 800 })
+      const element = page.locator('[data-testid="test-desktop-first"]')
+      const styles = await getStyles(element)
+      // only max-lg (1024) should match
+      expect(styles.backgroundColor).toBe('rgb(0, 128, 0)') // green from $max-lg
+    })
+
+    test('on huge viewport (1200px), base (red) should apply', async ({ page }) => {
+      await page.setViewportSize({ width: 1200, height: 800 })
+      const element = page.locator('[data-testid="test-desktop-first"]')
+      const styles = await getStyles(element)
+      // none of the max-* breakpoints should match
+      expect(styles.backgroundColor).toBe('rgb(255, 0, 0)') // red (base)
+    })
+  })
+})

package/tests/MediaQueryGtMd.test.tsx

@@ -0,0 +1,84 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+import { getStyles } from './utils'
+
+/**
+ * Regression test for media query bug starting in 1.132.17
+ *
+ * Bug: On small screens, $gtMd styles incorrectly apply.
+ * The compiler is generating incorrect output where $gtMd overrides $md
+ * even when the viewport is below the $gtMd breakpoint.
+ *
+ * Adding debug="verbose" fixes it, confirming compiler issue.
+ */
+
+test.describe('Media Query $gtMd regression', () => {
+  test.describe('Small viewport (mobile - below md breakpoint)', () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, { name: 'MediaQueryGtMd', type: 'useCase' })
+      // Set viewport to small size (below md breakpoint of 660px)
+      await page.setViewportSize({ width: 500, height: 800 })
+    })
+
+    test('$md should apply, NOT $gtMd on small screens', async ({ page }) => {
+      // Test 1: Both $md and $gtMd - $md should win on small screen
+      const test1 = page.locator('#media-test-both')
+      const styles1 = await getStyles(test1)
+      expect(styles1.backgroundColor).toBe('rgb(255, 255, 0)') // yellow from $md, NOT green from $gtMd
+    })
+
+    test('$gtMd should NOT apply on small screens', async ({ page }) => {
+      // Test 2: Only $gtMd - should stay red (base) on small screen
+      const test2 = page.locator('#media-test-gtmd-only')
+      const styles2 = await getStyles(test2)
+      expect(styles2.backgroundColor).toBe('rgb(255, 0, 0)') // red (base), $gtMd should NOT apply
+    })
+
+    test('$md should apply on small screens', async ({ page }) => {
+      // Test 3: Only $md - should be yellow on small screen
+      const test3 = page.locator('#media-test-md-only')
+      const styles3 = await getStyles(test3)
+      expect(styles3.backgroundColor).toBe('rgb(255, 255, 0)') // yellow from $md
+    })
+
+    test('$sm should apply on extra small screens', async ({ page }) => {
+      // Set to very small viewport to test $sm
+      await page.setViewportSize({ width: 400, height: 800 })
+
+      // Test 4: $sm, $md, $gtMd together - $sm should win on extra small
+      const test4 = page.locator('#media-test-all')
+      const styles4 = await getStyles(test4)
+      expect(styles4.backgroundColor).toBe('rgb(0, 0, 255)') // blue from $sm
+    })
+  })
+
+  test.describe('Large viewport (desktop - above gtMd breakpoint)', () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, { name: 'MediaQueryGtMd', type: 'useCase' })
+      // Set viewport to large size (above gtMd breakpoint of 1021px)
+      await page.setViewportSize({ width: 1100, height: 800 })
+    })
+
+    test('$gtMd should apply on large screens', async ({ page }) => {
+      // Test 1: Both $md and $gtMd - $gtMd should win on large screen
+      const test1 = page.locator('#media-test-both')
+      const styles1 = await getStyles(test1)
+      expect(styles1.backgroundColor).toBe('rgb(0, 128, 0)') // green from $gtMd
+    })
+
+    test('$gtMd should apply when only $gtMd is set', async ({ page }) => {
+      // Test 2: Only $gtMd - should be green on large screen
+      const test2 = page.locator('#media-test-gtmd-only')
+      const styles2 = await getStyles(test2)
+      expect(styles2.backgroundColor).toBe('rgb(0, 128, 0)') // green from $gtMd
+    })
+
+    test('all three media queries - $gtMd wins on large screen', async ({ page }) => {
+      // Test 4: $sm, $md, $gtMd together - $gtMd should win on large screen
+      const test4 = page.locator('#media-test-all')
+      const styles4 = await getStyles(test4)
+      expect(styles4.backgroundColor).toBe('rgb(0, 128, 0)') // green from $gtMd
+    })
+  })
+})

package/tests/MenuAboveDialog.test.tsx

@@ -0,0 +1,108 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { type: 'useCase', name: 'MenuAboveDialogCase' })
+})
+
+test('menu renders above dialog overlay', async ({ page }) => {
+  await page.waitForLoadState('networkidle')
+
+  // open dialog
+  const dialogTrigger = page.getByTestId('dialog-trigger')
+  await dialogTrigger.click()
+
+  const dialogContent = page.getByTestId('dialog-content')
+  await expect(dialogContent).toBeVisible({ timeout: 5000 })
+  await page.waitForTimeout(300)
+
+  // open menu inside dialog
+  const menuTrigger = page.getByTestId('menu-trigger')
+  await menuTrigger.click()
+
+  const menuContent = page.getByTestId('menu-content')
+  await expect(menuContent).toBeVisible({ timeout: 5000 })
+
+  // verify menu is clickable (proves it's above dialog)
+  const menuItem = page.getByTestId('menu-item-1')
+  await expect(menuItem).toBeVisible()
+
+  // get z-index of portal containers (the fixed positioned wrappers)
+  const dialogPortalZIndex = await page.evaluate(() => {
+    const dialogContent = document.querySelector('[data-testid="dialog-content"]')
+    // find the portal container (fixed position ancestor with z-index)
+    let el = dialogContent?.parentElement
+    while (el) {
+      const style = window.getComputedStyle(el)
+      if (style.position === 'fixed' && style.zIndex !== 'auto') {
+        return parseInt(style.zIndex)
+      }
+      el = el.parentElement
+    }
+    return 0
+  })
+
+  const menuPortalZIndex = await page.evaluate(() => {
+    const menuContent = document.querySelector('[data-testid="menu-content"]')
+    // find the portal container (fixed position ancestor with z-index)
+    let el = menuContent?.parentElement
+    while (el) {
+      const style = window.getComputedStyle(el)
+      if (style.position === 'fixed' && style.zIndex !== 'auto') {
+        return parseInt(style.zIndex)
+      }
+      el = el.parentElement
+    }
+    return 0
+  })
+
+  // menu portal should have higher z-index than dialog portal
+  console.log(
+    `Dialog portal z-index: ${dialogPortalZIndex}, Menu portal z-index: ${menuPortalZIndex}`
+  )
+  expect(menuPortalZIndex).toBeGreaterThan(dialogPortalZIndex)
+})
+
+test('menu closes on ESC, dialog stays open', async ({ page }) => {
+  await page.waitForLoadState('networkidle')
+
+  // open dialog
+  await page.getByTestId('dialog-trigger').click()
+  await expect(page.getByTestId('dialog-content')).toBeVisible({ timeout: 5000 })
+  await page.waitForTimeout(300)
+
+  // open menu
+  await page.getByTestId('menu-trigger').click()
+  await expect(page.getByTestId('menu-content')).toBeVisible({ timeout: 5000 })
+  await page.waitForTimeout(200)
+
+  // press ESC - menu should close, dialog should stay open
+  await page.keyboard.press('Escape')
+  await page.waitForTimeout(400)
+
+  await expect(page.getByTestId('menu-content')).not.toBeVisible({ timeout: 5000 })
+  await expect(page.getByTestId('dialog-content')).toBeVisible()
+})
+
+test('clicking menu item works when menu is above dialog', async ({ page }) => {
+  await page.waitForLoadState('networkidle')
+
+  // open dialog
+  await page.getByTestId('dialog-trigger').click()
+  await expect(page.getByTestId('dialog-content')).toBeVisible({ timeout: 5000 })
+  await page.waitForTimeout(300)
+
+  // open menu
+  await page.getByTestId('menu-trigger').click()
+  await expect(page.getByTestId('menu-content')).toBeVisible({ timeout: 5000 })
+  await page.waitForTimeout(200)
+
+  // click menu item - should work without being blocked by dialog
+  const menuItem = page.getByTestId('menu-item-2')
+  await menuItem.click()
+
+  // menu should close after item click
+  await expect(page.getByTestId('menu-content')).not.toBeVisible({ timeout: 5000 })
+  // dialog should still be open
+  await expect(page.getByTestId('dialog-content')).toBeVisible()
+})