Skip to content

Show whether the preview is open on the Preview button - #301

Merged
PhilReinking merged 2 commits into
mainfrom
feat/bits-391-preview-button-state
Oct 22, 2026
Merged

PhilReinking merged 2 commits into
mainfrom
feat/bits-391-preview-button-state

Conversation

@PhilReinking

Copy link
Copy Markdown
Contributor

The Preview button in the editor top bar looked almost the same open and closed. While the preview is open it now has a white fill with dark text and icon, like a pressed toggle. Closed stays dark with a thin border. aria-pressed stays, and hover and focus rings show in both states.

Fixes BITS-391.

Tested: Vitest, lint, vue-tsc and build are green; the new test fails on main. Checked at 1440 in a browser: open, closed, hover and focus.

Known gap: from 1024 to 1279 px the preview opens over the button, so Esc closes it (not in this ticket).

🤖 Generated with Claude Code

PhilReinking and others added 2 commits October 22, 2026 16:22
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

@PhilReinking PhilReinking left a comment

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK at 4f6564f (CI: the PM checks it). Contrast: dark text and icon (slate-900) on white is 17.9:1, on the grey-100 hover 16.3:1. The icon uses fill-current, so it turns dark too. The blue-500 focus ring is 3.7:1 against the white fill and 4.0:1 against the bar, both above 3:1. The closed state's classes are the same as before. Phones are unchanged (hidden … lg:flex).

@PhilReinking
PhilReinking merged commit 2b9baec into main Oct 22, 2026
6 checks passed
@PhilReinking
PhilReinking deleted the feat/bits-391-preview-button-state branch October 22, 2026 14:45
@PhilReinking PhilReinking mentioned this pull request Oct 22, 2026
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.

1 participant