reflex icon indicating copy to clipboard operation
reflex copied to clipboard

[REF-2427] rx.upload should be styled by default

Open picklelo opened this issue 1 year ago β€’ 4 comments

We should have an opinionated look for rx.upload (currently it's fully unstyled) for better out of the box experience. We should always allow full bottoms-up customization as well.

From SyncLinear.com | REF-2427

picklelo avatar Mar 29 '24 19:03 picklelo

@picklelo Can I give this a shot? If yes, then could you provide a demo code on how to reproduce it? As far as I can think, we need to style a file upload by default if someone uses it without adding any styles.

AmanSal1 avatar Apr 02 '24 07:04 AmanSal1

@AmanSal1 yes that would be great! I'm thinking it should just have some style similar to what we have in the upload docs. Maybe just a border and the currently selected files could be included by default (the line with rx.hstack(rx.foreach(rx.selected_files("upload1"), rx.text))).

The only open question is what API we expose the fully styled upload as. Ideally the default rx.upload would be fully styled, while we have something like rx.upload.root for the unstyled upload, but I don't want to break any existing code.

We can maybe start by making this a separate function and then figure out how to make it work with the current upload.

picklelo avatar Apr 02 '24 16:04 picklelo

@picklelo In my opinion, renaming the existing rx.upload function is not ideal. This would be a breaking change, requiring updates to existing code and documentation. Additionally, it might disrupt users accustomed to the current behavior.

Alternative Approaches:

  1. New Function: Create a new function that utilizes rx.upload internally but adds styling elements like borders and selected file display. This approach maintains backward compatibility.

  2. Decorator: Implement a decorator function that can be applied to rx.upload. The decorator would add styling when a flag is set to True. This allows flexibility while keeping the original function name.

AmanSal1 avatar Apr 02 '24 18:04 AmanSal1

@AmanSal1 I like your suggestions regarding the alternative approaches, and I would love to try implementing the first approach.

Ifechukwu001 avatar Apr 05 '24 11:04 Ifechukwu001