tessera_components/

badge.rs

//! Material Design badge primitives.
//!
//! ## Usage
//!
//! Highlight counts or status markers on top of icons and other UI elements.

use tessera_ui::{
    AxisConstraint, Color, ComputedData, Constraint, Dp, LayoutResult, MeasurementError, Modifier,
    Px, PxPosition, PxSize, RenderSlot,
    layout::{MeasureScope, layout},
    provide_context, tessera, use_context,
};

use crate::{
    alignment::{Alignment, CrossAxisAlignment, MainAxisAlignment},
    boxed::boxed,
    pipelines::shape::command::ShapeCommand,
    row::row,
    shape_def::{ResolvedShape, Shape},
    theme::{ContentColor, MaterialTheme, TextStyle, content_color_for},
};

fn badge_pixels(value: Dp) -> Px {
    Px::from_f32(value.to_pixels_f32().round())
}

#[derive(Clone, Copy, Default, PartialEq, Eq, Hash)]
struct BadgedBoxLayout;

impl tessera_ui::LayoutModifierNode for BadgedBoxLayout {
    fn measure(&self, input: &mut MeasureScope<'_>) -> Result<LayoutResult, MeasurementError> {
        let mut result = LayoutResult::default();
        let children = input.children();
        debug_assert_eq!(
            children.len(),
            2,
            "badged_box expects exactly two children: anchor and badge",
        );

        let parent_constraint = *input.parent_constraint().as_ref();
        let badge_constraint = Constraint::new(
            parent_constraint.width.without_min(),
            parent_constraint.height.without_min(),
        );

        let anchor = children[0];
        let badge = children[1];

        let badge_data = badge.measure(input, &badge_constraint)?;
        let anchor_size = anchor.measure(input, &parent_constraint)?;

        result.place_child(anchor, PxPosition::new(Px(0), Px(0)));

        let badge_size_px = badge_pixels(BadgeDefaults::SIZE);
        let has_content = badge_data.width > badge_size_px;

        let horizontal_offset = badge_pixels(if has_content {
            BadgeDefaults::WITH_CONTENT_HORIZONTAL_OFFSET
        } else {
            BadgeDefaults::OFFSET
        });

        let vertical_offset = badge_pixels(if has_content {
            BadgeDefaults::WITH_CONTENT_VERTICAL_OFFSET
        } else {
            BadgeDefaults::OFFSET
        });

        let badge_x = anchor_size.width - horizontal_offset;
        let badge_y = -badge_data.height + vertical_offset;

        result.place_child(badge, PxPosition::new(badge_x, badge_y));

        Ok(result.with_size(ComputedData {
            width: anchor_size.width,
            height: anchor_size.height,
        }))
    }
}

#[derive(Clone, Copy, PartialEq)]
struct BadgeLayout {
    container_color: Color,
}

impl tessera_ui::LayoutModifierNode for BadgeLayout {
    fn measure_eq(&self, _other: &Self) -> bool {
        true
    }

    fn placement_eq(&self, other: &Self) -> bool {
        self.measure_eq(other)
    }

    fn measure(&self, input: &mut MeasureScope<'_>) -> Result<LayoutResult, MeasurementError> {
        let size_px = badge_pixels(BadgeDefaults::SIZE);
        let intrinsic = Constraint::new(
            AxisConstraint::new(size_px, None),
            AxisConstraint::new(size_px, None),
        );
        let effective = Constraint::new(
            intrinsic.width.intersect(input.parent_constraint().width()),
            intrinsic
                .height
                .intersect(input.parent_constraint().height()),
        );

        let width = effective.width.clamp(size_px);
        let height = effective.height.clamp(size_px);

        Ok(LayoutResult::new(ComputedData { width, height }))
    }
}

impl tessera_ui::DrawModifierNode for BadgeLayout {
    fn draw(
        &self,
        ctx: &mut tessera_ui::DrawModifierContext<'_, '_>,
        content: &mut dyn tessera_ui::DrawModifierContent,
    ) {
        draw_badge(ctx, content, self.container_color);
    }
}

#[derive(Clone, Copy, PartialEq)]
struct BadgeWithContentLayout {
    container_color: Color,
    padding_px: Px,
}

impl tessera_ui::LayoutModifierNode for BadgeWithContentLayout {
    fn measure_eq(&self, other: &Self) -> bool {
        self.padding_px == other.padding_px
    }

    fn placement_eq(&self, other: &Self) -> bool {
        self.measure_eq(other)
    }

    fn measure(&self, input: &mut MeasureScope<'_>) -> Result<LayoutResult, MeasurementError> {
        let mut result = LayoutResult::default();
        let children = input.children();
        debug_assert_eq!(
            children.len(),
            1,
            "badge_with_content expects a single row child",
        );

        let min_size_px = badge_pixels(BadgeDefaults::LARGE_SIZE);
        let intrinsic = Constraint::new(
            AxisConstraint::new(min_size_px, None),
            AxisConstraint::new(min_size_px, None),
        );
        let effective = Constraint::new(
            intrinsic.width.intersect(input.parent_constraint().width()),
            intrinsic
                .height
                .intersect(input.parent_constraint().height()),
        );

        let max_width = effective
            .width
            .resolve_max()
            .map(|v| (v - self.padding_px * 2).max(Px(0)));
        let max_height = effective.height.resolve_max();

        let child_constraint = Constraint::new(
            AxisConstraint::new(Px::ZERO, max_width),
            AxisConstraint::new(Px::ZERO, max_height),
        );

        let row = children[0];
        let row_data = row.measure(input, &child_constraint)?;

        let measured_width = (row_data.width + self.padding_px * 2).max(min_size_px);
        let measured_height = row_data.height.max(min_size_px);

        let width = effective.width.clamp(measured_width);
        let height = effective.height.clamp(measured_height);

        let x = (width - row_data.width).max(Px(0)) / 2;
        let y = (height - row_data.height).max(Px(0)) / 2;
        result.place_child(row, PxPosition::new(x, y));

        Ok(result.with_size(ComputedData { width, height }))
    }
}

impl tessera_ui::DrawModifierNode for BadgeWithContentLayout {
    fn draw(
        &self,
        ctx: &mut tessera_ui::DrawModifierContext<'_, '_>,
        content: &mut dyn tessera_ui::DrawModifierContent,
    ) {
        draw_badge(ctx, content, self.container_color);
    }
}

fn draw_badge(
    ctx: &mut tessera_ui::DrawModifierContext<'_, '_>,
    content: &mut dyn tessera_ui::DrawModifierContent,
    color: Color,
) {
    let input = &mut *ctx.render_input;
    let mut metadata = input.metadata_mut();
    let size = metadata
        .computed_data()
        .expect("badge must have computed size before record");

    let ResolvedShape::Rounded {
        corner_radii,
        corner_g2,
    } = BadgeDefaults::SHAPE.resolve_for_size(PxSize::new(size.width, size.height))
    else {
        unreachable!("badge shape must resolve to a rounded rectangle");
    };

    metadata
        .fragment_mut()
        .push_draw_command(ShapeCommand::Rect {
            color,
            corner_radii,
            corner_g2,
        });
    content.draw(input);
}

/// Default values for [`badge`], [`badge_with_content`], and [`badged_box`].
pub struct BadgeDefaults;

impl BadgeDefaults {
    /// Default badge size when it has no content.
    pub const SIZE: Dp = Dp(6.0);
    /// Default badge size when it has content.
    pub const LARGE_SIZE: Dp = Dp(16.0);

    /// Default badge shape.
    pub const SHAPE: Shape = Shape::CAPSULE;

    /// Horizontal padding for badges with content.
    pub const WITH_CONTENT_HORIZONTAL_PADDING: Dp = Dp(4.0);

    /// Horizontal offset for badges with content relative to the anchor.
    pub const WITH_CONTENT_HORIZONTAL_OFFSET: Dp = Dp(12.0);
    /// Vertical offset for badges with content relative to the anchor.
    pub const WITH_CONTENT_VERTICAL_OFFSET: Dp = Dp(14.0);

    /// Offset for badges without content relative to the anchor.
    pub const OFFSET: Dp = Dp(6.0);

    /// Default light-theme container color for a badge.
    pub fn container_color() -> Color {
        MaterialTheme::default().color_scheme.error
    }
}

/// # badged_box
///
/// Positions a badge relative to an anchor element.
///
/// ## Usage
///
/// Display counts or status indicators on top of icons in navigation or
/// toolbars.
///
/// ## Parameters
///
/// - `badge` — badge slot rendered on top of content.
/// - `content` — anchor content slot.
/// - `modifier` — layout, drawing, and accessibility configuration.
///
/// ## Examples
///
/// ```rust
/// tessera_ui::testing::layout_test(|| {
///     tessera_components::badge::badged_box();
/// }).run();
/// ```
#[tessera]
pub fn badged_box(
    badge: Option<RenderSlot>,
    content: Option<RenderSlot>,
    modifier: Option<Modifier>,
) {
    layout()
        .modifier(modifier.unwrap_or_default())
        .policy(BadgedBoxLayout)
        .child(move || {
            boxed()
                .alignment(Alignment::Center)
                .children_shared(content.unwrap_or_else(RenderSlot::empty));
            boxed().children_shared(badge.unwrap_or_else(RenderSlot::empty));
        });
}

/// # badge
///
/// Renders an icon-only badge.
///
/// ## Usage
///
/// Mark an icon as having new activity without showing a numeric count.
///
/// ## Parameters
///
/// - `container_color` — optional background color of the badge.
/// - `content_color` — optional preferred content color for descendants.
/// - `modifier` — layout, drawing, and accessibility configuration.
///
/// ## Examples
///
/// ```rust
/// use tessera_components::badge::badge;
/// use tessera_ui::Color;
/// # use tessera_components::theme::{MaterialTheme, material_theme};
/// # use tessera_ui::tessera;
/// # #[tessera]
/// # fn component() {
/// # material_theme()
/// #     .theme(|| MaterialTheme::default())
/// #     .child(|| {
/// badge().content_color(Color::WHITE);
/// #     });
/// # }
/// # tessera_ui::testing::layout_test(component).run();
/// ```
#[tessera]
pub fn badge(
    container_color: Option<Color>,
    content_color: Option<Color>,
    modifier: Option<Modifier>,
) {
    let _ = content_color;
    let container_color = if let Some(color) = container_color {
        color
    } else {
        use_context::<MaterialTheme>()
            .expect("MaterialTheme must be provided")
            .get()
            .color_scheme
            .error
    };
    let policy = BadgeLayout { container_color };
    layout()
        .modifier(modifier.unwrap_or_default())
        .policy(policy)
        .draw(policy);
}

/// # badge_with_content
///
/// Renders a badge that contains short content, such as a number.
///
/// ## Usage
///
/// Display compact counts (for example, unread messages) on top of navigation
/// icons.
///
/// ## Parameters
///
/// - `container_color` — optional background color of the badge.
/// - `content_color` — optional preferred content color for descendants.
/// - `content` — optional content slot rendered inside the badge.
/// - `modifier` — layout, drawing, and accessibility configuration.
///
/// ## Examples
///
/// ```rust
/// use tessera_components::badge::badge_with_content;
/// use tessera_ui::Color;
/// # use tessera_components::theme::{MaterialTheme, material_theme};
/// # use tessera_ui::tessera;
/// # #[tessera]
/// # fn component() {
/// # material_theme()
/// #     .theme(|| MaterialTheme::default())
/// #     .child(|| {
/// badge_with_content()
///     .content_color(Color::WHITE)
///     .content(|| {});
/// #     });
/// # }
/// # tessera_ui::testing::layout_test(component).run();
/// ```
#[tessera]
pub fn badge_with_content(
    container_color: Option<Color>,
    content_color: Option<Color>,
    content: Option<RenderSlot>,
    modifier: Option<Modifier>,
) {
    let content = content.unwrap_or_else(RenderSlot::empty);
    let theme = use_context::<MaterialTheme>()
        .expect("MaterialTheme must be provided")
        .get();
    let scheme = theme.color_scheme;
    let typography = theme.typography;

    let container_color = container_color.unwrap_or(scheme.error);
    let content_color = if let Some(color) = content_color {
        color
    } else if let Some(color) = content_color_for(container_color, &scheme) {
        color
    } else {
        use_context::<ContentColor>()
            .map(|color| color.get().current)
            .unwrap_or(ContentColor::default().current)
    };

    let padding_px = badge_pixels(BadgeDefaults::WITH_CONTENT_HORIZONTAL_PADDING);
    let policy = BadgeWithContentLayout {
        container_color,
        padding_px,
    };
    layout()
        .modifier(modifier.unwrap_or_default())
        .policy(policy)
        .draw(policy)
        .child(move || {
            provide_context(
                || ContentColor {
                    current: content_color,
                },
                || {
                    let inherited = use_context::<ContentColor>().expect("badge content color");
                    if inherited.get().current != content_color {
                        inherited.set(ContentColor {
                            current: content_color,
                        });
                    }
                    provide_context(
                        || typography.label_small,
                        move || {
                            let inherited = use_context::<TextStyle>().expect("badge text style");
                            if inherited.get() != typography.label_small {
                                inherited.set(typography.label_small);
                            }
                            row()
                                .main_axis_alignment(MainAxisAlignment::Center)
                                .cross_axis_alignment(CrossAxisAlignment::Center)
                                .children_shared(content);
                        },
                    );
                },
            );
        });
}

#[cfg(test)]
mod tests;