[UI Preview] Add initial set of or-vaadin-components, applied them to Assets page by MartinaeyNL · Pull Request #2340 · openremote/openremote

MartinaeyNL · 2025-12-11T10:22:20Z

Description

This PR adds an integration for the Vaadin Web Components, located in the /ui/component/or-vaadin-* folders.
They have been applied to the Assets page, within the or-attribute-input component.

Changelog

Vaadin UI: Add or-vaadin-* components:
- or-vaadin-checkbox using https://vaadin.com/docs/v25/components/checkbox
- or-vaadin-numberfield using https://vaadin.com/docs/v25/components/number-field
- or-vaadin-passwordfield using https://vaadin.com/docs/v25/components/password-field
- or-vaadin-select using https://vaadin.com/docs/v25/components/select
- or-vaadin-textarea using https://vaadin.com/docs/v25/components/text-area
- or-vaadin-textfield using https://vaadin.com/docs/v25/components/text-field
Vaadin UI: Add custom or-vaadin-input element, that works similar to or-mwc-input with Vaadin components.
All HTML attributes and properties are "bubbled down" towards the Vaadin child component, making it flexible.
Material UI: Deprecate the or-mwc-input component.
Meterial UI: Remove utility functions like getValueHolderInputTemplateProvider() in favor of
using the or-vaadin-input counterpart. (see its util.ts file)
Theme: Create new @openremote/theme package, with only CSS files.
Theme: Apply Vaadin lumo styles (@vaadin/vaadin-lumo-styles/lumo.css) by default.
Manager UI: Apply or-vaadin-input to the or-attribute-input rendering function.
Other: remove old or-data-viewer from the Insights page.

Breaking changes from MWC to Vaadin

There are several breaking changes when you migrate or-mwc-input to the new or-vaadin-input.
But, preferably, you'd use the individual components like or-vaadin-textfield instead.
You should only use the new or-vaadin-input if you want to dynamically switch between input types.

List of breaking changes from or-mwc-input to or-vaadin-input, although there are many more.
See the Vaadin docs for the exact specification and options.

HTML attribute focused becomes web standard autofocus.
HTML attribute helperText becomes web standard helper-text.
HTML attribute outlined has been removed.
HTML attribute rounded has been removed.
HTML attribute resizeVertical has been removed, please use web standard type="textarea" instead.
Event @or-mwc-input-changed becomes the web standard @change.
In case of type="checkbox", instead of value="true" you should use the web standard checked="true".

Checklist

1. Acceptance criteria of the linked issue(s) are met
2. Tests are written and all tests pass
3. Changes are manually tested by you and the reviewer

…ModulesLinkingError...

…nager app instead of the individual component.

….com/openremote/openremote into feature/asset-attribute-input-vaadin

… for this PR. (for now)

…d or-mwc-input. Resolved incorrect package JSON dependency mentions. Also includes minor cleanup.

… other minor issues. Added password input.

…alls back to or-mwc-input

… Also added the OpenRemote theme file to Storybook.

Copilot

Pull request overview

This PR introduces a new Vaadin-based component library (@openremote/or-vaadin-components) alongside a new theme package (@openremote/theme) to begin migrating away from Material Design Components. Key changes include creating wrapper components around Vaadin fields, implementing an input abstraction layer, and integrating these components into the Assets page workflow.

Key Changes

Added new @openremote/or-vaadin-components package with wrappers for Vaadin text fields, number fields, checkboxes, text areas, and password fields
Added new @openremote/theme package that imports Vaadin Lumo styles
Migrated input provider logic from or-mwc-components to or-vaadin-components with deprecation warnings on old code
Updated or-attribute-input and or-asset-viewer to use the new Vaadin components
Updated build configurations and dependencies across multiple packages, including upgrading @rsbuild/core to ~1.6.8

Reviewed changes

Copilot reviewed 40 out of 41 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
`ui/component/or-vaadin-components/src/or-vaadin-input.ts`	Main abstraction component that wraps Vaadin components and handles attribute forwarding
`ui/component/or-vaadin-components/src/util.ts`	Contains logic for determining input types and creating templates based on value descriptors
`ui/component/or-vaadin-components/src/or-vaadin-*.ts`	Simple wrapper components extending Vaadin base components
`ui/component/or-mwc-components/src/or-mwc-input.ts`	Added deprecation warnings and removed duplicated logic moved to Vaadin components
`ui/component/or-attribute-input/src/index.ts`	Updated to use new Vaadin input provider with simplified callback signatures
`ui/component/or-asset-viewer/src/or-edit-asset-panel.ts`	Updated meta item editing to use new input provider
`ui/component/theme/*`	New theme package that imports Vaadin Lumo styles
`ui/app/manager/src/index.ts`	Applies theme CSS to manager app
`yarn.lock`	Updated dependencies including Vaadin beta packages and Rsbuild/Rspack tooling
`ui/knip.jsonc`	Added ignores for Vaadin styles and Rsdoctor plugin

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

…ial checked/unchecked value

…utes. Added support for SELECT.

Ekhorn

Initial review. I'll have another look ;)

Co-authored-by: Koen <44117179+Ekhorn@users.noreply.github.com>

Ekhorn

Looks good! I'll approve after these remaining threads.

…stories.ts Co-authored-by: Koen <44117179+Ekhorn@users.noreply.github.com>

Co-authored-by: Koen <44117179+Ekhorn@users.noreply.github.com>

…feedback.

Ekhorn

Is the deployment up-to-date?

MartinaeyNL · 2025-12-18T08:57:59Z

No I haven't updated the testing deployment yet. Will do.

…bmit on pressing ENTER (or send button). Fix for attribute input dropdown showing send button.

… be correct on the 'view asset' page now

Ekhorn

Nice work!

MartinaeyNL added 23 commits November 28, 2025 15:25

WIP: Added first sketch of new primitive tokens.

119ffc7

WIP: Initial setup of Vaadin components. Be aware, not working yet.

d68dc86

WIP: Attempt to create RSBuild configuration, but it fails with an ES…

4ee5a63

…ModulesLinkingError...

WIP

b432f1a

WIP: Moved theme files to separate package, and referenced them in Ma…

0aef6ad

…nager app instead of the individual component.

WIP: Basic features for or-attribute-input seem to be working OK now

eb66088

WIP: Added checkbox support

078588c

WIP: Minor styling adjustments

322c929

Merge branch 'master' into feature/asset-attribute-input-vaadin

5f21c37

Merge branch 'feature/asset-attribute-input-vaadin' of https://github…

5155b89

….com/openremote/openremote into feature/asset-attribute-input-vaadin

Dependency fixes caused by merge in yarn.lock

9492b02

Cleanup / reverts to master branch of changes that were not necessary…

cf7433b

… for this PR. (for now)

WIP: More code cleanup and reverts

2465475

WIP: Added license header to theme CSS files

38e1d4a

WIP: Resolved issues with package reference paths

b4bcd8e

WIP: Moved some logic from or-mwc-input to or-vaadin-input. Deprecate…

de460b6

…d or-mwc-input. Resolved incorrect package JSON dependency mentions. Also includes minor cleanup.

WIP: General cleanup and corrected import statements.

fe23447

WIP: Fix for change event not being processed properly. Also resolved…

334a08c

… other minor issues. Added password input.

WIP: Minor fixes for slider and on/off component, that now properly f…

24735ea

…alls back to or-mwc-input

WIP: Fixes for NPM dependency references

a2263da

Merge branch 'master' into feature/asset-attribute-input-vaadin

a15c57c

Addressed copilot comments, and other minor fixes

54e149d

WIP: Fix for incorrect Gradle config in or-vaadin-components package.…

4c55117

… Also added the OpenRemote theme file to Storybook.

MartinaeyNL self-assigned this Dec 11, 2025

MartinaeyNL added the Enhancement Improvement of an existing feature label Dec 11, 2025

wborn requested a review from Copilot December 11, 2025 10:22

Copilot started reviewing on behalf of wborn December 11, 2025 10:23 View session

MartinaeyNL mentioned this pull request Dec 11, 2025

Feature/asset attribute input vaadin #2319

Closed

3 tasks

Copilot AI reviewed Dec 11, 2025

View reviewed changes

MartinaeyNL linked an issue Dec 11, 2025 that may be closed by this pull request

Migrate assets page to Vaadin components #2230

Closed

MartinaeyNL added 3 commits December 11, 2025 14:44

WIP: Fix for checkbox with or-attribute-input not respecting the init…

e886fcd

…ial checked/unchecked value

or-vaadin-input now also listens for properties alongside HTML attrib…

82b136f

…utes. Added support for SELECT.

Cleanup and overall code quality improvements

5ff9ddb

MartinaeyNL mentioned this pull request Dec 15, 2025

Support preprocessing of CSS files before bundling them #2213

Closed

1 task

MartinaeyNL changed the title ~~[UI Preview] Added initial set of or-vaadin-components, applied them to Assets page~~ [UI Preview] Add initial set of or-vaadin-components, applied them to Assets page Dec 16, 2025

MartinaeyNL requested a review from Ekhorn December 16, 2025 15:47

Ekhorn requested changes Dec 16, 2025

View reviewed changes

Comment thread ui/component/or-vaadin-components/src/or-vaadin-input.ts Outdated

Comment thread ui/component/or-vaadin-components/src/or-vaadin-input.ts Outdated

Comment thread ui/component/or-vaadin-components/src/util.ts Outdated

MartinaeyNL and others added 3 commits December 17, 2025 11:29

Update ui/component/or-vaadin-components/src/or-vaadin-input.ts

b865da4

Co-authored-by: Koen <44117179+Ekhorn@users.noreply.github.com>

Update ui/component/or-vaadin-components/src/or-vaadin-input.ts

a804197

Co-authored-by: Koen <44117179+Ekhorn@users.noreply.github.com>

Update ui/component/or-vaadin-components/src/util.ts

6a0597d

Co-authored-by: Koen <44117179+Ekhorn@users.noreply.github.com>

Ekhorn mentioned this pull request Dec 17, 2025

Migrate or-scheduler component to vaadin design #2362

Closed

3 tasks

Ekhorn reviewed Dec 17, 2025

View reviewed changes

MartinaeyNL and others added 5 commits December 17, 2025 14:48

Update ui/component/or-vaadin-components/stories/or-vaadin-textfield.…

38d4833

…stories.ts Co-authored-by: Koen <44117179+Ekhorn@users.noreply.github.com>

Update ui/component/theme/package.json

77ed18b

Co-authored-by: Koen <44117179+Ekhorn@users.noreply.github.com>

WIP: Add type definition file for theme package

bd1689a

Improve theme exports

c0f5d10

Correct theme import in Storybook, and minor adjustments based on PR …

b73ecad

…feedback.

MartinaeyNL marked this pull request as ready for review December 17, 2025 16:40

MartinaeyNL added 2 commits December 17, 2025 17:47

cleanup

06052da

Minor refactor

acea15f

Ekhorn reviewed Dec 18, 2025

View reviewed changes

Comment thread ui/component/or-vaadin-components/src/or-vaadin-input.ts

Ekhorn reviewed Dec 19, 2025

View reviewed changes

Comment thread ui/component/or-vaadin-components/src/or-vaadin-input.ts

MartinaeyNL added 2 commits December 19, 2025 11:04

Update to Vaadin release candidate. Attribute text fields now only su…

127a160

…bmit on pressing ENTER (or send button). Fix for attribute input dropdown showing send button.

Fix for value updates in modify page not working anymore. Should also…

4da187d

… be correct on the 'view asset' page now

Ekhorn approved these changes Dec 19, 2025

View reviewed changes

Ekhorn merged commit b66372e into feature/ui-preview Dec 19, 2025
2 checks passed

Ekhorn deleted the feature/asset-attribute-input-vaadin branch December 19, 2025 14:55

MartinaeyNL mentioned this pull request Feb 24, 2026

Manager UI: first iteration of the new Vaadin UI #2552

Open

5 tasks

Conversation

MartinaeyNL commented Dec 11, 2025 • edited by Ekhorn Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Breaking changes from MWC to Vaadin

Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Key Changes

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Ekhorn left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Ekhorn left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Ekhorn left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

MartinaeyNL commented Dec 18, 2025

Uh oh!

Uh oh!

Ekhorn left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

MartinaeyNL commented Dec 11, 2025 •

edited by Ekhorn

Loading