diff --git a/.changeset/tall-bears-taste.md b/.changeset/tall-bears-taste.md
new file mode 100644
index 0000000000..050c47867c
--- /dev/null
+++ b/.changeset/tall-bears-taste.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Add title prop in SupportButton component
diff --git a/packages/core-components/src/components/SupportButton/SupportButton.test.tsx b/packages/core-components/src/components/SupportButton/SupportButton.test.tsx
index 6d6b9fd477..7c6cab99c1 100644
--- a/packages/core-components/src/components/SupportButton/SupportButton.test.tsx
+++ b/packages/core-components/src/components/SupportButton/SupportButton.test.tsx
@@ -21,8 +21,9 @@ import {
RenderResult,
waitFor,
fireEvent,
+ screen,
} from '@testing-library/react';
-import { wrapInTestApp } from '@backstage/test-utils';
+import { wrapInTestApp, renderInTestApp } from '@backstage/test-utils';
import { SupportButton } from './SupportButton';
const SUPPORT_BUTTON_ID = 'support-button';
@@ -41,6 +42,12 @@ describe('', () => {
);
});
+ it('supports passing a title', async () => {
+ await renderInTestApp();
+ fireEvent.click(screen.getByTestId(SUPPORT_BUTTON_ID));
+ expect(screen.getByText('Custom title')).toBeInTheDocument();
+ });
+
it('shows popover on click', async () => {
let renderResult: RenderResult;
diff --git a/packages/core-components/src/components/SupportButton/SupportButton.tsx b/packages/core-components/src/components/SupportButton/SupportButton.tsx
index 6c6de8abe3..96cc308f74 100644
--- a/packages/core-components/src/components/SupportButton/SupportButton.tsx
+++ b/packages/core-components/src/components/SupportButton/SupportButton.tsx
@@ -24,19 +24,18 @@ import {
ListItem,
ListItemIcon,
ListItemText,
+ Typography,
makeStyles,
Popover,
} from '@material-ui/core';
-import React, {
- Fragment,
- MouseEventHandler,
- PropsWithChildren,
- useState,
-} from 'react';
+import React, { Fragment, MouseEventHandler, useState } from 'react';
import { SupportItem, SupportItemLink, useSupportConfig } from '../../hooks';
import { Link } from '../Link';
-type Props = {};
+type SupportButtonProps = {
+ title?: string;
+ children?: React.ReactNode;
+};
const useStyles = makeStyles({
popoverList: {
@@ -78,7 +77,7 @@ const SupportListItem = ({ item }: { item: SupportItem }) => {
);
};
-export const SupportButton = ({ children }: PropsWithChildren) => {
+export const SupportButton = ({ title, children }: SupportButtonProps) => {
const { items } = useSupportConfig();
const [popoverOpen, setPopoverOpen] = useState(false);
@@ -121,13 +120,20 @@ export const SupportButton = ({ children }: PropsWithChildren) => {
onClose={popoverCloseHandler}
>
+ {title && (
+
+ {title}
+
+ )}
{React.Children.map(children, (child, i) => (
-
+
{child}
))}
{items &&
- items.map((item, i) => )}
+ items.map((item, i) => (
+
+ ))}