feat: Add support for missing SVGs

[ChinoUkaegbu]

Closes #3954

All Submissions:

• Have you followed the guidelines stated in CONTRIBUTING.md file?
• Have you checked to ensure there aren't any other open Pull Requests for the desired changed?

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

New Feature Submission:

• Does your submission pass the tests?
• Have you linted your code locally prior to submission?

Changes To Core Features:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your core changes, as applicable?
• Have you successfully ran tests with your changes locally?

After these steps, you're ready to open a pull request.

a. Give a descriptive title to your PR.

b. Describe your changes.

c. Put `closes #XXXX` in your comment to auto-close the issue that your PR fixes (if such).

[ElijahAhianyo]

Hi @ChinoUkaegbu , thanks for looking into this, can you provide some examples to test with? Will also be nice to add components for SVG radial_gradient and SVG text

[ChinoUkaegbu]

Sure thing! Just to clarify, do you mean unit tests (and if so where should I add them?) or just examples of the SVGs in use

[ElijahAhianyo]

Yes, just examples in the PR description will do

[Lendemor]

If you can, add some basic unit tests in tests/components/el/test_svg.py

They don't have to be too complicated, but at least check that create() call work, and that the result of .render() has the property "name" with the correct value.

You can use test/components/recharts/test_cartesian.py as a reference.

[ChinoUkaegbu]

Code for the examples:

def index() -> rx.Component:
    # Welcome Page (Index)
    return rx.container(
        rx.color_mode.button(position="top-right"),
        rx.vstack(
            rx.heading("Examples", size="9"),
            rx.hstack(
                rx.text("Ellipse Example", size="5"),
                rx.el.svg(rx.el.svg.ellipse(cx="100", cy="50", rx="60", ry="40")),
            ),
            rx.hstack(
                rx.text("Line Example", size="5"),
                rx.el.svg(rx.el.svg.line(x1="50", x2="200", y1="80", y2="90")),
            ),
            
            spacing="5",
            justify="center",
            min_height="85vh",
        ),
        rx.logo(),
    )

Images:

For the line component, it was only visible when I added stroke="black" in the console. Otherwise it was rendered but just wasn't visible

Does it make sense then to have stroke be a parameter defined in media.py?

[ChinoUkaegbu]

I'll work on radial_gradient, text and the tests in the meantime!

[Lendemor]

stroke is a CSS props, so I don't think it's needed as an explicit props for now.
Everything seems good, just need to refresh the pyi files to pass the CI 👍

[ChinoUkaegbu]

Also just wondering if there is a reason why bool is one of the types allowed for the coordinates in linearGradient?
https://github.com/reflex-dev/reflex/blob/main/reflex/components/el/elements/media.py#L385-L394

from the MDN docs it seems as though the value type is <length-percentage> | <number>

[ChinoUkaegbu]

Code for the radial gradient and text examples:

rx.hstack(
  rx.text("Radial Gradient Example", size="5"),
  rx.el.svg(
      rx.el.svg.defs(
          rx.el.svg.radial_gradient(
              rx.el.svg.stop(offset="10%", stop_color="gold"),
              rx.el.svg.stop(offset="95%", stop_color="red"),
              id="my_rad_grad", cx="50%", cy="50%", r="50%", fx="50%", fy="50%"
          )
      ),
      rx.el.svg.ellipse(cx="100", cy="50", rx="60", ry="40", fill="url('#my_rad_grad')")
  )
),
rx.hstack(
  rx.text("Text Example", size="5"),
  rx.el.svg(rx.el.svg.text("This is the example", x="5", y="15", rotate="30"))
),

Image:

[picklelo]

Also just wondering if there is a reason why bool is one of the types allowed for the coordinates in linearGradient? https://github.com/reflex-dev/reflex/blob/main/reflex/components/el/elements/media.py#L385-L394

from the MDN docs it seems as though the value type is |

I think this may be a copy+paste oversight, we should match the MDN docs

[picklelo]

thanks for adding!

[ChinoUkaegbu]

btw when i was working on this PR, the units directory in tests didn't exist so I believe test_svg.py should actually be in tests/units/components/el rather than in tests/components/el

[picklelo]

@ChinoUkaegbu sound good, we will move this in a follow up.