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

CHANGELOG.md

@@ -9,6 +9,7 @@
 **Bug fixes**
 
 - Fixed issue with `labelDisplay` not being passed to `EuiSuggestItem` ([#4180](https://github.com/elastic/eui/pull/4180))
+- 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))
 - Fixed copy in `EuiDataGrid`'s header menu's sort actions ([#4199](https://github.com/elastic/eui/pull/4199))
 
 ## [`30.1.1`](https://github.com/elastic/eui/tree/v30.1.1)

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;
 
@@ -154,6 +166,7 @@
     position: absolute;
     right: $euiSize;
     top: $euiSize;
+    pointer-events: none;
   }
 
   &__img {

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-isFullScreen__icon"
+          />
+        </>
       </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}