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
Changes from 1 commit
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
Next Next commit
I changed #root => #storybook-root
I changed #docs-root => #storybook-docs
ndelangen committed Aug 2, 2022

Verified

This commit was signed with the committer’s verified signature.
ndelangen Norbert de Langen
commit 36702ebe0ce54d97be435cdbf98d44322b7f961b
2 changes: 1 addition & 1 deletion MIGRATION.md
Original file line number Diff line number Diff line change
@@ -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,
2 changes: 1 addition & 1 deletion code/addons/a11y/README.md
Original file line number Diff line number Diff line change
@@ -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)
2 changes: 1 addition & 1 deletion code/addons/a11y/src/a11yRunner.ts
Original file line number Diff line number Diff line change
@@ -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) {
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
@@ -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 }) => {
2 changes: 1 addition & 1 deletion code/addons/actions/src/preview/withActions.ts
Original file line number Diff line number Diff line change
@@ -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);
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 1 addition & 1 deletion code/addons/storyshots/storyshots-puppeteer/README.md
Original file line number Diff line number Diff line change
@@ -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',
2 changes: 1 addition & 1 deletion code/addons/storyshots/storyshots-puppeteer/src/axeTest.ts
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ export const axeTest = (customConfig: Partial<AxeConfig> = {}) => {
...extendedConfig,
async testBody(page, testOptions) {
const {
element = '#root',
element = '#storybook-root',
exclude,
disabledRules,
options,
6 changes: 3 additions & 3 deletions code/cypress/helper.ts
Original file line number Diff line number Diff line change
@@ -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');
});
});
};
6 changes: 3 additions & 3 deletions code/cypress/support/commands.js
Original file line number Diff line number Diff line change
@@ -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 }));
});
4 changes: 2 additions & 2 deletions code/examples/standalone-preview/storybook.html
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 1 addition & 1 deletion code/frameworks/angular/src/client/angular/helpers.ts
Original file line number Diff line number Diff line change
@@ -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 = '';
2 changes: 1 addition & 1 deletion code/frameworks/ember/src/client/preview/render.ts
Original file line number Diff line number Diff line change
@@ -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({
4 changes: 1 addition & 3 deletions code/lib/builder-manager/templates/template.ejs
Original file line number Diff line number Diff line change
@@ -10,8 +10,7 @@
<% if (typeof head !== 'undefined') { %> <%- head %> <% } %>

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

<% if (typeof globals !== 'undefined' && Object.keys(globals).length) { %>
<script>
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
@@ -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;
8 changes: 4 additions & 4 deletions code/lib/core-common/templates/preview.ejs
Original file line number Diff line number Diff line change
@@ -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>
4 changes: 2 additions & 2 deletions code/lib/preview-web/src/WebView.ts
Original file line number Diff line number Diff line change
@@ -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');
}

applyLayout(layout: Layout = 'padded') {
6 changes: 3 additions & 3 deletions code/lib/ui/src/components/preview/FramesRenderer.tsx
Original file line number Diff line number Diff line change
@@ -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',
},
};
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
@@ -34,7 +34,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',
},
});
2 changes: 1 addition & 1 deletion code/renderers/svelte/src/render.ts
Original file line number Diff line number Diff line change
@@ -25,7 +25,7 @@ export function renderToDOM(
) {
cleanUpPreviousStory();

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

target.innerHTML = '';

2 changes: 1 addition & 1 deletion code/renderers/vue/src/render.ts
Original file line number Diff line number Diff line change
@@ -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);
},
});

Original file line number Diff line number Diff line change
@@ -19,7 +19,7 @@ import { MyComponent } from './MyComponent.component';
name="ExampleStory"
parameters={{
a11y: {
element: '#root',
element: '#storybook-root',
config: {
rules: [
{
Original file line number Diff line number Diff line change
@@ -17,7 +17,7 @@ export default {
export const ExampleStory: Story = {
parameters: {
a11y: {
element: '#root',
element: '#storybook-root',
config: {
rules: [
{
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@ export default {
parameters: {
a11y: {
// Optional selector to inspect
element: '#root',
element: '#storybook-root',
config: {
rules: [
{
Original file line number Diff line number Diff line change
@@ -11,7 +11,7 @@ import { MyComponent } from './MyComponent';
parameters={{
a11y: {
// Optional selector to inspect
element: '#root',
element: '#storybook-root',
config: {
rules: [
{
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@
export const parameters = {
a11y: {
// Optional selector to inspect
element: '#root',
element: '#storybook-root',
config: {
rules: [
{
Original file line number Diff line number Diff line change
@@ -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,
Original file line number Diff line number Diff line change
@@ -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,
Original file line number Diff line number Diff line change
@@ -15,7 +15,7 @@ export default {
export const ExampleStory = {
parameters: {
a11y: {
element: '#root',
element: '#storybook-root',
config: {
rules: [
{
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@ import { MyComponent } from './MyComponent';
name="ExampleStory"
parameters={{
a11y: {
element: '#root',
element: '#storybook-root',
config: {
rules: [
{
Original file line number Diff line number Diff line change
@@ -19,7 +19,7 @@ export default {
export const ExampleStory: ComponentStoryObj<typeof MyComponent> = {
parameters: {
a11y: {
element: '#root',
element: '#storybook-root',
config: {
rules: [
{
Original file line number Diff line number Diff line change
@@ -24,7 +24,7 @@ export const ExampleStory = {
}),
parameters: {
a11y: {
element: '#root',
element: '#storybook-root',
config: {
rules: [
{
Original file line number Diff line number Diff line change
@@ -19,7 +19,7 @@ import MyComponent from './MyComponent.svelte';
name="ExampleStory"
parameters={{
a11y: {
element: '#root',
element: '#storybook-root',
config: {
rules: [
{
Original file line number Diff line number Diff line change
@@ -24,7 +24,7 @@ export const ExampleStory = {
}),
parameters: {
a11y: {
element: '#root',
element: '#storybook-root',
config: {
rules: [
{
Original file line number Diff line number Diff line change
@@ -19,7 +19,7 @@ import MyComponent from './MyComponent.vue';
name="ExampleStory"
parameters={{
a11y: {
element: '#root',
element: '#storybook-root',
config: {
rules: [
{