feat(styling-library): expand types for cacheProvider (#3200)

* feat(styling-library): expand types for cacheProvider

* chore: lint fix

* fix: story

.changeset/sharp-walls-wash.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/styling-library': patch
+'@twilio-paste/core': patch
+---
+
+[Styling-library] expand the types allowed for emotion's CacheProvider. This change allows passing `container` which helps with setting styles on specific elements and shadow dom.

packages/paste-libraries/styling/src/index.tsx

@@ -1,7 +1,6 @@
 // Base styling system (emotion)
 import styled from '@emotion/styled';
 import createCache from '@emotion/cache';
-import type {Options} from '@emotion/cache';
 
 /*
  * Custom styling application (styled-system)
@@ -17,11 +16,11 @@ export type {
   EmotionLabel,
   CSSObject,
 } from '@styled-system/css';
+export type {Options as CreateCacheOptions} from '@emotion/cache';
 export {css} from './css-function';
 export {themeGet} from '@styled-system/theme-get';
 export {createShouldForwardProp, props} from '@styled-system/should-forward-prop';
 export * from 'styled-system';
-export type CreateCacheOptions = Pick<Options, 'key' | 'nonce'>;
 
 export type {StyledComponent, Interpolation} from '@emotion/styled';
 export type {SerializedStyles} from '@emotion/react';

packages/paste-theme/package.json

@@ -43,6 +43,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-helmet": "^6.1.0",
+    "react-shadow": "^20.0.0",
     "typescript": "^4.9.4"
   }
 }

packages/paste-theme/stories/cacheProvider.stories.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import {Box} from '@twilio-paste/box';
+import {Button} from '@twilio-paste/button';
+import {Input} from '@twilio-paste/input';
+import {Paragraph} from '@twilio-paste/paragraph';
+import {Select, Option} from '@twilio-paste/select';
+import {Stack} from '@twilio-paste/stack';
+import {TextArea} from '@twilio-paste/textarea';
+import root from 'react-shadow';
+
+import {ThemeProvider} from '../src/themeProvider';
+
+// eslint-disable-next-line import/no-default-export
+export default {
+  title: 'Theme/ThemeProvider/CacheProvider',
+  parameters: {
+    a11y: {
+      /*
+       * Since this story hardcodes its own theme, it doesnt inherit the theme
+       * from storybook and fails on darkmode in vrt. This is a false positive.
+       * This story is the same as the English Font Family story which passes.
+       */
+      disable: true,
+    },
+  },
+};
+
+export const CacheProviderContainer = (): React.ReactNode => {
+  const [emotionCache, setEmotionCache] = React.useState<any>(null);
+
+  function setShadowRef(ref): void {
+    if (ref && !emotionCache) {
+      const createdEmotionWithRef = {
+        container: ref,
+        key: 'shadow-dom-paste',
+      };
+      setEmotionCache(createdEmotionWithRef);
+    }
+  }
+
+  return (
+    <root.div className="shadow-dom-container">
+      <div ref={setShadowRef} />
+      {emotionCache ? (
+        <ThemeProvider theme="twilio" cacheProviderProps={emotionCache}>
+          <Box>
+            <Paragraph>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua. Nisi porta lorem mollis aliquam ut porttitor leo. Hendrerit gravida rutrum quisque
+              non. A arcu cursus vitae congue mauris rhoncus aenean vel elit. Tortor dignissim convallis aenean et
+              tortor at risus. Vestibulum lorem sed risus ultricies. Tempor nec feugiat nisl pretium fusce id. Morbi
+              tempus iaculis urna id volutpat lacus laoreet non curabitur. In ante metus dictum at. Sit amet risus
+              nullam eget felis eget nunc lobortis.
+            </Paragraph>
+            <Stack orientation="vertical" spacing="space50">
+              <Button variant="primary" onClick={() => {}}>
+                Click me
+              </Button>
+              <Input aria-label="Search" placeholder="Search options..." type="text" />
+              <Select aria-label="Options">
+                <Option value="option1">Option 1</Option>
+              </Select>
+              <TextArea aria-label="Feedback" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
+            </Stack>
+          </Box>
+        </ThemeProvider>
+      ) : null}
+    </root.div>
+  );
+};