diff --git a/.changeset/sweet-spiders-rhyme.md b/.changeset/sweet-spiders-rhyme.md new file mode 100644 index 0000000000..71dcc375c0 --- /dev/null +++ b/.changeset/sweet-spiders-rhyme.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Removing react-text-truncate with css styles. diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 09870afb9b..0f71bcb004 100644 --- a/packages/core-components/api-report.md +++ b/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'; diff --git a/packages/core-components/package.json b/packages/core-components/package.json index 014059b89b..316ce46ac4 100644 --- a/packages/core-components/package.json +++ b/packages/core-components/package.json @@ -8,24 +8,25 @@ "backstage": { "role": "web-library" }, + "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" } diff --git a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx index da489725e4..4b5b0f4bde 100644 --- a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx +++ b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx @@ -16,15 +16,13 @@ import { makeStyles } from '@material-ui/core/styles'; import Tooltip, { TooltipProps } from '@material-ui/core/Tooltip'; -import React, { useState } from 'react'; -import TextTruncate, { TextTruncateProps } from 'react-text-truncate'; -import { useIsMounted } from '@react-hookz/web'; +import React from 'react'; +import Typography from '@material-ui/core/Typography'; type Props = { - text: TextTruncateProps['text']; - line?: TextTruncateProps['line']; - element?: TextTruncateProps['element']; + text?: string | undefined; title?: TooltipProps['title']; + line?: number | undefined; placement?: TooltipProps['placement']; }; @@ -35,33 +33,26 @@ const useStyles = makeStyles( container: { overflow: 'visible !important', }, + typo: { + overflow: 'hidden', + textOverflow: 'ellipsis', + display: '-webkit-box', + '-webkit-line-clamp': ({ line }: Props) => line || 1, + '-webkit-box-orient': 'vertical', + }, }, { name: 'BackstageOverflowTooltip' }, ); export function OverflowTooltip(props: Props) { - const [hover, setHover] = useState(false); - const isMounted = useIsMounted(); - const classes = useStyles(); - - const handleToggled = (truncated: boolean) => { - if (isMounted()) { - setHover(truncated); - } - }; + const classes = useStyles(props); return ( - + {props.text} ); } diff --git a/plugins/catalog-react/src/components/EntityTable/presets.test.tsx b/plugins/catalog-react/src/components/EntityTable/presets.test.tsx index 82075df5e9..afe4336300 100644 --- a/plugins/catalog-react/src/components/EntityTable/presets.test.tsx +++ b/plugins/catalog-react/src/components/EntityTable/presets.test.tsx @@ -72,7 +72,7 @@ describe('systemEntityColumns', () => { expect(screen.getByText('my-namespace/my-system')).toBeInTheDocument(); expect(screen.getByText('my-namespace/my-domain')).toBeInTheDocument(); expect(screen.getByText('test')).toBeInTheDocument(); - expect(screen.getByText(/Some/)).toBeInTheDocument(); + expect(screen.queryAllByText(/Some/)).not.toHaveLength(0); }); }); }); @@ -126,7 +126,7 @@ describe('componentEntityColumns', () => { expect(screen.getByText('test')).toBeInTheDocument(); expect(screen.getByText('production')).toBeInTheDocument(); expect(screen.getByText('service')).toBeInTheDocument(); - expect(screen.getByText(/Some/)).toBeInTheDocument(); + expect(screen.queryAllByText(/Some/)).not.toHaveLength(0); }); }); }); diff --git a/yarn.lock b/yarn.lock index 20406fdb91..977e2b724f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4068,7 +4068,6 @@ __metadata: "@types/react-helmet": ^6.1.0 "@types/react-sparklines": ^1.7.0 "@types/react-syntax-highlighter": ^15.0.0 - "@types/react-text-truncate": ^0.14.0 "@types/react-virtualized-auto-sizer": ^1.0.1 "@types/react-window": ^1.8.5 "@types/zen-observable": ^0.8.0 @@ -4093,7 +4092,6 @@ __metadata: 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