diff --git a/.changeset/funny-pears-invent.md b/.changeset/funny-pears-invent.md new file mode 100644 index 0000000000..ceab2c4b5b --- /dev/null +++ b/.changeset/funny-pears-invent.md @@ -0,0 +1,5 @@ +--- +'@openproject/primer-view-components': patch +--- + +Fix alignment of Visuals and Action items within the TreeView diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/dark.png index f8581cc881..b3d806e4a0 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/dark.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/dark_colorblind.png index f8581cc881..b3d806e4a0 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/dark_colorblind.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/dark_dimmed.png index 7ceb5a2c09..33cd16dbd6 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/dark_dimmed.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/dark_high_contrast.png index f8f9e5704a..cdc8d32811 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/dark_high_contrast.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/default.png index 0cbf3b5829..d916884ddf 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/focused.png index 107edc2b23..89744a49db 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/light.png index 995f0172a5..e4fe0ab28b 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/light.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/light_colorblind.png index 995f0172a5..e4fe0ab28b 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/light_colorblind.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/light_high_contrast.png index ffb6fedf7c..74c7102435 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/light_high_contrast.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/dark.png index 8e1d76c7d4..8d7b338a04 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/dark.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/dark_colorblind.png index 8e1d76c7d4..8d7b338a04 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/dark_colorblind.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/dark_dimmed.png index 73de556f57..c61cdfbc91 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/dark_dimmed.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/dark_high_contrast.png index 6787fa3c1a..273d3aa5d3 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/dark_high_contrast.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/default.png index 3c307ef946..44680cccd3 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/focused.png index ed5d8e0458..22043df804 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/light.png index 91e073f3fd..cfdd14c88e 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/light.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/light_colorblind.png index 91e073f3fd..cfdd14c88e 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/light_colorblind.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/light_high_contrast.png index 04f1296b42..b5b55bac5b 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/light_high_contrast.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/empty/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/empty/default.png index 1097c3fba5..d2965ecaa6 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/empty/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/empty/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/empty/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/empty/focused.png index 1ab8024dcb..004f8a4e39 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/empty/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/empty/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/loading_failure/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/loading_failure/default.png index 35b953d846..62ef2afb12 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/loading_failure/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/loading_failure/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/loading_failure/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/loading_failure/focused.png index 9271d1d8aa..7decb98591 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/loading_failure/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/loading_failure/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/loading_skeleton/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/loading_skeleton/default.png index 35b953d846..62ef2afb12 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/loading_skeleton/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/loading_skeleton/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/loading_skeleton/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/loading_skeleton/focused.png index 9271d1d8aa..7decb98591 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/loading_skeleton/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/loading_skeleton/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/loading_spinner/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/loading_spinner/default.png index 35b953d846..62ef2afb12 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/loading_spinner/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/loading_spinner/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/loading_spinner/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/loading_spinner/focused.png index 9271d1d8aa..7decb98591 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/loading_spinner/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/loading_spinner/focused.png differ diff --git a/app/components/primer/alpha/tree_view.pcss b/app/components/primer/alpha/tree_view.pcss index 2c97e7a095..4f9c9e3ae8 100644 --- a/app/components/primer/alpha/tree_view.pcss +++ b/app/components/primer/alpha/tree_view.pcss @@ -284,25 +284,29 @@ /* The visual icons should appear vertically centered for single-line items, but remain at the top for items that wrap across more lines. */ + align-self: baseline; height: var(--custom-line-height, 1.3rem); color: var(--fgColor-muted); align-items: center; } & .TreeViewItemLeadingAction { - display: flex; - color: var(--fgColor-muted); grid-area: leadingAction; - - & > button { - flex-shrink: 1; - } } & .TreeViewItemTrailingAction { + grid-area: trailingAction; + } + + & .TreeViewItemTrailingAction, + & .TreeViewItemLeadingAction { display: flex; color: var(--fgColor-muted); - grid-area: trailingAction; + /* The dynamic top and bottom padding to maintain the minimum item height for single line items while cancelling out the invisible area of the button */ + /* stylelint-disable-next-line primer/spacing */ + padding-top: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem) - 12px) / 2); + /* stylelint-disable-next-line primer/spacing */ + padding-bottom: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem) - 12px) / 2); & > button { flex-shrink: 1;