Notes are displaying from center of box.

Describe the bug Notes are displaying from center of box.

To Reproduce Steps to reproduce the behavior:

1. Create note

Expected behavior Aligned to left.

Screenshots

Code snippets Content of test.stories.js

import Vue from 'vue';
import { storiesOf } from '@storybook/vue';
import Link from '@/components/Link';
import LinkMarkdown from '@/stories/LinkMarkdown.md';

storiesOf('test', module).add(
  'Link',
  () => ({
    components: { Link },
    template: `<link :url="'test-url'" />`,
  }),
  {
    notes: { markdown: LinkMarkdown },
  }
);

Content of LinkMarkdown.md

#Also you can use markdown notes

System:

Environment Info:

  System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz
  Binaries:
    Node: 10.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.17.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.17763.1.0
  npmPackages:
    @storybook/addon-actions: ^5.1.11 => 5.1.11
    @storybook/addon-notes: ^5.1.11 => 5.1.11
    @storybook/vue: ^5.1.11 => 5.1.11

Additional context Using Chrome.

[Aaron-Pool]

@patrickteivas k. FIxed it. You were using a deprecated story loading format. Also, the vue docs preset already contained the new Parameters you were adding.

Basically, change your config to:

import Vue from 'vue';
import { configure } from '@storybook/vue';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
import { action } from '@storybook/addon-actions';

Vue.component('nuxt-link', {
  props: ['to'],
  methods: {
    log() {
      action('link target')(this.to);
    }
  },
  template: '<a href="#" @click.prevent="log()"><slot>NuxtLink</slot></a>'
});

// Remove this completely
/*
addParameters({
  docs: {
    container: DocsContainer,
    page: DocsPage
  }
});
*/

// And change this
/*
function loadStories() {
  const req = require.context('../stories', true, /\.stories\.(js|mdx)$/);
  req.keys().forEach((filename) => req(filename));
}
// configure(loadStories, module);
*/

// To this
configure(require.context('../stories', true, /\.stories\.(ts|mdx)$/), module);

You’ll theeeeennnn get the <Logo/> component is not recognized. So change Logo.stories.mdx to:

import { Story, Preview, Meta } from '@storybook/addon-docs/blocks';
import Logo from '../components/Logo';

<Meta title="Addon|Docs" />

<Story name="Logo">
  {{
    components: { Logo },
    template: '<Logo />'
  }}
</Story>

Aaaaaaaannnnnddd theeeennn you’re good 👍

[patrickteivas]

Big thanks to both of you, who helped me to set up addon-docs in my project. Created the feature request. Closing issue. #8004