From 2efdd35808647477cefabd5c0c45647b22cfc237 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Mon, 9 Feb 2026 21:47:57 -0300 Subject: [PATCH] ui: Improve icon preview visualization (#48834) 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 --- crates/ui/src/components/icon.rs | 82 +++++++++++--------------------- 1 file changed, 28 insertions(+), 54 deletions(-) diff --git a/crates/ui/src/components/icon.rs b/crates/ui/src/components/icon.rs index 9d2c7ae3b515744125879f4a2c0e0d3e9a4fb841..a0e880af5e7029cb08670d151647489db1d05f4f 100644 --- a/crates/ui/src/components/icon.rs +++ b/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(::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(::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(), )