feat(Toggle): rename SwitchField → ToggleField, ToggleField → ButtonToggle#112
Merged
Merged
Conversation
…oggle - Rename SwitchField to ToggleField to align with SAIL's a!toggleField() - Rename ToggleField (button-style toggle) to ButtonToggle - Delete src/components/Switch/ directory - Create src/components/ButtonToggle/ with renamed component - Update src/components/Toggle/ to contain the switch-based implementation - Update ApplicationHeader imports and usages - Update src/components/index.ts exports - Update AGENTS.md with new component quick reference patterns - Rename switchLabelPosition prop to toggleLabelPosition Closes pglevy#99
pglevy
requested changes
May 14, 2026
pglevy
left a comment
pglevy
left a comment
Owner
There was a problem hiding this comment.
Hey Govind! Looks good overall. Just had a few tweaks to the props. I realize this wasn't in the Issue, but let's use opportunity to align the props with the SAIL counterpart (since this was created before it existed). I think I caught them all (with help from AI) but feel free to double check.
| */ | ||
| export interface ToggleFieldProps { | ||
| /** Text to display as the field label */ | ||
| label?: string |
| /** Position of icon relative to text */ | ||
| iconPosition?: "START" | "END" | ||
| /** Position of the inline label relative to the switch control: LEFT or RIGHT */ | ||
| toggleLabelPosition?: "LEFT" | "RIGHT" |
Owner
There was a problem hiding this comment.
now choicePosition with START/END
| validationGroup: _validationGroup, | ||
| requiredMessage, | ||
| labelPosition = "ABOVE", | ||
| labelPosition: _labelPosition = "ABOVE", |
| @@ -205,43 +158,88 @@ export const ToggleField: React.FC<ToggleFieldProps> = ({ | |||
| // Show required message | |||
| const showRequiredMessage = required && !value && requiredMessage | |||
Owner
There was a problem hiding this comment.
Maybe incorporate default required message if it doesn't complicate things too much: Enable the toggle to continue from docs
- Rename label → choiceLabel (matches SAIL parameter name) - Rename toggleLabelPosition → choicePosition with START/END values - Remove unused labelPosition and instructions props - Add default required message: "Enable the toggle to continue" - Update stories to use new prop names and add required message stories - Update ApplicationHeader usage - Update AGENTS.md quick reference
- Remove size prop (no other SAIL field component has it) - Remove color prop (same reasoning) - Fixed at STANDARD size and ACCENT (blue) color, matching Appian product - Remove all size/color maps and palette color resolution logic - Remove unused imports (SAILSize, SAILColorInput, isPaletteColor, paletteColorMap) - Remove size and color stories from Storybook - Update AGENTS.md quick reference
Contributor
Author
|
Also removed |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes #99
Renames components to align with Appian SAIL's
a!toggleField()and avoid naming collisions:SwitchField→ToggleField(switch/toggle for boolean input)ToggleField→ButtonToggle(button-style on/off toggle for toolbars/filters)Changes
src/components/Switch/SwitchField.tsxsrc/components/Toggle/ToggleField.tsxa!toggleField()src/components/Toggle/ToggleField.tsxsrc/components/ButtonToggle/ButtonToggle.tsxswitchLabelPositionproptoggleLabelPositionpropFiles modified
src/components/Toggle/ToggleField.tsx— switch-based implementation (formerly SwitchField)src/components/Toggle/Toggle.stories.tsx— updated storiessrc/components/Toggle/index.ts— exportssrc/components/ButtonToggle/ButtonToggle.tsx— button-style toggle (formerly ToggleField)src/components/ButtonToggle/ButtonToggle.stories.tsx— updated storiessrc/components/ButtonToggle/index.ts— exportssrc/components/index.ts— updated barrel exportssrc/components/ApplicationHeader/ApplicationHeader.tsx— updated imports/usagesAGENTS.md— added quick reference patterns for both componentsFiles deleted
src/components/Switch/SwitchField.tsxsrc/components/Switch/Switch.stories.tsxsrc/components/Switch/index.ts