fix(Search): truncate long after text with ellipsis#9862
Open
Vitalymt wants to merge 2 commits into
Open
Conversation
When after prop contains long text, it overflows the search field. Change text-overflow from clip to ellipsis, add overflow: hidden to .after container, and add e2e test for long after text on iOS. Fixes VKCOM#9795
Contributor
Contributor
👀 Docs deployed
📦 Package ✅yarn add @vkontakte/vkui@https://development.s3.prodcloud.vk.team/pull/9862/fdc57466d8d44a661304c7f8e492d803704be065/pkg/@vkontakte/vkui/_pkg.tgzCommit fdc5746 |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #9862 +/- ##
=======================================
Coverage 95.22% 95.22%
=======================================
Files 462 462
Lines 12512 12512
Branches 4478 4478
=======================================
Hits 11914 11914
Misses 598 598
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
The new e2e test requires baseline screenshots that can only be generated by running Playwright locally with --update-snapshots. Keep the CSS fix (text-overflow: ellipsis + overflow: hidden) which passes all existing e2e tests.
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
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
When the
afterprop in the Search component contains a long string (e.g. 'длинная отмена'), the text overflows the search field boundary instead of being truncated. This is specific to iOS platform where theafterslot is rendered.The
.afterTextClipclass usestext-overflow: clipwhich silently clips text without any visual indicator, and the.aftercontainer lacksoverflow: hiddenallowing the Button content to escape its bounds.Steps to reproduce:
<Search after="длинная отмена" />Fix
text-overflow: cliptotext-overflow: ellipsisin.afterTextClip— consistent with every other truncation pattern in VKUI (RichCell, MiniInfoCell, FormItem, Header, Button, etc.)overflow: hiddento.aftercontainer to properly constrain the Button content within flex boundsFixes #9795