diff --git a/app/html/src/client/preview/render.js b/app/html/src/client/preview/render.js index a9d900f0b5fc..ff955aca414b 100644 --- a/app/html/src/client/preview/render.js +++ b/app/html/src/client/preview/render.js @@ -12,14 +12,14 @@ export default function renderMain({ showError, forceRender, }) { - const { html = {} } = parameters; const element = storyFn(); showMain(); if (typeof element === 'string') { rootElement.innerHTML = element; } else if (element instanceof Node) { - if (html.preventForcedRender === true && forceRender === true) { + // Don't re-mount the element if it didn't change and neither did the story + if (rootElement.firstChild === element && forceRender === true) { return; } diff --git a/examples/html-kitchen-sink/.storybook/config.js b/examples/html-kitchen-sink/.storybook/config.js index be3060856e6d..df93c95611ea 100644 --- a/examples/html-kitchen-sink/.storybook/config.js +++ b/examples/html-kitchen-sink/.storybook/config.js @@ -11,9 +11,6 @@ addParameters({ restoreScroll: true, }, }, - html: { - preventForcedRender: false, // default - }, options: { hierarchyRootSeparator: /\|/, }, diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-knobs.stories.storyshot index 7d7dc3f6f0a7..7a21a63b844a 100644 --- a/examples/html-kitchen-sink/stories/__snapshots__/addon-knobs.stories.storyshot +++ b/examples/html-kitchen-sink/stories/__snapshots__/addon-knobs.stories.storyshot @@ -47,6 +47,14 @@ exports[`Storyshots Addons|Knobs All knobs 1`] = ` `; +exports[`Storyshots Addons|Knobs CSS transitions 1`] = ` +

+ John Doe +

+`; + exports[`Storyshots Addons|Knobs DOM 1`] = `

John Doe diff --git a/examples/html-kitchen-sink/stories/addon-knobs.stories.js b/examples/html-kitchen-sink/stories/addon-knobs.stories.js index 372e509295b2..85a364b5b686 100644 --- a/examples/html-kitchen-sink/stories/addon-knobs.stories.js +++ b/examples/html-kitchen-sink/stories/addon-knobs.stories.js @@ -1,5 +1,6 @@ import { storiesOf } from '@storybook/html'; import { action } from '@storybook/addon-actions'; +import { document } from 'global'; import { array, @@ -13,6 +14,7 @@ import { number, } from '@storybook/addon-knobs'; +const cachedContainer = document.createElement('p'); storiesOf('Addons|Knobs', module) .addDecorator(withKnobs) .add('Simple', () => { @@ -24,11 +26,18 @@ storiesOf('Addons|Knobs', module) }) .add('DOM', () => { const name = text('Name', 'John Doe'); - // eslint-disable-next-line const container = document.createElement('p'); container.textContent = name; return container; }) + .add('CSS transitions', () => { + const name = text('Name', 'John Doe'); + const textColor = color('Text color', 'orangered'); + cachedContainer.textContent = name; + cachedContainer.style.transition = 'color 0.5s ease-out'; + cachedContainer.style.color = textColor; + return cachedContainer; + }) .add('All knobs', () => { const name = text('Name', 'Jane'); const stock = number('Stock', 20, {