Merge Component and ComponentPreview trait (#28365)
- Merge `Component` and `ComponentPreview` trait - Adds a number of component previews - Removes a number of stories Release Notes: - N/A
This commit is contained in:
Nate Butler
GitHub
parent
b15ee1b1cc
commit
c05bf096f8
52 changed files with 3276 additions and 1848 deletions
|
|
@ -13,8 +13,7 @@ pub enum IconButtonShape {
|
|||
Wide,
|
||||
}
|
||||
|
||||
#[derive(IntoElement, IntoComponent)]
|
||||
#[component(scope = "Input")]
|
||||
#[derive(IntoElement, RegisterComponent)]
|
||||
pub struct IconButton {
|
||||
base: ButtonLike,
|
||||
shape: IconButtonShape,
|
||||
|
|
@ -210,159 +209,169 @@ impl RenderOnce for IconButton {
|
|||
}
|
||||
}
|
||||
|
||||
impl ComponentPreview for IconButton {
|
||||
fn preview(_window: &mut Window, _cx: &mut 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()
|
||||
impl Component for IconButton {
|
||||
fn scope() -> ComponentScope {
|
||||
ComponentScope::Input
|
||||
}
|
||||
|
||||
fn sort_name() -> &'static str {
|
||||
"ButtonB"
|
||||
}
|
||||
|
||||
fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
|
||||
Some(
|
||||
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(
|
||||
"XSmall",
|
||||
IconButton::new("xsmall", 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…
Add table
Add a link
Reference in a new issue