line prop is back

Signed-off-by: npiyush97 <npiyush35@gmail.com>

packages/core-components/src/components/OverflowTooltip/OverflowTooltip.stories.tsx

@@ -33,12 +33,16 @@ export const Default = () => (
 
 export const MultiLine = () => (
   <Box maxWidth="200px">
-    <OverflowTooltip text={text} />
+    <OverflowTooltip text={text} line={2} />
   </Box>
 );
 
 export const DifferentTitle = () => (
   <Box maxWidth="200px">
-    <OverflowTooltip title="Visit loremipsum.io for more info" text={text} />
+    <OverflowTooltip
+      title="Visit loremipsum.io for more info"
+      text={text}
+      line={2}
+    />
   </Box>
 );

packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 /*
  * Copyright 2020 The Backstage Authors
  *
@@ -23,6 +22,7 @@ import Typography from '@material-ui/core/Typography';
 type Props = {
   text?: string | undefined;
   title?: TooltipProps['title'];
+  line?: number | undefined;
   placement?: TooltipProps['placement'];
 };
 
@@ -35,17 +35,18 @@ const useStyles = makeStyles(
     },
     typo: {
       maxWidth: 200,
-      display: 'inline-block',
       overflow: 'hidden',
-      whiteSpace: 'nowrap',
       textOverflow: 'ellipsis',
+      display: '-webkit-box',
+      '-webkit-line-clamp': ({ line }: Props) => line,
+      '-webkit-box-orient': 'vertical',
     },
   },
   { name: 'BackstageOverflowTooltip' },
 );
 
 export function OverflowTooltip(props: Props) {
-  const classes = useStyles();
+  const classes = useStyles(props);
 
   return (
     <Tooltip

plugins/catalog-react/src/components/EntityTable/columns.tsx

@@ -141,6 +141,7 @@ export const columnFactories = Object.freeze({
         <OverflowTooltip
           text={entity.metadata.description}
           placement="bottom-start"
+          line={1}
         />
       ),
     };

plugins/catalog/src/components/CatalogTable/columns.tsx

@@ -141,6 +141,7 @@ export const columnFactories = Object.freeze({
         <OverflowTooltip
           text={entity.metadata.description}
           placement="bottom-start"
+          line={1}
         />
       ),
       width: 'auto',