Skip to content

FE-2016: Show when the file preview's match-case button is on - #10086

Merged
0xRezaa merged 3 commits into
mainfrom
reza/fe-2016-show-match-case-pressed-state
Oct 21, 2026
Merged

0xRezaa merged 3 commits into
mainfrom
reza/fe-2016-show-match-case-pressed-state

Conversation

@0xRezaa

@0xRezaa 0xRezaa commented Oct 19, 2026 •

Copy link
Copy Markdown
Contributor

🌟 Purpose

The file preview's match-case button looked almost the same on and off, because only its icon turned blue. While it is on, it now has a blue[20] background and a blue[30] border. Closes FE-2016 (internal).

Before, with match case on
Screenshot 2026-10-19 at 13 51 38

After, with match case on
Screenshot 2026-10-19 at 13 51 50

🔍 Changes

GrayToBlueIconButton styles itself from aria-pressed, which only the match-case button sets. Against white, the new background is 1.13:1 and the border 1.38:1, about the same as the new design system's pressed ghost/brand Button (1.09:1 and 1.32:1).

🧪 Testing

lint:tsc, ESLint and oxfmt --check pass. I checked the PDF preview in Chromium.

@0xRezaa 0xRezaa self-assigned this Oct 19, 2026
@vercel

vercel Bot commented Oct 19, 2026 •

Copy link
Copy Markdown

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

Project Deployment Actions Updated
hash Ready Ready Preview Oct 20, 2026 10:28am UTC
3 Skipped Deployments
Project Deployment Actions Updated
hashdotdesign-tokens Ignored Ignored Preview Oct 20, 2026 10:28am UTC
petrinaut Skipped Skipped Oct 20, 2026 10:28am UTC
petrinaut-docs Skipped Skipped Oct 20, 2026 10:28am UTC

Request Review

@github-actions github-actions Bot added area/apps > hash* Affects HASH (a `hash-*` app) type/eng > frontend Owned by the @frontend team area/apps labels Oct 19, 2026
@0xRezaa
0xRezaa force-pushed the reza/fe-2016-show-match-case-pressed-state branch from b8ff806 to f42182d Compare October 19, 2026 11:53
@vercel
vercel Bot temporarily deployed to Preview – petrinaut October 19, 2026 11:53 Inactive
@vercel
vercel Bot temporarily deployed to Preview – petrinaut-docs October 19, 2026 11:53 Inactive
@0xRezaa
0xRezaa requested review from a team and lunelson and removed request for lunelson October 19, 2026 11:53
@0xRezaa
0xRezaa marked this pull request as ready for review October 19, 2026 11:53
@cursor

cursor Bot commented Oct 19, 2026 •

Copy link
Copy Markdown

PR Summary

Low Risk
CSS-only change on a shared icon button, gated on aria-pressed, with no logic or API changes.

Overview
Adds a visible “on” state to GrayToBlueIconButton when aria-pressed="true": solid light-blue background (blue[20]), stronger border (blue[30]), and blue icon/text (blue[70]), with a slightly darker fill on hover.

The file preview match-case control already sets aria-pressed; other GrayToBlueIconButton usages do not, so only that toggle should look different when active.

Reviewed by Cursor Bugbot for commit 8a35b70. Bugbot is set up for automated code reviews on this repo. Configure here.

lunelson
lunelson previously approved these changes Oct 20, 2026

@lunelson lunelson left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Nice!

@0xRezaa
0xRezaa enabled auto-merge October 20, 2026 08:03
@0xRezaa
0xRezaa force-pushed the reza/fe-2016-show-match-case-pressed-state branch from f42182d to c8175ca Compare October 20, 2026 08:03
@vercel
vercel Bot temporarily deployed to Preview – petrinaut-docs October 20, 2026 08:03 Inactive
@vercel
vercel Bot temporarily deployed to Preview – petrinaut October 20, 2026 08:03 Inactive
@0xRezaa
0xRezaa force-pushed the reza/fe-2016-show-match-case-pressed-state branch from c8175ca to 087cf3b Compare October 20, 2026 10:12
@vercel
vercel Bot temporarily deployed to Preview – petrinaut October 20, 2026 10:12 Inactive
@vercel
vercel Bot temporarily deployed to Preview – petrinaut-docs October 20, 2026 10:12 Inactive
@vercel
vercel Bot temporarily deployed to Preview – petrinaut-docs October 20, 2026 10:17 Inactive
@vercel
vercel Bot temporarily deployed to Preview – petrinaut October 20, 2026 10:17 Inactive
@vercel
vercel Bot temporarily deployed to Preview – petrinaut-docs October 20, 2026 10:24 Inactive
@vercel
vercel Bot temporarily deployed to Preview – petrinaut October 20, 2026 10:24 Inactive

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Want fixes drafted automatically? Bugbot Autofix can create code changes for findings. A team admin can enable Autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 8a35b70. Configure here.

Comment thread apps/hash-frontend/src/pages/shared/gray-to-blue-icon-button.tsx
@0xRezaa
0xRezaa added this pull request to the merge queue Oct 21, 2026
Merged via the queue into main with commit 1c0d893 Oct 21, 2026
66 checks passed
@0xRezaa
0xRezaa deleted the reza/fe-2016-show-match-case-pressed-state branch October 21, 2026 08:40

This branch was successfully deployed

1 active and 2 inactive deployments
Preview – hash — 8a35b702 Deployed Oct 20, 2026 by vercel[bot]
Preview – petrinaut — 8a35b702 Deployed Oct 20, 2026 by vercel[bot]
Preview – petrinaut-docs — 8a35b702 Deployed Oct 20, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/apps > hash* Affects HASH (a `hash-*` app) area/apps type/eng > frontend Owned by the @frontend team

Development

Successfully merging this pull request may close these issues.

2 participants