[REF-668] Wrap MyApp with radix Theme component #1867
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
TODO: working color mode
still not perfect, as the RadixColorModeProvider seems to trip hydration errors when using color_mode_cond component, but for now, this provides a nice balance between the two libraries and allows them to interoperate.
avoid templating json and applying it, avoid non-customizable logic just add the radix Theme component as an app wrap if the user specifies it to rx.App, and any other app-wrap theme-like component could _also_ be used without having to change the code. this also allows different themes for different sections of the app by simply placing elements inside a different rdxt.theme wrapper.
this is always used, regardless of the component library
we only need the compile result, we're not actually trying to install packages
until all of our components look good in dark mode, need to keep the default as light mode regardless of the system setting.
|
Looking at this now |
Alek99
approved these changes
Oct 16, 2023
import reflex as rx
import reflex.components.radix.themes as rdxt
class State(rx.State):
pass
def index() -> rx.Component:
return rdxt.box(
rx.color_mode_switch(),
rdxt.heading("Welcome to Reflex!"),
rdxt.flex(
rdxt.button("Click me!", variant="classic"),
rdxt.button("Click me!", variant="soft"),
rdxt.button("Click me!", variant="solid"),
rdxt.button("Click me!", variant="outline"),
rdxt.button("Click me!", variant="surface"),
gap="2",
),
rdxt.heading("."),
rdxt.flex(
rdxt.button("Click me!", variant="classic", high_contrast=True),
rdxt.button("Click me!", variant="soft", high_contrast=True),
rdxt.button("Click me!", variant="solid", high_contrast=True),
rdxt.button("Click me!", variant="outline", high_contrast=True),
rdxt.button("Click me!", variant="surface", high_contrast=True),
gap="2",
),
rdxt.theme_panel(),
)
# Add state and page to the app.
app = rx.App(theme=rdxt.theme(accent_color="grass"), overlay_component=None)
app.add_page(index)
app.compile()For anyone else |
Lendemor
pushed a commit
that referenced
this pull request
Oct 17, 2023
* partly add some radix-ui/themes based components * add @radix-ui/themes integration to top-level app * WiP: compile _app_wrap based on which component library is used TODO: working color mode * WiP get color mode working with agnostic provider still not perfect, as the RadixColorModeProvider seems to trip hydration errors when using color_mode_cond component, but for now, this provides a nice balance between the two libraries and allows them to interoperate. * WiP template _app.js instead of making a separate wrap file * WiP: use next-themes for consistent darkmode switching * strict pin chakra deps * Move ChakraColorModeProvider to separate js file * move nasty radix themes js code into js files * remove chakra from default imports * chakra fixup import to use .js extension * Add radix theme typography and layout components * do NOT special case the radix theme... avoid templating json and applying it, avoid non-customizable logic just add the radix Theme component as an app wrap if the user specifies it to rx.App, and any other app-wrap theme-like component could _also_ be used without having to change the code. this also allows different themes for different sections of the app by simply placing elements inside a different rdxt.theme wrapper. * Theme uses "radius" not "borderRadius" * move next-themes to main packages.json this is always used, regardless of the component library * test_app: test cases for app_wrap interface * Finish wrapping Button, Switch, and TextField components * docstring, comments, static fixups * debounce: use alias or tag when passing child Element Fix REF-830 * test_app: ruin my beautiful indentation * py38 compatibility * Add event triggers for switch and TextField * Add type hints for radix theme components * radix themes fixups from writing the tests * Add integration test for radix themes components * test_app: mock out package installation we only need the compile result, we're not actually trying to install packages * avoid incompatible version of @emotion/react * test_radix_themes: include theme_panel component * next-themes default scheme: "light" until all of our components look good in dark mode, need to keep the default as light mode regardless of the system setting.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
MVP to test radix-ui/themes integration with reflex.
Sample code
(hint: open Theme Panel via Cmd+C to play with colors, borders, etc)
I need to merge the pyi_generator changes up separately and update all existing pyi files, which will probably happen before this merges.