From 0b908d35fd958242e02cbfb21cecb24d56aec23e Mon Sep 17 00:00:00 2001 From: Kurt King Date: Wed, 18 Jan 2023 09:45:40 -0700 Subject: [PATCH] rename Button to LinkButton Signed-off-by: Kurt King --- .../src/components/Button/Button.stories.tsx | 170 ------------------ .../src/components/Button/Button.test.tsx | 44 ----- .../src/components/Button/Button.tsx | 51 ------ .../src/components/Button/index.ts | 17 -- .../src/components/LinkButton/LinkButton.tsx | 20 ++- .../src/components/LinkButton/index.ts | 3 + .../core-components/src/components/index.ts | 2 +- .../layout/ErrorBoundary/ErrorBoundary.tsx | 2 +- 8 files changed, 18 insertions(+), 291 deletions(-) delete mode 100644 packages/core-components/src/components/Button/Button.stories.tsx delete mode 100644 packages/core-components/src/components/Button/Button.test.tsx delete mode 100644 packages/core-components/src/components/Button/Button.tsx delete mode 100644 packages/core-components/src/components/Button/index.ts diff --git a/packages/core-components/src/components/Button/Button.stories.tsx b/packages/core-components/src/components/Button/Button.stories.tsx deleted file mode 100644 index ca95316ee8..0000000000 --- a/packages/core-components/src/components/Button/Button.stories.tsx +++ /dev/null @@ -1,170 +0,0 @@ -/* - * Copyright 2020 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. - */ -import React, { ComponentType } from 'react'; -import { Button } from './Button'; -import { useLocation } from 'react-router-dom'; -import { createRouteRef, useRouteRef } from '@backstage/core-plugin-api'; -import Divider from '@material-ui/core/Divider'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemText from '@material-ui/core/ListItemText'; -import Typography from '@material-ui/core/Typography'; -import MaterialButton from '@material-ui/core/Button'; -import { wrapInTestApp } from '@backstage/test-utils'; -import { Link } from '../Link'; - -const routeRef = createRouteRef({ - id: 'storybook.test-route', -}); - -const Location = () => { - const location = useLocation(); - return 
Current location: {location.pathname}
; -}; - -export default { - title: 'Inputs/Button', - component: Button, - decorators: [ - (Story: ComponentType<{}>) => - wrapInTestApp( - <> - - A collection of buttons that should be used in the Backstage - interface. These leverage the properties inherited from{' '} - - Material-UI Button - - , but include an opinionated set that align to the Backstage design. - - - - -
-
- -
- -
- , - { mountedRoutes: { '/hello': routeRef } }, - ), - ], -}; - -export const Default = () => { - const link = useRouteRef(routeRef); - // Design Permutations: - // color = default | primary | secondary - // variant = contained | outlined | text - return ( - - - - Default Button: - This is the default button design which should be used in most cases. -
- 
color="primary" variant="contained"
- - - - - - - Secondary Button: - Used for actions that cancel, skip, and in general perform negative - functions, etc. -
- 
color="secondary" variant="contained"
- - - - - - - Tertiary Button: - Used commonly in a ButtonGroup and when the button function itself is - not a primary function on a page. -
- 
color="default" variant="outlined"
- - - - - - ); -}; - -export const ButtonLinks = () => { - const link = useRouteRef(routeRef); - - const handleClick = () => { - return 'Your click worked!'; - }; - - return ( - <> - - { - // 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. - - - - - View URL - -   links to a defined URL using Material-UI's Button. - - - - - Trigger Event - -   triggers an onClick event using Material-UI's Button. - - - - ); -}; diff --git a/packages/core-components/src/components/Button/Button.test.tsx b/packages/core-components/src/components/Button/Button.test.tsx deleted file mode 100644 index c5942e3d78..0000000000 --- a/packages/core-components/src/components/Button/Button.test.tsx +++ /dev/null @@ -1,44 +0,0 @@ -/* - * Copyright 2020 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. - */ - -import React from 'react'; -import { render, fireEvent, act } from '@testing-library/react'; -import { wrapInTestApp } from '@backstage/test-utils'; -import { Button } from './Button'; -import { Route, Routes } from 'react-router-dom'; - -describe(' - - {testString}

} /> - - , - ), - ); - - expect(() => getByText(testString)).toThrow(); - await act(async () => { - fireEvent.click(getByText(buttonLabel)); - }); - expect(getByText(testString)).toBeInTheDocument(); - }); -}); diff --git a/packages/core-components/src/components/Button/Button.tsx b/packages/core-components/src/components/Button/Button.tsx deleted file mode 100644 index 771d94adb5..0000000000 --- a/packages/core-components/src/components/Button/Button.tsx +++ /dev/null @@ -1,51 +0,0 @@ -/* - * Copyright 2020 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. - */ - -import MaterialButton, { - ButtonProps as MaterialButtonProps, -} from '@material-ui/core/Button'; -import React from 'react'; -import { Link, LinkProps } from '../Link'; - -/** - * Properties for {@link Button} - * - * @public - * @remarks - * @deprecated use `LinkButtonProps` instead - * - * See {@link https://v4.mui.com/api/button/#props | Material-UI Button Props} for all properties - */ -export type ButtonProps = MaterialButtonProps & - Omit; - -/** - * This wrapper is here to reset the color of the Link and make typescript happy. - */ -const LinkWrapper = React.forwardRef((props, ref) => ( - -)); - -/** - * Thin wrapper on top of material-ui's {@link https://v4.mui.com/components/buttons/ | Button} component - * - * @public - * @remarks - * @deprecated use `LinkButton` instead - */ -export const Button = React.forwardRef((props, ref) => ( - -)) as (props: ButtonProps) => JSX.Element; diff --git a/packages/core-components/src/components/Button/index.ts b/packages/core-components/src/components/Button/index.ts deleted file mode 100644 index b3dc40e6e7..0000000000 --- a/packages/core-components/src/components/Button/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/* - * Copyright 2020 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 { Button } from './Button'; -export type { ButtonProps } from './Button'; diff --git a/packages/core-components/src/components/LinkButton/LinkButton.tsx b/packages/core-components/src/components/LinkButton/LinkButton.tsx index 60c218ba5f..bef4c96497 100644 --- a/packages/core-components/src/components/LinkButton/LinkButton.tsx +++ b/packages/core-components/src/components/LinkButton/LinkButton.tsx @@ -43,11 +43,17 @@ const LinkWrapper = React.forwardRef((props, ref) => ( * * @public * @remarks - * - * Makes the Button to utilize react-router */ -export const LinkButton = React.forwardRef( - (props, ref) => ( - - ), -) as (props: LinkButtonProps) => JSX.Element; +export const LinkButton = React.forwardRef((props, ref) => ( + +)) as (props: ButtonProps) => JSX.Element; + +/** + * @deprecated use LinkButton instead + */ +export const Button = LinkButton; + +/** + * @deprecated use LinkButtonProps instead + */ +export type ButtonProps = LinkButtonProps; diff --git a/packages/core-components/src/components/LinkButton/index.ts b/packages/core-components/src/components/LinkButton/index.ts index 8ca699ecdd..848203c2dc 100644 --- a/packages/core-components/src/components/LinkButton/index.ts +++ b/packages/core-components/src/components/LinkButton/index.ts @@ -15,3 +15,6 @@ */ 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 218df9043d..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'; 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 = {