add responsive props to radix components

[adhami3310]

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?

[adhami3310]

One behavior we're missing is using list operator to define responsive props for radix components. Is this something we're interested in having? @picklelo

[adhami3310]

In the interest of easing merge requests, we can merge this and add list syntax radix props in another PR.

[masenf]

does this actually work if the Breakpoints is inside a Var? for example in state:

class S(rx.State):
    bps: rx.breakpoints.__self__ = rx.breakpoints(
        initial="1",
        xs="2",
        sm="2",
        md="3",
        lg="4",
        xl="5",
    )

def index():
    return rx.vstack(
        "hello world",
        "foo",
        "bar",
        "baz",
        spacing=S.bps,
    )

when i try it like that it kind of blows up

  File "/Users/masen/code/reflex-dev/reflex/reflex/components/component.py", line 811, in create
    return cls(children=children, **props)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/Users/masen/code/reflex-dev/reflex/reflex/components/component.py", line 444, in __init__
    and not types._issubclass(passed_type, expected_type, value)
            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/Users/masen/code/reflex-dev/reflex/reflex/utils/types.py", line 392, in _issubclass
    return _breakpoints_satisfies_typing(cls_check, instance)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/Users/masen/code/reflex-dev/reflex/reflex/utils/types.py", line 352, in _breakpoints_satisfies_typing
    return any(
           ^^^^
  File "/Users/masen/code/reflex-dev/reflex/reflex/utils/types.py", line 353, in <genexpr>
    _breakpoints_satisfies_typing(type_to_check, instance)
  File "/Users/masen/code/reflex-dev/reflex/reflex/utils/types.py", line 346, in _breakpoints_satisfies_typing
    for value in instance.values():
                 ^^^^^^^^^^^^^^^
  File "/Users/masen/code/reflex-dev/reflex/reflex/vars.py", line 819, in __getattr__
    raise VarAttributeError(
reflex.utils.exceptions.VarAttributeError: The State var `state__s.bps` has no attribute 'values' or may have been annotated wrongly.

i think, at least initially, we need to ensure that the Breakpoints is handled at compile time (i.e. cannot be in a dynamic frontend Var), or we need to ignore the type checking if the Breakpoints is in a Var.

I tend to lean toward the former, because we definitely cannot support Var[Breakpoint] for the CSS props as it's written now, so we shouldn't introduce an inconsistency between the two.

My other question is about Var within an rx.breakpoints dict, the type checking seems to get bungled up on this, but since the style props have no type checking, it actually does seem to work if the value comes from a Var

[adhami3310]

does this actually work if the Breakpoints is inside a Var?

Good catch! I think the issue I ran through was doing a union simply broke pydantic and I wasn't sure how, so that was the only thing that typechecked fine. I will see if it can be fixed more towards the right way.

[adhami3310]

It actually seems fine, we can handle breakpoints in var after fixing an issue with typing. But we do lose validation when used in a state.

[masenf]

will take this for now, but i have a followup PR to clean up some of the generated .pyi files coming