Pushing some extra help (#3)

- Moved props docs to comments in component file
- Accounting for `style` prop is passed by consumer
- Removed extraneous style properties
- Updating docs size section

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,13 @@ 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 the it.
+          It will not increase the size of a smaller image or crop it.
         </p>
       ),
       demo: <ImageSizes />,

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

@@ -8,7 +8,7 @@ export default () => (
       hasShadow
       allowFullScreen
       size={50}
-      caption="Custom size( 50px )"
+      caption="Custom size (50)"
       alt="Accessible image alt goes here"
       url="https://source.unsplash.com/1000x1000/?Nature"
     />

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

@@ -49,7 +49,7 @@ exports[`EuiImage is rendered with custom size 1`] = `
     class="euiImage__img"
     data-test-subj="test subject string"
     src="/cat.jpg"
-    style="max-width:50px;max-height:50px;min-width:0;min-height:0;width:auto;height:auto"
+    style="max-width:50px;max-height:50px"
   />
 </figure>
 `;

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 | number;
+  /**
+   * 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.
+   * All sizing values 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,11 +103,12 @@ export class EuiImage extends Component<EuiImageProps, State> {
       allowFullScreen,
       fullScreenIconColor = 'light',
       alt,
+      style,
       ...rest
     } = this.props;
 
     const { isFullScreenActive } = this.state;
-    let customStyle = {};
+    const customStyle: React.CSSProperties = { ...style };
 
     let classes = classNames(
       'euiImage',
@@ -96,18 +119,12 @@ export class EuiImage extends Component<EuiImageProps, State> {
       className
     );
 
-    if (typeof size === 'string') {
-      classes = `${classes} ${sizeToClassNameMap[size]}`;
+    if (typeof size === 'string' && SIZES.includes(size)) {
+      classes = `${classes} ${sizeToClassNameMap[size as ImageSize]}`;
     } else {
       classes = `${classes}`;
-      customStyle = {
-        maxWidth: size,
-        maxHeight: size,
-        minWidth: 0,
-        minHeight: 0,
-        width: 'auto',
-        height: 'auto',
-      };
+      customStyle.maxWidth = size;
+      customStyle.maxHeight = size;
     }
 
     let optionalCaption;
@@ -179,7 +196,7 @@ export class EuiImage extends Component<EuiImageProps, State> {
                   src={url}
                   alt={alt}
                   className="euiImage__img"
-                  style={customStyle as React.CSSProperties}
+                  style={customStyle}
                   {...rest}
                 />
                 {allowFullScreenIcon}
@@ -194,7 +211,7 @@ export class EuiImage extends Component<EuiImageProps, State> {
       return (
         <figure className={classes} aria-label={caption}>
           <img
-            style={customStyle as React.CSSProperties}
+            style={customStyle}
             src={url}
             className="euiImage__img"
             alt={alt}