Merge pull request #1660 from Shopify/envex/default-theme-fallback

Return default theme when unknown theme value is passed

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 <div>{JSON.stringify(theme)}</div>;
     }
 
-    expectToThrow(() => {
-      mount(<TestComponent />);
-    }, `SomeOtherTheme theme not found. Did you forget to define it in the PolarisVizProvider?`);
+    const mockComponent = mount(<TestComponent />);
+    expect(mockComponent.text()).toBe(JSON.stringify(LIGHT_THEME));
   });
 });

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];
   }
 }

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 -->
+## 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
 

packages/polaris-viz/src/components/BarChart/stories/BarChart.chromatic.stories.tsx

@@ -55,3 +55,23 @@ UniqueStackedValues.args = {
     },
   ],
 };
+
+export const BadTheme: Story<BarChartProps> = 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',
+};