🪟 🐛 🎨 Fix stream table icon checkboxes and icons #21108
Merged
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
octavia-squidington-iv
added
area/platform
krishnaglick
approved these changes
Jan 6, 2023
edmundito
force-pushed
the
edmundito/fix-stream-table-icons-checkboxes
branch
from
80927fd
to
00d5e00
Compare
* Add custom icons from design file * Add opacity animation
jbfbell
pushed a commit
that referenced
this pull request
Jan 13, 2023
* Update new stream table icon positioning and style * Add custom icons from design file * Add opacity animation * Fix checkbox sizing in current streams table * Update test snapshots
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.
What
Fixes #20974
This fixes an issue where the checkboxes in the streams table (current and new) would collapse when the stream was changed in any way. Additionally, it updates the icons to use the SVGs provided in the design so that the design more closely matches the Figma.
Current table (ignore the gap between rows, that's a separate bug):
New table:
How
For the current table: CSS adjustments and icon swapping. The icon container has a fixed size so that the spacing remains there even when there's no icon.
For the new table: Fixed size icon container and added new icons. While reworking the icon component, I added the ability to fade in and out the current icon by updating the status from an effect and using opacity transitions.
Recommended reading order
From top to bottom