Add clickable toggle for Boolean token type

[Copilot]

Overview

This PR adds a clickable toggle UI for Boolean token type, allowing users to quickly select between true, false, or reference values instead of typing them manually.

Problem

Previously, when editing Boolean tokens, users had to type the values manually using a text input. This led to:

• Slower workflow when managing Boolean tokens
• Common typing errors (e.g., "True" instead of "true", "FALSE", "yes/no")
• No clear distinction between literal boolean values and token references
• No validation feedback for invalid values

Solution

Implemented a new BooleanTokenForm component that provides a three-option toggle:

1. true - Sets the boolean token value to "true"
2. false - Sets the boolean token value to "false"
3. reference - Shows an input field for entering token references like {some.other.token}

Key Features

• Visual Toggle: Clean, intuitive UI using the @tokens-studio/ui ToggleGroup component
• Conditional Input: Reference input field only appears when "reference" mode is selected
• Validation: Automatically validates reference values and shows error messages for invalid formats
• Flexible References: Supports both {token.name} and $token.name reference formats
• Backward Compatible: Existing Boolean tokens continue to work without changes

Changes Made

New Files

• src/app/components/BooleanTokenForm.tsx - New specialized form component for Boolean tokens
• src/app/components/BooleanTokenForm.test.tsx - Comprehensive test suite (8 tests, all passing)

Modified Files

• src/app/components/EditTokenForm.tsx - Integrated BooleanTokenForm into the token editing flow
• src/i18n/lang/en/errors.json - Added "invalidBooleanValue" translation
• src/i18n/lang/en/general.json - Added "reference" translation
• src/i18n/lang/en/tokens.json - Added "referenceValue" translation

Implementation Details

The component follows the same pattern as other specialized token forms (ColorTokenForm, BorderTokenForm, etc.):

• Accepts resolved tokens for reference validation
• Provides callbacks for value changes
• Supports form submission via Enter key
• Uses consistent styling with existing components

Validation logic ensures values are either:

• Exactly "true" (lowercase)
• Exactly "false" (lowercase)
• A valid reference in format {token.name} or $token.name that points to an existing token

Testing

• ✅ All 8 new BooleanTokenForm tests passing
• ✅ All existing EditTokenForm tests still passing
• ✅ Build successful
• ✅ Linting clean
• ✅ No regressions detected

Benefits

• Speeds up workflow - One click instead of typing
• Reduces errors - Eliminates manual input mistakes
• Improves usability - Clear visual feedback and validation
• Better UX - Intuitive interface that matches user expectations for boolean inputs

Closes the issue requesting a clickable toggle for Boolean token values.

Original prompt

Add a clickable toggle for true/false in the Boolean token type, allowing users to quickly select the value instead of typing it manually.

Why it's useful:
Speeds up workflow.

Reduces manual input errors.

Improves usability for managing Boolean tokens.

--

we need to make sure to still allow users to type a value for references, but could offer a toggle instead. maybe we make "true | false | reference" and when reference is chosen show the input (and when the value is anything but true or false show th reference one, meaning its a reference). We could also show some validation here, if its anythig BUT true or false or a reference, show a warning that the value is incorrect)

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[changeset-bot]

🦋 Changeset detected

Latest commit: 88b0350

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@tokens-studio/figma-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR