Unify Story/StoryContainers (#17114)
Unify the various Story containers, and use gpui default colors over the custom `StoryColors`. Release Notes: - N/A
This commit is contained in:
Nate Butler
GitHub
parent
449e744c14
commit
3d175f685f
9 changed files with 356 additions and 510 deletions
|
|
@ -1,5 +1,5 @@
|
|||
use gpui::Render;
|
||||
use story::{StoryContainer, StoryItem, StorySection};
|
||||
use story::{Story, StoryItem, StorySection};
|
||||
|
||||
use crate::{prelude::*, AudioStatus, Availability, AvatarAvailabilityIndicator};
|
||||
use crate::{Avatar, AvatarAudioStatusIndicator};
|
||||
|
|
@ -8,7 +8,8 @@ pub struct AvatarStory;
|
|||
|
||||
impl Render for AvatarStory {
|
||||
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
|
||||
StoryContainer::new("Avatar", "crates/ui/src/components/stories/avatar.rs")
|
||||
Story::container()
|
||||
.child(Story::title_for::<Avatar>())
|
||||
.child(
|
||||
StorySection::new()
|
||||
.child(StoryItem::new(
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
use gpui::Render;
|
||||
use story::{StoryContainer, StoryItem, StorySection};
|
||||
use story::{Story, StoryItem, StorySection};
|
||||
|
||||
use crate::{prelude::*, IconButtonShape, Tooltip};
|
||||
use crate::{IconButton, IconName};
|
||||
|
|
@ -111,38 +111,36 @@ impl Render for IconButtonStory {
|
|||
selected_with_tooltip_button,
|
||||
];
|
||||
|
||||
StoryContainer::new(
|
||||
"Icon Button",
|
||||
"crates/ui/src/components/stories/icon_button.rs",
|
||||
)
|
||||
.child(StorySection::new().children(buttons))
|
||||
.child(
|
||||
StorySection::new().child(StoryItem::new(
|
||||
"Square",
|
||||
h_flex()
|
||||
.gap_2()
|
||||
.child(
|
||||
IconButton::new("square-medium", IconName::Close)
|
||||
.shape(IconButtonShape::Square)
|
||||
.icon_size(IconSize::Medium),
|
||||
)
|
||||
.child(
|
||||
IconButton::new("square-small", IconName::Close)
|
||||
.shape(IconButtonShape::Square)
|
||||
.icon_size(IconSize::Small),
|
||||
)
|
||||
.child(
|
||||
IconButton::new("square-xsmall", IconName::Close)
|
||||
.shape(IconButtonShape::Square)
|
||||
.icon_size(IconSize::XSmall),
|
||||
)
|
||||
.child(
|
||||
IconButton::new("square-indicator", IconName::Close)
|
||||
.shape(IconButtonShape::Square)
|
||||
.icon_size(IconSize::Indicator),
|
||||
),
|
||||
)),
|
||||
)
|
||||
.into_element()
|
||||
Story::container()
|
||||
.child(Story::title_for::<IconButton>())
|
||||
.child(StorySection::new().children(buttons))
|
||||
.child(
|
||||
StorySection::new().child(StoryItem::new(
|
||||
"Square",
|
||||
h_flex()
|
||||
.gap_2()
|
||||
.child(
|
||||
IconButton::new("square-medium", IconName::Close)
|
||||
.shape(IconButtonShape::Square)
|
||||
.icon_size(IconSize::Medium),
|
||||
)
|
||||
.child(
|
||||
IconButton::new("square-small", IconName::Close)
|
||||
.shape(IconButtonShape::Square)
|
||||
.icon_size(IconSize::Small),
|
||||
)
|
||||
.child(
|
||||
IconButton::new("square-xsmall", IconName::Close)
|
||||
.shape(IconButtonShape::Square)
|
||||
.icon_size(IconSize::XSmall),
|
||||
)
|
||||
.child(
|
||||
IconButton::new("square-indicator", IconName::Close)
|
||||
.shape(IconButtonShape::Square)
|
||||
.icon_size(IconSize::Indicator),
|
||||
),
|
||||
)),
|
||||
)
|
||||
.into_element()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
use gpui::NoAction;
|
||||
use gpui::Render;
|
||||
use itertools::Itertools;
|
||||
use story::{Story, StoryContainer};
|
||||
use story::Story;
|
||||
|
||||
use crate::{prelude::*, KeyBinding};
|
||||
|
||||
|
|
@ -15,28 +15,23 @@ impl Render for KeybindingStory {
|
|||
fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
|
||||
let all_modifier_permutations = ["ctrl", "alt", "cmd", "shift"].into_iter().permutations(2);
|
||||
|
||||
StoryContainer::new(
|
||||
"KeyBinding",
|
||||
"crates/ui/src/components/stories/keybinding.rs",
|
||||
)
|
||||
.child(Story::label("Single Key"))
|
||||
.child(KeyBinding::new(binding("Z")))
|
||||
.child(Story::label("Single Key with Modifier"))
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.gap_3()
|
||||
.child(KeyBinding::new(binding("ctrl-c")))
|
||||
.child(KeyBinding::new(binding("alt-c")))
|
||||
.child(KeyBinding::new(binding("cmd-c")))
|
||||
.child(KeyBinding::new(binding("shift-c"))),
|
||||
)
|
||||
.child(Story::label("Single Key with Modifier (Permuted)"))
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.children(
|
||||
Story::container()
|
||||
.child(Story::title_for::<KeyBinding>())
|
||||
.child(Story::label("Single Key"))
|
||||
.child(KeyBinding::new(binding("Z")))
|
||||
.child(Story::label("Single Key with Modifier"))
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.gap_3()
|
||||
.child(KeyBinding::new(binding("ctrl-c")))
|
||||
.child(KeyBinding::new(binding("alt-c")))
|
||||
.child(KeyBinding::new(binding("cmd-c")))
|
||||
.child(KeyBinding::new(binding("shift-c"))),
|
||||
)
|
||||
.child(Story::label("Single Key with Modifier (Permuted)"))
|
||||
.child(
|
||||
div().flex().flex_col().children(
|
||||
all_modifier_permutations
|
||||
.chunks(4)
|
||||
.into_iter()
|
||||
|
|
@ -50,31 +45,35 @@ impl Render for KeybindingStory {
|
|||
}))
|
||||
}),
|
||||
),
|
||||
)
|
||||
.child(Story::label("Single Key with All Modifiers"))
|
||||
.child(KeyBinding::new(binding("ctrl-alt-cmd-shift-z")))
|
||||
.child(Story::label("Chord"))
|
||||
.child(KeyBinding::new(binding("a z")))
|
||||
.child(Story::label("Chord with Modifier"))
|
||||
.child(KeyBinding::new(binding("ctrl-a shift-z")))
|
||||
.child(KeyBinding::new(binding("fn-s")))
|
||||
.child(Story::label("Single Key with All Modifiers (Linux)"))
|
||||
.child(
|
||||
KeyBinding::new(binding("ctrl-alt-cmd-shift-z")).platform_style(PlatformStyle::Linux),
|
||||
)
|
||||
.child(Story::label("Chord (Linux)"))
|
||||
.child(KeyBinding::new(binding("a z")).platform_style(PlatformStyle::Linux))
|
||||
.child(Story::label("Chord with Modifier (Linux)"))
|
||||
.child(KeyBinding::new(binding("ctrl-a shift-z")).platform_style(PlatformStyle::Linux))
|
||||
.child(KeyBinding::new(binding("fn-s")).platform_style(PlatformStyle::Linux))
|
||||
.child(Story::label("Single Key with All Modifiers (Windows)"))
|
||||
.child(
|
||||
KeyBinding::new(binding("ctrl-alt-cmd-shift-z")).platform_style(PlatformStyle::Windows),
|
||||
)
|
||||
.child(Story::label("Chord (Windows)"))
|
||||
.child(KeyBinding::new(binding("a z")).platform_style(PlatformStyle::Windows))
|
||||
.child(Story::label("Chord with Modifier (Windows)"))
|
||||
.child(KeyBinding::new(binding("ctrl-a shift-z")).platform_style(PlatformStyle::Windows))
|
||||
.child(KeyBinding::new(binding("fn-s")).platform_style(PlatformStyle::Windows))
|
||||
)
|
||||
.child(Story::label("Single Key with All Modifiers"))
|
||||
.child(KeyBinding::new(binding("ctrl-alt-cmd-shift-z")))
|
||||
.child(Story::label("Chord"))
|
||||
.child(KeyBinding::new(binding("a z")))
|
||||
.child(Story::label("Chord with Modifier"))
|
||||
.child(KeyBinding::new(binding("ctrl-a shift-z")))
|
||||
.child(KeyBinding::new(binding("fn-s")))
|
||||
.child(Story::label("Single Key with All Modifiers (Linux)"))
|
||||
.child(
|
||||
KeyBinding::new(binding("ctrl-alt-cmd-shift-z"))
|
||||
.platform_style(PlatformStyle::Linux),
|
||||
)
|
||||
.child(Story::label("Chord (Linux)"))
|
||||
.child(KeyBinding::new(binding("a z")).platform_style(PlatformStyle::Linux))
|
||||
.child(Story::label("Chord with Modifier (Linux)"))
|
||||
.child(KeyBinding::new(binding("ctrl-a shift-z")).platform_style(PlatformStyle::Linux))
|
||||
.child(KeyBinding::new(binding("fn-s")).platform_style(PlatformStyle::Linux))
|
||||
.child(Story::label("Single Key with All Modifiers (Windows)"))
|
||||
.child(
|
||||
KeyBinding::new(binding("ctrl-alt-cmd-shift-z"))
|
||||
.platform_style(PlatformStyle::Windows),
|
||||
)
|
||||
.child(Story::label("Chord (Windows)"))
|
||||
.child(KeyBinding::new(binding("a z")).platform_style(PlatformStyle::Windows))
|
||||
.child(Story::label("Chord with Modifier (Windows)"))
|
||||
.child(
|
||||
KeyBinding::new(binding("ctrl-a shift-z")).platform_style(PlatformStyle::Windows),
|
||||
)
|
||||
.child(KeyBinding::new(binding("fn-s")).platform_style(PlatformStyle::Windows))
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
use gpui::Render;
|
||||
use story::{StoryContainer, StoryItem, StorySection};
|
||||
use story::{Story, StoryItem, StorySection};
|
||||
|
||||
use crate::{prelude::*, ToggleButton};
|
||||
|
||||
|
|
@ -7,89 +7,87 @@ pub struct ToggleButtonStory;
|
|||
|
||||
impl Render for ToggleButtonStory {
|
||||
fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
|
||||
StoryContainer::new(
|
||||
"Toggle Button",
|
||||
"crates/ui/src/components/stories/toggle_button.rs",
|
||||
)
|
||||
.child(
|
||||
StorySection::new().child(
|
||||
StoryItem::new(
|
||||
"Default",
|
||||
ToggleButton::new("default_toggle_button", "Hello"),
|
||||
)
|
||||
.description("Displays a toggle button.")
|
||||
.usage(""),
|
||||
),
|
||||
)
|
||||
.child(
|
||||
StorySection::new().child(
|
||||
StoryItem::new(
|
||||
"Toggle button group",
|
||||
h_flex()
|
||||
.child(
|
||||
ToggleButton::new(1, "Apple")
|
||||
.style(ButtonStyle::Filled)
|
||||
.size(ButtonSize::Large)
|
||||
.first(),
|
||||
)
|
||||
.child(
|
||||
ToggleButton::new(2, "Banana")
|
||||
.style(ButtonStyle::Filled)
|
||||
.size(ButtonSize::Large)
|
||||
.middle(),
|
||||
)
|
||||
.child(
|
||||
ToggleButton::new(3, "Cherry")
|
||||
.style(ButtonStyle::Filled)
|
||||
.size(ButtonSize::Large)
|
||||
.middle(),
|
||||
)
|
||||
.child(
|
||||
ToggleButton::new(4, "Dragonfruit")
|
||||
.style(ButtonStyle::Filled)
|
||||
.size(ButtonSize::Large)
|
||||
.last(),
|
||||
),
|
||||
)
|
||||
.description("Displays a group of toggle buttons.")
|
||||
.usage(""),
|
||||
),
|
||||
)
|
||||
.child(
|
||||
StorySection::new().child(
|
||||
StoryItem::new(
|
||||
"Toggle button group with selection",
|
||||
h_flex()
|
||||
.child(
|
||||
ToggleButton::new(1, "Apple")
|
||||
.style(ButtonStyle::Filled)
|
||||
.size(ButtonSize::Large)
|
||||
.first(),
|
||||
)
|
||||
.child(
|
||||
ToggleButton::new(2, "Banana")
|
||||
.style(ButtonStyle::Filled)
|
||||
.size(ButtonSize::Large)
|
||||
.selected(true)
|
||||
.middle(),
|
||||
)
|
||||
.child(
|
||||
ToggleButton::new(3, "Cherry")
|
||||
.style(ButtonStyle::Filled)
|
||||
.size(ButtonSize::Large)
|
||||
.middle(),
|
||||
)
|
||||
.child(
|
||||
ToggleButton::new(4, "Dragonfruit")
|
||||
.style(ButtonStyle::Filled)
|
||||
.size(ButtonSize::Large)
|
||||
.last(),
|
||||
),
|
||||
)
|
||||
.description("Displays a group of toggle buttons.")
|
||||
.usage(""),
|
||||
),
|
||||
)
|
||||
.into_element()
|
||||
Story::container()
|
||||
.child(Story::title_for::<ToggleButton>())
|
||||
.child(
|
||||
StorySection::new().child(
|
||||
StoryItem::new(
|
||||
"Default",
|
||||
ToggleButton::new("default_toggle_button", "Hello"),
|
||||
)
|
||||
.description("Displays a toggle button.")
|
||||
.usage(""),
|
||||
),
|
||||
)
|
||||
.child(
|
||||
StorySection::new().child(
|
||||
StoryItem::new(
|
||||
"Toggle button group",
|
||||
h_flex()
|
||||
.child(
|
||||
ToggleButton::new(1, "Apple")
|
||||
.style(ButtonStyle::Filled)
|
||||
.size(ButtonSize::Large)
|
||||
.first(),
|
||||
)
|
||||
.child(
|
||||
ToggleButton::new(2, "Banana")
|
||||
.style(ButtonStyle::Filled)
|
||||
.size(ButtonSize::Large)
|
||||
.middle(),
|
||||
)
|
||||
.child(
|
||||
ToggleButton::new(3, "Cherry")
|
||||
.style(ButtonStyle::Filled)
|
||||
.size(ButtonSize::Large)
|
||||
.middle(),
|
||||
)
|
||||
.child(
|
||||
ToggleButton::new(4, "Dragonfruit")
|
||||
.style(ButtonStyle::Filled)
|
||||
.size(ButtonSize::Large)
|
||||
.last(),
|
||||
),
|
||||
)
|
||||
.description("Displays a group of toggle buttons.")
|
||||
.usage(""),
|
||||
),
|
||||
)
|
||||
.child(
|
||||
StorySection::new().child(
|
||||
StoryItem::new(
|
||||
"Toggle button group with selection",
|
||||
h_flex()
|
||||
.child(
|
||||
ToggleButton::new(1, "Apple")
|
||||
.style(ButtonStyle::Filled)
|
||||
.size(ButtonSize::Large)
|
||||
.first(),
|
||||
)
|
||||
.child(
|
||||
ToggleButton::new(2, "Banana")
|
||||
.style(ButtonStyle::Filled)
|
||||
.size(ButtonSize::Large)
|
||||
.selected(true)
|
||||
.middle(),
|
||||
)
|
||||
.child(
|
||||
ToggleButton::new(3, "Cherry")
|
||||
.style(ButtonStyle::Filled)
|
||||
.size(ButtonSize::Large)
|
||||
.middle(),
|
||||
)
|
||||
.child(
|
||||
ToggleButton::new(4, "Dragonfruit")
|
||||
.style(ButtonStyle::Filled)
|
||||
.size(ButtonSize::Large)
|
||||
.last(),
|
||||
),
|
||||
)
|
||||
.description("Displays a group of toggle buttons.")
|
||||
.usage(""),
|
||||
),
|
||||
)
|
||||
.into_element()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
use gpui::Render;
|
||||
use story::{StoryContainer, StoryItem, StorySection};
|
||||
use story::{Story, StoryItem, StorySection};
|
||||
|
||||
use crate::{prelude::*, ToolStrip, Tooltip};
|
||||
|
||||
|
|
@ -7,29 +7,27 @@ pub struct ToolStripStory;
|
|||
|
||||
impl Render for ToolStripStory {
|
||||
fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
|
||||
StoryContainer::new(
|
||||
"Tool Strip",
|
||||
"crates/ui/src/components/stories/tool_strip.rs",
|
||||
)
|
||||
.child(
|
||||
StorySection::new().child(StoryItem::new(
|
||||
"Vertical Tool Strip",
|
||||
h_flex().child(
|
||||
ToolStrip::vertical("tool_strip_example")
|
||||
.tool(
|
||||
IconButton::new("example_tool", IconName::AudioOn)
|
||||
.tooltip(|cx| Tooltip::text("Example tool", cx)),
|
||||
)
|
||||
.tool(
|
||||
IconButton::new("example_tool_2", IconName::MicMute)
|
||||
.tooltip(|cx| Tooltip::text("Example tool 2", cx)),
|
||||
)
|
||||
.tool(
|
||||
IconButton::new("example_tool_3", IconName::Screen)
|
||||
.tooltip(|cx| Tooltip::text("Example tool 3", cx)),
|
||||
),
|
||||
),
|
||||
)),
|
||||
)
|
||||
Story::container()
|
||||
.child(Story::title_for::<ToolStrip>())
|
||||
.child(
|
||||
StorySection::new().child(StoryItem::new(
|
||||
"Vertical Tool Strip",
|
||||
h_flex().child(
|
||||
ToolStrip::vertical("tool_strip_example")
|
||||
.tool(
|
||||
IconButton::new("example_tool", IconName::AudioOn)
|
||||
.tooltip(|cx| Tooltip::text("Example tool", cx)),
|
||||
)
|
||||
.tool(
|
||||
IconButton::new("example_tool_2", IconName::MicMute)
|
||||
.tooltip(|cx| Tooltip::text("Example tool 2", cx)),
|
||||
)
|
||||
.tool(
|
||||
IconButton::new("example_tool_3", IconName::Screen)
|
||||
.tooltip(|cx| Tooltip::text("Example tool 3", cx)),
|
||||
),
|
||||
),
|
||||
)),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue