@bento-core/facet-filter 1.0.1-c3dc.10 → 1.0.1-c3dc.11

package/dist/components/inputs/slider/SliderView.js

@@ -113,6 +113,9 @@ const SliderView = _ref => {
     }
   };
   const [sliderValue, setSliderValue] = (0, _react.useState)([getDisplayValue(lowerBoundValue), getDisplayValue(upperBoundValue)]);
+
+  // Check if slider text will be shown (to determine if unknownAgesSection needs bottom border)
+  const isSliderTextShown = sliderValue[0] > getDisplayValue(minLowerBound) || sliderValue[1] < getDisplayValue(maxUpperBound);
   (0, _react.useEffect)(() => {
     // Don't reset slider values if "Only" is selected - preserve current values
     if (unknownAges === 'only') {
@@ -230,7 +233,9 @@ const SliderView = _ref => {
   }, getDisplayValue(minLowerBound).toLocaleString()), /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: classes.upperBound
   }, minLowerBound === 0 && maxUpperBound === 0 ? '-' : maxUpperBound !== 0 ? getDisplayValue(maxUpperBound).toLocaleString() : '.'))), /*#__PURE__*/_react.default.createElement(_core.Box, {
-    className: classes.unknownAgesSection
+    className: (0, _clsx.default)(classes.unknownAgesSection, {
+      [classes.unknownAgesSectionWithBottomBorder]: !isSliderTextShown
+    })
   }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: classes.unknownAgesTitle
   }, "UNKNOWN AGES:"), /*#__PURE__*/_react.default.createElement(_core.FormControl, {
@@ -420,7 +425,8 @@ const styles = () => ({
     marginTop: '8px',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
-    textOverflow: 'ellipsis'
+    textOverflow: 'ellipsis',
+    borderBottom: '1px solid #CCCCCC'
   },
   invalidSliderText: props => props.facet.style && props.facet.style.invalidSliderText ? props.facet.style.invalidSliderText : {
     color: '#D32F2F',
@@ -434,7 +440,8 @@ const styles = () => ({
     marginTop: '8px',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
-    textOverflow: 'ellipsis'
+    textOverflow: 'ellipsis',
+    borderBottom: '1px solid #CCCCCC'
   },
   sliderListItem: props => props.facet.style && props.facet.style.sliderListItem ? props.facet.style.sliderListItem : {
     height: '15px'
@@ -455,6 +462,9 @@ const styles = () => ({
     paddingBottom: '0px',
     borderTop: '1px solid #CCCCCC'
   },
+  unknownAgesSectionWithBottomBorder: props => props.facet.style && props.facet.style.unknownAgesSectionWithBottomBorder ? props.facet.style.unknownAgesSectionWithBottomBorder : {
+    borderBottom: '1px solid #CCCCCC'
+  },
   unknownAgesTitle: props => props.facet.style && props.facet.style.unknownAgesTitle ? props.facet.style.unknownAgesTitle : {
     fontFamily: 'Poppins',
     fontSize: '13px',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/facet-filter",
-  "version": "1.0.1-c3dc.10",
+  "version": "1.0.1-c3dc.11",
   "description": "### Bento core sidebar design:",
   "main": "dist/index.js",
   "scripts": {

package/src/components/inputs/slider/SliderView.js

@@ -122,6 +122,11 @@ const SliderView = ({
     getDisplayValue(lowerBoundValue),
     getDisplayValue(upperBoundValue),
   ]);
+
+  // Check if slider text will be shown (to determine if unknownAgesSection needs bottom border)
+  const isSliderTextShown = (sliderValue[0] > getDisplayValue(minLowerBound)
+    || sliderValue[1] < getDisplayValue(maxUpperBound));
+
   useEffect(() => {
     // Don't reset slider values if "Only" is selected - preserve current values
     if (unknownAges === 'only') {
@@ -256,7 +261,10 @@ const SliderView = ({
         </Box>
       </div>
       {/* Unknown Ages Section */}
-      <Box className={classes.unknownAgesSection}>
+      <Box className={clsx(classes.unknownAgesSection, {
+        [classes.unknownAgesSectionWithBottomBorder]: !isSliderTextShown,
+      })}
+      >
         <Typography className={classes.unknownAgesTitle}>
           UNKNOWN AGES:
         </Typography>
@@ -487,6 +495,7 @@ const styles = () => ({
       whiteSpace: 'nowrap',
       overflow: 'hidden',
       textOverflow: 'ellipsis',
+      borderBottom: '1px solid #CCCCCC',
     }),
   invalidSliderText: (props) => (props.facet.style && props.facet.style.invalidSliderText
     ? props.facet.style.invalidSliderText
@@ -503,6 +512,7 @@ const styles = () => ({
       whiteSpace: 'nowrap',
       overflow: 'hidden',
       textOverflow: 'ellipsis',
+      borderBottom: '1px solid #CCCCCC',
     }),
   sliderListItem: (props) => (props.facet.style && props.facet.style.sliderListItem
     ? props.facet.style.sliderListItem
@@ -531,6 +541,12 @@ const styles = () => ({
       paddingBottom: '0px',
       borderTop: '1px solid #CCCCCC',
     }),
+  unknownAgesSectionWithBottomBorder: (props) => (
+    props.facet.style && props.facet.style.unknownAgesSectionWithBottomBorder
+      ? props.facet.style.unknownAgesSectionWithBottomBorder
+      : {
+        borderBottom: '1px solid #CCCCCC',
+      }),
   unknownAgesTitle: (props) => (props.facet.style && props.facet.style.unknownAgesTitle
     ? props.facet.style.unknownAgesTitle
     : {