diff --git a/packages/polaris-viz-core/src/hooks/tests/useTheme.test.tsx b/packages/polaris-viz-core/src/hooks/tests/useTheme.test.tsx index 7a15fd7a8..0be8c2e66 100644 --- a/packages/polaris-viz-core/src/hooks/tests/useTheme.test.tsx +++ b/packages/polaris-viz-core/src/hooks/tests/useTheme.test.tsx @@ -41,14 +41,13 @@ describe('useTheme', () => { ); }); - it('throws an error if a theme with the given name cannot be found', () => { + it('falls back to default theme if a theme with the given name cannot be found', () => { function TestComponent() { const theme = useTheme('SomeOtherTheme'); return
{JSON.stringify(theme)}
; } - expectToThrow(() => { - mount(); - }, `SomeOtherTheme theme not found. Did you forget to define it in the PolarisVizProvider?`); + const mockComponent = mount(); + expect(mockComponent.text()).toBe(JSON.stringify(LIGHT_THEME)); }); }); diff --git a/packages/polaris-viz-core/src/hooks/useTheme.ts b/packages/polaris-viz-core/src/hooks/useTheme.ts index de07f0cc5..50c50e0a7 100644 --- a/packages/polaris-viz-core/src/hooks/useTheme.ts +++ b/packages/polaris-viz-core/src/hooks/useTheme.ts @@ -1,4 +1,4 @@ -import {useContext} from 'react'; +import {useContext, useEffect} from 'react'; import {DEFAULT_THEME_NAME} from '../constants'; import type {Theme} from '../types'; @@ -12,11 +12,20 @@ export function useTheme(passedTheme?: string): Theme { const themeName = passedTheme ?? theme ?? defaultTheme ?? DEFAULT_THEME_NAME; - if (Object.prototype.hasOwnProperty.call(themes, themeName)) { + const hasValidTheme = Object.prototype.hasOwnProperty.call(themes, themeName); + + useEffect(() => { + if (!hasValidTheme) { + // eslint-disable-next-line no-console + console.warn( + `${themeName} theme not found, falling back to ${DEFAULT_THEME_NAME}. Did you forget to define it in the PolarisVizProvider?`, + ); + } + }, [hasValidTheme, themeName]); + + if (hasValidTheme) { return themes[themeName]; } else { - throw new Error( - `${themeName} theme not found. Did you forget to define it in the PolarisVizProvider?`, - ); + return themes[DEFAULT_THEME_NAME]; } } diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md index 78c2a802f..818fc4007 100644 --- a/packages/polaris-viz/CHANGELOG.md +++ b/packages/polaris-viz/CHANGELOG.md @@ -5,7 +5,11 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). - +## Unreleased + +### Changed + +- Fallback to default theme instead of throwing an error when an unused theme value is passed to the `theme` prop. ## [13.0.0] - 2024-04-15 diff --git a/packages/polaris-viz/src/components/BarChart/stories/BarChart.chromatic.stories.tsx b/packages/polaris-viz/src/components/BarChart/stories/BarChart.chromatic.stories.tsx index cd1f47008..f6dd08d35 100644 --- a/packages/polaris-viz/src/components/BarChart/stories/BarChart.chromatic.stories.tsx +++ b/packages/polaris-viz/src/components/BarChart/stories/BarChart.chromatic.stories.tsx @@ -55,3 +55,23 @@ UniqueStackedValues.args = { }, ], }; + +export const BadTheme: Story = Template.bind({}); + +BadTheme.args = { + data: [ + { + name: 'Breakfast', + data: [{key: 'Monday', value: 3}], + }, + { + name: 'Breakfast', + data: [{key: 'Monday', value: 4}], + }, + { + name: 'Breakfast', + data: [{key: 'Monday', value: 7}], + }, + ], + theme: 'BadThemeName', +};