Panel polish: folder collapse, keyboard a11y, spacing, and shadow#45
Merged
Conversation
Folders now fade and clip away together when collapsing instead of squashing and stretching, with the caret turning in step. Collapsed folders and panels drop their hidden controls from the tab order, and a panel ending in a folder no longer carries extra space at the bottom.
Add --tw-ease-inout for the symmetric ease that was hardcoded five times (panel-body collapse, toolbar icon swap, reset spin settle), and replace an inline copy of --tw-ease-spring with the token. No behavior change — the resolved curves are identical, the values just live in one place now.
Drop the inset lit top edge from the dark panel shadows and replace the heavy three-layer drop shadow with a softer, more subdued pool. The light theme already had neither, so it is unchanged.
ryankiley
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
A few small improvements to the panel.
Smoother folder collapse. Opening and closing a folder fades its controls in and out cleanly, instead of squashing and stretching as the folder resizes. The caret turns in step with the fade.
Keyboard accessibility. A collapsed folder (or a collapsed panel) no longer keeps its hidden controls in the tab order, so keyboard and screen-reader users don't land on things they can't see.
Bottom spacing. Removed extra empty space at the bottom of a panel whose last item is a folder.
Subtler shadow. The panel's drop shadow is softer and more subdued, and no longer draws a lit highlight along its top edge.
Also recycled a couple of hardcoded easing curves into shared motion tokens (no behavior change). All CSS plus a few lines of TS; no new dependencies; tests pass.