From 27e3e09bb9e4f08a9c836e62381c8b9f9f7ed08a Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Fri, 22 Sep 2023 15:48:32 -0400 Subject: [PATCH] Label component states in stories (#3019) This PR updates the UI component stories to label the various states that they are in. Release Notes: - N/A --- .../src/stories/components/facepile.rs | 57 ++++++++----------- .../src/stories/components/traffic_lights.rs | 3 +- .../storybook/src/stories/elements/avatar.rs | 21 +++---- crates/storybook/src/story.rs | 15 ++++- crates/ui/src/components/facepile.rs | 6 +- crates/ui/src/components/follow_group.rs | 2 +- 6 files changed, 53 insertions(+), 51 deletions(-) diff --git a/crates/storybook/src/stories/components/facepile.rs b/crates/storybook/src/stories/components/facepile.rs index 96c3aff2afbe5dff1971667eb18428d5d601f845..37893a9a0a4c1400493df87b9eebd76bbc568fae 100644 --- a/crates/storybook/src/stories/components/facepile.rs +++ b/crates/storybook/src/stories/components/facepile.rs @@ -13,47 +13,38 @@ impl FacepileStory { fn render(&mut self, _: &mut V, cx: &mut ViewContext) -> impl IntoElement { let theme = theme(cx); + let avatars = vec![ + avatar("https://avatars.githubusercontent.com/u/1714999?v=4"), + avatar("https://avatars.githubusercontent.com/u/482957?v=4"), + avatar("https://avatars.githubusercontent.com/u/1789?v=4"), + ]; + Story::container() - .child(Story::title(std::any::type_name::())) + .child(Story::title_for::<_, ui::Facepile>()) + .child(Story::label("Default")) .child( div() .flex() .gap_3() - .child(facepile(vec![avatar( - "https://avatars.githubusercontent.com/u/1714999?v=4", - )])) - .child(facepile(vec![ - avatar("https://avatars.githubusercontent.com/u/1714999?v=4"), - avatar("https://avatars.githubusercontent.com/u/1714999?v=4"), - ])) - .child(facepile(vec![ - avatar("https://avatars.githubusercontent.com/u/1714999?v=4"), - avatar("https://avatars.githubusercontent.com/u/1714999?v=4"), - avatar("https://avatars.githubusercontent.com/u/1714999?v=4"), - ])), + .child(facepile(avatars.clone().into_iter().take(1))) + .child(facepile(avatars.clone().into_iter().take(2))) + .child(facepile(avatars.clone().into_iter().take(3))), ) - .child( + .child(Story::label("Rounded rectangle avatars")) + .child({ + let shape = Shape::RoundedRectangle; + + let avatars = avatars + .clone() + .into_iter() + .map(|avatar| avatar.shape(Shape::RoundedRectangle)); + div() .flex() .gap_3() - .child(facepile(vec![avatar( - "https://avatars.githubusercontent.com/u/1714999?v=4", - ) - .shape(Shape::RoundedRectangle)])) - .child(facepile(vec![ - avatar("https://avatars.githubusercontent.com/u/1714999?v=4") - .shape(Shape::RoundedRectangle), - avatar("https://avatars.githubusercontent.com/u/1714999?v=4") - .shape(Shape::RoundedRectangle), - ])) - .child(facepile(vec![ - avatar("https://avatars.githubusercontent.com/u/1714999?v=4") - .shape(Shape::RoundedRectangle), - avatar("https://avatars.githubusercontent.com/u/1714999?v=4") - .shape(Shape::RoundedRectangle), - avatar("https://avatars.githubusercontent.com/u/1714999?v=4") - .shape(Shape::RoundedRectangle), - ])), - ) + .child(facepile(avatars.clone().take(1))) + .child(facepile(avatars.clone().take(2))) + .child(facepile(avatars.clone().take(3))) + }) } } diff --git a/crates/storybook/src/stories/components/traffic_lights.rs b/crates/storybook/src/stories/components/traffic_lights.rs index 9f84446eed383ee8fbd637b5b00b7212137acdc2..f3c7b93005b602b1f58a4c3f762f60217f11ebb6 100644 --- a/crates/storybook/src/stories/components/traffic_lights.rs +++ b/crates/storybook/src/stories/components/traffic_lights.rs @@ -11,7 +11,8 @@ impl TrafficLightsStory { let theme = theme(cx); Story::container() - .child(Story::title(std::any::type_name::())) + .child(Story::title_for::<_, ui::TrafficLights>()) + .child(Story::label("Default")) .child(traffic_lights()) } } diff --git a/crates/storybook/src/stories/elements/avatar.rs b/crates/storybook/src/stories/elements/avatar.rs index a21ee0a0bc334c743798519bcfd3658b689597b7..a5caf717e7168c2bf32efd5eff2276b1341b5637 100644 --- a/crates/storybook/src/stories/elements/avatar.rs +++ b/crates/storybook/src/stories/elements/avatar.rs @@ -1,5 +1,3 @@ -use gpui2::elements::div; -use gpui2::style::StyleHelpers; use gpui2::{Element, IntoElement, ParentElement, ViewContext}; use ui::prelude::*; use ui::{avatar, theme}; @@ -14,18 +12,15 @@ impl AvatarStory { let theme = theme(cx); Story::container() - .child(Story::title(std::any::type_name::())) + .child(Story::title_for::<_, ui::Avatar>()) + .child(Story::label("Default")) + .child(avatar( + "https://avatars.githubusercontent.com/u/1714999?v=4", + )) + .child(Story::label("Rounded rectangle")) .child( - div() - .flex() - .gap_3() - .child(avatar( - "https://avatars.githubusercontent.com/u/1714999?v=4", - )) - .child( - avatar("https://avatars.githubusercontent.com/u/1714999?v=4") - .shape(Shape::RoundedRectangle), - ), + avatar("https://avatars.githubusercontent.com/u/1714999?v=4") + .shape(Shape::RoundedRectangle), ) } } diff --git a/crates/storybook/src/story.rs b/crates/storybook/src/story.rs index 7a3145cf080a63ab2ea8284d6a7ae3da93a782f9..c758518762b4ba124d9e74237940d05547dac04d 100644 --- a/crates/storybook/src/story.rs +++ b/crates/storybook/src/story.rs @@ -18,8 +18,21 @@ impl Story { pub fn title(title: &str) -> impl Element { div() - .text_2xl() + .text_xl() .text_color(rgb::(0xffffff)) .child(title.to_owned()) } + + pub fn title_for() -> impl Element { + Self::title(std::any::type_name::()) + } + + pub fn label(label: &str) -> impl Element { + div() + .mt_4() + .mb_2() + .text_xs() + .text_color(rgb::(0xffffff)) + .child(label.to_owned()) + } } diff --git a/crates/ui/src/components/facepile.rs b/crates/ui/src/components/facepile.rs index d9566c216cfbf82fc0dce336b3da0dc2bf67e6c6..39167498a95c447d69f2c59ab74410e1fb2777be 100644 --- a/crates/ui/src/components/facepile.rs +++ b/crates/ui/src/components/facepile.rs @@ -9,8 +9,10 @@ pub struct Facepile { players: Vec, } -pub fn facepile(players: Vec) -> Facepile { - Facepile { players } +pub fn facepile>(players: P) -> Facepile { + Facepile { + players: players.collect(), + } } impl Facepile { diff --git a/crates/ui/src/components/follow_group.rs b/crates/ui/src/components/follow_group.rs index 75e24e9135a93576b63dd65f90dd5e617c26fc37..a52285986812145a1fb0b7eb226b856f2f0fa4cf 100644 --- a/crates/ui/src/components/follow_group.rs +++ b/crates/ui/src/components/follow_group.rs @@ -46,7 +46,7 @@ impl FollowGroup { .px_1() .rounded_lg() .fill(player_bg) - .child(facepile(self.players.clone())), + .child(facepile(self.players.clone().into_iter())), ) } }