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 96c3aff2af..37893a9a0a 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 9f84446eed..f3c7b93005 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 a21ee0a0bc..a5caf717e7 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 7a3145cf08..c758518762 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 d9566c216c..39167498a9 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 75e24e9135..a522859868 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())), ) } }