Repository navigation
Show plan type icon tooltips and drop the red tint - #328
alecthomas wants to merge 2 commits into
Conversation
In workspace rows, the title link's stretched ::after covered the type icon, so hovering it never showed the type name in its title tooltip. The icon is now its own link to the plan, which lifts it above the overlay like the row's other links. Clicking it still opens the plan. Tint 4 was a pinkish red (#e0637a). Types get their tint from a hash of their name, so "Research" landed on red by chance and read as an error. It is now an olive green. Co-authored-by: Albert <8b5bc7cae3946a84a2d793d1b962c7e0142083a01805919e342a8848161d9479@buzz.block.builderlab.xyz> Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
🤖 @codex review |
Codex Review Summary: ✅ CompletedThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
|
Codex Review: Didn't find any major issues. Another round soon, please! Reviewed commit: ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". |
Signed-off-by: Hampton Lintorn-Catlin <hampton@squareup.com>
|
🤖 Prepared for Hampton’s product review. Hampton requested local review, routine repairs, an isolated tryout, and light/dark evidence; this is engineering preparation, not product acceptance.
Local tryout on Hampton’s machine: http://localhost:3328/hampton/demo-content/rich-text. Sign in as |
What changed and why
Two problems with the document type icons in the workspace list:
plan_type_iconalready setstitleto the type name. But in_plan_row, the title link's::afterstretches over the whole card, and it sat on top of the icon. Hovering the icon hovered the overlay instead. The icon is now its own link to the same plan. That lifts it above the overlay, through the existing.plan-row a:not(.plan-row__title)rule. Clicking the icon still opens the plan. The link is out of the tab order, since the title link is already the keyboard target. Its accessible name includes the plan title and type.Zlib.crc32(name) % 6, and "Research" hashes to tint 4,#e0637a. A red icon reads as an error. Tint 4 is now olive green,#8a9c2a. I avoided orange becausedocs/DESIGN.mdreserves it for attention states.Other places that show the icon (header, feed, search) have no stretched link, so their tooltips already worked.
Evidence
The author could not run the app locally. Maintainer preparation now includes an isolated Ruby 3.4/MySQL preview, with light and dark screenshots below. Hover targeting, icon clicks, and Tab/Enter title navigation were exercised in both modes.
How to try it
hampton@example.com(no password), then open/hampton/demo-content/rich-text. The demo index remains at/hampton/demo-library.Maintainer local preview: http://localhost:3328/hampton/demo-content/rich-text (available on Hampton’s machine).
Testing
Added a request spec: the row's icon is a link to the plan, out of the tab order, with the type name as its title.
Added a system spec: the icon is the topmost element at its centre, and clicking it opens the plan.
The author could not run specs locally. Maintainer preparation passed all 164 examples in
spec/requests/plans_spec.rbandspec/system/folders_workspace_spec.rb, including the added keyboard regression, plus focused RuboCop. The full local suite also passed: 3,573 examples, zero failures.Added or updated real JavaScript-enabled browser specs in
spec/system/.Added request specs.
Ran
bundle exec rspec— 3,573 examples, zero failures on the isolated MySQL test database.Tested in light and dark mode — isolated Chrome for Testing, shared demo library.
Attached images — light and dark local previews below.
🤖 Generated with Claude Code
Product acceptance remains with Hampton.
Maintainer preparation generated with Codex.