From c5df56ddbeb58b34f6921c52840fdc8d9f774668 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vin=C3=ADcius=20Seixas?= <vinicius.sseixaso@gmail.com>
Date: Wed, 7 Aug 2024 14:50:15 -0300
Subject: [PATCH] Fix: Issue #88 - Distorted images on stores (#90)

#### What problem is this solving?

This PR aims to fix the [Issue
#88](https://github.com/vtex-apps/store-image/issues/88). An issue
generated in release
[v0.22.0](https://github.com/vtex-apps/store-image/releases/tag/v0.22.0),
which allowed setting the image height of an `image-list` via Admin Site
Editor, but set `maxHeight` as default for the image's `height` prop.
This distorted the image in accounts that had a value set for maxHeight.

With this PR, the image height will no longer receive maxHeight as the
default value, requiring the user to set a value for the prop via Admin
Site Editor.

#### How to test it?

Access the [Site
Editor](https://vsseixaso--brunoferrini.myvtex.com/admin/cms/site-editor)
and follow this sequence of blocks:

**HEADER > Header-Desktop > Slider Layout** then click on **Image
List**.

Then, access any image and set a value in the `Height` field, example:
`300px`.
Save and apply, now you can see the height of the image is different,
but defined by your change, and not by default.

#### Screenshots or example usage:

[Before](https://vsseixasobugado--brunoferrini.myvtex.com)


![image](https://github.com/user-attachments/assets/3b7009c6-7cd3-433b-800a-7b63dc90bfae)

[After](https://vsseixaso--brunoferrini.myvtex.com)


![image](https://github.com/user-attachments/assets/da187287-9cda-455e-a5ad-577ac9eaa996)

#### Describe alternatives you've considered, if any.

**Follow up**: Add an option to set height for all images in the
image-list, for now it's necessary set one by one.

#### How does this PR make you feel? [:link:](http://giphy.com/)


![](https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExeGpubzhrdWRpNXZocjBpNWkyNXd3NjRsbG5wdTh3amdxeHlzbXJxMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/S1YVlFY74PCs0CLGfK/giphy.gif)
---
 CHANGELOG.md                  | 4 ++++
 react/modules/imageAsList.tsx | 8 ++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e0538ea..dead584 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+
+- Adds the height prop to the image but without adding the maxHeight as default value
+
 ## [0.22.0] - 2024-06-25
 
 ### Added
diff --git a/react/modules/imageAsList.tsx b/react/modules/imageAsList.tsx
index 864b390..2f47465 100644
--- a/react/modules/imageAsList.tsx
+++ b/react/modules/imageAsList.tsx
@@ -6,7 +6,7 @@ import type { ImagesSchema } from '../ImageTypes'
 export const getImagesAsJSXList = (
   images: ImagesSchema,
   isMobile: boolean,
-  height: string | number,
+  maxHeight: string | number,
   preload?: boolean,
   experimentalPreventLayoutShift?: boolean,
   experimentalSetExplicitDimensions?: boolean
@@ -21,7 +21,7 @@ export const getImagesAsJSXList = (
         experimentalPreventLayoutShift: experimentalPreventLayoutShiftChild,
         experimentalSetExplicitDimensions: experimentalSetExplicitDimensionsChild,
         width = '100%',
-        height: _height,
+        height,
         ...props
       },
       idx
@@ -30,9 +30,9 @@ export const getImagesAsJSXList = (
         key={idx}
         src={isMobile && mobileImage ? mobileImage : image}
         alt={description}
-        maxHeight={height}
+        maxHeight={maxHeight}
         width={width}
-        height={_height ?? height}
+        height={height}
         experimentalPreventLayoutShift={
           experimentalPreventLayoutShift ?? experimentalPreventLayoutShiftChild
         }