Merge branch 'next' into a11y-popover-content

Author: ghengeveld

.circleci/config.yml

@@ -64,7 +64,7 @@ executors:
         default: "small"
     working_directory: /tmp/storybook
     docker:
-      - image: mcr.microsoft.com/playwright:v1.48.1-jammy
+      - image: mcr.microsoft.com/playwright:v1.52.0-noble
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>

.github/workflows/tests-unit.yml

@@ -7,14 +7,15 @@ on:
   pull_request:
     types: [opened, synchronize, reopened]
 
+env:
+  NODE_OPTIONS: "--max_old_space_size=4096"
+
 jobs:
   build:
-    name: Core Unit Tests, ${{ matrix.os }}
+    name: Core Unit Tests, windows-latest
     strategy:
       fail-fast: false
-      matrix:
-        os: [windows-latest]
-    runs-on: ${{ matrix.os }}
+    runs-on: windows-11-arm
     steps:
       - uses: actions/checkout@v4
         with:
@@ -25,11 +26,11 @@ jobs:
           node-version-file: ".nvmrc"
 
       - name: install scripts
-        run: | 
+        run: |
           cd scripts && yarn install
 
       - name: install code
-        run: | 
+        run: |
           cd code && yarn install
 
       - name: compile

code/addons/a11y/template/stories/parameters.stories.ts

@@ -1,7 +1,7 @@
 import { global as globalThis } from '@storybook/global';
 
 export default {
-  component: globalThis.Components.Html,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Html,
   args: {
     content: '<button>Click Me!</button>',
   },

code/addons/a11y/template/stories/tests.stories.ts

@@ -1,7 +1,7 @@
 import { global as globalThis } from '@storybook/global';
 
 export default {
-  component: globalThis.Components.Html,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Html,
   args: {
     content: '',
   },

code/addons/docs/template/stories/codePanel/index.stories.tsx

@@ -1,5 +1,5 @@
 export default {
-  component: globalThis.Components.Button,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Button,
   tags: ['autodocs'],
   parameters: {
     chromatic: { disable: true },

code/addons/docs/template/stories/docs2/button.stories.ts

@@ -1,5 +1,5 @@
 export default {
-  component: globalThis.Components.Button,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Button,
   tags: ['autodocs'],
   args: { onClick: () => console.log('clicked!') },
   parameters: {

code/addons/docs/template/stories/docs2/multiple-csf-files-a.stories.ts

@@ -1,6 +1,6 @@
 export default {
   title: 'Multiple CSF Files Same Title',
-  component: globalThis.Components.Html,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Html,
   tags: ['autodocs'],
   args: {
     content: '<p>paragraph</p>',

code/addons/docs/template/stories/docs2/multiple-csf-files-b.stories.ts

@@ -1,6 +1,6 @@
 export default {
   title: 'Multiple CSF Files Same Title',
-  component: globalThis.Components.Html,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Html,
   tags: ['autodocs'],
   args: {
     content: '<p>paragraph</p>',

code/addons/docs/template/stories/docs2/resolved-react.stories.ts

@@ -20,7 +20,7 @@ import { expect, within } from 'storybook/test';
  */
 export default {
   title: 'Docs2/ResolvedReact',
-  component: globalThis.Components.Html,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Html,
   tags: ['autodocs'],
   argTypes: {
     content: { table: { disable: true } },

code/addons/docs/template/stories/docspage/autoplay.stories.ts

@@ -1,7 +1,7 @@
 import { expect, within } from 'storybook/test';
 
 export default {
-  component: globalThis.Components.Pre,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,
   tags: ['autodocs'],
   args: { text: 'Play has not run' },
   parameters: { chromatic: { disable: true } },

code/addons/docs/template/stories/docspage/basic.stories.ts

@@ -1,7 +1,7 @@
 import { fn } from 'storybook/test';
 
 export default {
-  component: globalThis.Components.Button,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Button,
   tags: ['autodocs'],
   args: { label: 'Click Me!', onClick: fn() },
   parameters: { chromatic: { disable: true } },

code/addons/docs/template/stories/docspage/description.stories.ts

@@ -1,7 +1,7 @@
 export default {
-  component: globalThis.Components.Button,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Button,
   subcomponents: {
-    Pre: globalThis.Components.Pre,
+    Pre: globalThis.__TEMPLATE_COMPONENTS__.Pre,
   },
   tags: ['autodocs'],
   args: { label: 'Click Me!' },

code/addons/docs/template/stories/docspage/error.stories.ts

@@ -1,5 +1,5 @@
 export default {
-  component: globalThis.Components.Button,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Button,
   tags: ['autodocs', '!test', '!vitest'],
   args: { label: 'Click Me!' },
   parameters: { chromatic: { disable: true } },

code/addons/docs/template/stories/docspage/extract-description.stories.ts

@@ -1,5 +1,5 @@
 export default {
-  component: globalThis.Components.Button,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Button,
   tags: ['autodocs'],
   args: { label: 'Click Me!' },
   parameters: {

code/addons/docs/template/stories/docspage/iframe.stories.ts

@@ -1,5 +1,5 @@
 export default {
-  component: globalThis.Components.Button,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Button,
   tags: ['autodocs'],
   args: { label: 'Rendered in iframe' },
   parameters: {

code/addons/docs/template/stories/docspage/overflow.stories.ts

@@ -1,5 +1,5 @@
 export default {
-  component: globalThis.Components.Pre,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,
   tags: ['autodocs'],
   args: {
     text: 'Demonstrates overflow',

code/addons/docs/template/stories/docspage/override.stories.ts

@@ -12,7 +12,7 @@
 const Override = () => 'overridden';
 
 export default {
-  component: globalThis.Components.Button,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Button,
   tags: ['autodocs'],
   args: { label: 'Click Me!' },
   parameters: {

code/addons/docs/template/stories/docspage/source.stories.ts

@@ -3,7 +3,7 @@ import type { StoryContext } from 'storybook/internal/types';
 import { dedent } from 'ts-dedent';
 
 export default {
-  component: globalThis.Components.Button,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Button,
   tags: ['autodocs'],
   args: { label: 'Click Me!' },
   parameters: { chromatic: { disable: true } },

code/addons/docs/template/stories/toc/basic.stories.ts

@@ -1,5 +1,5 @@
 export default {
-  component: globalThis.Components.Button,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Button,
   tags: ['autodocs'],
   parameters: {
     chromatic: { disable: true },

code/addons/docs/template/stories/toc/custom-selector.stories.ts

@@ -1,5 +1,5 @@
 export default {
-  component: globalThis.Components.Button,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Button,
   tags: ['autodocs'],
   parameters: {
     chromatic: { disable: true },

code/addons/docs/template/stories/toc/custom-title.stories.ts

@@ -1,5 +1,5 @@
 export default {
-  component: globalThis.Components.Button,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Button,
   tags: ['autodocs'],
   parameters: {
     chromatic: { disable: true },

code/addons/docs/template/stories/toc/ignore-selector.stories.ts

@@ -1,5 +1,5 @@
 export default {
-  component: globalThis.Components.Button,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Button,
   tags: ['autodocs'],
   parameters: {
     chromatic: { disable: true },

code/addons/links/template/stories/decorator.stories.ts

@@ -3,7 +3,7 @@ import { global as globalThis } from '@storybook/global';
 import { withLinks } from '@storybook/addon-links';
 
 export default {
-  component: globalThis.Components.Html,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Html,
   parameters: {
     chromatic: { disable: true },
   },

code/addons/links/template/stories/hrefto.stories.ts

@@ -1,7 +1,7 @@
 import { hrefTo } from '@storybook/addon-links';
 
 export default {
-  component: globalThis.Components.Html,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Html,
   title: 'hrefTo',
   parameters: {
     chromatic: { disable: true },

code/addons/links/template/stories/linkto.stories.ts

@@ -3,7 +3,7 @@ import { global as globalThis } from '@storybook/global';
 import { linkTo } from '@storybook/addon-links';
 
 export default {
-  component: globalThis.Components.Button,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Button,
   title: 'linkTo',
   args: {
     label: 'Click Me!',

code/addons/themes/template/stories/decorators.stories.ts

@@ -41,7 +41,7 @@ const addStyleSheetDecorator = (storyFn: any) => {
 };
 
 export default {
-  component: globalThis.Components.Pre,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,
   args: {
     text: 'Testing the themes',
   },

code/addons/themes/template/stories/globals.stories.ts

@@ -37,7 +37,7 @@ const addStyleSheetDecorator = (storyFn: any) => {
 };
 
 export default {
-  component: globalThis.Components.Pre,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,
   args: {
     text: 'Testing the themes',
   },

code/addons/themes/template/stories/parameters.stories.ts

@@ -37,7 +37,7 @@ const addStyleSheetDecorator = (storyFn: any) => {
 };
 
 export default {
-  component: globalThis.Components.Pre,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,
   args: {
     text: 'Testing the themes',
   },

code/addons/vitest/template/stories/basics.stories.ts

@@ -11,7 +11,7 @@ import {
 } from 'storybook/test';
 
 export default {
-  component: globalThis.Components.Form,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Form,
   args: {
     onSuccess: fn(),
   },

code/addons/vitest/template/stories/unhandled-errors.stories.ts

@@ -3,7 +3,7 @@ import { global as globalThis } from '@storybook/global';
 import { userEvent, within } from 'storybook/test';
 
 export default {
-  component: globalThis.Components.Button,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Button,
   args: {
     label: 'Button',
     // onClick: fn(), <-- this is intentionally missing to trigger an unhandled error

code/core/template/stories/argMapping.stories.ts

@@ -19,7 +19,7 @@ const labels = {
 };
 
 export default {
-  component: globalThis.Components.Pre,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,
   decorators: [
     (storyFn: PartialStoryFn, context: StoryContext) => {
       return storyFn({

code/core/template/stories/argTypes.stories.ts

@@ -5,7 +5,7 @@ import { global as globalThis } from '@storybook/global';
 import { expect, within } from 'storybook/test';
 
 export default {
-  component: globalThis.Components.Pre,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,
   // Compose all the argTypes into `object`, so the pre component only needs a single prop
   decorators: [
     (storyFn: PartialStoryFn, context: StoryContext) =>

code/core/template/stories/args.stories.ts

@@ -18,7 +18,7 @@ function pick(obj, keys) {
 }
 
 export default {
-  component: globalThis.Components.Pre,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,
   args: {
     componentArg: 'componentArg',
     storyArg: 'componentStoryArg',

code/core/template/stories/argtype.stories.ts

@@ -1,7 +1,7 @@
 import { global as globalThis } from '@storybook/global';
 
 export default {
-  component: globalThis.Components.Button,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Button,
   args: {
     label: 'Click Me!',
   },

code/core/template/stories/autotitle.stories.ts

@@ -5,7 +5,7 @@ import { global as globalThis } from '@storybook/global';
 import { expect } from 'storybook/test';
 
 export default {
-  component: globalThis.Components.Pre,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,
   args: { text: 'No content' },
 };
 

code/core/template/stories/backgrounds/globals.stories.ts

@@ -1,7 +1,7 @@
 import { global as globalThis } from '@storybook/global';
 
 export default {
-  component: globalThis.Components.Pre,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,
   args: {
     text: 'Testing the background',
   },

code/core/template/stories/basics.stories.ts

@@ -3,7 +3,7 @@ import { global as globalThis } from '@storybook/global';
 import { action } from 'storybook/actions';
 
 export default {
-  component: globalThis.Components.Button,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Button,
   args: {
     label: 'Click Me!',
   },

code/core/template/stories/before-each.stories.ts

@@ -2,7 +2,7 @@
 import { expect } from 'storybook/test';
 
 const meta = {
-  component: globalThis.Components.Button,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Button,
   args: { label: 'Button' },
 };
 

code/core/template/stories/component-play.stories.ts

@@ -5,7 +5,7 @@ import { global as globalThis } from '@storybook/global';
 import { expect, within } from 'storybook/test';
 
 export default {
-  component: globalThis.Components.Pre,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,
   play: async ({ canvasElement, name }: PlayFunctionContext) => {
     await expect(
       JSON.parse(within(canvasElement as HTMLPreElement).getByTestId('pre').innerText)

code/core/template/stories/component-test.basics.stories.ts

@@ -11,7 +11,7 @@ import {
 } from 'storybook/test';
 
 export default {
-  component: globalThis.Components.Form,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Form,
   args: {
     onSuccess: fn(),
   },

code/core/template/stories/component-test.unhandled-errors.stories.ts

@@ -3,7 +3,7 @@ import { global as globalThis } from '@storybook/global';
 import { userEvent, within } from 'storybook/test';
 
 export default {
-  component: globalThis.Components.Button,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Button,
   args: {
     label: 'Button',
     // onClick: fn(), <-- this is intentionally missing to trigger an unhandled error

code/core/template/stories/configs.stories.ts

@@ -5,7 +5,7 @@ import { actions, configureActions } from 'storybook/actions';
 const configs = actions('actionA', 'actionB', 'actionC');
 
 export default {
-  component: globalThis.Components.Button,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Button,
   args: {
     label: 'Click Me!',
   },

code/core/template/stories/controls/basics.stories.ts

@@ -3,7 +3,7 @@ import type { PartialStoryFn, StoryContext } from 'storybook/internal/types';
 import { global as globalThis } from '@storybook/global';
 
 export default {
-  component: globalThis.Components.Pre,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,
   decorators: [
     (storyFn: PartialStoryFn, context: StoryContext) =>
       storyFn({ args: { object: { ...context.args } } }),

code/core/template/stories/controls/conditional.stories.ts

@@ -3,7 +3,7 @@ import type { PartialStoryFn, StoryContext } from 'storybook/internal/types';
 import { global as globalThis } from '@storybook/global';
 
 export default {
-  component: globalThis.Components.Pre,
+  component: globalThis.__TEMPLATE_COMPONENTS__.Pre,
   decorators: [
     (storyFn: PartialStoryFn, context: StoryContext) =>
       storyFn({ args: { object: { ...context.args } } }),