Skip to content

feat: support theme for components not using ThemableMixin - #394

Merged
web-padawan merged 1 commit into
mainfrom
fix/theme-for-non-themable-components
Jul 24, 2026
Merged

feat: support theme for components not using ThemableMixin#394
web-padawan merged 1 commit into
mainfrom
fix/theme-for-non-themable-components

Conversation

@web-padawan

Copy link
Copy Markdown
Member

Problem

Fixes #393.

Switch and Breadcrumbs support the theme attribute in their web-component API but do not use ThemableMixin (planned for removal in Vaadin 26), so their element classes do not expose ThemePropertyMixinClass. The conditional type in createComponent gates the theme prop on that mixin:

type AllWebComponentProps<I, E> = I extends ThemePropertyMixinClass
  ? ThemedWebComponentProps<I, E>   // adds theme?: string
  : ComponentProps<I, E>;           // no theme

As a result, <Switch theme="…"> / <Breadcrumbs theme="slash"> produced Property 'theme' does not exist …, even though the attribute works at runtime.

Solution

  • createComponent.ts — relax ThemedWebComponentProps to I extends HTMLElement; add ReactWebComponent / ThemedReactWebComponent types and a createThemedComponent() helper that always exposes theme at the type level. Runtime is identical to createComponent (unknown props already flow to the DOM as attributes via @lit/react), so this is a type-only fix.
  • scripts/utils/settings.ts — new themedElements registry (Switch, Breadcrumbs) opting components into the themed variant.
  • scripts/generator.ts — emits createThemedComponent + theme?: string for registry members; all other ~80 components are unchanged.

This decouples theme support from the mixin type and gives a clean migration path: as Vaadin 26 removes ThemableMixin, components move into themedElements instead of silently losing theme. The conditional-type path for existing mixin components is untouched.

Tests

  • Extended test/ThemedReactWebComponent.spec.tsx with Switch (theme="small") and Breadcrumbs (theme="slash") cases.
  • Added dev/pages/Switch.tsx and dev/pages/Breadcrumbs.tsx for manual testing.

Verification

  • npm run validate:types → pass
  • npm test → 17 files / 104 tests pass (new spec 3/3)
  • Prettier clean

🤖 Generated with Claude Code

Switch and Breadcrumbs support the `theme` attribute at runtime but do not
use ThemableMixin (planned for removal in Vaadin 26), so they lack
ThemePropertyMixinClass. The conditional type in createComponent gated the
`theme` prop on that mixin, causing a TS error when setting `theme` on these
components.

Add a `createThemedComponent` helper (and ReactWebComponent /
ThemedReactWebComponent types) that always exposes a `theme` prop at the type
level; the runtime is identical to createComponent since @lit/react already
forwards unknown props to the DOM as attributes. A `themedElements` registry
in the generator settings opts specific components into this variant.

Closes #393

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@web-padawan
web-padawan requested review from tomivirkki and vursen July 24, 2026 08:09
@web-padawan
web-padawan removed the request for review from tomivirkki July 24, 2026 08:22
@web-padawan
web-padawan merged commit 95e2240 into main Jul 24, 2026
2 checks passed
@web-padawan
web-padawan deleted the fix/theme-for-non-themable-components branch July 24, 2026 08:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Make it possible to use theme with components not using ThemableMixin

2 participants