feat(webapp): Make <CollapseBox /> component #1474
Merged
Conversation
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
Contributor
size-limit report 📦
|
Codecov Report
@@ Coverage Diff @@
## main #1474 +/- ##
==========================================
+ Coverage 68.66% 68.66% +0.01%
==========================================
Files 131 131
Lines 4316 4342 +26
Branches 1166 1175 +9
==========================================
+ Hits 2963 2981 +18
- Misses 1347 1355 +8
Partials 6 6
Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here. |
Contributor
Author
|
/create-server |
eh-am
requested changes
Sep 8, 2022
Collaborator
There was a problem hiding this comment.
Looks good!
Few thoughts:
-
Would be nice to have a storybook example since this is effectively a new, reusable component. This is so that new devs can refer to this "library of components"
-
Behaviour is weird when title is empty:
https://user-images.githubusercontent.com/6951209/189142078-7e9999dc-9881-4aa1-9dfa-7742c83b3e39.mp4
- if a title MUST not be empty, then we should add least document this invariant
- also if we are supporting empty title, chevron should always be on the right, this is so that the user can immediately develop familiarity (if i know one
CollapsibleBoxthen I know all of them)
- Another thing I have strong opinions is to ALWAYS show the chevron. Reason is for discoverability. I want to be able to figure out what the component does immediately, I shouldn't need to hover. Specially because not all people interact with a hover. (yeah i know, we also have tooltips, but still)
| </div> | ||
| </Box> | ||
| <Box> | ||
| <CollapseBox title={`${appName.unwrapOr('')} Descriptive Statistics`}> |
Collaborator
There was a problem hiding this comment.
When appName is empty, this renders
Descriptive Statistics
Notice the space at the beginning.
Suggested change
| <CollapseBox title={`${appName.unwrapOr('')} Descriptive Statistics`}> | |
| <CollapseBox | |
| title={`${appName | |
| .map((a) => `${a} Descriptive Statistics`) | |
| .unwrapOr('')}`} | |
| > |
Map only runs if it's a Just, ie. there's an appName defined.
Contributor
Author
|
updated! @eh-am |
eh-am
approved these changes
Sep 9, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Brief
Changes
https://user-images.githubusercontent.com/7372044/189065862-f43c2f4e-bc53-488f-98ff-fb8259c3e2f9.mp4