Repository navigation
Adopt @microbit/ui's SplitView - #1386
Conversation
Upgrade @microbit/ui to 0.6.1 and replace our own SplitView with the library's, which was loosely based on it. The look is unchanged: a thin wrapper restyles the splitter with the existing background, brand grip, z-index and simulator box shadow, and pins it at 10px (the recipe's spacing token is scaled by the dense preset). Hover and pressed states match HideSplitViewButton. Behaviour that comes with the library: - The splitter is a focusable WAI-ARIA window splitter with keyboard resizing, so it needs an accessible name. Adds sidebar-resize, simulator-resize and serial-terminal-resize strings. - Drags use pointer capture, so the panes no longer need pointer-events: none to stop the simulator iframe swallowing them. - The requested size is kept when the window shrinks and restored when it grows back.
|
Preview build will be at |
The patch covering the button's shadow on the splitter had a fixed background, so it stood out when the splitter showed its hover or pressed fill. Follow those fills, with the splitter's transition.
|
The focus ring looks a bit ugly... perhaps we should do something splitter specific here. But that's one for the UI package to ponder. |
There was a problem hiding this comment.
Looks good to me.
Whilst playing around, spotted that if you move the simulator's vertical split view separator so that the simulator panel is the widest possible size, the middle coding panel becomes hidden but the undo/redo button remains visible and overlays the left panel. Hidden focusable components in the middle coding panel also remain keyboard navigable though visually hidden. I wonder if the middle panel should be fully hidden instead so that the undo/redo button is visually hidden as well and the keyboard navigation in the middle panel is not possible. It seems to also behave this way on live so it's not related to the changes here
Not sure if this is what you were referring to as ugly or if it's important, but found that the focus ring seems to be on top of some components, but under others (see right side of the focus ring which is broken by the simulator collapse button and the serial horizontal splitter) in the simulator panel. Update: After more pondering, it doesn't really impact the visibility of it and it makes sense that the components are on top, so I think it's ok to leave it as is |
Yeah I think you'd have to pull the idea of expand/collapse buttons into UI to do better here. This is part of the ugly but I also somehow feel that the offset looks worse here than elsewhere. Trying an inset focus ring might make sense in this odd case (perhaps true of large area focus in general). |
Upgrade @microbit/ui to 0.6.1 and replace our own SplitView with the
library's, which was loosely based on it.
The look is unchanged: a thin wrapper restyles the splitter with the
existing background, brand grip, z-index and simulator box shadow, and
pins it at 10px (the recipe's spacing token is scaled by the dense
preset). Hover and pressed states match HideSplitViewButton.
Behaviour that comes with the library:
resizing, so it needs an accessible name. Adds sidebar-resize,
simulator-resize and serial-terminal-resize strings.
pointer-events: none to stop the simulator iframe swallowing them.
it grows back.
Worth checking the new splitter tab stops alongside the app's custom tab handling (tabOutRef, sim/serial tab control). New strings need uploading to Crowdin.