Core Checkbox #19665
Core Checkbox #19665
Conversation
alice-i-cecile
added
A-UI
|
|
||
| fn checkbox_on_key_input( | ||
| mut ev: On<FocusedInput<KeyboardInput>>, | ||
| q_checkbox: Query<(&CoreCheckbox, Has<Checked>, Has<InteractionDisabled>)>, |
There was a problem hiding this comment.
Is there a reason for querying for Has<InteractedDisabled> instead of using a Without<InteractionDisabled filter, or is it just stylistic?
| display: Display::Flex, | ||
| flex_direction: FlexDirection::Row, | ||
| justify_content: JustifyContent::FlexStart, | ||
| align_items: AlignItems::Center, | ||
| align_content: AlignContent::Center, |
There was a problem hiding this comment.
These constraints don't do anything?
| display: Display::Flex, | |
| flex_direction: FlexDirection::Row, | |
| justify_content: JustifyContent::FlexStart, | |
| align_items: AlignItems::Center, | |
| align_content: AlignContent::Center, | |
| align_items: AlignItems::Center, |
| Node { | ||
| display: Display::Flex, | ||
| width: Val::Px(16.0), | ||
| height: Val::Px(16.0), | ||
| border: UiRect::all(Val::Px(2.0)), | ||
| ..default() | ||
| }, | ||
| BorderColor::all(CHECKBOX_OUTLINE), // Border color for the checkbox | ||
| BorderRadius::all(Val::Px(3.0)), | ||
| children![ | ||
| // Checkbox inner | ||
| ( | ||
| Node { | ||
| display: Display::Flex, | ||
| width: Val::Px(8.0), | ||
| height: Val::Px(8.0), | ||
| position_type: PositionType::Absolute, | ||
| left: Val::Px(2.0), | ||
| top: Val::Px(2.0), | ||
| ..default() | ||
| }, |
There was a problem hiding this comment.
| Node { | |
| display: Display::Flex, | |
| width: Val::Px(16.0), | |
| height: Val::Px(16.0), | |
| border: UiRect::all(Val::Px(2.0)), | |
| ..default() | |
| }, | |
| BorderColor::all(CHECKBOX_OUTLINE), // Border color for the checkbox | |
| BorderRadius::all(Val::Px(3.0)), | |
| children![ | |
| // Checkbox inner | |
| ( | |
| Node { | |
| display: Display::Flex, | |
| width: Val::Px(8.0), | |
| height: Val::Px(8.0), | |
| position_type: PositionType::Absolute, | |
| left: Val::Px(2.0), | |
| top: Val::Px(2.0), | |
| ..default() | |
| }, | |
| Node { | |
| width: Val::Px(16.0), | |
| height: Val::Px(16.0), | |
| border: UiRect::all(Val::Px(2.0)), | |
| padding: UiRect::all(Val::Px(2.0)), | |
| ..default() | |
| }, | |
| BorderColor::all(CHECKBOX_OUTLINE), // Border color for the checkbox | |
| BorderRadius::all(Val::Px(3.0)), | |
| children![ | |
| // Checkbox inner | |
| ( | |
| Node { | |
| flex_grow: 1., | |
| ..default() | |
| }, |
| /// Headless widget implementation for checkboxes. The [`Checked`] component represents the current | ||
| /// state of the checkbox. The `on_change` field is an optional system id that will be run when the | ||
| /// checkbox is clicked, or when the `Enter` or `Space` key is pressed while the checkbox is | ||
| /// focused. If the `on_change` field is `None`, the checkbox will update its own state. |
There was a problem hiding this comment.
"will update its own state" is quite unclear. What exactly will it do that you should be mimicking?
| #[require(AccessibilityNode(accesskit::Node::new(Role::CheckBox)), Checkable)] | ||
| pub struct CoreCheckbox { | ||
| /// One-shot system that is run when the checkbox state needs to be changed. | ||
| pub on_change: Option<SystemId<In<bool>>>, |
There was a problem hiding this comment.
Oh nice, I like the piped one shot systems here!
|
@cart I wanted to opine a bit on the whole The argument for making This marker argument makes more sense for bistable transitions where the up transition is handled differently than the down transition. (Whether "pressed" falls under this criteria I don't know, but an argument can be made). |
| /// } | ||
| /// ``` | ||
| #[derive(Event, EntityEvent)] | ||
| pub struct SetChecked(pub bool); |
There was a problem hiding this comment.
Small nit: This should probably be an enum instead of a boolean.
alice-i-cecile
added
S-Ready-For-Final-Review
Objective
This is part of the "core widgets" effort: #19236.
Solution
This adds the "core checkbox" widget type.
Testing
Tested using examples core_widgets and core_widgets_observers.
Note to reviewers: I reorganized the code in the examples, so the diffs are large because of code moves.