From 7943f838581b79e21422ad77cdf5d39297f1c7b9 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Wed, 7 Dec 2022 12:13:35 +0100
Subject: [PATCH] Change formatting buttons behavior (#9715)

Change formatting buttons behaviour
---
 .../components/_FormattingButtons.pcss           |  2 ++
 .../components/FormattingButtons.tsx             |  5 ++++-
 .../components/FormattingButtons-test.tsx        | 16 ++++++++++++++++
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss b/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss
index 76026ff938..342a40c606 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss
@@ -53,7 +53,9 @@ limitations under the License.
             height: var(--size);
             border-radius: 5px;
         }
+    }
 
+    .mx_FormattingButtons_Button_hover {
         &:hover {
             &::after {
                 background: rgba($secondary-content, 0.1);
diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
index 32b132cc6c..c9408c8f0f 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
@@ -48,7 +48,10 @@ function Button({ label, keyCombo, onClick, isActive, className }: ButtonProps)
         onClick={onClick}
         title={label}
         className={
-            classNames('mx_FormattingButtons_Button', className, { 'mx_FormattingButtons_active': isActive })}
+            classNames('mx_FormattingButtons_Button', className, {
+                'mx_FormattingButtons_active': isActive,
+                'mx_FormattingButtons_Button_hover': !isActive,
+            })}
         tooltip={keyCombo && <Tooltip label={label} keyCombo={keyCombo} />}
         alignment={Alignment.Top}
     />;
diff --git a/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
index 2447e2f076..f97b2c614f 100644
--- a/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
@@ -75,4 +75,20 @@ describe('FormattingButtons', () => {
         // Then
         expect(await screen.findByText('Bold')).toBeTruthy();
     });
+
+    it('Should not have hover style when active', async () => {
+        // When
+        const user = userEvent.setup();
+        render(<FormattingButtons composer={wysiwyg} actionStates={actionStates} />);
+        await user.hover(screen.getByLabelText('Bold'));
+
+        // Then
+        expect(screen.getByLabelText('Bold')).not.toHaveClass('mx_FormattingButtons_Button_hover');
+
+        // When
+        await user.hover(screen.getByLabelText('Underline'));
+
+        // Then
+        expect(screen.getByLabelText('Underline')).toHaveClass('mx_FormattingButtons_Button_hover');
+    });
 });