ui: Update Label component (#24653)
- 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
GitHub
parent
aab3e0495d
commit
2d71733490
27 changed files with 182 additions and 151 deletions
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue