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 · 2026-05-26T16:03:12Z

 			this._hasListItemContent = !!this.shadowRoot.querySelector('slot:not([name])').assignedElements({ flatten: true })
 				.find(elem => elem.tagName === 'D2L-LIST-ITEM-CONTENT');
 		}
+		if (this.draggable && this.layout === 'tile' && this.tileHeader === false) {


Can this be simplified to if (this.draggable)?

Yep seems like it. My thinking was that a more specific rule would keep it from running this code "by accident" but tile-head has no impact of regular list items so it looked fine in my testing with just this.draggable.

dbatiste · 2026-05-26T16:09:01Z

+
 			.d2l-list-drag-marker-line {
 				height: 12px;
 				margin-left: -1px;


Don't feel like you need to change it... but we could probably update these two lines to margin-inline: -1px. I only mention it because margin-left and margin-right always raises red flags.

…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-placement-marker.js Outdated

dbatiste reviewed May 26, 2026

View reviewed changes

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!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

NicholasHallman commented May 12, 2026 •

edited

Loading

NicholasHallman May 26, 2026 •

edited

Loading

dbatiste May 26, 2026 •

edited

Loading