Skip to content

Commit

Permalink
Continue on component preview
Browse files Browse the repository at this point in the history
  • Loading branch information
@iamnbutler
iamnbutler committed Feb 21, 2025
1 parent 58dd0f0 commit b734408
Show file tree
Hide file tree
Showing 40 changed files with 387 additions and 165 deletions.
1 change: 0 additions & 1 deletion crates/component_preview/src/component_preview.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,6 @@ impl ComponentPreview {
.py_2()
.child(
v_flex()
.bg(cx.theme().colors().text.opacity(0.05))
.border_1()
.border_color(cx.theme().colors().border)
.rounded_md()
Expand Down
2 changes: 1 addition & 1 deletion crates/ui/src/components/avatar.rs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
use crate::{prelude::*, Indicator};
use crate::prelude::*;

use gpui::{img, AnyElement, Hsla, ImageSource, Img, IntoElement, Styled};

Expand Down
26 changes: 11 additions & 15 deletions crates/ui/src/components/button/button.rs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
#![allow(missing_docs)]
use component::{example_group_with_title, single_example, ComponentPreview};
use gpui::{AnyElement, AnyView, DefiniteLength};
use ui_macros::IntoComponent;
Expand Down Expand Up @@ -81,6 +80,7 @@ use super::button_icon::ButtonIcon;
/// ```
///
#[derive(IntoElement, IntoComponent)]
#[component(scope = "input")]
pub struct Button {
base: ButtonLike,
label: SharedString,
Expand Down Expand Up @@ -463,7 +463,7 @@ impl ComponentPreview for Button {
.gap_6()
.children(vec![
example_group_with_title(
"Styles",
"Button Styles",
vec![
single_example(
"Default",
Expand All @@ -481,6 +481,12 @@ impl ComponentPreview for Button {
.style(ButtonStyle::Subtle)
.into_any_element(),
),
single_example(
"Tinted",
Button::new("tinted_accent_style", "Accent")
.style(ButtonStyle::Tinted(TintColor::Accent))
.into_any_element(),
),
single_example(
"Transparent",
Button::new("transparent", "Transparent")
Expand All @@ -490,7 +496,7 @@ impl ComponentPreview for Button {
],
),
example_group_with_title(
"Tinted",
"Tint Styles",
vec![
single_example(
"Accent",
Expand Down Expand Up @@ -519,7 +525,7 @@ impl ComponentPreview for Button {
],
),
example_group_with_title(
"States",
"Special States",
vec![
single_example(
"Default",
Expand All @@ -540,7 +546,7 @@ impl ComponentPreview for Button {
],
),
example_group_with_title(
"With Icons",
"Buttons with Icons",
vec![
single_example(
"Icon Start",
Expand All @@ -563,16 +569,6 @@ impl ComponentPreview for Button {
.icon_color(Color::Accent)
.into_any_element(),
),
single_example(
"Tinted Icons",
Button::new("tinted_icons", "Error")
.style(ButtonStyle::Tinted(TintColor::Error))
.color(Color::Error)
.icon_color(Color::Error)
.icon(IconName::Trash)
.icon_position(IconPosition::Start)
.into_any_element(),
),
],
),
])
Expand Down
1 change: 0 additions & 1 deletion crates/ui/src/components/button/button_icon.rs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
#![allow(missing_docs)]
use crate::{prelude::*, Icon, IconName, IconSize, IconWithIndicator, Indicator};
use gpui::Hsla;

Expand Down
1 change: 0 additions & 1 deletion crates/ui/src/components/button/button_like.rs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
#![allow(missing_docs)]
use gpui::{relative, CursorStyle, DefiniteLength, MouseButton};
use gpui::{transparent_black, AnyElement, AnyView, ClickEvent, Hsla, Rems};
use smallvec::SmallVec;
Expand Down
163 changes: 160 additions & 3 deletions crates/ui/src/components/button/icon_button.rs
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
#![allow(missing_docs)]
use gpui::{AnyView, DefiniteLength, Hsla};

use super::button_like::{ButtonCommon, ButtonLike, ButtonSize, ButtonStyle};
use crate::{prelude::*, ElevationIndex, Indicator, SelectableButton};
use crate::{prelude::*, ElevationIndex, Indicator, SelectableButton, TintColor};
use crate::{IconName, IconSize};

use super::button_icon::ButtonIcon;
Expand All @@ -14,7 +13,8 @@ pub enum IconButtonShape {
Wide,
}

#[derive(IntoElement)]
#[derive(IntoElement, IntoComponent)]
#[component(scope = "input")]
pub struct IconButton {
base: ButtonLike,
shape: IconButtonShape,
Expand Down Expand Up @@ -200,3 +200,160 @@ impl RenderOnce for IconButton {
)
}
}

impl ComponentPreview for IconButton {
fn preview(_window: &mut Window, _cx: &App) -> AnyElement {
v_flex()
.gap_6()
.children(vec![
example_group_with_title(
"Icon Button Styles",
vec![
single_example(
"Default",
IconButton::new("default", IconName::Check)
.layer(ElevationIndex::Background)
.into_any_element(),
),
single_example(
"Filled",
IconButton::new("filled", IconName::Check)
.layer(ElevationIndex::Background)
.style(ButtonStyle::Filled)
.into_any_element(),
),
single_example(
"Subtle",
IconButton::new("subtle", IconName::Check)
.layer(ElevationIndex::Background)
.style(ButtonStyle::Subtle)
.into_any_element(),
),
single_example(
"Tinted",
IconButton::new("tinted", IconName::Check)
.layer(ElevationIndex::Background)
.style(ButtonStyle::Tinted(TintColor::Accent))
.into_any_element(),
),
single_example(
"Transparent",
IconButton::new("transparent", IconName::Check)
.layer(ElevationIndex::Background)
.style(ButtonStyle::Transparent)
.into_any_element(),
),
],
),
example_group_with_title(
"Icon Button Shapes",
vec![
single_example(
"Square",
IconButton::new("square", IconName::Check)
.shape(IconButtonShape::Square)
.style(ButtonStyle::Filled)
.layer(ElevationIndex::Background)
.into_any_element(),
),
single_example(
"Wide",
IconButton::new("wide", IconName::Check)
.shape(IconButtonShape::Wide)
.style(ButtonStyle::Filled)
.layer(ElevationIndex::Background)
.into_any_element(),
),
],
),
example_group_with_title(
"Icon Button Sizes",
vec![
single_example(
"Small",
IconButton::new("small", IconName::Check)
.icon_size(IconSize::XSmall)
.style(ButtonStyle::Filled)
.layer(ElevationIndex::Background)
.into_any_element(),
),
single_example(
"Small",
IconButton::new("small", IconName::Check)
.icon_size(IconSize::Small)
.style(ButtonStyle::Filled)
.layer(ElevationIndex::Background)
.into_any_element(),
),
single_example(
"Medium",
IconButton::new("medium", IconName::Check)
.icon_size(IconSize::Medium)
.style(ButtonStyle::Filled)
.layer(ElevationIndex::Background)
.into_any_element(),
),
single_example(
"XLarge",
IconButton::new("xlarge", IconName::Check)
.icon_size(IconSize::XLarge)
.style(ButtonStyle::Filled)
.layer(ElevationIndex::Background)
.into_any_element(),
),
],
),
example_group_with_title(
"Special States",
vec![
single_example(
"Disabled",
IconButton::new("disabled", IconName::Check)
.disabled(true)
.style(ButtonStyle::Filled)
.layer(ElevationIndex::Background)
.into_any_element(),
),
single_example(
"Selected",
IconButton::new("selected", IconName::Check)
.toggle_state(true)
.style(ButtonStyle::Filled)
.layer(ElevationIndex::Background)
.into_any_element(),
),
single_example(
"With Indicator",
IconButton::new("indicator", IconName::Check)
.indicator(Indicator::dot().color(Color::Success))
.style(ButtonStyle::Filled)
.layer(ElevationIndex::Background)
.into_any_element(),
),
],
),
example_group_with_title(
"Custom Colors",
vec![
single_example(
"Custom Icon Color",
IconButton::new("custom_color", IconName::Check)
.icon_color(Color::Accent)
.style(ButtonStyle::Filled)
.layer(ElevationIndex::Background)
.into_any_element(),
),
single_example(
"With Alpha",
IconButton::new("alpha", IconName::Check)
.alpha(0.5)
.style(ButtonStyle::Filled)
.layer(ElevationIndex::Background)
.into_any_element(),
),
],
),
])
.into_any_element()
}
}
Loading

0 comments on commit b734408

Please sign in to comment.