feat(SW-3152): Respecting image aspect ratio inside image gallery/lightbox

* feat(SW-3152): Respecting image aspect ratio inside image gallery/lightbox * feat(BOOK-144): Make image clickable instead of a button to avoid being able to click outside of the image area Approved-by: Bianca Widstam Approved-by: Chuma Mcphoy (We Ahead)
2025-09-15 09:02:48 +00:00
parent 800948bb94
commit b437f8b806
5 changed files with 122 additions and 126 deletions
--- a/packages/design-system/lib/components/Lightbox/FullView/fullView.module.css
+++ b/packages/design-system/lib/components/Lightbox/FullView/fullView.module.css
@@ -1,12 +1,13 @@
-.fullViewContainer {
+.fullView {
  background-color: var(--UI-Text-High-contrast);
+  width: 100%;
  height: 100%;
  padding: var(--Space-x3) var(--Space-x2);
  position: relative;
  align-items: center;
  justify-items: center;
  display: grid;
-  grid-template-rows: auto 1fr auto;
+  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  place-content: center;
  gap: var(--Space-x5);
@@ -32,31 +33,45 @@
  color: var(--Text-Inverted);
 }

-.imageContainer {
+.content {
  position: relative;
  width: 100%;
  height: 100%;
-  max-height: 25rem;
-  margin-top: var(--Space-x5);
+}
+
+/* This container needs to be absolutely positioned because otherwise the animation won't work correctly */
+.motionContainer {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

 .imageWrapper {
-  position: absolute;
-  width: 100%;
-  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x2);
+  align-items: center;
+  justify-content: center;
+  width: min(1454px, 100%);
+  height: min(1454px, 100%);
 }

 .image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+  object-fit: contain;
  border-radius: var(--Corner-radius-Medium);
+  /* Override Next.js Image styles, we can't set width/height on the image as we don't know the aspect ratio of the image */
+  width: auto !important;
+  height: auto !important;
+  position: relative !important;
+  max-width: 100%;
+  max-height: 100%;
 }

-.imageCaption {
+.caption {
  color: var(--Text-Inverted);
-  position: absolute;
-  top: calc(-1 * var(--Space-x5));
 }

@media screen and (max-width: 767px) {
@@ -65,63 +80,26 @@
  }
 }

-@media screen and (min-width: 768px) and (max-width: 1366px) {
-  .fullViewContainer {
-    padding: var(--Space-x5);
-  }
-
-  .imageContainer {
-    height: 100%;
-    max-height: 560px;
-  }
-}
-
@media screen and (min-width: 768px) {
-  .closeButton {
-    position: fixed;
-    top: var(--Space-x15);
-    right: var(--Space-x15);
-  }
-
-  .fullViewContainer {
-    margin-top: 0;
+  .fullView {
    padding: var(--Space-x5);
-    grid-template-rows: auto 1fr auto;
-    width: 100%;
-    height: 100%;
  }

-  .imageContainer {
-    width: 70%;
-    max-width: 1454px;
-    max-height: 700px;
+  .closeButton {
+    top: var(--Space-x4);
+    right: var(--Space-x4);
  }

  .navigationButton {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
-    background-color: var(--Component-Button-Inverted-Fill-Default);
-    color: var(--Component-Button-Inverted-On-fill-Default);
-    border-radius: var(--Corner-radius-rounded);
-    padding: 10px;
-    cursor: pointer;
-    border-width: 0;
-    display: flex;
-    z-index: 1;
-    box-shadow: 0px 0px 8px 1px #0000001a;

-    &:hover {
-      background-color: var(--Component-Button-Inverted-Fill-Hover);
-      color: var(--Component-Button-Inverted-On-fill-Hover);
+    &.next {
+      right: var(--Space-x5);
+    }
+    &.prev {
+      left: var(--Space-x5);
    }
  }
-
-  .fullViewNextButton {
-    right: var(--Space-x5);
-  }
-
-  .fullViewPrevButton {
-    left: var(--Space-x5);
-  }
 }
--- a/packages/design-system/lib/components/Lightbox/FullView/index.tsx
+++ b/packages/design-system/lib/components/Lightbox/FullView/index.tsx
@@ -10,8 +10,8 @@ import { IconButton } from '../../IconButton'
 import { MaterialIcon } from '../../Icons/MaterialIcon'
 import { Typography } from '../../Typography'

-import styles from './fullView.module.css'
 import { LightboxImage } from '../index'
+import styles from './fullView.module.css'

 type FullViewProps = {
  image: LightboxImage
@@ -36,8 +36,14 @@ export default function FullView({
  const [animateLeft, setAnimateLeft] = useState(true)

  function handleSwipe(offset: number) {
-    if (offset > 30) onPrev()
-    if (offset < -30) onNext()
+    if (offset > 30) {
+      setAnimateLeft(false)
+      onPrev()
+    }
+    if (offset < -30) {
+      setAnimateLeft(true)
+      onNext()
+    }
  }

  function handleNext() {
@@ -79,7 +85,7 @@ export default function FullView({
  }

  return (
-    <div className={styles.fullViewContainer}>
+    <div className={styles.fullView}>
      <IconButton
        theme="Inverted"
        style="Muted"
@@ -99,7 +105,7 @@ export default function FullView({
          </span>
        </Typography>
      </div>
-      <div className={styles.imageContainer}>
+      <div className={styles.content}>
        <AnimatePresence initial={false} custom={animateLeft}>
          <motion.div
            key={image.src}
@@ -109,42 +115,42 @@ export default function FullView({
            animate="animate"
            exit="exit"
            transition={{ duration: 0.3 }}
-            className={styles.imageWrapper}
+            className={styles.motionContainer}
            drag="x"
            onDragEnd={(_e, info) => handleSwipe(info.offset.x)}
          >
-            {image.caption && !hideLabel ? (
-              <Typography variant="Body/Paragraph/mdRegular">
-                <p className={styles.imageCaption}>{image.caption}</p>
-              </Typography>
-            ) : null}
-            <Image
-              alt={image.alt}
-              fill
-              sizes="(min-width: 1500px) 1500px, 100vw"
-              src={image.src}
-              className={styles.image}
-            />
+            <div className={styles.imageWrapper}>
+              <Image
+                alt={image.alt}
+                fill
+                sizes="90vw"
+                src={image.src}
+                className={styles.image}
+              />
+              {image.caption && !hideLabel ? (
+                <Typography variant="Body/Paragraph/mdRegular">
+                  <p className={styles.caption}>{image.caption}</p>
+                </Typography>
+              ) : null}
+            </div>
          </motion.div>
        </AnimatePresence>
      </div>

-      <motion.button
-        className={`${styles.navigationButton} ${styles.fullViewPrevButton}`}
+      <IconButton
+        theme="Inverted"
+        className={`${styles.navigationButton} ${styles.prev}`}
        onClick={handlePrev}
      >
-        <MaterialIcon
-          icon="arrow_back"
-          color="CurrentColor"
-          className={styles.leftTransformIcon}
-        />
-      </motion.button>
-      <motion.button
-        className={`${styles.navigationButton} ${styles.fullViewNextButton}`}
+        <MaterialIcon icon="arrow_back" color="CurrentColor" />
+      </IconButton>
+      <IconButton
+        theme="Inverted"
+        className={`${styles.navigationButton} ${styles.next}`}
        onClick={handleNext}
      >
        <MaterialIcon icon="arrow_forward" color="CurrentColor" />
-      </motion.button>
+      </IconButton>
    </div>
  )
 }
--- a/packages/design-system/lib/components/Lightbox/Gallery/gallery.module.css
+++ b/packages/design-system/lib/components/Lightbox/Gallery/gallery.module.css
@@ -1,4 +1,4 @@
-.galleryContainer {
+.gallery {
  display: grid;
  gap: var(--Space-x2);
  padding: var(--Space-x2);
@@ -32,7 +32,6 @@
  border-width: 0;
  background-color: transparent;
  cursor: pointer;
-  border-radius: var(--Corner-radius-md);
  overflow: hidden;
  z-index: 0;

@@ -45,6 +44,7 @@
  transition: opacity 0.3s ease-in-out;
  object-fit: cover;
  z-index: -1;
+  border-radius: var(--Corner-radius-md);
 }

@media screen and (max-width: 767px) {
@@ -53,7 +53,7 @@
    display: none;
  }

-  .galleryContainer {
+  .gallery {
    align-content: start;
  }

@@ -68,8 +68,8 @@
    display: none;
  }

-  .galleryContainer {
-    padding: var(--Spacing-x5) var(--Spacing-x6);
+  .gallery {
+    padding: var(--Space-x5) var(--Space-x6);
  }

  .closeButton {
@@ -81,42 +81,56 @@

  .desktopGallery {
    display: grid;
-    grid-template-rows: 28px 1fr 7.8125rem;
-    row-gap: var(--Spacing-x-one-and-half);
+    grid-template-rows: 28px 1fr 125px;
+    row-gap: var(--Space-x15);
    background-color: var(--Background-Primary);
    height: 100%;
    position: relative;
    overflow: hidden;
  }

-  .galleryHeader {
+  .header {
    display: flex;
-    align-items: center;
+    justify-content: center;
  }

-  .imageCaption {
+  .caption {
    background-color: var(--Base-Surface-Subtle-Normal);
-    padding: var(--Spacing-x-half) var(--Spacing-x1);
+    padding: var(--Space-x05) var(--Space-x1);
    border-radius: var(--Corner-radius-sm);
    color: var(--Text-Secondary);
  }

-  .mainImageWrapper {
+  .content {
    position: relative;
    width: 100%;
+    height: 100%;
  }

-  .mainImageContainer {
-    width: 100%;
-    height: 100%;
-    will-change: transform;
+  .motionContainer {
    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .mainImage {
+    object-fit: contain;
+    border-radius: var(--Corner-radius-Medium);
+    /* Override Next.js Image styles, we can't set width/height on the image as we don't know the aspect ratio of the image */
+    width: auto !important;
+    height: auto !important;
+    position: relative !important;
+    max-width: 100%;
+    max-height: 100%;
+    cursor: pointer;
  }

  .desktopThumbnailGrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
-    gap: var(--Spacing-x1);
+    gap: var(--Space-x1);
    max-height: 7.8125rem;
    overflow: hidden;
  }
@@ -155,10 +169,10 @@
  }

  .galleryPrevButton {
-    left: var(--Spacing-x2);
+    left: var(--Space-x2);
  }

  .galleryNextButton {
-    right: var(--Spacing-x2);
+    right: var(--Space-x2);
  }
 }
--- a/packages/design-system/lib/components/Lightbox/Gallery/index.tsx
+++ b/packages/design-system/lib/components/Lightbox/Gallery/index.tsx
@@ -85,7 +85,7 @@ export default function Gallery({
  }

  return (
-    <div className={styles.galleryContainer}>
+    <div className={styles.gallery}>
      <IconButton
        theme="Black"
        style="Muted"
@@ -112,17 +112,17 @@ export default function Gallery({
      {/* Desktop Gallery */}
      <div className={styles.desktopGallery}>
        <Typography variant="Body/Supporting text (caption)/smRegular">
-          <p className={styles.galleryHeader}>
+          <p className={styles.header}>
            {mainImage.caption && !hideLabel && (
-              <span className={styles.imageCaption}>{mainImage.caption}</span>
+              <span className={styles.caption}>{mainImage.caption}</span>
            )}
          </p>
        </Typography>
-        <div className={styles.mainImageWrapper}>
+        <div className={styles.content}>
          <AnimatePresence initial={false} custom={animateLeft}>
            <motion.div
              key={mainImage.src}
-              className={styles.mainImageContainer}
+              className={styles.motionContainer}
              custom={animateLeft}
              variants={variants}
              initial="initial"
@@ -130,21 +130,19 @@ export default function Gallery({
              exit="exit"
              transition={{ duration: 0.3 }}
            >
-              <ButtonRAC
-                onPress={onImageClick}
-                className={styles.imageButton}
+              <Image
+                src={mainImage.src}
+                alt={mainImage.alt}
+                fill
+                sizes="(min-width: 1000px) 1000px, 100vw"
+                className={styles.mainImage}
+                onClick={onImageClick}
+                tabIndex={0}
                aria-label={intl.formatMessage({
                  defaultMessage: 'Open image',
                })}
-              >
-                <Image
-                  src={mainImage.src}
-                  alt={mainImage.alt}
-                  fill
-                  sizes="(min-width: 1000px) 1000px, 100vw"
-                  className={styles.image}
-                />
-              </ButtonRAC>
+                role="button"
+              />
            </motion.div>
          </AnimatePresence>
          <motion.button