From 4c67f23a162c27dc466eb66b1c9fc94c10b6bbba Mon Sep 17 00:00:00 2001 From: its-mitesh-kumar Date: Wed, 9 Oct 2024 13:54:00 +0530 Subject: [PATCH 1/5] fix(catalog-react) : fixing text overflow Signed-off-by: its-mitesh-kumar --- .../EntityDisplayName/EntityDisplayName.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx b/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx index 68d5ecefdb..0c9622080a 100644 --- a/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx +++ b/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx @@ -20,6 +20,7 @@ import Tooltip from '@material-ui/core/Tooltip'; import { Theme, makeStyles } from '@material-ui/core/styles'; import React from 'react'; import { useEntityPresentation } from '../../apis'; +import Typography from '@material-ui/core/Typography'; /** * The available style class keys for {@link EntityDisplayName}, under the name @@ -34,6 +35,7 @@ const useStyles = makeStyles( root: { display: 'inline-flex', alignItems: 'center', + maxWidth: '100%', }, icon: { marginRight: theme.spacing(0.5), @@ -42,6 +44,13 @@ const useStyles = makeStyles( verticalAlign: 'middle', }, }, + truncate: { + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + maxWidth: '100%', + display: 'block', + }, }), { name: 'CatalogReactEntityDisplayName' }, ); @@ -77,7 +86,9 @@ export const EntityDisplayName = ( ); // The innermost "body" content - let content = <>{primaryTitle}; + let content = ( + {primaryTitle} + ); // Optionally an icon, and wrapper around them both content = ( From ec4b9ab4fd24270d2706419c359b5a1964ae9b11 Mon Sep 17 00:00:00 2001 From: its-mitesh-kumar Date: Wed, 9 Oct 2024 14:34:39 +0530 Subject: [PATCH 2/5] fix(catalog-react) : adding changeset Signed-off-by: its-mitesh-kumar --- .changeset/stupid-insects-allow.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/stupid-insects-allow.md diff --git a/.changeset/stupid-insects-allow.md b/.changeset/stupid-insects-allow.md new file mode 100644 index 0000000000..b511faed43 --- /dev/null +++ b/.changeset/stupid-insects-allow.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-react': patch +--- + +Fixed bug in EntityDisplayName where text was overflowing From b8bcfbd472409d19139e93acc8886ab9d13b905e Mon Sep 17 00:00:00 2001 From: its-mitesh-kumar Date: Fri, 18 Oct 2024 19:51:16 +0530 Subject: [PATCH 3/5] ix(catalog-react) : using noWrap prop of Typography instead of class , adding tooltip Signed-off-by: its-mitesh-kumar --- .../EntityDisplayName/EntityDisplayName.tsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx b/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx index 0c9622080a..68c81e251b 100644 --- a/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx +++ b/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx @@ -44,13 +44,6 @@ const useStyles = makeStyles( verticalAlign: 'middle', }, }, - truncate: { - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis', - maxWidth: '100%', - display: 'block', - }, }), { name: 'CatalogReactEntityDisplayName' }, ); @@ -87,7 +80,9 @@ export const EntityDisplayName = ( // The innermost "body" content let content = ( - {primaryTitle} + + {primaryTitle} + ); // Optionally an icon, and wrapper around them both From 18762e496a941c7fbc426cf18918de02f814d032 Mon Sep 17 00:00:00 2001 From: its-mitesh-kumar Date: Fri, 18 Oct 2024 20:00:50 +0530 Subject: [PATCH 4/5] fix(catalog-react) : updating changeset Signed-off-by: its-mitesh-kumar --- .changeset/stupid-insects-allow.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/stupid-insects-allow.md b/.changeset/stupid-insects-allow.md index b511faed43..a55b5c1044 100644 --- a/.changeset/stupid-insects-allow.md +++ b/.changeset/stupid-insects-allow.md @@ -2,4 +2,4 @@ '@backstage/plugin-catalog-react': patch --- -Fixed bug in EntityDisplayName where text was overflowing +Fixed bug in `EntityDisplayName` where text was overflowing. From 83038c0785b3b56ac6faee7188b2572948d45555 Mon Sep 17 00:00:00 2001 From: its-mitesh-kumar Date: Mon, 21 Oct 2024 18:05:41 +0530 Subject: [PATCH 5/5] fix(catalog-react) : fixing accessibility issue Signed-off-by: its-mitesh-kumar --- .../EntityDisplayName/EntityDisplayName.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx b/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx index 68c81e251b..7ffceb2cce 100644 --- a/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx +++ b/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx @@ -80,8 +80,19 @@ export const EntityDisplayName = ( // The innermost "body" content let content = ( - - {primaryTitle} + + + {primaryTitle} + );