[login] Update login-overlay to native popover and render title, form etc in slots #9699
Description
Motivation
Depends on #9694
Currently, vaadin-login-overlay renders vaadin-login-form as a child of the overlay wrapper which then gets teleported to the body. Also it has custom logic for teleporting title, custom-form-area and footer slots. This is problematic, see vaadin/react-components#269.
Proposed solution
- Update
vaadin-login-overlay-wrapperto use nativepopoverinstead of teleporting to<body> - Update
vaadin-login-overlayto not usevaadin-login-formbut usevaadin-login-form-wrapper - Forward
titleslot to the overlay wrapper andform,submitetc to the form wrapper, respectively - Use
LoginFormMixinin thevaadin-login-overlayto initialize slotted form and buttons with controllers - Create a separate controller to handle slotted
titleand remove fallback element withpart="title" - Set
exportpartsattribute on both login overlay wrapper and form wrapper to enable::part()styling - Rename overlay-wrapper
formpart to e.g.form-containerto avoid form-wrapper part name conflict
Prototype: https://github.com/vaadin/web-components/compare/proto/native-popover-login
Additional context
This will require updating TestBench element since LoginOverlay will no longer have LoginForm.
The getLoginForm() method be removed, and getUsernameField() etc will be reimplemented.