From 08d9fbf9bc5846c4f60737abcd8d8bf1d134ad96 Mon Sep 17 00:00:00 2001
From: Masen Furer <m_github@0x26.net>
Date: Tue, 7 Jan 2025 10:35:36 -0800
Subject: [PATCH] unbreak link _hover (#4537)

* unbreak link _hover

* add a test to catch the error

* change tmp path for harness

* add () to fixture

* add spacer to avoid initial hover

* only install chromium browser for faster ci

---------

Co-authored-by: Lendemor <thomas.brandeho@gmail.com>
---
 .github/workflows/integration_app_harness.yml |  2 +-
 .../radix/themes/typography/link.py           |  2 +-
 .../tests_playwright/test_link_hover.py       | 46 +++++++++++++++++++
 3 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 tests/integration/tests_playwright/test_link_hover.py

diff --git a/.github/workflows/integration_app_harness.yml b/.github/workflows/integration_app_harness.yml
index e6ea79377..21b021ee5 100644
--- a/.github/workflows/integration_app_harness.yml
+++ b/.github/workflows/integration_app_harness.yml
@@ -53,7 +53,7 @@ jobs:
           SCREENSHOT_DIR: /tmp/screenshots/${{ matrix.state_manager }}/${{ matrix.python-version }}/${{ matrix.split_index }}
           REDIS_URL: ${{ matrix.state_manager == 'redis' && 'redis://localhost:6379' || '' }}
         run: |
-          poetry run playwright install --with-deps
+          poetry run playwright install chromium
           poetry run pytest tests/integration --splits 2 --group ${{matrix.split_index}}
       - uses: actions/upload-artifact@v4
         name: Upload failed test screenshots
diff --git a/reflex/components/radix/themes/typography/link.py b/reflex/components/radix/themes/typography/link.py
index 25a0902cc..c93102408 100644
--- a/reflex/components/radix/themes/typography/link.py
+++ b/reflex/components/radix/themes/typography/link.py
@@ -76,7 +76,7 @@ class Link(RadixThemesComponent, A, MemoizationLeaf, MarkdownComponentMap):
         Returns:
             Component: The link component
         """
-        props.setdefault(":hover", {"color": color("accent", 8)})
+        props.setdefault("_hover", {"color": color("accent", 8)})
         href = props.get("href")
 
         is_external = props.pop("is_external", None)
diff --git a/tests/integration/tests_playwright/test_link_hover.py b/tests/integration/tests_playwright/test_link_hover.py
new file mode 100644
index 000000000..9510bd358
--- /dev/null
+++ b/tests/integration/tests_playwright/test_link_hover.py
@@ -0,0 +1,46 @@
+from typing import Generator
+
+import pytest
+from playwright.sync_api import Page, expect
+
+from reflex.testing import AppHarness
+
+
+def LinkApp():
+    import reflex as rx
+
+    app = rx.App()
+
+    def index():
+        return rx.vstack(
+            rx.box(height="10em"),  # spacer, so the link isn't hovered initially
+            rx.link(
+                "Click me",
+                href="#",
+                color="blue",
+                _hover=rx.Style({"color": "red"}),
+            ),
+        )
+
+    app.add_page(index, "/")
+
+
+@pytest.fixture()
+def link_app(tmp_path_factory) -> Generator[AppHarness, None, None]:
+    with AppHarness.create(
+        root=tmp_path_factory.mktemp("link_app"),
+        app_source=LinkApp,  # type: ignore
+    ) as harness:
+        assert harness.app_instance is not None, "app is not running"
+        yield harness
+
+
+def test_link_hover(link_app: AppHarness, page: Page):
+    assert link_app.frontend_url is not None
+    page.goto(link_app.frontend_url)
+
+    link = page.get_by_role("link")
+    expect(link).to_have_text("Click me")
+    expect(link).to_have_css("color", "rgb(0, 0, 255)")
+    link.hover()
+    expect(link).to_have_css("color", "rgb(255, 0, 0)")