Add missing rx.el.figure HTML element

[devin-ai-integration]

Add missing rx.el.figure HTML element

Summary

This PR implements the missing rx.el.figure HTML element that was reported in issue #5573. Users were getting an AttributeError when trying to use rx.el.figure because the element wasn't implemented in the framework.

The implementation follows the established pattern for HTML elements in Reflex:

• Added Figure class to reflex/components/el/elements/typography.py (alongside the existing Figcaption class)
• Added figure to the element mapping in reflex/components/el/elements/__init__.py
• Created convenience function figure = Figure.create

The HTML figure element is a standard semantic element used to represent self-contained content, often with a caption using figcaption. Since figcaption was already implemented in the typography module, placing figure there maintains logical grouping.

Review & Testing Checklist for Human

⚠️ Important: I was unable to fully test this implementation locally due to environment setup issues (missing pydantic dependency).

• Verify rx.el.figure actually works: Test that import reflex as rx; rx.el.figure("content") works without errors
• Test browser rendering: Create a simple Reflex app and verify that the figure element renders correctly in the browser
• Test with figcaption: Verify that rx.el.figure(rx.el.img(...), rx.el.figcaption("caption")) works as expected
• Test element attributes: Ensure standard HTML attributes work (id, class_name, style, etc.)

Recommended test plan:

import reflex as rx

def test_figure():
    return rx.el.figure(
        rx.el.img(src="https://via.placeholder.com/300x200", alt="Test image"),
        rx.el.figcaption("This is a test caption"),
        id="test-figure",
        style={"border": "1px solid #ccc", "padding": "10px"}
    )

---

Diagram

%%{ init : { "theme" : "default" }}%%
graph TD
    Issue5573["GitHub Issue #5573<br/>rx.el.figure missing"]
    TypographyPy["reflex/components/el/elements/<br/>typography.py"]:::major-edit
    InitPy["reflex/components/el/elements/<br/>__init__.py"]:::major-edit
    ElInit["reflex/components/el/<br/>__init__.py"]:::context
    HtmlConstants["reflex/components/el/constants/<br/>html.py"]:::context
    
    Issue5573 --> TypographyPy
    Issue5573 --> InitPy
    
    TypographyPy --> |"exports figure"| ElInit
    InitPy --> |"maps 'figure' to typography"| ElInit
    HtmlConstants --> |"figure already in ELEMENTS"| TypographyPy
    
    TypographyPy --> |"Figure class + convenience function"| FigureAPI["rx.el.figure API"]
    InitPy --> |"element mapping"| FigureAPI
    
    subgraph Legend
        L1[Major Edit]:::major-edit
        L2[Minor Edit]:::minor-edit  
        L3[Context/No Edit]:::context
    end
    
    classDef major-edit fill:#90EE90
    classDef minor-edit fill:#87CEEB
    classDef context fill:#FFFFFF

Loading

Notes

• The figure element was already present in reflex/components/el/constants/html.py, so no additional registration was needed there
• This change follows the exact same pattern as other HTML elements like Figcaption, Div, Hr, etc.
• Pre-commit hooks passed successfully, including type stub generation for the new Figure.create method
• The implementation is semantically correct - figure and figcaption are related HTML elements and belong together in the typography module

Link to Devin run: https://app.devin.ai/sessions/bb621b3b81da48149fbe7e18b7176433
Requested by: @adhami3310

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[greptile-apps]

Greptile Summary

This PR adds support for the HTML <figure> element to Reflex's typography components. The implementation includes:

1. Adding the figure element to the _MAPPING dictionary in __init__.py
2. Creating a new Figure class in typography.py that extends BaseHTML
3. Adding a corresponding figure factory function
4. Updating type definitions in pyi files

This addition complements the existing figcaption element support, allowing developers to create semantically correct markup for self-contained content like images, diagrams, or code snippets with captions.

PR Description Notes:

• The PR description is currently a placeholder and should be updated with actual implementation details

Confidence score: 5/5

1. This PR is extremely safe to merge as it follows established patterns and adds standard HTML functionality
2. The implementation is straightforward, follows existing patterns perfectly, and cannot introduce regressions
3. No files need special attention as the changes are minimal and well-structured

_{3 files reviewed, no comments
Edit PR Review Bot Settings | Greptile}

[codspeed-hq]

CodSpeed Performance Report

Merging #5575 will not alter performance

_{Comparing devin/1752601531-add-figure-element (fbcc052) with main (c5bfad4)}

Summary

✅ 8 untouched benchmarks

[adhami3310]

run uv run python -m reflex.utils.pyi_generator to regenerate the pyi files