Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: Update Label component (#24653)

Browse source 
- Standardize style methods
- Convert label story to a component preview
- update component preview styles  

Release Notes:

- N/A
This commit is contained in:
Nate Butler 2025-02-11 15:16:59 -05:00 • committed by GitHub
parent aab3e0495d
commit 2d71733490
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
27 changed files with 182 additions and 151 deletions
Download patch file Download diff file Expand all files Collapse all files

2
crates/collab_ui/src/channel_view.rs
View file

@ -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(

32
crates/component/src/component.rs
View file

@ -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(),
)

36
crates/component_preview/src/component_preview.rs
View file

@ -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()

6
crates/editor/src/items.rs
View file

@ -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(

6
crates/git_ui/src/git_panel.rs
View file

@ -1657,9 +1657,7 @@ 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
@ -1667,7 +1665,7 @@ impl GitPanel {
})
.child(
self.entry_label(display_name.clone(), label_color)
.when(status.is_deleted(), |this| this.strikethrough(true)),
.when(status.is_deleted(), |this| this.strikethrough()),
),
),
)

2
crates/image_viewer/src/image_viewer.rs
View file

@ -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()
}

2
crates/project_panel/src/project_panel.rs
View file

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

2
crates/repl/src/notebook/notebook_ui.rs
View file

@ -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()
}

2
crates/storybook/src/story_selector.rs
View file

@ -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(),

1
crates/ui/src/components/avatar/avatar.rs
View file

@ -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";

1
crates/ui/src/components/button/button.rs
View file

@ -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()

1
crates/ui/src/components/content_group.rs
View file

@ -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![

1
crates/ui/src/components/icon.rs
View file

@ -490,6 +490,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()

1
crates/ui/src/components/icon/decorated_icon.rs
View file

@ -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(

1
crates/ui/src/components/keybinding_hint.rs
View file

@ -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);

12
crates/ui/src/components/label/highlighted_label.rs
View file

@ -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
}

130
crates/ui/src/components/label/label.rs
View file

@ -1,8 +1,5 @@
#![allow(missing_docs)]
use gpui::{AnyElement, App, StyleRefinement, Window};
use crate::{prelude::*, LabelCommon, LabelLike, LabelSize, LineHeightStyle};
use crate::{prelude::*, LabelLike};
use gpui::StyleRefinement;
/// A struct representing a label element in the UI.
///
@ -56,6 +53,9 @@ impl Label {
}
}
// nate: If we are going to do this, we might as well just
// impl Styled for Label and not constrain styles
// Style methods.
impl Label {
fn style(&mut self) -> &mut StyleRefinement {
@ -82,6 +82,15 @@ impl LabelCommon for Label {
self
}
/// Sets the weight of the label using a [`FontWeight`].
///
/// # Examples
///
/// ```
/// use ui::prelude::*;
///
/// let my_label = Label::new("Hello, World!").weight(FontWeight::Bold);
/// ```
fn weight(mut self, weight: gpui::FontWeight) -> Self {
self.base = self.base.weight(weight);
self
@ -124,8 +133,8 @@ impl LabelCommon for Label {
///
/// let my_label = Label::new("Hello, World!").strikethrough(true);
/// ```
fn strikethrough(mut self, strikethrough: bool) -> Self {
self.base = self.base.strikethrough(strikethrough);
fn strikethrough(mut self) -> Self {
self.base = self.base.strikethrough();
self
}
@ -138,8 +147,8 @@ impl LabelCommon for Label {
///
/// let my_label = Label::new("Hello, World!").italic(true);
/// ```
fn italic(mut self, italic: bool) -> Self {
self.base = self.base.italic(italic);
fn italic(mut self) -> Self {
self.base = self.base.italic();
self
}
@ -157,8 +166,8 @@ impl LabelCommon for Label {
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
}
@ -185,52 +194,57 @@ impl RenderOnce for Label {
}
}
impl ComponentPreview for Label {
fn preview(_window: &mut Window, _cx: &App) -> AnyElement {
v_flex()
.gap_6()
.children(vec![
example_group_with_title(
"Sizes",
vec![
single_example("Default", Label::new("Default Label").into_any_element()),
single_example("Small", Label::new("Small Label").size(LabelSize::Small).into_any_element()),
single_example("Large", Label::new("Large Label").size(LabelSize::Large).into_any_element()),
],
),
example_group_with_title(
"Colors",
vec![
single_example("Default", Label::new("Default Color").into_any_element()),
single_example("Accent", Label::new("Accent Color").color(Color::Accent).into_any_element()),
single_example("Error", Label::new("Error Color").color(Color::Error).into_any_element()),
],
),
example_group_with_title(
"Styles",
vec![
single_example("Default", Label::new("Default Style").into_any_element()),
single_example("Bold", Label::new("Bold Style").weight(gpui::FontWeight::BOLD).into_any_element()),
single_example("Italic", Label::new("Italic Style").italic(true).into_any_element()),
single_example("Strikethrough", Label::new("Strikethrough Style").strikethrough(true).into_any_element()),
single_example("Underline", Label::new("Underline Style").underline(true).into_any_element()),
],
),
example_group_with_title(
"Line Height Styles",
vec![
single_example("Default", Label::new("Default Line Height").into_any_element()),
single_example("UI Label", Label::new("UI Label Line Height").line_height_style(LineHeightStyle::UiLabel).into_any_element()),
],
),
example_group_with_title(
"Special Cases",
vec![
single_example("Single Line", Label::new("Single\nLine\nText").single_line().into_any_element()),
single_example("Text Ellipsis", Label::new("This is a very long text that should be truncated with an ellipsis").text_ellipsis().into_any_element()),
],
),
])
.into_any_element()
mod label_preview {
use crate::prelude::*;
// View this component preview using `workspace: open component-preview`
impl ComponentPreview for Label {
fn preview(_window: &mut Window, _cx: &App) -> AnyElement {
v_flex()
.gap_6()
.children(vec![
example_group_with_title(
"Sizes",
vec![
single_example("Default", Label::new("Project Explorer").into_any_element()),
single_example("Small", Label::new("File: main.rs").size(LabelSize::Small).into_any_element()),
single_example("Large", Label::new("Welcome to Zed").size(LabelSize::Large).into_any_element()),
],
),
example_group_with_title(
"Colors",
vec![
single_example("Default", Label::new("Status: Ready").into_any_element()),
single_example("Accent", Label::new("New Update Available").color(Color::Accent).into_any_element()),
single_example("Error", Label::new("Build Failed").color(Color::Error).into_any_element()),
],
),
example_group_with_title(
"Styles",
vec![
single_example("Default", Label::new("Normal Text").into_any_element()),
single_example("Bold", Label::new("Important Notice").weight(gpui::FontWeight::BOLD).into_any_element()),
single_example("Italic", Label::new("Code Comment").italic().into_any_element()),
single_example("Strikethrough", Label::new("Deprecated Feature").strikethrough().into_any_element()),
single_example("Underline", Label::new("Clickable Link").underline().into_any_element()),
],
),
example_group_with_title(
"Line Height Styles",
vec![
single_example("Default", Label::new("Multi-line\nText\nExample").into_any_element()),
single_example("UI Label", Label::new("Compact\nUI\nLabel").line_height_style(LineHeightStyle::UiLabel).into_any_element()),
],
),
example_group_with_title(
"Special Cases",
vec![
single_example("Single Line", Label::new("Line 1\nLine 2\nLine 3").single_line().into_any_element()),
single_example("Text Ellipsis", div().max_w_24().child(Label::new("This is a very long file name that should be truncated: very_long_file_name_with_many_words.rs").text_ellipsis()).into_any_element()),
],
),
])
.into_any_element()
}
}
}

41
crates/ui/src/components/label/label_like.rs
View file

@ -1,23 +1,29 @@
#![allow(missing_docs)]
use gpui::{relative, AnyElement, FontWeight, StyleRefinement, Styled, UnderlineStyle};
use crate::prelude::*;
use gpui::{FontWeight, StyleRefinement, UnderlineStyle};
use settings::Settings;
use smallvec::SmallVec;
use theme::ThemeSettings;
use crate::prelude::*;
/// Sets the size of a label
#[derive(Debug, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy, Default)]
pub enum LabelSize {
/// The default size of a label.
#[default]
Default,
/// The large size of a label.
Large,
/// The small size of a label.
Small,
/// The extra small size of a label.
XSmall,
}
/// Sets the line height of a label
#[derive(Default, PartialEq, Copy, Clone)]
pub enum LineHeightStyle {
/// The default line height style of a label,
/// set by either the UI's default line height,
/// or the developer's default buffer line height.
#[default]
TextLabel,
/// Sets the line height to 1.
@ -39,13 +45,13 @@ pub trait LabelCommon {
fn color(self, color: Color) -> Self;
/// Sets the strikethrough property of the label.
fn strikethrough(self, strikethrough: bool) -> Self;
fn strikethrough(self) -> Self;
/// Sets the italic property of the label.
fn italic(self, italic: bool) -> Self;
fn italic(self) -> Self;
/// Sets the underline property of the label
fn underline(self, underline: bool) -> Self;
fn underline(self) -> Self;
/// Sets the alpha property of the label, overwriting the alpha value of the color.
fn alpha(self, alpha: f32) -> Self;
@ -60,6 +66,11 @@ pub trait LabelCommon {
fn buffer_font(self, cx: &App) -> Self;
}
/// A label-like element that can be used to create a custom label when
/// prebuilt labels are not sufficient. Use this sparingly, as it is
/// unconstrained and may make the UI feel less consistent.
///
/// This is also used to build the prebuilt labels.
#[derive(IntoElement)]
pub struct LabelLike {
pub(super) base: Div,
@ -83,6 +94,8 @@ impl Default for LabelLike {
}
impl LabelLike {
/// Creates a new, fully custom label.
/// Prefer using [`Label`] or [`HighlightedLabel`] where possible.
pub fn new() -> Self {
Self {
base: div(),
@ -133,18 +146,18 @@ impl LabelCommon for LabelLike {
self
}
fn strikethrough(mut self, strikethrough: bool) -> Self {
self.strikethrough = strikethrough;
fn strikethrough(mut self) -> Self {
self.strikethrough = true;
self
}
fn italic(mut self, italic: bool) -> Self {
self.italic = italic;
fn italic(mut self) -> Self {
self.italic = true;
self
}
fn underline(mut self, underline: bool) -> Self {
self.underline = underline;
fn underline(mut self) -> Self {
self.underline = true;
self
}

2
crates/ui/src/components/stories.rs
View file

@ -8,7 +8,6 @@ mod disclosure;
mod icon;
mod icon_button;
mod keybinding;
mod label;
mod list;
mod list_header;
mod list_item;
@ -23,7 +22,6 @@ pub use disclosure::*;
pub use icon::*;
pub use icon_button::*;
pub use keybinding::*;
pub use label::*;
pub use list::*;
pub use list_header::*;
pub use list_item::*;

38
crates/ui/src/components/stories/label.rs
View file

@ -1,38 +0,0 @@
use std::time::Duration;
use crate::{prelude::*, HighlightedLabel, Label};
use gpui::{pulsating_between, Animation, AnimationExt, Render};
use story::Story;
pub struct LabelStory;
impl Render for LabelStory {
fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
Story::container()
.child(Story::title_for::<Label>())
.child(Story::label("Default"))
.child(Label::new("Hello, world!"))
.child(Story::label("Highlighted"))
.child(HighlightedLabel::new(
"Hello, world!",
vec![0, 1, 2, 7, 8, 12],
))
.child(HighlightedLabel::new(
"Héllo, world!",
vec![0, 1, 3, 8, 9, 13],
))
.child(Story::label("Highlighted with `color`"))
.child(
HighlightedLabel::new("Hello, world!", vec![0, 1, 2, 7, 8, 12]).color(Color::Error),
)
.child(
Label::new("This text is pulsating").with_animation(
"pulsating-label",
Animation::new(Duration::from_secs(2))
.repeat()
.with_easing(pulsating_between(0.4, 0.8)),
|label, delta| label.alpha(delta),
),
)
}
}

1
crates/ui/src/components/tab.rs
View file

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

1
crates/ui/src/components/table.rs
View file

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

3
crates/ui/src/components/toggle.rs
View file

@ -508,6 +508,7 @@ impl RenderOnce for SwitchWithLabel {
}
}
// View this component preview using `workspace: open component-preview`
impl ComponentPreview for Checkbox {
fn preview(_window: &mut Window, _cx: &App) -> AnyElement {
v_flex()
@ -592,6 +593,7 @@ impl ComponentPreview for Checkbox {
}
}
// View this component preview using `workspace: open component-preview`
impl ComponentPreview for Switch {
fn preview(_window: &mut Window, _cx: &App) -> AnyElement {
v_flex()
@ -654,6 +656,7 @@ impl ComponentPreview for Switch {
}
}
// View this component preview using `workspace: open component-preview`
impl ComponentPreview for CheckboxWithLabel {
fn preview(_window: &mut Window, _cx: &App) -> AnyElement {
v_flex()

1
crates/ui/src/components/tooltip.rs
View file

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

5
crates/ui/src/prelude.rs
View file

@ -2,8 +2,9 @@
pub use gpui::prelude::*;
pub use gpui::{
div, px, relative, rems, AbsoluteLength, App, Context, DefiniteLength, Div, Element, ElementId,
InteractiveElement, ParentElement, Pixels, Rems, RenderOnce, SharedString, Styled, Window,
div, px, relative, rems, AbsoluteLength, AnyElement, App, Context, DefiniteLength, Div,
Element, ElementId, InteractiveElement, ParentElement, Pixels, Rems, RenderOnce, SharedString,
Styled, Window,
};
pub use component::{example_group, example_group_with_title, single_example, ComponentPreview};

1
crates/ui/src/styles/typography.rs
View file

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

2
crates/welcome/src/welcome.rs
View file

@ -104,7 +104,7 @@ impl Render for WelcomePage {
h_flex().w_full().justify_center().child(
Label::new("The editor for what's next")
.color(Color::Muted)
.italic(true),
.italic(),
),
),
)