diff --git a/.changeset/ten-wasps-juggle.md b/.changeset/ten-wasps-juggle.md new file mode 100644 index 0000000000..25b4f11d25 --- /dev/null +++ b/.changeset/ten-wasps-juggle.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-home': minor +--- + +Resolved styling inconsistencies and title visibility issues in Top Visited and Recently Visited cards diff --git a/plugins/home/src/components/VisitList/VisitList.test.tsx b/plugins/home/src/components/VisitList/VisitList.test.tsx index 077c428706..12d0d8593e 100644 --- a/plugins/home/src/components/VisitList/VisitList.test.tsx +++ b/plugins/home/src/components/VisitList/VisitList.test.tsx @@ -20,16 +20,9 @@ import { render } from '@testing-library/react'; import { BrowserRouter } from 'react-router-dom'; describe('', () => { - it('renders with mandatory parameters', async () => { - const { getByText } = await render( - , - ); - expect(getByText('My title')).toBeInTheDocument(); - }); - it('renders skeleton when loading is true', async () => { const { container } = await render( - , + , ); expect(container.querySelectorAll('li')).toHaveLength(8); expect(container.querySelectorAll('.MuiSkeleton-root')).toHaveLength(16); @@ -38,7 +31,6 @@ describe('', () => { it('renders specified amount of items', async () => { const { container } = await render( ', () => { it('renders some items hidden', async () => { const { container } = await render( ', () => { it('renders all items when not collapsed', async () => { const { container } = await render( ', () => { const { container, getByText } = await render( ', () => { const { container, getByText } = await render( ', () => { const { getByText } = await render( ', () => { it('renders text warning about no items', async () => { const { getByText } = await render( - , + , , ); expect(getByText('There are no visits to show yet.')).toBeInTheDocument(); diff --git a/plugins/home/src/components/VisitList/VisitList.tsx b/plugins/home/src/components/VisitList/VisitList.tsx index f1dc855d9d..179be8fe48 100644 --- a/plugins/home/src/components/VisitList/VisitList.tsx +++ b/plugins/home/src/components/VisitList/VisitList.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import { Collapse, List, Typography, makeStyles } from '@material-ui/core'; +import { Collapse, List } from '@material-ui/core'; import { Visit } from '../../api/VisitsApi'; import { VisitListItem } from './VisitListItem'; import { ItemDetailType } from './ItemDetail'; @@ -23,14 +23,7 @@ import { VisitListEmpty } from './VisitListEmpty'; import { VisitListFew } from './VisitListFew'; import { VisitListSkeleton } from './VisitListSkeleton'; -const useStyles = makeStyles(_theme => ({ - title: { - marginBottom: '2rem', - }, -})); - export const VisitList = ({ - title, detailType, visits = [], numVisitsOpen = 3, @@ -38,7 +31,6 @@ export const VisitList = ({ collapsed = true, loading = false, }: { - title: string; detailType: ItemDetailType; visits?: Visit[]; numVisitsOpen?: number; @@ -46,8 +38,6 @@ export const VisitList = ({ collapsed?: boolean; loading?: boolean; }) => { - const classes = useStyles(); - let listBody: React.ReactElement = <>; if (loading) { listBody = ( @@ -91,9 +81,6 @@ export const VisitList = ({ return ( <> - - {title} - {listBody} diff --git a/plugins/home/src/homePageComponents/VisitedByType/VisitedByType.tsx b/plugins/home/src/homePageComponents/VisitedByType/VisitedByType.tsx index 23d7f3fffd..1b75895a88 100644 --- a/plugins/home/src/homePageComponents/VisitedByType/VisitedByType.tsx +++ b/plugins/home/src/homePageComponents/VisitedByType/VisitedByType.tsx @@ -25,7 +25,6 @@ export const VisitedByType = () => { return ( >({ name: 'HomePageTopVisited', + title: 'Top Visited', components: () => import('./homePageComponents/VisitedByType/TopVisited'), }), ); @@ -211,6 +212,7 @@ export const HomePageTopVisited = homePlugin.provide( export const HomePageRecentlyVisited = homePlugin.provide( createCardExtension>({ name: 'HomePageRecentlyVisited', + title: 'Recently Visited', components: () => import('./homePageComponents/VisitedByType/RecentlyVisited'), }),