From 02a9824a17f613c26cb6b8edbb682183fbe9a38c Mon Sep 17 00:00:00 2001
From: Inomdzhon Mirdzhamolov <i.mirdzhamolov@vk.team>
Date: Fri, 30 Aug 2024 15:22:22 +0300
Subject: [PATCH] fix(Search): edit after transition
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- обернул кнопку под `after` в отдельный `<div>`;
- удалил анимацию `margin-inline` путём выставления отступов через `::before` и `::after` у нового `<div>`;
- у `::after` минусуем отступ справа, который выставляется у `Search` если он есть (завязываемся на `.Search--withPadding`);
- удаляем `Search__afterText`, т.к. у `Button` уже есть логика обрезания текста (⚠️ правда через `ellipsis`, а не `clip`);
- обновили скриншоты, т.к. привели отступы к соответствие с дизайном.

Дополнительно:

- для ясности точечно применяем `flex-grow` и `flex-basis` вместо шортката `flex`;
- в условие проверки на выставление `styles['Search--has-after']` добавляем `platform === 'ios'`;
- выносом проверку `platform === 'ios' && after` в переменную.
---
 .../src/components/Search/Search.module.css   | 34 +++++++++++--------
 .../vkui/src/components/Search/Search.tsx     | 33 ++++++++++--------
 .../search-ios-webkit-dark-1-snap.png         |  4 +--
 .../search-ios-webkit-light-1-snap.png        |  2 +-
 ...ed-on-ios-android-chromium-dark-1-snap.png |  4 +--
 ...d-on-ios-android-chromium-light-1-snap.png |  4 +--
 ...-focused-on-ios-ios-webkit-dark-1-snap.png |  4 +--
 ...focused-on-ios-ios-webkit-light-1-snap.png |  4 +--
 ...used-on-ios-vkcom-chromium-dark-1-snap.png |  4 +--
 ...sed-on-ios-vkcom-chromium-light-1-snap.png |  4 +--
 ...cused-on-ios-vkcom-firefox-dark-1-snap.png |  4 +--
 ...used-on-ios-vkcom-firefox-light-1-snap.png |  4 +--
 ...ocused-on-ios-vkcom-webkit-dark-1-snap.png |  4 +--
 ...cused-on-ios-vkcom-webkit-light-1-snap.png |  4 +--
 14 files changed, 61 insertions(+), 52 deletions(-)

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<HTMLInputElement>) => {
     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 = ({
           )}
         </div>
       </div>
-      {platform === 'ios' && after && (
-        <Button
-          mode="tertiary"
-          size="m"
-          className={styles['Search__after']}
-          focusVisibleMode="inside"
-          onClick={onCancel}
-          onFocus={setFocusedTrue}
-          onBlur={setFocusedFalse}
-        >
-          <span className={styles['Search__afterText']}>{after}</span>
-        </Button>
+      {hasAfter && (
+        <div className={styles['Search__after']}>
+          <Button
+            mode="tertiary"
+            size="m"
+            focusVisibleMode="inside"
+            hoverMode="opacity"
+            activeMode="opacity"
+            onClick={onCancel}
+            onFocus={setFocusedTrue}
+            onBlur={setFocusedFalse}
+          >
+            {after}
+          </Button>
+        </div>
       )}
     </div>
   );
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