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',
+};