Allow EuiImage to set custom width (#3012)

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Added `Enter` key press functionality to `EuiSuperDatePicker` ([#3048](https://github.com/elastic/eui/pull/3048))
 - Added `title` to headers of `EuiTable` in case of truncation ([#3094](https://github.com/elastic/eui/pull/3094))
 - Added i18n to `EuiTableHeaderCell` ([#3094](https://github.com/elastic/eui/pull/3094))
+- Added `number` and `string` to `size` type of `EuiImage` for setting custom sizes ([#3012](https://github.com/elastic/eui/pull/3012))
 
 **Bug Fixes**
 

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

@@ -30,7 +30,7 @@ const imageZoomSource = require('!!raw-loader!./image_zoom');
 const imageZoomHtml = renderToHtml(ImageZoom);
 const imageZoomSnippet = `<EuiImage
   allowFullScreen
-  alt={description} 
+  alt={description}
   url={someUrl}
 />
 `;
@@ -53,39 +53,8 @@ export const ImageExample = {
         <div>
           <p>
             Use <EuiCode>EuiImage</EuiCode> when you need to place a static
-            image into a page with an optional caption. It has the following
-            props.
+            image into a page with an optional caption.
           </p>
-          <ul>
-            <li>
-              <EuiCode>size</EuiCode> accepts{' '}
-              <EuiCode>s / m / l / xl / original / fullWidth</EuiCode>. The
-              latter will set the figure to stretch to 100% of its container.
-            </li>
-            <li>
-              <EuiCode>allowFullScreen</EuiCode> when set to true will make the
-              image clickable to a larger version.
-            </li>
-            <li>
-              <EuiCode>fullScreenIconColor</EuiCode> allows you to change the
-              color of the icon that floats above the image when it can be
-              clicked to fullscreen. The default value of{' '}
-              <EuiCode>light</EuiCode> is fine unless your image has a white
-              background, in which case you should change it to{' '}
-              <EuiCode>dark</EuiCode>.
-            </li>
-            <li>
-              <EuiCode>hasShadow</EuiCode> when set to true (default) will apply
-              a slight shadow below the image.
-            </li>
-            <li>
-              <EuiCode>caption</EuiCode> will provide a caption to the image.
-            </li>
-            <li>
-              <EuiCode>alt</EuiCode> Sepearate from the caption is a title on
-              the alt tag itself. This one is required for accessibility.
-            </li>
-          </ul>
         </div>
       ),
       props: { EuiImage },
@@ -131,8 +100,14 @@ export const ImageExample = {
       text: (
         <p>
           Images can be sized by passing the <EuiCode>size</EuiCode> prop a
-          value of <EuiCode>s / m / l / xl / original / fullWidth</EuiCode>.
-          Note that this size is applied to the width of the image.
+          value of{' '}
+          <EuiCode>
+            s / m / l / xl / original / fullWidth / number / string
+          </EuiCode>
+          . This size sets the <strong>maximum</strong> length of the longest
+          edge of the image, whether that is height or width, and scales it.
+          Only the provided sizing values will also increase the size of a
+          smaller image.
         </p>
       ),
       demo: <ImageSizes />,

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 (50)"
+      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"
@@ -38,3 +38,18 @@ exports[`EuiImage is rendered and allows full screen 1`] = `
   </button>
 </figure>
 `;
+
+exports[`EuiImage is rendered with custom size 1`] = `
+<figure
+  class="euiImage testClass1 testClass2"
+>
+  <img
+    alt="alt"
+    aria-label="aria-label"
+    class="euiImage__img"
+    data-test-subj="test subject string"
+    src="/cat.jpg"
+    style="max-width:50px;max-height:50px;width:auto"
+  />
+</figure>
+`;

src/components/image/_image.scss

@@ -135,3 +135,4 @@
     transform: translateY(0);
   }
 }
+

src/components/image/image.test.tsx

@@ -26,4 +26,12 @@ describe('EuiImage', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  test('is rendered with custom size', () => {
+    const component = render(
+      <EuiImage alt="alt" size={50} url="/cat.jpg" {...requiredProps} />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
 });

src/components/image/image.tsx

@@ -32,13 +32,35 @@ const fullScreenIconColorMap: { [color in FullScreenIconColor]: string } = {
   dark: 'default',
 };
 
-interface EuiImageProps extends CommonProps, HTMLAttributes<HTMLElement> {
+interface EuiImageProps extends CommonProps, HTMLAttributes<HTMLImageElement> {
+  /**
+   * Sepearate from the caption is a title on the alt tag itself.
+   * This one is required for accessibility.
+   */
   alt: string;
-  size?: ImageSize;
+  /**
+   * Accepts `s` / `m` / `l` / `xl` / `original` / `fullWidth` / or a CSS size of `number` or `string`.
+   * `fullWidth` will set the figure to stretch to 100% of its container.
+   * `string` and `number` types will max both the width or height, whichever is greater.
+   */
+  size?: ImageSize | number | string;
+  /**
+   * Changes the color of the icon that floats above the image when it can be clicked to fullscreen.
+   * The default value of `light` is fine unless your image has a white background, in which case you should change it to `dark`.
+   */
   fullScreenIconColor?: FullScreenIconColor;
   url: string;
+  /**
+   * Provides the visible caption to the image
+   */
   caption?: string;
+  /**
+   * When set to `true` (default) will apply a slight shadow to the image
+   */
   hasShadow?: boolean;
+  /**
+   * When set to `true` will make the image clickable to a larger version
+   */
   allowFullScreen?: boolean;
 }
 
@@ -81,21 +103,32 @@ export class EuiImage extends Component<EuiImageProps, State> {
       allowFullScreen,
       fullScreenIconColor = 'light',
       alt,
+      style,
       ...rest
     } = this.props;
 
     const { isFullScreenActive } = this.state;
+    const customStyle: React.CSSProperties = { ...style };
 
-    const classes = classNames(
+    let classes = classNames(
       'euiImage',
-      sizeToClassNameMap[size],
       {
         'euiImage--hasShadow': hasShadow,
         'euiImage--allowFullScreen': allowFullScreen,
       },
       className
     );
 
+    if (typeof size === 'string' && SIZES.includes(size)) {
+      classes = `${classes} ${sizeToClassNameMap[size as ImageSize]}`;
+    } else {
+      classes = `${classes}`;
+      customStyle.maxWidth = size;
+      customStyle.maxHeight = size;
+      // Set width back to auto to ensure aspect ratio is kept
+      customStyle.width = 'auto';
+    }
+
     let optionalCaption;
     if (caption) {
       optionalCaption = (
@@ -161,7 +194,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={customStyle}
+                  {...rest}
+                />
                 {allowFullScreenIcon}
                 {isFullScreenActive && fullScreenDisplay}
               </button>
@@ -173,7 +212,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}
+            src={url}
+            className="euiImage__img"
+            alt={alt}
+            {...rest}
+          />
           {optionalCaption}
         </figure>
       );