diff --git a/packages/upload/test/visual/lumo/screenshots/upload/baseline/focus-clear.png b/packages/upload/test/visual/lumo/screenshots/upload/baseline/focus-clear.png index 4757a0ea8ae..f29e330a999 100644 Binary files a/packages/upload/test/visual/lumo/screenshots/upload/baseline/focus-clear.png and b/packages/upload/test/visual/lumo/screenshots/upload/baseline/focus-clear.png differ diff --git a/packages/upload/test/visual/lumo/screenshots/upload/baseline/focus-file.png b/packages/upload/test/visual/lumo/screenshots/upload/baseline/focus-file.png index cf4163ecc55..c6ae4523bfe 100644 Binary files a/packages/upload/test/visual/lumo/screenshots/upload/baseline/focus-file.png and b/packages/upload/test/visual/lumo/screenshots/upload/baseline/focus-file.png differ diff --git a/packages/upload/test/visual/lumo/screenshots/upload/baseline/focus-retry.png b/packages/upload/test/visual/lumo/screenshots/upload/baseline/focus-retry.png index f04156c5d65..9a74467d7d9 100644 Binary files a/packages/upload/test/visual/lumo/screenshots/upload/baseline/focus-retry.png and b/packages/upload/test/visual/lumo/screenshots/upload/baseline/focus-retry.png differ diff --git a/packages/upload/test/visual/lumo/screenshots/upload/baseline/focus-start.png b/packages/upload/test/visual/lumo/screenshots/upload/baseline/focus-start.png index 58169accab1..478ba4e663b 100644 Binary files a/packages/upload/test/visual/lumo/screenshots/upload/baseline/focus-start.png and b/packages/upload/test/visual/lumo/screenshots/upload/baseline/focus-start.png differ diff --git a/packages/upload/test/visual/lumo/screenshots/upload/baseline/ltr-files.png b/packages/upload/test/visual/lumo/screenshots/upload/baseline/ltr-files.png index ea738c0ccd8..6731538d9fa 100644 Binary files a/packages/upload/test/visual/lumo/screenshots/upload/baseline/ltr-files.png and b/packages/upload/test/visual/lumo/screenshots/upload/baseline/ltr-files.png differ diff --git a/packages/upload/test/visual/lumo/screenshots/upload/baseline/rtl-files.png b/packages/upload/test/visual/lumo/screenshots/upload/baseline/rtl-files.png index be607413e24..489bc4b4484 100644 Binary files a/packages/upload/test/visual/lumo/screenshots/upload/baseline/rtl-files.png and b/packages/upload/test/visual/lumo/screenshots/upload/baseline/rtl-files.png differ diff --git a/packages/upload/test/visual/lumo/screenshots/upload/baseline/state-disabled.png b/packages/upload/test/visual/lumo/screenshots/upload/baseline/state-disabled.png index ee80a6a3a0a..81ca2150cac 100644 Binary files a/packages/upload/test/visual/lumo/screenshots/upload/baseline/state-disabled.png and b/packages/upload/test/visual/lumo/screenshots/upload/baseline/state-disabled.png differ diff --git a/packages/upload/test/visual/lumo/screenshots/upload/baseline/state-max-files-reached.png b/packages/upload/test/visual/lumo/screenshots/upload/baseline/state-max-files-reached.png index 2fea027bbbc..758f8a4b9ae 100644 Binary files a/packages/upload/test/visual/lumo/screenshots/upload/baseline/state-max-files-reached.png and b/packages/upload/test/visual/lumo/screenshots/upload/baseline/state-max-files-reached.png differ diff --git a/packages/upload/theme/lumo/vaadin-upload-styles.js b/packages/upload/theme/lumo/vaadin-upload-styles.js index dd18bf9d020..4b2ff92db3f 100644 --- a/packages/upload/theme/lumo/vaadin-upload-styles.js +++ b/packages/upload/theme/lumo/vaadin-upload-styles.js @@ -123,6 +123,7 @@ const uploadFile = css` [part='commands'] { display: flex; align-items: baseline; + align-self: start; flex: none; } @@ -131,6 +132,7 @@ const uploadFile = css` font-size: var(--lumo-icon-size-m); font-family: 'lumo-icons'; line-height: 1; + align-self: start; } /* When both icons are hidden, let us keep space for one */ @@ -151,9 +153,10 @@ const uploadFile = css` box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); } - [part$='icon']::before, - [part$='button']::before { - vertical-align: -0.25em; + /* Vertically align icons / buttons with the first line of text */ + [part$='icon'], + [part$='button'] { + margin-top: calc((1em * var(--lumo-line-height-m) - var(--lumo-icon-size-m)) / 2); } [part='done-icon']::before {