feat(ui): Improve Tag/Pill/Alias truncation #3904
Open
+147
−175
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
|
Preview this PR with FeatureBee: https://beta.wandb.ai/?betaVersion=5217d9a8ebbbb62e57025e52c15a1560ea66115d |
connieelee
commented
Mar 18, 2025
There was a problem hiding this comment.
recommend hide whitespace
connieelee
force-pushed
the
connie/truncate-tags
branch
from
4591535 to
46e8a62
Compare
connieelee
force-pushed
the
connie/truncate-tags
branch
from
5876d2d to
e5efa46
Compare
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.
Description
https://wandb.atlassian.net/browse/WB-23679
Stacked on #3902
Currently Tag/Pill/Alias common comps only support end truncation after ~24 chars. For an upcoming feature, we need to display tags with middle truncation after 16 chars.
The current truncation strategy uses CSS, which works well for start/end truncation but not middle truncation. It also doesn't truncate to exact char counts (go to storybook and count the chars to see what I mean). For these reasons, we're switching to use the new
TruncateByCharsWithTooltipcomponent for unified & more robust truncation functionality.maxCharsandtruncationPartprops. Defaults to 24 char end truncation to match existing behavior.RemovableTag-- going forward we'll have truncation tooltips for for all tag/pill/alias variants)Wrapperprop, which is not defined for pill/alias comps.TruncateByCharsWithTooltipprovides unified handling for this as well, so we can remove all theWrapperlogic from tag compsTesting
storybook
Screen.Recording.2025-03-18.at.3.20.32.PM.mov