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

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(