Merge pull request #233 from vtex-apps/feature/active-dot

Add new CSS handle for the active dot
vtex-apps · Jul 23, 2020 · 8ff00da · 8ff00da
2 parents 2763b5a + e003eb9
commit 8ff00da
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
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
+- Add new CSS handle for the active dot.
 
 ## [1.40.1] - 2020-07-22
 ### Changed

diff --git a/react/components/ShelfContent.js b/react/components/ShelfContent.js
@@ -21,6 +21,7 @@ const CSS_HANDLES = [
   'shelfContentContainer',
   'sliderContainer',
   'slide',
+  'dot--isActive',
 ]
 const SLIDER_WIDTH_ONE_ELEMENT = 320
 const SLIDER_WIDTH_TWO_ELEMENTS = 500
@@ -202,7 +203,7 @@ class ShelfContent extends Component {
                   root: 'pt4',
                   notActiveDot: 'bg-muted-3',
                   dot: classNames(shelf.dot, 'mh2 mv0 pointer br-100'),
-                  activeDot: 'bg-emphasis',
+                  activeDot: `${cssHandles['dot--isActive']} bg-emphasis`,
                 }}
               />
             </NoSSR>