[UIK-5667][skeleton, spin-container, spin] redesign

playground/entries/Spin.tsx

@@ -20,9 +20,9 @@ type AdditionalJSXProps = {
 };
 export type SpinJSXProps = JSXProps<NSSpin.Props> & AdditionalJSXProps;
 
-const margins = {
-  xs: 1,
-  s: 1,
+const gaps = {
+  xs: 1.5,
+  s: 1.5,
   m: 2,
   l: 2,
   xl: 4,
@@ -32,10 +32,10 @@ const margins = {
 const textSize: { [key in SpinJSXProps['size']]: NSText.Props['size'] } = {
   xs: 200,
   s: 200,
-  m: 300,
+  m: 200,
   l: 300,
-  xl: 200,
-  xxl: 200,
+  xl: 300,
+  xxl: 300,
 };
 
 const textPlacement: { [key in SpinJSXProps['textPlacement']]: NSFlex.Props['direction'] } = {
@@ -46,7 +46,7 @@ const textPlacement: { [key in SpinJSXProps['textPlacement']]: NSFlex.Props['dir
 function getJSX(props: SpinJSXProps) {
   return props.text.length
     ? (
-        <Flex alignItems='center' gap={margins[props.size]} direction={textPlacement[props.textPlacement]}>
+        <Flex alignItems='center' gap={gaps[props.size]} direction={textPlacement[props.textPlacement]}>
           <Spin size={props.size} theme={props.theme} />
           <Text size={textSize[props.size]} color='text-secondary'>
             {props.text}
@@ -69,8 +69,8 @@ const entry: PlaygroundEntry<SpinJSXProps> = {
     },
     theme: {
       type: 'inline-radio',
-      value: 'dark',
-      options: ['dark', 'invert'],
+      value: 'default',
+      options: ['default', 'invert'],
       displayName: 'Theme',
     },
     text: {

playground/entries/SpinContainer.tsx

@@ -48,8 +48,8 @@ const entry: PlaygroundEntry<SpinContainerJSXProps> = {
     },
     theme: {
       type: 'inline-radio',
-      value: 'dark',
-      options: ['dark', 'invert'],
+      value: 'default',
+      options: ['default', 'invert'],
       displayName: 'Theme',
     },
     size: {

semcore/base-trigger/src/ButtonTrigger.jsx

@@ -51,7 +51,7 @@ class RootButtonTrigger extends Component {
         {addonTextChildren(Children, ButtonTrigger.Text, ButtonTrigger.Addon, empty)}
         {(chevron || loading) && (
           <SButtonAddon>
-            {loading ? <SButtonTriggerSpin size='xs' theme={false} /> : <ChevronDown />}
+            {loading ? <SButtonTriggerSpin size='xs' /> : <ChevronDown />}
           </SButtonAddon>
         )}
       </Root>,

semcore/notice-bubble/__tests__/notice-bubble.browser-test.tsx

@@ -694,11 +694,13 @@ test.describe(`${TAG.VISUAL}`, () => {
   test('Verify Notice with Loading state', {
     tag: [TAG.PRIORITY_HIGH, '@notice-bubble'],
   }, async ({ page, browserName }) => {
+    test.setTimeout(60000);
     await loadPage(page, 'stories/components/notice-bubble/docs/examples/dynamic_notice.tsx', 'en', {
       initialAnimation: true,
       duration: 0,
       type: 'info',
       focusLock: false,
+      loadingDuration: 10000,
     });
     await page.keyboard.press('Tab');
     await page.keyboard.press('Enter');
@@ -710,7 +712,7 @@ test.describe(`${TAG.VISUAL}`, () => {
     await page.keyboard.press('Enter');
     await page.locator('[data-ui-name="Spin"]').waitFor({ state: 'visible' });
     await expect(page).toHaveScreenshot();
-    await page.waitForSelector('text="Try again"');
+    await page.waitForSelector('text="Try again"', { timeout: 30000 });
     await page.keyboard.press('Tab');
     await locators.closeHint(page).waitFor({ state: 'visible' });
     await expect(page).toHaveScreenshot();

semcore/skeleton/__tests__/skeleton.browser-test.tsx

@@ -1,108 +1,247 @@
-import type { Page } from '@semcore/testing-utils/playwright';
+import type { Locator, Page } from '@semcore/testing-utils/playwright';
 import { expect, test } from '@semcore/testing-utils/playwright';
 import { loadPage } from '@semcore/testing-utils/shared/helpers';
 import { TAG } from '@semcore/testing-utils/shared/tags';
 
+const BASE_EXAMPLE = 'stories/components/skeleton/tests/examples/chart-skeletons.tsx';
+
+/** every chart skeleton rendered by the example, in DOM order */
+const CHARTS = [
+  'LineChartSkeleton',
+  'AreaChartSkeleton',
+  'BarChartSkeleton',
+  'HistogramChartSkeleton',
+  'CompactHorizontalBarChartSkeleton',
+  'DonutChartSkeleton',
+  'ScatterPlotChartSkeleton',
+  'BubbleChartSkeleton',
+  'VennChartSkeleton',
+  'RadialTreeChartSkeleton',
+] as const;
+
 export const locators = {
   skeleton: (page: Page, index?: number) => {
     const base = page.locator('[data-ui-name="SkeletonSVG"]');
     return typeof index === 'number' ? base.nth(index) : base;
   },
-  button: (page: Page, index?: number) => {
-    const base = page.locator('[data-ui-name="Button"]');
+  chartSkeleton: (page: Page, index?: number) => {
+    const base = page.locator('[data-ui-name="Skeleton"]');
     return typeof index === 'number' ? base.nth(index) : base;
   },
+  // areas of the example, so every screenshot is scoped to its own skeleton
+  area: (page: Page, testId: string) => page.locator(`[data-testid="${testId}"]`),
+  chart: (page: Page, name: string) => page.locator(`[data-testid="chart-${name}"]`),
 };
 
+const computed = (locator: Locator, property: string) =>
+  locator.evaluate((el, prop) => getComputedStyle(el).getPropertyValue(prop), property);
+
 /* =====================================================
 @visual
-Visual states, hover and focus styles, paddings, margins, and snapshots.
+Visual states and snapshots.
+Every snapshot is taken from a [data-testid] area, never from the whole page.
+The pulse animation is frozen with duration=0 to keep screenshots stable.
 ===================================================== */
 test.describe(`${TAG.VISUAL}`, () => {
-  test('Verify text initial loading styles', {
+  test('Verify every chart skeleton pattern', {
     tag: [TAG.PRIORITY_HIGH, '@skeleton'],
   }, async ({ page }) => {
-    await loadPage(page, 'stories/components/skeleton/docs/examples/text_initial_loading.tsx', 'en');
+    await loadPage(page, BASE_EXAMPLE, 'en', { duration: 0 });
+
+    for (const name of CHARTS) {
+      await test.step(`Verify ${name}`, async () => {
+        const chart = locators.chart(page, name);
+
+        await chart.scrollIntoViewIfNeeded();
+        await expect(chart).toBeVisible();
+        await expect(chart).toHaveScreenshot(`${name}.png`);
+      });
+    }
+  });
+
+  test('Verify type=monotone for Line and Area', {
+    tag: [TAG.PRIORITY_MEDIUM, '@skeleton'],
+  }, async ({ page }) => {
+    await loadPage(page, BASE_EXAMPLE, 'en', { duration: 0, type: 'monotone' });
+
+    await expect(locators.chart(page, 'LineChartSkeleton')).toHaveScreenshot(
+      'LineChartSkeleton-monotone.png',
+    );
+    await expect(locators.chart(page, 'AreaChartSkeleton')).toHaveScreenshot(
+      'AreaChartSkeleton-monotone.png',
+    );
+  });
+
+  test('Verify layout=vertical for Bar and Histogram', {
+    tag: [TAG.PRIORITY_MEDIUM, '@skeleton'],
+  }, async ({ page }) => {
+    await loadPage(page, BASE_EXAMPLE, 'en', { duration: 0, layout: 'vertical' });
+
+    await expect(locators.chart(page, 'BarChartSkeleton')).toHaveScreenshot(
+      'BarChartSkeleton-vertical.png',
+    );
+    await expect(locators.chart(page, 'HistogramChartSkeleton')).toHaveScreenshot(
+      'HistogramChartSkeleton-vertical.png',
+    );
+  });
+
+  test('Verify halfsize donut', {
+    tag: [TAG.PRIORITY_MEDIUM, '@skeleton'],
+  }, async ({ page }) => {
+    await loadPage(page, BASE_EXAMPLE, 'en', { duration: 0, halfsize: true });
 
-    await locators.skeleton(page).waitFor({ state: 'visible' });
-    await expect(page).toHaveScreenshot();
+    await expect(locators.chart(page, 'DonutChartSkeleton')).toHaveScreenshot(
+      'DonutChartSkeleton-halfsize.png',
+    );
+  });
 
-    await expect(locators.skeleton(page)).toHaveAttribute('preserveAspectRatio', 'none');
+  const textCases = [
+    { theme: 'default', amount: 1, textWidth: '60%' },
+    { theme: 'invert', amount: 1, textWidth: '60%' },
+    { theme: 'default', amount: 3, textWidth: '100%' },
+    { theme: 'invert', amount: 5, textWidth: '30%' },
+  ] as const;
 
-    const styleAttr = await locators.skeleton(page).getAttribute('style');
-    expect(styleAttr).toContain('2000ms');
+  textCases.forEach((item) => {
+    test(`Verify theme=${item.theme}, amount=${item.amount}`, {
+      tag: [TAG.PRIORITY_HIGH, '@skeleton'],
+    }, async ({ page }) => {
+      await loadPage(page, BASE_EXAMPLE, 'en', {
+        ...item,
+        duration: 0,
+        invertedBackground: item.theme === 'invert',
+      });
 
-    await locators.button(page).click();
-    await expect(locators.skeleton(page)).not.toBeVisible();
+      await expect(locators.skeleton(page, 0)).toBeVisible();
+      await expect(locators.area(page, 'plain-skeleton')).toHaveScreenshot();
+    });
   });
 
-  test('Verify skeleton for charts', {
+  test('Verify chart skeletons on inverted background', {
     tag: [TAG.PRIORITY_HIGH, '@skeleton'],
   }, async ({ page }) => {
-    await loadPage(page, 'stories/components/skeleton/docs/examples/skeleton_examples_for_charts.tsx', 'en');
+    await loadPage(page, BASE_EXAMPLE, 'en', {
+      duration: 0,
+      theme: 'invert',
+      invertedBackground: true,
+    });
 
-    const card = page.locator('[data-ui-name="Card"]');
-    const count = await card.count();
+    await expect(locators.area(page, 'chart-skeletons')).toHaveScreenshot();
+  });
+});
 
-    for (let i = 0; i < count; i++) {
-      const currentCard = card.nth(i);
-      const title = await currentCard.locator('[data-ui-name="Card.Title"]').textContent();
+/* =====================================================
+@functional
+Attributes, props forwarding, locales and resizing - no snapshots here.
+===================================================== */
+test.describe(`${TAG.FUNCTIONAL}`, () => {
+  test('Verify root attributes', {
+    tag: [TAG.PRIORITY_HIGH, '@skeleton'],
+  }, async ({ page }) => {
+    await loadPage(page, BASE_EXAMPLE, 'en');
 
-      await currentCard.scrollIntoViewIfNeeded();
-      await expect(currentCard).toBeVisible();
+    const skeleton = locators.skeleton(page, 0);
 
-      const clip = await currentCard.boundingBox();
-      if (!clip) {
-        throw new Error(`Card "${title}" is not available for screenshot`);
-      }
+    await expect(skeleton).toBeVisible();
+    await expect(skeleton).toHaveAttribute('role', 'img');
+    await expect(skeleton).toHaveAttribute('aria-label', 'Loading…');
+    await expect(skeleton).toHaveAttribute('preserveAspectRatio', 'none');
+  });
 
-      await expect(page).toHaveScreenshot(`${title}.png`, { clip });
-    }
+  test('Verify duration prop drives the pulse animation', {
+    tag: [TAG.PRIORITY_MEDIUM, '@skeleton'],
+  }, async ({ page }) => {
+    await loadPage(page, BASE_EXAMPLE, 'en', { duration: 500 });
+
+    const skeleton = locators.skeleton(page, 0);
+
+    expect(await skeleton.getAttribute('style')).toContain('500ms');
+    expect(await computed(skeleton, 'animation-duration')).toBe('0.5s');
   });
 
-  const themeVariables = [
-    { theme: 'dark', amount: 1, duration: 0 },
-    { theme: 'invert', amount: 1, duration: 0 },
-    { theme: 'dark', amount: 3, duration: 0 },
-    { theme: 'invert', amount: 5, width: '60%', duration: 0 },
-  ];
-  themeVariables.forEach((item) => {
-    test(`Verify theme=${item.theme}, amount=${item.amount}`, {
-      tag: [TAG.PRIORITY_HIGH, '@skeleton'],
-    }, async ({ page }) => {
-      await loadPage(page, 'stories/components/skeleton/tests/examples/skeleton-themes.tsx', 'en', item);
+  test('Verify hidden prop renders nothing', {
+    tag: [TAG.PRIORITY_HIGH, '@skeleton'],
+  }, async ({ page }) => {
+    await loadPage(page, BASE_EXAMPLE, 'en', { hidden: true });
 
-      await test.step('Verify skeleton visibility', async () => {
-        await expect(locators.skeleton(page, 0)).toBeVisible();
-      });
+    await expect(locators.skeleton(page)).toHaveCount(0);
+    await expect(locators.chartSkeleton(page)).toHaveCount(0);
+  });
 
-      await test.step('Verify screenshot', async () => {
-        await expect(page).toHaveScreenshot();
-      });
-    });
+  test('Verify aria-label is localized', {
+    tag: [TAG.PRIORITY_MEDIUM, '@skeleton'],
+  }, async ({ page }) => {
+    await loadPage(page, BASE_EXAMPLE, 'de', { locale: 'de' });
+
+    expect(await locators.skeleton(page, 0).getAttribute('aria-label')).not.toBe('Loading…');
+  });
+
+  test('Verify Skeleton.Text amount renders the requested number of lines', {
+    tag: [TAG.PRIORITY_MEDIUM, '@skeleton'],
+  }, async ({ page }) => {
+    await loadPage(page, BASE_EXAMPLE, 'en', { amount: 4 });
+
+    // 4 lines from the first Skeleton.Text plus a single line from the second one
+    await expect(locators.area(page, 'plain-skeleton').locator('rect[rx="4"]')).toHaveCount(5);
+  });
+
+  test('Verify theme changes the fill of Skeleton', {
+    tag: [TAG.PRIORITY_HIGH, '@skeleton'],
+  }, async ({ page }) => {
+    await loadPage(page, BASE_EXAMPLE, 'en', { theme: 'default' });
+    const defaultFill = await computed(locators.skeleton(page, 0), 'fill');
+
+    await loadPage(page, BASE_EXAMPLE, 'en', { theme: 'invert' });
+    const invertFill = await computed(locators.skeleton(page, 0), 'fill');
+
+    expect(defaultFill).not.toBe('');
+    expect(invertFill).not.toBe(defaultFill);
   });
 
-  test('Verify observeParentSize prop styles', {
+  test('Verify theme changes the color of chart skeletons', {
+    tag: [TAG.PRIORITY_HIGH, '@skeleton'],
+  }, async ({ page }) => {
+    await loadPage(page, BASE_EXAMPLE, 'en', { theme: 'default' });
+    const defaultChart = locators.chart(page, 'LineChartSkeleton').getByRole('img');
+    await expect(defaultChart).toBeVisible();
+    const defaultBackground = await computed(defaultChart, 'background-color');
+
+    await loadPage(page, BASE_EXAMPLE, 'en', { theme: 'invert' });
+    const invertChart = locators.chart(page, 'LineChartSkeleton').getByRole('img');
+    await expect(invertChart).toBeVisible();
+    const invertBackground = await computed(invertChart, 'background-color');
+
+    expect(defaultBackground).not.toBe('');
+    expect(invertBackground).not.toBe(defaultBackground);
+  });
+
+  test('Verify observeParentSize follows the parent width', {
     tag: [TAG.PRIORITY_MEDIUM, '@skeleton'],
   }, async ({ page }) => {
-    await loadPage(page, 'stories/components/skeleton/tests/examples/observe-parent-size.tsx', 'en');
+    await loadPage(page, BASE_EXAMPLE, 'en', { observeParentSize: true, parentWidth: 200 });
+
+    const skeleton = locators.skeleton(page, 0);
+    await expect(skeleton).toHaveAttribute('width', '100%');
+
+    const narrow = (await skeleton.boundingBox())!.width;
+
+    await locators.area(page, 'skeleton-parent').evaluate((el) => {
+      (el as HTMLElement).style.width = '600px';
+    });
 
-    const styleAttr = await locators.skeleton(page, 1).getAttribute('style');
-    await expect(locators.skeleton(page, 0)).toHaveAttribute('width', '100%');
-    expect(styleAttr).toContain('300px');
+    await expect(async () => {
+      const wide = (await skeleton.boundingBox())!.width;
+      expect(wide).toBeGreaterThan(narrow);
+    }).toPass();
 
-    await locators.button(page).click();
-    await page.waitForTimeout(100);
-    await expect(locators.skeleton(page, 0)).toHaveAttribute('width', '100%');
-    expect(styleAttr).toContain('300px');
-    await expect(page).toHaveScreenshot();
+    await expect(skeleton).toHaveAttribute('width', '100%');
   });
 
-  test('Verify usage with other elements styles', {
+  test('Verify w prop pins the skeleton width regardless of the parent', {
     tag: [TAG.PRIORITY_MEDIUM, '@skeleton'],
   }, async ({ page }) => {
-    await loadPage(page, 'stories/components/skeleton/docs/examples/usage_with_other_elements.tsx', 'en');
+    await loadPage(page, BASE_EXAMPLE, 'en', { w: 300, parentWidth: 200 });
 
-    await expect(page).toHaveScreenshot();
+    expect(await computed(locators.skeleton(page, 0), 'width')).toBe('300px');
   });
 });