Skip to content

feat(shared): use web components for search, select, and checkbox controls - #352

Merged
ChristopherVR merged 6 commits into
ChristopherVR:mainfrom
yunfeizhu:feat/shared-web-controls-pr
Sep 24, 2026
Merged

ChristopherVR merged 6 commits into
ChristopherVR:mainfrom
yunfeizhu:feat/shared-web-controls-pr

Conversation

@yunfeizhu

@yunfeizhu yunfeizhu commented Sep 23, 2026 •

Copy link
Copy Markdown
Contributor

Summary

  • Add shared pptx-ui-search, pptx-ui-select, and pptx-ui-checkbox custom elements. They use the existing --pptx-* theme tokens and provide one event and keyboard interaction contract across bindings.
  • Keep scoped styles in readable modules. Browser instances share a parsed stylesheet per document and control type, with a <style> fallback for DOMs without constructable stylesheet support.
  • Migrate the title-bar and File recent search fields, File > Options controls, and select and checkbox controls in the Properties inspector for React, Vue, Angular, Svelte, and Vanilla. The select popup opens below its trigger and retains the existing dark UI treatment.
  • Keep the File navigation implementation unchanged. Other native controls remain available for later migration batches.

Verification

  • Full package test suites: shared 9,960 passed; React 7,390; Vue 3,056; Angular 3,840; Svelte 1,930; Vanilla 1,967.
  • Browser tests across all five bindings: 15 search focus, forced-colors, and narrow viewport checks; 10 Properties interaction and stylesheet reuse checks.
  • Type checks for all five bindings and shared, Angular package build, formatting, lint, and the E2E framework-neutrality check passed.

Closes #348
Closes #349
Related to #342

@github-actions github-actions Bot added documentation Improvements or additions to documentation react React binding (pptx-react-viewer) vue Vue binding (pptx-vue-viewer) angular Angular binding (pptx-angular-viewer) svelte Svelte binding (pptx-svelte-viewer) vanilla Vanilla binding (pptx-vanilla-viewer) shared Framework-agnostic viewer logic (pptx-viewer-shared) e2e Playwright end-to-end suite labels Sep 23, 2026
@yunfeizhu yunfeizhu changed the title Use shared Web Components for search, select, and checkbox controls feat(shared): use web components for search, select, and checkbox controls Sep 23, 2026
@yunfeizhu
yunfeizhu marked this pull request as draft September 23, 2026 14:35
@yunfeizhu
yunfeizhu marked this pull request as ready for review September 24, 2026 02:16
@yunfeizhu

Copy link
Copy Markdown
Contributor Author

This ended up touching more files than I expected across the five bindings 😅 Getting the full CI matrix green was quite a journey, haha. Glad it finally made it through!

@ChristopherVR
ChristopherVR merged commit e09b47a into ChristopherVR:main Sep 24, 2026
57 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

angular Angular binding (pptx-angular-viewer) documentation Improvements or additions to documentation e2e Playwright end-to-end suite react React binding (pptx-react-viewer) shared Framework-agnostic viewer logic (pptx-viewer-shared) svelte Svelte binding (pptx-svelte-viewer) vanilla Vanilla binding (pptx-vanilla-viewer) vue Vue binding (pptx-vue-viewer)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Give Options selects a consistent app-owned popup across the five bindings Unify Options and inspector checkbox styling across the five bindings

2 participants