AP-1222 Add option to disable Modal animations

[justinanastos]

Contributes to issue https://apollographql.atlassian.net/browse/AP-1222

The context implementation is inspired by Kent C. Dodds's "Using Context Effectively" blog post. I suggest you read it!

---

Problem

We use framer motion to animate our Modal component. This looks awesome! Unfortunately, Chromatic can't automatically disable JavaScript based animations (see the docs https://docs.chromaticqa.com/animations); this can lead to Chromatic snapshots being taken mid-animation, causing unacceptable flake in our visual tests. Even worse, this behavior is non-deterministic, so if we take a snapshot on master and that snapshot is taken mid-animation, that change will be auto-accepted and that will become the new baseline. See this example: https://www.chromaticqa.com/snapshot?appId=5a77a6d38a9e3c002045d20d&id=5dd5a7093b1d9300209972b2

Solution

Per @cheapsteak 's suggestion, create an optional SpaceKitProvider that accepts props to disable animations across all space kit components. We can wrap our application with this or use it as a Storybook decorator to wrap it around all our stories.

// storybook/config.js
import { addDecorator } from '@storybook/react';
import isChromatic from 'storybook-chromatic/isChromatic';
import { SpaceKitProvider } from '@apollo/space-kit/SpaceKitProvider';
import React from 'react';

addDecorator((story) => (
  <SpaceKitProvider disableAnimations={isChromatic()}>
    {story()}
  </SpaceKitProvider>
));

This will prevent us from having to add isChromatic to our exported components (great catch on this @trevorblades !), and will prevent us from having to remember to conditionally disable animations in our stories or components if we're rendering inside Chromatic.

I've tested this in AGM; it works as expected 😃

[justinanastos]

@jgzuke I propose we use this solution for LoadingSpinner as well! #141

[cheapsteak]

Love the considerate ergonomics!

What do you think about package-wide setting? Would be convenient if we could set this once, either via something like

spaceKitSettings.disableAnimations = true;
// similar to _.templateSettings

or

<SpaceKitProvider disableAnimations={true}>
  ...
</SpaceKitProvider>

[justinanastos]

@cheapsteak I love

Love the considerate ergonomics!

What do you think about package-wide setting? Would be convenient if we could set this once, either via something like

spaceKitSettings.disableAnimations = true;
// similar to _.templateSettings

or

<SpaceKitProvider disableAnimations={true}>
  ...
</SpaceKitProvider>

Those are great ideas! Let me take a look at how quickly I can create SpaceKitProvider.

[cheapsteak]

very nice!

[apollo-bot2]

🚀 PR was released in v2.18.0 🚀