diff --git a/src/components/FilterPopup/FilterPopup.css b/src/components/FilterPopup/FilterPopup.css index f3d73f47..16257670 100644 --- a/src/components/FilterPopup/FilterPopup.css +++ b/src/components/FilterPopup/FilterPopup.css @@ -41,6 +41,11 @@ border: 1px solid var(--marketplaceColorDark); } } +.labelEllipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} .popup { /* By default hide the content */ diff --git a/src/components/FilterPopup/FilterPopup.js b/src/components/FilterPopup/FilterPopup.js index a3fa4669..6f54a0e2 100644 --- a/src/components/FilterPopup/FilterPopup.js +++ b/src/components/FilterPopup/FilterPopup.js @@ -103,6 +103,7 @@ class FilterPopup extends Component { popupClassName, id, label, + labelMaxWidth, isSelected, children, initialValues, @@ -114,6 +115,8 @@ class FilterPopup extends Component { const popupClasses = classNames(css.popup, { [css.isOpen]: this.state.isOpen }); const popupSizeClasses = popupClassName || css.popupSize; const labelStyles = isSelected ? css.labelSelected : css.label; + const labelMaxWidthMaybe = labelMaxWidth ? { maxWidth: `${labelMaxWidth}px` } : {}; + const labelMaxWidthStyles = labelMaxWidth ? css.labelEllipsis : null; const contentStyle = this.positionStyleForContent(); return ( @@ -125,7 +128,11 @@ class FilterPopup extends Component { this.filter = node; }} > -