Make yarn splash optional

.storybook/webpack.config.js

@@ -115,7 +115,7 @@ module.exports = ({config, mode}) => {
   config.plugins.push({
     apply: (compiler) => {
       compiler.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {
-        const spawnedProcess = spawn('yarn splash', {
+        spawn('yarn splash --show-disable-tip', {
           shell: true,
           stdio: 'inherit',
         });

UNRELEASED.md

@@ -16,6 +16,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Development workflow
 
+- Enabled maintainers running `yarn dev` to hide [`yarn splash`](https://github.com/Shopify/polaris-react/tree/master/scripts/splash) reports from the console by running `DISABLE_SPLASH=1 yarn dev` ([#2372](https://github.com/Shopify/polaris-react/pull/2372))
+
 ### Dependency upgrades
 
 ### Code quality

scripts/splash/README.md

@@ -11,6 +11,8 @@ It answers the question:
 1. Edit files in `src/`, such as components 🧩 and style sheets 🎨.
 2. As you run `yarn dev`, `yarn splash` will run in the background. Keep an eye on the terminal to see the splash zone of your changes in the working directory.
 
+   💡 Tip: to disable these reports, run `DISABLE_SPLASH=1 yarn dev`
+
 💡 Tip: <kbd>command</kbd> + click a file path to open it in your text editor
 
 ## Feedback and bug reports

scripts/splash/index.tsx

@@ -4,6 +4,10 @@ import {Box, Text, Color, render} from 'ink';
 import sortBy from 'lodash/sortBy';
 import {getGitStagedFiles, getDependencies} from './treebuilder';
 
+if (process.env.DISABLE_SPLASH) {
+  process.exit(0);
+}
+
 const excludedFileNames = (fileName) =>
   !fileName.includes('test') && !fileName.includes('types');
 
@@ -193,6 +197,17 @@ const App = () => {
           </Box>
         </Color>
       </Box>
+      {process.argv.includes('--show-disable-tip') && (
+        <Box>
+          <Color dim>
+            <Box width={3}>💡</Box>
+            <Box>
+              Tip: to disable these reports, run{' '}
+              <Text bold>DISABLE_SPLASH=1 yarn dev</Text>
+            </Box>
+          </Color>
+        </Box>
+      )}
     </React.Fragment>
   );
 };