ui: Update Label component

crates/collab_ui/src/channel_view.rs

@@ -461,7 +461,7 @@ impl Item for ChannelView {
             .child(
                 Label::new(channel_name)
                     .color(params.text_color())
-                    .italic(params.preview),
+                    .when(params.preview, |this| this.italic()),
             )
             .when_some(status, |element, status| {
                 element.child(

crates/component/src/component.rs

@@ -1,7 +1,7 @@
 use std::ops::{Deref, DerefMut};
 
 use collections::HashMap;
-use gpui::{div, prelude::*, AnyElement, App, IntoElement, RenderOnce, SharedString, Window};
+use gpui::{div, prelude::*, px, AnyElement, App, IntoElement, RenderOnce, SharedString, Window};
 use linkme::distributed_slice;
 use once_cell::sync::Lazy;
 use parking_lot::RwLock;
@@ -201,8 +201,9 @@ impl RenderOnce for ComponentExample {
         };
 
         base.gap_1()
-            .text_xs()
-            .text_color(cx.theme().colors().text_muted)
+            .p_2()
+            .text_sm()
+            .text_color(cx.theme().colors().text)
             .when(self.grow, |this| this.flex_1())
             .child(self.element)
             .child(self.variant_name)
@@ -243,13 +244,34 @@ impl RenderOnce for ComponentExampleGroup {
             .text_sm()
             .text_color(cx.theme().colors().text_muted)
             .when(self.grow, |this| this.w_full().flex_1())
-            .when_some(self.title, |this, title| this.gap_4().child(title))
+            .when_some(self.title, |this, title| {
+                this.gap_4().pb_5().child(
+                    div()
+                        .flex()
+                        .items_center()
+                        .gap_3()
+                        .child(div().h_px().w_4().bg(cx.theme().colors().border_variant))
+                        .child(
+                            div()
+                                .flex_none()
+                                .text_size(px(10.))
+                                .child(title.to_uppercase()),
+                        )
+                        .child(
+                            div()
+                                .h_px()
+                                .w_full()
+                                .flex_1()
+                                .bg(cx.theme().colors().border),
+                        ),
+                )
+            })
             .child(
                 div()
                     .flex()
                     .items_start()
                     .w_full()
-                    .gap_6()
+                    .gap_8()
                     .children(self.examples)
                     .into_any_element(),
             )

crates/component_preview/src/component_preview.rs

@@ -41,11 +41,21 @@ impl ComponentPreview {
         let components = components().all_sorted();
         let sorted_components = components.clone();
 
-        v_flex().gap_px().p_1().children(
-            sorted_components
-                .into_iter()
-                .map(|component| self.render_sidebar_entry(&component, _cx)),
-        )
+        v_flex()
+            .max_w_48()
+            .gap_px()
+            .p_1()
+            .children(
+                sorted_components
+                    .into_iter()
+                    .map(|component| self.render_sidebar_entry(&component, _cx)),
+            )
+            .child(
+                Label::new("These will be clickable once the layout is moved to a gpui::List.")
+                    .color(Color::Muted)
+                    .size(LabelSize::XSmall)
+                    .italic(),
+            )
     }
 
     fn render_sidebar_entry(
@@ -56,7 +66,8 @@ impl ComponentPreview {
         h_flex()
             .w_40()
             .px_1p5()
-            .py_1()
+            .py_0p5()
+            .text_sm()
             .child(component.name().clone())
     }
 
@@ -71,18 +82,19 @@ impl ComponentPreview {
 
         let description = component.description();
 
-        v_group()
+        v_flex()
+            .border_b_1()
+            .border_color(cx.theme().colors().border)
             .w_full()
-            .gap_4()
-            .p_8()
-            .rounded_md()
+            .gap_3()
+            .py_6()
             .child(
                 v_flex()
                     .gap_1()
                     .child(
                         h_flex()
                             .gap_1()
-                            .text_xl()
+                            .text_2xl()
                             .child(div().child(name))
                             .when_some(scope, |this, scope| {
                                 this.child(div().opacity(0.5).child(format!("({})", scope)))
@@ -110,7 +122,7 @@ impl ComponentPreview {
             .size_full()
             .overflow_y_scroll()
             .p_4()
-            .gap_2()
+            .gap_4()
             .children(
                 components()
                     .all_previews_sorted()

crates/editor/src/items.rs

@@ -36,7 +36,7 @@ use std::{
 };
 use text::{BufferId, Selection};
 use theme::{Theme, ThemeSettings};
-use ui::{h_flex, prelude::*, IconDecorationKind, Label};
+use ui::{prelude::*, IconDecorationKind};
 use util::{paths::PathExt, ResultExt, TryFutureExt};
 use workspace::item::{Dedup, ItemSettings, SerializableItem, TabContentParams};
 use workspace::{
@@ -679,8 +679,8 @@ impl Item for Editor {
             .child(
                 Label::new(self.title(cx).to_string())
                     .color(label_color)
-                    .italic(params.preview)
-                    .strikethrough(was_deleted),
+                    .when(params.preview, |this| this.italic())
+                    .when(was_deleted, |this| this.strikethrough()),
             )
             .when_some(description, |this, description| {
                 this.child(

crates/git_ui/src/git_panel.rs

@@ -1657,17 +1657,15 @@ impl GitPanel {
                                 if !parent_str.is_empty() {
                                     this.child(
                                         self.entry_label(format!("{}/", parent_str), path_color)
-                                            .when(status.is_deleted(), |this| {
-                                                this.strikethrough(true)
-                                            }),
+                                            .when(status.is_deleted(), |this| this.strikethrough()),
                                     )
                                 } else {
                                     this
                                 }
                             })
                             .child(
                                 self.entry_label(display_name.clone(), label_color)
-                                    .when(status.is_deleted(), |this| this.strikethrough(true)),
+                                    .when(status.is_deleted(), |this| this.strikethrough()),
                             ),
                     ),
             )

crates/image_viewer/src/image_viewer.rs

@@ -131,7 +131,7 @@ impl Item for ImageView {
         Label::new(title)
             .single_line()
             .color(label_color)
-            .italic(params.preview)
+            .when(params.preview, |this| this.italic())
             .into_any_element()
     }
 

crates/project_panel/src/project_panel.rs

@@ -3994,7 +3994,7 @@ impl ProjectPanel {
                                                     .when(
                                                         index == active_index
                                                             && (is_active || is_marked),
-                                                        |this| this.underline(true),
+                                                        |this| this.underline(),
                                                     ),
                                             );
 

crates/repl/src/notebook/notebook_ui.rs

@@ -738,7 +738,7 @@ impl Item for NotebookEditor {
         Label::new(title)
             .single_line()
             .color(params.text_color())
-            .italic(params.preview)
+            .when(params.preview, |this| this.italic())
             .into_any_element()
     }
 

crates/storybook/src/story_selector.rs

@@ -25,7 +25,6 @@ pub enum ComponentStory {
     Icon,
     IconButton,
     Keybinding,
-    Label,
     List,
     ListHeader,
     ListItem,
@@ -61,7 +60,6 @@ impl ComponentStory {
             Self::Icon => cx.new(|_| ui::IconStory).into(),
             Self::IconButton => cx.new(|_| ui::IconButtonStory).into(),
             Self::Keybinding => cx.new(|_| ui::KeybindingStory).into(),
-            Self::Label => cx.new(|_| ui::LabelStory).into(),
             Self::List => cx.new(|_| ui::ListStory).into(),
             Self::ListHeader => cx.new(|_| ui::ListHeaderStory).into(),
             Self::ListItem => cx.new(|_| ui::ListItemStory).into(),

crates/ui/src/components/avatar/avatar.rs

@@ -97,6 +97,7 @@ impl RenderOnce for Avatar {
     }
 }
 
+// View this component preview using `workspace: open component-preview`
 impl ComponentPreview for Avatar {
     fn preview(_window: &mut Window, _cx: &App) -> AnyElement {
         let example_avatar = "https://avatars.githubusercontent.com/u/1714999?v=4";

crates/ui/src/components/button/button.rs

@@ -456,6 +456,7 @@ impl RenderOnce for Button {
     }
 }
 
+// View this component preview using `workspace: open component-preview`
 impl ComponentPreview for Button {
     fn preview(_window: &mut Window, _cx: &App) -> AnyElement {
         v_flex()

crates/ui/src/components/content_group.rs

@@ -88,6 +88,7 @@ impl RenderOnce for ContentGroup {
     }
 }
 
+// View this component preview using `workspace: open component-preview`
 impl ComponentPreview for ContentGroup {
     fn preview(_window: &mut Window, _cx: &App) -> AnyElement {
         example_group(vec![

crates/ui/src/components/icon.rs

@@ -488,6 +488,7 @@ impl RenderOnce for IconWithIndicator {
     }
 }
 
+// View this component preview using `workspace: open component-preview`
 impl ComponentPreview for Icon {
     fn preview(_window: &mut Window, _cx: &App) -> AnyElement {
         v_flex()

crates/ui/src/components/icon/decorated_icon.rs

@@ -24,6 +24,7 @@ impl RenderOnce for DecoratedIcon {
     }
 }
 
+// View this component preview using `workspace: open component-preview`
 impl ComponentPreview for DecoratedIcon {
     fn preview(_window: &mut Window, cx: &App) -> AnyElement {
         let decoration_x = IconDecoration::new(

crates/ui/src/components/keybinding_hint.rs

@@ -205,6 +205,7 @@ impl RenderOnce for KeybindingHint {
     }
 }
 
+// View this component preview using `workspace: open component-preview`
 impl ComponentPreview for KeybindingHint {
     fn preview(window: &mut Window, _cx: &App) -> AnyElement {
         let enter_fallback = gpui::KeyBinding::new("enter", menu::Confirm, None);

crates/ui/src/components/label/highlighted_label.rs

@@ -46,13 +46,13 @@ impl LabelCommon for HighlightedLabel {
         self
     }
 
-    fn strikethrough(mut self, strikethrough: bool) -> Self {
-        self.base = self.base.strikethrough(strikethrough);
+    fn strikethrough(mut self) -> Self {
+        self.base = self.base.strikethrough();
         self
     }
 
-    fn italic(mut self, italic: bool) -> Self {
-        self.base = self.base.italic(italic);
+    fn italic(mut self) -> Self {
+        self.base = self.base.italic();
         self
     }
 
@@ -61,8 +61,8 @@ impl LabelCommon for HighlightedLabel {
         self
     }
 
-    fn underline(mut self, underline: bool) -> Self {
-        self.base = self.base.underline(underline);
+    fn underline(mut self) -> Self {
+        self.base = self.base.underline();
         self
     }