Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Future - Rename Storybook DOM root IDs #10638

Merged
merged 6 commits into from
Aug 23, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion MIGRATION.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
- [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
- [Alpha release notes](#alpha-release-notes)
- [Breaking changes](#breaking-changes)
- [Change of root html IDs](#change-of-root-html-ids)
- [No more default export from `@storybook/addons`](#no-more-default-export-from-storybookaddons)
- [Modern browser support](#modern-browser-support)
- [No more configuration for manager](#no-more-configuration-for-manager)
Expand Down Expand Up @@ -235,6 +236,10 @@ In the meantime, these migration notes are the best available documentation on t

### Breaking changes

#### Change of root html IDs

The root ID unto which storybook renders stories is renamed from `root` to `#storybook-root` to avoid conflicts with user's code.

#### No more default export from `@storybook/addons`

The default export from `@storybook/addons` has been removed. Please use the named exports instead:
Expand Down Expand Up @@ -2152,7 +2157,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,
Expand Down
2 changes: 1 addition & 1 deletion code/addons/a11y/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion code/addons/a11y/src/a11yRunner.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
22 changes: 13 additions & 9 deletions code/addons/a11y/src/components/Report/HighlightToggle.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});

Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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 }) => {
Expand Down
2 changes: 1 addition & 1 deletion code/addons/actions/src/preview/withActions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion code/addons/storyshots/storyshots-puppeteer/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion code/addons/storyshots/storyshots-puppeteer/src/axeTest.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const axeTest = (customConfig: Partial<AxeConfig> = {}) => {
...extendedConfig,
async testBody(page, testOptions) {
const {
element = '#root',
element = '#storybook-root',
exclude,
disabledRules,
options,
Expand Down
6 changes: 3 additions & 3 deletions code/cypress/helper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
});
});
Expand All @@ -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');
});
});
};
6 changes: 3 additions & 3 deletions code/cypress/support/commands.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});

Expand All @@ -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 }));
});
Expand All @@ -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 }));
});
Expand Down
2 changes: 1 addition & 1 deletion code/e2e-tests/example.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ test('Basic story test', async ({ page }) => {
await page.goto(storybookUrl);

const preview = page.frameLocator('#storybook-preview-iframe');
const root = preview.locator('#root:visible, #docs-root:visible');
const root = preview.locator('#storybook-root:visible, #storybook-docs:visible');

// Specific check for introduction story
await expect(root).toContainText('Welcome');
Expand Down
2 changes: 1 addition & 1 deletion code/e2e-tests/util.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export class SbPage {

previewRoot() {
const preview = this.previewIframe();
return preview.locator('#root:visible, #docs-root:visible');
return preview.locator('#storybook-root:visible, #storybook-docs:visible');
}

panelContent() {
Expand Down
4 changes: 2 additions & 2 deletions code/examples/standalone-preview/storybook.html
Original file line number Diff line number Diff line change
Expand Up @@ -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"></div>
<script type="module" src="./storybook.ts"></script>
<div class="sb-errordisplay sb-wrapper">
<div id="error-message" class="sb-heading"></div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/angular/src/client/angular/helpers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,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 = '';
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/ember/src/client/preview/render.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
4 changes: 1 addition & 3 deletions code/lib/builder-manager/templates/template.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@
<% if (typeof head !== 'undefined') { %> <%- head %> <% } %>

<style>
#root[hidden],
#docs-root[hidden] {
#storybook-root[hidden]{
display: none !important;
}
</style>
Expand All @@ -23,7 +22,6 @@
</head>
<body>
<div id="root"></div>
<div id="docs-root"></div>

<% if (typeof globals !== 'undefined' && Object.keys(globals).length) { %>
<script>
Expand Down
4 changes: 2 additions & 2 deletions code/lib/core-common/templates/base-preview-head.html
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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;
Expand Down
8 changes: 4 additions & 4 deletions code/lib/core-common/templates/preview.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,17 @@
<% }); %>

<style>
#root[hidden],
#docs-root[hidden] {
#storybook-root[hidden],
#storybook-docs[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"></div>

<% if (typeof globals !== 'undefined' && Object.keys(globals).length) { %>
<script>
Expand Down
4 changes: 2 additions & 2 deletions code/lib/preview-web/src/WebView.ts
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export class WebView {
}

storyRoot(): HTMLElement {
return document.getElementById('root');
return document.getElementById('storybook-root');
}

prepareForDocs() {
Expand All @@ -86,7 +86,7 @@ export class WebView {
}

docsRoot(): HTMLElement {
return document.getElementById('docs-root');
return document.getElementById('storybook-docs');
}

applyLayout(layout: Layout = 'padded') {
Expand Down
6 changes: 3 additions & 3 deletions code/lib/ui/src/components/preview/FramesRenderer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,12 +57,12 @@ export const FramesRenderer: FC<FramesRendererProps> = ({
const active = getActive(refId);

const styles = useMemo<CSSObject>(() => {
// add #root to make the selector high enough in specificity
// add #storybook-root to make the selector high enough in specificity
return {
'#root [data-is-storybook="false"]': {
'#storybook-root [data-is-storybook="false"]': {
display: 'none',
},
'#root [data-is-storybook="true"]': {
'#storybook-root [data-is-storybook="true"]': {
display: 'block',
},
};
Expand Down
2 changes: 1 addition & 1 deletion code/lib/ui/src/components/sidebar/Menu.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const Real = () => <SidebarMenu menu={fakemenu} isHighlighted />;
export const Toolbar = () => <ToolbarMenu menu={fakemenu} />;

const DoubleThemeRenderingHack = styled.div({
'#root > [data-side="left"] > &': {
'#storybook-root > [data-side="left"] > &': {
textAlign: 'right',
},
});
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/svelte/src/render.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export function renderToDOM(
) {
cleanUpPreviousStory();

const target = domElement || document.getElementById('root');
const target = domElement || document.getElementById('storybook-root');

target.innerHTML = '';

Expand Down
2 changes: 1 addition & 1 deletion code/renderers/vue/src/render.ts
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const getRoot = (domElement: Element): Instance => {
// @ts-ignore
map.set(domElement, instance);
const children = this[COMPONENT] ? [h(this[COMPONENT])] : undefined;
return h('div', { attrs: { id: 'root' } }, children);
return h('div', { attrs: { id: 'storybook-root' } }, children);
},
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import { MyComponent } from './MyComponent.component';
name="ExampleStory"
parameters={{
a11y: {
element: '#root',
element: '#storybook-root',
config: {
rules: [
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default {
export const ExampleStory: Story = {
parameters: {
a11y: {
element: '#root',
element: '#storybook-root',
config: {
rules: [
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default {
parameters: {
a11y: {
// Optional selector to inspect
element: '#root',
element: '#storybook-root',
config: {
rules: [
{
Expand Down
Loading