From 36702ebe0ce54d97be435cdbf98d44322b7f961b Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 2 Aug 2022 11:18:33 +0200 Subject: [PATCH 1/3] I changed #root => #storybook-root I changed #docs-root => #storybook-docs --- MIGRATION.md | 2 +- code/addons/a11y/README.md | 2 +- code/addons/a11y/src/a11yRunner.ts | 2 +- .../Report/HighlightToggle.test.tsx | 22 +++++++++++-------- .../addons/actions/src/preview/withActions.ts | 2 +- .../src/frameworks/riot/renderTree.ts | 2 +- .../storyshots/storyshots-puppeteer/README.md | 2 +- .../storyshots-puppeteer/src/axeTest.ts | 2 +- code/cypress/helper.ts | 6 ++--- code/cypress/support/commands.js | 6 ++--- .../standalone-preview/storybook.html | 4 ++-- .../client/angular-beta/RendererFactory.ts | 6 ++--- .../angular/src/client/angular/helpers.ts | 2 +- .../ember/src/client/preview/render.ts | 2 +- .../builder-manager/templates/template.ejs | 4 +--- .../templates/base-preview-head.html | 4 ++-- code/lib/core-common/templates/preview.ejs | 8 +++---- code/lib/preview-web/src/WebView.ts | 4 ++-- .../src/components/preview/FramesRenderer.tsx | 6 ++--- .../src/components/sidebar/Menu.stories.tsx | 2 +- code/renderers/svelte/src/render.ts | 2 +- code/renderers/vue/src/render.ts | 2 +- .../storybook-addon-a11y-story-config.mdx.mdx | 2 +- .../storybook-addon-a11y-story-config.ts.mdx | 2 +- ...orybook-addon-a11y-component-config.js.mdx | 2 +- ...rybook-addon-a11y-component-config.mdx.mdx | 2 +- .../storybook-addon-a11y-global-config.js.mdx | 2 +- .../storybook-test-runner-a11y-config.js.mdx | 2 +- .../storybook-test-runner-a11y-config.ts.mdx | 2 +- .../storybook-addon-a11y-story-config.js.mdx | 2 +- .../storybook-addon-a11y-story-config.mdx.mdx | 2 +- .../storybook-addon-a11y-story-config.ts.mdx | 2 +- .../storybook-addon-a11y-story-config.js.mdx | 2 +- .../storybook-addon-a11y-story-config.mdx.mdx | 2 +- .../storybook-addon-a11y-story-config.js.mdx | 2 +- .../storybook-addon-a11y-story-config.mdx.mdx | 2 +- 36 files changed, 62 insertions(+), 60 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 1c8684f7ba2f..fd00e0823256 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1916,7 +1916,7 @@ To configure a11y now, you have to specify configuration using story parameters, ```js export const parameters = { a11y: { - element: '#root', + element: "#storybook-root", config: {}, options: {}, manual: true, diff --git a/code/addons/a11y/README.md b/code/addons/a11y/README.md index 699c3ec15f74..a5c0375ba85f 100755 --- a/code/addons/a11y/README.md +++ b/code/addons/a11y/README.md @@ -175,7 +175,7 @@ export default { parameters: { a11y: { // optional selector which element to inspect - element: '#root', + element: '#storybook-root', // axe-core configurationOptions (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#parameters-1) config: {}, // axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter) diff --git a/code/addons/a11y/src/a11yRunner.ts b/code/addons/a11y/src/a11yRunner.ts index 1f4fd7ddeab6..1d6bd8b2f148 100644 --- a/code/addons/a11y/src/a11yRunner.ts +++ b/code/addons/a11y/src/a11yRunner.ts @@ -36,7 +36,7 @@ const run = async (storyId: string) => { channel.emit(EVENTS.RUNNING); const axe = (await import('axe-core')).default; - const { element = '#root', config, options = {} } = input; + const { element = '#storybook-root', config, options = {} } = input; const htmlElement = document.querySelector(element); axe.reset(); if (config) { diff --git a/code/addons/a11y/src/components/Report/HighlightToggle.test.tsx b/code/addons/a11y/src/components/Report/HighlightToggle.test.tsx index cbfc33297db8..e488c33bc1b4 100644 --- a/code/addons/a11y/src/components/Report/HighlightToggle.test.tsx +++ b/code/addons/a11y/src/components/Report/HighlightToggle.test.tsx @@ -28,7 +28,9 @@ const defaultProviderValue = { describe('', () => { it('should render', () => { - const { container } = render(); + const { container } = render( + + ); expect(container.firstChild).toBeTruthy(); }); @@ -37,10 +39,10 @@ describe('', () => { - + ); const checkbox = getByRole('checkbox') as HTMLInputElement; @@ -52,10 +54,12 @@ describe('', () => { - + ); const checkbox = getByRole('checkbox') as HTMLInputElement; @@ -64,10 +68,10 @@ describe('', () => { describe('toggleHighlight', () => { it.each` - highlighted | elementsToHighlight | expected - ${[]} | ${['#root']} | ${true} - ${['#root']} | ${['#root']} | ${false} - ${['#root']} | ${['#root', '#root1']} | ${true} + highlighted | elementsToHighlight | expected + ${[]} | ${['#storybook-root']} | ${true} + ${['#storybook-root']} | ${['#storybook-root']} | ${false} + ${['#storybook-root']} | ${['#storybook-root', '#storybook-root1']} | ${true} `( 'should be triggered with $expected when highlighted is $highlighted and elementsToHighlight is $elementsToHighlight', ({ highlighted, elementsToHighlight, expected }) => { diff --git a/code/addons/actions/src/preview/withActions.ts b/code/addons/actions/src/preview/withActions.ts index c6e2c265a911..5aa7b60a3f28 100644 --- a/code/addons/actions/src/preview/withActions.ts +++ b/code/addons/actions/src/preview/withActions.ts @@ -43,7 +43,7 @@ const createHandlers = (actionsFn: (...arg: any[]) => object, ...handles: any[]) const applyEventHandlers = deprecate( (actionsFn: any, ...handles: any[]) => { - const root = document && document.getElementById('root'); + const root = document && document.getElementById('storybook-root'); useEffect(() => { if (root != null) { const handlers = createHandlers(actionsFn, ...handles); diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/riot/renderTree.ts b/code/addons/storyshots/storyshots-core/src/frameworks/riot/renderTree.ts index e44e181e241c..c4f1ce24419d 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/riot/renderTree.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/riot/renderTree.ts @@ -6,7 +6,7 @@ const riotForStorybook = jest.requireActual('@storybook/riot'); function bootstrapADocumentAndReturnANode() { const rootElement = document.createElement('div'); - rootElement.id = 'root'; + rootElement.id = 'storybook-root'; document.body = document.createElement('body'); document.body.appendChild(rootElement); return rootElement; diff --git a/code/addons/storyshots/storyshots-puppeteer/README.md b/code/addons/storyshots/storyshots-puppeteer/README.md index b9e4567ab045..d2b95602d6db 100644 --- a/code/addons/storyshots/storyshots-puppeteer/README.md +++ b/code/addons/storyshots/storyshots-puppeteer/README.md @@ -333,7 +333,7 @@ To create a screenshot of just a single element (with its children), rather than import initStoryshots from '@storybook/addon-storyshots'; import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer'; -const beforeScreenshot = (page) => page.$('#root > *'); +const beforeScreenshot = (page) => page.$('#storybook-root > *'); initStoryshots({ suite: 'Image storyshots', diff --git a/code/addons/storyshots/storyshots-puppeteer/src/axeTest.ts b/code/addons/storyshots/storyshots-puppeteer/src/axeTest.ts index 21548a4a0e0a..987a72da8e9a 100644 --- a/code/addons/storyshots/storyshots-puppeteer/src/axeTest.ts +++ b/code/addons/storyshots/storyshots-puppeteer/src/axeTest.ts @@ -10,7 +10,7 @@ export const axeTest = (customConfig: Partial = {}) => { ...extendedConfig, async testBody(page, testOptions) { const { - element = '#root', + element = '#storybook-root', exclude, disabledRules, options, diff --git a/code/cypress/helper.ts b/code/cypress/helper.ts index 2622eb0eb1f0..9da3864a6cb8 100644 --- a/code/cypress/helper.ts +++ b/code/cypress/helper.ts @@ -20,7 +20,7 @@ export const visit = (route = '') => { expect(element).not.null; if (element !== null) { - expect(element.querySelector('#root > *, #docs-root > *')).not.null; + expect(element.querySelector('#storybook-root > *, #storybook-docs > *')).not.null; } }); }); @@ -41,11 +41,11 @@ export const getStorybookPreview = () => { expect(element).not.null; if (element !== null) { - expect(element.querySelector('#root > *')).not.null; + expect(element.querySelector('#storybook-root > *')).not.null; } }) .then(() => { - return cy.wrap(element).get('#root'); + return cy.wrap(element).get('#storybook-root'); }); }); }; diff --git a/code/cypress/support/commands.js b/code/cypress/support/commands.js index c96cb7e853ea..376013794398 100644 --- a/code/cypress/support/commands.js +++ b/code/cypress/support/commands.js @@ -46,7 +46,7 @@ Cypress.Commands.add('visitStorybook', () => { .its('0.contentDocument.body', { log: false }) .should('not.be.empty') .then((body) => cy.wrap(body, { log: false })) - .find('#docs-root', { log: false }) + .find('#storybook-docs', { log: false }) .should('not.be.empty'); }); @@ -57,7 +57,7 @@ Cypress.Commands.add('getStoryElement', {}, () => { .its('0.contentDocument.body', { log: false }) .should('not.be.empty') .then((body) => cy.wrap(body, { log: false })) - .find('#root', { log: false }) + .find('#storybook-root', { log: false }) .should('not.be.empty') .then((storyRoot) => cy.wrap(storyRoot, { log: false })); }); @@ -69,7 +69,7 @@ Cypress.Commands.add('getDocsElement', {}, () => { .its('0.contentDocument.body', { log: false }) .should('not.be.empty') .then((body) => cy.wrap(body, { log: false })) - .find('#docs-root', { log: false }) + .find('#storybook-docs', { log: false }) .should('not.be.empty') .then((storyRoot) => cy.wrap(storyRoot, { log: false })); }); diff --git a/code/examples/standalone-preview/storybook.html b/code/examples/standalone-preview/storybook.html index ac1f9f1fe2cb..8982f5f79f68 100644 --- a/code/examples/standalone-preview/storybook.html +++ b/code/examples/standalone-preview/storybook.html @@ -7,8 +7,8 @@ -
-
+
+
diff --git a/code/frameworks/angular/src/client/angular-beta/RendererFactory.ts b/code/frameworks/angular/src/client/angular-beta/RendererFactory.ts index d781233c6364..888024d83614 100644 --- a/code/frameworks/angular/src/client/angular-beta/RendererFactory.ts +++ b/code/frameworks/angular/src/client/angular-beta/RendererFactory.ts @@ -44,17 +44,17 @@ export class RendererFactory { } export const getRenderType = (targetDOMNode: HTMLElement): RenderType => { - return targetDOMNode.id === 'root' ? 'canvas' : 'docs'; + return targetDOMNode.id === 'storybook-root' ? 'canvas' : 'docs'; }; export function clearRootHTMLElement(renderType: RenderType) { switch (renderType) { case 'canvas': - global.document.getElementById('docs-root').innerHTML = ''; + global.document.getElementById('storybook-docs').innerHTML = ''; break; case 'docs': - global.document.getElementById('root').innerHTML = ''; + global.document.getElementById('storybook-root').innerHTML = ''; break; default: break; diff --git a/code/frameworks/angular/src/client/angular/helpers.ts b/code/frameworks/angular/src/client/angular/helpers.ts index 21ca577b7fc8..928ed7cec319 100644 --- a/code/frameworks/angular/src/client/angular/helpers.ts +++ b/code/frameworks/angular/src/client/angular/helpers.ts @@ -168,7 +168,7 @@ const initModule = (storyFn: PartialStoryFn) => { ); }; -const staticRoot = document.getElementById('root'); +const staticRoot = document.getElementById('storybook-root'); const insertDynamicRoot = () => { const app = document.createElement('storybook-dynamic-app-root'); staticRoot.innerHTML = ''; diff --git a/code/frameworks/ember/src/client/preview/render.ts b/code/frameworks/ember/src/client/preview/render.ts index 63b5a8936506..7c3485aa502a 100644 --- a/code/frameworks/ember/src/client/preview/render.ts +++ b/code/frameworks/ember/src/client/preview/render.ts @@ -7,7 +7,7 @@ import { OptionsArgs, EmberFramework } from './types'; const { window: globalWindow, document } = global; -const rootEl = document.getElementById('root'); +const rootEl = document.getElementById('storybook-root'); const config = globalWindow.require(`${globalWindow.STORYBOOK_NAME}/config/environment`); const app = globalWindow.require(`${globalWindow.STORYBOOK_NAME}/app`).default.create({ diff --git a/code/lib/builder-manager/templates/template.ejs b/code/lib/builder-manager/templates/template.ejs index 046d109199ee..d59625d2d62b 100644 --- a/code/lib/builder-manager/templates/template.ejs +++ b/code/lib/builder-manager/templates/template.ejs @@ -10,8 +10,7 @@ <% if (typeof head !== 'undefined') { %> <%- head %> <% } %> @@ -23,7 +22,6 @@
-
<% if (typeof globals !== 'undefined' && Object.keys(globals).length) { %>