From d9f96d7d8b72f3d3fa8f66c24b5725a2a92bfc35 Mon Sep 17 00:00:00 2001
From: TheSisb <TheSisb@users.noreply.github.com>
Date: Fri, 26 Jan 2024 12:58:07 -0600
Subject: [PATCH] feat(theme): allow styling themeprovider like box (#3739)

* feat(theme): allow passing inline `style` prop for overrides

* fix: a11y story error
---
 .changeset/khaki-doors-cheer.md                     |  9 +++++++++
 .../src/types/CustomizationProvider.ts              |  1 +
 packages/paste-theme/src/themeProvider.tsx          |  1 +
 .../paste-theme/stories/themeProvider.stories.tsx   | 13 +++++++++++++
 4 files changed, 24 insertions(+)
 create mode 100644 .changeset/khaki-doors-cheer.md

diff --git a/.changeset/khaki-doors-cheer.md b/.changeset/khaki-doors-cheer.md
new file mode 100644
index 0000000000..6644674617
--- /dev/null
+++ b/.changeset/khaki-doors-cheer.md
@@ -0,0 +1,9 @@
+---
+"@twilio-paste/customization": minor
+"@twilio-paste/theme": minor
+"@twilio-paste/core": minor
+---
+
+[ThemeProvider, CustomizationProvider] Now accepts an optional `style` prop to override element styles.
+
+This is helpful in scenarios where ThemeProvider isn't wrapping your app root, but instead is nested in your DOM tree and needs some styling overrides.
diff --git a/packages/paste-customization/src/types/CustomizationProvider.ts b/packages/paste-customization/src/types/CustomizationProvider.ts
index 8b5343695f..b10baf76e6 100644
--- a/packages/paste-customization/src/types/CustomizationProvider.ts
+++ b/packages/paste-customization/src/types/CustomizationProvider.ts
@@ -43,4 +43,5 @@ export interface CustomizationProviderProps {
    * @memberof CustomizationProviderProps
    */
   theme?: Partial<GenericThemeShape>;
+  style?: React.CSSProperties;
 }
diff --git a/packages/paste-theme/src/themeProvider.tsx b/packages/paste-theme/src/themeProvider.tsx
index 3a10dd2ebe..16687744eb 100644
--- a/packages/paste-theme/src/themeProvider.tsx
+++ b/packages/paste-theme/src/themeProvider.tsx
@@ -78,6 +78,7 @@ export interface ThemeProviderProps {
   theme?: ThemeVariants;
   disableAnimations?: boolean;
   cacheProviderProps?: CreateCacheOptions;
+  style?: React.CSSProperties;
 }
 
 const ThemeProvider: React.FunctionComponent<React.PropsWithChildren<ThemeProviderProps>> = ({
diff --git a/packages/paste-theme/stories/themeProvider.stories.tsx b/packages/paste-theme/stories/themeProvider.stories.tsx
index fca2857cc4..298cb5d037 100644
--- a/packages/paste-theme/stories/themeProvider.stories.tsx
+++ b/packages/paste-theme/stories/themeProvider.stories.tsx
@@ -68,3 +68,16 @@ export const JapaneseFontFamily = (): JSX.Element => (
     </Box>
   </>
 );
+
+export const StylingThemeProviderElement = (): React.ReactNode => (
+  <ThemeProvider theme="twilio" style={{ width: "100px", overflow: "auto" }}>
+    <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>
+  </ThemeProvider>
+);