Skip to content

Commit 933b626

Browse files
yannbfstorybook-bot
yannbf
authored and
storybook-bot
committed
Merge pull request #32220 from storybookjs/yann/fix-jsx-issue-2
Addon Docs: Fix Symbol conversion issue in docs page and controls panel (cherry picked from commit fef67c8)
1 parent bed61ea commit 933b626

File tree

44 files changed

+93
-51
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+93
-51
lines changed

‎code/addons/a11y/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@
100100
"./src/postinstall.ts"
101101
]
102102
},
103-
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
103+
"gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684",
104104
"storybook": {
105105
"displayName": "Accessibility",
106106
"icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",

‎code/addons/docs/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@
162162
"./src/manager.tsx"
163163
]
164164
},
165-
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
165+
"gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684",
166166
"storybook": {
167167
"displayName": "Docs",
168168
"icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",

‎code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -335,7 +335,7 @@ export class JsonArray extends Component<JsonArrayProps, JsonArrayState> {
335335
onClick: handleRemove,
336336
className: 'rejt-minus-menu',
337337
style: minus,
338-
'aria-label': `remove the array '${name}'`,
338+
'aria-label': `remove the array '${String(name)}'`,
339339
});
340340

341341
return (
@@ -379,15 +379,15 @@ export class JsonArray extends Component<JsonArrayProps, JsonArrayState> {
379379
onClick: this.handleAddMode,
380380
className: 'rejt-plus-menu',
381381
style: plus,
382-
'aria-label': `add a new item to the '${name}' array`,
382+
'aria-label': `add a new item to the '${String(name)}' array`,
383383
});
384384
const removeItemButton =
385385
minusMenuElement &&
386386
cloneElement(minusMenuElement, {
387387
onClick: handleRemove,
388388
className: 'rejt-minus-menu',
389389
style: minus,
390-
'aria-label': `remove the array '${name}'`,
390+
'aria-label': `remove the array '${String(name)}'`,
391391
});
392392

393393
const onlyValue = true;
@@ -670,8 +670,8 @@ export class JsonFunctionValue extends Component<JsonFunctionValueProps, JsonFun
670670
onClick: handleRemove,
671671
className: 'rejt-minus-menu',
672672
style: style.minus,
673-
'aria-label': `remove the function '${name}'${
674-
parentPropertyName ? ` from '${parentPropertyName}'` : ''
673+
'aria-label': `remove the function '${String(name)}'${
674+
String(parentPropertyName) ? ` from '${String(parentPropertyName)}'` : ''
675675
}`,
676676
});
677677
minusElement = resultOnlyResult ? null : minusMenuLayout;
@@ -1222,7 +1222,7 @@ export class JsonObject extends Component<JsonObjectProps, JsonObjectState> {
12221222
onClick: handleRemove,
12231223
className: 'rejt-minus-menu',
12241224
style: minus,
1225-
'aria-label': `remove the object '${name}'`,
1225+
'aria-label': `remove the object '${String(name)}'`,
12261226
});
12271227

12281228
return (
@@ -1268,15 +1268,15 @@ export class JsonObject extends Component<JsonObjectProps, JsonObjectState> {
12681268
onClick: this.handleAddMode,
12691269
className: 'rejt-plus-menu',
12701270
style: plus,
1271-
'aria-label': `add a new property to the object '${name}'`,
1271+
'aria-label': `add a new property to the object '${String(name)}'`,
12721272
});
12731273
const removeItemButton =
12741274
minusMenuElement &&
12751275
cloneElement(minusMenuElement, {
12761276
onClick: handleRemove,
12771277
className: 'rejt-minus-menu',
12781278
style: minus,
1279-
'aria-label': `remove the object '${name}'`,
1279+
'aria-label': `remove the object '${String(name)}'`,
12801280
});
12811281

12821282
const list = keyList.map((key) => (
@@ -1540,8 +1540,8 @@ export class JsonValue extends Component<JsonValueProps, JsonValueState> {
15401540
onClick: handleRemove,
15411541
className: 'rejt-minus-menu',
15421542
style: style.minus,
1543-
'aria-label': `remove the property '${name}' with value '${originalValue}'${
1544-
parentPropertyName ? ` from '${parentPropertyName}'` : ''
1543+
'aria-label': `remove the property '${String(name)}' with value '${String(originalValue)}'${
1544+
String(parentPropertyName) ? ` from '${String(parentPropertyName)}'` : ''
15451545
}`,
15461546
});
15471547

‎code/addons/jest/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
"./src/manager.tsx"
7777
]
7878
},
79-
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
79+
"gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684",
8080
"storybook": {
8181
"displayName": "Jest",
8282
"icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",

‎code/addons/links/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@
9898
],
9999
"post": "./scripts/fix-preview-api-reference.ts"
100100
},
101-
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
101+
"gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684",
102102
"storybook": {
103103
"displayName": "Links",
104104
"icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",

‎code/addons/themes/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@
9191
"./src/preview.tsx"
9292
]
9393
},
94-
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
94+
"gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684",
9595
"storybook": {
9696
"displayName": "Themes",
9797
"unsupportedFrameworks": [

‎code/builders/builder-vite/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,5 +71,5 @@
7171
],
7272
"platform": "node"
7373
},
74-
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
74+
"gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684"
7575
}

‎code/builders/builder-webpack5/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,5 +108,5 @@
108108
],
109109
"platform": "node"
110110
},
111-
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
111+
"gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684"
112112
}

‎code/e2e-tests/addon-controls.spec.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { expect, test } from '@playwright/test';
22
import process from 'process';
33

4-
import { SbPage } from './util';
4+
import { SbPage, isReactSandbox } from './util';
55

66
const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
77
const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
@@ -103,4 +103,15 @@ test.describe('addon-controls', () => {
103103

104104
await expect(page).toHaveURL(/.*multiSelect\[0]:double\+\+space.*/);
105105
});
106+
107+
// We want to avoid the controls panel crashing when JSX elements are part of args table
108+
test('should show JSX elements in controls panel', async ({ page }) => {
109+
test.skip(!isReactSandbox(templateName), 'This is a React only feature');
110+
await page.goto(`${storybookUrl}?path=/story/stories-renderers-react-jsx-docgen--default`);
111+
112+
const sbPage = new SbPage(page, expect);
113+
await sbPage.waitUntilLoaded();
114+
await sbPage.viewAddonPanel('Controls');
115+
await expect(sbPage.panelContent().getByText('children').first()).toBeVisible();
116+
});
106117
});

‎code/e2e-tests/addon-docs.spec.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { expect, test } from '@playwright/test';
55
import process from 'process';
66
import { dedent } from 'ts-dedent';
77

8-
import { SbPage } from './util';
8+
import { SbPage, isReactSandbox } from './util';
99

1010
const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
1111
const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
@@ -280,4 +280,14 @@ test.describe('addon-docs', () => {
280280
'H 2 Content',
281281
]);
282282
});
283+
284+
// We want to avoid the docs page crashing when JSX elements are part of args table
285+
test('should show JSX elements in docs page', async ({ page }) => {
286+
test.skip(!isReactSandbox(templateName), 'This is a React only feature');
287+
288+
const sbPage = new SbPage(page, expect);
289+
await sbPage.navigateToStory('/stories/renderers/react/jsx-docgen', 'docs');
290+
const root = sbPage.previewRoot();
291+
await expect(root.getByText('children').first()).toBeVisible();
292+
});
283293
});

0 commit comments

Comments
 (0)