component preview: Add separators between sections in sidebar (#34701)

Small improvement for navigating inside the component preview.

Release Notes:

- N/A
This commit is contained in:
Danilo Leal 2025-07-18 10:24:57 -03:00 committed by GitHub
parent cfe1adc792
commit 1070de47ec
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 11 additions and 19 deletions

View file

@ -118,8 +118,8 @@ impl RenderOnce for ComponentExampleGroup {
.flex()
.items_center()
.gap_3()
.pb_1()
.child(div().h_px().w_4().bg(cx.theme().colors().border))
.mt_4()
.mb_1()
.child(
div()
.flex_none()

View file

@ -369,7 +369,6 @@ impl ComponentPreview {
// Always show all components first
entries.push(PreviewEntry::AllComponents);
entries.push(PreviewEntry::ActiveThread);
entries.push(PreviewEntry::Separator);
let mut scopes: Vec<_> = scope_groups
.keys()
@ -382,7 +381,9 @@ impl ComponentPreview {
for scope in scopes {
if let Some(components) = scope_groups.remove(&scope) {
if !components.is_empty() {
entries.push(PreviewEntry::Separator);
entries.push(PreviewEntry::SectionHeader(scope.to_string().into()));
let mut sorted_components = components;
sorted_components.sort_by_key(|(component, _)| component.sort_name());
@ -515,16 +516,12 @@ impl ComponentPreview {
Vec::new()
};
if valid_positions.is_empty() {
Label::new(name.clone())
.color(Color::Default)
.into_any_element()
Label::new(name.clone()).into_any_element()
} else {
HighlightedLabel::new(name.clone(), valid_positions).into_any_element()
}
} else {
Label::new(name.clone())
.color(Color::Default)
.into_any_element()
Label::new(name.clone()).into_any_element()
})
.selectable(true)
.toggle_state(selected)
@ -542,7 +539,7 @@ impl ComponentPreview {
let selected = self.active_page == PreviewPage::AllComponents;
ListItem::new(ix)
.child(Label::new("All Components").color(Color::Default))
.child(Label::new("All Components"))
.selectable(true)
.toggle_state(selected)
.inset(true)
@ -555,7 +552,7 @@ impl ComponentPreview {
let selected = self.active_page == PreviewPage::ActiveThread;
ListItem::new(ix)
.child(Label::new("Active Thread").color(Color::Default))
.child(Label::new("Active Thread"))
.selectable(true)
.toggle_state(selected)
.inset(true)
@ -565,12 +562,8 @@ impl ComponentPreview {
.into_any_element()
}
PreviewEntry::Separator => ListItem::new(ix)
.child(
h_flex()
.occlude()
.pt_3()
.child(Divider::horizontal_dashed()),
)
.disabled(true)
.child(div().w_full().py_2().child(Divider::horizontal()))
.into_any_element(),
}
}
@ -585,7 +578,6 @@ impl ComponentPreview {
h_flex()
.w_full()
.h_10()
.items_center()
.child(Headline::new(title).size(HeadlineSize::XSmall))
.child(Divider::horizontal())
}
@ -798,7 +790,7 @@ impl Render for ComponentPreview {
)
.track_scroll(self.nav_scroll_handle.clone())
.p_2p5()
.w(px(240.))
.w(px(229.))
.h_full()
.flex_1(),
)