Merge pull request #26559 from storybookjs/docs-portable-stories-updates

Docs: Improve portable stories docs

docs/api/portable-stories-playwright.md

@@ -10,8 +10,6 @@ export const SUPPORTED_RENDERERS = ['react', 'vue'];
 
 <Callout variant="info">
 
-The portable stories API for Playwright CT is experimental. Playwright CT itself is also experimental. Breaking changes might occur on either libraries in upcoming releases.
-
 Portable stories are currently only supported in [React](?renderer=react) and [Vue](?renderer=vue) projects.
 
 </Callout>
@@ -22,6 +20,12 @@ Portable stories are currently only supported in [React](?renderer=react) and [V
 
 <If renderer={SUPPORTED_RENDERERS}>
 
+<Callout variant="info">
+
+The portable stories API for Playwright CT is experimental. Playwright CT itself is also experimental. Breaking changes might occur in either library in upcoming releases.
+
+</Callout>
+
 Portable stories are Storybook [stories](../writing-stories/index.md) which can be used in external environments, such as [Playwright Component Tests (CT)](https://playwright.dev/docs/test-components).
 
 Normally, Storybok composes a story and its [annotations](#annotations) automatically, as part of the [story pipeline](#story-pipeline). When using stories in Playwright CT, you can use the [`createTest`](#createtest) function, which extends Playwright's test functionality to add a custom `mount` mechanism, to take care of the story pipeline for you.
@@ -175,8 +179,6 @@ export default composeStories(stories);
 
 You can then import the composed stories in your Playwright test file, as in the [example above](#createtest).
 
-## createTest
-
 <Callout variant="info">
 
 [Read more about Playwright's component testing](https://playwright.dev/docs/test-components#test-stories).

docs/snippets/react/portable-stories-jest-compose-stories.ts.mdx

@@ -18,7 +18,7 @@ test('renders primary button with default args', () => {
   expect(buttonElement).not.toBeNull();
 });
 
-test('renders primary button with overriden props', () => {
+test('renders primary button with overridden props', () => {
   // You can override props and they will get merged with values from the story's args
   render(<Primary>Hello world</Primary>);
   const buttonElement = screen.getByText(/Hello world/i);

docs/snippets/react/portable-stories-playwright-ct.ts.mdx

@@ -13,7 +13,7 @@ test('renders primary button', async ({ mount }) => {
   await mount(<stories.Primary />);
 });
 
-test('renders primary button with overriden props', async ({ mount }) => {
+test('renders primary button with overridden props', async ({ mount }) => {
   // You can pass custom props to your component via JSX
   const component = await mount(<stories.Primary label="label from test" />);
   await expect(component).toContainText('label from test');

docs/snippets/react/portable-stories-vitest-compose-stories.ts.mdx

@@ -17,7 +17,7 @@ test('renders primary button with default args', () => {
   expect(buttonElement).not.toBeNull();
 });
 
-test('renders primary button with overriden props', () => {
+test('renders primary button with overridden props', () => {
   // You can override props and they will get merged with values from the story's args
   render(<Primary>Hello world</Primary>);
   const buttonElement = screen.getByText(/Hello world/i);

docs/snippets/vue/portable-stories-jest-compose-stories.ts.mdx

@@ -17,7 +17,7 @@ test('renders primary button with default args', () => {
   expect(buttonElement).not.toBeNull();
 });
 
-test('renders primary button with overriden props', () => {
+test('renders primary button with overridden props', () => {
   // You can override props and they will get merged with values from the story's args
   render(Primary, { props: { label: 'Hello world' } });
   const buttonElement = screen.getByText(/Hello world/i);

docs/snippets/vue/portable-stories-playwright-ct.ts.mdx

@@ -15,7 +15,7 @@ test('renders primary button', async ({ mount }) => {
   await mount(<stories.Primary />);
 });
 
-test('renders primary button with overriden props', async ({ mount }) => {
+test('renders primary button with overridden props', async ({ mount }) => {
   // You can pass custom props to your component via JSX
   const component = await mount(<stories.Primary label="label from test" />);
   await expect(component).toContainText('label from test');

docs/snippets/vue/portable-stories-vitest-compose-stories.ts.mdx

@@ -17,7 +17,7 @@ test('renders primary button with default args', () => {
   expect(buttonElement).not.toBeNull();
 });
 
-test('renders primary button with overriden props', () => {
+test('renders primary button with overridden props', () => {
   // You can override props and they will get merged with values from the story's args
   render(Primary, { props: { label: 'Hello world' } });
   const buttonElement = screen.getByText(/Hello world/i);