fix: min-height display behaviour

shopware · Jan 10, 2025 · feb9b50 · feb9b50
1 parent cb816e2
commit feb9b50
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 7 deletions.
diff --git a/.changeset/smooth-llamas-lay.md b/.changeset/smooth-llamas-lay.md
@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/composables-next": patch
+---
+
+fix: min-height display behaviour
diff --git a/packages/composables/src/cms/useCmsElementImage.test.ts b/packages/composables/src/cms/useCmsElementImage.test.ts
@@ -5,9 +5,12 @@ import { useCmsElementImage } from "./useCmsElementImage";
 describe("useCmsElementImage", () => {
   describe("computed", () => {
     describe("containerStyle", () => {
-      it("should return minHeight css property", () => {
+      it("should return minHeight css property when displayMode is cover", () => {
         const { containerStyle } = useCmsElementImage({
           config: {
+            displayMode: {
+              value: "cover",
+            },
             minHeight: {
               value: "100px",
             },
@@ -16,6 +19,22 @@ describe("useCmsElementImage", () => {
 
         expect(containerStyle.value).toEqual({ minHeight: "100px" });
       });
+
+      it("should not return minHeight css property when displayMode is not cover", () => {
+        const { containerStyle } = useCmsElementImage({
+          config: {
+            displayMode: {
+              value: "contain",
+            },
+            minHeight: {
+              value: "100px",
+            },
+          },
+        } as CmsElementImage);
+
+        expect(containerStyle.value).toEqual({});
+      });
+
       it("should return anchorAttrs", () => {
         const { anchorAttrs } = useCmsElementImage({
           config: {

diff --git a/packages/composables/src/cms/useCmsElementImage.ts b/packages/composables/src/cms/useCmsElementImage.ts
@@ -44,8 +44,16 @@ export function useCmsElementImage(
 ): UseCmsElementImage {
   const { getConfigValue } = useCmsElementConfig(element);
 
+  const displayMode = computed(
+    () => getConfigValue("displayMode") || "initial",
+  );
+
+  const minHeight = computed(() =>
+    displayMode.value === "cover" ? getConfigValue("minHeight") : undefined,
+  );
+
   const containerStyle: ComputedRef<CSSProperties> = computed(() => ({
-    minHeight: getConfigValue("minHeight"),
+    ...(minHeight.value !== undefined && { minHeight: minHeight.value }),
   }));
 
   const anchorAttrs = computed(() => ({
@@ -78,10 +86,6 @@ export function useCmsElementImage(
     srcset: getSrcSetForMedia(element.data?.media),
   }));
 
-  const displayMode = computed(
-    () => getConfigValue("displayMode") || "initial",
-  );
-
   const isVideoElement = computed(() => {
     return !!element.data?.media?.mimeType?.includes("video");
   });
@@ -91,12 +95,12 @@ export function useCmsElementImage(
   });
 
   return {
+    displayMode,
     containerStyle,
     anchorAttrs,
     imageAttrs,
     imageContainerAttrs,
     imageLink,
-    displayMode,
     isVideoElement,
     mimeType,
   };