Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ui(components): New tool components ToolToggle and ToolToggleList (WIP) #4653

Closed
wants to merge 9 commits into from

Conversation

dan-rukas
Copy link
Member

Context

WIP: Added new components ToolToggle and ToolToggleList

This PR introduces three new components (Toggle, ToolToggle, and ToolToggleList) using shad/cn and @radix-ui/react-toggle.

Please note this is DRAFT and does not include all functionality or final design. This PR in NOT COMPLETE.

Changes & Results

  1. Toggle
    • A low-level wrapper around @radix-ui/react-toggle that uses our class-variance-authority (cva) styling.
    • Offers variant and size options (variant="tool", size="default", etc.) to match our design system.
    • Handles pressed/hover/disabled states in a reusable, composable way.
  2. ToolToggle
    • A higher-level component built on Toggle for single-tool usage.
    • Displays an icon (and optional label via tooltip) for the tool.
    • For an “always on until replaced by another tool” experience, it blocks un-toggling by ignoring pressed === false attempts.
    • Integrates our Tooltip to show the tool’s label on hover.
  3. ToolToggleList (Design in progress)
    • A split-button style component for tool groups (e.g. “Measurement Tools”).
    • The left side is a standard ToolToggle for the primary tool.
    • The right side is a dropdown arrow that opens a DropdownMenu listing secondary tools.
    • Selecting a secondary tool from the list replaces the primary tool’s icon/label, sets it active, and triggers onInteraction so the parent can handle the newly selected tool.

Testing

Checklist

PR

  • [✅] My Pull Request title is descriptive, accurate and follows the
    semantic-release format and guidelines.

Code

  • [✅] My code has been well-documented (function documentation, inline comments,
    etc.)

Public Documentation Updates

  • [] The documentation page has been updated as necessary for any public API
    additions or removals.

Tested Environment

  • [✅] OS: macOS Sequoia 15.2, M4 Pro
  • [✅] Node version: v23.5.0
  • [✅] Browser: Chrome 131.0.6778.205 (Official Build) (arm64)

Toggle no longer toggles for ToolToggle since a tools remains active even when clicked again
Border radius size fixed
Tooltip shows only if label is defined
New component uses Toggle and ToggleTool as a base then adds the DropdownMenu component to list secondary tools. Selected tools will switch in the toolbar.
@dan-rukas dan-rukas changed the title ui(component) Tool components ToolToggle and ToolToggleList (WIP) ui(component): Tool components ToolToggle and ToolToggleList (WIP) Jan 7, 2025
Copy link

netlify bot commented Jan 7, 2025

Deploy Preview for ohif-dev canceled.

Name Link
🔨 Latest commit 23805cc
🔍 Latest deploy log https://app.netlify.com/sites/ohif-dev/deploys/677da59accfcb200085b1c9f

Copy link

netlify bot commented Jan 7, 2025

Deploy Preview for ohif-platform-docs failed. Why did it fail? →

Name Link
🔨 Latest commit 23805cc
🔍 Latest deploy log https://app.netlify.com/sites/ohif-platform-docs/deploys/677da59a9a706d00087c99d2

@dan-rukas dan-rukas changed the title ui(component): Tool components ToolToggle and ToolToggleList (WIP) ui(components): Tool components ToolToggle and ToolToggleList (WIP) Jan 7, 2025
@dan-rukas dan-rukas changed the title ui(components): Tool components ToolToggle and ToolToggleList (WIP) ui(components): New tool components ToolToggle and ToolToggleList (WIP) Jan 7, 2025
Some error fixes relating to matching previous code
@dan-rukas
Copy link
Member Author

This PR has been replaced by #4670

Closing...

@dan-rukas dan-rukas closed this Jan 9, 2025
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