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))
 - Added `EuiDataGrid`'s default sort order property ([#2987](https://github.com/elastic/eui/pull/2987))
 - Fixed `EuiDataGrid`'s pagination visibility when changing rows per page ([#2978](https://github.com/elastic/eui/pull/2978))
 - Added `highlightAll` prop to `EuiHighlight` to highlight all matches ([#2957](https://github.com/elastic/eui/pull/2957))

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 Height( 50px )"
+      alt="Accessible image alt goes here"
+      url="https://source.unsplash.com/1000x1000/?Nature"
+    />
+    <EuiSpacer />
     <EuiImage
       size="s"
       hasShadow

src/components/image/_image.scss

@@ -124,6 +124,15 @@
   }
 }
 
+.euiImage--restrictHeight-custom{
+  width: auto;
+  margin-left: auto;
+  margin-right: auto;
+  img{
+    width: auto;
+  }
+}
+
 @keyframes euiImageFullScreen {
   0% {
     opacity: 0;
@@ -135,3 +144,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;
@@ -86,16 +86,24 @@ export class EuiImage extends Component<EuiImageProps, State> {
 
     const { isFullScreenActive } = this.state;
 
-    const classes = classNames(
+    let newStyle: React.CSSProperties | undefined;
+
+    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`;
+      newStyle = { maxHeight: size };
+    }
+
     let optionalCaption;
     if (caption) {
       optionalCaption = (
@@ -162,7 +170,13 @@ 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
+                  src={url}
+                  alt={alt}
+                  className="euiImage__img"
+                  style={newStyle}
+                  {...rest}
+                />
                 {allowFullScreenIcon}
                 {isFullScreenActive && fullScreenDisplay}
               </button>
@@ -174,7 +188,13 @@ export class EuiImage extends Component<EuiImageProps, State> {
     } else {
       return (
         <figure className={classes} role="figure" aria-label={caption}>
-          <img src={url} className="euiImage__img" alt={alt} {...rest} />
+          <img
+            style={newStyle}
+            src={url}
+            className="euiImage__img"
+            alt={alt}
+            {...rest}
+          />
           {optionalCaption}
         </figure>
       );