Skip to content

fix(ui): remove transition-opacity from page icon hover reveal (#191)#196

Merged
zacharias-ona merged 2 commits into
mainfrom
fix/191-remove-transition-opacity
Apr 17, 2026
Merged

fix(ui): remove transition-opacity from page icon hover reveal (#191)#196
zacharias-ona merged 2 commits into
mainfrom
fix/191-remove-transition-opacity

Conversation

@zacharias-ona
Copy link
Copy Markdown
Collaborator

Closes #191

What

The "Add icon" hover-reveal button in page-icon.tsx used transition-opacity for its opacity change on hover. The design spec requires all hover states to be instant — no transitions, no decorative animations.

How

Removed the transition-opacity class from the hover-reveal wrapper div. This makes the opacity change from 0 to 100 instant on hover, matching the existing pattern in page-tree.tsx and the design spec.

Testing

Added a static analysis regression test (page-icon-design-spec.test.ts) that verifies any line with opacity-0 and group-hover does not contain transition-opacity or duration-* classes. This follows the same pattern used in design-spec-compliance.test.ts for the drag handle.

@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 17, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
memo Ready Ready Preview, Comment Apr 17, 2026 5:44pm

Request Review

The staging job runs `supabase db reset --linked` which drops the public
schema but not the storage schema. The INSERT INTO storage.buckets and
CREATE POLICY statements failed on re-runs because the objects already
existed. Added ON CONFLICT DO NOTHING for the bucket insert and wrapped
policies in DO blocks with duplicate_object exception handlers.

Co-authored-by: Ona <no-reply@ona.com>
@zacharias-ona zacharias-ona merged commit 5b88785 into main Apr 17, 2026
6 checks passed
@zacharias-ona zacharias-ona deleted the fix/191-remove-transition-opacity branch April 17, 2026 17:48
@zacharias-ona
Copy link
Copy Markdown
Collaborator Author

✅ UI verification passed — design spec compliance confirmed.

Static analysis: The removal of transition-opacity from the page icon hover reveal aligns with the design spec requirement that hover states have no transition (instant). All color tokens, typography, spacing, accessibility attributes, and corner radius usage in page-icon.tsx comply with .agents/design.md.

Visual verification (Playwright screenshots):

  • Desktop dark: "Add icon" button correctly hidden at rest, appears instantly on hover
  • Mobile: layout correct, sidebar collapsed, no horizontal scroll
  • Workspace page: renders correctly on both desktop and mobile viewports

@zacharias-ona
Copy link
Copy Markdown
Collaborator Author

✅ Post-merge verification passed.

E2E test suite: 46/47 passed. The 1 failure (search with no matches shows empty state) is a pre-existing issue tracked in #192, not related to this PR.

Ad-hoc smoke tests — routes tested:

  • / (landing page) — title present, status OK
  • /sign-in — email input present
  • /api/health — status OK
  • Authenticated flow — login, workspace load, page ready

Skipped:

  • /dashboard (route does not exist)
  • Editor navigation via sidebar (no page buttons with timestamps found in test workspace)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug: UI does not match design spec after PR #189

1 participant