Merge pull request #11769 from AvaliaSystems/bf-entity-context-menu-style

Bf entity context menu style

.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',
+      },
+    },
+    ...
+  },
+  ...
+  }
+```

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)

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

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';

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';

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 */