allow EuiImage to set custom width

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Allow `EuiImage` to set custom width ([#3012](https://github.com/elastic/eui/pull/3012))
 - Updated `EuiFilterSelect` to retain the order of its filters ([#3063](https://github.com/elastic/eui/pull/3063))
 - Added `href` prop to `EuiBadge` ([#3009](https://github.com/elastic/eui/pull/3009))
 - Added props descriptions for `EuiComboBox` ([#3007](https://github.com/elastic/eui/pull/3007))

src-docs/src/views/image/image_size.js

@@ -4,6 +4,15 @@ import { EuiImage, EuiSpacer } from '../../../../src/components';
 
 export default () => (
   <div>
+    <EuiImage
+      hasShadow
+      allowFullScreen
+      size={50}
+      caption="Custom size( 50px )"
+      alt="Accessible image alt goes here"
+      url="https://source.unsplash.com/1000x1000/?Nature"
+    />
+    <EuiSpacer />
     <EuiImage
       size="s"
       hasShadow

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

@@ -2,7 +2,7 @@
 
 exports[`EuiImage is rendered 1`] = `
 <figure
-  class="euiImage euiImage--large testClass1 testClass2"
+  class="euiImage testClass1 testClass2 euiImage--large"
 >
   <img
     alt="alt"
@@ -16,7 +16,7 @@ exports[`EuiImage is rendered 1`] = `
 
 exports[`EuiImage is rendered and allows full screen 1`] = `
 <figure
-  class="euiImage euiImage--large euiImage--allowFullScreen testClass1 testClass2"
+  class="euiImage euiImage--allowFullScreen testClass1 testClass2 euiImage--large"
 >
   <button
     aria-label="Open full screen alt image"

src/components/image/_image.scss

@@ -124,6 +124,18 @@
   }
 }
 
+.euiImage--restrictHeight-custom {
+  width: auto;
+  height: auto;
+  margin-left: auto;
+  margin-right: auto;
+
+  img {
+    width: auto;
+    height: auto;
+  }
+}
+
 @keyframes euiImageFullScreen {
   0% {
     opacity: 0;
@@ -135,3 +147,4 @@
     transform: translateY(0);
   }
 }
+

src/components/image/image.tsx

@@ -34,7 +34,7 @@ const fullScreenIconColorMap: { [color in FullScreenIconColor]: string } = {
 
 interface EuiImageProps extends CommonProps, HTMLAttributes<HTMLElement> {
   alt: string;
-  size?: ImageSize;
+  size?: ImageSize | number;
   fullScreenIconColor?: FullScreenIconColor;
   url: string;
   caption?: string;
@@ -44,13 +44,45 @@ interface EuiImageProps extends CommonProps, HTMLAttributes<HTMLElement> {
 
 interface State {
   isFullScreenActive: boolean;
+  customStyle?: {
+    width?: number | 'auto';
+    height?: number | 'auto';
+  };
 }
 
 export class EuiImage extends Component<EuiImageProps, State> {
   state: State = {
     isFullScreenActive: false,
+    customStyle: {},
   };
 
+  containerRef: React.RefObject<HTMLImageElement> = React.createRef();
+  getRectsInterval?: NodeJS.Timer = undefined;
+
+  componentDidMount = () => {
+    if (this.props.size && typeof this.props.size !== 'string') {
+      if (!this.containerRef || !this.containerRef.current) return;
+
+      this.getRectsInterval = setInterval(() => {
+        let width: 'auto' | number = this.containerRef.current!.width;
+        let height: 'auto' | number = this.containerRef.current!.height;
+
+        if (width > height) {
+          width = this.props.size as number;
+          height = 'auto';
+        } else {
+          height = this.props.size as number;
+          width = 'auto';
+        }
+        this.setState({ customStyle: { width, height } });
+      }, 10);
+    }
+  };
+
+  componentWillUnmount() {
+    if (this.getRectsInterval) clearInterval(this.getRectsInterval);
+  }
+
   onKeyDown = (event: React.KeyboardEvent) => {
     if (event.keyCode === keyCodes.ESCAPE) {
       event.preventDefault();
@@ -84,18 +116,23 @@ export class EuiImage extends Component<EuiImageProps, State> {
       ...rest
     } = this.props;
 
-    const { isFullScreenActive } = this.state;
+    const { isFullScreenActive, customStyle } = this.state;
 
-    const classes = classNames(
+    let classes = classNames(
       'euiImage',
-      sizeToClassNameMap[size],
       {
         'euiImage--hasShadow': hasShadow,
         'euiImage--allowFullScreen': allowFullScreen,
       },
       className
     );
 
+    if (typeof size === 'string') {
+      classes = `${classes} ${sizeToClassNameMap[size]}`;
+    } else {
+      classes = `${classes} euiImage--restrictHeight-custom`;
+    }
+
     let optionalCaption;
     if (caption) {
       optionalCaption = (
@@ -161,7 +198,14 @@ export class EuiImage extends Component<EuiImageProps, State> {
                 aria-label={openImage}
                 className="euiImage__button"
                 onClick={this.openFullScreen}>
-                <img src={url} alt={alt} className="euiImage__img" {...rest} />
+                <img
+                  ref={this.containerRef}
+                  src={url}
+                  alt={alt}
+                  className="euiImage__img"
+                  style={customStyle as React.CSSProperties}
+                  {...rest}
+                />
                 {allowFullScreenIcon}
                 {isFullScreenActive && fullScreenDisplay}
               </button>
@@ -173,7 +217,13 @@ export class EuiImage extends Component<EuiImageProps, State> {
     } else {
       return (
         <figure className={classes} aria-label={caption}>
-          <img src={url} className="euiImage__img" alt={alt} {...rest} />
+          <img
+            style={customStyle as React.CSSProperties}
+            src={url}
+            className="euiImage__img"
+            alt={alt}
+            {...rest}
+          />
           {optionalCaption}
         </figure>
       );