refactor: update dashboard styles, add Lumo theme variants #8962

rolfsmeds · 2025-04-15T17:08:40Z

Description

Elevated and Flat style variants
Shaded background variant for board itself
Wrapping title support (and a style prop for disabling wrapping)

Fixes #8961
Fixes #8706

Type of change

Bugfix
Feature

Checklist

I have read the contribution guide: https://vaadin.com/docs/latest/contributing/pr
I have added a description following the guideline.
The issue is created in the corresponding repository and I have referenced it.
I have added tests to ensure my change is effective and works as intended.
New and existing tests are passing locally with my change.
I have performed self-review and corrected misspellings.
I have not completed some of the steps above and my pull request can be closed immediately.

Additional for `Feature` type of change

Enhancement / new feature was discussed in a corresponding GitHub issue and Acceptance Criteria were created.

packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js

packages/dashboard/src/vaadin-dashboard-widget.js

ugur-vaadin · 2025-04-28T06:29:33Z

We should probably add some visual tests for the themes.

packages/dashboard/src/vaadin-dashboard-widget.js

packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js

ugur-vaadin · 2025-04-28T08:48:12Z

We should probably add some visual tests for the themes.

Added some tests. Can you check the baseline images @rolfsmeds ?

packages/dashboard/src/vaadin-dashboard-widget.js

…dget-*

rolfsmeds · 2025-05-07T13:39:21Z

We should probably add some visual tests for the themes.

Added some tests. Can you check the baseline images @rolfsmeds ?

As I've now modified stuff again, I'm guessing the baselines need updating too @ugur-vaadin ?

ugur-vaadin · 2025-05-07T15:11:57Z

As I've now modified stuff again, I'm guessing the baselines need updating too @ugur-vaadin ?

Updated the images. Header content alignment seems to have changed. Can you check to see if anything looks out of place?

rolfsmeds · 2025-05-08T09:46:00Z

As I've now modified stuff again, I'm guessing the baselines need updating too @ugur-vaadin ?

Updated the images. Header content alignment seems to have changed. Can you check to see if anything looks out of place?

Header content alignment was changed to support wrapping widget titles, but I see now that apparently the titles are rendering significantly lower in the test images than on macOS, which probably means they do so on Windows too. Doesn't look very good. I'll make a couple of small tweaks to hopefully make it look better.

…etter visual alignment.

ugur-vaadin · 2025-05-08T10:21:51Z

Header content alignment was changed to support wrapping widget titles, but I see now that apparently the titles are rendering significantly lower in the test images than on macOS, which probably means they do so on Windows too. Doesn't look very good. I'll make a couple of small tweaks to hopefully make it look better.

Updated the images.

rolfsmeds · 2025-05-13T10:23:12Z

Header content alignment was changed to support wrapping widget titles, but I see now that apparently the titles are rendering significantly lower in the test images than on macOS, which probably means they do so on Windows too. Doesn't look very good. I'll make a couple of small tweaks to hopefully make it look better.

Updated the images.

LGTM

packages/dashboard/src/vaadin-dashboard-layout-mixin.js

packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/theme-flat-widgets.png

packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js

packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/theme-elevated-widgets.png

packages/dashboard/src/vaadin-dashboard-layout-mixin.js

Co-authored-by: Jouni Koivuviita <[email protected]>

sonarqubecloud · 2025-05-19T11:51:50Z

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

Co-authored-by: ugur-vaadin <[email protected]>

…9204) Co-authored-by: Rolf Smeds <[email protected]> Co-authored-by: ugur-vaadin <[email protected]>

rolfsmeds added 13 commits April 4, 2025 17:57

Removed header border, header gap, content padding.

e5cf364

Refactored widget border from shadow to ::before with border

6594cd7

Added pointer-events:none to border pseudo just to be on the safe side

ec3d273

Tweaked the psuedo's border radius to look better

4ecafdb

Added 3 theme variants

df14465

Added widget style props to jsdoc

4a0f724

Force widget border in edit mode

8972bb7

Added "flat" widget variant

75ead65

Removed widget-padding variant.

24cd287

Support for wrapping titles.

8693c92

re-added margin removed by mistake

8cdd0e9

override section header alignment to center

e571cc3

Changed wrapping titles to default.

a7439f0

rolfsmeds requested review from ugur-vaadin and web-padawan April 15, 2025 17:09

Merge branch 'main' into feat/dashboard-widget-styles

c79aec8

This was referenced Apr 15, 2025

Feat/dashboard style variants vaadin/flow-components#7317

Merged

Docs/dashboard style updates vaadin/docs#4255

Merged

rolfsmeds requested a review from yuriy-fix April 17, 2025 11:19

jouni reviewed Apr 24, 2025

View reviewed changes

packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js Outdated Show resolved Hide resolved

ugur-vaadin reviewed Apr 28, 2025

View reviewed changes

packages/dashboard/src/vaadin-dashboard-widget.js Outdated Show resolved Hide resolved

ugur-vaadin reviewed Apr 28, 2025

View reviewed changes

packages/dashboard/src/vaadin-dashboard-widget.js Show resolved Hide resolved

ugur-vaadin reviewed Apr 28, 2025

View reviewed changes

packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js Show resolved Hide resolved

ugur-vaadin added 3 commits April 28, 2025 11:39

test: add visual tests

051daee

chore: align docs for properties

6246c69

chore: add title wrap to property list

52b4ccc

jouni reviewed May 7, 2025

View reviewed changes

packages/dashboard/src/vaadin-dashboard-widget.js Outdated Show resolved Hide resolved

Moved scrolling from #grid to root

d3f665d

rolfsmeds added 2 commits May 7, 2025 16:20

Renamed --vaadin-dashboard-item-* properties to --vaadin-dashboard-wi…

93ddf24

…dget-*

Removed public style properties for editable and selected shadows

606b5ca

test: update lumo baseline images

982fb6d

rolfsmeds and others added 2 commits May 8, 2025 12:46

Couple of tweaks to lift widget and section titles a bit higher for b…

9ea0a9f

…etter visual alignment.

test: update baseline images

97abeb9

jouni reviewed May 14, 2025

View reviewed changes

packages/dashboard/src/vaadin-dashboard-layout-mixin.js Show resolved Hide resolved

rolfsmeds and others added 2 commits May 19, 2025 11:45

Removed "vaadin-dashboard" from names of private css properties.

d3acf3c

test: use non editable dashboard by default and update baseline images

608c611

jouni approved these changes May 19, 2025

View reviewed changes

rolfsmeds and others added 3 commits May 19, 2025 14:23

Appeasing the linter

bf6c33b

chore: fix indentation in JSDoc

1ee8232

Update packages/dashboard/src/vaadin-dashboard-layout-mixin.js

d4bc89e

Co-authored-by: Jouni Koivuviita <[email protected]>

web-padawan approved these changes May 19, 2025

View reviewed changes

web-padawan changed the title ~~Dashboard style update~~ refactor: update dashboard styles, add Lumo theme variants May 19, 2025

web-padawan added the target/24.8 label May 19, 2025

web-padawan removed the request for review from yuriy-fix May 19, 2025 11:51

web-padawan merged commit f3a4465 into main May 19, 2025
10 checks passed

web-padawan deleted the feat/dashboard-widget-styles branch May 19, 2025 11:52

vaadin-bot pushed a commit that referenced this pull request May 19, 2025

refactor: update dashboard styles, add Lumo theme variants (#8962)

9030ce3

Co-authored-by: ugur-vaadin <[email protected]>

vaadin-bot added the cherry-picked-24.8 label May 19, 2025

web-padawan pushed a commit that referenced this pull request May 19, 2025

refactor: update dashboard styles, add Lumo theme variants (#8962) (#…

ad16701

…9204) Co-authored-by: Rolf Smeds <[email protected]> Co-authored-by: ugur-vaadin <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor: update dashboard styles, add Lumo theme variants #8962

refactor: update dashboard styles, add Lumo theme variants #8962

Uh oh!

rolfsmeds commented Apr 15, 2025

Uh oh!

Uh oh!

Uh oh!

ugur-vaadin commented Apr 28, 2025

Uh oh!

Uh oh!

Uh oh!

ugur-vaadin commented Apr 28, 2025

Uh oh!

Uh oh!

rolfsmeds commented May 7, 2025

Uh oh!

ugur-vaadin commented May 7, 2025 •

edited

Loading

Uh oh!

rolfsmeds commented May 8, 2025

Uh oh!

ugur-vaadin commented May 8, 2025

Uh oh!

rolfsmeds commented May 13, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sonarqubecloud bot commented May 19, 2025

Uh oh!

Uh oh!

Uh oh!

refactor: update dashboard styles, add Lumo theme variants #8962

refactor: update dashboard styles, add Lumo theme variants #8962

Uh oh!

Conversation

rolfsmeds commented Apr 15, 2025

Description

Type of change

Checklist

Additional for Feature type of change

Uh oh!

Uh oh!

Uh oh!

ugur-vaadin commented Apr 28, 2025

Uh oh!

Uh oh!

Uh oh!

ugur-vaadin commented Apr 28, 2025

Uh oh!

Uh oh!

rolfsmeds commented May 7, 2025

Uh oh!

ugur-vaadin commented May 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rolfsmeds commented May 8, 2025

Uh oh!

ugur-vaadin commented May 8, 2025

Uh oh!

rolfsmeds commented May 13, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sonarqubecloud bot commented May 19, 2025

Quality Gate passed

Uh oh!

Uh oh!

Uh oh!

Additional for `Feature` type of change

ugur-vaadin commented May 7, 2025 •

edited

Loading