inspector/clients/web/src/theme
Repository files (latest commit first)
Filename Latest commit message Latest commit date
Cliff Hall bb32d1db5f
fix(web): section-header hover outline + clear buttons out of tab order (#1487) (#1488)
* fix(web): section-header hover outline + clear buttons out of tab order (#1487)

Two button-behavior adjustments:

1. History section headers (Pinned / History) now use the filter-toggle
   style — a thin outline on hover instead of a background fill — by pointing
   the `sectionHeader` Group variant at the shared `.filter-toggle` class. The
   open section keeps its filled background (passed per-instance via `bg`).

2. Every input clear button added in #1448 is removed from the keyboard tab
   order via `tabIndex={-1}` (CloseButton clear buttons app-wide, plus the
   Autocomplete clear button through `theme/Autocomplete.ts` clearButtonProps),
   so tabbing through a form moves to the next field, not onto the clear button.
   The buttons stay mouse-clickable.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(web): apply filter-toggle hover outline to Resources accordion headers (#1487)

The Resources screen `disclosure` accordion controls now share the same
outline-on-hover treatment as the filter toggle buttons and History section
headers: a thin border on hover instead of a background fill, plus a filled
background when the section is open (keyed off `aria-expanded`). The `.filter-
toggle` class is added to the disclosure control slot; the default-variant
accordion (Server Settings) keeps its background-fill hover via a `:not(.filter-
toggle)` guard.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* refactor(web): extract ClearButton element, replace 34 inline clear buttons

Addresses the code-review suggestion on PR #1488: the same five-line
`CloseButton` clear-affordance block (aria-label="Clear" + tabIndex={-1} +
onClick) was hand-copied across 17 files. Extract a single
`elements/ClearButton` (Mantine `CloseButton.withProps` with the aria-label and
tabIndex baked in) and replace all 34 call sites, so the clear-button contract
lives in one place. A global CloseButton theme default would be wrong here — it
would also catch tabbable modal-close X buttons and the Select clear buttons —
so a dedicated element is the right altitude.

Net -151 lines. Adds element unit tests + a Storybook play test covering the
aria-label / tabIndex / clickable contract for all sites at once.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-14 22:27:46 -04:00
..
assets refine UI layout, theming, and component consistency across screens 2026-03-23 16:56:53 -04:00
Accordion.ts fix(web): section-header hover outline + clear buttons out of tab order (#1487) (#1488) 2026-06-14 22:27:46 -04:00
ActionIcon.ts formatting 2026-03-17 16:43:27 -04:00
Alert.ts formatting 2026-03-17 16:43:27 -04:00
AppShell.ts fix(web): hide resource subscription UI when server lacks subscribe capability (#1479) 2026-06-14 12:54:19 -04:00
Autocomplete.ts fix(web): section-header hover outline + clear buttons out of tab order (#1487) (#1488) 2026-06-14 22:27:46 -04:00
Badge.ts Add new components, typography, badge contrast, and screen layout refactors 2026-03-28 20:38:04 -04:00
Button.ts formatting 2026-03-17 16:43:27 -04:00
Card.ts fix(web): ResourceControls single-scroll, full-height panel, right/down chevrons (#1462) (#1464) 2026-06-14 08:57:05 -04:00
Code.ts fix InlineError blank space and ElicitationUrlPanel URL overflow 2026-03-22 18:49:26 -04:00
Flex.ts Add new components, typography, badge contrast, and screen layout refactors 2026-03-28 20:38:04 -04:00
Group.ts fix(web): section-header hover outline + clear buttons out of tab order (#1487) (#1488) 2026-06-14 22:27:46 -04:00
index.ts fix(web): ResourceControls single-scroll, full-height panel, right/down chevrons (#1462) (#1464) 2026-06-14 08:57:05 -04:00
Input.ts Phase 1: Style refinements and component tweaks from Storybook review 2026-04-17 19:26:21 -04:00
Paper.ts Add new components, typography, badge contrast, and screen layout refactors 2026-03-28 20:38:04 -04:00
Select.ts formatting 2026-03-17 16:43:27 -04:00
Switch.ts formatting 2026-03-17 16:43:27 -04:00
Text.ts feat(web): show Apps, Prompts, Resources, and Tasks tabs only when the server exposes the relevant items (#1450) (#1453) 2026-06-12 18:11:52 -04:00
TextInput.ts formatting 2026-03-17 16:43:27 -04:00
theme.ts fix(web): ResourceControls single-scroll, full-height panel, right/down chevrons (#1462) (#1464) 2026-06-14 08:57:05 -04:00
Title.ts feat(connection-info): wire Connection Info modal to the connection handshake (#1377) 2026-05-30 16:42:37 -04:00
UnstyledButton.ts fix(web): filter toggle hover as border, not background (#1460) (#1461) 2026-06-13 19:52:27 -04:00