diff --git a/apps/site/components/HeroExampleCode.tsx b/apps/site/components/HeroExampleCode.tsx index 13822c4a813..5a079145e51 100644 --- a/apps/site/components/HeroExampleCode.tsx +++ b/apps/site/components/HeroExampleCode.tsx @@ -151,9 +151,9 @@ const CodeExamples = memo(({ examples }: any) => { { ) expect(child.state.name).toBe('dark_yellow_Button') }) + + test(`Component name + name finds one up when component name missing`, () => { + const parent = new ThemeManager( + { + name: 'dark_red_alt1', + }, + 'root' + ) + const child = new ThemeManager( + { + name: 'alt2', + componentName: 'Missing', + }, + parent + ) + expect(child.state.name).toBe('dark_red_alt2') + }) }) diff --git a/packages/core/src/helpers/ThemeManager.tsx b/packages/core/src/helpers/ThemeManager.tsx index df58607f57f..351177a778f 100644 --- a/packages/core/src/helpers/ThemeManager.tsx +++ b/packages/core/src/helpers/ThemeManager.tsx @@ -176,9 +176,10 @@ function getState( ? base.slice(0, base.length).join(THEME_NAME_SEPARATOR) : parentName const max = base.length - const min = componentName - ? max // component themes don't search upwards - : 0 + const min = + componentName && !nextName + ? max // component name only don't search upwards + : 0 // prettier-ignore // eslint-disable-next-line no-console