diff --git a/.changeset/popular-dancers-join.md b/.changeset/popular-dancers-join.md
new file mode 100644
index 0000000000..e7f6ab524f
--- /dev/null
+++ b/.changeset/popular-dancers-join.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+The Button component has been deprecated in favor of the LinkButton component
diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md
index 19bdfced27..721c208406 100644
--- a/packages/core-components/api-report.md
+++ b/packages/core-components/api-report.md
@@ -130,11 +130,11 @@ export type BreadcrumbsStyledBoxClassKey = 'root';
// @public
export function BrokenImageIcon(props: IconComponentProps): JSX.Element;
-// @public
+// @public @deprecated (undocumented)
export const Button: (props: ButtonProps) => JSX.Element;
-// @public
-export type ButtonProps = ButtonProps_2 & Omit;
+// @public @deprecated (undocumented)
+export type ButtonProps = LinkButtonProps;
// @public (undocumented)
export type CardActionsTopRightClassKey = 'root';
@@ -630,6 +630,13 @@ export function LinearGauge(props: Props_11): JSX.Element | null;
// @public
export const Link: (props: LinkProps) => JSX.Element;
+// @public
+export const LinkButton: (props: ButtonProps) => JSX.Element;
+
+// @public
+export type LinkButtonProps = ButtonProps_2 &
+ Omit;
+
// Warning: (ae-missing-release-tag) "LinkProps" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
diff --git a/packages/core-components/src/components/Button/Button.stories.tsx b/packages/core-components/src/components/LinkButton/LinkButton.stories.tsx
similarity index 89%
rename from packages/core-components/src/components/Button/Button.stories.tsx
rename to packages/core-components/src/components/LinkButton/LinkButton.stories.tsx
index ca95316ee8..3dc49abb7f 100644
--- a/packages/core-components/src/components/Button/Button.stories.tsx
+++ b/packages/core-components/src/components/LinkButton/LinkButton.stories.tsx
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { ComponentType } from 'react';
-import { Button } from './Button';
+import { LinkButton } from './LinkButton';
import { useLocation } from 'react-router-dom';
import { createRouteRef, useRouteRef } from '@backstage/core-plugin-api';
import Divider from '@material-ui/core/Divider';
@@ -37,7 +37,7 @@ const Location = () => {
export default {
title: 'Inputs/Button',
- component: Button,
+ component: LinkButton,
decorators: [
(Story: ComponentType<{}>) =>
wrapInTestApp(
@@ -80,9 +80,9 @@ export const Default = () => {
color="primary" variant="contained"
-
+
@@ -93,9 +93,9 @@ export const Default = () => {
color="secondary" variant="contained"
-
+
@@ -106,9 +106,9 @@ export const Default = () => {
color="default" variant="outlined"
-
+
);
@@ -128,17 +128,17 @@ export const ButtonLinks = () => {
// TODO: Refactor to use new routing mechanisms
}
-
+
has props for both Material-UI's component as well as for
react-router-dom's Route object.
-
+
links to a statically defined route. In general, this should be
avoided.
diff --git a/packages/core-components/src/components/Button/Button.test.tsx b/packages/core-components/src/components/LinkButton/LinkButton.test.tsx
similarity index 84%
rename from packages/core-components/src/components/Button/Button.test.tsx
rename to packages/core-components/src/components/LinkButton/LinkButton.test.tsx
index c5942e3d78..7dbc42f9cb 100644
--- a/packages/core-components/src/components/Button/Button.test.tsx
+++ b/packages/core-components/src/components/LinkButton/LinkButton.test.tsx
@@ -17,17 +17,17 @@
import React from 'react';
import { render, fireEvent, act } from '@testing-library/react';
import { wrapInTestApp } from '@backstage/test-utils';
-import { Button } from './Button';
+import { LinkButton } from './LinkButton';
import { Route, Routes } from 'react-router-dom';
-describe('', () => {
+describe('', () => {
it('navigates using react-router', async () => {
const testString = 'This is test string';
- const buttonLabel = 'Navigate!';
+ const linkButtonLabel = 'Navigate!';
const { getByText } = render(
wrapInTestApp(
<>
-
+ {linkButtonLabel}
{testString}
} />
@@ -37,7 +37,7 @@ describe('', () => {
expect(() => getByText(testString)).toThrow();
await act(async () => {
- fireEvent.click(getByText(buttonLabel));
+ fireEvent.click(getByText(linkButtonLabel));
});
expect(getByText(testString)).toBeInTheDocument();
});
diff --git a/packages/core-components/src/components/Button/Button.tsx b/packages/core-components/src/components/LinkButton/LinkButton.tsx
similarity index 79%
rename from packages/core-components/src/components/Button/Button.tsx
rename to packages/core-components/src/components/LinkButton/LinkButton.tsx
index 575f42b03c..a6ba4d67a7 100644
--- a/packages/core-components/src/components/Button/Button.tsx
+++ b/packages/core-components/src/components/LinkButton/LinkButton.tsx
@@ -21,14 +21,14 @@ import React from 'react';
import { Link, LinkProps } from '../Link';
/**
- * Properties for {@link Button}
+ * Properties for {@link LinkButton}
*
* @public
* @remarks
*
* See {@link https://v4.mui.com/api/button/#props | Material-UI Button Props} for all properties
*/
-export type ButtonProps = MaterialButtonProps &
+export type LinkButtonProps = MaterialButtonProps &
Omit;
/**
@@ -43,9 +43,19 @@ const LinkWrapper = React.forwardRef((props, ref) => (
*
* @public
* @remarks
- *
- * Makes the Button to utilize react-router
*/
-export const Button = React.forwardRef((props, ref) => (
+export const LinkButton = React.forwardRef((props, ref) => (
)) as (props: ButtonProps) => JSX.Element;
+
+/**
+ * @public
+ * @deprecated use LinkButton instead
+ */
+export const Button = LinkButton;
+
+/**
+ * @public
+ * @deprecated use LinkButtonProps instead
+ */
+export type ButtonProps = LinkButtonProps;
diff --git a/packages/core-components/src/components/Button/index.ts b/packages/core-components/src/components/LinkButton/index.ts
similarity index 76%
rename from packages/core-components/src/components/Button/index.ts
rename to packages/core-components/src/components/LinkButton/index.ts
index b3dc40e6e7..848203c2dc 100644
--- a/packages/core-components/src/components/Button/index.ts
+++ b/packages/core-components/src/components/LinkButton/index.ts
@@ -13,5 +13,8 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-export { Button } from './Button';
-export type { ButtonProps } from './Button';
+export { LinkButton } from './LinkButton';
+export type { LinkButtonProps } from './LinkButton';
+
+export { Button } from './LinkButton';
+export type { ButtonProps } from './LinkButton';
diff --git a/packages/core-components/src/components/index.ts b/packages/core-components/src/components/index.ts
index 473fab8444..0057847754 100644
--- a/packages/core-components/src/components/index.ts
+++ b/packages/core-components/src/components/index.ts
@@ -16,7 +16,7 @@
export * from './AlertDisplay';
export * from './Avatar';
-export * from './Button';
+export * from './LinkButton';
export * from './CodeSnippet';
export * from './CopyTextButton';
export * from './CreateButton';
@@ -30,6 +30,7 @@ export * from './HeaderIconLinkRow';
export * from './HorizontalScrollGrid';
export * from './Lifecycle';
export * from './Link';
+export * from './LinkButton';
export * from './LogViewer';
export * from './MarkdownContent';
export * from './OAuthRequestDialog';
diff --git a/packages/core-components/src/layout/ErrorBoundary/ErrorBoundary.tsx b/packages/core-components/src/layout/ErrorBoundary/ErrorBoundary.tsx
index da430d2f88..9157b57fe2 100644
--- a/packages/core-components/src/layout/ErrorBoundary/ErrorBoundary.tsx
+++ b/packages/core-components/src/layout/ErrorBoundary/ErrorBoundary.tsx
@@ -16,7 +16,7 @@
import Typography from '@material-ui/core/Typography';
import React, { ComponentClass, Component, ErrorInfo } from 'react';
-import { Button } from '../../components/Button';
+import { Button } from '../../components/LinkButton';
import { ErrorPanel } from '../../components/ErrorPanel';
type SlackChannel = {