Cargo.lock 🔗
@@ -9211,6 +9211,7 @@ name = "story"
version = "0.1.0"
dependencies = [
"gpui2",
+ "itertools 0.10.5",
"smallvec",
]
Continue styling new story components
Nate Butler created
Change summary
Cargo.lock | 1
crates/story/Cargo.toml | 1
crates/story/src/story.rs | 34 +++++++++----
crates/storybook2/src/stories/text.rs | 72 ++++++++++++++++++++++------
4 files changed, 83 insertions(+), 25 deletions(-)
Detailed changes
crates/story/Cargo.toml 🔗
@@ -9,3 +9,4 @@ publish = false
[dependencies]
gpui = { package = "gpui2", path = "../gpui2" }
smallvec.workspace = true
+itertools = {package = "itertools", version = "0.10"}
crates/story/src/story.rs 🔗
@@ -1,5 +1,7 @@
-use gpui::{div, hsla, AnyElement, Div, ElementId, Hsla, SharedString, Stateful, WindowContext};
-use gpui::{prelude::*, px};
+use gpui::{
+ div, hsla, prelude::*, px, rems, AnyElement, Div, ElementId, Hsla, SharedString, WindowContext,
+};
+use itertools::Itertools;
use smallvec::SmallVec;
use std::path::PathBuf;
@@ -37,7 +39,7 @@ impl StoryColor {
border: hsla(216. / 360., 11. / 100., 91. / 100., 1.),
background: hsla(0. / 360., 0. / 100., 100. / 100., 1.),
card_background: hsla(0. / 360., 0. / 100., 96. / 100., 1.),
- divider: hsla(216. / 360., 11. / 100., 91. / 100., 1.),
+ divider: hsla(216. / 360., 11. / 100., 86. / 100., 1.),
link: hsla(206. / 360., 100. / 100., 50. / 100., 1.),
}
}
@@ -112,7 +114,11 @@ impl Story {
}
pub fn section() -> Div {
- div().mt_4().mb_2()
+ div()
+ .p_4()
+ .m_4()
+ .border()
+ .border_color(story_color().border)
}
pub fn section_title() -> Div {
@@ -127,12 +133,12 @@ impl Story {
div()
.size_full()
.p_2()
+ .max_w(rems(36.))
.bg(gpui::black())
- .border()
- .border_color(story_color().border)
.rounded_md()
.text_sm()
.text_color(gpui::white())
+ .overflow_hidden()
.child(code.into())
}
@@ -206,20 +212,23 @@ impl RenderOnce for StoryItem {
div()
.my_2()
.flex()
+ .gap_4()
.w_full()
.child(
Story::v_stack()
.px_2()
- .flex_none()
.w_1_2()
.min_h_px()
.child(Story::label(self.label))
.child(
div()
- .rounded_sm()
+ .rounded_md()
.bg(story_color().card_background)
.border()
.border_color(story_color().border)
+ .py_1()
+ .px_2()
+ .overflow_hidden()
.child(self.item),
)
.when_some(self.description, |this, description| {
@@ -233,7 +242,7 @@ impl RenderOnce for StoryItem {
.w_1_2()
.min_h_px()
.when_some(self.usage, |this, usage| {
- this.child(Story::label("Usage"))
+ this.child(Story::label("Example Usage"))
.child(Story::code_block(usage))
}),
)
@@ -264,6 +273,11 @@ impl RenderOnce for StorySection {
type Rendered = Div;
fn render(self, _cx: &mut WindowContext) -> Self::Rendered {
+ let children: SmallVec<[AnyElement; 2]> = SmallVec::from_iter(Itertools::intersperse_with(
+ self.children.into_iter(),
+ || Story::divider().into_any_element(),
+ ));
+
Story::section()
// Section title
.py_2()
@@ -271,7 +285,7 @@ impl RenderOnce for StorySection {
.when_some(self.description.clone(), |section, description| {
section.child(Story::description(description))
})
- .child(div().flex().flex_col().gap_2().children(self.children))
+ .child(div().flex().flex_col().gap_2().children(children))
.child(Story::divider())
}
}
crates/storybook2/src/stories/text.rs 🔗
@@ -1,4 +1,4 @@
-use gpui::{div, Div, ParentElement, Render, Styled, View, VisualContext, WindowContext};
+use gpui::{div, red, Div, ParentElement, Render, Styled, View, VisualContext, WindowContext};
use indoc::indoc;
use story::*;
@@ -13,22 +13,64 @@ impl TextStory {
impl Render for TextStory {
type Element = Div;
- fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> Self::Element {
- // let # = "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.";
-
+ fn render(&mut self, _cx: &mut gpui::ViewContext<Self>) -> Self::Element {
Story::container2::<TextStory>("crates/storybook2/src/stories/text.rs").child(
- StorySection::new().child(
- StoryItem::new(
- "Default Text",
- div().flex().child(div().max_w_96().child("foo")),
+ 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()
+ .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 horizonal 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.")
+ "##
+ })
)
- .description("Text with a max-width. Wraps based on set max-width.")
- .usage(indoc! {r##"
- div().max_w_96()
- .child("Some text that you want to wrap.")
- "##
- }),
- ),
)
}
}