diff --git a/.changeset/great-roses-pump.md b/.changeset/great-roses-pump.md new file mode 100644 index 0000000000..16a49bd464 --- /dev/null +++ b/.changeset/great-roses-pump.md @@ -0,0 +1,23 @@ +--- +'@backstage/plugin-catalog': patch +--- + +Previously, the color of the Entity Context Menu (in the Entity Page Header) was hardcoded as `white`. + +This was an issue for themes that use a header with a white background. By default, the color of the icon is now `theme.palette.bursts.fontColor`. + +It can now also be overridden in the theme, which is only necessary if the header title, subtitle and three-dots icon need to have different colors. For example: + +```typescript +export function createThemeOverrides(theme: BackstageTheme): Overrides { + return { + PluginCatalogEntityContextMenu: { + button: { + color: 'blue', + }, + }, + ... + }, + ... + } +``` diff --git a/plugins/catalog/api-report.md b/plugins/catalog/api-report.md index 34bb5dfcec..0d2d611412 100644 --- a/plugins/catalog/api-report.md +++ b/plugins/catalog/api-report.md @@ -211,6 +211,9 @@ export interface DependsOnResourcesCardProps { // @public (undocumented) export const EntityAboutCard: (props: AboutCardProps) => JSX.Element; +// @public (undocumented) +export type EntityContextMenuClassKey = 'button'; + // @public (undocumented) export const EntityDependencyOfComponentsCard: ( props: DependencyOfComponentsCardProps, @@ -394,6 +397,7 @@ export function isOrphan(entity: Entity): boolean; export type PluginCatalogComponentsNameToClassKey = { PluginCatalogEntityLinksEmptyState: EntityLinksEmptyStateClassKey; PluginCatalogSystemDiagramCard: SystemDiagramCardClassKey; + PluginCatalogEntityContextMenu: EntityContextMenuClassKey; }; // @public (undocumented) diff --git a/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx b/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx index 5664186ab1..db50eeab84 100644 --- a/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx +++ b/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx @@ -31,13 +31,21 @@ import React, { useState } from 'react'; import { IconComponent } from '@backstage/core-plugin-api'; import { useEntityPermission } from '@backstage/plugin-catalog-react'; import { catalogEntityDeletePermission } from '@backstage/plugin-catalog-common'; +import { BackstageTheme } from '@backstage/theme'; -// TODO(freben): It should probably instead be the case that Header sets the theme text color to white inside itself unconditionally instead -const useStyles = makeStyles({ - button: { - color: 'white', +/** @public */ +export type EntityContextMenuClassKey = 'button'; + +const useStyles = makeStyles( + (theme: BackstageTheme) => { + return { + button: { + color: theme.palette.bursts.fontColor, + }, + }; }, -}); + { name: 'PluginCatalogEntityContextMenu' }, +); // NOTE(freben): Intentionally not exported at this point, since it's part of // the unstable extra context menu items concept below diff --git a/plugins/catalog/src/components/EntityContextMenu/index.ts b/plugins/catalog/src/components/EntityContextMenu/index.ts new file mode 100644 index 0000000000..4a2deb20b4 --- /dev/null +++ b/plugins/catalog/src/components/EntityContextMenu/index.ts @@ -0,0 +1,18 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { EntityContextMenu } from './EntityContextMenu'; +export type { EntityContextMenuClassKey } from './EntityContextMenu'; diff --git a/plugins/catalog/src/index.ts b/plugins/catalog/src/index.ts index cfe4851d09..f0f94656d5 100644 --- a/plugins/catalog/src/index.ts +++ b/plugins/catalog/src/index.ts @@ -62,6 +62,7 @@ export type { } from './components/EntityLinksCard'; export type { SystemDiagramCardClassKey } from './components/SystemDiagramCard'; export type { DefaultCatalogPageProps } from './components/CatalogPage'; +export type { EntityContextMenuClassKey } from './components/EntityContextMenu'; export type { HasComponentsCardProps } from './components/HasComponentsCard'; export type { HasResourcesCardProps } from './components/HasResourcesCard'; export type { HasSubcomponentsCardProps } from './components/HasSubcomponentsCard'; diff --git a/plugins/catalog/src/overridableComponents.ts b/plugins/catalog/src/overridableComponents.ts index e76aafbb68..5cd82202d5 100644 --- a/plugins/catalog/src/overridableComponents.ts +++ b/plugins/catalog/src/overridableComponents.ts @@ -18,11 +18,13 @@ import { StyleRules } from '@material-ui/core/styles/withStyles'; import { EntityLinksEmptyStateClassKey } from './components/EntityLinksCard'; import { SystemDiagramCardClassKey } from './components/SystemDiagramCard'; +import { EntityContextMenuClassKey } from './components/EntityContextMenu'; /** @public */ export type PluginCatalogComponentsNameToClassKey = { PluginCatalogEntityLinksEmptyState: EntityLinksEmptyStateClassKey; PluginCatalogSystemDiagramCard: SystemDiagramCardClassKey; + PluginCatalogEntityContextMenu: EntityContextMenuClassKey; }; /** @public */