feat: make checkbox column in member view sticky
This commit is contained in:
parent
f3043df58b
commit
93e1ec7414
7 changed files with 234 additions and 35 deletions
|
|
@ -90,6 +90,25 @@ defmodule MvWeb.MemberLive.IndexTest do
|
|||
refute html =~ ~s(id="members-keyboard" class="overflow-x-auto")
|
||||
refute html =~ ~s(id="members-keyboard" class="overflow-auto")
|
||||
end
|
||||
|
||||
test "members table keeps checkbox column sticky while horizontally scrolling", %{conn: conn} do
|
||||
system_actor = SystemActor.get_system_actor()
|
||||
|
||||
{:ok, _member} =
|
||||
Membership.create_member(
|
||||
%{first_name: "Sticky", last_name: "Column", email: "sticky-column@example.com"},
|
||||
actor: system_actor
|
||||
)
|
||||
|
||||
conn = conn_with_oidc_user(conn)
|
||||
{:ok, _view, html} = live(conn, ~p"/members")
|
||||
|
||||
# Contract: first column (select-all header + row checkbox cells) is sticky on the left
|
||||
assert html =~ "left-0"
|
||||
assert html =~ "sticky"
|
||||
assert html =~ "z-30"
|
||||
assert html =~ "z-20"
|
||||
end
|
||||
end
|
||||
|
||||
describe "translations" do
|
||||
|
|
@ -351,10 +370,12 @@ defmodule MvWeb.MemberLive.IndexTest do
|
|||
assert_redirect(view, ~p"/members/#{member}")
|
||||
end
|
||||
|
||||
describe "table row outline (hover and selected)" do
|
||||
describe "table row highlight (hover and selected)" do
|
||||
@describetag :ui
|
||||
|
||||
test "clickable rows have hover and focus-within ring classes", %{conn: conn} do
|
||||
test "clickable rows with sticky first column use hover/focus background highlight", %{
|
||||
conn: conn
|
||||
} do
|
||||
system_actor = SystemActor.get_system_actor()
|
||||
|
||||
{:ok, _member} =
|
||||
|
|
@ -366,10 +387,9 @@ defmodule MvWeb.MemberLive.IndexTest do
|
|||
conn = conn_with_oidc_user(conn)
|
||||
{:ok, _view, html} = live(conn, "/members")
|
||||
|
||||
# CoreComponents table adds hover and focus-within ring when row_click is set
|
||||
assert html =~ "hover:ring-2"
|
||||
assert html =~ "focus-within:ring-2"
|
||||
assert html =~ "hover:ring-base-content/10"
|
||||
# Sticky-first-column tables: hover/focus fills live in CSS; wrapper is marked for tests.
|
||||
assert html =~ ~s(data-sticky-first-col-rows="true")
|
||||
refute html =~ "hover:ring-2"
|
||||
end
|
||||
|
||||
test "selected outline only from checkbox selection, not from highlight param", %{conn: conn} do
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue