Chromatic story various fixes (#937)

Stabilize stories that didn't give us useful results or had errors
adobe · Aug 28, 2020 · aa897e9 · aa897e9
1 parent a0629e3
commit aa897e9
Show file tree

Hide file tree

Showing 8 changed files with 13 additions and 8 deletions.
diff --git a/.chromatic/config.js b/.chromatic/config.js
@@ -1,7 +1,6 @@
 import 'storybook-chromatic';
 import {configure, addDecorator, addParameters} from '@storybook/react';
 import {configureActions} from '@storybook/addon-actions';
-import isChromatic from 'storybook-chromatic/isChromatic';
 import React from 'react';
 import {VerticalCenter} from './layout';
 import { withA11y } from '@storybook/addon-a11y';

diff --git a/.chromatic/custom-addons/chromatic/chromatic.css b/.chromatic/custom-addons/chromatic/chromatic.css
diff --git a/.chromatic/custom-addons/chromatic/index.js b/.chromatic/custom-addons/chromatic/index.js
@@ -15,12 +15,18 @@ export const withChromaticProvider = makeDecorator({
     } else {
       selectedLocales = options.locales ? locales.map(l => l.value).slice(1) : ['en-US', 'ar-AE'];
     }
-    let height = options.height;
+    let height;
+    let minHeight;
+    if(isNaN(options.height)) {
+      minHeight = 1000;
+    } else {
+      height = options.height;
+    }
 
     // do not add a top level provider, each provider variant needs to be independent so that we don't have RTL/LTR styles that interfere with each other
     return (
       <DisableAnimations disableAnimations={options.disableAnimations}>
-        <div style={{display: 'flex', flexDirection: 'column', height}}>
+        <div style={{display: 'flex', flexDirection: 'column', height, minHeight}}>
             {(options.colorSchemes || Object.keys(themes)).map(colorScheme =>
               (options.scales || Object.keys(scales)).map(scale =>
                 (colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale =>

diff --git a/packages/@react-spectrum/button/chromatic/ActionButton.chromatic.tsx b/packages/@react-spectrum/button/chromatic/ActionButton.chromatic.tsx
@@ -44,7 +44,7 @@ storiesOf('Button/ActionButton', module)
         </ActionButton>
         <ActionButton isQuiet>
           <Add />
-          Quiet
+          <Text>Quiet</Text>
         </ActionButton>
         <ActionButton isDisabled>
           <Text>Disabled</Text>

diff --git a/packages/@react-spectrum/dialog/chromatic/Dialog.chromatic.tsx b/packages/@react-spectrum/dialog/chromatic/Dialog.chromatic.tsx
@@ -89,6 +89,7 @@ storiesOf('Dialog', module)
   );
 
 storiesOf('Dialog/Alert', module)
+  .addParameters({chromaticProvider: {colorSchemes: ['light'], locales: ['en-US'], scales: ['medium'], disableAnimations: true}})
   .add(
     'destructive',
     () => renderAlert({

diff --git a/packages/@react-spectrum/searchfield/chromatic/SearchField.chromatic.js b/packages/@react-spectrum/searchfield/chromatic/SearchField.chromatic.js
@@ -46,7 +46,7 @@ storiesOf('SearchField', module)
     {info}
   )
   .add('custom width',
-    () => render({defaultValue: 'React', width: 300})
+    () => render({defaultValue: 'React', width: 275})
   );
 
 function renderSearchLandmark(child) {

diff --git a/packages/@react-spectrum/textfield/chromatic/TextArea.chromatic.js b/packages/@react-spectrum/textfield/chromatic/TextArea.chromatic.js
@@ -78,7 +78,7 @@ storiesOf('TextArea', module)
     () => render({label: null, 'aria-label': 'Street address'}, false)
   )
   .add('custom width',
-    () => render({icon: <Info />, validationState: 'invalid', width: '300px'})
+    () => render({icon: <Info />, validationState: 'invalid', width: 275})
   );
 
 // allow some stories where disabled styles probably won't affect anything to turn that off, mostly to reduce clutter

diff --git a/packages/@react-spectrum/textfield/chromatic/Textfield.chromatic.js b/packages/@react-spectrum/textfield/chromatic/Textfield.chromatic.js
@@ -78,7 +78,7 @@ storiesOf('Textfield', module)
     () => render({label: null, 'aria-label': 'Street address'}, false)
   )
   .add('custom width',
-    () => render({icon: <Info />, validationState: 'invalid', width: '300px'})
+    () => render({icon: <Info />, validationState: 'invalid', width: 275})
   );
 
 // allow some stories where disabled styles probably won't affect anything to turn that off, mostly to reduce clutter