tag tests

theme/components/Tag/Tag.pw.tsx

+import { Box, Tag } from '@chakra-ui/react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import TestApp from 'playwright/TestApp';
+
+[ 'blue', 'gray', 'orange', 'green', 'purple', 'cyan', 'teal' ].forEach((colorScheme) => {
+  test(`${ colorScheme } color scheme +@dark-mode`, async({ mount }) => {
+    const component = await mount(
+      <TestApp>
+        <Tag colorScheme={ colorScheme }>content</Tag>
+      </TestApp>,
+    );
+
+    await expect(component.getByText(/content/i)).toHaveScreenshot();
+  });
+});
+
+test('with long text', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <Box w="100px">
+        <Tag>this is very looooooooooong text</Tag>
+      </Box>
+    </TestApp>,
+  );
+
+  await expect(component.getByText(/this/i)).toHaveScreenshot();
+});

theme/components/Tag.ts → theme/components/Tag/Tag.ts

@@ -4,8 +4,8 @@ import {
   defineStyle,
 } from '@chakra-ui/styled-system';
 
-import getDefaultTransitionProps from '../utils/getDefaultTransitionProps';
-import Badge from './Badge';
+import getDefaultTransitionProps from '../../utils/getDefaultTransitionProps';
+import Badge from '../Badge';
 const transitionProps = getDefaultTransitionProps();
 
 const { defineMultiStyleConfig, definePartsStyle } =

theme/components/index.ts

@@ -16,7 +16,7 @@ import Spinner from './Spinner';
 import Switch from './Switch';
 import Table from './Table';
 import Tabs from './Tabs';
-import Tag from './Tag';
+import Tag from './Tag/Tag';
 import Text from './Text';
 import Textarea from './Textarea';
 import Tooltip from './Tooltip/Tooltip';