From e737e63cdc6a3108fe59dc6fcf7148353488a080 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Tue, 6 Dec 2022 17:21:55 +0100
Subject: [PATCH 1/2] Change formatting buttons behavior

---
 .../wysiwyg_composer/components/_FormattingButtons.pcss      | 2 ++
 .../rooms/wysiwyg_composer/components/FormattingButtons.tsx  | 5 ++++-
 2 files changed, 6 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 76026ff9381..342a40c6065 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 32b132cc6cd..c9408c8f0f3 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}
     />;

From 3af9c9d8a64b04b220930aff5af35d616faf5a63 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Wed, 7 Dec 2022 10:34:42 +0100
Subject: [PATCH 2/2] Add tests

---
 .../components/FormattingButtons-test.tsx        | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

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 2447e2f0760..f97b2c614f0 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');
+    });
 });