NTNGL-5467 | Enable List Tile Drag and Drop by NicholasHallman · Pull Request #6973 · BrightspaceUI/core

NicholasHallman · 2026-05-12T18:57:31Z

Almost entirely css changes to re-enable drag and keyboard arrangement functionality for tiles.

The rest of the css is for properly positioning the elements and rotating the marker

Functional Tests (Demo Manual QA)

Highlighting some design decisions we made in the meeting with Glen and Tayzia

The up and down arrows work fine for tiles
The screen reader announcements and position information is fine for tiles
If a tile is draggable it should always have the tile title header

github-actions · 2026-05-12T18:59:15Z

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-6973/

Note

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

NicholasHallman

Descriptions for what some of this css is accomplishing

NicholasHallman · 2026-05-12T18:59:23Z

+			}
+
+			:host([layout="tile"]) .d2l-list-item-drag-bottom-marker {
+				right: calc(-0.9rem + 3px);


Lots of magic numbers here but to explain, the -0.9 rem is the gap between the cards and the 3px is half of the 6px that was previously used to center the markers

Thanks for spelling this out. I would not be adverse to putting this in a comment for "future-us". I am sure we'll be wondering how we arrived at this down the road.

NicholasHallman · 2026-05-12T19:00:02Z

+			:host([layout="tile"]) .d2l-list-item-drag-drop-grid {
+				display: grid;
+				grid-template-rows: 100%;
+				grid-template-columns: 1rem 1fr 1fr 1rem;
+			}


This rotates the drop targets

NicholasHallman · 2026-05-12T19:03:03Z

+			:host([layout="tile"]:not([is-draggable])) {
+				grid-template-columns:
+					[start outside-control-start] 0
+					[outside-control-end control-start] minmax(0, min-content)
 					[control-end actions-start] minmax(0, auto)
 					[actions-end end];


This varient ensures that the selection box is the left most item when the drag handle isn't present. There's a fun layout issue that prevents minmax(0, min-content) from ever equalling 0. My guess is that this is due to the content below the header spanning this column and so chrome assumes the column can't have a width of 0.

NicholasHallman · 2026-05-12T19:03:55Z

+			:host([layout="tile"][draggable]) d2l-selection-input {
+				margin: auto;
+			}


the drag handle makes the title bar slightly taller so we need to tell the selection to center itself

What's the height difference?

Without the drag handles it's 39px tall, with it's 46px. So 7 pixels

@glen-bartlett-d2l , @geurts what are your thoughts on this? I wonder if there is any way we can tighten things up so the header doesn't get thicker. Perhaps in this layout, we could render the drag handle differently so it's not quite so tall.

Just adding a comment here in case anyone is wondering what is being done with this PR. The PR itself looks fine, but there is some offline discussion happening with regards to:

Are we ok with the aesthetic of the taller tile-header

It looks like we're probably ok for (SC 2.5.8) since it seems like this gets stacked on top of the item's primary click target

Potentially rendering the arrow click targets horizontally instead (if we want to keep the tile header the same height)

@dbatiste If it's not a difficult change, I think rendering the arrow click targets horizontally is the most logical option (we would probably have to change the keyboard functionality and instructions from up-down to left-right too). It solves the grey bar height inconsistency problem, and also the mismatch between the up and down arrows moving tiles right and left in the grid. I think it still looks a bit clunky, especially when there's also a selection box, but it seems to be the best option.

Here's what I think it should look like (not as bad as I originally thought) - Figma

Sorry for the delay! I was agonizing over whether this was a better option than just leaving the grey bar higher for drag and drop (next best option), or trying to reduce the height of the buttons (not a great option, because the 24x24 hit areas have to stay the same, causing even weirder overlaps).

Thanks Glen for taking a second look at it, those changes don't look too crazy I should have another pr up by next week, thanks to you both

I think we should do a separate PR to add an option to d2l-button-move to render the horizontal layout.

Note: it's not advertised in our index of demo pages, but we have a demo page to assist working on d2l-button-move.

https://live.d2l.dev/BrightspaceUI/core/components/button/demo/button-move.html

That makes sense, get that smaller change reviewed and merged in and the rebase it in here. SGTM

…paceUI/core into NTNGL-5467/tile-mouse-drag-logic

dbatiste · 2026-05-27T16:59:09Z

 			</template>
 		</d2l-demo-snippet>

+		<h1>Tile Drag and Drop</h1>


It's just a demo page, but the demo page's h1 is rendered further above. I'd either either just render all h2s (updating the heading text to be tile specific), or I would restructure the headings for all the demos on this page to use h2s and h3s.

NicholasHallman added 4 commits May 5, 2026 16:06

add demo and enable drag and drop

f81a7ac

rearrange drag and selection

255ff60

fix for selectable and drag

1600984

drag and drop changes

a6929fc

NicholasHallman commented May 12, 2026

View reviewed changes

github-actions Bot mentioned this pull request May 12, 2026

Updating vdiff goldens for PR 6973 #6974

Closed

NicholasHallman added 3 commits May 12, 2026 16:18

only force show handle for draggable

9f3ffee

force tile header when draggable

e54ead3

limit to tiles

300a4b8

github-actions Bot mentioned this pull request May 12, 2026

Updating vdiff goldens for PR 6973 #6979

Closed

Merge branch 'main' into NTNGL-5467/tile-mouse-drag-logic

22c0502

github-actions Bot mentioned this pull request May 13, 2026

Updating vdiff goldens for PR 6973 #6983

Closed

demo for actions

a31dd6a

NicholasHallman marked this pull request as ready for review May 13, 2026 15:39

NicholasHallman requested a review from a team as a code owner May 13, 2026 15:39

dbatiste reviewed May 26, 2026

View reviewed changes

Comment thread components/list/list-item-drag-drop-mixin.js

dbatiste reviewed May 26, 2026

View reviewed changes

Comment thread components/list/list-item-drag-drop-mixin.js Outdated

NicholasHallman added 2 commits May 26, 2026 11:04

fix: remove redundent styles and fix RTL hint marker

52e170f

lint

a1be99d

NicholasHallman requested a review from dbatiste May 26, 2026 15:59

Merge branch 'main' into NTNGL-5467/tile-mouse-drag-logic

856740c

dbatiste reviewed May 26, 2026

View reviewed changes

Comment thread components/list/list-item-mixin.js Outdated

dbatiste reviewed May 26, 2026

View reviewed changes

Comment thread components/list/list-item-placement-marker.js Outdated

dbatiste reviewed May 26, 2026

View reviewed changes

Comment thread components/list/list-item-placement-marker.js Outdated

NicholasHallman added 2 commits May 26, 2026 14:04

fix: simplify logic, spelling, comment

ee332b4

Merge branch 'NTNGL-5467/tile-mouse-drag-logic' of github.com:Brights…

96ef11c

…paceUI/core into NTNGL-5467/tile-mouse-drag-logic

dbatiste reviewed May 27, 2026

View reviewed changes

Conversation

NicholasHallman commented May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 12, 2026

Uh oh!

NicholasHallman left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

NicholasHallman May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dbatiste May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

NicholasHallman commented May 12, 2026 •

edited

Loading

NicholasHallman May 26, 2026 •

edited

Loading

dbatiste May 26, 2026 •

edited

Loading