[EuiImage] Fix bug in small images not respecting the optional sizes when allowFullScreen is true

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Fixed focus trap + `EuiPopover` bug which prevented the anchor from receiving focus when the popover closes ([#4071](https://github.com/elastic/eui/pull/4071))
 - Fixed focus trap error & performance impact when one focus trap is deactivated and another becomes enabled ([#4071](https://github.com/elastic/eui/pull/4071))
 - Fixed a condition in `EuiInMemoryTable` to avoid mistaken assignment of `sortName` ([#4138](https://github.com/elastic/eui/pull/4138))
+- Fixed bug in small `EuiImage`'s not respecting the optional sizes when `allowFullScreen` is set to true ([#4207](https://github.com/elastic/eui/pull/4207))
 
 ## [`30.2.0`](https://github.com/elastic/eui/tree/v30.2.0)
 

src/components/image/__snapshots__/image.test.tsx.snap

@@ -20,7 +20,7 @@ exports[`EuiImage is rendered and allows full screen 1`] = `
 >
   <button
     aria-label="Open full screen alt image"
-    class="euiImage__button"
+    class="euiImage__button euiImage__button--fullWidth"
     data-test-subj="activateFullScreenButton"
     type="button"
   >
@@ -42,7 +42,7 @@ exports[`EuiImage is rendered and allows full screen 1`] = `
 
 exports[`EuiImage is rendered with a float 1`] = `
 <figure
-  class="euiImage euiImage--floatLeft "
+  class="euiImage euiImage--floatLeft euiImage--original"
 >
   <img
     alt="alt"
@@ -54,7 +54,7 @@ exports[`EuiImage is rendered with a float 1`] = `
 
 exports[`EuiImage is rendered with a margin 1`] = `
 <figure
-  class="euiImage euiImage--marginLarge "
+  class="euiImage euiImage--marginLarge euiImage--original"
 >
   <img
     alt="alt"
@@ -66,7 +66,7 @@ exports[`EuiImage is rendered with a margin 1`] = `
 
 exports[`EuiImage is rendered with a node as the caption 1`] = `
 <figure
-  class="euiImage "
+  class="euiImage euiImage--original"
 >
   <img
     alt="alt"

src/components/image/_image.scss

@@ -23,6 +23,7 @@
   }
 
   .euiImage__button {
+    position: relative;
     cursor: pointer;
 
     // transition the shadow
@@ -36,6 +37,10 @@
       visibility: visible;
       fill-opacity: 1;
     }
+
+    &--fullWidth {
+      width: 100%;
+    }
   }
 
   &.euiImage--allowFullScreen {
@@ -76,6 +81,13 @@
     width: 100%;
   }
 
+  &.euiImage--original {
+    .euiImage__img {
+      width: auto;
+      max-width: 100%;
+    }
+  }
+
   &.euiImage--floatLeft {
     float: left;
 
@@ -150,12 +162,6 @@
     }
   }
 
-  &__icon {
-    position: absolute;
-    right: $euiSize;
-    top: $euiSize;
-  }
-
   &__img {
     max-height: 80vh;
     max-width: 80vw;
@@ -165,6 +171,13 @@
   }
 }
 
+.euiImage-isFullScreenCloseIcon {
+  position: absolute;
+  right: $euiSize;
+  top: $euiSize;
+  pointer-events: none;
+}
+
 @keyframes euiImageFullScreen {
   0% {
     opacity: 0;

src/components/image/image.tsx

@@ -47,7 +47,7 @@ const sizeToClassNameMap: { [size in ImageSize]: string } = {
   l: 'euiImage--large',
   xl: 'euiImage--xlarge',
   fullWidth: 'euiImage--fullWidth',
-  original: '',
+  original: 'euiImage--original',
 };
 
 const marginToClassNameMap: { [margin in Margins]: string } = {
@@ -166,6 +166,16 @@ export const EuiImage: FunctionComponent<EuiImageProps> = ({
     customStyle.width = 'auto';
   }
 
+  let allowFullScreenButtonClasses = 'euiImage__button';
+
+  // when the button is not custom we need it to go full width
+  // to match the parent '.euiImage' width except when the size is original
+  if (typeof size === 'string' && size !== 'original' && SIZES.includes(size)) {
+    allowFullScreenButtonClasses = `${allowFullScreenButtonClasses} euiImage__button--fullWidth`;
+  } else {
+    allowFullScreenButtonClasses = `${allowFullScreenButtonClasses}`;
+  }
+
   const [optionalCaptionRef, optionalCaptionText] = useInnerText();
   let optionalCaption;
   if (caption) {
@@ -189,34 +199,36 @@ export const EuiImage: FunctionComponent<EuiImageProps> = ({
       data-test-subj="fullScreenOverlayMask"
       onClick={closeFullScreen}>
       <EuiFocusTrap clickOutsideDisables={true}>
-        <figure
-          className="euiImage euiImage-isFullScreen"
-          aria-label={optionalCaptionText}>
-          <button
-            type="button"
-            aria-label={useEuiI18n(
-              'euiImage.closeImage',
-              'Close full screen {alt} image',
-              { alt }
-            )}
-            className="euiImage__button"
-            data-test-subj="deactivateFullScreenButton"
-            onClick={closeFullScreen}
-            onKeyDown={onKeyDown}>
-            <img
-              src={url}
-              alt={alt}
-              className="euiImage-isFullScreen__img"
-              {...rest}
-            />
-            <EuiIcon
-              type="cross"
-              color={fullScreenIconColorMap[fullScreenIconColor]}
-              className="euiImage-isFullScreen__icon"
-            />
-          </button>
-          {optionalCaption}
-        </figure>
+        <>
+          <figure
+            className="euiImage euiImage-isFullScreen"
+            aria-label={optionalCaptionText}>
+            <button
+              type="button"
+              aria-label={useEuiI18n(
+                'euiImage.closeImage',
+                'Close full screen {alt} image',
+                { alt }
+              )}
+              className="euiImage__button"
+              data-test-subj="deactivateFullScreenButton"
+              onClick={closeFullScreen}
+              onKeyDown={onKeyDown}>
+              <img
+                src={url}
+                alt={alt}
+                className="euiImage-isFullScreen__img"
+                {...rest}
+              />
+            </button>
+            {optionalCaption}
+          </figure>
+          <EuiIcon
+            type="cross"
+            color="default"
+            className="euiImage-isFullScreenCloseIcon"
+          />
+        </>
       </EuiFocusTrap>
     </EuiOverlayMask>
   );
@@ -226,20 +238,21 @@ export const EuiImage: FunctionComponent<EuiImageProps> = ({
     'Open full screen {alt} image',
     { alt }
   );
+
   if (allowFullScreen) {
     return (
       <figure className={classes} aria-label={optionalCaptionText}>
         <button
           type="button"
           aria-label={fullscreenLabel}
-          className="euiImage__button"
+          className={allowFullScreenButtonClasses}
           data-test-subj="activateFullScreenButton"
           onClick={openFullScreen}>
           <img
+            style={customStyle}
             src={url}
             alt={alt}
             className="euiImage__img"
-            style={customStyle}
             {...rest}
           />
           {allowFullScreenIcon}

src/themes/eui-amsterdam/overrides/_image.scss

@@ -3,4 +3,8 @@
     color: $euiColorGhost;
     text-shadow: 0 1px 2px transparentize($euiColorInk, .6);
   }
+}
+
+.euiImage-isFullScreenCloseIcon {
+  fill: $euiColorGhost;
 }