zed-industries/zed
1
1
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-11-08 07:35:01 +03:00
Code Issues Packages Projects Releases Wiki Activity

Continue styling new story components

Browse Source
This commit is contained in:
Nate Butler 2023-12-14 16:52:05 -05:00
parent c041799c6a
commit 63c3edfb83
4 changed files with 83 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Cargo.lock generated
View File

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

1
crates/story/Cargo.toml
View File

@ -9,3 +9,4 @@ publish = false
[dependencies]
gpui = { package = "gpui2", path = "../gpui2" }
smallvec.workspace = true
itertools = {package = "itertools", version = "0.10"}

34
crates/story/src/story.rs
View File

@ -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())
}
}

72
crates/storybook2/src/stories/text.rs
View File

@ -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.")
"##
}),
),
)
}
}