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

CHANGELOG.md

@@ -5,6 +5,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 node as the caption 1`] = `
 <figure
-  class="euiImage "
+  class="euiImage euiImage--original"
 >
   <img
     alt="alt"

src/components/image/_image.scss

@@ -31,6 +31,10 @@
       visibility: visible;
       fill-opacity: 1;
     }
+
+    &--fullWidth {
+      width: 100%;
+    }
   }
 
   &.euiImage--allowFullScreen {
@@ -69,6 +73,13 @@
   &.euiImage--fullWidth {
     width: 100%;
   }
+
+  &.euiImage--original {
+    .euiImage__img {
+      width: auto;
+      max-width: 100%;
+    }
+  }
 }
 
 // The image itself is full width within the container.

src/components/image/image.tsx

@@ -45,7 +45,7 @@ const sizeToClassNameMap: { [size in ImageSize]: string } = {
   l: 'euiImage--large',
   xl: 'euiImage--xlarge',
   fullWidth: 'euiImage--fullWidth',
-  original: '',
+  original: 'euiImage--original',
 };
 
 export const SIZES = Object.keys(sizeToClassNameMap);
@@ -140,6 +140,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) {
@@ -200,20 +210,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}