From 8cf99fd6c0405f5c9ed628af2d83afb5ca5fda67 Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Tue, 16 Jul 2019 14:20:40 +0300
Subject: [PATCH] Update FilterPopup: add labelMaxWidth prop and ellipsis:

---
 src/components/FilterPopup/FilterPopup.css |  5 +++++
 src/components/FilterPopup/FilterPopup.js  | 11 ++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/FilterPopup/FilterPopup.css b/src/components/FilterPopup/FilterPopup.css
index f3d73f4797..162576709e 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 a3fa4669c5..6f54a0e2e0 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;
           }}
         >
-          <button className={labelStyles} onClick={() => this.toggleOpen()}>
+          <button
+            className={classNames(labelStyles, labelMaxWidthStyles)}
+            style={labelMaxWidthMaybe}
+            onClick={() => this.toggleOpen()}
+          >
             {label}
           </button>
           <div
@@ -167,6 +174,7 @@ FilterPopup.defaultProps = {
   contentPlacementOffset: 0,
   liveEdit: false,
   label: null,
+  labelMaxWidth: null,
 };
 
 FilterPopup.propTypes = {
@@ -180,6 +188,7 @@ FilterPopup.propTypes = {
   keepDirtyOnReinitialize: bool,
   contentPlacementOffset: number,
   label: string.isRequired,
+  labelMaxWidth: number,
   isSelected: bool.isRequired,
   children: node.isRequired,