Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

core: wrap plugins in div.uppy-Root and set dir attrubute in UIPlugin #3692

Merged
merged 17 commits into from
May 13, 2022

Conversation

arturi
Copy link
Contributor

@arturi arturi commented May 4, 2022

After some research I found that UI plugins that don't have a wrapper container started disappearing from the DOM, as reported in #3608. I suspect this started happening after #3072. A fix was proposed in #3609.

With this PR we:

  • Always wrap UIPlugins mounted to DOM in <div class="uppy-Root">, removing repetition from multiple UI plugins.
  • Set dir on said uppy-Root, so that we don't have to do it in UI plugins manually

It fixes #3608 and supersedes #3609.

Related: b41172d, where the wrapper with dir was added for the Dashboard.

@arturi arturi marked this pull request as draft May 4, 2022 23:27
Copy link
Member

@Murderlon Murderlon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the approach!

Can you check if #3550 can also be solved in this PR?

packages/@uppy/drag-drop/src/DragDrop.jsx Outdated Show resolved Hide resolved
packages/@uppy/core/src/UIPlugin.js Outdated Show resolved Hide resolved
arturi and others added 2 commits May 5, 2022 12:00
Co-authored-by: Merlijn Vos <merlijn@soverin.net>
Co-authored-by: Merlijn Vos <merlijn@soverin.net>
@arturi
Copy link
Contributor Author

arturi commented May 5, 2022

@goto-bus-stop what do you think? it changes dir that you added, wanted your check too, please.

@Murderlon
Copy link
Member

@arturi have you checked how this relates to #3550?

@goto-bus-stop
Copy link
Contributor

For dir, the only important part is that it must be set on a parent node of all nodes that could have RTL/LTR-specific styling. Or at least it was, because we were relying on a CSS transpile step to "polyfill" direction selectors, I don't know if that's still the case now that we target newer browsers only. But it should work this way I think.

@arturi arturi marked this pull request as ready for review May 12, 2022 19:03
@arturi
Copy link
Contributor Author

arturi commented May 12, 2022

@arturi have you checked how this relates to #3550?

Yes, couldn't find an easy solution to re-use div, so added wrapper CSS class names for Svelte and React for now. Could not test Angular and Vue examples just yet.

@arturi arturi merged commit 934ba79 into main May 13, 2022
@arturi arturi deleted the uiplugin-root-el-and-rtl branch May 13, 2022 10:04
@github-actions github-actions bot mentioned this pull request May 14, 2022
github-actions bot added a commit that referenced this pull request May 14, 2022
| Package                | Version | Package                | Version |
| ---------------------- | ------- | ---------------------- | ------- |
| @uppy/audio            |   0.3.1 | @uppy/provider-views   |   2.1.0 |
| @uppy/aws-s3           |   2.1.0 | @uppy/react            |   2.2.0 |
| @uppy/aws-s3-multipart |   2.3.0 | @uppy/react-native     |   0.3.0 |
| @uppy/companion-client |   2.1.0 | @uppy/screen-capture   |   2.1.0 |
| @uppy/core             |   2.2.0 | @uppy/status-bar       |   2.2.0 |
| @uppy/dashboard        |   2.2.0 | @uppy/svelte           |   1.0.8 |
| @uppy/drag-drop        |   2.1.0 | @uppy/transloadit      |   2.2.0 |
| @uppy/file-input       |   2.1.0 | @uppy/tus              |   2.3.0 |
| @uppy/google-drive     |   2.1.0 | @uppy/url              |   2.1.0 |
| @uppy/image-editor     |   1.2.0 | @uppy/webcam           |   2.2.0 |
| @uppy/instagram        |   2.1.0 | @uppy/xhr-upload       |   2.1.0 |
| @uppy/locales          |   2.1.0 | @uppy/zoom             |   1.1.0 |
| @uppy/onedrive         |   2.1.0 | @uppy/robodog          |   2.6.0 |
| @uppy/progress-bar     |   2.1.0 | uppy                   |  2.10.0 |

- @uppy/audio: fix types (Merlijn Vos / #3689)
- @uppy/aws-s3-multipart,@uppy/aws-s3,@uppy/core,@uppy/react,@uppy/transloadit,@uppy/tus,@uppy/xhr-upload: proposal: Cancel assemblies optional (Mikael Finstad / #3575)
- @uppy/aws-s3-multipart: export interface AwsS3MultipartOptions (Matteo Padovano / #3709)
- @uppy/companion-client: refactor to ESM (Antoine du Hamel / #3693)
- @uppy/companion: Only deploy on companion changes (kiloreux / #3677)
- @uppy/core: add definition for addFiles method (Matteo Padovano / #3556)
- @uppy/core: wrap plugins in div.uppy-Root and set dir attrubute in UIPlugin (Artur Paikin / #3692)
- @uppy/google-drive: refactor to ESM (Antoine du Hamel / #3683)
- @uppy/image-editor: refactor to ESM (Antoine du Hamel / #3685)
- @uppy/instagram: refactor to ESM (Antoine du Hamel / #3696)
- @uppy/locales: Add `save` translation to Spanish locale (Juan Carlos Alonso / #3678)
- @uppy/locales: refactor to ESM (Antoine du Hamel / #3707)
- @uppy/onedrive: refactor to ESM (Antoine du Hamel / #3694)
- @uppy/progress-bar: refactor to ESM (Antoine du Hamel / #3706)
- @uppy/provider-views: refactor to ESM (Antoine du Hamel / #3715)
- @uppy/react: Support React 18 in @uppy/react (Merlijn Vos / #3680)
- @uppy/screen-capture: refactor to ESM (Antoine du Hamel / #3698)
- @uppy/status-bar: refactor to ESM (Antoine du Hamel / #3697)
- @uppy/transloadit: add rate limiting for assembly creation and status polling (Antoine du Hamel / #3718)
- @uppy/tus: refactor to ESM (Antoine du Hamel / #3724)
- @uppy/url: refactor to ESM (Antoine du Hamel / #3713)
- @uppy/webcam: refactor to ESM (Antoine du Hamel / #3686)
- @uppy/xhr-upload: refactor to ESM (Antoine du Hamel / #3695)
- @uppy/zoom: refactor to ESM (Antoine du Hamel / #3699)
- meta: e2e: fix failing test (Antoine du Hamel / #3722)
- test: harden linter rule for JSX/ESM validation (Antoine du Hamel / #3681)
- test: harden linter rules for ESM/CJS validation (Antoine du Hamel / #3674)
- test: Increase retries to trigger longer retryDelay in tus (Artur Paikin / #3726)
- test: Remove `it.only` from e2e test (Merlijn Vos / #3690)
- tests: Make Cypress more stable & add e2e test for error events when upload fails (Merlijn Vos / #3662)
Murderlon added a commit that referenced this pull request May 16, 2022
* main:
  meta: fix dev env Vite's config
  Release: uppy@2.10.0 (#3727)
  add definition for addFiles method (#3556)
  @uppy/provider-views: refactor to ESM (#3715)
  @uppy/tus: refactor to ESM (#3724)
  Increase retries to trigger longer retryDelay in tus (#3726)
  @uppy/transloadit: add rate limiting for assembly creation and status polling (#3718)
  core: wrap plugins in div.uppy-Root and set dir attrubute in UIPlugin (#3692)
  e2e: fix failing test (#3722)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Webcam/Audio not being rendered?
4 participants