From b537bd7a6bc95c29d7e91091cee5eaa845801b01 Mon Sep 17 00:00:00 2001 From: Stephen Glass Date: Wed, 4 Sep 2024 23:21:58 -0400 Subject: [PATCH 1/6] custom theme options for star icon Signed-off-by: Stephen Glass --- .changeset/happy-bags-invite.md | 12 ++++++++++++ packages/app-defaults/src/defaults/icons.tsx | 4 ++++ packages/core-components/api-report.md | 6 ++++++ packages/core-components/src/icons/icons.tsx | 8 ++++++++ packages/theme/api-report.md | 9 +++++++++ packages/theme/src/base/palettes.ts | 6 ++++++ packages/theme/src/base/types.ts | 3 +++ .../src/components/FavoriteEntity/FavoriteEntity.tsx | 12 +++++------- .../src/components/UserListPicker/UserListPicker.tsx | 2 +- .../src/components/CatalogTable/CatalogTable.tsx | 12 ++++++------ .../StarredEntityListItem/StarredEntityListItem.tsx | 11 +++++++++-- .../techdocs/src/home/components/Tables/actions.tsx | 11 +++++------ 12 files changed, 74 insertions(+), 22 deletions(-) create mode 100644 .changeset/happy-bags-invite.md diff --git a/.changeset/happy-bags-invite.md b/.changeset/happy-bags-invite.md new file mode 100644 index 0000000000..02dc05f5fd --- /dev/null +++ b/.changeset/happy-bags-invite.md @@ -0,0 +1,12 @@ +--- +'@backstage/core-components': patch +'@backstage/app-defaults': patch +'@backstage/plugin-catalog-react': patch +'@backstage/plugin-techdocs': patch +'@backstage/plugin-catalog': patch +'@backstage/theme': patch +'@backstage/plugin-home': patch +--- + +- Allow custom star icons to be provided via the `star` and `unstarred` icon overides. See how to override existing icons in the [Backstage documentation](https://backstage.io/docs/getting-started/app-custom-theme/#custom-icons). +- Add `entityStarButton.color` theme option to allow custom themes to specify color for filled star icons. diff --git a/packages/app-defaults/src/defaults/icons.tsx b/packages/app-defaults/src/defaults/icons.tsx index 1ed5bf03c6..ebda36c131 100644 --- a/packages/app-defaults/src/defaults/icons.tsx +++ b/packages/app-defaults/src/defaults/icons.tsx @@ -36,6 +36,8 @@ import MuiPersonIcon from '@material-ui/icons/Person'; import MuiWarningIcon from '@material-ui/icons/Warning'; import MuiStorageIcon from '@material-ui/icons/Storage'; import MuiFeaturedPlayListIcon from '@material-ui/icons/FeaturedPlayList'; +import Star from '@material-ui/icons/Star'; +import StarBorder from '@material-ui/icons/StarBorder'; export const icons = { brokenImage: MuiBrokenImageIcon as IconComponent, @@ -62,4 +64,6 @@ export const icons = { 'kind:template': MuiFeaturedPlayListIcon as IconComponent, user: MuiPersonIcon as IconComponent, warning: MuiWarningIcon as IconComponent, + star: Star as IconComponent, + unstarred: StarBorder as IconComponent, }; diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 597b1a9abf..e2c1e47f78 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -1186,6 +1186,9 @@ export function SimpleStepperStep( // @public (undocumented) export type SimpleStepperStepClassKey = 'end'; +// @public (undocumented) +export function StarIcon(props: IconComponentProps): React_2.JSX.Element; + // Warning: (ae-missing-release-tag) "StatusAborted" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) @@ -1455,6 +1458,9 @@ export function TrendLine( }, ): React_2.JSX.Element | null; +// @public (undocumented) +export function UnstarredIcon(props: IconComponentProps): React_2.JSX.Element; + // @public export function useContent(): { focusContent: () => void; diff --git a/packages/core-components/src/icons/icons.tsx b/packages/core-components/src/icons/icons.tsx index ca3b6fa76a..bd1bf9e86e 100644 --- a/packages/core-components/src/icons/icons.tsx +++ b/packages/core-components/src/icons/icons.tsx @@ -95,3 +95,11 @@ export function UserIcon(props: IconComponentProps) { export function WarningIcon(props: IconComponentProps) { return ; } +/** @public */ +export function StarIcon(props: IconComponentProps) { + return ; +} +/** @public */ +export function UnstarredIcon(props: IconComponentProps) { + return ; +} diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index 988569ece7..4c6a8c1b5d 100644 --- a/packages/theme/api-report.md +++ b/packages/theme/api-report.md @@ -81,6 +81,9 @@ export type BackstagePaletteAdditions = { closeButtonColor?: string; warning?: string; }; + entityStarButton: { + color: string; + }; }; // @public @deprecated @@ -310,6 +313,9 @@ export const palettes: { tabbar: { indicator: string; }; + entityStarButton: { + color: string; + }; }; dark: { type: 'dark'; @@ -384,6 +390,9 @@ export const palettes: { tabbar: { indicator: string; }; + entityStarButton: { + color: string; + }; }; }; diff --git a/packages/theme/src/base/palettes.ts b/packages/theme/src/base/palettes.ts index 5e70afd7b8..55d21a060d 100644 --- a/packages/theme/src/base/palettes.ts +++ b/packages/theme/src/base/palettes.ts @@ -89,6 +89,9 @@ export const palettes = { tabbar: { indicator: '#9BF0E1', }, + entityStarButton: { + color: '#F3BA37', + }, }, dark: { type: 'dark' as const, @@ -163,5 +166,8 @@ export const palettes = { tabbar: { indicator: '#9BF0E1', }, + entityStarButton: { + color: '#F3BA37', + }, }, }; diff --git a/packages/theme/src/base/types.ts b/packages/theme/src/base/types.ts index d62d944741..4872ee8042 100644 --- a/packages/theme/src/base/types.ts +++ b/packages/theme/src/base/types.ts @@ -82,6 +82,9 @@ export type BackstagePaletteAdditions = { closeButtonColor?: string; warning?: string; }; + entityStarButton: { + color: string; + }; }; /** diff --git a/plugins/catalog-react/src/components/FavoriteEntity/FavoriteEntity.tsx b/plugins/catalog-react/src/components/FavoriteEntity/FavoriteEntity.tsx index ab674ff98e..9ddba4a2cc 100644 --- a/plugins/catalog-react/src/components/FavoriteEntity/FavoriteEntity.tsx +++ b/plugins/catalog-react/src/components/FavoriteEntity/FavoriteEntity.tsx @@ -18,8 +18,7 @@ import { Entity, stringifyEntityRef } from '@backstage/catalog-model'; import IconButton from '@material-ui/core/IconButton'; import Tooltip from '@material-ui/core/Tooltip'; import { withStyles } from '@material-ui/core/styles'; -import Star from '@material-ui/icons/Star'; -import StarBorder from '@material-ui/icons/StarBorder'; +import { StarIcon, UnstarredIcon } from '@backstage/core-components'; import React, { ComponentProps } from 'react'; import { useStarredEntity } from '../../hooks/useStarredEntity'; import { catalogReactTranslationRef } from '../../translation'; @@ -30,12 +29,11 @@ export type FavoriteEntityProps = ComponentProps & { entity: Entity; }; -const YellowStar = withStyles({ +const FilledStar = withStyles(theme => ({ root: { - color: '#f3ba37', + color: theme.palette.entityStarButton.color, }, -})(Star); - +}))(StarIcon); /** * IconButton for showing if a current entity is starred and adding/removing it from the favorite entities * @param props - MaterialUI IconButton props extended by required `entity` prop @@ -64,7 +62,7 @@ export const FavoriteEntity = (props: FavoriteEntityProps) => { onClick={() => toggleStarredEntity()} > - {isStarredEntity ? : } + {isStarredEntity ? : } ); diff --git a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx index c6b515aa67..f572cec814 100644 --- a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx +++ b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx @@ -28,7 +28,7 @@ import MenuItem from '@material-ui/core/MenuItem'; import Typography from '@material-ui/core/Typography'; import { makeStyles } from '@material-ui/core/styles'; import SettingsIcon from '@material-ui/icons/Settings'; -import StarIcon from '@material-ui/icons/Star'; +import { StarIcon } from '@backstage/core-components'; import React, { Fragment, useEffect, useMemo, useState } from 'react'; import { EntityUserFilter } from '../../filters'; import { useEntityList } from '../../hooks'; diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index 1026dc5d26..b136d98a82 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -23,6 +23,8 @@ import { } from '@backstage/catalog-model'; import { CodeSnippet, + StarIcon, + UnstarredIcon, Table, TableColumn, TableProps, @@ -39,8 +41,6 @@ import { withStyles } from '@material-ui/core/styles'; import { visuallyHidden } from '@mui/utils'; import Edit from '@material-ui/icons/Edit'; import OpenInNew from '@material-ui/icons/OpenInNew'; -import Star from '@material-ui/icons/Star'; -import StarBorder from '@material-ui/icons/StarBorder'; import { capitalize } from 'lodash'; import pluralize from 'pluralize'; import React, { ReactNode, useMemo } from 'react'; @@ -64,11 +64,11 @@ export interface CatalogTableProps { subtitle?: string; } -const YellowStar = withStyles({ +const FilledStar = withStyles(theme => ({ root: { - color: '#f3ba37', + color: theme.palette.entityStarButton.color, }, -})(Star); +}))(StarIcon); const refCompare = (a: Entity, b: Entity) => { const toRef = (entity: Entity) => @@ -163,7 +163,7 @@ export const CatalogTable = (props: CatalogTableProps) => { icon: () => ( <> {title} - {isStarred ? : } + {isStarred ? : } ), tooltip: title, diff --git a/plugins/home/src/components/StarredEntityListItem/StarredEntityListItem.tsx b/plugins/home/src/components/StarredEntityListItem/StarredEntityListItem.tsx index 579116b9a9..234ae699ec 100644 --- a/plugins/home/src/components/StarredEntityListItem/StarredEntityListItem.tsx +++ b/plugins/home/src/components/StarredEntityListItem/StarredEntityListItem.tsx @@ -24,7 +24,8 @@ import React from 'react'; import { Link } from 'react-router-dom'; import { entityRouteRef } from '@backstage/plugin-catalog-react'; import { useRouteRef } from '@backstage/core-plugin-api'; -import StarIcon from '@material-ui/icons/Star'; +import { StarIcon } from '@backstage/core-components'; +import { withStyles } from '@material-ui/core/styles'; type EntityListItemProps = { entity: Entity; @@ -37,6 +38,12 @@ export const StarredEntityListItem = ({ }: EntityListItemProps) => { const catalogEntityRoute = useRouteRef(entityRouteRef); + const FilledStar = withStyles(theme => ({ + root: { + color: theme.palette.entityStarButton.color, + }, + }))(StarIcon); + return ( @@ -46,7 +53,7 @@ export const StarredEntityListItem = ({ aria-label="unstar" onClick={() => onToggleStarredEntity(entity)} > - + diff --git a/plugins/techdocs/src/home/components/Tables/actions.tsx b/plugins/techdocs/src/home/components/Tables/actions.tsx index c95dd8b94c..c3eaa038c8 100644 --- a/plugins/techdocs/src/home/components/Tables/actions.tsx +++ b/plugins/techdocs/src/home/components/Tables/actions.tsx @@ -18,14 +18,13 @@ import React from 'react'; import ShareIcon from '@material-ui/icons/Share'; import { DocsTableRow } from './types'; import { withStyles } from '@material-ui/core/styles'; -import Star from '@material-ui/icons/Star'; -import StarBorder from '@material-ui/icons/StarBorder'; +import { StarIcon, UnstarredIcon } from '@backstage/core-components'; -const YellowStar = withStyles({ +const FilledStar = withStyles(theme => ({ root: { - color: '#f3ba37', + color: theme.palette.entityStarButton.color, }, -})(Star); +}))(StarIcon); /** * Not directly exported, but through DocsTable.actions and EntityListDocsTable.actions @@ -52,7 +51,7 @@ export const actionFactories = { const isStarred = isStarredEntity(entity); return { cellStyle: { paddingLeft: '1em' }, - icon: () => (isStarred ? : ), + icon: () => (isStarred ? : ), tooltip: isStarred ? 'Remove from favorites' : 'Add to favorites', onClick: () => toggleStarredEntity(entity), }; From decb4bf1f6a7a66d9e8d2c3c35aad56a8ab66b33 Mon Sep 17 00:00:00 2001 From: Stephen Glass Date: Thu, 5 Sep 2024 00:49:16 -0400 Subject: [PATCH 2/6] fix tests for star icon Signed-off-by: Stephen Glass --- packages/core-app-api/api-report.md | 2 ++ packages/core-app-api/src/app/types.ts | 2 ++ .../core-compat-api/src/compatWrapper/compatWrapper.test.tsx | 4 ++-- packages/test-utils/src/testUtils/appWrappers.tsx | 2 ++ 4 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/core-app-api/api-report.md b/packages/core-app-api/api-report.md index 8b8cc991c8..3d2c44a148 100644 --- a/packages/core-app-api/api-report.md +++ b/packages/core-app-api/api-report.md @@ -196,6 +196,8 @@ export type AppIcons = { techdocs: IconComponent; user: IconComponent; warning: IconComponent; + star: IconComponent; + unstarred: IconComponent; }; // @public diff --git a/packages/core-app-api/src/app/types.ts b/packages/core-app-api/src/app/types.ts index 9d2c77292c..513063e974 100644 --- a/packages/core-app-api/src/app/types.ts +++ b/packages/core-app-api/src/app/types.ts @@ -115,6 +115,8 @@ export type AppIcons = { techdocs: IconComponent; user: IconComponent; warning: IconComponent; + star: IconComponent; + unstarred: IconComponent; }; /** diff --git a/packages/core-compat-api/src/compatWrapper/compatWrapper.test.tsx b/packages/core-compat-api/src/compatWrapper/compatWrapper.test.tsx index 6357f13906..2e6b127070 100644 --- a/packages/core-compat-api/src/compatWrapper/compatWrapper.test.tsx +++ b/packages/core-compat-api/src/compatWrapper/compatWrapper.test.tsx @@ -72,7 +72,7 @@ describe('BackwardsCompatProvider', () => { expect(screen.getByTestId('ctx').textContent).toMatchInlineSnapshot(` "plugins: components: NotFoundErrorPage, BootErrorPage, Progress, Router, ErrorBoundaryFallback - icons: brokenImage, catalog, scaffolder, techdocs, search, chat, dashboard, docs, email, github, group, help, kind:api, kind:component, kind:domain, kind:group, kind:location, kind:system, kind:user, kind:resource, kind:template, user, warning" + icons: brokenImage, catalog, scaffolder, techdocs, search, chat, dashboard, docs, email, github, group, help, kind:api, kind:component, kind:domain, kind:group, kind:location, kind:system, kind:user, kind:resource, kind:template, user, warning, star, unstarred" `); }); @@ -116,7 +116,7 @@ describe('ForwardsCompatProvider', () => { expect(screen.getByTestId('ctx').textContent).toMatchInlineSnapshot(` "components: progress=true, notFoundErrorPage=true, errorBoundaryFallback=true - icons: kind:api, kind:component, kind:domain, kind:group, kind:location, kind:system, kind:user, kind:resource, kind:template, brokenImage, catalog, scaffolder, techdocs, search, chat, dashboard, docs, email, github, group, help, user, warning" + icons: kind:api, kind:component, kind:domain, kind:group, kind:location, kind:system, kind:user, kind:resource, kind:template, brokenImage, catalog, scaffolder, techdocs, search, chat, dashboard, docs, email, github, group, help, user, warning, star, unstarred" `); }); diff --git a/packages/test-utils/src/testUtils/appWrappers.tsx b/packages/test-utils/src/testUtils/appWrappers.tsx index 3a55389b74..6f9361f39b 100644 --- a/packages/test-utils/src/testUtils/appWrappers.tsx +++ b/packages/test-utils/src/testUtils/appWrappers.tsx @@ -63,6 +63,8 @@ const mockIcons = { help: MockIcon, user: MockIcon, warning: MockIcon, + star: MockIcon, + unstarred: MockIcon, }; const ErrorBoundaryFallback = ({ error }: { error: Error }) => { From 4d5c115b9f18651467523f0a219ef0483465749f Mon Sep 17 00:00:00 2001 From: Stephen Glass Date: Thu, 5 Sep 2024 01:30:16 -0400 Subject: [PATCH 3/6] update changeset for star icon Signed-off-by: Stephen Glass --- .changeset/happy-bags-invite.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.changeset/happy-bags-invite.md b/.changeset/happy-bags-invite.md index 02dc05f5fd..ba8f3e846e 100644 --- a/.changeset/happy-bags-invite.md +++ b/.changeset/happy-bags-invite.md @@ -6,6 +6,8 @@ '@backstage/plugin-catalog': patch '@backstage/theme': patch '@backstage/plugin-home': patch +'@backstage/core-app-api': patch +'@backstage/test-utils': patch --- - Allow custom star icons to be provided via the `star` and `unstarred` icon overides. See how to override existing icons in the [Backstage documentation](https://backstage.io/docs/getting-started/app-custom-theme/#custom-icons). From 523556bc364794c783a5ffd029d1407c500e7328 Mon Sep 17 00:00:00 2001 From: Stephen Glass Date: Thu, 5 Sep 2024 19:09:58 -0400 Subject: [PATCH 4/6] update favorite toggle icons Signed-off-by: Stephen Glass --- .changeset/happy-bags-invite.md | 7 +------ .../components/FavoriteToggle/FavoriteToggle.tsx | 15 +++++++++------ packages/theme/api-report.md | 9 --------- packages/theme/src/base/palettes.ts | 6 ------ packages/theme/src/base/types.ts | 3 --- .../src/components/CatalogTable/CatalogTable.tsx | 2 -- 6 files changed, 10 insertions(+), 32 deletions(-) diff --git a/.changeset/happy-bags-invite.md b/.changeset/happy-bags-invite.md index ba8f3e846e..e97300150b 100644 --- a/.changeset/happy-bags-invite.md +++ b/.changeset/happy-bags-invite.md @@ -2,13 +2,8 @@ '@backstage/core-components': patch '@backstage/app-defaults': patch '@backstage/plugin-catalog-react': patch -'@backstage/plugin-techdocs': patch -'@backstage/plugin-catalog': patch -'@backstage/theme': patch -'@backstage/plugin-home': patch '@backstage/core-app-api': patch '@backstage/test-utils': patch --- -- Allow custom star icons to be provided via the `star` and `unstarred` icon overides. See how to override existing icons in the [Backstage documentation](https://backstage.io/docs/getting-started/app-custom-theme/#custom-icons). -- Add `entityStarButton.color` theme option to allow custom themes to specify color for filled star icons. +Allow custom star icons to be provided via the `star` and `unstarred` icon overides. See how to override existing icons in the [Backstage documentation](https://backstage.io/docs/getting-started/app-custom-theme/#custom-icons). diff --git a/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.tsx b/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.tsx index 65124ab05c..8a517d27ea 100644 --- a/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.tsx +++ b/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.tsx @@ -16,9 +16,9 @@ import React, { ComponentProps } from 'react'; import IconButton from '@material-ui/core/IconButton'; import Tooltip from '@material-ui/core/Tooltip'; +import Typography from '@material-ui/core/Typography'; import { Theme, makeStyles } from '@material-ui/core/styles'; -import Star from '@material-ui/icons/Star'; -import StarBorder from '@material-ui/icons/StarBorder'; +import { StarIcon, UnstarredIcon } from '../../icons'; const useStyles = makeStyles( theme => ({ @@ -50,10 +50,13 @@ export function FavoriteToggleIcon(props: { isFavorite: boolean }) { const { isFavorite } = props; const classes = useStyles(); - return isFavorite ? ( - - ) : ( - + return ( + + {isFavorite ? : } + ); } diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index 4c6a8c1b5d..988569ece7 100644 --- a/packages/theme/api-report.md +++ b/packages/theme/api-report.md @@ -81,9 +81,6 @@ export type BackstagePaletteAdditions = { closeButtonColor?: string; warning?: string; }; - entityStarButton: { - color: string; - }; }; // @public @deprecated @@ -313,9 +310,6 @@ export const palettes: { tabbar: { indicator: string; }; - entityStarButton: { - color: string; - }; }; dark: { type: 'dark'; @@ -390,9 +384,6 @@ export const palettes: { tabbar: { indicator: string; }; - entityStarButton: { - color: string; - }; }; }; diff --git a/packages/theme/src/base/palettes.ts b/packages/theme/src/base/palettes.ts index 55d21a060d..5e70afd7b8 100644 --- a/packages/theme/src/base/palettes.ts +++ b/packages/theme/src/base/palettes.ts @@ -89,9 +89,6 @@ export const palettes = { tabbar: { indicator: '#9BF0E1', }, - entityStarButton: { - color: '#F3BA37', - }, }, dark: { type: 'dark' as const, @@ -166,8 +163,5 @@ export const palettes = { tabbar: { indicator: '#9BF0E1', }, - entityStarButton: { - color: '#F3BA37', - }, }, }; diff --git a/packages/theme/src/base/types.ts b/packages/theme/src/base/types.ts index 4872ee8042..d62d944741 100644 --- a/packages/theme/src/base/types.ts +++ b/packages/theme/src/base/types.ts @@ -82,9 +82,6 @@ export type BackstagePaletteAdditions = { closeButtonColor?: string; warning?: string; }; - entityStarButton: { - color: string; - }; }; /** diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index 38f50d9eb1..ac459b83d6 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -23,8 +23,6 @@ import { } from '@backstage/catalog-model'; import { CodeSnippet, - StarIcon, - UnstarredIcon, Table, TableColumn, TableProps, From e03455c6e08e15264a079eb60103a4bb6feca65d Mon Sep 17 00:00:00 2001 From: Stephen Glass Date: Thu, 5 Sep 2024 19:34:51 -0400 Subject: [PATCH 5/6] fix favorite toggle test to render in test app Signed-off-by: Stephen Glass --- .../components/FavoriteToggle/FavoriteToggle.test.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.test.tsx b/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.test.tsx index c5ca4c33f2..66b420b467 100644 --- a/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.test.tsx +++ b/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.test.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { render } from '@testing-library/react'; +import { renderInTestApp } from '@backstage/test-utils'; import { FavoriteToggle } from './FavoriteToggle'; import React from 'react'; import userEvent from '@testing-library/user-event'; @@ -33,20 +33,22 @@ describe('', () => { }); it('renders with valid props', async () => { - const { getByRole } = render(); + const { getByRole } = await renderInTestApp(); expect(getByRole('button', { name: props.title })).toBeInTheDocument(); }); it('should return inverted value on toggle', async () => { - const { getByRole } = render(); + const { getByRole } = await renderInTestApp(); await userEvent.click(getByRole('button', { name: props.title })); expect(onToggle).toHaveBeenCalledWith(!props.isFavorite); }); it('should show accessible tooltip', async () => { - const { findByRole, getByRole } = render(); + const { findByRole, getByRole } = await renderInTestApp( + , + ); await userEvent.hover(getByRole('button', { name: props.title })); From 1e26b50711158c96f9bf57a6c6bad57eafb34095 Mon Sep 17 00:00:00 2001 From: Stephen Glass Date: Fri, 6 Sep 2024 09:07:58 -0400 Subject: [PATCH 6/6] Update happy-bags-invite.md Co-authored-by: Ben Lambert Signed-off-by: Stephen Glass --- .changeset/happy-bags-invite.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/happy-bags-invite.md b/.changeset/happy-bags-invite.md index e97300150b..829d7a0e49 100644 --- a/.changeset/happy-bags-invite.md +++ b/.changeset/happy-bags-invite.md @@ -6,4 +6,4 @@ '@backstage/test-utils': patch --- -Allow custom star icons to be provided via the `star` and `unstarred` icon overides. See how to override existing icons in the [Backstage documentation](https://backstage.io/docs/getting-started/app-custom-theme/#custom-icons). +Allow custom star icons to be provided via the `star` and `unstarred` icon overrides. See how to override existing icons in the [Backstage documentation](https://backstage.io/docs/getting-started/app-custom-theme/#custom-icons).