Merge Component
and ComponentPreview
trait (#28365)
- Merge `Component` and `ComponentPreview` trait - Adds a number of component previews - Removes a number of stories Release Notes: - N/A
This commit is contained in:
parent
b15ee1b1cc
commit
c05bf096f8
52 changed files with 3276 additions and 1848 deletions
|
@ -4,7 +4,7 @@ use gpui::{FontWeight, HighlightStyle, StyledText};
|
|||
|
||||
use crate::{LabelCommon, LabelLike, LabelSize, LineHeightStyle, prelude::*};
|
||||
|
||||
#[derive(IntoElement)]
|
||||
#[derive(IntoElement, RegisterComponent)]
|
||||
pub struct HighlightedLabel {
|
||||
base: LabelLike,
|
||||
label: SharedString,
|
||||
|
@ -129,3 +129,99 @@ impl RenderOnce for HighlightedLabel {
|
|||
.child(StyledText::new(self.label).with_default_highlights(&text_style, highlights))
|
||||
}
|
||||
}
|
||||
|
||||
impl Component for HighlightedLabel {
|
||||
fn scope() -> ComponentScope {
|
||||
ComponentScope::Typography
|
||||
}
|
||||
|
||||
fn name() -> &'static str {
|
||||
"HighlightedLabel"
|
||||
}
|
||||
|
||||
fn description() -> Option<&'static str> {
|
||||
Some("A label with highlighted characters based on specified indices.")
|
||||
}
|
||||
|
||||
fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
|
||||
Some(
|
||||
v_flex()
|
||||
.gap_6()
|
||||
.children(vec![
|
||||
example_group_with_title(
|
||||
"Basic Usage",
|
||||
vec![
|
||||
single_example(
|
||||
"Default",
|
||||
HighlightedLabel::new("Highlighted Text", vec![0, 1, 2, 3]).into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Custom Color",
|
||||
HighlightedLabel::new("Colored Highlight", vec![0, 1, 7, 8, 9])
|
||||
.color(Color::Accent)
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"Styles",
|
||||
vec![
|
||||
single_example(
|
||||
"Bold",
|
||||
HighlightedLabel::new("Bold Highlight", vec![0, 1, 2, 3])
|
||||
.weight(FontWeight::BOLD)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Italic",
|
||||
HighlightedLabel::new("Italic Highlight", vec![0, 1, 6, 7, 8])
|
||||
.italic()
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Underline",
|
||||
HighlightedLabel::new("Underlined Highlight", vec![0, 1, 10, 11, 12])
|
||||
.underline()
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"Sizes",
|
||||
vec![
|
||||
single_example(
|
||||
"Small",
|
||||
HighlightedLabel::new("Small Highlight", vec![0, 1, 5, 6, 7])
|
||||
.size(LabelSize::Small)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Large",
|
||||
HighlightedLabel::new("Large Highlight", vec![0, 1, 5, 6, 7])
|
||||
.size(LabelSize::Large)
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"Special Cases",
|
||||
vec![
|
||||
single_example(
|
||||
"Single Line",
|
||||
HighlightedLabel::new("Single Line Highlight\nWith Newline", vec![0, 1, 7, 8, 9])
|
||||
.single_line()
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Truncate",
|
||||
HighlightedLabel::new("This is a very long text that should be truncated with highlights", vec![0, 1, 2, 3, 4, 5])
|
||||
.truncate()
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
])
|
||||
.into_any_element()
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -29,7 +29,7 @@ use gpui::StyleRefinement;
|
|||
///
|
||||
/// let my_label = Label::new("Deleted").strikethrough(true);
|
||||
/// ```
|
||||
#[derive(IntoElement, IntoComponent)]
|
||||
#[derive(IntoElement, RegisterComponent)]
|
||||
pub struct Label {
|
||||
base: LabelLike,
|
||||
label: SharedString,
|
||||
|
@ -58,9 +58,6 @@ 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 {
|
||||
|
@ -200,12 +197,17 @@ impl RenderOnce for Label {
|
|||
}
|
||||
}
|
||||
|
||||
mod label_preview {
|
||||
use crate::prelude::*;
|
||||
impl Component for Label {
|
||||
fn scope() -> ComponentScope {
|
||||
ComponentScope::None
|
||||
}
|
||||
|
||||
// View this component preview using `workspace: open component-preview`
|
||||
impl ComponentPreview for Label {
|
||||
fn preview(_window: &mut Window, _cx: &mut App) -> AnyElement {
|
||||
fn description() -> Option<&'static str> {
|
||||
Some("A text label component that supports various styles, sizes, and formatting options.")
|
||||
}
|
||||
|
||||
fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
|
||||
Some(
|
||||
v_flex()
|
||||
.gap_6()
|
||||
.children(vec![
|
||||
|
@ -251,6 +253,6 @@ mod label_preview {
|
|||
),
|
||||
])
|
||||
.into_any_element()
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -232,3 +232,70 @@ impl RenderOnce for LabelLike {
|
|||
.children(self.children)
|
||||
}
|
||||
}
|
||||
|
||||
impl Component for LabelLike {
|
||||
fn scope() -> ComponentScope {
|
||||
ComponentScope::Typography
|
||||
}
|
||||
|
||||
fn name() -> &'static str {
|
||||
"LabelLike"
|
||||
}
|
||||
|
||||
fn description() -> Option<&'static str> {
|
||||
Some(
|
||||
"A flexible, customizable label-like component that serves as a base for other label types.",
|
||||
)
|
||||
}
|
||||
|
||||
fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
|
||||
Some(
|
||||
v_flex()
|
||||
.gap_6()
|
||||
.children(vec![
|
||||
example_group_with_title(
|
||||
"Sizes",
|
||||
vec![
|
||||
single_example("Default", LabelLike::new().child("Default size").into_any_element()),
|
||||
single_example("Large", LabelLike::new().size(LabelSize::Large).child("Large size").into_any_element()),
|
||||
single_example("Small", LabelLike::new().size(LabelSize::Small).child("Small size").into_any_element()),
|
||||
single_example("XSmall", LabelLike::new().size(LabelSize::XSmall).child("Extra small size").into_any_element()),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"Styles",
|
||||
vec![
|
||||
single_example("Bold", LabelLike::new().weight(FontWeight::BOLD).child("Bold text").into_any_element()),
|
||||
single_example("Italic", LabelLike::new().italic().child("Italic text").into_any_element()),
|
||||
single_example("Underline", LabelLike::new().underline().child("Underlined text").into_any_element()),
|
||||
single_example("Strikethrough", LabelLike::new().strikethrough().child("Strikethrough text").into_any_element()),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"Colors",
|
||||
vec![
|
||||
single_example("Default", LabelLike::new().child("Default color").into_any_element()),
|
||||
single_example("Accent", LabelLike::new().color(Color::Accent).child("Accent color").into_any_element()),
|
||||
single_example("Error", LabelLike::new().color(Color::Error).child("Error color").into_any_element()),
|
||||
single_example("Alpha", LabelLike::new().alpha(0.5).child("50% opacity").into_any_element()),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"Line Height",
|
||||
vec![
|
||||
single_example("Default", LabelLike::new().child("Default line height\nMulti-line text").into_any_element()),
|
||||
single_example("UI Label", LabelLike::new().line_height_style(LineHeightStyle::UiLabel).child("UI label line height\nMulti-line text").into_any_element()),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"Special Cases",
|
||||
vec![
|
||||
single_example("Single Line", LabelLike::new().single_line().child("This is a very long text that should be displayed in a single line").into_any_element()),
|
||||
single_example("Truncate", LabelLike::new().truncate().child("This is a very long text that should be truncated with an ellipsis").into_any_element()),
|
||||
],
|
||||
),
|
||||
])
|
||||
.into_any_element()
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue