From acb5384e7f51c6d256a4d1b935ad4c52b286c705 Mon Sep 17 00:00:00 2001
From: gcornut <guillaume.cornut@lumapps.com>
Date: Wed, 23 Feb 2022 14:17:53 +0100
Subject: [PATCH] fix(thumbnail): fix original aspect ratio on ios safari

---
 CHANGELOG.md                                              | 4 ++++
 .../lumx-core/src/scss/components/thumbnail/_index.scss   | 7 +++++--
 .../lumx-react/src/components/thumbnail/Thumbnail.tsx     | 8 +++++++-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f32ee9694..c2bd3cac0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+-   Thumbnail: fix image original aspect ratio on ios safari.
+
 ## [2.2.3][] - 2022-02-07
 
 ### Added
diff --git a/packages/lumx-core/src/scss/components/thumbnail/_index.scss b/packages/lumx-core/src/scss/components/thumbnail/_index.scss
index 3dc68a28a..f4916121b 100644
--- a/packages/lumx-core/src/scss/components/thumbnail/_index.scss
+++ b/packages/lumx-core/src/scss/components/thumbnail/_index.scss
@@ -39,11 +39,14 @@
 
     &__image {
         display: block;
-        width: fit-content;
         max-width: 100%;
-        height: fit-content;
         max-height: 100%;
         font-size: 0;
+
+        &--has-defined-size {
+            width: fit-content;
+            height: fit-content;
+        }
     }
 
     &__background,
diff --git a/packages/lumx-react/src/components/thumbnail/Thumbnail.tsx b/packages/lumx-react/src/components/thumbnail/Thumbnail.tsx
index a75caae0a..f5ff1dd19 100644
--- a/packages/lumx-react/src/components/thumbnail/Thumbnail.tsx
+++ b/packages/lumx-react/src/components/thumbnail/Thumbnail.tsx
@@ -188,7 +188,13 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
                         ...focusPointStyle,
                     }}
                     ref={mergeRefs(setImgElement, propImgRef)}
-                    className={classNames(`${CLASSNAME}__image`, isLoading && `${CLASSNAME}__image--is-loading`)}
+                    className={classNames(
+                        handleBasicClasses({
+                            prefix: `${CLASSNAME}__image`,
+                            isLoading,
+                            hasDefinedSize: Boolean(imgProps?.height && imgProps.width),
+                        }),
+                    )}
                     crossOrigin={crossOrigin}
                     src={image}
                     alt={alt}