NTNGL-5467 | Side to Side Arrow Buttons#7064
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. |
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
| :host([disabled-down]) .down-layer { | ||
| cursor: default; | ||
| } | ||
| :host([side-to-side]:not(:dir(rtl))) { |
There was a problem hiding this comment.
Did anything need to be done with the origin to maintain the visual (0,0) position of the element?
There was a problem hiding this comment.
I suspect I'll need to do some moving around for the list's themselves, everything rotated just fine here.
There was a problem hiding this comment.
Hmmm... looks like we probably need to do something here. Besides the left edge, it also means that elements on the right-hand side would also be too close. I'm wondering if adjusting switching to a horizontal flex layout would be better than rotating in-place. Though the one-liner is nice.
There was a problem hiding this comment.
Yeah I think you're right... Okay I'll start on that good call
…tspaceUI/core into NTNGL-5467/flippable-arrow-buttons
| .up-layer, | ||
| .down-layer { | ||
| height: 1.2rem; | ||
| .layer { |
There was a problem hiding this comment.
I've put the up and down layers into a new layer div which allows me to easily change the flex direction while maintining the slightly larger size of the absolutly positioned buttons
There was a problem hiding this comment.
I think we probably need to make space for the overall width of the clickable targets. This screenshot shows how the clickable targets overflow their container. I know this happens in the vertical layout too, but we've accepted it there because the expected contexts all provide space, and we didn't want to change their respective layouts. In the side-to-side case though, I'm more worried, because I think it has greater chance of overlapping with adjacent click targets.
There was a problem hiding this comment.
Ah good call, should be an easy tweak
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
|
|
||
| :host([side-to-side]) d2l-icon { | ||
| /* Arrows need to be rotated in opposite direction for RTL */ | ||
| transform: rotate(calc(-90deg * var(--d2l-length-factor))); |
There was a problem hiding this comment.
I'm not opposed to the rotation, and I noticed that we do not have arrow-toggle-left and arrow-toggle-right icons, but if we preferred actual icons, we can create them. We'd define them with mirror-in-rtl to automatically flip like we do the rest of our RTL sensitive icons. I didn't mention this before because the whole thing was being rotated.
There was a problem hiding this comment.
I'm open to making new icons for this, my reason for doing this is because it's a pretty nice css only solution. In RTL we need to flip the icons around because the flex box changes the rendering order.
In LRT it's: [<][>]
And in RTL it's [>][<]
So we'd either need templating logic to flip the arrow direction, or css rotations. Using the left and right arrows here is also harmless because they don't have an aria description so you'd never be given an inaccurate description. It's not revealed information in the accessibility tree.
…tspaceUI/core into NTNGL-5467/flippable-arrow-buttons
Hitboxes with the new changes. I can also bump the buttons and the hit zones down as well? |
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
…tspaceUI/core into NTNGL-5467/flippable-arrow-buttons
2 participants
For list tiles, we want to change the directional movement arrows to left and right from up and down.
Functional Testing