Skip to content

feat: Action Bar#797

Open
tanugarg04 wants to merge 1 commit into
mainfrom
AN-389068
Open

feat: Action Bar#797
tanugarg04 wants to merge 1 commit into
mainfrom
AN-389068

Conversation

@tanugarg04

Copy link
Copy Markdown
Contributor

Description
Adds ChartActionBar as a new child component for Line charts in the S2 package. When a user clicks a data point, a floating contextual toolbar appears near that point with user-defined action buttons. The bar supports overflow truncation (actions beyond available space collapse into a ··· panel), drag-to-reposition, and an emphasized visual style via isEmphasized.

New public API:

— render-null stub accepted as a child of
children: (datum, close) => ReactElement[] — render function receiving the clicked datum and a close callback
isEmphasized?: boolean — accent background with white icon treatment, matching the RS ActionBar emphasized style
maxActions?: number — hard cap on inline actions before overflow (default 4; space is the primary driver)
onClearSelection?: () => void — called when the bar is dismissed
Behavior:

Interactive behavior (selection ring, hover signals, clear-on-close) mirrors ChartPopover
If both ChartActionBar and ChartPopover are children of the same Line, a runtime warning is emitted and the ChartActionBar takes precedence for left-click. A right-click ChartPopover can coexist
Bar is draggable so users can reposition it if it overlaps content
Related Issue
N/A — new feature scoped to the S2 package (@spectrum-charts/react-spectrum-charts-s2)

Motivation and Context
Charts often need contextual actions tied to a selected data point (annotate, comment, export). The existing ChartPopover handles arbitrary content but requires the user to build their own action layout. ChartActionBar provides a purpose-built, accessible toolbar pattern that matches the Spectrum 2 design — floating near the point, space-aware, and dismissible.

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • I have signed the Adobe Open Source CLA.
  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

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