diff --git a/packages/vkui/src/components/Search/Search.module.css b/packages/vkui/src/components/Search/Search.module.css index b7c1e450cfc..49bd7cbd69e 100644 --- a/packages/vkui/src/components/Search/Search.module.css +++ b/packages/vkui/src/components/Search/Search.module.css @@ -26,9 +26,10 @@ } .Search__field { - flex: 2; position: relative; display: flex; + flex-grow: 2; + flex-basis: 0%; block-size: var(--vkui_internal--search_height); background-color: var(--vkui--color_search_field_background); border-radius: var(--vkui--size_border_radius--regular); @@ -158,30 +159,33 @@ } .Search__after { - flex: 0; - transform-origin: left; - min-inline-size: initial; + position: relative; + display: flex; + flex-grow: 0; + flex-basis: 0%; + min-inline-size: 0; max-inline-size: min-content; + transition: flex-grow 0.3s var(--vkui--animation_easing_platform); pointer-events: none; - transition-timing-function: var(--vkui--animation_easing_platform); - transition-duration: 0.3s; - transition-property: flex, margin-inline; - overflow: hidden; - margin-inline: 0; } .Search--focused .Search__after, .Search--has-value .Search__after { - flex: 1; + flex-grow: 1; pointer-events: initial; - margin-inline: 4px calc(4px - var(--vkui--size_base_padding_horizontal--regular)); } -.Search__afterText { +.Search__after::before, +.Search__after::after { + content: ''; + flex-shrink: 0; display: block; - white-space: nowrap; - text-overflow: clip; - overflow: hidden; + inline-size: 4px; + block-size: 100%; +} + +.Search--withPadding .Search__after::after { + margin-inline-end: calc(-1 * var(--vkui--size_base_padding_horizontal--regular)); } .Search__findButton { diff --git a/packages/vkui/src/components/Search/Search.tsx b/packages/vkui/src/components/Search/Search.tsx index 0094f7681f5..07131fc846b 100644 --- a/packages/vkui/src/components/Search/Search.tsx +++ b/packages/vkui/src/components/Search/Search.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons'; -import { classNames, noop } from '@vkontakte/vkjs'; +import { classNames, hasReactNode, noop } from '@vkontakte/vkjs'; import { useAdaptivity } from '../../hooks/useAdaptivity'; import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender'; import { useBooleanState } from '../../hooks/useBooleanState'; @@ -92,6 +92,8 @@ export const Search = ({ const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender(); const platform = usePlatform(); + const hasAfter = platform === 'ios' && hasReactNode(after); + const onFocus = (e: React.FocusEvent) => { setFocusedTrue(); inputProps.onFocus && inputProps.onFocus(e); @@ -164,7 +166,7 @@ export const Search = ({ sizeY === 'compact' && styles['Search--sizeY-compact'], isFocused && styles['Search--focused'], hasValue && styles['Search--has-value'], - after && styles['Search--has-after'], + hasAfter && styles['Search--has-after'], iconProp && styles['Search--has-icon'], inputProps.disabled && styles['Search--disabled'], !noPadding && styles['Search--withPadding'], @@ -225,18 +227,21 @@ export const Search = ({ )} - {platform === 'ios' && after && ( - + {hasAfter && ( +
+ +
)} ); diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-ios-webkit-dark-1-snap.png index de643b90f3f..7513bdf2597 100644 --- a/packages/vkui/src/components/Search/__image_snapshots__/search-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Search/__image_snapshots__/search-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:09c30da11365f6009ba30f315438c29875b6c63123ac1a8a507870346d2ef283 -size 47667 +oid sha256:b3d53e3365ee4f154685cbf75e87e5b8f9cb15466727dafbce87cba1c43da58b +size 47643 diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-ios-webkit-light-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-ios-webkit-light-1-snap.png index 160921c5eae..a9a043e09c5 100644 --- a/packages/vkui/src/components/Search/__image_snapshots__/search-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Search/__image_snapshots__/search-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:376f4e9f9cd3dbc11ee5dbbbe1f83c00d855ed53381f984d000a225ffa7d463f +oid sha256:dbfe660591874d9124bcd1d8cb8cfb2d80c58f6af0575ba81b684c4804ac1427 size 47707 diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-android-chromium-dark-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-android-chromium-dark-1-snap.png index c636936a71d..009af6fe0d2 100644 --- a/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3091331a09966e05338f7764210fda7cebb0d9e167812876fec83ce750b8341a -size 2694 +oid sha256:760ce4d91ffe6b9358c05cd958c3be52c97e891d3c3b8738dd7a9dc115c5a4f2 +size 2453 diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-android-chromium-light-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-android-chromium-light-1-snap.png index 10216149741..c42a009e9c7 100644 --- a/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ac27552472cfe95f83b500ab12b674f88fb8d7ab5f27d347cf528c8d12bc2256 -size 2607 +oid sha256:ea264833ac18e7076b083aaf0a09b82a2b5932485dd43db846918d5b65ceb56a +size 2368 diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-ios-webkit-dark-1-snap.png index 1fa9d0c9675..339187bb2f4 100644 --- a/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c079add69dd81ef8fffe3f8593f371e2835a5b5633bed46e0770bf3277732377 -size 2465 +oid sha256:ad862f386f7594a90250270ffad40b78f6700681e2daac0c473ed84dfea4b7ab +size 2466 diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-ios-webkit-light-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-ios-webkit-light-1-snap.png index a0f45a3c11d..94e8dc3dd72 100644 --- a/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6856298af1a7005bed5c3ad3d1ddeee9b4d584717a9b1a87ba1459bcbd164fb4 -size 2396 +oid sha256:b2be8e83b4cd8d65a25b69ac5d2abfd5753d12646d72021f48481c18f1957ea6 +size 2393 diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-vkcom-chromium-dark-1-snap.png index c636936a71d..009af6fe0d2 100644 --- a/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-vkcom-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-vkcom-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3091331a09966e05338f7764210fda7cebb0d9e167812876fec83ce750b8341a -size 2694 +oid sha256:760ce4d91ffe6b9358c05cd958c3be52c97e891d3c3b8738dd7a9dc115c5a4f2 +size 2453 diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-vkcom-chromium-light-1-snap.png index 10216149741..c42a009e9c7 100644 --- a/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-vkcom-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-vkcom-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ac27552472cfe95f83b500ab12b674f88fb8d7ab5f27d347cf528c8d12bc2256 -size 2607 +oid sha256:ea264833ac18e7076b083aaf0a09b82a2b5932485dd43db846918d5b65ceb56a +size 2368 diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-vkcom-firefox-dark-1-snap.png index 97c481f6560..4d3ec336af4 100644 --- a/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-vkcom-firefox-dark-1-snap.png +++ b/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-vkcom-firefox-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:fea34f91998175dc124fbf481c1bab48559faac15069e75b807c9839f600cb1f -size 3021 +oid sha256:e77d60a008aaf41c9ca416722b0995ccabc0bc2a45fa0fcf3c827a13fe919147 +size 2999 diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-vkcom-firefox-light-1-snap.png index 62c5f4d006f..6aa4e81cd11 100644 --- a/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-vkcom-firefox-light-1-snap.png +++ b/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-vkcom-firefox-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:034e698a246e091eddbe7bd41ae8d7728d0f9fe9a474df4ad2cd0b3e01071d07 -size 3004 +oid sha256:58e28fc595b8e3e76b2656ee920c8fdc3fb8423fa6fd7094a2f13e4781b2d494 +size 2998 diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-vkcom-webkit-dark-1-snap.png index 1fa9d0c9675..339187bb2f4 100644 --- a/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-vkcom-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-vkcom-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c079add69dd81ef8fffe3f8593f371e2835a5b5633bed46e0770bf3277732377 -size 2465 +oid sha256:ad862f386f7594a90250270ffad40b78f6700681e2daac0c473ed84dfea4b7ab +size 2466 diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-vkcom-webkit-light-1-snap.png index a0f45a3c11d..94e8dc3dd72 100644 --- a/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Search/__image_snapshots__/search-shows-after-when-focused-on-ios-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6856298af1a7005bed5c3ad3d1ddeee9b4d584717a9b1a87ba1459bcbd164fb4 -size 2396 +oid sha256:b2be8e83b4cd8d65a25b69ac5d2abfd5753d12646d72021f48481c18f1957ea6 +size 2393