Continue styling new story components

Cargo.lock

@@ -9211,6 +9211,7 @@ name = "story"
 version = "0.1.0"
 dependencies = [
  "gpui2",
+ "itertools 0.10.5",
  "smallvec",
 ]
 

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::{
-use gpui::{prelude::*, px};
+    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 {
+    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.";
-
         Story::container2::<TextStory>("crates/storybook2/src/stories/text.rs").child(
-            StorySection::new().child(
+            StorySection::new()
-                StoryItem::new(
+                .child(
-                    "Default Text",
+                    StoryItem::new("Default", div().bg(gpui::blue()).child("Hello World!"))
-                    div().flex().child(div().max_w_96().child("foo")),
+                        .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.")
-                    "##
-                }),
-            ),
         )
     }
 }