Eui image focus states

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added href prop to `EuiTab` and converted to TypeScript ([#2275](https://github.com/elastic/eui/pull/2275))
+- Added hover and focus states when allowFullScreen is true in `EuiImage`([#2287](https://github.com/elastic/eui/pull/2287))
 
 **Bug fixes**
 

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

@@ -1,18 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiImage is rendered 1`] = `
+<figure
+  aria-label="aria-label"
+  class="euiImage euiImage--large testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <img
+    alt="alt"
+    class="euiImage__img"
+  />
+</figure>
+`;
+
+exports[`EuiImage is rendered and allows full screen 1`] = `
 <button
+  class="euiImage euiImage--large euiImage--allowFullScreen testClass1 testClass2"
   type="button"
 >
   <figure
     aria-label="aria-label"
-    class="euiImage euiImage--large testClass1 testClass2"
     data-test-subj="test subject string"
   >
     <img
       alt="alt"
       class="euiImage__img"
     />
+    <svg
+      class="euiIcon euiIcon--medium euiIcon--ghost euiIcon-isLoading euiImage__icon"
+      focusable="false"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+    />
   </figure>
 </button>
 `;

src/components/image/_image.scss

@@ -17,9 +17,26 @@
     }
   }
 
-  &.euiImage--allowFullScreen:hover {
+  &.euiImage--allowFullScreen {
+    &:not(.euiImage--hasShadow):hover,
+    &:not(.euiImage--hasShadow):focus {
+      .euiImage__img {
+        @include euiSlightShadowHover;
+      }
+    }
+
+    &.euiImage--hasShadow:hover,
+    &.euiImage--hasShadow:focus {
+      .euiImage__img {
+        @include euiBottomShadow($color: $euiShadowColor, $opacity: .2);
+      }
+    }
+
     .euiImage__img {
       cursor: pointer;
+
+      // transition the shadow
+      transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
     }
 
     .euiImage__icon {

src/components/image/image.js

@@ -31,7 +31,7 @@ export class EuiImage extends Component {
     super(props);
 
     this.state = {
-      isFullScreen: false,
+      isFullScreenActive: false,
     };
   }
 
@@ -45,13 +45,13 @@ export class EuiImage extends Component {
 
   closeFullScreen = () => {
     this.setState({
-      isFullScreen: false,
+      isFullScreenActive: false,
     });
   };
 
   openFullScreen = () => {
     this.setState({
-      isFullScreen: true,
+      isFullScreenActive: true,
     });
   };
 
@@ -68,6 +68,8 @@ export class EuiImage extends Component {
       ...rest
     } = this.props;
 
+    const { isFullScreenActive } = this.state;
+
     const classes = classNames(
       'euiImage',
       sizeToClassNameMap[size],
@@ -85,59 +87,56 @@ export class EuiImage extends Component {
       );
     }
 
-    let optionalIcon;
+    const allowFullScreeIcon = (
+      <EuiIcon
+        type="fullScreen"
+        color={fullScreenIconColorMap[fullScreenIconColor]}
+        className="euiImage__icon"
+      />
+    );
 
-    if (allowFullScreen) {
-      optionalIcon = (
-        <EuiIcon
-          type="fullScreen"
-          color={fullScreenIconColorMap[fullScreenIconColor]}
-          className="euiImage__icon"
-        />
-      );
-    }
+    const fullScreenDisplay = (
+      <EuiOverlayMask onClick={this.closeFullScreen}>
+        <EuiFocusTrap clickOutsideDisables={true}>
+          <button
+            type="button"
+            onClick={this.closeFullScreen}
+            onKeyDown={this.onKeyDown}>
+            <figure
+              ref={node => {
+                this.figure = node;
+              }}
+              className="euiImageFullScreen">
+              <img src={url} className="euiImageFullScreen__img" alt={alt} />
+              {optionalCaption}
+            </figure>
+          </button>
+        </EuiFocusTrap>
+      </EuiOverlayMask>
+    );
 
-    let fullScreenDisplay;
-
-    if (this.state.isFullScreen) {
-      fullScreenDisplay = (
-        <EuiOverlayMask onClick={this.closeFullScreen}>
-          <EuiFocusTrap clickOutsideDisables={true}>
-            <button
-              type="button"
-              onClick={this.closeFullScreen}
-              onKeyDown={this.onKeyDown}>
-              <figure
-                ref={node => {
-                  this.figure = node;
-                }}
-                className="euiImageFullScreen">
-                <img src={url} className="euiImageFullScreen__img" alt={alt} />
-                {optionalCaption}
-              </figure>
-            </button>
-          </EuiFocusTrap>
-        </EuiOverlayMask>
+    if (allowFullScreen) {
+      return (
+        <button
+          type="button"
+          onClick={allowFullScreen ? this.openFullScreen : undefined}
+          className={classes}>
+          <figure {...rest}>
+            <img src={url} className="euiImage__img" alt={alt} />
+            {optionalCaption}
+            {allowFullScreeIcon}
+            {isFullScreenActive && fullScreenDisplay}
+          </figure>
+        </button>
       );
-    }
-
-    return (
-      <button
-        type="button"
-        onClick={allowFullScreen ? this.openFullScreen : undefined}>
+    } else {
+      return (
         <figure className={classes} {...rest}>
           <img src={url} className="euiImage__img" alt={alt} />
           {optionalCaption}
-
-          {/*
-          If the below fullScreen image renders, it actually attaches to the body because of
-          EuiOverlayMask's React portal usage.
-        */}
-          {optionalIcon}
-          {fullScreenDisplay}
         </figure>
-      </button>
-    );
+      );
+    }
   }
 }
 

src/components/image/image.test.js

@@ -12,4 +12,12 @@ describe('EuiImage', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  test('is rendered and allows full screen', () => {
+    const component = render(
+      <EuiImage alt="alt" size="l" allowFullScreen {...requiredProps} />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
 });