Fix category tile presentation (#551)

magento · Nov 27, 2018 · 3f3a48a · 3f3a48a
1 parent df340e1
commit 3f3a48a
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 20 deletions.
diff --git a/packages/venia-concept/src/components/CategoryList/categoryTile.css b/packages/venia-concept/src/components/CategoryList/categoryTile.css
@@ -6,22 +6,21 @@
 }
 
 .imageWrapper {
+    background-image: var(--venia-image);
+    background-position: 50% 50%;
+    background-size: cover;
     border-radius: 50%;
-    border: 1px solid rgb(var(--venia-border));
+    box-shadow: 0 0 0 1px rgb(var(--venia-border));
     display: block;
     height: 5rem;
     margin: 0 auto 1rem auto;
-    overflow: hidden;
-    padding: 0.1rem;
     width: 5rem;
 }
 
 .image {
-    border-radius: 50%;
-    height: auto;
-    max-height: 100%;
-    max-width: 100%;
-    width: auto;
+    height: 100%;
+    opacity: 0;
+    width: 100%;
 }
 
 .name {

diff --git a/packages/venia-concept/src/components/CategoryList/categoryTile.js b/packages/venia-concept/src/components/CategoryList/categoryTile.js
@@ -1,12 +1,13 @@
 import React, { Component } from 'react';
 import { arrayOf, string, shape } from 'prop-types';
 import { Link } from 'react-router-dom';
+
 import classify from 'src/classify';
-import defaultClasses from './categoryTile.css';
 import {
     makeCategoryMediaPath,
     makeProductMediaPath
 } from 'src/util/makeMediaPath';
+import defaultClasses from './categoryTile.css';
 
 // TODO: get categoryUrlSuffix from graphql storeOptions when it is ready
 const categoryUrlSuffix = '.html';
@@ -32,7 +33,8 @@ class CategoryTile extends Component {
             name: string
         }).isRequired
     };
-    get previewImage() {
+
+    get imagePath() {
         const { image, productImagePreview } = this.props.item;
         const previewProduct = productImagePreview.items[0];
         if (image) {
@@ -41,22 +43,28 @@ class CategoryTile extends Component {
             return makeProductMediaPath(previewProduct.small_image);
         }
     }
+
     render() {
-        const { classes, item } = this.props;
-        const imagePath = this.previewImage;
+        const { imagePath, props } = this;
+        const { classes, item } = props;
+
+        // interpolation doesn't work inside `url()` for legacy reasons
+        // so a custom property should wrap its value in `url()`
+        const imageUrl = imagePath ? `url(${imagePath})` : 'none';
+        const style = { '--venia-image': imageUrl };
+
+        // render an actual image element for accessibility
+        const imagePreview = imagePath ? (
+            <img className={classes.image} src={imagePath} alt={item.name} />
+        ) : null;
+
         return (
             <Link
                 className={classes.root}
                 to={`/${item.url_key}${categoryUrlSuffix}`}
             >
-                <span className={classes.imageWrapper}>
-                    {imagePath && (
-                        <img
-                            className={classes.image}
-                            src={imagePath}
-                            alt={item.name}
-                        />
-                    )}
+                <span className={classes.imageWrapper} style={style}>
+                    {imagePreview}
                 </span>
                 <span className={classes.name}>{item.name}</span>
             </Link>