From 841455650aa56b69615c092ec3333740c2cffc70 Mon Sep 17 00:00:00 2001
From: "e.muhamethanov" <eldarmu.1m@gmail.com>
Date: Tue, 21 Jan 2025 12:27:51 +0300
Subject: [PATCH 1/2] feat(Image): add prop filter

---
 .../src/components/Image/Image.stories.tsx    | 13 ++++++++++++
 .../components/ImageBase/ImageBase.module.css |  9 ++++++++
 .../components/ImageBase/ImageBase.test.tsx   |  9 ++++++++
 .../src/components/ImageBase/ImageBase.tsx    | 21 ++++++++++++++-----
 4 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/packages/vkui/src/components/Image/Image.stories.tsx b/packages/vkui/src/components/Image/Image.stories.tsx
index f00dc1f853..a779b110c4 100644
--- a/packages/vkui/src/components/Image/Image.stories.tsx
+++ b/packages/vkui/src/components/Image/Image.stories.tsx
@@ -7,6 +7,19 @@ const story: Meta<ImageProps> = {
   title: 'Blocks/Image',
   component: Image,
   parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+  argTypes: {
+    filter: {
+      control: { type: 'select' },
+      options: ['blur', 'contrast', 'grayscale', 'hue-rotate', 'drop-shadow'],
+      mapping: {
+        'blur': 'blur(5px)',
+        'contrast': 'contrast(200%)',
+        'grayscale': 'grayscale(80%)',
+        'hue-rotate': 'hue-rotate(90deg)',
+        'drop-shadow': 'drop-shadow(16px 16px 20px red) invert(75%)',
+      },
+    },
+  },
 };
 
 export default story;
diff --git a/packages/vkui/src/components/ImageBase/ImageBase.module.css b/packages/vkui/src/components/ImageBase/ImageBase.module.css
index 59c3bf2438..fb8cbc2e9a 100644
--- a/packages/vkui/src/components/ImageBase/ImageBase.module.css
+++ b/packages/vkui/src/components/ImageBase/ImageBase.module.css
@@ -80,6 +80,15 @@
   );
 }
 
+.withFilter {
+  --vkui_internal--ImageBase_object_filter_default: none;
+
+  filter: var(
+    --vkui_internal--ImageBase_object_filter,
+    var(--vkui_internal--ImageBase_object_filter_default)
+  )
+}
+
 .loaded .img {
   visibility: visible;
 }
diff --git a/packages/vkui/src/components/ImageBase/ImageBase.test.tsx b/packages/vkui/src/components/ImageBase/ImageBase.test.tsx
index ccfc0bd45b..d617db5f25 100644
--- a/packages/vkui/src/components/ImageBase/ImageBase.test.tsx
+++ b/packages/vkui/src/components/ImageBase/ImageBase.test.tsx
@@ -223,6 +223,15 @@ describe(ImageBase, () => {
     });
   });
 
+  it('should apply custom filter style', () => {
+    render(<ImageBaseTest src="#" filter="blur(5px)" />);
+
+    expect(getImageBaseImgEl()).toHaveClass(styles.withFilter);
+    expect(getImageBaseImgEl()).toHaveStyle({
+      '--vkui_internal--ImageBase_object_filter': 'blur(5px)',
+    });
+  });
+
   describe('DEV errros', () => {
     beforeEach(() => setNodeEnv('development'));
     afterEach(() => setNodeEnv('test'));
diff --git a/packages/vkui/src/components/ImageBase/ImageBase.tsx b/packages/vkui/src/components/ImageBase/ImageBase.tsx
index 3353d243ed..6b6db61f07 100644
--- a/packages/vkui/src/components/ImageBase/ImageBase.tsx
+++ b/packages/vkui/src/components/ImageBase/ImageBase.tsx
@@ -115,6 +115,11 @@ export interface ImageBaseProps
    * см. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming
    */
   elementTiming?: string;
+  /**
+   * Пользовательское значения стиля filter
+   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/filter)
+   */
+  filter?: React.CSSProperties['filter'];
 }
 
 const getObjectFitClassName = (objectFit: React.CSSProperties['objectFit']) => {
@@ -177,6 +182,7 @@ export const ImageBase: React.FC<ImageBaseProps> & {
   withTransparentBackground,
   objectFit = 'cover',
   objectPosition,
+  filter,
   keepAspectRatio = false,
   getRootRef,
   elementTiming,
@@ -256,11 +262,15 @@ export const ImageBase: React.FC<ImageBaseProps> & {
     [size],
   );
 
-  const imgStyles: CSSCustomProperties<string | number> | undefined = objectPosition
-    ? {
-        '--vkui_internal--ImageBase_object_position': objectPosition,
-      }
-    : undefined;
+  const imgStyles:
+    | CSSCustomProperties<React.CSSProperties['objectPosition'] | React.CSSProperties['filter']>
+    | undefined =
+    objectPosition || filter
+      ? {
+          '--vkui_internal--ImageBase_object_position': objectPosition,
+          '--vkui_internal--ImageBase_object_filter': filter,
+        }
+      : undefined;
 
   const keepAspectRationStyles = keepAspectRatio
     ? {
@@ -291,6 +301,7 @@ export const ImageBase: React.FC<ImageBaseProps> & {
               styles.img,
               getObjectFitClassName(objectFit),
               objectPosition && styles.withObjectPosition,
+              filter && styles.withFilter,
               keepAspectRatio && styles.imgKeepRatio,
             )}
             crossOrigin={crossOrigin}

From 146605da870698a5b870e2f714d439ed1d2bf188 Mon Sep 17 00:00:00 2001
From: "e.muhamethanov" <eldarmu.1m@gmail.com>
Date: Tue, 21 Jan 2025 12:36:22 +0300
Subject: [PATCH 2/2] fix(Image): fix prettier

---
 packages/vkui/src/components/ImageBase/ImageBase.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vkui/src/components/ImageBase/ImageBase.module.css b/packages/vkui/src/components/ImageBase/ImageBase.module.css
index fb8cbc2e9a..b87263396e 100644
--- a/packages/vkui/src/components/ImageBase/ImageBase.module.css
+++ b/packages/vkui/src/components/ImageBase/ImageBase.module.css
@@ -86,7 +86,7 @@
   filter: var(
     --vkui_internal--ImageBase_object_filter,
     var(--vkui_internal--ImageBase_object_filter_default)
-  )
+  );
 }
 
 .loaded .img {