crates/storybook2/src/stories/elements.rs 🔗
@@ -4,3 +4,4 @@ pub mod details;
pub mod icon;
pub mod input;
pub mod label;
+pub mod z_index;
Add a story showcasing z-index
Marshall Bowers created
Change summary
crates/storybook2/src/stories/elements.rs | 1
crates/storybook2/src/stories/elements/z_index.rs | 189 +++++++++++++++++
crates/storybook2/src/story_selector.rs | 2
3 files changed, 192 insertions(+)
Detailed changes
crates/storybook2/src/stories/elements/z_index.rs 🔗
@@ -0,0 +1,189 @@
+use std::marker::PhantomData;
+
+use gpui3::{px, rgb, Div, Hsla};
+use ui::prelude::*;
+
+use crate::story::Story;
+
+/// A reimplementation of the MDN `z-index` example, found here:
+/// [https://developer.mozilla.org/en-US/docs/Web/CSS/z-index](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).
+#[derive(Element)]
+pub struct ZIndexStory<S: 'static + Send + Sync> {
+ state_type: PhantomData<S>,
+}
+
+impl<S: 'static + Send + Sync> ZIndexStory<S> {
+ pub fn new() -> Self {
+ Self {
+ state_type: PhantomData,
+ }
+ }
+
+ fn render(&mut self, cx: &mut ViewContext<S>) -> impl Element<State = S> {
+ Story::container(cx)
+ .child(Story::title(cx, "z-index"))
+ .child(
+ div()
+ .flex()
+ .child(
+ div()
+ .w(px(250.))
+ .child(Story::label(cx, "z-index: auto"))
+ .child(ZIndexExample::new(0)),
+ )
+ .child(
+ div()
+ .w(px(250.))
+ .child(Story::label(cx, "z-index: 1"))
+ .child(ZIndexExample::new(1)),
+ )
+ .child(
+ div()
+ .w(px(250.))
+ .child(Story::label(cx, "z-index: 3"))
+ .child(ZIndexExample::new(3)),
+ )
+ .child(
+ div()
+ .w(px(250.))
+ .child(Story::label(cx, "z-index: 5"))
+ .child(ZIndexExample::new(5)),
+ )
+ .child(
+ div()
+ .w(px(250.))
+ .child(Story::label(cx, "z-index: 7"))
+ .child(ZIndexExample::new(7)),
+ ),
+ )
+ }
+}
+
+trait Styles: StyleHelpers {
+ fn blocks(self) -> Self {
+ self.absolute()
+ .w(px(150.))
+ .h(px(50.))
+ .text_color(rgb::<Hsla>(0x000000))
+ }
+
+ fn blue(self) -> Self {
+ self.fill(rgb::<Hsla>(0xe5e8fc))
+ .border_5()
+ .border_color(rgb::<Hsla>(0x112382))
+ // HACK: Simulate `line-height: 55px`.
+ .pt(px(16.))
+ // HACK: Simulate `text-align: center`.
+ .pl(px(24.))
+ }
+
+ fn red(self) -> Self {
+ self.fill(rgb::<Hsla>(0xfce5e7))
+ .border_5()
+ .border_color(rgb::<Hsla>(0xe3a1a7))
+ // HACK: Simulate `text-align: center`.
+ .pl(px(8.))
+ }
+}
+
+impl<S> Styles for Div<S> {}
+
+#[derive(Element)]
+struct ZIndexExample<S: 'static + Send + Sync> {
+ state_type: PhantomData<S>,
+ z_index: u32,
+}
+
+impl<S: 'static + Send + Sync> ZIndexExample<S> {
+ pub fn new(z_index: u32) -> Self {
+ Self {
+ state_type: PhantomData,
+ z_index,
+ }
+ }
+
+ fn render(&mut self, cx: &mut ViewContext<S>) -> impl Element<State = S> {
+ div()
+ .relative()
+ .size_full()
+ // Example element.
+ .child(
+ div()
+ .absolute()
+ .top(px(15.))
+ .left(px(15.))
+ .w(px(180.))
+ .h(px(230.))
+ .fill(rgb::<Hsla>(0xfcfbe5))
+ .text_color(rgb::<Hsla>(0x000000))
+ .border_5()
+ .border_color(rgb::<Hsla>(0xe3e0a1))
+ // HACK: Simulate `line-height: 215px`.
+ .pt(px(100.))
+ // HACK: Simulate `text-align: center`.
+ .pl(px(24.))
+ .z_index(self.z_index)
+ .child(format!(
+ "z-index: {}",
+ if self.z_index == 0 {
+ "auto".to_string()
+ } else {
+ self.z_index.to_string()
+ }
+ )),
+ )
+ // Blue blocks.
+ .child(
+ div()
+ .blue()
+ .blocks()
+ .top(px(0.))
+ .left(px(0.))
+ .z_index(6)
+ .child("z-index: 6"),
+ )
+ .child(
+ div()
+ .blue()
+ .blocks()
+ .top(px(30.))
+ .left(px(30.))
+ .z_index(4)
+ .child("z-index: 4"),
+ )
+ .child(
+ div()
+ .blue()
+ .blocks()
+ .top(px(60.))
+ .left(px(60.))
+ .z_index(2)
+ .child("z-index: 2"),
+ )
+ // Red blocks.
+ .child(
+ div()
+ .red()
+ .blocks()
+ .top(px(150.))
+ .left(px(0.))
+ .child("z-index: auto"),
+ )
+ .child(
+ div()
+ .red()
+ .blocks()
+ .top(px(180.))
+ .left(px(30.))
+ .child("z-index: auto"),
+ )
+ .child(
+ div()
+ .red()
+ .blocks()
+ .top(px(210.))
+ .left(px(60.))
+ .child("z-index: auto"),
+ )
+ }
+}
crates/storybook2/src/story_selector.rs 🔗
@@ -18,6 +18,7 @@ pub enum ElementStory {
Icon,
Input,
Label,
+ ZIndex,
}
impl ElementStory {
@@ -31,6 +32,7 @@ impl ElementStory {
Self::Icon => elements::icon::IconStory::new().into_any(),
Self::Input => elements::input::InputStory::new().into_any(),
Self::Label => elements::label::LabelStory::new().into_any(),
+ Self::ZIndex => elements::z_index::ZIndexStory::new().into_any(),
}
}
}