Skip to content

Commit

Permalink
feat(theme): allow styling themeprovider like box (#3739)
Browse files Browse the repository at this point in the history
* feat(theme): allow passing inline `style` prop for overrides

* fix: a11y story error
TheSisb authored Jan 26, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 55786c6 commit d9f96d7
Showing 4 changed files with 24 additions and 0 deletions.
9 changes: 9 additions & 0 deletions .changeset/khaki-doors-cheer.md
Original file line number Diff line number Diff line change
@@ -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.
Original file line number Diff line number Diff line change
@@ -43,4 +43,5 @@ export interface CustomizationProviderProps {
* @memberof CustomizationProviderProps
*/
theme?: Partial<GenericThemeShape>;
style?: React.CSSProperties;
}
1 change: 1 addition & 0 deletions packages/paste-theme/src/themeProvider.tsx
Original file line number Diff line number Diff line change
@@ -78,6 +78,7 @@ export interface ThemeProviderProps {
theme?: ThemeVariants;
disableAnimations?: boolean;
cacheProviderProps?: CreateCacheOptions;
style?: React.CSSProperties;
}

const ThemeProvider: React.FunctionComponent<React.PropsWithChildren<ThemeProviderProps>> = ({
13 changes: 13 additions & 0 deletions packages/paste-theme/stories/themeProvider.stories.tsx
Original file line number Diff line number Diff line change
@@ -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>
);

0 comments on commit d9f96d7

Please sign in to comment.