From bf91c9f896dd8de3eae3e23a6326a32d48be4560 Mon Sep 17 00:00:00 2001 From: Kurt King Date: Tue, 20 Dec 2022 20:06:35 -0600 Subject: [PATCH 01/10] refactor: add LinkButton in favor of Button Signed-off-by: Kurt King --- .../src/components/Button/Button.tsx | 4 +- .../LinkButton/LinkButton.stories.tsx | 170 ++++++++++++++++++ .../components/LinkButton/LinkButton.test.tsx | 44 +++++ .../src/components/LinkButton/LinkButton.tsx | 53 ++++++ .../src/components/LinkButton/index.ts | 17 ++ .../core-components/src/components/index.ts | 1 + 6 files changed, 287 insertions(+), 2 deletions(-) create mode 100644 packages/core-components/src/components/LinkButton/LinkButton.stories.tsx create mode 100644 packages/core-components/src/components/LinkButton/LinkButton.test.tsx create mode 100644 packages/core-components/src/components/LinkButton/LinkButton.tsx create mode 100644 packages/core-components/src/components/LinkButton/index.ts diff --git a/packages/core-components/src/components/Button/Button.tsx b/packages/core-components/src/components/Button/Button.tsx index 575f42b03c..771d94adb5 100644 --- a/packages/core-components/src/components/Button/Button.tsx +++ b/packages/core-components/src/components/Button/Button.tsx @@ -25,6 +25,7 @@ import { Link, LinkProps } from '../Link'; * * @public * @remarks + * @deprecated use `LinkButtonProps` instead * * See {@link https://v4.mui.com/api/button/#props | Material-UI Button Props} for all properties */ @@ -43,8 +44,7 @@ const LinkWrapper = React.forwardRef((props, ref) => ( * * @public * @remarks - * - * Makes the Button to utilize react-router + * @deprecated use `LinkButton` instead */ export const Button = React.forwardRef((props, ref) => ( diff --git a/packages/core-components/src/components/LinkButton/LinkButton.stories.tsx b/packages/core-components/src/components/LinkButton/LinkButton.stories.tsx new file mode 100644 index 0000000000..3dc49abb7f --- /dev/null +++ b/packages/core-components/src/components/LinkButton/LinkButton.stories.tsx @@ -0,0 +1,170 @@ +/* + * 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 { LinkButton } from './LinkButton'; +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: LinkButton, + 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"
+ + + + Register Component + + + + + Secondary Button: + Used for actions that cancel, skip, and in general perform negative + functions, etc. +
+ 
color="secondary" variant="contained"
+ + + + Cancel + + + + + 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"
+ + + + View Details + + + + ); +}; + +export const ButtonLinks = () => { + const link = useRouteRef(routeRef); + + const handleClick = () => { + return 'Your click worked!'; + }; + + return ( + <> + + { + // TODO: Refactor to use new routing mechanisms + } + + + Route Ref + +   has props for both Material-UI's component as well as for + react-router-dom's Route object. + + + + + Static Path + +   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/LinkButton/LinkButton.test.tsx b/packages/core-components/src/components/LinkButton/LinkButton.test.tsx new file mode 100644 index 0000000000..7dbc42f9cb --- /dev/null +++ b/packages/core-components/src/components/LinkButton/LinkButton.test.tsx @@ -0,0 +1,44 @@ +/* + * 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 { LinkButton } from './LinkButton'; +import { Route, Routes } from 'react-router-dom'; + +describe('', () => { + it('navigates using react-router', async () => { + const testString = 'This is test string'; + const linkButtonLabel = 'Navigate!'; + const { getByText } = render( + wrapInTestApp( + <> + {linkButtonLabel} + + {testString}

} /> + + , + ), + ); + + expect(() => getByText(testString)).toThrow(); + await act(async () => { + fireEvent.click(getByText(linkButtonLabel)); + }); + expect(getByText(testString)).toBeInTheDocument(); + }); +}); diff --git a/packages/core-components/src/components/LinkButton/LinkButton.tsx b/packages/core-components/src/components/LinkButton/LinkButton.tsx new file mode 100644 index 0000000000..60c218ba5f --- /dev/null +++ b/packages/core-components/src/components/LinkButton/LinkButton.tsx @@ -0,0 +1,53 @@ +/* + * 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 LinkButton} + * + * @public + * @remarks + * + * See {@link https://v4.mui.com/api/button/#props | Material-UI Button Props} for all properties + */ +export type LinkButtonProps = 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 + * + * Makes the Button to utilize react-router + */ +export const LinkButton = React.forwardRef( + (props, ref) => ( + + ), +) as (props: LinkButtonProps) => JSX.Element; diff --git a/packages/core-components/src/components/LinkButton/index.ts b/packages/core-components/src/components/LinkButton/index.ts new file mode 100644 index 0000000000..8ca699ecdd --- /dev/null +++ b/packages/core-components/src/components/LinkButton/index.ts @@ -0,0 +1,17 @@ +/* + * 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 { LinkButton } from './LinkButton'; +export type { LinkButtonProps } from './LinkButton'; diff --git a/packages/core-components/src/components/index.ts b/packages/core-components/src/components/index.ts index 473fab8444..218df9043d 100644 --- a/packages/core-components/src/components/index.ts +++ b/packages/core-components/src/components/index.ts @@ -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'; From 910015f5b75e8aced02452e694032dce7bb7b13c Mon Sep 17 00:00:00 2001 From: Kurt King Date: Tue, 20 Dec 2022 20:23:23 -0600 Subject: [PATCH 02/10] docs: add changeset Signed-off-by: Kurt King --- .changeset/popular-dancers-join.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/popular-dancers-join.md 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 From 247bb8af2ab77bc990a53dfe80c0a8d546cad17d Mon Sep 17 00:00:00 2001 From: Kurt King Date: Tue, 20 Dec 2022 20:36:06 -0600 Subject: [PATCH 03/10] update api-report Signed-off-by: Kurt King --- packages/core-components/api-report.md | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index c46b3637cb..6dff7e35e0 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -129,10 +129,10 @@ export type BreadcrumbsStyledBoxClassKey = 'root'; // @public export function BrokenImageIcon(props: IconComponentProps): JSX.Element; -// @public +// @public @deprecated export const Button: (props: ButtonProps) => JSX.Element; -// @public +// @public @deprecated export type ButtonProps = ButtonProps_2 & Omit; // @public (undocumented) @@ -629,6 +629,13 @@ export function LinearGauge(props: Props_11): JSX.Element | null; // @public export const Link: (props: LinkProps) => JSX.Element; +// @public +export const LinkButton: (props: LinkButtonProps) => JSX.Element; + +// @public +export type LinkButtonProps = ButtonProps_2 & + Omit; + // Warning: (ae-missing-release-tag) "LinkProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) From cc0333d73cba7e3c2b97eed9d78fc23722ac7fb9 Mon Sep 17 00:00:00 2001 From: Kurt King Date: Tue, 20 Dec 2022 20:52:03 -0600 Subject: [PATCH 04/10] chore: update to 2022 Signed-off-by: Kurt King --- packages/core-components/src/components/Link/Link.stories.tsx | 2 +- packages/core-components/src/components/Link/Link.test.tsx | 2 +- packages/core-components/src/components/Link/Link.tsx | 2 +- packages/core-components/src/components/Link/index.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/core-components/src/components/Link/Link.stories.tsx b/packages/core-components/src/components/Link/Link.stories.tsx index 6049ec68b1..17e331b0b5 100644 --- a/packages/core-components/src/components/Link/Link.stories.tsx +++ b/packages/core-components/src/components/Link/Link.stories.tsx @@ -1,5 +1,5 @@ /* - * Copyright 2020 The Backstage Authors + * Copyright 2022 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. diff --git a/packages/core-components/src/components/Link/Link.test.tsx b/packages/core-components/src/components/Link/Link.test.tsx index 3538b79052..6365c00faf 100644 --- a/packages/core-components/src/components/Link/Link.test.tsx +++ b/packages/core-components/src/components/Link/Link.test.tsx @@ -1,5 +1,5 @@ /* - * Copyright 2020 The Backstage Authors + * Copyright 2022 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. diff --git a/packages/core-components/src/components/Link/Link.tsx b/packages/core-components/src/components/Link/Link.tsx index 440fcb811f..29214fb69b 100644 --- a/packages/core-components/src/components/Link/Link.tsx +++ b/packages/core-components/src/components/Link/Link.tsx @@ -1,5 +1,5 @@ /* - * Copyright 2020 The Backstage Authors + * Copyright 2022 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. diff --git a/packages/core-components/src/components/Link/index.ts b/packages/core-components/src/components/Link/index.ts index 2160508451..d5bca4728f 100644 --- a/packages/core-components/src/components/Link/index.ts +++ b/packages/core-components/src/components/Link/index.ts @@ -1,5 +1,5 @@ /* - * Copyright 2020 The Backstage Authors + * Copyright 2022 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. From 7323f98403a941849ce0b4fc65077a6586a6e50f Mon Sep 17 00:00:00 2001 From: Kurt King Date: Wed, 18 Jan 2023 09:25:37 -0700 Subject: [PATCH 05/10] change 2022 to 2020 Signed-off-by: Kurt King --- packages/core-components/src/components/Link/Link.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core-components/src/components/Link/Link.stories.tsx b/packages/core-components/src/components/Link/Link.stories.tsx index 17e331b0b5..6049ec68b1 100644 --- a/packages/core-components/src/components/Link/Link.stories.tsx +++ b/packages/core-components/src/components/Link/Link.stories.tsx @@ -1,5 +1,5 @@ /* - * Copyright 2022 The Backstage Authors + * 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. From 0b908d35fd958242e02cbfb21cecb24d56aec23e Mon Sep 17 00:00:00 2001 From: Kurt King Date: Wed, 18 Jan 2023 09:45:40 -0700 Subject: [PATCH 06/10] 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 = { From 7e0f40a60ddaa1cc483586df4fdbe6089c48537c Mon Sep 17 00:00:00 2001 From: Kurt King Date: Wed, 18 Jan 2023 09:48:02 -0700 Subject: [PATCH 07/10] change 2022 to 2020 Signed-off-by: Kurt King --- packages/core-components/src/components/Link/Link.test.tsx | 2 +- packages/core-components/src/components/Link/Link.tsx | 2 +- packages/core-components/src/components/Link/index.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/core-components/src/components/Link/Link.test.tsx b/packages/core-components/src/components/Link/Link.test.tsx index 6365c00faf..3538b79052 100644 --- a/packages/core-components/src/components/Link/Link.test.tsx +++ b/packages/core-components/src/components/Link/Link.test.tsx @@ -1,5 +1,5 @@ /* - * Copyright 2022 The Backstage Authors + * 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. diff --git a/packages/core-components/src/components/Link/Link.tsx b/packages/core-components/src/components/Link/Link.tsx index 29214fb69b..440fcb811f 100644 --- a/packages/core-components/src/components/Link/Link.tsx +++ b/packages/core-components/src/components/Link/Link.tsx @@ -1,5 +1,5 @@ /* - * Copyright 2022 The Backstage Authors + * 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. diff --git a/packages/core-components/src/components/Link/index.ts b/packages/core-components/src/components/Link/index.ts index d5bca4728f..2160508451 100644 --- a/packages/core-components/src/components/Link/index.ts +++ b/packages/core-components/src/components/Link/index.ts @@ -1,5 +1,5 @@ /* - * Copyright 2022 The Backstage Authors + * 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. From cd5a2ad7c765a1d8a12c6f5680d794974c9696db Mon Sep 17 00:00:00 2001 From: Kurt King Date: Wed, 18 Jan 2023 10:35:24 -0700 Subject: [PATCH 08/10] create new api-report Signed-off-by: Kurt King --- packages/core-components/api-report.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index b92b3145b5..fb5442216d 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -129,11 +129,15 @@ export type BreadcrumbsStyledBoxClassKey = 'root'; // @public export function BrokenImageIcon(props: IconComponentProps): JSX.Element; -// @public @deprecated +// Warning: (ae-missing-release-tag) "Button" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public @deprecated (undocumented) export const Button: (props: ButtonProps) => JSX.Element; -// @public @deprecated -export type ButtonProps = ButtonProps_2 & Omit; +// Warning: (ae-missing-release-tag) "ButtonProps" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public @deprecated (undocumented) +export type ButtonProps = LinkButtonProps; // @public (undocumented) export type CardActionsTopRightClassKey = 'root'; @@ -630,7 +634,7 @@ export function LinearGauge(props: Props_11): JSX.Element | null; export const Link: (props: LinkProps) => JSX.Element; // @public -export const LinkButton: (props: LinkButtonProps) => JSX.Element; +export const LinkButton: (props: ButtonProps) => JSX.Element; // @public export type LinkButtonProps = ButtonProps_2 & From 838bd8cf5d16956e11a7f34e32bbe3f11ffa9f5c Mon Sep 17 00:00:00 2001 From: Kurt King Date: Mon, 30 Jan 2023 19:15:49 -0700 Subject: [PATCH 09/10] add public remark Signed-off-by: Kurt King --- .../core-components/src/components/LinkButton/LinkButton.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/core-components/src/components/LinkButton/LinkButton.tsx b/packages/core-components/src/components/LinkButton/LinkButton.tsx index bef4c96497..a6ba4d67a7 100644 --- a/packages/core-components/src/components/LinkButton/LinkButton.tsx +++ b/packages/core-components/src/components/LinkButton/LinkButton.tsx @@ -49,11 +49,13 @@ 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; From b061c006a41c1d9b57749eeb26a0b0a226b3eeeb Mon Sep 17 00:00:00 2001 From: Kurt King Date: Mon, 30 Jan 2023 19:30:09 -0700 Subject: [PATCH 10/10] create new api-report Signed-off-by: Kurt King --- packages/core-components/api-report.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index fb5442216d..363de692cb 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -129,13 +129,9 @@ export type BreadcrumbsStyledBoxClassKey = 'root'; // @public export function BrokenImageIcon(props: IconComponentProps): JSX.Element; -// Warning: (ae-missing-release-tag) "Button" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// // @public @deprecated (undocumented) export const Button: (props: ButtonProps) => JSX.Element; -// Warning: (ae-missing-release-tag) "ButtonProps" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// // @public @deprecated (undocumented) export type ButtonProps = LinkButtonProps;