Refactor upload component and add styled upload component

[Ifechukwu001]

Description

These changes add default styling to the upload component - It follows the same pattern as the form component, where the root method call accesses the unstyled component.

Some default styles were commented so as not to break a previous test in the rendering of forms (With permission, I'd like to refactor the test).

Closes #2967

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 change?

Type of change

• [ ✅ ] New feature (non-breaking change which adds functionality)
• [ ✅ ] 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?

[Ifechukwu001]

The commented styles break a previous form render test.

[Lendemor]

We should probably fix the test then, go ahead.

[Ifechukwu001]

The tests have been fixed. and I added some for the styled case.

[Ifechukwu001]

Added extra information to the PR

[Lendemor]

Can you make it work in dark mode too?

You could use var(--accent-12) instead of black for the color of the border.

[Ifechukwu001]

I'll work on that as well

[Ifechukwu001]

This is currently how the styled upload works.

[picklelo]

Looks good! Will do a more thorough review later this week and try to get this in the next release

[masenf]

If we have a separate class StyledUpload, we need to ensure that Upload.is_used gets set, regardless of which flavor of upload is actually used, so that the App mounts the upload endpoints

[Ifechukwu001]

I thought that calling the super() class method would set the variable, is there any need to set the is_used variable again?

[Lendemor]

I thought that calling the super() class method would set the variable, is there any need to set the is_used variable again?

This will only set the is_used in StyledUpload, but the framework enable the upload features when Upload.is_used is true, so it need to be set.

Simply adding the line Upload.is_used = True inside the StyledUpload.create is enough to make it work.

[Ifechukwu001]

I'm curious, I don't understand how the react component works as I haven't used React before, but If we decide to do super().is_used = True is that the same as Upload.is_used = True?

[Lendemor]

I'm curious, I don't understand how the react component works as I haven't used React before, but If we decide to do super().is_used = True is that the same as Upload.is_used = True?

In that case it has nothing to do with React, it's purely a python situation, if you try super().is_used = True it will throw an error saying super doesn't have an is_used attribute.

Test with the following example :

class Foo:
    is_used = False

    @classmethod
    def create(cls):
        cls.is_used = True
        return cls()

class Bar:
    is_used = False

    @classmethod
    def create(cls):
        cls.is_used = True
        return super()

Bar.create()

print(Foo.is_used, Bar.is_used)

[picklelo]

thanks for adding!