ui: Improve icon preview visualization (#48834)

Danilo Leal created 2 months ago

Just improving the visualization for all icons in the component preview;
I think this will make it easier to quickly skim for an existing icons.

Release Notes:

- N/A

Change summary

crates/ui/src/components/icon.rs | 82 +++++++++++----------------------
1 file changed, 28 insertions(+), 54 deletions(-)

Detailed changes

crates/ui/src/components/icon.rs

@@ -304,64 +304,38 @@ impl Component for Icon {
                             "XSmall, Small, Default, Large",
                             h_flex()
                                 .gap_1()
-                                .child(
-                                    Icon::new(IconName::Star)
-                                        .size(IconSize::XSmall)
-                                        .into_any_element(),
-                                )
-                                .child(
-                                    Icon::new(IconName::Star)
-                                        .size(IconSize::Small)
-                                        .into_any_element(),
-                                )
-                                .child(Icon::new(IconName::Star).into_any_element())
-                                .child(
-                                    Icon::new(IconName::Star)
-                                        .size(IconSize::XLarge)
-                                        .into_any_element(),
-                                )
+                                .child(Icon::new(IconName::Star).size(IconSize::XSmall))
+                                .child(Icon::new(IconName::Star).size(IconSize::Small))
+                                .child(Icon::new(IconName::Star))
+                                .child(Icon::new(IconName::Star).size(IconSize::XLarge))
                                 .into_any_element(),
                         )],
                     ),
-                    example_group_with_title(
-                        "Colors",
-                        vec![single_example(
-                            "Default & Custom",
-                            h_flex()
-                                .gap_1()
-                                .child(Icon::new(IconName::Star).into_any_element())
-                                .child(
-                                    Icon::new(IconName::Star)
-                                        .color(Color::Error)
-                                        .into_any_element(),
-                                )
-                                .into_any_element(),
-                        )],
-                    ),
-                    example_group_with_title(
+                    example_group(vec![single_example(
                         "All Icons",
-                        vec![single_example(
-                            "All Icons",
-                            h_flex()
-                                .image_cache(gpui::retain_all("all icons"))
-                                .flex_wrap()
-                                .gap_2()
-                                .children(<IconName as strum::IntoEnumIterator>::iter().map(
-                                    |icon_name| {
-                                        h_flex()
-                                            .p_1()
-                                            .gap_1()
-                                            .border_1()
-                                            .border_color(cx.theme().colors().border_variant)
-                                            .bg(cx.theme().colors().element_disabled)
-                                            .rounded_sm()
-                                            .child(Icon::new(icon_name).into_any_element())
-                                            .child(SharedString::new_static(icon_name.into()))
-                                    },
-                                ))
-                                .into_any_element(),
-                        )],
-                    ),
+                        h_flex()
+                            .image_cache(gpui::retain_all("all icons"))
+                            .flex_wrap()
+                            .gap_2()
+                            .children(<IconName as strum::IntoEnumIterator>::iter().map(
+                                |icon_name: IconName| {
+                                    let name: SharedString = format!("{icon_name:?}").into();
+                                    v_flex()
+                                        .min_w_0()
+                                        .w_24()
+                                        .p_1p5()
+                                        .gap_2()
+                                        .border_1()
+                                        .border_color(cx.theme().colors().border_variant)
+                                        .bg(cx.theme().colors().element_disabled)
+                                        .rounded_sm()
+                                        .items_center()
+                                        .child(Icon::new(icon_name))
+                                        .child(Label::new(name).size(LabelSize::XSmall).truncate())
+                                },
+                            ))
+                            .into_any_element(),
+                    )]),
                 ])
                 .into_any_element(),
         )