[POC] list > content vertical alignment

[ataromoku]

Problem/Motivation

In a specific case like the one in the screenshot above, where we have a mix of items with and without icons, we end up with a situation where the siblings look like they sit at different depths visually. The current logic reserves space in D2#1 to align it with its expandable sibling, which indeed works well when both items either have an icon or don't.

---

Description

This POC PR is an attempt to implement vertical alignment of sibling items by their content. After trying a few versions of this feature, I realized it's not easy to implement without causing noticeable regressions. So this version keeps the current logic mostly untouched.

The idea is to calculate the distance from the start of each item to its content and take the largest value. Then, for all its siblings, we use a spacer element to make up the difference, which effectively aligns the space before the content.

This PR is a small demo showing the concept.

---

Before:

After

[github-actions]

Thanks for the PR! 🎉

We've deployed an automatic preview for this PR - you can see your changes here:

URL	https://live.d2l.dev/prs/BrightspaceUI/core/pr-6397/

Note

The build needs to finish before your changes are deployed.
Changes to the PR will automatically update the instance.

[dbatiste]

I realized it's not easy to implement without causing noticeable regressions.

Oh yeah, the permutations are bananas.

Measuring all the items initially and also whenever there are changes would be unfortunate. Does the indentation property not help us? I think it was intended to be our "escape hatch" since we were finding it difficult to address all the cases.

[ataromoku]

Does the indentation property not help us? I think it was intended to be our "escape hatch" since we were finding it difficult to address all the cases.

Unfortunately, it only affects the margin before the drag handle, and the empty space gets added after that. For example, I tried setting indentation to 0:

[ataromoku]

Measuring all the items initially and also whenever there are changes would be unfortunate.

I also tried placing the slots before the content inside a subgrid element, which would let us align the width of the "leading space" using plain CSS. But subgrid still has pretty limited browser support, I believe, so I wouldn't use it in production yet

[dbatiste]

I also tried placing the slots before the content inside a subgrid element, which would let us align the width of the "leading space" using plain CSS. But subgrid still has pretty limited browser support, I believe, so I wouldn't use it in production yet

Yeah I've had subgrid in the back of my mind but last time I looked browser support prevented going down that path.

[ataromoku]

@dbatiste I tried to fix Lessons by adding an icon to an expandable, but now its children are off. Do you have any ideas what we can do about this?

https://github.com/Brightspace/smart-curriculum/pull/2857#issuecomment-3628271495