added style maxwidth 200 and props

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

packages/core-components/api-report.md

@@ -47,7 +47,6 @@ import { StyledComponentProps } from '@material-ui/core/styles/withStyles';
 import { StyleRules } from '@material-ui/styles';
 import { StyleRules as StyleRules_2 } from '@material-ui/core/styles/withStyles';
 import { TabProps } from '@material-ui/core/Tab';
-import { TextTruncateProps } from 'react-text-truncate';
 import { Theme } from '@material-ui/core/styles';
 import { TooltipProps } from '@material-ui/core/Tooltip';
 import { WithStyles } from '@material-ui/core/styles';

packages/core-components/package.json

@@ -1,31 +1,32 @@
 {
   "name": "@backstage/core-components",
-  "description": "Core components used by Backstage plugins and apps",
   "version": "0.14.4",
-  "publishConfig": {
-    "access": "public"
-  },
+  "description": "Core components used by Backstage plugins and apps",
   "backstage": {
     "role": "web-library"
   },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "backstage"
+  ],
   "homepage": "https://backstage.io",
   "repository": {
     "type": "git",
     "url": "https://github.com/backstage/backstage",
     "directory": "packages/core-components"
   },
-  "keywords": [
-    "backstage"
-  ],
   "license": "Apache-2.0",
-  "main": "src/index.ts",
-  "types": "src/index.ts",
+  "sideEffects": false,
   "exports": {
     ".": "./src/index.ts",
     "./alpha": "./src/alpha.ts",
     "./testUtils": "./src/testUtils.ts",
     "./package.json": "./package.json"
   },
+  "main": "src/index.ts",
+  "types": "src/index.ts",
   "typesVersions": {
     "*": {
       "alpha": [
@@ -39,15 +40,18 @@
       ]
     }
   },
-  "sideEffects": false,
+  "files": [
+    "dist",
+    "config.d.ts"
+  ],
   "scripts": {
     "build": "backstage-cli package build",
+    "clean": "backstage-cli package clean",
     "lint": "backstage-cli package lint",
-    "test": "backstage-cli package test",
     "prepack": "backstage-cli package prepack",
     "postpack": "backstage-cli package postpack",
-    "clean": "backstage-cli package clean",
-    "start": "backstage-cli package start"
+    "start": "backstage-cli package start",
+    "test": "backstage-cli package test"
   },
   "dependencies": {
     "@backstage/config": "workspace:^",
@@ -63,7 +67,6 @@
     "@react-hookz/web": "^24.0.0",
     "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0",
     "@types/react-sparklines": "^1.7.0",
-    "@types/react-text-truncate": "^0.14.0",
     "ansi-regex": "^6.0.1",
     "classnames": "^2.2.6",
     "d3-selection": "^3.0.0",
@@ -82,7 +85,6 @@
     "react-markdown": "^8.0.0",
     "react-sparklines": "^1.7.0",
     "react-syntax-highlighter": "^15.4.5",
-    "react-text-truncate": "^0.19.0",
     "react-use": "^17.3.2",
     "react-virtualized-auto-sizer": "^1.0.11",
     "react-window": "^1.8.6",
@@ -90,11 +92,6 @@
     "zen-observable": "^0.10.0",
     "zod": "^3.22.4"
   },
-  "peerDependencies": {
-    "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
-    "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
-  },
   "devDependencies": {
     "@backstage/app-defaults": "workspace:^",
     "@backstage/cli": "workspace:^",
@@ -120,9 +117,10 @@
     "history": "^5.0.0",
     "msw": "^1.0.0"
   },
-  "files": [
-    "dist",
-    "config.d.ts"
-  ],
+  "peerDependencies": {
+    "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
+    "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
+  },
   "configSchema": "config.d.ts"
 }

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

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

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

@@ -21,7 +21,7 @@ import React from 'react';
 import Typography from '@material-ui/core/Typography';
 
 type Props = {
-  text: string;
+  text?: string | undefined;
   title?: TooltipProps['title'];
   placement?: TooltipProps['placement'];
 };
@@ -34,6 +34,7 @@ const useStyles = makeStyles(
       overflow: 'visible !important',
     },
     typo: {
+      maxWidth: 200,
       display: 'inline-block',
       overflow: 'hidden',
       whiteSpace: 'nowrap',