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

Unify Story/StoryContainers (#17114)

Browse source 
Unify the various Story containers, and use gpui default colors over the
custom `StoryColors`.

Release Notes:

- N/A
This commit is contained in:
Nate Butler 2024-08-29 17:27:01 -04:00 • committed by GitHub
parent 449e744c14
commit 3d175f685f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 356 additions and 510 deletions
Download patch file Download diff file Expand all files Collapse all files

174
crates/storybook/src/stories/text.rs
View file

@ -15,98 +15,106 @@ impl TextStory {
impl Render for TextStory {
fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> impl IntoElement {
StoryContainer::new("Text Story", "crates/storybook/src/stories/text.rs")
.children(
vec![
StorySection::new()
.child(
StoryItem::new("Default", div().bg(gpui::blue()).child("Hello World!"))
Story::container()
.child(Story::title("Text"))
.children(vec![
StorySection::new()
.child(
StoryItem::new("Default", div().bg(gpui::blue()).child("Hello World!"))
.usage(indoc! {r##"
div()
.child("Hello World!")
"##
}),
)
.child(
StoryItem::new(
"Wrapping Text",
div().max_w_96().child(concat!(
"The quick brown fox jumps over the lazy dog. ",
"Meanwhile, the lazy dog decided it was time for a change. ",
"He started daily workout routines, ate healthier and became the fastest dog in town.",
)),
)
.description("Set a width or max-width to enable text wrapping.")
.usage(indoc! {r##"
div()
.child("Hello World!")
.max_w_96()
.child("Some text that you want to wrap.")
"##
}),
)
.child(
StoryItem::new("Wrapping Text",
div().max_w_96()
.child(
concat!(
"The quick brown fox jumps over the lazy dog. ",
)
.child(
StoryItem::new(
"tbd",
div().flex().w_96().child(
div().overflow_hidden().child(concat!(
"flex-row. width 96. overflow-hidden. The quick brown fox jumps over the lazy dog. ",
"Meanwhile, the lazy dog decided it was time for a change. ",
"He started daily workout routines, ate healthier and became the fastest dog in town.",
)
)
)),
),
),
)
.description("Set a width or max-width to enable text wrapping.")
.usage(indoc! {r##"
div()
.max_w_96()
.child("Some text that you want to wrap.")
"##
})
)
.child(
StoryItem::new("tbd",
div().flex().w_96().child(div().overflow_hidden().child(concat!(
"flex-row. width 96. overflow-hidden. The quick brown fox jumps over the lazy dog. ",
"Meanwhile, the lazy dog decided it was time for a change. ",
"He started daily workout routines, ate healthier and became the fastest dog in town.",
)))
)
)
.child(
StoryItem::new("Text in Horizontal Flex",
div().flex().w_96().bg(red()).child(concat!(
"flex-row. width 96. The quick brown fox jumps over the lazy dog. ",
"Meanwhile, the lazy dog decided it was time for a change. ",
"He started daily workout routines, ate healthier and became the fastest dog in town.",
))
)
.usage(indoc! {r##"
// NOTE: When rendering text in a horizontal flex container,
// Taffy will not pass width constraints down from the parent.
// To fix this, render text in a parent with overflow: hidden
.child(
StoryItem::new(
"Text in Horizontal Flex",
div().flex().w_96().bg(red()).child(concat!(
"flex-row. width 96. The quick brown fox jumps over the lazy dog. ",
"Meanwhile, the lazy dog decided it was time for a change. ",
"He started daily workout routines, ate healthier and became the fastest dog in town.",
)),
)
.usage(indoc! {r##"
// NOTE: When rendering text in a horizontal flex container,
// Taffy will not pass width constraints down from the parent.
// To fix this, render text in a parent with overflow: hidden
div()
.max_w_96()
.child("Some text that you want to wrap.")
"##
})
)
.child(
StoryItem::new("Interactive Text",
InteractiveText::new(
"interactive",
StyledText::new("Hello world, how is it going?").with_highlights(&cx.text_style(), [
(6..11, HighlightStyle {
background_color: Some(green()),
..Default::default()
}),
]),
)
.on_click(vec![2..4, 1..3, 7..9], |range_ix, _cx| {
println!("Clicked range {range_ix}");
})
div()
.max_w_96()
.child("Some text that you want to wrap.")
"##
}),
)
.usage(indoc! {r##"
InteractiveText::new(
"interactive",
StyledText::new("Hello world, how is it going?").with_highlights(&cx.text_style(), [
(6..11, HighlightStyle {
background_color: Some(green()),
..Default::default()
}),
]),
.child(
StoryItem::new(
"Interactive Text",
InteractiveText::new(
"interactive",
StyledText::new("Hello world, how is it going?").with_highlights(
&cx.text_style(),
[
(
6..11,
HighlightStyle {
background_color: Some(green()),
..Default::default()
},
),
],
),
)
.on_click(vec![2..4, 1..3, 7..9], |range_ix, _cx| {
println!("Clicked range {range_ix}");
}),
)
.on_click(vec![2..4, 1..3, 7..9], |range_ix, _cx| {
println!("Clicked range {range_ix}");
})
"##
})
)
]
).into_element()
.usage(indoc! {r##"
InteractiveText::new(
"interactive",
StyledText::new("Hello world, how is it going?").with_highlights(&cx.text_style(), [
(6..11, HighlightStyle {
background_color: Some(green()),
..Default::default()
}),
]),
)
.on_click(vec![2..4, 1..3, 7..9], |range_ix, _cx| {
println!("Clicked range {range_ix}");
})
"##
}),
),
])
.into_element()
}
}