Adding viewport width to Chromatic stories (#2980)

ktabors · LFDanLu · web-flow · commit 21cb0677a1bb · 2022-03-30T15:17:12.000-07:00
* adding viewport 320px width stories to chromatic

* lint fixes

Co-authored-by: Daniel Lu &lt;dl1644@gmail.com&gt;
diff --git a/packages/@react-spectrum/dialog/chromatic/Dialog.chromatic.tsx b/packages/@react-spectrum/dialog/chromatic/Dialog.chromatic.tsx
@@ -43,6 +43,11 @@ storiesOf('Dialog', module)
     'long content',
     () => renderLongContent({})
   )
+  .add(
+    'long content, mobile viewport',
+    () => renderLongContent({}),
+    {chromatic: {viewports: [320]}}
+  )
   .add(
     'with hero',
     () => renderHero({})
@@ -75,6 +80,11 @@ storiesOf('Dialog', module)
     'fullscreenTakeover form',
     () => renderWithForm({type: 'fullscreenTakeover'})
   )
+  .add(
+    'fullscreenTakeover form, mobile viewport',
+    () => renderWithForm({type: 'fullscreenTakeover'}),
+    {chromatic: {viewports: [320]}}
+  )
   .add(
     'three buttons',
     () => renderWithThreeButtons({})
@@ -86,8 +96,51 @@ storiesOf('Dialog', module)
   .add(
     'cleared content',
     () => renderWithDividerInContent({})
+  )
+  .add(
+    'tray',
+    () => renderTriggerProps({type: 'tray'}), {
+      chromatic: {viewports: [320, 1200]},
+      chromaticProvider: {colorSchemes: ['light'], locales: ['ar-AE'], scales: ['large'], disableAnimations: true}
+    }
+  )
+  .add(
+    'popover',
+    () => renderTriggerProps({type: 'popover'}), {
+      chromatic: {viewports: [320, 1200]},
+      chromaticProvider: {colorSchemes: ['light'], locales: ['ar-AE'], scales: ['large'], disableAnimations: true}
+    }
+  )
+  .add(
+    'mobileType fullscreen, modal',
+    () => renderTriggerProps({type: 'modal', mobileType: 'fullscreen'}), {
+      chromatic: {viewports: [320, 1200]},
+      chromaticProvider: {colorSchemes: ['light'], locales: ['ar-AE'], scales: ['large'], disableAnimations: true}
+    }
+  )
+  .add(
+    'mobileType fullscreenTakeover, modal',
+    () => renderTriggerProps({type: 'modal', mobileType: 'fullscreenTakeover'}), {
+      chromatic: {viewports: [320, 1200]},
+      chromaticProvider: {colorSchemes: ['light'], locales: ['ar-AE'], scales: ['large'], disableAnimations: true}
+    }
+  )
+  .add(
+    'mobileType: modal, popover',
+    () => renderTriggerProps({type: 'popover', mobileType: 'modal'}), {
+      chromatic: {viewports: [320, 1200]},
+      chromaticProvider: {colorSchemes: ['light'], locales: ['ar-AE'], scales: ['large'], disableAnimations: true}
+    }
+  )
+  .add(
+    'mobileType: tray, popover',
+    () => renderTriggerProps({type: 'popover', mobileType: 'tray'}), {
+      chromatic: {viewports: [320, 1200]},
+      chromaticProvider: {colorSchemes: ['light'], locales: ['ar-AE'], scales: ['large'], disableAnimations: true}
+    }
   );
 
+
 storiesOf('Dialog/Alert', module)
   .addParameters({chromaticProvider: {colorSchemes: ['light'], locales: ['en-US'], scales: ['medium'], disableAnimations: true}})
   .add(
@@ -223,6 +276,29 @@ function render({width = 'auto', isDismissable = undefined, ...props}) {
   );
 }
 
+function renderTriggerProps({width = 'auto', isDismissable = undefined, ...triggerProps}) {
+  return (
+    <div style={{display: 'flex', width, margin: '100px 0'}}>
+      <DialogTrigger isDismissable={isDismissable} defaultOpen {...triggerProps}>
+        <ActionButton>Trigger</ActionButton>
+        {(close) => (
+          <Dialog>
+            <Heading>The Heading</Heading>
+            <Header>The Header</Header>
+            <Divider />
+            <Content>{singleParagraph()}</Content>
+            {!isDismissable &&
+              <ButtonGroup>
+                <Button variant="secondary" onPress={close}>Cancel</Button>
+                <Button variant="cta" onPress={close}>Confirm</Button>
+              </ButtonGroup>}
+          </Dialog>
+        )}
+      </DialogTrigger>
+    </div>
+  );
+}
+
 function renderHero({width = 'auto', isDismissable = undefined, ...props}) {
   return (
     <div style={{display: 'flex', width, margin: '100px 0'}}>
diff --git a/packages/@react-spectrum/menu/chromatic/MenuTrigger.chromatic.tsx b/packages/@react-spectrum/menu/chromatic/MenuTrigger.chromatic.tsx
@@ -169,6 +169,13 @@ WithSections.storyName = 'with sections';
 export const Complex = TemplateWithIcons().bind({});
 Complex.storyName = 'complex items';
 
+export const ComplexMobile = TemplateWithIcons().bind({});
+ComplexMobile.storyName = 'complex items, mobile viewport';
+ComplexMobile.parameters = {
+  chromatic: {viewports: [320]},
+  chromaticProvider: {colorSchemes: ['light'], locales: ['en-US'], scales: ['large'], disableAnimations: true}
+};
+
 export const AlignEnd = Template().bind({});
 AlignEnd.storyName = 'align="end"';
 AlignEnd.args = {align: 'end'};
diff --git a/packages/@react-spectrum/menu/chromatic/MenuTriggerRTL.chromatic.tsx b/packages/@react-spectrum/menu/chromatic/MenuTriggerRTL.chromatic.tsx
@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
+import {ComplexMobile} from './MenuTrigger.chromatic';
 import {Meta} from '@storybook/react';
 import React from 'react';
 
@@ -42,3 +43,10 @@ export {
   DirectionRightEnd,
   ArabicComplex
 } from './MenuTrigger.chromatic';
+
+export const ComplexItemsMobileViewport = ComplexMobile.bind({});
+ComplexItemsMobileViewport.storyName = 'complex items, mobile viewport';
+ComplexItemsMobileViewport.parameters = {
+  chromatic: {viewports: [320]},
+  chromaticProvider: {colorSchemes: ['light'], locales: ['ar-AE'], scales: ['large'], disableAnimations: true}
+};
diff --git a/packages/@react-spectrum/numberfield/chromatic/NumberField.chromatic.tsx b/packages/@react-spectrum/numberfield/chromatic/NumberField.chromatic.tsx
@@ -113,6 +113,17 @@ const Template: Story<SpectrumNumberFieldProps> = (args) => (
   </Grid>
 );
 
+const TemplateVertical: Story<SpectrumNumberFieldProps> = (args) => (
+  <Grid autoFlow="row" gap="size-300">
+    {combinations.map(c => {
+      let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
+      if (!key) {
+        key = 'empty';
+      }
+      return <NumberField key={key} {...args} {...c} label={args['aria-label'] ? undefined : key} />;
+    })}
+  </Grid>
+);
 
 const TemplateSmall: Story<SpectrumNumberFieldProps> = (args) => (
   <Grid columns={repeat(4, '1fr')} autoFlow="row" gap="size-200">
@@ -147,6 +158,14 @@ export const PropValue = Template.bind({});
 PropValue.storyName = 'value';
 PropValue.args = {...PropDefaults.args, value: 10};
 
+export const PropValueMobileViewport = TemplateVertical.bind({});
+PropValueMobileViewport.storyName = 'value, mobile viewport';
+PropValueMobileViewport.args = {...PropDefaults.args, value: 10};
+PropValueMobileViewport.parameters = {
+  chromatic: {viewports: [320]},
+  chromaticProvider: {colorSchemes: ['light'], locales: ['en-US'], scales: ['large'], disableAnimations: true}
+};
+
 export const PropAriaLabelled = Template.bind({});
 PropAriaLabelled.storyName = 'aria-label';
 PropAriaLabelled.args = {'aria-label': 'Label'};
diff --git a/packages/@react-spectrum/picker/chromatic/Picker.chromatic.tsx b/packages/@react-spectrum/picker/chromatic/Picker.chromatic.tsx
@@ -85,7 +85,6 @@ const ComplexItemsTemplate = <T extends object>(): Story<SpectrumPickerProps<T>>
   </Picker>
 );
 
-
 export const Default = Template().bind({});
 Default.args = {label: 'Pick your favorite', isOpen: true};
 
@@ -107,3 +106,10 @@ ValidationStateValid.args = {...Default.args, validationState: 'valid'};
 
 export const ComplexItems = ComplexItemsTemplate().bind({});
 ComplexItems.args = {...Default.args};
+
+export const ComplexItemsLabelPositionSideValidationStateInvalidMobileViewport = ComplexItemsTemplate().bind({});
+ComplexItemsLabelPositionSideValidationStateInvalidMobileViewport.args = {...Default.args, labelPosition: 'side', validationState: 'invalid'};
+ComplexItemsLabelPositionSideValidationStateInvalidMobileViewport.parameters = {
+  chromatic: {viewports: [320]},
+  chromaticProvider: {colorSchemes: ['light'], locales: ['ar-AE'], scales: ['large'], disableAnimations: true}
+};
diff --git a/packages/@react-spectrum/provider/chromatic/Provider.chromatic.tsx b/packages/@react-spectrum/provider/chromatic/Provider.chromatic.tsx
@@ -29,6 +29,7 @@ import {SearchField} from '@react-spectrum/searchfield';
 import {SearchWithin} from '@react-spectrum/searchwithin';
 import {Switch} from '@react-spectrum/switch';
 import {TextField} from '@react-spectrum/textfield';
+import {useBreakpoint} from '@react-spectrum/utils';
 
 const THEME = {
   light: customTheme,
@@ -107,6 +108,75 @@ const NestedPropTemplate = (): Story<ProviderProps> => () => (
   </Provider>
 );
 
+const ResponsiveStyleTemplate = (): Story<ProviderProps> => () => (
+  <Provider>
+    <div>
+      <TextField
+        label="A text field"
+        placeholder="Something"
+        width={{base: 'size-800', S: 'size-1000', M: 'size-2000', L: 'size-3000'}} />
+    </div>
+    <Button
+      isHidden={{base: false, S: false, M: false, L: true}}
+      marginTop={{base: 'size-100', M: 'size-1000'}}
+      variant="primary" >
+      This button is hidden in large display.
+    </Button>
+  </Provider>
+);
+
+const CustomResponsivStylePropsTemplate = (): Story<ProviderProps> => () => {
+  let Breakpoint = () => {
+    let {matchedBreakpoints} = useBreakpoint();
+    let breakpoint = matchedBreakpoints[0];
+    let width = {base: 'size-1600', XS: 'size-2000', S: 'size-2400', M: 'size-3000', L: 'size-3400', XL: 'size-4600', XXL: 'size-6000'};
+    return (
+      <>
+        <Button
+          variant="primary"
+          width={width} >
+          Button with {breakpoint} breakpoint.
+        </Button>
+        <div>
+          width: {width[breakpoint]}
+        </div>
+      </>
+    );
+  };
+  return (
+    <Provider
+      breakpoints={{S: 480, M: 640, L: 1024}}
+      UNSAFE_style={{padding: 50}}>
+      <Breakpoint />
+    </Provider>
+  );
+};
+
+const BreakpointOmittedTemplate = (): Story<ProviderProps> => () => {
+  let Breakpoint = () => {
+    let {matchedBreakpoints} = useBreakpoint();
+    let breakpoint = matchedBreakpoints[0];
+    let width = {base: 'size-1600', S: 'size-2400', L: 'size-3400'};
+    return (
+      <>
+        <p>
+          button's width will be S: 'size-2400' at M viewport.
+        </p>
+        <Button
+          variant="primary"
+          width={width} >
+          Button with {breakpoint} breakpoint.
+        </Button>
+      </>
+    );
+  };
+  return (
+    <Provider UNSAFE_style={{padding: 50}}>
+      <Breakpoint />
+    </Provider>
+  );
+};
+
 export const Default = Template().bind({});
 Default.storyName = 'default';
 Default.args = {};
@@ -146,3 +216,22 @@ ReadOnly.args = {isReadOnly: true};
 export const Required = Template().bind({});
 Required.storyName = 'isRequired';
 Required.args = {isRequired: true};
+
+export const ResponsiveStyle = ResponsiveStyleTemplate().bind({});
+ResponsiveStyle.parameters = {
+  chromatic: {viewports: [320, 700, 1000, 1200, 1300]},
+  chromaticProvider: {colorSchemes: ['light'], locales: ['en-US'], scales: ['large'], disableAnimations: true}
+};
+
+export const CustomResponsivStyleProps = CustomResponsivStylePropsTemplate().bind({});
+CustomResponsivStyleProps.storyNname = 'custom responsive styleProps';
+CustomResponsivStyleProps.parameters = {
+  chromatic: {viewports: [320, 600, 1000, 1200, 1300, 1600]},
+  chromaticProvider: {colorSchemes: ['light'], locales: ['en-US'], scales: ['large'], disableAnimations: true}
+};
+
+export const BreakpointOmitted = BreakpointOmittedTemplate().bind({});
+BreakpointOmitted.parameters = {
+  chromatic: {viewports: [320, 1000, 1200]},
+  chromaticProvider: {colorSchemes: ['light'], locales: ['en-US'], scales: ['large'], disableAnimations: true}
+};
diff --git a/packages/@react-spectrum/tabs/chromatic/Tabs.chromatic.tsx b/packages/@react-spectrum/tabs/chromatic/Tabs.chromatic.tsx
@@ -79,6 +79,9 @@ const Template = <T extends object>(): Story<SpectrumTabsProps<T>> => (args) =>
 export const Default = Template().bind({});
 Default.args = {};
 
+export const DefaultMobileViewport = Template().bind({});
+DefaultMobileViewport.parameters = {chromatic: {viewports: [320]}};
+
 export const Quiet = Template().bind({});
 Quiet.args = {...Default.args, isQuiet: true};
 
