Merge pull request #15353 from kurtaking/link-button

refactor: add LinkButton, deprecate Button

.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

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<LinkProps, 'variant' | 'color'>;
+// @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<LinkProps, 'variant' | 'color'>;
+
 // 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)

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 = () => {
           <pre>color="primary" variant="contained"</pre>
         </ListItemText>
 
-        <Button to={link()} color="primary" variant="contained">
+        <LinkButton to={link()} color="primary" variant="contained">
           Register Component
-        </Button>
+        </LinkButton>
       </ListItem>
       <ListItem>
         <ListItemText>
@@ -93,9 +93,9 @@ export const Default = () => {
           <pre>color="secondary" variant="contained"</pre>
         </ListItemText>
 
-        <Button to={link()} color="secondary" variant="contained">
+        <LinkButton to={link()} color="secondary" variant="contained">
           Cancel
-        </Button>
+        </LinkButton>
       </ListItem>
       <ListItem>
         <ListItemText>
@@ -106,9 +106,9 @@ export const Default = () => {
           <pre>color="default" variant="outlined"</pre>
         </ListItemText>
 
-        <Button to={link()} color="default" variant="outlined">
+        <LinkButton to={link()} color="default" variant="outlined">
           View Details
-        </Button>
+        </LinkButton>
       </ListItem>
     </List>
   );
@@ -128,17 +128,17 @@ export const ButtonLinks = () => {
           // TODO: Refactor to use new routing mechanisms
         }
         <ListItem>
-          <Button to={link()} color="default" variant="outlined">
+          <LinkButton to={link()} color="default" variant="outlined">
             Route Ref
-          </Button>
+          </LinkButton>
           &nbsp; has props for both Material-UI's component as well as for
           react-router-dom's Route object.
         </ListItem>
 
         <ListItem>
-          <Button to="/staticpath" color="default" variant="outlined">
+          <LinkButton to="/staticpath" color="default" variant="outlined">
             Static Path
-          </Button>
+          </LinkButton>
           &nbsp; links to a statically defined route. In general, this should be
           avoided.
         </ListItem>

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('<Button />', () => {
+describe('<LinkButton />', () => {
   it('navigates using react-router', async () => {
     const testString = 'This is test string';
-    const buttonLabel = 'Navigate!';
+    const linkButtonLabel = 'Navigate!';
     const { getByText } = render(
       wrapInTestApp(
         <>
-          <Button to="/test">{buttonLabel}</Button>
+          <LinkButton to="/test">{linkButtonLabel}</LinkButton>
           <Routes>
             <Route path="/test" element={<p>{testString}</p>} />
           </Routes>
@@ -37,7 +37,7 @@ describe('<Button />', () => {
 
     expect(() => getByText(testString)).toThrow();
     await act(async () => {
-      fireEvent.click(getByText(buttonLabel));
+      fireEvent.click(getByText(linkButtonLabel));
     });
     expect(getByText(testString)).toBeInTheDocument();
   });

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<LinkProps, 'variant' | 'color'>;
 
 /**
@@ -43,9 +43,19 @@ const LinkWrapper = React.forwardRef<any, LinkProps>((props, ref) => (
  *
  * @public
  * @remarks
- *
- * Makes the Button to utilize react-router
  */
-export const Button = React.forwardRef<any, ButtonProps>((props, ref) => (
+export const LinkButton = React.forwardRef<any, ButtonProps>((props, ref) => (
   <MaterialButton ref={ref} component={LinkWrapper} {...props} />
 )) as (props: ButtonProps) => JSX.Element;
+
+/**
+ * @public
+ * @deprecated use LinkButton instead
+ */
+export const Button = LinkButton;
+
+/**
+ * @public
+ * @deprecated use LinkButtonProps instead
+ */
+export type ButtonProps = LinkButtonProps;

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

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

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 = {