feat(Image): simplify image component

BREAKING CHANGE: no longer accepts classes prop, image and loading placeholder are no longer wrapped by a div

Author: liamross

src/components/Image/Image.tsx

@@ -9,19 +9,14 @@ export interface ImageProps extends Remove<ImgHTMLAttributes<HTMLImageElement>,
    * undefined or if a promise will display as loading.
    */
   src?: FuturableOrLazy<string>;
-  /**
-   * Specific classes for all of the internal elements. If you just wish to give
-   * a class to image, you can use `className`.
-   */
-  classes?: { wrapper?: string; image?: string; overlay?: string };
   /**
    * Render out an element to be shown while src is loading.
    */
   onRenderLoading?(): ReactNode;
 }
 
 export const Image = forwardRef<HTMLImageElement, ImageProps>(
-  ({ src, classes, onRenderLoading, alt, className, ...imgProps }, ref) => {
+  ({ src, onRenderLoading, alt, className, ...imgProps }, ref) => {
     const [source, setSource] = useState<string | undefined>(typeof src === 'string' ? src : undefined);
 
     const getSource = useCallback(async (srcGetter: FuturableOrLazy<string>) => {
@@ -34,24 +29,12 @@ export const Image = forwardRef<HTMLImageElement, ImageProps>(
       getSource(src);
     }, [src, getSource]);
 
-    const wrapperClass = classnames('ui__base ui__image__wrapper', classes?.wrapper);
-
-    const imageClass = classnames('ui__image', { 'ui__image--loading': !source }, classes?.image, className);
-
-    const overlayClass = classnames(
-      'ui__image__overlay',
-      {
-        'ui__image__overlay--loading': !source,
-        'ui__image__overlay--hide': !onRenderLoading,
-      },
-      classes?.overlay,
-    );
+    const imageClass = classnames('ui__image', className);
 
-    return (
-      <div className={wrapperClass}>
-        <img {...imgProps} alt={alt} src={source} className={imageClass} ref={ref} />
-        <div className={overlayClass}>{onRenderLoading?.()}</div>
-      </div>
+    return source ? (
+      <img {...imgProps} alt={alt} src={source} className={imageClass} ref={ref} />
+    ) : (
+      <>{onRenderLoading?.()}</>
     );
   },
 );

src/components/Image/_Image.scss

@@ -1,38 +1,4 @@
-.ui__image__wrapper {
-  height: 100%;
-  width: 100%;
-  position: relative;
-  user-select: none;
-  pointer-events: none;
-  flex-grow: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
 .ui__image {
   max-width: 100%;
   max-height: 100%;
-
-  &--loading {
-    opacity: 0;
-  }
-}
-
-.ui__image__overlay {
-  opacity: 0;
-  pointer-events: none;
-
-  > * {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    overflow: visible;
-  }
-
-  &--loading:not(.ui__image__overlay--hide) {
-    opacity: 1;
-    pointer-events: all;
-  }
 }