@hanzogui/kitchen-sink 3.0.5

package/tests/FormButtonType.test.tsx

@@ -0,0 +1,42 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { type: 'useCase', name: 'FormButtonTypeCase' })
+})
+
+test('Button renders with type="button" by default', async ({ page }) => {
+  const button = page.getByTestId('regular-button')
+  await expect(button).toBeVisible()
+
+  const type = await button.getAttribute('type')
+  expect(type).toBe('button')
+})
+
+test('Form.Trigger submits the form when clicked', async ({ page }) => {
+  const submitButton = page.getByTestId('submit-button')
+  const submitStatus = page.getByTestId('submit-status')
+
+  await expect(submitButton).toBeVisible()
+  await expect(submitStatus).toHaveText('not-submitted')
+
+  await submitButton.click()
+
+  await expect(submitStatus).toHaveText('submitted')
+})
+
+test('pressing Enter in input submits form, not regular button click', async ({
+  page,
+}) => {
+  const input = page.getByTestId('form-input')
+  const submitStatus = page.getByTestId('submit-status')
+  const buttonStatus = page.getByTestId('button-status')
+
+  await input.focus()
+  await input.press('Enter')
+
+  // form should be submitted
+  await expect(submitStatus).toHaveText('submitted')
+  // regular button should NOT have been clicked
+  await expect(buttonStatus).toHaveText('button-not-clicked')
+})

package/tests/GlobalScopedTriggerIsolation.test.tsx

@@ -0,0 +1,89 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+function parseRenderCount(text: string | null): number {
+  const match = text?.match(/(\d+)/)
+  if (!match) {
+    throw new Error(`Unable to parse render count from: ${text}`)
+  }
+  return Number(match[1])
+}
+
+async function getRenderCount(page: Parameters<typeof setupPage>[0], testId: string) {
+  const text = await page.getByTestId(testId).textContent()
+  return parseRenderCount(text)
+}
+
+test.describe('Global Scoped Trigger Isolation', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, {
+      name: 'GlobalScopedTriggerIsolationCase',
+      type: 'useCase',
+      waitExtra: true,
+    })
+  })
+
+  test('memoized shared popover and menu triggers keep unrelated render counts stable', async ({
+    page,
+  }) => {
+    const popInitial = {
+      one: await getRenderCount(page, 'global-popover-trigger-1-renders'),
+      two: await getRenderCount(page, 'global-popover-trigger-2-renders'),
+      three: await getRenderCount(page, 'global-popover-trigger-3-renders'),
+    }
+
+    await page.getByTestId('global-popover-trigger-1').hover()
+    await expect(page.getByTestId('global-popover-content')).toBeVisible()
+
+    const popAfterOpen = {
+      one: await getRenderCount(page, 'global-popover-trigger-1-renders'),
+      two: await getRenderCount(page, 'global-popover-trigger-2-renders'),
+      three: await getRenderCount(page, 'global-popover-trigger-3-renders'),
+    }
+
+    expect
+      .soft(popAfterOpen.two, 'popover trigger 2 should stay stable on trigger 1 open')
+      .toBe(popInitial.two)
+    expect
+      .soft(popAfterOpen.three, 'popover trigger 3 should stay stable on trigger 1 open')
+      .toBe(popInitial.three)
+
+    await page.getByTestId('global-popover-trigger-2').hover()
+    await expect(page.getByTestId('global-popover-content')).toBeVisible()
+
+    const popAfterSwitch = {
+      one: await getRenderCount(page, 'global-popover-trigger-1-renders'),
+      two: await getRenderCount(page, 'global-popover-trigger-2-renders'),
+      three: await getRenderCount(page, 'global-popover-trigger-3-renders'),
+    }
+
+    expect
+      .soft(
+        popAfterSwitch.three,
+        'popover trigger 3 should stay stable while switching 1 -> 2'
+      )
+      .toBe(popInitial.three)
+
+    const menuInitial = {
+      one: await getRenderCount(page, 'global-menu-trigger-1-renders'),
+      two: await getRenderCount(page, 'global-menu-trigger-2-renders'),
+      three: await getRenderCount(page, 'global-menu-trigger-3-renders'),
+    }
+
+    await page.getByTestId('global-menu-trigger-1').click()
+    await expect(page.getByTestId('global-menu-content')).toBeVisible()
+
+    const menuAfterOpen = {
+      one: await getRenderCount(page, 'global-menu-trigger-1-renders'),
+      two: await getRenderCount(page, 'global-menu-trigger-2-renders'),
+      three: await getRenderCount(page, 'global-menu-trigger-3-renders'),
+    }
+
+    expect
+      .soft(menuAfterOpen.two, 'menu trigger 2 should stay stable on trigger 1 open')
+      .toBe(menuInitial.two)
+    expect
+      .soft(menuAfterOpen.three, 'menu trigger 3 should stay stable on trigger 1 open')
+      .toBe(menuInitial.three)
+  })
+})

package/tests/GroupHoverMobile.test.tsx

@@ -0,0 +1,52 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+
+// Use mobile viewport with touch support (chromium-based to avoid webkit deps in CI)
+test.use({
+  viewport: { width: 390, height: 844 },
+  hasTouch: true,
+  isMobile: true,
+})
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'GroupHoverMobile', type: 'useCase' })
+})
+
+test(`group hover styles should not stick after touch on icon`, async ({ page }) => {
+  const container = page.locator('#group-hover-container')
+  const text = page.locator('#group-hover-text')
+
+  await expect(container).toBeVisible()
+  await expect(text).toBeVisible()
+
+  const iconSvg = container.locator('svg').first()
+  await expect(iconSvg).toBeVisible()
+
+  // Get initial colors
+  const initialTextColor = await text.evaluate((el) => {
+    return window.getComputedStyle(el).color
+  })
+  const initialIconColor = await iconSvg.evaluate((el) => {
+    return window.getComputedStyle(el).color
+  })
+
+  // Tap on the container using touchscreen
+  const box = await container.boundingBox()
+  if (box) {
+    await page.touchscreen.tap(box.x + box.width / 2, box.y + box.height / 2)
+  }
+
+  await page.waitForTimeout(300)
+
+  // After touch release, both should return to initial color
+  const afterTouchTextColor = await text.evaluate((el) => {
+    return window.getComputedStyle(el).color
+  })
+  const afterTouchIconColor = await iconSvg.evaluate((el) => {
+    return window.getComputedStyle(el).color
+  })
+
+  expect(afterTouchTextColor).toBe(initialTextColor)
+  expect(afterTouchIconColor).toBe(initialIconColor)
+})

package/tests/GroupPressInVariant.test.tsx

@@ -0,0 +1,82 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+import { getStyles, whilePressed } from './utils'
+
+// Issue #3613: $group-press not applied when in variant
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'GroupPressInVariant', type: 'useCase' })
+})
+
+test(`$group-press in variant with unnamed group - initial state`, async ({ page }) => {
+  const text = page.locator('#test-variant-primary')
+  const styles = await getStyles(text)
+  // Should have the variant's base color (blue)
+  expect(styles.color).toBe('rgb(0, 0, 255)')
+})
+
+test(`$group-press in variant with unnamed group - pressed state`, async ({ page }) => {
+  const group = page.locator('#test-unnamed-group')
+  const text = page.locator('#test-variant-primary')
+
+  // Get text styles while the group is pressed
+  const textStyles = await whilePressed(
+    group,
+    async () => {
+      return await getStyles(text)
+    },
+    { delay: 1000 }
+  )
+
+  // The text should turn red when the group is pressed
+  expect(textStyles.color).toBe('rgb(255, 0, 0)')
+})
+
+test(`$group-press at root level - initial state`, async ({ page }) => {
+  const text = page.locator('#test-root-press')
+  const styles = await getStyles(text)
+  // Should have the root level base color (blue)
+  expect(styles.color).toBe('rgb(0, 0, 255)')
+})
+
+test(`$group-press at root level - pressed state`, async ({ page }) => {
+  const group = page.locator('#test-root-group')
+  const text = page.locator('#test-root-press')
+
+  // Get text styles while the group is pressed
+  const textStyles = await whilePressed(
+    group,
+    async () => {
+      return await getStyles(text)
+    },
+    { delay: 1000 }
+  )
+
+  // The text should turn red when the group is pressed (this should already work)
+  expect(textStyles.color).toBe('rgb(255, 0, 0)')
+})
+
+test(`$group-press in secondary variant - initial state`, async ({ page }) => {
+  const text = page.locator('#test-variant-secondary')
+  const styles = await getStyles(text)
+  // Should have the secondary variant's base color (green)
+  expect(styles.color).toBe('rgb(0, 128, 0)')
+})
+
+test(`$group-press in secondary variant - pressed state`, async ({ page }) => {
+  const group = page.locator('#test-secondary-group')
+  const text = page.locator('#test-variant-secondary')
+
+  // Get text styles while the group is pressed
+  const textStyles = await whilePressed(
+    group,
+    async () => {
+      return await getStyles(text)
+    },
+    { delay: 1000 }
+  )
+
+  // The text should turn yellow when the group is pressed
+  expect(textStyles.color).toBe('rgb(255, 255, 0)')
+})

package/tests/GroupProp.test.tsx

@@ -0,0 +1,30 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+import { getStyles } from './utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'GroupProp', type: 'useCase' })
+  // In some instances the mouses hovers the style breaking the test
+  await page.mouse.move(0, 0)
+})
+
+test(`group prop - styled()`, async ({ page }) => {
+  const styles = await getStyles(page.locator('#styled').first())
+  expect(styles.backgroundColor).toBe(`rgb(255, 0, 0)`)
+})
+
+test(`group prop - styled() + media unmatched`, async ({ page }) => {
+  const styles = await getStyles(page.locator('#styled-media-unmatched').first())
+  expect(styles.backgroundColor).toBe(`rgb(255, 0, 0)`)
+})
+
+test(`group prop - styled() + media matched`, async ({ page }) => {
+  const styles = await getStyles(page.locator('#styled-media-matched').first())
+  expect(styles.backgroundColor).toBe(`rgb(0, 255, 0)`)
+})
+
+test(`group prop - inline`, async ({ page }) => {
+  const styles = await getStyles(page.locator('#inline').first())
+  expect(styles.backgroundColor).toBe(`rgb(0, 0, 255)`)
+})

package/tests/GroupPseudoVariantOverride.test.tsx

@@ -0,0 +1,57 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+import { getStyles, whileHovered, whilePressed } from './utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'GroupPseudoVariantOverride', type: 'useCase' })
+})
+
+test(`base $group-press opacity applies without variant`, async ({ page }) => {
+  const group = page.locator('#base-group')
+  const overlay = page.locator('#base-overlay')
+
+  const styles = await whilePressed(group, async () => {
+    return await getStyles(overlay)
+  })
+
+  expect(styles.opacity).toBe('0.6')
+  expect(styles.backgroundColor).toBe('rgb(0, 0, 255)')
+})
+
+test(`base $group-hover opacity applies without variant`, async ({ page }) => {
+  const group = page.locator('#base-group')
+  const overlay = page.locator('#base-overlay')
+
+  const styles = await whileHovered(group, async () => {
+    return await getStyles(overlay)
+  })
+
+  expect(styles.opacity).toBe('0.4')
+})
+
+test(`action variant $group-press opacity overrides base`, async ({ page }) => {
+  const group = page.locator('#action-group')
+  const overlay = page.locator('#action-overlay')
+
+  const styles = await whilePressed(group, async () => {
+    return await getStyles(overlay)
+  })
+
+  // variant's $group-button-press should override base opacity
+  expect(styles.opacity).toBe('1')
+  expect(styles.backgroundColor).toBe('rgb(255, 0, 0)')
+})
+
+test(`action variant $group-hover opacity overrides base`, async ({ page }) => {
+  const group = page.locator('#action-group')
+  const overlay = page.locator('#action-overlay')
+
+  const styles = await whileHovered(group, async () => {
+    return await getStyles(overlay)
+  })
+
+  // variant's $group-button-hover should override base opacity
+  expect(styles.opacity).toBe('1')
+  expect(styles.backgroundColor).toBe('rgb(255, 255, 0)')
+})

package/tests/GroupUseCases.test.tsx

@@ -0,0 +1,111 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'GroupUseCases', type: 'useCase' })
+})
+
+test(`composite api passes border radius`, async ({ page }) => {
+  const buttons = await page.getByTestId('composite-api-group').locator('button').all()
+  const buttonFirstStyles = await buttons[0].evaluate((el) => {
+    return window.getComputedStyle(el)
+  })
+  expect(buttonFirstStyles.borderTopLeftRadius).not.toBe('0px')
+  expect(buttonFirstStyles.borderBottomLeftRadius).not.toBe('0px')
+  expect(buttonFirstStyles.borderTopRightRadius).toBe('0px')
+  expect(buttonFirstStyles.borderBottomRightRadius).toBe('0px')
+
+  const buttonMidStyles = await buttons[1].evaluate((el) => {
+    return window.getComputedStyle(el)
+  })
+  expect(buttonMidStyles.borderTopLeftRadius).toBe('0px')
+  expect(buttonMidStyles.borderBottomLeftRadius).toBe('0px')
+  expect(buttonMidStyles.borderTopRightRadius).toBe('0px')
+  expect(buttonMidStyles.borderBottomRightRadius).toBe('0px')
+
+  const buttonLastStyles = await buttons[buttons.length - 1].evaluate((el) => {
+    return window.getComputedStyle(el)
+  })
+  expect(buttonLastStyles.borderTopLeftRadius).toBe('0px')
+  expect(buttonLastStyles.borderBottomLeftRadius).toBe('0px')
+  expect(buttonLastStyles.borderTopRightRadius).not.toBe('0px')
+  expect(buttonLastStyles.borderBottomRightRadius).not.toBe('0px')
+})
+
+test(`composite api group item not using Group.Item will break`, async ({ page }) => {
+  const brokenButtonStyles = await page
+    .getByTestId('composite-api-group')
+    .getByTestId('not-using-item')
+    .first()
+    .evaluate((el) => {
+      return window.getComputedStyle(el)
+    })
+  expect(brokenButtonStyles.borderTopLeftRadius).not.toBe('0px')
+  expect(brokenButtonStyles.borderBottomLeftRadius).not.toBe('0px')
+  expect(brokenButtonStyles.borderTopRightRadius).not.toBe('0px')
+  expect(brokenButtonStyles.borderBottomRightRadius).not.toBe('0px')
+})
+
+test(`composite api items work with forcePlacement="first"`, async ({ page }) => {
+  const brokenButtonStyles = await page
+    .getByTestId('composite-api-group')
+    .getByTestId('composite-api-force-placement-first')
+    .first()
+    .evaluate((el) => {
+      return window.getComputedStyle(el)
+    })
+  expect(brokenButtonStyles.borderTopLeftRadius).not.toBe('0px')
+  expect(brokenButtonStyles.borderBottomLeftRadius).not.toBe('0px')
+  expect(brokenButtonStyles.borderTopRightRadius).toBe('0px')
+  expect(brokenButtonStyles.borderBottomRightRadius).toBe('0px')
+})
+
+test(`composite api items work with forcePlacement="center"`, async ({ page }) => {
+  const brokenButtonStyles = await page
+    .getByTestId('composite-api-group')
+    .getByTestId('composite-api-force-placement-center')
+    .first()
+    .evaluate((el) => {
+      return window.getComputedStyle(el)
+    })
+  expect(brokenButtonStyles.borderTopLeftRadius).toBe('0px')
+  expect(brokenButtonStyles.borderBottomLeftRadius).toBe('0px')
+  expect(brokenButtonStyles.borderTopRightRadius).toBe('0px')
+  expect(brokenButtonStyles.borderBottomRightRadius).toBe('0px')
+})
+
+test(`composite api items work with forcePlacement="last"`, async ({ page }) => {
+  const brokenButtonStyles = await page
+    .getByTestId('composite-api-group')
+    .getByTestId('composite-api-force-placement-last')
+    .first()
+    .evaluate((el) => {
+      return window.getComputedStyle(el)
+    })
+  expect(brokenButtonStyles.borderTopLeftRadius).toBe('0px')
+  expect(brokenButtonStyles.borderBottomLeftRadius).toBe('0px')
+  expect(brokenButtonStyles.borderTopRightRadius).not.toBe('0px')
+  expect(brokenButtonStyles.borderBottomRightRadius).not.toBe('0px')
+})
+
+test(`composite api with disabled, disables the children`, async ({ page }) => {
+  const buttons = await page
+    .getByTestId('composite-api-disabled-group')
+    .locator('button')
+    .all()
+  const buttonFirst = buttons[0]
+  expect(await buttonFirst.isDisabled()).toBe(true)
+
+  const buttonMid = buttons[1]
+  expect(await buttonMid.isDisabled()).toBe(true)
+
+  const buttonLast = buttons[buttons.length - 1]
+  expect(await buttonLast.isDisabled()).toBe(true)
+
+  const buttonActive = page
+    .getByTestId('composite-api-disabled-group')
+    .getByTestId('not-disabled')
+    .first()
+  expect(await buttonActive.isDisabled()).toBe(false)
+})