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(' + {linkButtonLabel} {testString}

} />
@@ -37,7 +37,7 @@ describe('