Merge pull request #299 from vtex-apps/feature-css-handle

Add new CSS handle imageWrapper
vtex-apps · Jan 25, 2021 · 5ace75d · 5ace75d
2 parents 53f7ee5 + ad03a5e
commit 5ace75d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- New CSS Handle `imageWrapper` in `product-summary-image`.
 
 ## [2.68.2] - 2021-01-12
 ### Fixed

diff --git a/react/ProductSummaryImage.tsx b/react/ProductSummaryImage.tsx
@@ -22,6 +22,7 @@ const { useProductSummary } = ProductSummaryContext
 
 const CSS_HANDLES = [
   'image',
+  'imageWrapper',
   'imageContainer',
   'product',
   'imagePlaceholder',
@@ -316,9 +317,14 @@ function ProductImage({
     maxHeightProp,
   })
 
-  const imageClassName = classNames(productSummary.imageContainer, {
-    'db w-100 center': displayMode !== 'inline',
-  })
+  const imageClassName = classNames(
+    // legacy class
+    productSummary.imageContainer,
+    handles.imageWrapper,
+    {
+      'db w-100 center': displayMode !== 'inline',
+    }
+  )
 
   const [width, height] = [
     // fallsback to the other remaining value, if not defined