Toggle & Switch (#21979)

![CleanShot 2024-12-13 at 11 27
39@2x](https://github.com/user-attachments/assets/7c7828c0-c5c7-4dc6-931e-722366d4f15a)

- Adds the Switch component
- Updates `Selected`, `Selectable` -> `ToggleState`, `Toggleable`
- Adds `checkbox` and `switch` functions to align better with other
elements in our layout system.

We decided not to merge Switch and Checkbox. However, in a followup I'll
introduce a Toggle or AnyToggle enum so we can update
`CheckboxWithLabel` -> `ToggleWithLabel` as this component will work
exactly the same with either a Checkbox or a Switch.

Release Notes:

- N/A
This commit is contained in:
Nate Butler 2024-12-13 14:23:02 -05:00 committed by GitHub
parent 2f2e7f0317
commit 19d6e067af
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
77 changed files with 626 additions and 453 deletions

View file

@ -210,7 +210,7 @@ impl PickerDelegate for ExtensionVersionSelectorDelegate {
ListItem::new(ix)
.inset(true)
.spacing(ListItemSpacing::Sparse)
.selected(selected)
.toggle_state(selected)
.disabled(disabled)
.child(
HighlightedLabel::new(

View file

@ -933,7 +933,7 @@ impl ExtensionsPage {
fn update_settings<T: Settings>(
&mut self,
selection: &Selection,
selection: &ToggleState,
cx: &mut ViewContext<Self>,
callback: impl 'static + Send + Fn(&mut T::FileContent, bool),
) {
@ -942,8 +942,8 @@ impl ExtensionsPage {
let selection = *selection;
settings::update_settings_file::<T>(fs, cx, move |settings, _| {
let value = match selection {
Selection::Unselected => false,
Selection::Selected => true,
ToggleState::Unselected => false,
ToggleState::Selected => true,
_ => return,
};
@ -998,9 +998,9 @@ impl ExtensionsPage {
"enable-vim",
Label::new("Enable vim mode"),
if VimModeSetting::get_global(cx).0 {
ui::Selection::Selected
ui::ToggleState::Selected
} else {
ui::Selection::Unselected
ui::ToggleState::Unselected
},
cx.listener(move |this, selection, cx| {
this.telemetry
@ -1090,7 +1090,7 @@ impl Render for ExtensionsPage {
ToggleButton::new("filter-all", "All")
.style(ButtonStyle::Filled)
.size(ButtonSize::Large)
.selected(self.filter == ExtensionFilter::All)
.toggle_state(self.filter == ExtensionFilter::All)
.on_click(cx.listener(|this, _event, cx| {
this.filter = ExtensionFilter::All;
this.filter_extension_entries(cx);
@ -1104,7 +1104,7 @@ impl Render for ExtensionsPage {
ToggleButton::new("filter-installed", "Installed")
.style(ButtonStyle::Filled)
.size(ButtonSize::Large)
.selected(self.filter == ExtensionFilter::Installed)
.toggle_state(self.filter == ExtensionFilter::Installed)
.on_click(cx.listener(|this, _event, cx| {
this.filter = ExtensionFilter::Installed;
this.filter_extension_entries(cx);
@ -1118,7 +1118,9 @@ impl Render for ExtensionsPage {
ToggleButton::new("filter-not-installed", "Not Installed")
.style(ButtonStyle::Filled)
.size(ButtonSize::Large)
.selected(self.filter == ExtensionFilter::NotInstalled)
.toggle_state(
self.filter == ExtensionFilter::NotInstalled,
)
.on_click(cx.listener(|this, _event, cx| {
this.filter = ExtensionFilter::NotInstalled;
this.filter_extension_entries(cx);