Dashboard --> DashboardUI --> Dashboard

src/plugins/Dashboard/index.js

@@ -1,7 +1,7 @@
 const Plugin = require('../../core/Plugin')
 const Translator = require('../../core/Translator')
 const dragDrop = require('drag-drop')
-const Dashboard = require('./Dashboard')
+const DashboardUI = require('./Dashboard')
 const StatusBar = require('../StatusBar')
 const Informer = require('../Informer')
 const { findAllDOMElements, toArray } = require('../../core/Utils')
@@ -25,7 +25,7 @@ const FOCUSABLE_ELEMENTS = [
 /**
  * Dashboard UI with previews, metadata editing, tabs for various services and more
  */
-module.exports = class DashboardUI extends Plugin {
+module.exports = class Dashboard extends Plugin {
   constructor (uppy, opts) {
     super(uppy, opts)
     this.id = this.opts.id || 'Dashboard'
@@ -419,7 +419,7 @@ module.exports = class DashboardUI extends Plugin {
       this.uppy.emit('dashboard:file-card')
     }
 
-    return Dashboard({
+    return DashboardUI({
       state: state,
       modal: pluginState,
       newFiles: newFiles,

src/plugins/FileInput.js

@@ -71,7 +71,7 @@ module.exports = class FileInput extends Plugin {
       zIndex: -1
     }
 
-    return <div class="Uppy uppy-FileInput-container">
+    return <div class="uppy uppy-FileInput-container">
       <input class="uppy-FileInput-input"
         style={this.opts.pretty && hiddenInputStyle}
         type="file"

src/plugins/Provider/view/Browser.js

@@ -13,7 +13,7 @@ module.exports = (props) => {
   }
 
   return (
-    <div class={`uppy-ProviderBrowser uppy-ProviderBrowser-viewType--${props.viewType}`}>
+    <div class={`uppy uppy-ProviderBrowser uppy-ProviderBrowser-viewType--${props.viewType}`}>
       <header class="uppy-ProviderBrowser-header">
         <div class="uppy-ProviderBrowser-search" aria-hidden={!props.isSearchVisible}>
           { props.isSearchVisible && <Filter {...props} /> }

src/plugins/StatusBar/StatusBar.js

@@ -123,7 +123,7 @@ module.exports = (props) => {
                            ${progressMode ? 'is-' + progressMode : ''}`
 
   return (
-    <div class={'uppy-StatusBar ' + `is-${uploadState}`} aria-hidden={isHidden}>
+    <div class={'uppy uppy-StatusBar ' + `is-${uploadState}`} aria-hidden={isHidden}>
       <div class={progressClasses}
         style={{ width: width + '%' }}
         role="progressbar"

src/plugins/StatusBar/index.js

@@ -1,6 +1,6 @@
 const Plugin = require('../../core/Plugin')
 const Translator = require('../../core/Translator')
-const StatusBar = require('./StatusBar')
+const StatusBarUI = require('./StatusBar')
 const { getSpeed } = require('../../core/Utils')
 const { getBytesRemaining } = require('../../core/Utils')
 const { prettyETA } = require('../../core/Utils')
@@ -9,7 +9,7 @@ const prettyBytes = require('prettier-bytes')
 /**
  * A status bar.
  */
-module.exports = class StatusBarUI extends Plugin {
+module.exports = class StatusBar extends Plugin {
   constructor (uppy, opts) {
     super(uppy, opts)
     this.id = this.opts.id || 'StatusBar'
@@ -141,7 +141,7 @@ module.exports = class StatusBarUI extends Plugin {
 
     const resumableUploads = this.uppy.getState().capabilities.resumableUploads || false
 
-    return StatusBar({
+    return StatusBarUI({
       error: state.error,
       totalProgress: state.totalProgress,
       totalSize: totalSize,

src/plugins/Webcam/CameraScreen.js

@@ -25,7 +25,7 @@ class CameraScreen extends Component {
     const shouldShowSnapshotButton = isModeAvailable(this.props.modes, 'picture')
 
     return (
-      <div class="uppy-Webcam-container">
+      <div class="uppy uppy-Webcam-container">
         <div class="uppy-Webcam-videoContainer">
           <video class="uppy-Webcam-video" autoplay muted src={this.props.src || ''} />
         </div>