improvement(ui): reuse shared button and focus treatments by BillLeoutsakosvl346 · Pull Request #8187 · simstudioai/sim

BillLeoutsakosvl346 · 2026-09-23T02:16:33Z

Summary

Reuse Button's round shape and quiet hover treatment in the chat scroll action and resource toggle; remove the redundant file tile height class.
Add an opt-in muted keyboard focus ring to EMCN Button and reuse the same ring across five existing controls. Ordinary Button focus styling remains unchanged.
Preserve the current rendered treatments. The 12 matched before/after fixture states are pixel identical; the resource toggle's inherited hover text color changes but its visible icon and dot use explicit colors.

Type of Change

Improvement

Testing

Repository lint, type check, 47 audits, docs manifest and block registry checks passed. Full Test and Build passed all six jobs at 22ed396, including both PostgreSQL paths.
Full workspace tests passed (19 packages; 55,197 app tests passed). The optional destructive database integration suite was skipped because no disposable local database was configured. EMCN tests passed (370), including the new Button test.
Full design scan: 830 → 824 findings, clearing the six reviewed declarations. The committed diff linter reports 15 intentional central-definition records for moving the existing focus ring and outline reset into EMCN; it reports no new usage violations.
Matched light/dark, 16px/20px, rest/hover/focus screenshots use source-derived isolated fixtures with synthetic labels.

Checklist

Code follows project style guidelines
Self-reviewed my changes
Tests added/updated and passing
No new usage warnings introduced
I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

vercel · 2026-09-23T02:16:40Z

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

Project	Deployment	Actions	Updated
docs	Ready	Preview	Sep 23, 2026 2:32am UTC

greptile-apps · 2026-09-23T02:18:54Z

Confidence Score: 5/5

The PR appears safe to merge because the latest focus-treatment consolidation preserves a visible keyboard ring and introduces no actionable regression.

Summary

This PR consolidates existing button geometry, hover, and muted keyboard-focus treatments into shared EMCN APIs while preserving current component behavior.

Adds an opt-in focusRing='muted' Button variant and shared mutedFocusRingClass.
Reuses shared styling across buttons, slider, switch, field disclosure, and sidebar controls.
Replaces duplicated round and quiet button styling and removes a redundant file-tile height override.

_{Reviews (2) · Last reviewed commit: "fix(emcn): include outline reset in mute..."}

cubic-dev-ai

All reported issues were addressed across 12 files

_{Reply with feedback, questions, or to request a fix.

Fix all with cubic | Re-trigger cubic}

BillLeoutsakosvl346 · 2026-09-23T02:20:01Z

Matched before/after visual review for 6c92816 against its PR base 7bf8fe3.

These are source-derived isolated fixtures using the actual EMCN Button and affected control components with synthetic labels and the same compiled product CSS. The full frames use a 960×1060 CSS viewport (1920×2120 image at 2× device scale); the closeups are captured at 2× device scale. The fixture does not exercise authenticated routes or file-download side effects.

All 12 full-frame pairs (light/dark × 16px/20px root text × rest/resource hover/table keyboard focus) are pixel identical. The file tile also covers a long truncated filename and loading. The resource toggle's inherited hover text color changes, while its visible icon and activity dot set explicit colors and render identically.

Light theme, selected controls and interaction states

Dark theme, selected controls and interaction states

Full frames at normal and enlarged root text size

BillLeoutsakosvl346 · 2026-09-23T02:30:39Z

Current-head follow-up for the muted focus-ring helper. The helper now includes focus-visible:outline-hidden; Slider and Switch obtain that class from the shared recipe, and the compact sidebar action keeps its custom ring without a second browser outline.

The source-derived isolated fixture was recaptured against the unchanged PR base. All 16 before/after full-frame pairs are pixel identical across light/dark themes, 16px/20px root text, rest, resource hover, table keyboard focus, and sidebar keyboard focus. The panels below include the sidebar focus state at 2× device scale.

BillLeoutsakosvl346 · 2026-09-23T02:31:18Z

@greptile

BillLeoutsakosvl346 · 2026-09-23T02:31:22Z

@cubic-dev-ai review this PR

cubic-dev-ai · 2026-09-23T02:31:28Z

@cubic-dev-ai review this PR

@BillLeoutsakosvl346 I have started the AI code review. It will take a few minutes to complete.

cubic-dev-ai

No issues found across 12 files

Confidence score: 5/5

Automated review surfaced no issues in the provided summaries.
No files require special attention.

_{Re-trigger cubic}

* improvement(emcn): share ordinary action geometry in Button * improvement(ui): share additional-field disclosures * fix(ui): preserve tiny actions and use shared sidebar geometry * improvement(ui): use shared geometry for standard icon actions (#8153) Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * refactor(ui): centralize overlay action buttons in EMCN (#7990) * refactor(ui): centralize overlay action buttons in EMCN * improvement(ui): share workflow preview actions (#8065) * improvement(ui): share workflow preview actions * improvement(ui): reuse inline and overlay workflow actions * refactor(emcn): share Code.Viewer appearances (#8238) * Add shared Code.Viewer appearances for product surfaces * Test flat virtualized Code.Viewer terminal chrome --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * Share table sidebar shell and scroll body (#8249) * Share table sidebar shell and scroll body * test(tables): cover shared sidebar dialog state * test(tables): preserve sidebar scroll state --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * Keep workflow preview values readable (#8256) * fix(ui): keep preview values readable and restore version tint * fix(ui): keep preview file actions inert --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> Co-authored-by: Waleed <walif6@gmail.com> --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> Co-authored-by: Waleed <walif6@gmail.com> * improvement(ui): reuse shared button and focus treatments (#8187) * improvement(ui): reuse shared button and focus treatments * fix(emcn): include outline reset in muted focus ring * fix(ui): make closed table sidebars inert and strengthen focus ring * Carry code search overlay into the live EMCN stack (#8275) * refactor(ui): share code search overlay controls * refactor(emcn): own compact code search field chrome * test(ui): cover floating compact code search * refactor(emcn): compose compact search from shared chip surface --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * fix(ui): announce code search result changes * docs(ui): describe shared table sidebar exports --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> Co-authored-by: Codex <codex@openai.com> Co-authored-by: Waleed <walif6@gmail.com>

improvement(ui): reuse shared button and focus treatments

6c92816

vercel Bot deployed to Preview September 23, 2026 02:18 View deployment

cubic-dev-ai Bot reviewed Sep 23, 2026

View reviewed changes

Comment thread packages/emcn/src/lib/focus-ring.ts

fix(emcn): include outline reset in muted focus ring

22ed396

vercel Bot deployed to Preview September 23, 2026 02:32 View deployment

cubic-dev-ai Bot reviewed Sep 23, 2026

View reviewed changes

BillLeoutsakosvl346 merged commit 4a3986b into codex/control-fix-field-disclosures Sep 24, 2026
14 checks passed

waleedlatif1 deleted the codex/overrides-component-styling-final branch September 24, 2026 23:58

Navigation Menu

improvement(ui): reuse shared button and focus treatments - #8187

improvement(ui): reuse shared button and focus treatments#8187
BillLeoutsakosvl346 merged 2 commits into
codex/control-fix-field-disclosuresfrom
codex/overrides-component-styling-final

BillLeoutsakosvl346 commented Sep 23, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Sep 23, 2026 •

edited

Loading

Uh oh!

greptile-apps Bot commented Sep 23, 2026 •

edited

Loading

Uh oh!

cubic-dev-ai Bot left a comment •

edited

Loading

Uh oh!

Uh oh!

BillLeoutsakosvl346 commented Sep 23, 2026 •

edited

Loading

Uh oh!

BillLeoutsakosvl346 commented Sep 23, 2026

Uh oh!

BillLeoutsakosvl346 commented Sep 23, 2026

Uh oh!

BillLeoutsakosvl346 commented Sep 23, 2026

Uh oh!

cubic-dev-ai Bot commented Sep 23, 2026

Uh oh!

cubic-dev-ai Bot left a comment

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

BillLeoutsakosvl346 commented Sep 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Type of Change

Testing

Checklist

Uh oh!

vercel Bot commented Sep 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

greptile-apps Bot commented Sep 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Confidence Score: 5/5

Summary

Uh oh!

cubic-dev-ai Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

BillLeoutsakosvl346 commented Sep 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

BillLeoutsakosvl346 commented Sep 23, 2026

Uh oh!

BillLeoutsakosvl346 commented Sep 23, 2026

Uh oh!

BillLeoutsakosvl346 commented Sep 23, 2026

Uh oh!

cubic-dev-ai Bot commented Sep 23, 2026

Uh oh!

cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

BillLeoutsakosvl346 commented Sep 23, 2026 •

edited

Loading

vercel Bot commented Sep 23, 2026 •

edited

Loading

greptile-apps Bot commented Sep 23, 2026 •

edited

Loading

cubic-dev-ai Bot left a comment •

edited

Loading

BillLeoutsakosvl346 commented Sep 23, 2026 •

edited

Loading