From a05a774c0673272cb1e7384b3b6c66c5f02b7140 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Wed, 6 Oct 2021 13:58:27 +0200 Subject: [PATCH 1/6] fix styling issue when using Button component with variant contained Signed-off-by: Emma Indal --- .../src/components/Button/Button.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/core-components/src/components/Button/Button.tsx b/packages/core-components/src/components/Button/Button.tsx index 0fbadc4dff..3e89421ef0 100644 --- a/packages/core-components/src/components/Button/Button.tsx +++ b/packages/core-components/src/components/Button/Button.tsx @@ -40,9 +40,20 @@ export type ButtonProps = MaterialButtonProps & */ declare function ButtonType(props: ButtonProps): JSX.Element; -const ActualButton = React.forwardRef((props, ref) => ( - -)) as { (props: ButtonProps): JSX.Element }; +const ActualButton = React.forwardRef((props, ref) => { + /** + This temporarily fixes a bug in material-ui where the color of the Link + overrides the color of the button + https://github.com/mui-org/material-ui/issues/28852 + */ + let color; + if (props.variant === 'contained') { + color = 'white'; + } + return ( + + ); +}) as { (props: ButtonProps): JSX.Element }; // TODO(Rugvip): We use this as a workaround to make the exported type be a // function, which makes our API reference docs much nicer. From 63d426bfeb7ce7eac3d78218cc669838531adf2b Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Wed, 6 Oct 2021 16:26:47 +0200 Subject: [PATCH 2/6] add changeset Signed-off-by: Emma Indal --- .changeset/seven-oranges-hunt.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/seven-oranges-hunt.md diff --git a/.changeset/seven-oranges-hunt.md b/.changeset/seven-oranges-hunt.md new file mode 100644 index 0000000000..865f3e4b32 --- /dev/null +++ b/.changeset/seven-oranges-hunt.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Adds a custom text color to the Button component if variant "contained" is used. From 52502de3fb9078d90caca881b0cceb8c8372fb6f Mon Sep 17 00:00:00 2001 From: blam Date: Thu, 7 Oct 2021 13:22:55 +0200 Subject: [PATCH 3/6] chore: fixing the inheritance of the color and the typography overrides Signed-off-by: blam --- .../src/components/Button/Button.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/core-components/src/components/Button/Button.tsx b/packages/core-components/src/components/Button/Button.tsx index 3e89421ef0..a44c5df148 100644 --- a/packages/core-components/src/components/Button/Button.tsx +++ b/packages/core-components/src/components/Button/Button.tsx @@ -40,19 +40,19 @@ export type ButtonProps = MaterialButtonProps & */ declare function ButtonType(props: ButtonProps): JSX.Element; +/** + * This wrapper is here to reset the color of the Link and make typescript happy. + */ +const LinkWrapper = (props: LinkProps) => ; + const ActualButton = React.forwardRef((props, ref) => { /** This temporarily fixes a bug in material-ui where the color of the Link overrides the color of the button https://github.com/mui-org/material-ui/issues/28852 */ - let color; - if (props.variant === 'contained') { - color = 'white'; - } - return ( - - ); + + return ; }) as { (props: ButtonProps): JSX.Element }; // TODO(Rugvip): We use this as a workaround to make the exported type be a From 1fde319733d9de04762a60ad978f47e7303da037 Mon Sep 17 00:00:00 2001 From: blam Date: Thu, 7 Oct 2021 13:27:18 +0200 Subject: [PATCH 4/6] chore: tidy up the js Signed-off-by: blam --- packages/core-components/src/components/Button/Button.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/core-components/src/components/Button/Button.tsx b/packages/core-components/src/components/Button/Button.tsx index a44c5df148..cc30aeeb47 100644 --- a/packages/core-components/src/components/Button/Button.tsx +++ b/packages/core-components/src/components/Button/Button.tsx @@ -45,15 +45,14 @@ declare function ButtonType(props: ButtonProps): JSX.Element; */ const LinkWrapper = (props: LinkProps) => ; -const ActualButton = React.forwardRef((props, ref) => { +const ActualButton = React.forwardRef((props, ref) => ( /** This temporarily fixes a bug in material-ui where the color of the Link overrides the color of the button https://github.com/mui-org/material-ui/issues/28852 */ - - return ; -}) as { (props: ButtonProps): JSX.Element }; + +)) as { (props: ButtonProps): JSX.Element }; // TODO(Rugvip): We use this as a workaround to make the exported type be a // function, which makes our API reference docs much nicer. From 27735ead12feeef0cfb0d2f5a3eb24c1efb03bef Mon Sep 17 00:00:00 2001 From: blam Date: Thu, 7 Oct 2021 13:28:36 +0200 Subject: [PATCH 5/6] chore: remove the comment about material bug Signed-off-by: blam --- packages/core-components/src/components/Button/Button.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/core-components/src/components/Button/Button.tsx b/packages/core-components/src/components/Button/Button.tsx index cc30aeeb47..f2fc9f93f9 100644 --- a/packages/core-components/src/components/Button/Button.tsx +++ b/packages/core-components/src/components/Button/Button.tsx @@ -46,11 +46,6 @@ declare function ButtonType(props: ButtonProps): JSX.Element; const LinkWrapper = (props: LinkProps) => ; const ActualButton = React.forwardRef((props, ref) => ( - /** - This temporarily fixes a bug in material-ui where the color of the Link - overrides the color of the button - https://github.com/mui-org/material-ui/issues/28852 - */ )) as { (props: ButtonProps): JSX.Element }; From c9076067206ac6361531e1c08c99d069e64ef28e Mon Sep 17 00:00:00 2001 From: blam Date: Thu, 7 Oct 2021 13:34:21 +0200 Subject: [PATCH 6/6] chore: change changeset text to reflect the Changes Signed-off-by: blam --- .changeset/seven-oranges-hunt.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/seven-oranges-hunt.md b/.changeset/seven-oranges-hunt.md index 865f3e4b32..ceea04ad72 100644 --- a/.changeset/seven-oranges-hunt.md +++ b/.changeset/seven-oranges-hunt.md @@ -2,4 +2,4 @@ '@backstage/core-components': patch --- -Adds a custom text color to the Button component if variant "contained" is used. +Wrap up the `Link` component in a component to reset the color so that we can actually see the button text