feat: update themes for header and footer #3654
Conversation
|
Ah, forgot that I need to update the screen shots… |
| @@ -10,29 +10,94 @@ const dialogOverlay = css` | |||
| max-width: 560px; | |||
| min-width: 280px; | |||
| -webkit-tap-highlight-color: transparent; | |||
| border-radius: 8px; | |||
There was a problem hiding this comment.
I'd like to extract this change to separate PR as well, to have a separate entry in the release notes.
There was a problem hiding this comment.
Actually, let’s not even introduce this change. I just checked, and the previous Material Design spec has 4px radius on dialogs. I think I had been looking at the updated specs, where the radius is something like 16px, and somehow thought this change was needed.
web-padawan
changed the title
|
|
||
| <script type="module"> | ||
| const dialog1 = document.querySelector('vaadin-dialog'); | ||
| dialog1.headerTitle = 'Title'; | ||
| dialog1.draggable = true; | ||
| dialog1.resizable = true; | ||
|
|
||
| dialog1.renderer = (root) => { |
There was a problem hiding this comment.
thought: I wonder if it would make sense to use Lit at least for the renderers for readability purposes? The more sophisticated dialog becomes, the harder to follow its source code.
There was a problem hiding this comment.
I'm going to add Lit helpers to my CF project later: https://github.com/web-padawan/lit-vaadin-helpers
We'll eventually move them to the monorepo at some point, as part of #266
There was a problem hiding this comment.
OK, sure 👍 my point was mainly about the current dialog dev page where Lit could be considered to make the renderers more declarative.
There was a problem hiding this comment.
Let's merge #3663 first and then update this PR using overflow attribute instead of current hacks.
|
Pushed a commit to use |
|
Looking at the screenshot diff: should the header be right aligned even with no title? I would suggest to align the header to the left by default and align it to the right if used in conjunction with the title. |
I might be wrong, but it feels like the reason for making it right aligned is the often requested "close button" use case. |
I think you are right as well! That's why I would not change the right alignment if used with the title attribute where we can probably 99% agree that the added header information has to be right aligned. My "problem" comes with the other cases where people wanna use the header with multiple components in a renderer like a flex layout with something like "icon, hx, right aligned buttons" where you don't use title on purpose to allow elements inside the header to be the title. Now you have to make sure to align it to the left on every Dialog you create |
- Header and footer styling - Add visible focus outline when keyboard focus is on the overlay element - Allow the user to drag the dialog from anywhere within the header and footer areas, apart from the slotted content - Update dev test page
web-padawan
force-pushed
the
dialog-header-footer-themes
branch
from
4c78ae5 to
371a68e
Compare
There was a problem hiding this comment.
LGTM. Let's discuss header content alignment in a separate issue - see #3669.
|
Kudos, SonarCloud Quality Gate passed!
|
|
This ticket/PR has been released with Vaadin 23.1.0.alpha2 and is also targeting the upcoming stable 23.1.0 version. |
Header and footer styles
I updated the dev page to include examples of the new functionality.
Lumo
When scrolled:
Material
When scrolled:
When scrolled to the end: