| CARVIEW |
Navigation Menu
-
Notifications
You must be signed in to change notification settings - Fork 4.6k
DataForm: switch boolean field types from toggle to checkbox UI #71505
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
Conversation
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
oandregal
added
the
[Feature] DataViews
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { privateApis } from '@wordpress/components'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could we instead do the following?
- Remove the
booleanform control. SoEdit: booleandoesn't work, which is a breaking change we need to document in the changelog. OnlyEdit: checkboxorEdit: toggleare available. - Update the
booleanfield type to useEdit: checkbox.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
At the time boolean was added (#70567) it probably mimicked existing controls such as text, integer, etc. I think it's best if we separate the field type (boolean) from the Edit, the controls that render it (checkbox, toggle).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Additionally, for both checkbox and toggle controls we need to leverage the field.description to offer a description for the control (example).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @oandregal, thank you for the review all your feedback was applied:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we also remove the dataform-controls/boolean and port that code to the dataform-controls/checkbox?
Additionally, I've noticed that the checkbox is not using its validating counterpart (the toggle control is). You may want to check the existing validation story. I think we need to export the existing ValidatedCheckbox component and use it here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good point @oandregal, I made the control validated and it is working well by testing on https://localhost:50240/?path=/story/dataviews-dataform--validation.
|
Flaky tests detected in 4c29788. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/17493795711
|
oandregal
changed the title
| label: 'Boolean', | ||
| description: 'Help for boolean.', | ||
| }, | ||
| { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice, thanks :)
Switch the default UI for boolean fields from toggle switches to checkboxes while preserving toggle functionality under a new 'toggle' control type. - Boolean control now uses CheckboxControl instead of ValidatedToggleControl - Created new toggle control preserving original boolean implementation - Added toggle control to form controls registry and story types - Boolean fields now default to checkboxes, toggle switches available via Edit: 'toggle'
Add a story field to demonstrate the new toggle control that preserves the original ValidatedToggleControl behavior after boolean fields switched to checkboxes. - Add booleanWithToggle field to DataType interface and data - Add field definition with Edit: 'toggle' to showcase toggle switch UI - Position story between basic boolean (checkbox) and boolean with elements (select)
…ntrols
Replace checkbox control implementation with a re-export of the boolean control to eliminate code duplication. Both controls now reference the same implementation in boolean.tsx.
- Remove duplicate CheckboxControl implementation from checkbox.tsx
- Replace with simple re-export: export { default } from './boolean'
- Maintains identical functionality for both Edit: 'checkbox' and Edit: 'boolean'
- Single source of truth for checkbox behavior in boolean.tsx
Co-authored-by: André <583546+oandregal@users.noreply.github.com>
Co-authored-by: André <583546+oandregal@users.noreply.github.com>
Co-authored-by: André <583546+oandregal@users.noreply.github.com>
jorgefilipecosta
force-pushed
the
update/boolean-to-use-checkbox
branch
from
450c007 to
4c29788
Compare
|
@jorgefilipecosta the only thing missing here seems to be the changelog entry for the wordpress/components package. |
Labels
2 participants
This PR changes the default UI for boolean fields in DataViews from toggle switches to checkboxes, while preserving the toggle functionality under a new control type. This improves the user experience by providing a more conventional checkbox interface for boolean inputs.
Changes
Core Implementation
CheckboxControlinstead ofValidatedToggleControlControl Behavior
Edit: 'boolean'→ Now renders checkboxes (new default)Edit: 'checkbox'→ Still renders checkboxes (unchanged)Edit: 'toggle'→ Renders toggle switches (preserved original behavior)Backward Compatibility
Edit: 'toggle'to maintain toggle switches if neededTesting