Simplifying the structure of s-expandable and removed outdated styles #1145
Conversation
This file contains 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
✅ Deploy Preview for stacks ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Problem
.s-expandable#1142Solution
The expandable component uses CSS tricks that are outdated and they are not needed. That is why I think easier solution can work better.
I tried to simplify the component and it works for all content inside
s-expandableand there is no need to wrap it into another container (like.s-expandable--content).This fixes the stacking order bug and also create better user experience, because there is no more jumping content as you can see in the video.
Improving
It is possible to add a simple transition and achieve the same effect (but I think it is not right to have it there).
Comparison
Before
https://www.loom.com/share/b4467d1418c54a239fce305f559a91a1
After
https://www.loom.com/share/025b413f864a4bbfa5c15c4a8b229220
When pull request is accepted
What do you think about this solution?