Merge branch 'master' into test-display-safety-net

.github/stale.yml

@@ -10,6 +10,7 @@ exemptLabels:
   - 'do not merge'
   - 'needs review'
   - 'high priority'
+  - dependencies:update
 
 # Label to use when marking an issue as stale
 staleLabel: inactive

addons/storysource/src/StoryPanel.js

@@ -8,6 +8,15 @@ import { EVENT_ID } from './';
 
 registerLanguage('jsx', jsx);
 
+const styles = {
+  selections: {
+    backgroundColor: 'rgba(255, 242, 60, 0.2)',
+  },
+  panel: {
+    width: '100%',
+  },
+};
+
 export default class StoryPanel extends Component {
   constructor(props) {
     super(props);
@@ -23,9 +32,20 @@ export default class StoryPanel extends Component {
       });
     });
 
+    this.setSelectedStoryRef = this.setSelectedStoryRef.bind(this);
     this.lineRenderer = this.lineRenderer.bind(this);
   }
 
+  componentDidUpdate() {
+    if (this.selectedStoryRef) {
+      this.selectedStoryRef.scrollIntoView();
+    }
+  }
+
+  setSelectedStoryRef(ref) {
+    this.selectedStoryRef = ref;
+  }
+
   createPart(rows, stylesheet, useInlineStyles) {
     return rows.map((node, i) =>
       createElement({
@@ -51,7 +71,9 @@ export default class StoryPanel extends Component {
       return (
         <span>
           {start}
-          <div style={{ backgroundColor: 'rgba(255, 242, 60, 0.2)' }}>{selected}</div>
+          <div ref={this.setSelectedStoryRef} style={styles.selections}>
+            {selected}
+          </div>
           {end}
         </span>
       );
@@ -67,7 +89,7 @@ export default class StoryPanel extends Component {
         showLineNumbers="true"
         style={darcula}
         renderer={this.lineRenderer}
-        customStyle={{ width: '100%' }}
+        customStyle={styles.panel}
       >
         {this.state.source}
       </SyntaxHighlighter>

docs/src/pages/configurations/default-config/index.md

@@ -56,6 +56,11 @@ import './styles.css';
 
 > **Note:** this is plain CSS only. If you need a preprocessor like SASS, you need to [customize the webpack config](/configurations/custom-webpack-config/).
 
+> **Warning:** storybooks for projects that use Angular CLI cannot import CSS by default. They must either [customize the webpack config](/configurations/custom-webpack-config/), or use the inline loader syntax:
+> ```js
+> import '!style-loader!css-loader!./styles.css';
+> ```
+
 ### Image and Static File Support
 
 You can also import images and media files directly via JavaScript.

integration/examples.test.js

@@ -23,18 +23,21 @@ const examples = [
   {
     name: 'cra-kitchen-sink',
     storybookUrl: pathToCraKitchenSink,
+    storySelector: '#root *',
   },
   {
     name: 'vue-kitchen-sink',
     storybookUrl: pathToVueKitchenSink,
+    storySelector: '#root *',
   },
   {
     name: 'angular-cli',
     storybookUrl: pathToAngularKitchenSink,
+    storySelector: 'storybook-dynamic-app-root *',
   },
 ];
 
-examples.forEach(({ name, storybookUrl }) => {
+examples.forEach(({ name, storybookUrl, storySelector }) => {
   let browser = puppeteer.launch();
   let page;
 
@@ -50,6 +53,8 @@ examples.forEach(({ name, storybookUrl }) => {
 
     it(`Take screenshots for '${name}'`, async () => {
       await page.goto(`file://${storybookUrl}`);
+      const iframe = page.mainFrame().childFrames()[0];
+      await iframe.waitFor(storySelector);
       const screenshot = await page.screenshot({ fullPage: true });
       expect(screenshot).toMatchImageSnapshot({
         failureThreshold: 0.04, // 4% threshold,