fix(selected facets): group text and range facets under a common cont…

…ainer
unbxd · May 22, 2021 · 31e379a · 31e379a
1 parent a4b0e33
commit 31e379a
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 28 deletions.
diff --git a/public/css/theme/modules.scss b/public/css/theme/modules.scss
@@ -56,14 +56,6 @@
         .UNX-productCard__container {
             display: flex;
             flex-direction: row;
-
-            .UNX-product-card {
-                flex: 0.4;
-            }
-            .-details {
-                flex: 0.6;
-                min-width: 0;
-            }
         }
     }
 }
@@ -526,6 +518,12 @@
     display: flex;
     align-items: baseline;
 
+    .UNX-selectedTextFacets__list,
+    .UNX-selectedRangeFacets__list {
+        display: flex;
+        align-items: baseline;
+    }
+
     .-label {
         color: #333;
         font-size: 15px;

diff --git a/src/modules/rangeFacets/__tests__/__snapshots__/rangeFacets.test.js.snap b/src/modules/rangeFacets/__tests__/__snapshots__/rangeFacets.test.js.snap
@@ -9,23 +9,27 @@ Array [
       className="UNX-selectedFacets__list"
     >
       <div
-        className="UNX-selectedFacets__item"
-        data-facet-name="price"
-        data-id="[200-300]"
-        onClick={[Function]}
-        role="button"
-        tabIndex={0}
+        className="UNX-selectedRangeFacets__list"
       >
-        <span>
-          $
-           
-          200
-           - 
-          $
-           
-          300
-        </span>
-         x
+        <div
+          className="UNX-selectedFacets__item"
+          data-facet-name="price"
+          data-id="[200-300]"
+          onClick={[Function]}
+          role="button"
+          tabIndex={0}
+        >
+          <span>
+            $
+             
+            200
+             - 
+            $
+             
+            300
+          </span>
+           x
+        </div>
       </div>
     </div>
   </div>,

diff --git a/src/modules/selectedFacets/SelectedFacetsWrapper.js b/src/modules/selectedFacets/SelectedFacetsWrapper.js
@@ -26,7 +26,7 @@ const SelectedFacetsWrapper = (props) => {
                 ListItem={facetItemComponent || FacetItem}
                 idAttribute="dataId"
                 onClick={onTextFacetClick}
-                className="UNX-selectedFacets__list"
+                className="UNX-selectedTextFacets__list"
             />
         );
     }
@@ -38,7 +38,7 @@ const SelectedFacetsWrapper = (props) => {
                 ListItem={facetItemComponent || FacetItem}
                 idAttribute="facetName"
                 onClick={onRangeFacetClick}
-                className="UNX-selectedFacets__list"
+                className="UNX-selectedRangeFacets__list"
                 priceUnit={priceUnit}
             />
         );
@@ -54,8 +54,10 @@ const SelectedFacetsWrapper = (props) => {
     return (
         <div className="UNX-selectedFacets__container">
             {label || null}
-            {activeTextFacetsMarkup}
-            {activeRangeFacetsMarkup}
+            <div className="UNX-selectedFacets__list">
+                {activeTextFacetsMarkup}
+                {activeRangeFacetsMarkup}
+            </div>
         </div>
     );
 };