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), };