From b44443760737a54880a2e3c0289baf523010e3e1 Mon Sep 17 00:00:00 2001 From: Valentyna Date: Fri, 29 Sep 2023 16:33:31 +0200 Subject: [PATCH 1/5] fix: Icon in disabled Button shouldn't change color on hover --- .../src/components/Button/useButtonStyles.styles.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts b/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts index 4947173b3a1c9c..52b0a3e30ee17e 100644 --- a/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts +++ b/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts @@ -332,6 +332,9 @@ const useRootDisabledStyles = makeStyles({ [`& .${iconRegularClassName}`]: { display: 'inline', }, + [`&:disabled .${buttonClassNames.icon}`]: { + color: tokens.colorNeutralForegroundDisabled, + }, }, ':hover:active': { From d8f4763c2c876eca59938c341a1d80c455238430 Mon Sep 17 00:00:00 2001 From: Valentyna Date: Fri, 29 Sep 2023 16:36:02 +0200 Subject: [PATCH 2/5] change files --- ...-react-button-d89ce90d-cbf8-4b16-9a02-2d6606cea56e.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-button-d89ce90d-cbf8-4b16-9a02-2d6606cea56e.json diff --git a/change/@fluentui-react-button-d89ce90d-cbf8-4b16-9a02-2d6606cea56e.json b/change/@fluentui-react-button-d89ce90d-cbf8-4b16-9a02-2d6606cea56e.json new file mode 100644 index 00000000000000..372fe06a22e526 --- /dev/null +++ b/change/@fluentui-react-button-d89ce90d-cbf8-4b16-9a02-2d6606cea56e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Icon in disabled Button shouldn't change color on hover", + "packageName": "@fluentui/react-button", + "email": "vkozlova@microsoft.com", + "dependentChangeType": "patch" +} From 3b655082e938070b8cb7570ad5c0a229cf39e4bb Mon Sep 17 00:00:00 2001 From: Valentina Date: Tue, 3 Oct 2023 11:48:51 +0200 Subject: [PATCH 3/5] Update change/@fluentui-react-button-d89ce90d-cbf8-4b16-9a02-2d6606cea56e.json Co-authored-by: Makoto Morimoto --- ...entui-react-button-d89ce90d-cbf8-4b16-9a02-2d6606cea56e.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/change/@fluentui-react-button-d89ce90d-cbf8-4b16-9a02-2d6606cea56e.json b/change/@fluentui-react-button-d89ce90d-cbf8-4b16-9a02-2d6606cea56e.json index 372fe06a22e526..7d75d0be2b6799 100644 --- a/change/@fluentui-react-button-d89ce90d-cbf8-4b16-9a02-2d6606cea56e.json +++ b/change/@fluentui-react-button-d89ce90d-cbf8-4b16-9a02-2d6606cea56e.json @@ -1,6 +1,6 @@ { "type": "patch", - "comment": "fix: Icon in disabled Button shouldn't change color on hover", + "comment": "fix: Icon in disabled Button shouldn't change color on hover or pressed.", "packageName": "@fluentui/react-button", "email": "vkozlova@microsoft.com", "dependentChangeType": "patch" From e4b598c0c5c55a91f41defd561f420c462ba863c Mon Sep 17 00:00:00 2001 From: Valentina Date: Tue, 3 Oct 2023 11:55:23 +0200 Subject: [PATCH 4/5] Update packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts Co-authored-by: Makoto Morimoto --- .../src/components/Button/useButtonStyles.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts b/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts index 52b0a3e30ee17e..975c18ddb282b4 100644 --- a/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts +++ b/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts @@ -332,7 +332,7 @@ const useRootDisabledStyles = makeStyles({ [`& .${iconRegularClassName}`]: { display: 'inline', }, - [`&:disabled .${buttonClassNames.icon}`]: { + [`& .${buttonClassNames.icon}`]: { color: tokens.colorNeutralForegroundDisabled, }, }, From 05dcd8841d50fc01ef5fed33feaba18c992ee995 Mon Sep 17 00:00:00 2001 From: Valentyna Date: Tue, 3 Oct 2023 12:06:33 +0200 Subject: [PATCH 5/5] PR fix --- .../src/components/Button/useButtonStyles.styles.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts b/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts index 975c18ddb282b4..5ac01bbbe40991 100644 --- a/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts +++ b/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts @@ -318,6 +318,9 @@ const useRootDisabledStyles = makeStyles({ color: tokens.colorNeutralForegroundDisabled, cursor: 'not-allowed', + [`& .${buttonClassNames.icon}`]: { + color: tokens.colorNeutralForegroundDisabled, + }, ':hover': { backgroundColor: tokens.colorNeutralBackgroundDisabled, @@ -350,6 +353,9 @@ const useRootDisabledStyles = makeStyles({ [`& .${iconRegularClassName}`]: { display: 'inline', }, + [`& .${buttonClassNames.icon}`]: { + color: tokens.colorNeutralForegroundDisabled, + }, }, },