Skip to content

Preserve the default focus ring with authored focus marks - #49

Merged
tannerlinsley merged 2 commits into
mainfrom
taren/fix-focus-ring-composition
Aug 2, 2026
Merged

Preserve the default focus ring with authored focus marks#49
tannerlinsley merged 2 commits into
mainfrom
taren/fix-focus-ring-composition

Conversation

@tannerlinsley

@tannerlinsley tannerlinsley commented Aug 2, 2026

Copy link
Copy Markdown
Member

Summary

  • keep the built-in primary-point ring when authored focus marks are present
  • add focusRing: false as an explicit opt-out
  • regress SVG, Canvas, facets, and the interaction proof

Validation

  • pnpm run validate

Fixes #33

Summary by CodeRabbit

  • New Features

    • Added a default focus ring for chart points, including charts with custom focus indicators.
    • Added the focusRing: false option to disable the built-in focus ring when custom focus geometry is used.
    • Updated focus behavior across SVG, Canvas, and faceted charts.
  • Documentation

    • Documented the new focusRing option and focus-indicator behavior.
  • Bug Fixes

    • Improved focus-layer composition and clearing behavior.

@coderabbitai

coderabbitai Bot commented Aug 2, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@tannerlinsley, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 8 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 4f3ef7f3-0af3-4a1f-a454-37f1b04814eb

📥 Commits

Reviewing files that changed from the base of the PR and between e4b5249 and 5904af7.

📒 Files selected for processing (4)
  • API-FRICTION.md
  • benchmarks/comparison/bundle-baseline.json
  • docs/comparison.md
  • packages/charts-core/docs/comparison.md
📝 Walkthrough

Walkthrough

The chart now preserves the built-in primary-point focus ring when authored whenFocused marks exist. Chart definitions expose focusRing?: boolean, enabled by default. Tests and documentation cover SVG, Canvas, facets, and explicit opt-out behavior.

Changes

Focus ring composition

Layer / File(s) Summary
Focus ring option and scene generation
packages/charts-core/src/types.ts, packages/charts-core/src/scene.ts
Chart definitions accept focusRing. The scene creates the default focus layer unless focusRing is false, independent of authored focus layers.
Focus ring rendering and facet validation
packages/charts-core/src/*test.ts, examples/sandbox/src/InteractionGeometryLab.test.ts
Tests verify composed SVG and Canvas focus layers, focus clearing, opt-out behavior, and updated facet synchronization counts.
Focus ring documentation and release records
docs/reference/*, packages/charts-core/docs/reference/*, API-FRICTION.md, benchmarks/bundle-size/universal-baseline.json, .changeset/steady-focus-rings.md
References describe the option and default behavior. API findings, bundle baselines, and the patch changeset are updated.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant ChartDefinition
  participant SceneBuilder
  participant AuthoredFocusMarks
  participant SVGCanvasRenderer
  ChartDefinition->>SceneBuilder: pass focusRing configuration
  AuthoredFocusMarks->>SceneBuilder: provide whenFocused layers
  SceneBuilder->>SceneBuilder: retain authored layers
  SceneBuilder->>SVGCanvasRenderer: add primary focus ring unless disabled
  SVGCanvasRenderer->>SVGCanvasRenderer: render composed focus layers
Loading

Possibly related PRs

  • TanStack/charts#11: Adds a React Native host and native focus overlay, while this PR changes core focus-ring composition.
  • TanStack/charts#29: Modifies chart focus-layer generation and related scene and facet tests.

Suggested reviewers: gillkyle

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly states the main change: preserving the default focus ring when authored focus marks are present.
Linked Issues check ✅ Passed The changes preserve the default focus ring, add an explicit focusRing: false opt-out, and add regression coverage for issue #33.
Out of Scope Changes check ✅ Passed The changes are limited to the focus-ring fix, related API documentation, tests, release metadata, and bundle-size baselines.
✨ Finishing Touches 💡 2
📝 Generate docstrings 💡
  • Create stacked PR
  • Commit on current branch
🛠️ Fix failing CI checks 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch taren/fix-focus-ring-composition

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai 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.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/charts-core/docs/reference/chart-definitions.md`:
- Around line 90-92: Move the authored documentation changes to the
corresponding root docs/reference files, then run pnpm docs:sync to regenerate
the package copies. Apply this to
packages/charts-core/docs/reference/chart-definitions.md:90-92,
packages/charts-core/docs/reference/dom-host.md:119, and
packages/charts-core/docs/reference/focus-and-interaction.md:30-32; do not
maintain those generated files independently.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 3a910cb9-f026-4d98-b3a4-125d91fba67d

📥 Commits

Reviewing files that changed from the base of the PR and between fa7e462 and e4b5249.

📒 Files selected for processing (15)
  • .changeset/steady-focus-rings.md
  • API-FRICTION.md
  • benchmarks/bundle-size/universal-baseline.json
  • docs/reference/chart-definitions.md
  • docs/reference/dom-host.md
  • docs/reference/focus-and-interaction.md
  • examples/sandbox/src/InteractionGeometryLab.test.ts
  • packages/charts-core/docs/reference/chart-definitions.md
  • packages/charts-core/docs/reference/dom-host.md
  • packages/charts-core/docs/reference/focus-and-interaction.md
  • packages/charts-core/src/canvas.test.ts
  • packages/charts-core/src/facet.test.ts
  • packages/charts-core/src/focus-mark.test.ts
  • packages/charts-core/src/scene.ts
  • packages/charts-core/src/types.ts

Comment on lines +90 to +92
`focusRing`, `maxFocusDistance`, `spatialIndex`, `animate`, `keyboard`, and
`tooltip`. These options belong to both static and responsive definitions.
Hosts and framework adapters do not override them.

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win

Generate the package documentation from the root source.

Keep authored changes in the corresponding docs/reference/ files, then run pnpm docs:sync. Do not maintain these generated copies independently.

  • packages/charts-core/docs/reference/chart-definitions.md#L90-L92: regenerate from docs/reference/chart-definitions.md.
  • packages/charts-core/docs/reference/dom-host.md#L119-L119: regenerate from docs/reference/dom-host.md.
  • packages/charts-core/docs/reference/focus-and-interaction.md#L30-L32: regenerate from docs/reference/focus-and-interaction.md.

As per coding guidelines, public documentation must be authored only in the root docs/ tree, and packages/charts-core/docs is generated by pnpm docs:sync.

📍 Affects 3 files
  • packages/charts-core/docs/reference/chart-definitions.md#L90-L92 (this comment)
  • packages/charts-core/docs/reference/dom-host.md#L119-L119
  • packages/charts-core/docs/reference/focus-and-interaction.md#L30-L32
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/charts-core/docs/reference/chart-definitions.md` around lines 90 -
92, Move the authored documentation changes to the corresponding root
docs/reference files, then run pnpm docs:sync to regenerate the package copies.
Apply this to packages/charts-core/docs/reference/chart-definitions.md:90-92,
packages/charts-core/docs/reference/dom-host.md:119, and
packages/charts-core/docs/reference/focus-and-interaction.md:30-32; do not
maintain those generated files independently.

Source: Coding guidelines

@tannerlinsley
tannerlinsley merged commit aed1c46 into main Aug 2, 2026
17 checks passed
@github-actions github-actions Bot mentioned this pull request Aug 2, 2026
@tannerlinsley
tannerlinsley deleted the taren/fix-focus-ring-composition branch August 3, 2026 04:49
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.

Adding any focus mark removes the built-in focused-point ring from the whole chart

1 participant