chore: Refactor tab key to switch focus. (#991)

Wait zed-industries/zed#33008,
zed-industries/zed#34804 to merge.


https://github.com/user-attachments/assets/3c21ebc9-44a0-4311-bb0f-5f63fe8d4bb3

- Improved `focus_ring` to render like an outline.
- Added to support press `Enter`, `Space` key to trigger Checkbox,
Button, Radio.

## Break Changes

- The `FocusableExt` has been changed to only for crate internal.
- The `FocusableCycle` has been removed, now GPUI has it own tab stop
implementation.

Author: huacnlee

Cargo.lock

@@ -32,7 +32,7 @@ impl super::Story for AccordionStory {
         "The accordion uses collapse internally to make it collapsible."
     }
 
-    fn new_view(window: &mut Window, cx: &mut App) -> Entity<impl Render + Focusable> {
+    fn new_view(window: &mut Window, cx: &mut App) -> Entity<impl Render> {
         Self::view(window, cx)
     }
 }

crates/story/src/accordion_story.rs

@@ -46,7 +46,7 @@ impl super::Story for AlertStory {
         "Displays a callout for user attention."
     }
 
-    fn new_view(window: &mut Window, cx: &mut App) -> Entity<impl Render + Focusable> {
+    fn new_view(window: &mut Window, cx: &mut App) -> Entity<impl Render> {
         Self::view(window, cx)
     }
 

crates/story/src/alert_story.rs

@@ -35,7 +35,7 @@ impl super::Story for AvatarStory {
         "Avatar is an image that represents a user or organization."
     }
 
-    fn new_view(window: &mut Window, cx: &mut App) -> Entity<impl Render + Focusable> {
+    fn new_view(window: &mut Window, cx: &mut App) -> Entity<impl Render> {
         Self::view(window, cx)
     }
 

crates/story/src/avatar_story.rs

@@ -34,7 +34,7 @@ impl super::Story for BadgeStory {
         "A red dot that indicates the number of unread messages."
     }
 
-    fn new_view(window: &mut Window, cx: &mut App) -> Entity<impl Render + Focusable> {
+    fn new_view(window: &mut Window, cx: &mut App) -> Entity<impl Render> {
         Self::view(window, cx)
     }
 

crates/story/src/badge_story.rs

@@ -61,7 +61,7 @@ impl super::Story for ButtonStory {
         false
     }
 
-    fn new_view(window: &mut Window, cx: &mut App) -> Entity<impl Render + Focusable> {
+    fn new_view(window: &mut Window, cx: &mut App) -> Entity<impl Render> {
         Self::view(window, cx)
     }
 }
@@ -599,8 +599,8 @@ impl Render for ButtonStory {
                 ),
             )
             .child(
-                section(
-                    h_flex().gap_2().child("Toggle Button Group").child(
+                section("Toggle Button Group")
+                    .sub_title(
                         Checkbox::new("multiple-button")
                             .text_sm()
                             .label("Multiple")
@@ -609,41 +609,40 @@ impl Render for ButtonStory {
                                 view.toggle_multiple = !view.toggle_multiple;
                                 cx.notify();
                             })),
+                    )
+                    .child(
+                        ButtonGroup::new("toggle-button-group")
+                            .outline()
+                            .compact()
+                            .multiple(toggle_multiple)
+                            .child(
+                                Button::new("disabled-toggle-button")
+                                    .label("Disabled")
+                                    .selected(disabled),
+                            )
+                            .child(
+                                Button::new("loading-toggle-button")
+                                    .label("Loading")
+                                    .selected(loading),
+                            )
+                            .child(
+                                Button::new("selected-toggle-button")
+                                    .label("Selected")
+                                    .selected(selected),
+                            )
+                            .child(
+                                Button::new("compact-toggle-button")
+                                    .label("Compact")
+                                    .selected(compact),
+                            )
+                            .on_click(cx.listener(|view, selected: &Vec<usize>, _, cx| {
+                                view.disabled = selected.contains(&0);
+                                view.loading = selected.contains(&1);
+                                view.selected = selected.contains(&2);
+                                view.compact = selected.contains(&3);
+                                cx.notify();
+                            })),
                     ),
-                )
-                .child(
-                    ButtonGroup::new("toggle-button-group")
-                        .outline()
-                        .compact()
-                        .multiple(toggle_multiple)
-                        .child(
-                            Button::new("disabled-toggle-button")
-                                .label("Disabled")
-                                .selected(disabled),
-                        )
-                        .child(
-                            Button::new("loading-toggle-button")
-                                .label("Loading")
-                                .selected(loading),
-                        )
-                        .child(
-                            Button::new("selected-toggle-button")
-                                .label("Selected")
-                                .selected(selected),
-                        )
-                        .child(
-                            Button::new("compact-toggle-button")
-                                .label("Compact")
-                                .selected(compact),
-                        )
-                        .on_click(cx.listener(|view, selected: &Vec<usize>, _, cx| {
-                            view.disabled = selected.contains(&0);
-                            view.loading = selected.contains(&1);
-                            view.selected = selected.contains(&2);
-                            view.compact = selected.contains(&3);
-                            cx.notify();
-                        })),
-                ),
             )
             .child(
                 section("Dropdown Button")

crates/story/src/button_story.rs

@@ -25,7 +25,7 @@ impl super::Story for CalendarStory {
         "A calendar to select a date or date range."
     }
 
-    fn new_view(window: &mut Window, cx: &mut App) -> Entity<impl Render + Focusable> {
+    fn new_view(window: &mut Window, cx: &mut App) -> Entity<impl Render> {
         Self::view(window, cx)
     }
 }

crates/story/src/calendar_story.rs

@@ -68,7 +68,7 @@ impl super::Story for ChartStory {
         "Beautiful Charts & Graphs."
     }
 
-    fn new_view(window: &mut Window, cx: &mut App) -> Entity<impl Render + Focusable> {
+    fn new_view(window: &mut Window, cx: &mut App) -> Entity<impl Render> {
         Self::view(window, cx)
     }