rename root to storybook-root and docs-root to storybook-docs-root

storybookjs · Jun 23, 2022 · 4a605a4 · 4a605a4
1 parent cc53c35
commit 4a605a4
Show file tree

Hide file tree

Showing 33 changed files with 57 additions and 53 deletions.
diff --git a/MIGRATION.md b/MIGRATION.md
@@ -1911,7 +1911,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/addons/a11y/README.md b/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/addons/a11y/src/a11yRunner.ts b/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/addons/a11y/src/components/Report/HighlightToggle.test.tsx b/addons/a11y/src/components/Report/HighlightToggle.test.tsx
@@ -28,7 +28,9 @@ const defaultProviderValue = {
 
 describe('<HighlightToggle />', () => {
   it('should render', () => {
-    const { container } = render(<HighlightToggle elementsToHighlight={[nodeResult('#root')]} />);
+    const { container } = render(
+      <HighlightToggle elementsToHighlight={[nodeResult('#storybook-root')]} />
+    );
     expect(container.firstChild).toBeTruthy();
   });
 
@@ -37,10 +39,10 @@ describe('<HighlightToggle />', () => {
       <A11yContext.Provider
         value={{
           ...defaultProviderValue,
-          highlighted: ['#root'],
+          highlighted: ['#storybook-root'],
         }}
       >
-        <HighlightToggle elementsToHighlight={[nodeResult('#root')]} />
+        <HighlightToggle elementsToHighlight={[nodeResult('#storybook-root')]} />
       </A11yContext.Provider>
     );
     const checkbox = getByRole('checkbox') as HTMLInputElement;
@@ -52,10 +54,12 @@ describe('<HighlightToggle />', () => {
       <A11yContext.Provider
         value={{
           ...defaultProviderValue,
-          highlighted: ['#root'],
+          highlighted: ['#storybook-root'],
         }}
       >
-        <HighlightToggle elementsToHighlight={[nodeResult('#root'), nodeResult('#root1')]} />
+        <HighlightToggle
+          elementsToHighlight={[nodeResult('#storybook-root'), nodeResult('#storybook-root1')]}
+        />
       </A11yContext.Provider>
     );
     const checkbox = getByRole('checkbox') as HTMLInputElement;
@@ -64,10 +68,10 @@ describe('<HighlightToggle />', () => {
 
   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/addons/actions/src/preview/withActions.ts b/addons/actions/src/preview/withActions.ts
@@ -15,7 +15,7 @@ const delegateEventSplitter = /^(\S+)\s*(.*)$/;
 const isIE = Element != null && !Element.prototype.matches;
 const matchesMethod = isIE ? 'msMatchesSelector' : 'matches';
 
-const root = document && document.getElementById('root');
+const root = document && document.getElementById('storybook-root');
 
 const hasMatchInAncestry = (element: any, selector: any): boolean => {
   if (element[matchesMethod](selector)) {

diff --git a/addons/docs/src/blocks/DocsContainer.tsx b/addons/docs/src/blocks/DocsContainer.tsx
@@ -76,7 +76,7 @@ export const DocsContainer: FunctionComponent<DocsContainerProps> = ({ context,
         let scrollTarget = element;
         if (allStories && allStories[0] === element) {
           // Include content above first story
-          scrollTarget = document.getElementById('docs-root');
+          scrollTarget = document.getElementById('storybook-docs-root');
         }
         // Introducing a delay to ensure scrolling works when it's a full refresh.
         setTimeout(() => {

diff --git a/addons/storyshots/storyshots-core/src/frameworks/riot/renderTree.ts b/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/addons/storyshots/storyshots-puppeteer/README.md b/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/addons/storyshots/storyshots-puppeteer/src/axeTest.ts b/addons/storyshots/storyshots-puppeteer/src/axeTest.ts
@@ -10,7 +10,7 @@ export const axeTest = (customConfig: Partial<AxeConfig> = {}) => {
     ...extendedConfig,
     async testBody(page, testOptions) {
       const {
-        element = '#root',
+        element = '#storybook-root',
         exclude,
         disabledRules,
         options,

diff --git a/cypress/helper.ts b/cypress/helper.ts
@@ -20,7 +20,7 @@ export const visit = (route = '') => {
       expect(element).not.null;
 
       if (element !== null) {
-        expect(element.querySelector('#root > *')).not.null;
+        expect(element.querySelector('#storybook-root > *')).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/cypress/support/commands.js b/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-root', { 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-root', { log: false })
     .should('not.be.empty')
     .then((storyRoot) => cy.wrap(storyRoot, { log: false }));
 });

diff --git a/docs/snippets/angular/storybook-addon-a11y-story-config.mdx.mdx b/docs/snippets/angular/storybook-addon-a11y-story-config.mdx.mdx
@@ -15,7 +15,7 @@ export const Template = () => ({});
   name="ExampleStory"
   parameters={{
     a11y: {
-      element: '#root',
+      element: '#storybook-root',
       config: {
         rules: [
           {

diff --git a/docs/snippets/angular/storybook-addon-a11y-story-config.ts.mdx b/docs/snippets/angular/storybook-addon-a11y-story-config.ts.mdx
@@ -19,7 +19,7 @@ const Template: Story = () => ({});
 export const ExampleStory = Template.bind({});
 ExampleStory.parameters = {
   a11y: {
-    element: '#root',
+    element: '#storybook-root',
     config: {
       rules: [
         {

diff --git a/docs/snippets/common/storybook-addon-a11y-component-config.js.mdx b/docs/snippets/common/storybook-addon-a11y-component-config.js.mdx
@@ -13,7 +13,7 @@ export default {
   parameters: {
     a11y: {
       // Optional selector to inspect
-      element: '#root',
+      element: '#storybook-root',
       config: {
         rules: [
           {

diff --git a/docs/snippets/common/storybook-addon-a11y-component-config.mdx.mdx b/docs/snippets/common/storybook-addon-a11y-component-config.mdx.mdx
@@ -11,7 +11,7 @@ import { MyComponent } from './MyComponent';
   parameters={{
     a11y: {
       // Optional selector to inspect
-      element: '#root',
+      element: '#storybook-root',
       config: {
         rules: [
           {

diff --git a/docs/snippets/common/storybook-addon-a11y-global-config.js.mdx b/docs/snippets/common/storybook-addon-a11y-global-config.js.mdx
@@ -4,7 +4,7 @@
 export const parameters = {
   a11y: {
     // Optional selector to inspect
-    element: '#root',
+    element: '#storybook-root',
     config: {
       rules: [
         {

diff --git a/docs/snippets/common/storybook-test-runner-a11y-config.js.mdx b/docs/snippets/common/storybook-test-runner-a11y-config.js.mdx
@@ -12,7 +12,7 @@ module.exports = {
     await injectAxe(page);
   },
   async postRender(page) {
-    await checkA11y(page, '#root', {
+    await checkA11y(page, '#storybook-root', {
       detailedReport: true,
       detailedReportOptions: {
         html: true,

diff --git a/docs/snippets/common/storybook-test-runner-a11y-config.ts.mdx b/docs/snippets/common/storybook-test-runner-a11y-config.ts.mdx
@@ -14,7 +14,7 @@ const a11yConfig: TestRunnerConfig = {
     await injectAxe(page);
   },
   async postRender(page) {
-    await checkA11y(page, '#root', {
+    await checkA11y(page, '#storybook-root', {
       detailedReport: true,
       detailedReportOptions: {
         html: true,

diff --git a/docs/snippets/react/storybook-addon-a11y-story-config.js.mdx b/docs/snippets/react/storybook-addon-a11y-story-config.js.mdx
@@ -19,7 +19,7 @@ const Template = () => <MyComponent />;
 export const ExampleStory = Template.bind({});
 ExampleStory.parameters = {
   a11y: {
-    element: '#root',
+    element: '#storybook-root',
     config: {
       rules: [
         {

diff --git a/docs/snippets/react/storybook-addon-a11y-story-config.mdx.mdx b/docs/snippets/react/storybook-addon-a11y-story-config.mdx.mdx
@@ -15,7 +15,7 @@ export const Template = () => <MyComponent />;
   name="ExampleStory"
   parameters={{
     a11y: {
-      element: '#root',
+      element: '#storybook-root',
       config: {
         rules: [
           {

diff --git a/docs/snippets/react/storybook-addon-a11y-story-config.ts.mdx b/docs/snippets/react/storybook-addon-a11y-story-config.ts.mdx
@@ -21,7 +21,7 @@ const Template: ComponentStory<typeof MyComponent> = () => <MyComponent />;
 export const ExampleStory = Template.bind({});
 ExampleStory.parameters = {
   a11y: {
-    element: '#root',
+    element: '#storybook-root',
     config: {
       rules: [
         {

diff --git a/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx b/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx
@@ -17,7 +17,7 @@ const Template = () => ({ Component: MyComponent });
 export const ExampleStory = Template.bind({});
 ExampleStory.parameters = {
   a11y: {
-    element: '#root',
+    element: '#storybook-root',
     config: {
       rules: [
         {

diff --git a/docs/snippets/svelte/storybook-addon-a11y-story-config.mdx.mdx b/docs/snippets/svelte/storybook-addon-a11y-story-config.mdx.mdx
@@ -15,7 +15,7 @@ export const Template = () => ({ Component: MyComponent });
   name="ExampleStory"
   parameters={{
     a11y: {
-      element: '#root',
+      element: '#storybook-root',
       config: {
         rules: [
           {

diff --git a/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx b/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx
@@ -20,7 +20,7 @@ const Template = () => ({
 export const ExampleStory = Template.bind({});
 ExampleStory.parameters = {
   a11y: {
-    element: '#root',
+    element: '#storybook-root',
     config: {
       rules: [
         {

diff --git a/docs/snippets/vue/storybook-addon-a11y-story-config.mdx.mdx b/docs/snippets/vue/storybook-addon-a11y-story-config.mdx.mdx
@@ -18,7 +18,7 @@ export const Template = () => ({
   name="ExampleStory"
   parameters={{
     a11y: {
-      element: '#root',
+      element: '#storybook-root',
       config: {
         rules: [
           {

diff --git a/examples/standalone-preview/storybook.html b/examples/standalone-preview/storybook.html
@@ -7,8 +7,8 @@
     <title></title>
   </head>
   <body>
-    <div id="root"></div>
-    <div id="docs-root"></div>
+    <div id="storybook-root"></div>
+    <div id="storybook-docs-root"></div>
     <script type="module" src="./storybook.ts"></script>
     <div class="sb-errordisplay sb-wrapper">
       <div id="error-message" class="sb-heading"></div>

diff --git a/frameworks/angular/src/client/preview/angular/helpers.ts b/frameworks/angular/src/client/preview/angular/helpers.ts
@@ -169,7 +169,7 @@ const initModule = (storyFn: PartialStoryFn<AngularFramework>) => {
   );
 };
 
-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/frameworks/ember/src/client/preview/render.ts b/frameworks/ember/src/client/preview/render.ts
@@ -7,7 +7,7 @@ const { window: globalWindow, document } = global;
 
 declare let Ember: any;
 
-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/lib/core-common/templates/base-preview-head.html b/lib/core-common/templates/base-preview-head.html
@@ -2,7 +2,7 @@
 
 <style>
   /* While we aren't showing the main block yet, but still preparing, we want everything the user
-     has rendered, which may or may not be in #root, to be display none */
+     has rendered, which may or may not be in #storybook-root, to be display none */
   .sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) {
     display: none;
   }
@@ -26,7 +26,7 @@
     min-height: 100vh;
   }
 
-  .sb-show-main.sb-main-centered #root {
+  .sb-show-main.sb-main-centered #storybook-root {
     box-sizing: border-box;
     margin: auto;
     padding: 1rem;

diff --git a/lib/core-common/templates/index.ejs b/lib/core-common/templates/index.ejs
@@ -16,17 +16,17 @@
     <% }); %>
 
     <style>
-      #root[hidden],
-      #docs-root[hidden] {
+      #storybook-root[hidden],
+      #storybook-docs-root[hidden] {
         display: none !important;
       }
     </style>
   </head>
   <body>
     <% if (typeof bodyHtmlSnippet !== 'undefined') { %> <%= bodyHtmlSnippet %> <% } %>
 
-    <div id="root"></div>
-    <div id="docs-root"></div>
+    <div id="storybook-root"></div>
+    <div id="storybook-docs-root"></div>
 
     <% if (typeof globals !== 'undefined' && Object.keys(globals).length) { %>
     <script>

diff --git a/lib/preview-web/src/WebView.ts b/lib/preview-web/src/WebView.ts
@@ -75,7 +75,7 @@ export class WebView {
   }
 
   storyRoot(): HTMLElement {
-    return document.getElementById('root');
+    return document.getElementById('storybook-root');
   }
 
   prepareForDocs() {
@@ -86,7 +86,7 @@ export class WebView {
   }
 
   docsRoot(): HTMLElement {
-    return document.getElementById('docs-root');
+    return document.getElementById('storybook-docs-root');
   }
 
   applyLayout(layout: Layout = 'padded') {