truncate tag text (#213)

khoait · Dec 18, 2024 · c99804b · c99804b
1 parent df27233
commit c99804b
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/PolyLookupComponent/PolyLookup/ControlManifest.Input.xml b/PolyLookupComponent/PolyLookup/ControlManifest.Input.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <manifest>
-  <control namespace="DCEPCF" constructor="PolyLookup" version="1.7.0" display-name-key="PolyLookup v1.7.0" description-key="Multi-select lookup supporting different type of many-to-many relationships" control-type="standard" >
+  <control namespace="DCEPCF" constructor="PolyLookup" version="1.7.1" display-name-key="PolyLookup v1.7.1" description-key="Multi-select lookup supporting different type of many-to-many relationships" control-type="standard" >
     <!--external-service-usage node declares whether this 3rd party PCF control is using external service or not, if yes, this control will be considered as premium and please also add the external domain it is using.
     If it is not using any external service, please set the enabled="false" and DO NOT add any domain below. The "enabled" will be false by default.
     Example1:

diff --git a/PolyLookupComponent/PolyLookup/components/PolyLookupControlNewLook.tsx b/PolyLookupComponent/PolyLookup/components/PolyLookupControlNewLook.tsx
@@ -68,6 +68,11 @@ const useStyle = makeStyles({
   transparentBackground: {
     backgroundColor: tokens.colorTransparentBackground,
   },
+  truncatedText: {
+    whiteSpace: "nowrap",
+    overflowX: "hidden",
+    textOverflow: "ellipsis",
+  },
 });
 
 export default function PolyLookupControlNewLook({
@@ -95,8 +100,16 @@ export default function PolyLookupControlNewLook({
   onQuickCreate,
 }: PolyLookupProps) {
   const queryClient = useQueryClient();
-  const { tagGroup, marginLeft, underline, borderTransparent, tagFontSize, iconFontSize, transparentBackground } =
-    useStyle();
+  const {
+    tagGroup,
+    marginLeft,
+    underline,
+    borderTransparent,
+    tagFontSize,
+    iconFontSize,
+    transparentBackground,
+    truncatedText,
+  } = useStyle();
 
   const tagStyle = mergeClasses(!!tagAction && underline);
   const iconStyle = mergeClasses(borderTransparent, iconFontSize);
@@ -359,6 +372,9 @@ export default function PolyLookupControlNewLook({
                       />
                     ) : undefined
                   }
+                  primaryText={{
+                    className: truncatedText,
+                  }}
                   onClick={() => handleOnItemClick(i)}
                 >
                   <span className={tagFontSize}>{i.selectedOptionText}</span>