Dunk.list#6802
Conversation
|
Thanks for the PR! 🎉 We've deployed an automatic preview for this PR - you can see your changes here:
Note The build needs to finish before your changes are deployed. |
duncanuszkay-d2l
force-pushed
the
dunk.dirty-dialog
branch
9 times, most recently
from
54c986a to
7903c49
Compare
duncanuszkay-d2l
force-pushed
the
dunk.list
branch
from
e261b2a to
bdef83d
Compare
duncanuszkay-d2l
force-pushed
the
dunk.dirty-dialog
branch
from
e3d0884 to
d345775
Compare
duncanuszkay-d2l
force-pushed
the
dunk.list
branch
from
bdef83d to
fde722a
Compare
duncanuszkay-d2l
force-pushed
the
dunk.list
branch
from
aa0509a to
2fcf9dc
Compare
duncanuszkay-d2l
force-pushed
the
dunk.list
branch
2 times, most recently
from
0212eaa to
6fa30b9
Compare
duncanuszkay-d2l
force-pushed
the
dunk.list
branch
from
09c012b to
08eab4a
Compare
duncanuszkay-d2l
force-pushed
the
dunk.list
branch
2 times, most recently
from
8e89f82 to
3ea9f2c
Compare
duncanuszkay-d2l
force-pushed
the
dunk.list
branch
from
3ea9f2c to
d2a1f58
Compare
| this._selectAllDisabled = true; | ||
| break; | ||
| case 'loading': | ||
| setTimeout(() => { this._selectAllDisabled = this.dataState !== 'clean'; }, 800); |
There was a problem hiding this comment.
In this iteration, disabling controls is a responsibility assumed by the caller, since they're picking and choosing which controls to include in their slot.
The alternative would be to go programmatically disable everything within the control slot- this might not be desirable for all use cases, especially if those controls are part of a flow in which the loading backdrop would go away, E.G.
- User clicks a checkbox in the list controls to only show students who are failing the course in a list.
- Since this would require a non-trivial load time, the backdrop is triggered and the overlay appears
- The user changes their mind, they actually want to keep the non-failing students in the list
- If the list controls were all greyed out, they would have no choice but to click the refresh button, wait for it to load, then switch back to the selection they wanted
| _breakpoint: { type: Number, reflect: true }, | ||
| _slimColor: { type: Boolean, reflect: true, attribute: '_slim-color' } | ||
| _slimColor: { type: Boolean, reflect: true, attribute: '_slim-color' }, | ||
| _backdropTriggered: { type: Boolean, reflect: true } |
There was a problem hiding this comment.
This state attribute is a defensive measure to avoid breaking or changing existing list users. It records if the backdrop feature has ever been used, which opts into the new styles below.
| :host([_backdropTriggered]) { | ||
| position: relative; | ||
| } |
There was a problem hiding this comment.
The backdrop must be rendered within a stacking context so that it doesn't leak out and render over a parent element or the entire page.
| :host([_backdropTriggered]) slot { | ||
| z-index: 2; | ||
| } | ||
| :host([_backdropTriggered]) d2l-backdrop-loading { | ||
| z-index: 1; | ||
| } | ||
| :host([_backdropTriggered]) #list-slot { | ||
| z-index: 0; | ||
| } |
There was a problem hiding this comment.
For most cases, I'd expect that we could ignore this by:
- Only including the items that will be stacked on top of each other in the stacking context, by introducing a
position:relativediv that wraps around those specific elements - Rely on the element ordering to specify the stacking order
Unfortunately, adding the position:relative div around just those elements was causing a 1px discrepancy in height when combined with a negative margin (slack thread).
To avoid addressing that difficult issue, I've instead opted to make the list itself a stacking context, and manually specify an order that ensures that only the list items (in #list-slot) are overlaid by the backdrop.
| selectAllPagesAllowed: { type: Boolean, attribute: 'select-all-pages-allowed' }, | ||
| /** | ||
| * Whether to disable and visually grey out the select all items checkbox | ||
| * @type {boolean} | ||
| */ | ||
| selectAllPagesDisabled: { type: Boolean, attribute: 'select-all-pages-disabled' }, |
There was a problem hiding this comment.
Having both of these properties is not ideal since the difference between Allowed and Disabled isn't clear just in their names.
I also considered using disabled as the attribute name, but I thought this carried the implication that all of the slotted items would be disabled too, which is not the case by design.
Any ideas on how to make this nicer without breaking the existing API are welcome 😄
|
Discovered some issues relating to scrolling and dialog positioning, returning to draft while they're being resolved. |
1 participant
https://desire2learn.atlassian.net/browse/GAUD-9707
https://desire2learn.atlassian.net/browse/GAUD-9706
We want to add a loading overlay onto our list element, similar to what we added onto the table.
This feature is useful in cases where reloading the table data is slow enough that it's worth providing visual notice to the user and/or letting the user add all of their filters and confirm before starting the load.
Demo:
Recording.2026-06-15.114115.mp4