diff --git a/Cargo.lock b/Cargo.lock index c5ec126de5..1c74b49738 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -9211,6 +9211,7 @@ name = "story" version = "0.1.0" dependencies = [ "gpui2", + "itertools 0.10.5", "smallvec", ] diff --git a/crates/story/Cargo.toml b/crates/story/Cargo.toml index b042cbab80..9c195f77f0 100644 --- a/crates/story/Cargo.toml +++ b/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"} diff --git a/crates/story/src/story.rs b/crates/story/src/story.rs index c656f3729d..4985fb1961 100644 --- a/crates/story/src/story.rs +++ b/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()) } } diff --git a/crates/storybook2/src/stories/text.rs b/crates/storybook2/src/stories/text.rs index 279a2dbf4d..b48b9dd4b5 100644 --- a/crates/storybook2/src/stories/text.rs +++ b/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::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::Element { Story::container2::("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.") - "## - }), - ), ) } }