Merge branch 'master' into more-network-errors

.travis.yml

@@ -77,13 +77,13 @@ jobs:
         script: bin/travis-deploy-companion
         on:
           branch: master
-    - name: 'Run Companion tests (Node.js 6)'
+    - name: 'Run Companion tests (Node.js 10)'
       node_js: 12
       services:
         - docker
       script:
-        - nvm install 6.0.0
-        - nvm use 6.0.0
+        - nvm install 10.0.0
+        - nvm use 10.0.0
         - npm run test:companion
     # Build the website when things are merged to master
     # https://docs.travis-ci.com/user/deployment/#Conditional-Releases-with-on

CHANGELOG.md

@@ -70,6 +70,7 @@ PRs are welcome! Please do open an issue to discuss first if it's a big feature,
 - [ ] xhr: set the `limit` option to a sensible default, like 10
 - [ ] companion: add more reliable tests to catch edge cases in companion. For example testing that oauth works for multiple companion instances that use a master Oauth domain.
 - [ ] transloadit: remove `UPPY_SERVER` constant
+- [ ] providers: allow changing provider name title through locale? https://github.com/transloadit/uppy/issues/2279
 
 ## 1.18
 
@@ -98,7 +99,6 @@ PRs are welcome! Please do open an issue to discuss first if it's a big feature,
 - [ ] core: add Vue.js wrapper component for the Dashboard (@arturi)
 - [ ] goldenretriever: confirmation before restore, add “ghost” files #443 #257 (@arturi) (@arturi)
 - [ ] dashboard: fix Dashboard issues with Angular — it’s incredibly slow presumably because of ResizeObserver. (See #1613) (@arturi)
-- [ ] dashboard: add VirtualList, so it can render 5000 files without lag (@goto-bus-stop, @lakesare)
 - [ ] dashboard: support for right-to-left languages (Arabic, Hebrew) (@arturi)
 - [ ] plugins: Transformations, cropping, filters for images, study https://github.com/MattKetmo/darkroomjs/, https://github.com/fengyuanchen/cropperjs #151 #53 (@arturi)
 - [ ] core: add maxTotalFileSize restriction #514 (@arturi)
@@ -116,7 +116,7 @@ This release features Bug Fixes And Performance Improvements™ (actually signif
 | @uppy/aws-s3-multipart | 1.7.0 | @uppy/onedrive | 1.1.6 |
 | @uppy/aws-s3 | 1.6.5 | @uppy/progress-bar | 1.3.14 |
 | @uppy/companion-client | 1.4.5 | @uppy/provider-views | 1.6.6 |
-| @uppy/companion | 2.0.0 | @uppy/react | 1.7.0 |
+| @uppy/companion | 2.0.0-alpha.3 | @uppy/react | 1.7.0 |
 | @uppy/core | 1.10.5 | @uppy/robodog | 1.6.7 |
 | @uppy/dashboard | 1.9.0 | @uppy/screen-capture | 1.0.2 |
 | @uppy/drag-drop | 1.4.13 | @uppy/status-bar | 1.6.6 |
@@ -140,7 +140,7 @@ This release features Bug Fixes And Performance Improvements™ (actually signif
 - @uppy/core: add more suggestions to console warning when incorrect `target` option is provided (#2242 / @goto-bus-stop)
 - @uppy/dashboard: add option to let users remove already uploaded files, UI only (#2284 / @arturi)
 - @uppy/dashboard: display error message for individual files (#2224 / @lafe)
-- @uppy/dashboard: render only visible files to the DOM to drastically improve performance (#2161 / @goto-bus-stop)
+- @uppy/dashboard: render only visible files to the DOM (VirtualList) to drastically improve performance (#2161 / @goto-bus-stop)
 - @uppy/drag-drop: add a more accessible `<label>` element for the hidden input (#2257 / @arturi)
 - @uppy/locales: add Bulgarian `bg_BG` (#2280 / @intenzive)
 - @uppy/locales: add Slovakian `sk_SK` (#2261 / @suchoproduction)

bin/make-new-versions-table

@@ -21,12 +21,13 @@ const commit = match[1]
 
 const tagStdout = execSync(`git tag --list --contains ${commit}`)
 const tags = tagStdout.toString()
-const rx = /([@/\w-]+)@(\d+\.\d+\.\d+)/g
+const rx = /([@\/\w-]+)@(\d+\.\d+\.\d+)(-alpha\.\d+|-beta\.\d+)?/g
 
 const versions = []
 let m
 while ((m = rx.exec(tags))) {
-  const [, pkg, version] = m
+  const [, pkg, versionPrefix, versionSuffix] = m
+  const version = `${versionPrefix}${versionSuffix || ''}`
   versions.push({ pkg, version })
 }
 

packages/@uppy/companion/src/companion.js

@@ -271,8 +271,6 @@ const getOptionsMiddleware = (options) => {
     }
 
     logger.info(`uppy client version ${req.companion.clientVersion}`, 'companion.client.version')
-    // @todo remove req.uppy in next major release
-    req.uppy = req.companion
     next()
   }
 

packages/@uppy/companion/src/server/Uploader.js

@@ -56,12 +56,6 @@ class Uploader {
     this.uploadFileName = this.options.metadata.name || path.basename(this.path)
     this.streamsEnded = false
     this.uploadStopped = false
-    this.duplexStream = null
-    // @TODO disabling parallel uploads and downloads for now
-    // if (this.options.protocol === PROTOCOLS.tus) {
-    //   this.duplexStream = new stream.PassThrough()
-    //     .on('error', (err) => logger.error(`${this.shortToken} ${err}`, 'uploader.duplex.error'))
-    // }
     this.writeStream = fs.createWriteStream(this.path, { mode: 0o666 }) // no executable files
       .on('error', (err) => logger.error(`${err}`, 'uploader.write.error', this.shortToken))
     /** @type {number} */
@@ -302,31 +296,8 @@ class Uploader {
     })
   }
 
-  /**
-   * @param {Buffer | Buffer[]} chunk
-   * @param {function} cb
-   */
-  writeToStreams (chunk, cb) {
-    const done = []
-    const doneLength = this.duplexStream ? 2 : 1
-    const onDone = () => {
-      done.push(true)
-      if (done.length >= doneLength) {
-        cb()
-      }
-    }
-
-    this.writeStream.write(chunk, onDone)
-    if (this.duplexStream) {
-      this.duplexStream.write(chunk, onDone)
-    }
-  }
-
   endStreams () {
     this.writeStream.end()
-    if (this.duplexStream) {
-      this.duplexStream.end()
-    }
   }
 
   getResponse () {

packages/@uppy/companion/src/server/controllers/oauth-redirect.js

@@ -1,5 +1,5 @@
 const qs = require('querystring')
-const parseUrl = require('url').parse // eslint-disable-line node/no-deprecated-api
+const { URL } = require('url')
 const { hasMatch } = require('../helpers/utils')
 const oAuthState = require('../helpers/oauth-state')
 
@@ -15,7 +15,7 @@ module.exports = function oauthRedirect (req, res) {
     return res.status(400).send('Cannot find state in session')
   }
   const handler = oAuthState.getFromState(state, 'companionInstance', req.companion.options.secret)
-  const handlerHostName = parseUrl(handler).host
+  const handlerHostName = (new URL(handler)).host
 
   if (hasMatch(handlerHostName, req.companion.options.server.validHosts)) {
     const providerName = req.companion.provider.authProvider

packages/@uppy/companion/src/server/controllers/send-token.js

@@ -3,7 +3,7 @@
  * sends auth token to uppy client
  */
 const tokenService = require('../helpers/jwt')
-const parseUrl = require('url').parse // eslint-disable-line node/no-deprecated-api
+const { URL } = require('url')
 const { hasMatch, sanitizeHtml } = require('../helpers/utils')
 const oAuthState = require('../helpers/oauth-state')
 const versionCmp = require('../helpers/version')
@@ -32,7 +32,7 @@ module.exports = function sendToken (req, res, next) {
     )
     const allowedClients = req.companion.options.clients
     // if no preset clients then allow any client
-    if (!allowedClients || hasMatch(origin, allowedClients) || hasMatch(parseUrl(origin).host, allowedClients)) {
+    if (!allowedClients || hasMatch(origin, allowedClients) || hasMatch((new URL(origin)).host, allowedClients)) {
       const allowsStringMessage = versionCmp.gte(clientVersion, '1.0.2')
       return res.send(allowsStringMessage ? htmlContent(uppyAuthToken, origin) : oldHtmlContent(uppyAuthToken, origin))
     }

packages/@uppy/companion/src/server/controllers/url.js

@@ -1,5 +1,6 @@
 const router = require('express').Router
 const request = require('request')
+const { URL } = require('url')
 const Uploader = require('../Uploader')
 const validator = require('validator')
 const utils = require('../helpers/utils')
@@ -30,7 +31,7 @@ const meta = (req, res) => {
     .then((meta) => res.json(meta))
     .catch((err) => {
       logger.error(err, 'controller.url.meta.error', req.id)
-      return res.status(500).json({ error: err })
+      return res.status(err.status || 500).json({ message: 'failed to fetch URL metadata' })
     })
 }
 
@@ -71,8 +72,7 @@ const get = (req, res) => {
       res.status(response.status).json(response.body)
     }).catch((err) => {
       logger.error(err, 'controller.url.get.error', req.id)
-      // @todo this should send back error (not err)
-      res.json({ err })
+      return res.status(err.status || 500).json({ message: 'failed to fetch URL metadata' })
     })
 }
 
@@ -114,7 +114,7 @@ const downloadURL = (url, onDataChunk, blockLocalIPs, traceId) => {
     uri: url,
     method: 'GET',
     followAllRedirects: true,
-    agentClass: getProtectedHttpAgent(utils.parseURL(url).protocol, blockLocalIPs)
+    agentClass: getProtectedHttpAgent((new URL(url)).protocol, blockLocalIPs)
   }
 
   request(opts)

packages/@uppy/companion/src/server/helpers/utils.js

@@ -1,5 +1,5 @@
 const request = require('request')
-const urlParser = require('url')
+const { URL } = require('url')
 const crypto = require('crypto')
 const { getProtectedHttpAgent } = require('./request')
 
@@ -43,17 +43,6 @@ exports.sanitizeHtml = (text) => {
   return text ? text.replace(/<\/?[^>]+(>|$)/g, '') : text
 }
 
-/**
- * Node 6(and beyond) compatible url parser
- * @todo drop the use of url.parse when support for node 6 is dropped
- *
- * @param {string} url URL to be parsed
- */
-exports.parseURL = (url) => {
-  // eslint-disable-next-line
-  return urlParser.URL ? new urlParser.URL(url) : urlParser.parse(url)
-}
-
 /**
  * Gets the size and content type of a url's content
  *
@@ -67,7 +56,7 @@ exports.getURLMeta = (url, blockLocalIPs = false) => {
       uri: url,
       method: 'HEAD',
       followAllRedirects: true,
-      agentClass: getProtectedHttpAgent(exports.parseURL(url).protocol, blockLocalIPs)
+      agentClass: getProtectedHttpAgent((new URL(url)).protocol, blockLocalIPs)
     }
 
     request(opts, (err, response, body) => {

packages/@uppy/companion/src/server/provider/index.js

@@ -46,7 +46,7 @@ module.exports.getProviderMiddleware = (providers) => {
  */
 module.exports.getDefaultProviders = (companionOptions) => {
   const { providerOptions } = companionOptions || { providerOptions: null }
-  // @todo: 2.0 we should rename drive to googledrive or google-drive or google
+  // @todo: we should rename drive to googledrive or google-drive or google
   const providers = { dropbox, drive, facebook, onedrive }
   // Instagram's Graph API key is just numbers, while the old API key is hex
   const usesGraphAPI = () => /^\d+$/.test(providerOptions.instagram.key)

packages/@uppy/companion/src/server/provider/instagram/graph/adapter.js

@@ -19,22 +19,8 @@ exports.getItemIcon = (item) => {
 exports.getItemSubList = (item) => {
   const newItems = []
   item.data.forEach((subItem) => {
-    // exclude videos because of bug https://developers.facebook.com/support/bugs/801145630390846/
-    // @todo remove this clause when bug is fixed
-    if (isVideo(subItem)) {
-      return
-    }
-
     if (subItem.media_type === MEDIA_TYPES.carousel) {
-      subItem.children.data.forEach((i) => {
-        // exclude videos because of bug https://developers.facebook.com/support/bugs/801145630390846/
-        // @todo remove this clause when bug is fixed
-        if (isVideo(i)) {
-          return
-        }
-
-        newItems.push(i)
-      })
+      subItem.children.data.forEach((i) => newItems.push(i))
     } else {
       newItems.push(subItem)
     }

packages/@uppy/companion/src/standalone/index.js

@@ -6,7 +6,7 @@ const morgan = require('morgan')
 const bodyParser = require('body-parser')
 const redis = require('../server/redis')
 const logger = require('../server/logger')
-const { parseURL } = require('../server/helpers/utils')
+const { URL } = require('url')
 const merge = require('lodash.merge')
 // @ts-ignore
 const promBundle = require('express-prom-bundle')
@@ -80,7 +80,7 @@ morgan.token('url', (req, res) => {
 morgan.token('referrer', (req, res) => {
   const ref = req.headers.referer || req.headers.referrer
   if (typeof ref === 'string') {
-    const parsed = parseURL(ref)
+    const parsed = new URL(ref)
     const rawQuery = qs.parse(parsed.search.replace('?', ''))
     const { query, censored } = censorQuery(rawQuery)
     return censored ? `${parsed.href.split('?')[0]}?${qs.stringify(query)}` : parsed.href

packages/@uppy/core/src/_common.scss

@@ -1,5 +1,5 @@
 /**
-* General Uppy styles that apply to everything inside the .Uppy container
+* General Uppy styles that apply to everything inside the .uppy-Root container
 */
 
 .uppy-Root {
@@ -21,16 +21,6 @@
   display: none;
 }
 
-// https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
-
-.UppyIcon {
-  max-width: 100%;
-  max-height: 100%;
-  fill: currentColor; /* no !important */
-  display: inline-block;
-  overflow: hidden;
-}
-
 // Utilities
 
 .uppy-u-reset {
@@ -122,6 +112,17 @@
   }
 }
 
+// Icon
+
+// https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
+.uppy-c-icon {
+  max-width: 100%;
+  max-height: 100%;
+  fill: currentColor;
+  display: inline-block;
+  overflow: hidden;
+}
+
 // Buttons
 
 .uppy-c-btn {

packages/@uppy/dashboard/src/components/AddFiles.js

@@ -1,4 +1,3 @@
-const { iconMyDevice } = require('./icons')
 const { h, Component } = require('preact')
 
 class AddFiles extends Component {
@@ -21,7 +20,7 @@ class AddFiles extends Component {
   renderPoweredByUppy () {
     const uppyBranding = (
       <span>
-        <svg aria-hidden="true" focusable="false" class="UppyIcon uppy-Dashboard-poweredByIcon" width="11" height="11" viewBox="0 0 11 11">
+        <svg aria-hidden="true" focusable="false" class="uppy-c-icon uppy-Dashboard-poweredByIcon" width="11" height="11" viewBox="0 0 11 11">
           <path d="M7.365 10.5l-.01-4.045h2.612L5.5.806l-4.467 5.65h2.604l.01 4.044h3.718z" fill-rule="evenodd" />
         </svg>
         <span class="uppy-Dashboard-poweredByUppy">Uppy</span>
@@ -47,14 +46,6 @@ class AddFiles extends Component {
     )
   }
 
-  renderCloudIcon = () => {
-    return (
-      <svg class="uppy-Dashboard-dropFilesIcon" aria-hidden="true" width="64" height="45" viewBox="0 0 64 45" xmlns="http://www.w3.org/2000/svg">
-        <path d="M38 44.932V31h8L33 15 20 31h8v13.932H13.538C6.075 44.932 0 38.774 0 31.202c0-6.1 4.06-11.512 9.873-13.162l.005-.017c.345-5.8 5.248-10.534 10.922-10.534.502 0 1.164.017 1.868.16C25.9 2.85 31.225 0 36.923 0c9.5 0 17.23 7.838 17.23 17.473l-.011.565.012.002C60.039 19.685 64 24.975 64 31.203c0 7.57-6.075 13.729-13.538 13.729H38z" fill="#E2E2E2" fill-rule="nonzero" />
-      </svg>
-    )
-  }
-
   renderHiddenFileInput = () => {
     return (
       <input
@@ -83,7 +74,12 @@ class AddFiles extends Component {
           data-uppy-super-focusable
           onclick={this.triggerFileInputClick}
         >
-          {iconMyDevice()}
+          <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
+            <g fill="none" fill-rule="evenodd">
+              <rect width="32" height="32" rx="16" fill="#2275D7" />
+              <path d="M21.973 21.152H9.863l-1.108-5.087h14.464l-1.246 5.087zM9.935 11.37h3.958l.886 1.444a.673.673 0 0 0 .585.316h6.506v1.37H9.935v-3.13zm14.898 3.44a.793.793 0 0 0-.616-.31h-.978v-2.126c0-.379-.275-.613-.653-.613H15.75l-.886-1.445a.673.673 0 0 0-.585-.316H9.232c-.378 0-.667.209-.667.587V14.5h-.782a.793.793 0 0 0-.61.303.795.795 0 0 0-.155.663l1.45 6.633c.078.36.396.618.764.618h13.354c.36 0 .674-.246.76-.595l1.631-6.636a.795.795 0 0 0-.144-.675z" fill="#FFF" />
+            </g>
+          </svg>
           <div class="uppy-DashboardTab-name">{this.props.i18n('myDevice')}</div>
         </button>
       </div>

packages/@uppy/dashboard/src/components/FileCard/index.scss

@@ -56,7 +56,7 @@
       }
     }
 
-      .uppy-Dashboard-FileCard-preview img.uppy-DashboardItem-previewImg {
+      .uppy-Dashboard-FileCard-preview img.uppy-Dashboard-Item-previewImg {
         max-width: 90%;
         max-height: 90%;
         object-fit: cover;

packages/@uppy/dashboard/src/components/FileItem/Buttons/index.js

@@ -1,8 +1,6 @@
 const { h } = require('preact')
 const copyToClipboard = require('../../../utils/copyToClipboard')
 
-const { iconPencil, iconCross, iconCopyLink } = require('../../icons')
-
 function EditButton ({
   file,
   uploadInProgressOrComplete,
@@ -15,13 +13,19 @@ function EditButton ({
       metaFields.length > 0) {
     return (
       <button
-        class="uppy-u-reset uppy-DashboardItem-action uppy-DashboardItem-action--edit"
+        class="uppy-u-reset uppy-Dashboard-Item-action uppy-Dashboard-Item-action--edit"
         type="button"
         aria-label={i18n('editFile') + ' ' + file.meta.name}
         title={i18n('editFile')}
         onclick={() => onClick()}
       >
-        {iconPencil()}
+        <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width="14" height="14" viewBox="0 0 14 14">
+          <g fill-rule="evenodd">
+            <path d="M1.5 10.793h2.793A1 1 0 0 0 5 10.5L11.5 4a1 1 0 0 0 0-1.414L9.707.793a1 1 0 0 0-1.414 0l-6.5 6.5A1 1 0 0 0 1.5 8v2.793zm1-1V8L9 1.5l1.793 1.793-6.5 6.5H2.5z" fill-rule="nonzero" />
+            <rect x="1" y="12.293" width="11" height="1" rx=".5" />
+            <path fill-rule="nonzero" d="M6.793 2.5L9.5 5.207l.707-.707L7.5 1.793z" />
+          </g>
+        </svg>
       </button>
     )
   }
@@ -31,13 +35,16 @@ function EditButton ({
 function RemoveButton ({ i18n, onClick }) {
   return (
     <button
-      class="uppy-u-reset uppy-DashboardItem-action uppy-DashboardItem-action--remove"
+      class="uppy-u-reset uppy-Dashboard-Item-action uppy-Dashboard-Item-action--remove"
       type="button"
       aria-label={i18n('removeFile')}
       title={i18n('removeFile')}
       onclick={() => onClick()}
     >
-      {iconCross()}
+      <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width="18" height="18" viewBox="0 0 18 18">
+        <path d="M9 0C4.034 0 0 4.034 0 9s4.034 9 9 9 9-4.034 9-9-4.034-9-9-9z" />
+        <path fill="#FFF" d="M13 12.222l-.778.778L9 9.778 5.778 13 5 12.222 8.222 9 5 5.778 5.778 5 9 8.222 12.222 5l.778.778L9.778 9z" />
+      </svg>
     </button>
   )
 }
@@ -56,35 +63,19 @@ const copyLinkToClipboard = (event, props) => {
 function CopyLinkButton (props) {
   return (
     <button
-      class="uppy-u-reset uppy-DashboardItem-action uppy-DashboardItem-action--copyLink"
+      class="uppy-u-reset uppy-Dashboard-Item-action uppy-Dashboard-Item-action--copyLink"
       type="button"
       aria-label={props.i18n('copyLink')}
       title={props.i18n('copyLink')}
       onclick={(event) => copyLinkToClipboard(event, props)}
     >
-      {iconCopyLink()}
+      <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width="14" height="14" viewBox="0 0 14 12">
+        <path d="M7.94 7.703a2.613 2.613 0 0 1-.626 2.681l-.852.851a2.597 2.597 0 0 1-1.849.766A2.616 2.616 0 0 1 2.764 7.54l.852-.852a2.596 2.596 0 0 1 2.69-.625L5.267 7.099a1.44 1.44 0 0 0-.833.407l-.852.851a1.458 1.458 0 0 0 1.03 2.486c.39 0 .755-.152 1.03-.426l.852-.852c.231-.231.363-.522.406-.824l1.04-1.038zm4.295-5.937A2.596 2.596 0 0 0 10.387 1c-.698 0-1.355.272-1.849.766l-.852.851a2.614 2.614 0 0 0-.624 2.688l1.036-1.036c.041-.304.173-.6.407-.833l.852-.852c.275-.275.64-.426 1.03-.426a1.458 1.458 0 0 1 1.03 2.486l-.852.851a1.442 1.442 0 0 1-.824.406l-1.04 1.04a2.596 2.596 0 0 0 2.683-.628l.851-.85a2.616 2.616 0 0 0 0-3.697zm-6.88 6.883a.577.577 0 0 0 .82 0l3.474-3.474a.579.579 0 1 0-.819-.82L5.355 7.83a.579.579 0 0 0 0 .819z" />
+      </svg>
     </button>
   )
 }
 
-function ErrorButton ({ file, onClick }) {
-  if (file.error) {
-    return (
-      <span
-        class="uppy-DashboardItem-errorDetails"
-        aria-label={file.error}
-        data-microtip-position="bottom-left"
-        data-microtip-size="medium"
-        role="tooltip"
-        onclick={onClick}
-      >
-        ?
-      </span>
-    )
-  }
-  return null
-}
-
 module.exports = function Buttons (props) {
   const {
     file,
@@ -100,13 +91,7 @@ module.exports = function Buttons (props) {
   } = props
 
   return (
-    <div className="uppy-DashboardItem-actionWrapper">
-      <ErrorButton
-        file={file}
-        onClick={() => {
-          alert(file.error)
-        }}
-      />
+    <div className="uppy-Dashboard-Item-actionWrapper">
       <EditButton
         i18n={i18n}
         file={file}

packages/@uppy/dashboard/src/components/FileItem/Buttons/index.scss

@@ -1,5 +1,5 @@
 // On both mobile and .md+ screens
-.uppy-DashboardItem-action {
+.uppy-Dashboard-Item-action {
   @include blue-border-focus;
   cursor: pointer;
   color: $gray-500;
@@ -19,7 +19,7 @@
   }  
 }
 
-.uppy-DashboardItem-action--remove {
+.uppy-Dashboard-Item-action--remove {
   color: $gray-900;
   opacity: 0.95;
 
@@ -40,12 +40,12 @@
 // Only for mobile screens
 .uppy-Dashboard:not(.uppy-size--md) {
   // Vertically center Edit&Remove buttons on mobile
-  .uppy-DashboardItem-actionWrapper {
+  .uppy-Dashboard-Item-actionWrapper {
     display: flex;
     align-items: center;
   }
   // Same inline design for Edit, Remove, and CopyLink buttons
-  .uppy-DashboardItem-action {
+  .uppy-Dashboard-Item-action {
     width: 22px;
     height: 22px;
     padding: 3px;
@@ -59,8 +59,8 @@
 // Only for screens bigger than .md
 .uppy-size--md {
   // Edit and CopyLink buttons are inline
-  .uppy-DashboardItem-action--copyLink,
-  .uppy-DashboardItem-action--edit {
+  .uppy-Dashboard-Item-action--copyLink,
+  .uppy-Dashboard-Item-action--edit {
     width: 16px;
     height: 16px;
     padding: 0;
@@ -69,7 +69,7 @@
     }
   }
   // Remove button is in the top right corner
-  .uppy-DashboardItem-action--remove {
+  .uppy-Dashboard-Item-action--remove {
     z-index: $zIndex-3;
     position: absolute;
     top: -8px;

packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.js

@@ -10,7 +10,7 @@ const renderAcquirerIcon = (acquirer, props) =>
 const renderFileSource = (props) => (
   props.file.source &&
   props.file.source !== props.id &&
-    <div class="uppy-DashboardItem-sourceIcon">
+    <div class="uppy-Dashboard-Item-sourceIcon">
       {props.acquirers.map(acquirer => {
         if (acquirer.id === props.file.source) {
           return renderAcquirerIcon(acquirer, props)
@@ -34,7 +34,7 @@ const renderFileName = (props) => {
   }
 
   return (
-    <div class="uppy-DashboardItem-name" title={props.file.meta.name}>
+    <div class="uppy-Dashboard-Item-name" title={props.file.meta.name}>
       {truncateString(props.file.meta.name, maxNameLength)}
     </div>
   )
@@ -42,18 +42,42 @@ const renderFileName = (props) => {
 
 const renderFileSize = (props) => (
   props.file.data.size &&
-    <div class="uppy-DashboardItem-statusSize">
+    <div class="uppy-Dashboard-Item-statusSize">
       {prettierBytes(props.file.data.size)}
     </div>
 )
 
+const ErrorButton = ({ file, onClick }) => {
+  if (file.error) {
+    return (
+      <span
+        class="uppy-Dashboard-Item-errorDetails"
+        aria-label={file.error}
+        data-microtip-position="bottom"
+        data-microtip-size="medium"
+        role="tooltip"
+        onclick={onClick}
+      >
+        ?
+      </span>
+    )
+  }
+  return null
+}
+
 module.exports = function FileInfo (props) {
   return (
-    <div class="uppy-DashboardItem-fileInfo" data-uppy-file-source={props.file.source}>
+    <div class="uppy-Dashboard-Item-fileInfo" data-uppy-file-source={props.file.source}>
       {renderFileName(props)}
-      <div class="uppy-DashboardItem-status">
+      <div class="uppy-Dashboard-Item-status">
         {renderFileSize(props)}
         {renderFileSource(props)}
+        <ErrorButton
+          file={props.file}
+          onClick={() => {
+            alert(props.file.error)
+          }}
+        />
       </div>
     </div>
   )

packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.scss

@@ -1,7 +1,7 @@
-.uppy-DashboardItem-fileInfo {
+.uppy-Dashboard-Item-fileInfo {
   padding-right: 5px;
 }
-  .uppy-DashboardItem-name {
+  .uppy-Dashboard-Item-name {
     font-size: 12px;
     line-height: 1.3;
     font-weight: 500;
@@ -17,7 +17,7 @@
     }
   }
 
-  .uppy-DashboardItem-status {
+  .uppy-Dashboard-Item-status {
     font-size: 11px;
     line-height: 1.3;
     font-weight: normal;
@@ -27,12 +27,12 @@
       color: $gray-400;
     }
   }
-    .uppy-DashboardItem-statusSize {
+    .uppy-Dashboard-Item-statusSize {
       display: inline-block;
       vertical-align: bottom;
       text-transform: uppercase;
     }
-    .uppy-DashboardItem-sourceIcon {
+    .uppy-Dashboard-Item-sourceIcon {
       // display: inline-block;
       display: none;
       vertical-align: bottom;
@@ -53,5 +53,5 @@
         height: 12px;
       }
     }
-  // ...uppy-DashboardItem-status|
-// ...uppy-DashboardItem-fileInfo|
+  // ...uppy-Dashboard-Item-status|
+// ...uppy-Dashboard-Item-fileInfo|

packages/@uppy/dashboard/src/components/FileItem/FilePreviewAndLink/index.js

@@ -5,14 +5,14 @@ const getFileTypeIcon = require('../../../utils/getFileTypeIcon')
 module.exports = function FilePreviewAndLink (props) {
   return (
     <div
-      class="uppy-DashboardItem-previewInnerWrap"
+      class="uppy-Dashboard-Item-previewInnerWrap"
       style={{ backgroundColor: getFileTypeIcon(props.file.type).color }}
     >
       {
         props.showLinkToFileUploadResult &&
         props.file.uploadURL &&
           <a
-            class="uppy-DashboardItem-previewLink"
+            class="uppy-Dashboard-Item-previewLink"
             href={props.file.uploadURL}
             rel="noreferrer noopener"
             target="_blank"

packages/@uppy/dashboard/src/components/FileItem/FilePreviewAndLink/index.scss

@@ -1,4 +1,4 @@
-.uppy-DashboardItem-previewInnerWrap {
+.uppy-Dashboard-Item-previewInnerWrap {
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -17,7 +17,7 @@
     box-shadow: 0 1px 2px rgba($black, 0.15);
   }
 }
-  .uppy-DashboardItem-previewInnerWrap:after {
+  .uppy-Dashboard-Item-previewInnerWrap:after {
     content: '';
     position: absolute;
     left: 0; right: 0;
@@ -27,7 +27,7 @@
     z-index: $zIndex-2;
   }
 
-  .uppy-DashboardItem-previewLink {
+  .uppy-Dashboard-Item-previewLink {
     position: absolute;
     left: 0; right: 0;
     top: 0; bottom: 0;
@@ -42,7 +42,7 @@
     }
   }
 
-  .uppy-DashboardItem-preview img.uppy-DashboardItem-previewImg {
+  .uppy-Dashboard-Item-preview img.uppy-Dashboard-Item-previewImg {
     width: 100%;
     height: 100%;
     object-fit: cover;
@@ -52,4 +52,4 @@
     // We need a repeated border-radius because of the transform.
     border-radius: 3px;
   }
-// ...uppy-DashboardItem-previewInnerWrap|
+// ...uppy-Dashboard-Item-previewInnerWrap|

packages/@uppy/dashboard/src/components/FileItem/FileProgress/PauseResumeCancelIcon.js

@@ -1,37 +0,0 @@
-const { h } = require('preact')
-
-// http://codepen.io/Harkko/pen/rVxvNM
-// https://css-tricks.com/svg-line-animation-works/
-// https://gist.github.com/eswak/ad4ea57bcd5ff7aa5d42
-
-// circle length equals 2 * PI * R
-const circleLength = 2 * Math.PI * 15
-
-// stroke-dashoffset is a percentage of the progress from circleLength,
-// substracted from circleLength, because its an offset
-module.exports = function PauseResumeCancelIcon (props) {
-  return (
-    <svg aria-hidden="true" focusable="false" width="70" height="70" viewBox="0 0 36 36" class="UppyIcon UppyIcon-progressCircle">
-      <g class="progress-group">
-        <circle class="bg" r="15" cx="18" cy="18" stroke-width="2" fill="none" />
-        <circle
-          class="progress" r="15" cx="18" cy="18" transform="rotate(-90, 18, 18)" stroke-width="2" fill="none"
-          stroke-dasharray={circleLength}
-          stroke-dashoffset={circleLength - (circleLength / 100 * props.progress)}
-        />
-      </g>
-      {
-        !props.hidePauseResumeCancelButtons &&
-          <g>
-            <polygon class="play" transform="translate(3, 3)" points="12 20 12 10 20 15" />
-            <g class="pause" transform="translate(14.5, 13)">
-              <rect x="0" y="0" width="2" height="10" rx="0" />
-              <rect x="5" y="0" width="2" height="10" rx="0" />
-            </g>
-            <polygon class="cancel" transform="translate(2, 2)" points="19.8856516 11.0625 16 14.9481516 12.1019737 11.0625 11.0625 12.1143484 14.9481516 16 11.0625 19.8980263 12.1019737 20.9375 16 17.0518484 19.8856516 20.9375 20.9375 19.8980263 17.0518484 16 20.9375 12" />
-          </g>
-      }
-      <polygon class="check" transform="translate(2, 3)" points="14 22.5 7 15.2457065 8.99985857 13.1732815 14 18.3547104 22.9729883 9 25 11.1005634" />
-    </svg>
-  )
-}

packages/@uppy/dashboard/src/components/FileItem/FileProgress/index.js

@@ -1,6 +1,4 @@
 const { h } = require('preact')
-const { iconRetry } = require('../../icons')
-const PauseResumeCancelIcon = require('./PauseResumeCancelIcon')
 
 function onPauseResumeCancelRetry (props) {
   if (props.isUploaded) return
@@ -10,13 +8,9 @@ function onPauseResumeCancelRetry (props) {
     return
   }
 
-  if (props.hidePauseResumeCancelButtons) {
-    return
-  }
-
-  if (props.resumableUploads) {
+  if (props.resumableUploads && !props.hidePauseResumeButton) {
     props.pauseUpload(props.file.id)
-  } else if (props.individualCancellation) {
+  } else if (props.individualCancellation && !props.hideCancelButton) {
     props.cancelUpload(props.file.id)
   }
 }
@@ -42,44 +36,128 @@ function progressIndicatorTitle (props) {
   return ''
 }
 
+function ProgressIndicatorButton (props) {
+  return (
+    <div class="uppy-Dashboard-Item-progress">
+      <button
+        class="uppy-u-reset uppy-Dashboard-Item-progressIndicator"
+        type="button"
+        aria-label={progressIndicatorTitle(props)}
+        title={progressIndicatorTitle(props)}
+        onclick={() => onPauseResumeCancelRetry(props)}
+      >
+        {props.children}
+      </button>
+    </div>
+  )
+}
+
+function ProgressCircleContainer ({ children }) {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      width="70"
+      height="70"
+      viewBox="0 0 36 36"
+      class="uppy-c-icon uppy-Dashboard-Item-progressIcon--circle"
+    >
+      {children}
+    </svg>
+  )
+}
+
+function ProgressCircle ({ progress }) {
+  // circle length equals 2 * PI * R
+  const circleLength = 2 * Math.PI * 15
+
+  return (
+    <g>
+      <circle class="uppy-Dashboard-Item-progressIcon--bg" r="15" cx="18" cy="18" stroke-width="2" fill="none" />
+      <circle
+        class="uppy-Dashboard-Item-progressIcon--progress" r="15" cx="18" cy="18" transform="rotate(-90, 18, 18)" stroke-width="2" fill="none"
+        stroke-dasharray={circleLength}
+        stroke-dashoffset={circleLength - (circleLength / 100 * progress)}
+      />
+    </g>
+  )
+}
+
 module.exports = function FileProgress (props) {
-  if ((props.hideRetryButton && props.error) ||
-      (props.isUploaded && props.showRemoveButtonAfterComplete)) {
-    return <div class="uppy-DashboardItem-progress" />
-  } else if (
-    props.isUploaded ||
-    (props.hidePauseResumeCancelButtons && !props.error)
-  ) {
+  // Nothing if upload has not started
+  if (!props.file.progress.uploadStarted) {
+    return null
+  }
+
+  // Green checkmark when complete
+  if (props.isUploaded) {
     return (
-      <div class="uppy-DashboardItem-progress">
-        <div class="uppy-DashboardItem-progressIndicator">
-          <PauseResumeCancelIcon
-            progress={props.file.progress.percentage}
-            hidePauseResumeCancelButtons={props.hidePauseResumeCancelButtons}
-          />
+      <div class="uppy-Dashboard-Item-progress">
+        <div class="uppy-Dashboard-Item-progressIndicator">
+          <ProgressCircleContainer>
+            <circle r="15" cx="18" cy="18" fill="#1bb240" />
+            <polygon class="uppy-Dashboard-Item-progressIcon--check" transform="translate(2, 3)" points="14 22.5 7 15.2457065 8.99985857 13.1732815 14 18.3547104 22.9729883 9 25 11.1005634" />
+          </ProgressCircleContainer>
         </div>
       </div>
     )
-  } else {
+  }
+
+  // Retry button for error
+  if (props.error && !props.hideRetryButton) {
     return (
-      <div class="uppy-DashboardItem-progress">
-        <button
-          class="uppy-u-reset uppy-DashboardItem-progressIndicator"
-          type="button"
-          aria-label={progressIndicatorTitle(props)}
-          title={progressIndicatorTitle(props)}
-          onclick={() => onPauseResumeCancelRetry(props)}
-        >
-          {props.error ? (
-            props.hideRetryButton ? null : iconRetry()
-          ) : (
-            <PauseResumeCancelIcon
-              progress={props.file.progress.percentage}
-              hidePauseResumeCancelButtons={props.hidePauseResumeCancelButtons}
-            />
-          )}
-        </button>
-      </div>
+      <ProgressIndicatorButton {...props}>
+        <svg aria-hidden="true" focusable="false" class="uppy-c-icon uppy-Dashboard-Item-progressIcon--retry" width="28" height="31" viewBox="0 0 16 19">
+          <path d="M16 11a8 8 0 1 1-8-8v2a6 6 0 1 0 6 6h2z" />
+          <path d="M7.9 3H10v2H7.9z" />
+          <path d="M8.536.5l3.535 3.536-1.414 1.414L7.12 1.914z" />
+          <path d="M10.657 2.621l1.414 1.415L8.536 7.57 7.12 6.157z" />
+        </svg>
+      </ProgressIndicatorButton>
+    )
+  }
+
+  // Pause/resume button for resumable uploads
+  if (props.resumableUploads && !props.hidePauseResumeButton) {
+    return (
+      <ProgressIndicatorButton {...props}>
+        <ProgressCircleContainer>
+          <ProgressCircle progress={props.file.progress.percentage} />
+          {
+            props.file.isPaused
+              ? <polygon class="uppy-Dashboard-Item-progressIcon--play" transform="translate(3, 3)" points="12 20 12 10 20 15" />
+              : (
+                <g class="uppy-Dashboard-Item-progressIcon--pause" transform="translate(14.5, 13)">
+                  <rect x="0" y="0" width="2" height="10" rx="0" />
+                  <rect x="5" y="0" width="2" height="10" rx="0" />
+                </g>
+              )
+          }
+        </ProgressCircleContainer>
+      </ProgressIndicatorButton>
     )
   }
+
+  // Cancel button for non-resumable uploads if individualCancellation is supported (not bundled)
+  if (!props.resumableUploads && props.individualCancellation && !props.hideCancelButton) {
+    return (
+      <ProgressIndicatorButton {...props}>
+        <ProgressCircleContainer>
+          <ProgressCircle progress={props.file.progress.percentage} />
+          <polygon class="cancel" transform="translate(2, 2)" points="19.8856516 11.0625 16 14.9481516 12.1019737 11.0625 11.0625 12.1143484 14.9481516 16 11.0625 19.8980263 12.1019737 20.9375 16 17.0518484 19.8856516 20.9375 20.9375 19.8980263 17.0518484 16 20.9375 12" />
+        </ProgressCircleContainer>
+      </ProgressIndicatorButton>
+    )
+  }
+
+  // Just progress when buttons are disabled
+  return (
+    <div class="uppy-Dashboard-Item-progress">
+      <div class="uppy-Dashboard-Item-progressIndicator">
+        <ProgressCircleContainer>
+          <ProgressCircle progress={props.file.progress.percentage} />
+        </ProgressCircleContainer>
+      </div>
+    </div>
+  )
 }

packages/@uppy/dashboard/src/components/FileItem/FileProgress/index.scss

@@ -1,5 +1,4 @@
-.uppy-DashboardItem-progress {
-  display: none;
+.uppy-Dashboard-Item-progress {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -10,79 +9,84 @@
   width: 120px;
   transition: all .35 ease;
 }
-  .uppy-DashboardItem-progressIndicator {
+
+.uppy-Dashboard-Item-progressIndicator {
+  display: inline-block;
+  width: 38px;
+  height: 38px;
+  opacity: 0.9;
+
+  .uppy-size--md & {
+    width: 55px;
+    height: 55px;
+  }
+}
+
+  button.uppy-Dashboard-Item-progressIndicator {
     @include clear-focus;
-    display: inline-block;
-    width: 38px;
-    height: 38px;
-    opacity: 0.9;
     cursor: pointer;
-    &:focus{
-      svg.UppyIcon-progressCircle .bg,
-      svg.retry{
+
+    &:focus {
+      .uppy-Dashboard-Item-progressIcon--bg,
+      .uppy-Dashboard-Item-progressIcon--retry {
         fill: lighten($blue, 20%);
       }
     }
   }
-// ...uppy-DashboardItem-progress|
 
-svg.UppyIcon-progressCircle {
+// ProgressCircle svg styles
+
+.uppy-Dashboard-Item-progressIcon--circle {
   width: 100%;
   height: 100%;
-  .bg {
-    stroke: rgba($white, 0.4);
-    opacity: 0;
-  }
-  .progress {
-    stroke: $white;
-    transition: stroke-dashoffset .5s ease-out;
-    opacity: 0;
-  }
-  .play {
-    stroke: $white;
-    fill: $white;
-    opacity: 0;
-    transition: all 0.2s;
-    display: none;
-  }
-  .cancel {
-    fill: $white;
-    opacity: 0;
-    transition: all 0.2s;
-  }
-  .pause {
-    stroke: $white;
-    fill: $white;
-    opacity: 0;
-    transition: all 0.2s;
-    display: none;
-  }
-  .check {
-    opacity: 0;
-    fill: $white;
-    transition: all 0.2s;
-  }
 }
-svg.UppyIcon.retry {
+
+.uppy-Dashboard-Item-progressIcon--bg {
+  stroke: rgba($white, 0.4);
+}
+
+.uppy-Dashboard-Item-progressIcon--progress {
+  stroke: $white;
+  transition: stroke-dashoffset .5s ease-out;
+}
+
+.uppy-Dashboard-Item-progressIcon--play {
+  stroke: $white;
+  fill: $white;
+  transition: all 0.2s;
+}
+
+.uppy-Dashboard-Item-progressIcon--cancel {
   fill: $white;
+  transition: all 0.2s;
 }
 
+.uppy-Dashboard-Item-progressIcon--pause {
+  stroke: $white;
+  fill: $white;
+  transition: all 0.2s;
+}
+
+.uppy-Dashboard-Item-progressIcon--check {
+  fill: $white;
+  transition: all 0.2s;
+}
+
+.uppy-Dashboard-Item-progressIcon--retry {
+  fill: $white;
+}
 
 // Svg styles that depend on the state of the file.
-.uppy-DashboardItem.is-complete .uppy-DashboardItem-progress {
+
+.uppy-Dashboard-Item.is-complete .uppy-Dashboard-Item-progress {
   transform: initial;
   top: -9px;
   right: -8px;
   left: initial;
   width: auto;
 }
-.uppy-DashboardItem.is-inprogress .uppy-DashboardItem-progress,
-.uppy-DashboardItem.is-complete .uppy-DashboardItem-progress,
-.uppy-DashboardItem.is-error .uppy-DashboardItem-progress {
-  display: block;
-}
 
-.uppy-DashboardItem.is-error .uppy-DashboardItem-progressIndicator {
+.uppy-Dashboard-Item.is-error .uppy-Dashboard-Item-progressIndicator {
   width: 18px;
   height: 18px;
 
@@ -92,7 +96,7 @@ svg.UppyIcon.retry {
   }
 }
 
-.uppy-DashboardItem.is-complete .uppy-DashboardItem-progressIndicator {
+.uppy-Dashboard-Item.is-complete .uppy-Dashboard-Item-progressIndicator {
   width: 18px;
   height: 18px;
   opacity: 1;
@@ -103,57 +107,6 @@ svg.UppyIcon.retry {
   }
 }
 
-.uppy-DashboardItem.is-paused svg.UppyIcon-progressCircle {
-  .pause {
-    opacity: 0;
-  }
-  .play {
-    opacity: 1;
-  }
-}
-
-.uppy-DashboardItem.is-noIndividualCancellation {
-  .uppy-DashboardItem-progressIndicator {
-    cursor: default;
-  }
-
-  .cancel {
-    display: none;
-  }
-}
-
-.uppy-DashboardItem.is-processing .uppy-DashboardItem-progress {
+.uppy-Dashboard-Item.is-processing .uppy-Dashboard-Item-progress {
   opacity: 0;
 }
-
-.uppy-DashboardItem.is-complete {
-  .uppy-DashboardItem-progressIndicator {
-    cursor: default;
-  }
-
-  .progress {
-    stroke: $green;
-    fill: $green;
-    opacity: 1;
-  }
-
-  .check {
-    opacity: 1;
-  }
-}
-
-.uppy-size--md .uppy-DashboardItem-progressIndicator {
-  width: 55px;
-  height: 55px;
-}
-
-.uppy-DashboardItem.is-resumable {
-  .pause, .play { display: block; }
-  .cancel { display: none; }
-}
-
-.uppy-DashboardItem.is-inprogress {
-  .bg, .progress, .pause, .cancel {
-    opacity: 1;
-  }
-}

packages/@uppy/dashboard/src/components/FileItem/index.js

@@ -32,7 +32,6 @@ module.exports = class FileItem extends Component {
     const isUploaded = file.progress.uploadComplete && !isProcessing && !file.error
     const uploadInProgressOrComplete = file.progress.uploadStarted || isProcessing
     const uploadInProgress = (file.progress.uploadStarted && !file.progress.uploadComplete) || isProcessing
-    const isPaused = file.isPaused || false
     const error = file.error || false
 
     let showRemoveButton = this.props.individualCancellation
@@ -44,12 +43,10 @@ module.exports = class FileItem extends Component {
     }
 
     const dashboardItemClass = classNames({
-      'uppy-u-reset': true,
-      'uppy-DashboardItem': true,
+      'uppy-Dashboard-Item': true,
       'is-inprogress': uploadInProgress,
       'is-processing': isProcessing,
       'is-complete': isUploaded,
-      'is-paused': isPaused,
       'is-error': !!error,
       'is-resumable': this.props.resumableUploads,
       'is-noIndividualCancellation': !this.props.individualCancellation
@@ -61,7 +58,7 @@ module.exports = class FileItem extends Component {
         id={`uppy_${file.id}`}
         role={this.props.role}
       >
-        <div class="uppy-DashboardItem-preview">
+        <div class="uppy-Dashboard-Item-preview">
           <FilePreviewAndLink
             file={file}
             showLinkToFileUploadResult={this.props.showLinkToFileUploadResult}
@@ -72,7 +69,9 @@ module.exports = class FileItem extends Component {
             isUploaded={isUploaded}
 
             hideRetryButton={this.props.hideRetryButton}
-            hidePauseResumeCancelButtons={this.props.hidePauseResumeCancelButtons}
+            hideCancelButton={this.props.hideCancelButton}
+            hidePauseResumeButton={this.props.hidePauseResumeButton}
+
             showRemoveButtonAfterComplete={this.props.showRemoveButtonAfterComplete}
 
             resumableUploads={this.props.resumableUploads}
@@ -85,7 +84,7 @@ module.exports = class FileItem extends Component {
           />
         </div>
 
-        <div class="uppy-DashboardItem-fileInfoAndButtons">
+        <div class="uppy-Dashboard-Item-fileInfoAndButtons">
           <FileInfo
             file={file}
             id={this.props.id}

packages/@uppy/dashboard/src/components/FileItem/index.scss

@@ -3,7 +3,7 @@
 @import './FileInfo/index.scss';
 @import './Buttons/index.scss';
 
-.uppy-DashboardItem {
+.uppy-Dashboard-Item {
   display: flex;
   align-items: center;
   border-bottom: 1px solid $gray-200;
@@ -44,7 +44,7 @@
   }
 }
 
-  .uppy-DashboardItem-preview {
+  .uppy-Dashboard-Item-preview {
     // for the FileProgress.js icons
     position: relative;
 
@@ -68,7 +68,7 @@
     }
   }
 
-  .uppy-DashboardItem-fileInfoAndButtons {
+  .uppy-Dashboard-Item-fileInfoAndButtons {
     flex-grow: 1;
     padding-right: 8px;
     padding-left: 12px;
@@ -85,55 +85,52 @@
     }
   }
 
-    .uppy-DashboardItem-fileInfo {
+    .uppy-Dashboard-Item-fileInfo {
       flex-grow: 1;
       flex-shrink: 1;
     }
 
-    .uppy-DashboardItem-actionWrapper {
+    .uppy-Dashboard-Item-actionWrapper {
       flex-grow: 0;
       flex-shrink: 0;
     }
-  // ...uppy-DashboardItem-fileInfoAndButtons|
-// ...uppy-DashboardItem|
+  // ...uppy-Dashboard-Item-fileInfoAndButtons|
+// ...uppy-Dashboard-Item|
 
 
-// Css that depends on status of the file (could be logic in js instead?)
-.uppy-DashboardItem.is-inprogress {
-  .uppy-DashboardItem-previewInnerWrap:after {
+// CSS that depends on status of the file (could be logic in js instead?)
+.uppy-Dashboard-Item.is-inprogress,
+.uppy-Dashboard-Item.is-error {
+  .uppy-Dashboard-Item-previewInnerWrap:after {
     display: block;
   }
 }
-.uppy-DashboardItem.is-error {
-  .uppy-DashboardItem-previewInnerWrap:after {
-    display: block;
-  }
-}
-.uppy-DashboardItem.is-inprogress:not(.is-resumable) {
-  .uppy-DashboardItem-action--remove {
+
+.uppy-Dashboard-Item.is-inprogress:not(.is-resumable) {
+  .uppy-Dashboard-Item-action--remove {
     display: none;
   }
 }
 
-.uppy-DashboardItem-errorDetails {
+.uppy-Dashboard-Item-errorDetails {
   line-height: 12px;
-  width: 13px;
-  height: 13px;
+  width: 12px;
+  height: 12px;
   display: inline-block;
   vertical-align: middle;
   color: $white;
   background-color: $gray-500;
   border-radius: 50%;
   position: relative;
-  top: 0;
-  left: 2px;
-  font-size: 10px;
+  top: -1px;
+  left: 6px;
+  font-size: 8px;
   font-weight: 600;
   text-align: center;
   cursor: help;
 }
 
-  .uppy-DashboardItem-errorDetails:after {
+  .uppy-Dashboard-Item-errorDetails:after {
     line-height: 1.3;
     word-wrap: break-word;
   }

packages/@uppy/dashboard/src/components/FileList.js

@@ -47,7 +47,8 @@ module.exports = (props) => {
     individualCancellation: props.individualCancellation,
     // visual options
     hideRetryButton: props.hideRetryButton,
-    hidePauseResumeCancelButtons: props.hidePauseResumeCancelButtons,
+    hidePauseResumeButton: props.hidePauseResumeButton,
+    hideCancelButton: props.hideCancelButton,
     showLinkToFileUploadResult: props.showLinkToFileUploadResult,
     showRemoveButtonAfterComplete: props.showRemoveButtonAfterComplete,
     isWide: props.isWide,

packages/@uppy/dashboard/src/components/FilePreview.js

@@ -5,15 +5,17 @@ module.exports = function FilePreview (props) {
   const file = props.file
 
   if (file.preview) {
-    return <img class="uppy-DashboardItem-previewImg" alt={file.name} src={file.preview} />
+    return <img class="uppy-Dashboard-Item-previewImg" alt={file.name} src={file.preview} />
   }
 
   const { color, icon } = getFileTypeIcon(file.type)
 
   return (
-    <div class="uppy-DashboardItem-previewIconWrap">
-      <span class="uppy-DashboardItem-previewIcon" style={{ color: color }}>{icon}</span>
-      <svg aria-hidden="true" focusable="false" class="uppy-DashboardItem-previewIconBg" width="58" height="76" viewBox="0 0 58 76"><rect fill="#FFF" width="58" height="76" rx="3" fill-rule="evenodd" /></svg>
+    <div class="uppy-Dashboard-Item-previewIconWrap">
+      <span class="uppy-Dashboard-Item-previewIcon" style={{ color: color }}>{icon}</span>
+      <svg aria-hidden="true" focusable="false" class="uppy-Dashboard-Item-previewIconBg" width="58" height="76" viewBox="0 0 58 76">
+        <rect fill="#FFF" width="58" height="76" rx="3" fill-rule="evenodd" />
+      </svg>
     </div>
   )
 }

packages/@uppy/dashboard/src/components/PickerPanelTopBar.js

@@ -1,5 +1,4 @@
 const { h } = require('preact')
-const { iconPlus } = require('./icons')
 
 const uploadStates = {
   STATE_ERROR: 'error',
@@ -102,7 +101,9 @@ function PanelTopBar (props) {
           title={props.i18n('addMoreFiles')}
           onclick={() => props.toggleAddFilesPanel(true)}
         >
-          {iconPlus()}
+          <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width="15" height="15" viewBox="0 0 15 15">
+            <path d="M8 6.5h6a.5.5 0 0 1 .5.5v.5a.5.5 0 0 1-.5.5H8v6a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5V8h-6a.5.5 0 0 1-.5-.5V7a.5.5 0 0 1 .5-.5h6v-6A.5.5 0 0 1 7 0h.5a.5.5 0 0 1 .5.5v6z" />
+          </svg>
           <span class="uppy-DashboardContent-addMoreCaption">{props.i18n('addMore')}</span>
         </button>
       ) : (

packages/@uppy/dashboard/src/components/icons.js

@@ -1,201 +0,0 @@
-const { h } = require('preact')
-
-// https://css-tricks.com/creating-svg-icon-system-react/
-
-function defaultPickerIcon () {
-  return (
-    <svg aria-hidden="true" focusable="false" width="30" height="30" viewBox="0 0 30 30">
-      <path d="M15 30c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15zm4.258-12.676v6.846h-8.426v-6.846H5.204l9.82-12.364 9.82 12.364H19.26z" />
-    </svg>
-  )
-}
-
-function iconCopy () {
-  return (
-    <svg aria-hidden="true" focusable="false" class="UppyIcon" width="51" height="51" viewBox="0 0 51 51">
-      <path d="M17.21 45.765a5.394 5.394 0 0 1-7.62 0l-4.12-4.122a5.393 5.393 0 0 1 0-7.618l6.774-6.775-2.404-2.404-6.775 6.776c-3.424 3.427-3.424 9 0 12.426l4.12 4.123a8.766 8.766 0 0 0 6.216 2.57c2.25 0 4.5-.858 6.214-2.57l13.55-13.552a8.72 8.72 0 0 0 2.575-6.213 8.73 8.73 0 0 0-2.575-6.213l-4.123-4.12-2.404 2.404 4.123 4.12a5.352 5.352 0 0 1 1.58 3.81c0 1.438-.562 2.79-1.58 3.808l-13.55 13.55z" />
-      <path d="M44.256 2.858A8.728 8.728 0 0 0 38.043.283h-.002a8.73 8.73 0 0 0-6.212 2.574l-13.55 13.55a8.725 8.725 0 0 0-2.575 6.214 8.73 8.73 0 0 0 2.574 6.216l4.12 4.12 2.405-2.403-4.12-4.12a5.357 5.357 0 0 1-1.58-3.812c0-1.437.562-2.79 1.58-3.808l13.55-13.55a5.348 5.348 0 0 1 3.81-1.58c1.44 0 2.792.562 3.81 1.58l4.12 4.12c2.1 2.1 2.1 5.518 0 7.617L39.2 23.775l2.404 2.404 6.775-6.777c3.426-3.427 3.426-9 0-12.426l-4.12-4.12z" />
-    </svg>
-  )
-}
-
-function iconResume () {
-  return (
-    <svg aria-hidden="true" focusable="false" class="UppyIcon" width="25" height="25" viewBox="0 0 44 44">
-      <polygon class="play" transform="translate(6, 5.5)" points="13 21.6666667 13 11 21 16.3333333" />
-    </svg>
-  )
-}
-
-function iconPause () {
-  return (
-    <svg aria-hidden="true" focusable="false" class="UppyIcon" width="25px" height="25px" viewBox="0 0 44 44">
-      <g transform="translate(18, 17)" class="pause">
-        <rect x="0" y="0" width="2" height="10" rx="0" />
-        <rect x="6" y="0" width="2" height="10" rx="0" />
-      </g>
-    </svg>
-  )
-}
-
-function localIcon () {
-  return (
-    <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-      <g fill="none" fill-rule="evenodd">
-        <rect fill="#5B5B5B" width="32" height="32" rx="16" />
-        <g fill="#FFF" fill-rule="nonzero">
-          <path d="M11.31 12.504a.185.185 0 0 0 .167.104h2.868v2.324c0 .898.741 1.328 1.655 1.328.913 0 1.653-.43 1.653-1.328v-2.324h2.868c.073 0 .137-.04.169-.104a.18.18 0 0 0-.027-.192l-4.524-5.25a.187.187 0 0 0-.28 0l-4.52 5.25a.179.179 0 0 0-.029.192z" />
-          <path d="M22.4 10.018c-.13-.45-.32-.703-.716-.703h-2.877l.603.699h2.34l1.21 6.541h-4.263v1.617h-5.296v-1.615H9.039l1.577-6.542h1.973l.603-.7h-2.877c-.396 0-.628.273-.717.703L8 16.752v4.185c0 .486.4.878.895.878h14.21a.887.887 0 0 0 .895-.878v-4.185l-1.6-6.734z" />
-        </g>
-      </g>
-    </svg>
-  )
-}
-
-function iconMyDevice () {
-  return (
-    <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-      <g fill="none" fill-rule="evenodd">
-        <rect width="32" height="32" rx="16" fill="#2275D7" />
-        <path d="M21.973 21.152H9.863l-1.108-5.087h14.464l-1.246 5.087zM9.935 11.37h3.958l.886 1.444a.673.673 0 0 0 .585.316h6.506v1.37H9.935v-3.13zm14.898 3.44a.793.793 0 0 0-.616-.31h-.978v-2.126c0-.379-.275-.613-.653-.613H15.75l-.886-1.445a.673.673 0 0 0-.585-.316H9.232c-.378 0-.667.209-.667.587V14.5h-.782a.793.793 0 0 0-.61.303.795.795 0 0 0-.155.663l1.45 6.633c.078.36.396.618.764.618h13.354c.36 0 .674-.246.76-.595l1.631-6.636a.795.795 0 0 0-.144-.675z" fill="#FFF" />
-      </g>
-    </svg>
-  )
-}
-
-function iconRetry () {
-  return (
-    <svg aria-hidden="true" focusable="false" class="UppyIcon retry" width="28" height="31" viewBox="0 0 16 19">
-      <path d="M16 11a8 8 0 1 1-8-8v2a6 6 0 1 0 6 6h2z" />
-      <path d="M7.9 3H10v2H7.9z" />
-      <path d="M8.536.5l3.535 3.536-1.414 1.414L7.12 1.914z" />
-      <path d="M10.657 2.621l1.414 1.415L8.536 7.57 7.12 6.157z" />
-    </svg>
-  )
-}
-
-function checkIcon () {
-  return (
-    <svg aria-hidden="true" focusable="false" class="UppyIcon UppyIcon-check" width="13" height="9" viewBox="0 0 13 9">
-      <polygon points="5 7.293 1.354 3.647 0.646 4.354 5 8.707 12.354 1.354 11.646 0.647" />
-    </svg>
-  )
-}
-
-function iconImage () {
-  return (
-    <svg aria-hidden="true" focusable="false" width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
-      <g fill="#686DE0" fill-rule="evenodd">
-        <path d="M5 7v10h15V7H5zm0-1h15a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1z" fill-rule="nonzero" />
-        <path d="M6.35 17.172l4.994-5.026a.5.5 0 0 1 .707 0l2.16 2.16 3.505-3.505a.5.5 0 0 1 .707 0l2.336 2.31-.707.72-1.983-1.97-3.505 3.505a.5.5 0 0 1-.707 0l-2.16-2.159-3.938 3.939-1.409.026z" fill-rule="nonzero" />
-        <circle cx="7.5" cy="9.5" r="1.5" />
-      </g>
-    </svg>
-  )
-}
-
-function iconAudio () {
-  return (
-    <svg aria-hidden="true" focusable="false" class="UppyIcon" width="25" height="25" viewBox="0 0 25 25">
-      <path d="M9.5 18.64c0 1.14-1.145 2-2.5 2s-2.5-.86-2.5-2c0-1.14 1.145-2 2.5-2 .557 0 1.079.145 1.5.396V7.25a.5.5 0 0 1 .379-.485l9-2.25A.5.5 0 0 1 18.5 5v11.64c0 1.14-1.145 2-2.5 2s-2.5-.86-2.5-2c0-1.14 1.145-2 2.5-2 .557 0 1.079.145 1.5.396V8.67l-8 2v7.97zm8-11v-2l-8 2v2l8-2zM7 19.64c.855 0 1.5-.484 1.5-1s-.645-1-1.5-1-1.5.484-1.5 1 .645 1 1.5 1zm9-2c.855 0 1.5-.484 1.5-1s-.645-1-1.5-1-1.5.484-1.5 1 .645 1 1.5 1z" fill="#049BCF" fill-rule="nonzero" />
-    </svg>
-  )
-}
-
-function iconVideo () {
-  return (
-    <svg aria-hidden="true" focusable="false" class="UppyIcon" width="25" height="25" viewBox="0 0 25 25">
-      <path d="M16 11.834l4.486-2.691A1 1 0 0 1 22 10v6a1 1 0 0 1-1.514.857L16 14.167V17a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v2.834zM15 9H5v8h10V9zm1 4l5 3v-6l-5 3z" fill="#19AF67" fill-rule="nonzero" />
-    </svg>
-  )
-}
-
-function iconPDF () {
-  return (
-    <svg aria-hidden="true" focusable="false" class="UppyIcon" width="25" height="25" viewBox="0 0 25 25">
-      <path d="M9.766 8.295c-.691-1.843-.539-3.401.747-3.726 1.643-.414 2.505.938 2.39 3.299-.039.79-.194 1.662-.537 3.148.324.49.66.967 1.055 1.51.17.231.382.488.629.757 1.866-.128 3.653.114 4.918.655 1.487.635 2.192 1.685 1.614 2.84-.566 1.133-1.839 1.084-3.416.249-1.141-.604-2.457-1.634-3.51-2.707a13.467 13.467 0 0 0-2.238.426c-1.392 4.051-4.534 6.453-5.707 4.572-.986-1.58 1.38-4.206 4.914-5.375.097-.322.185-.656.264-1.001.08-.353.306-1.31.407-1.737-.678-1.059-1.2-2.031-1.53-2.91zm2.098 4.87c-.033.144-.068.287-.104.427l.033-.01-.012.038a14.065 14.065 0 0 1 1.02-.197l-.032-.033.052-.004a7.902 7.902 0 0 1-.208-.271c-.197-.27-.38-.526-.555-.775l-.006.028-.002-.003c-.076.323-.148.632-.186.8zm5.77 2.978c1.143.605 1.832.632 2.054.187.26-.519-.087-1.034-1.113-1.473-.911-.39-2.175-.608-3.55-.608.845.766 1.787 1.459 2.609 1.894zM6.559 18.789c.14.223.693.16 1.425-.413.827-.648 1.61-1.747 2.208-3.206-2.563 1.064-4.102 2.867-3.633 3.62zm5.345-10.97c.088-1.793-.351-2.48-1.146-2.28-.473.119-.564 1.05-.056 2.405.213.566.52 1.188.908 1.859.18-.858.268-1.453.294-1.984z" fill="#E2514A" fill-rule="nonzero" />
-    </svg>
-  )
-}
-
-function iconArchive () {
-  return (
-    <svg aria-hidden="true" focusable="false" width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
-      <path d="M10.45 2.05h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5V2.55a.5.5 0 0 1 .5-.5zm2.05 1.024h1.05a.5.5 0 0 1 .5.5V3.6a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5v-.001zM10.45 0h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5V.5a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.024a.5.5 0 0 1 .5-.5zm-2.05 3.074h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.024a.5.5 0 0 1 .5-.5zm-2.05 1.024h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm-2.05 1.025h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.024a.5.5 0 0 1 .5-.5zm-1.656 3.074l-.82 5.946c.52.302 1.174.458 1.976.458.803 0 1.455-.156 1.975-.458l-.82-5.946h-2.311zm0-1.025h2.312c.512 0 .946.378 1.015.885l.82 5.946c.056.412-.142.817-.501 1.026-.686.398-1.515.597-2.49.597-.974 0-1.804-.199-2.49-.597a1.025 1.025 0 0 1-.5-1.026l.819-5.946c.07-.507.503-.885 1.015-.885zm.545 6.6a.5.5 0 0 1-.397-.561l.143-.999a.5.5 0 0 1 .495-.429h.74a.5.5 0 0 1 .495.43l.143.998a.5.5 0 0 1-.397.561c-.404.08-.819.08-1.222 0z" fill="#00C469" fill-rule="nonzero" />
-    </svg>
-  )
-}
-
-function iconFile () {
-  return (
-    <svg aria-hidden="true" focusable="false" class="UppyIcon" width="25" height="25" viewBox="0 0 25 25">
-      <g fill="#A7AFB7" fill-rule="nonzero">
-        <path d="M5.5 22a.5.5 0 0 1-.5-.5v-18a.5.5 0 0 1 .5-.5h10.719a.5.5 0 0 1 .367.16l3.281 3.556a.5.5 0 0 1 .133.339V21.5a.5.5 0 0 1-.5.5h-14zm.5-1h13V7.25L16 4H6v17z" />
-        <path d="M15 4v3a1 1 0 0 0 1 1h3V7h-3V4h-1z" />
-      </g>
-    </svg>
-  )
-}
-
-function iconText () {
-  return (
-    <svg aria-hidden="true" focusable="false" class="UppyIcon" width="25" height="25" viewBox="0 0 25 25">
-      <path d="M4.5 7h13a.5.5 0 1 1 0 1h-13a.5.5 0 0 1 0-1zm0 3h15a.5.5 0 1 1 0 1h-15a.5.5 0 1 1 0-1zm0 3h15a.5.5 0 1 1 0 1h-15a.5.5 0 1 1 0-1zm0 3h10a.5.5 0 1 1 0 1h-10a.5.5 0 1 1 0-1z" fill="#5A5E69" fill-rule="nonzero" />
-    </svg>
-  )
-}
-
-function iconCopyLink () {
-  return (
-    <svg aria-hidden="true" focusable="false" class="UppyIcon" width="14" height="14" viewBox="0 0 14 12">
-      <path d="M7.94 7.703a2.613 2.613 0 0 1-.626 2.681l-.852.851a2.597 2.597 0 0 1-1.849.766A2.616 2.616 0 0 1 2.764 7.54l.852-.852a2.596 2.596 0 0 1 2.69-.625L5.267 7.099a1.44 1.44 0 0 0-.833.407l-.852.851a1.458 1.458 0 0 0 1.03 2.486c.39 0 .755-.152 1.03-.426l.852-.852c.231-.231.363-.522.406-.824l1.04-1.038zm4.295-5.937A2.596 2.596 0 0 0 10.387 1c-.698 0-1.355.272-1.849.766l-.852.851a2.614 2.614 0 0 0-.624 2.688l1.036-1.036c.041-.304.173-.6.407-.833l.852-.852c.275-.275.64-.426 1.03-.426a1.458 1.458 0 0 1 1.03 2.486l-.852.851a1.442 1.442 0 0 1-.824.406l-1.04 1.04a2.596 2.596 0 0 0 2.683-.628l.851-.85a2.616 2.616 0 0 0 0-3.697zm-6.88 6.883a.577.577 0 0 0 .82 0l3.474-3.474a.579.579 0 1 0-.819-.82L5.355 7.83a.579.579 0 0 0 0 .819z" />
-    </svg>
-  )
-}
-
-function iconPencil () {
-  return (
-    <svg aria-hidden="true" focusable="false" class="UppyIcon" width="14" height="14" viewBox="0 0 14 14">
-      <g fill-rule="evenodd"><path d="M1.5 10.793h2.793A1 1 0 0 0 5 10.5L11.5 4a1 1 0 0 0 0-1.414L9.707.793a1 1 0 0 0-1.414 0l-6.5 6.5A1 1 0 0 0 1.5 8v2.793zm1-1V8L9 1.5l1.793 1.793-6.5 6.5H2.5z" fill-rule="nonzero" /><rect x="1" y="12.293" width="11" height="1" rx=".5" /><path fill-rule="nonzero" d="M6.793 2.5L9.5 5.207l.707-.707L7.5 1.793z" /></g>
-    </svg>
-  )
-}
-
-function iconCross () {
-  return (
-    <svg aria-hidden="true" focusable="false" class="UppyIcon" width="18" height="18" viewBox="0 0 18 18">
-      <path d="M9 0C4.034 0 0 4.034 0 9s4.034 9 9 9 9-4.034 9-9-4.034-9-9-9z" />
-      <path fill="#FFF" d="M13 12.222l-.778.778L9 9.778 5.778 13 5 12.222 8.222 9 5 5.778 5.778 5 9 8.222 12.222 5l.778.778L9.778 9z" />
-    </svg>
-  )
-}
-
-function iconPlus () {
-  return (
-    <svg aria-hidden="true" focusable="false" class="UppyIcon" width="15" height="15" viewBox="0 0 15 15">
-      <path d="M8 6.5h6a.5.5 0 0 1 .5.5v.5a.5.5 0 0 1-.5.5H8v6a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5V8h-6a.5.5 0 0 1-.5-.5V7a.5.5 0 0 1 .5-.5h6v-6A.5.5 0 0 1 7 0h.5a.5.5 0 0 1 .5.5v6z" />
-    </svg>
-  )
-}
-
-module.exports = {
-  defaultPickerIcon,
-  iconCopy,
-  iconResume,
-  iconPause,
-  iconRetry,
-  localIcon,
-  iconMyDevice,
-  checkIcon,
-  iconImage,
-  iconAudio,
-  iconVideo,
-  iconPDF,
-  iconArchive,
-  iconFile,
-  iconText,
-  iconCopyLink,
-  iconPencil,
-  iconCross,
-  iconPlus
-}

packages/@uppy/dashboard/src/index.js

@@ -10,7 +10,6 @@ const getDroppedFiles = require('@uppy/utils/lib/getDroppedFiles')
 const trapFocus = require('./utils/trapFocus')
 const cuid = require('cuid')
 const ResizeObserver = require('resize-observer-polyfill').default || require('resize-observer-polyfill')
-const { defaultPickerIcon } = require('./components/icons')
 const createSuperFocus = require('./utils/createSuperFocus')
 const memoize = require('memoize-one').default || require('memoize-one')
 
@@ -26,6 +25,14 @@ function createPromise () {
   return o
 }
 
+function defaultPickerIcon () {
+  return (
+    <svg aria-hidden="true" focusable="false" width="30" height="30" viewBox="0 0 30 30">
+      <path d="M15 30c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15zm4.258-12.676v6.846h-8.426v-6.846H5.204l9.82-12.364 9.82 12.364H19.26z" />
+    </svg>
+  )
+}
+
 /**
  * Dashboard UI with previews, metadata editing, tabs for various services and more
  */
@@ -107,8 +114,9 @@ module.exports = class Dashboard extends Plugin {
       showLinkToFileUploadResult: true,
       showProgressDetails: false,
       hideUploadButton: false,
+      hideCancelButton: false,
       hideRetryButton: false,
-      hidePauseResumeCancelButtons: false,
+      hidePauseResumeButton: false,
       hideProgressAfterFinish: false,
       note: null,
       closeModalOnClickOutside: false,
@@ -853,6 +861,8 @@ module.exports = class Dashboard extends Plugin {
       showLinkToFileUploadResult: this.opts.showLinkToFileUploadResult,
       proudlyDisplayPoweredByUppy: this.opts.proudlyDisplayPoweredByUppy,
       hideCancelButton: this.opts.hideCancelButton,
+      hideRetryButton: this.opts.hideRetryButton,
+      hidePauseResumeButton: this.opts.hidePauseResumeButton,
       showRemoveButtonAfterComplete: this.opts.showRemoveButtonAfterComplete,
       containerWidth: pluginState.containerWidth,
       containerHeight: pluginState.containerHeight,

packages/@uppy/dashboard/src/style.scss

@@ -751,7 +751,7 @@ a.uppy-Dashboard-poweredBy {
   vertical-align: text-top;
 }
 
-.uppy-DashboardItem-previewIcon {
+.uppy-Dashboard-Item-previewIcon {
   width: 25px;
   height: 25px;
   z-index: $zIndex-1;
@@ -771,13 +771,13 @@ a.uppy-Dashboard-poweredBy {
   }
 }
 
-.uppy-DashboardItem-previewIconWrap {
+.uppy-Dashboard-Item-previewIconWrap {
   height: 76px;
   max-height: 75%;
   position: relative;
 }
 
-.uppy-DashboardItem-previewIconBg {
+.uppy-Dashboard-Item-previewIconBg {
   width: 100%;
   height: 100%;
   filter: drop-shadow(rgba($black, 0.1) 0px 1px 1px);
@@ -794,7 +794,7 @@ a.uppy-Dashboard-poweredBy {
   }
 }
 
-.uppy-Dashboard-upload .UppyIcon {
+.uppy-Dashboard-upload .uppy-c-icon {
   position: relative;
   top: 1px;
   width: 50%;

packages/@uppy/dashboard/src/utils/getFileTypeIcon.js

@@ -1,4 +1,67 @@
-const { iconFile, iconText, iconImage, iconAudio, iconVideo, iconPDF, iconArchive } = require('../components/icons')
+const { h } = require('preact')
+
+function iconImage () {
+  return (
+    <svg aria-hidden="true" focusable="false" width="25" height="25" viewBox="0 0 25 25">
+      <g fill="#686DE0" fill-rule="evenodd">
+        <path d="M5 7v10h15V7H5zm0-1h15a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1z" fill-rule="nonzero" />
+        <path d="M6.35 17.172l4.994-5.026a.5.5 0 0 1 .707 0l2.16 2.16 3.505-3.505a.5.5 0 0 1 .707 0l2.336 2.31-.707.72-1.983-1.97-3.505 3.505a.5.5 0 0 1-.707 0l-2.16-2.159-3.938 3.939-1.409.026z" fill-rule="nonzero" />
+        <circle cx="7.5" cy="9.5" r="1.5" />
+      </g>
+    </svg>
+  )
+}
+
+function iconAudio () {
+  return (
+    <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width="25" height="25" viewBox="0 0 25 25">
+      <path d="M9.5 18.64c0 1.14-1.145 2-2.5 2s-2.5-.86-2.5-2c0-1.14 1.145-2 2.5-2 .557 0 1.079.145 1.5.396V7.25a.5.5 0 0 1 .379-.485l9-2.25A.5.5 0 0 1 18.5 5v11.64c0 1.14-1.145 2-2.5 2s-2.5-.86-2.5-2c0-1.14 1.145-2 2.5-2 .557 0 1.079.145 1.5.396V8.67l-8 2v7.97zm8-11v-2l-8 2v2l8-2zM7 19.64c.855 0 1.5-.484 1.5-1s-.645-1-1.5-1-1.5.484-1.5 1 .645 1 1.5 1zm9-2c.855 0 1.5-.484 1.5-1s-.645-1-1.5-1-1.5.484-1.5 1 .645 1 1.5 1z" fill="#049BCF" fill-rule="nonzero" />
+    </svg>
+  )
+}
+
+function iconVideo () {
+  return (
+    <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width="25" height="25" viewBox="0 0 25 25">
+      <path d="M16 11.834l4.486-2.691A1 1 0 0 1 22 10v6a1 1 0 0 1-1.514.857L16 14.167V17a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v2.834zM15 9H5v8h10V9zm1 4l5 3v-6l-5 3z" fill="#19AF67" fill-rule="nonzero" />
+    </svg>
+  )
+}
+
+function iconPDF () {
+  return (
+    <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width="25" height="25" viewBox="0 0 25 25">
+      <path d="M9.766 8.295c-.691-1.843-.539-3.401.747-3.726 1.643-.414 2.505.938 2.39 3.299-.039.79-.194 1.662-.537 3.148.324.49.66.967 1.055 1.51.17.231.382.488.629.757 1.866-.128 3.653.114 4.918.655 1.487.635 2.192 1.685 1.614 2.84-.566 1.133-1.839 1.084-3.416.249-1.141-.604-2.457-1.634-3.51-2.707a13.467 13.467 0 0 0-2.238.426c-1.392 4.051-4.534 6.453-5.707 4.572-.986-1.58 1.38-4.206 4.914-5.375.097-.322.185-.656.264-1.001.08-.353.306-1.31.407-1.737-.678-1.059-1.2-2.031-1.53-2.91zm2.098 4.87c-.033.144-.068.287-.104.427l.033-.01-.012.038a14.065 14.065 0 0 1 1.02-.197l-.032-.033.052-.004a7.902 7.902 0 0 1-.208-.271c-.197-.27-.38-.526-.555-.775l-.006.028-.002-.003c-.076.323-.148.632-.186.8zm5.77 2.978c1.143.605 1.832.632 2.054.187.26-.519-.087-1.034-1.113-1.473-.911-.39-2.175-.608-3.55-.608.845.766 1.787 1.459 2.609 1.894zM6.559 18.789c.14.223.693.16 1.425-.413.827-.648 1.61-1.747 2.208-3.206-2.563 1.064-4.102 2.867-3.633 3.62zm5.345-10.97c.088-1.793-.351-2.48-1.146-2.28-.473.119-.564 1.05-.056 2.405.213.566.52 1.188.908 1.859.18-.858.268-1.453.294-1.984z" fill="#E2514A" fill-rule="nonzero" />
+    </svg>
+  )
+}
+
+function iconArchive () {
+  return (
+    <svg aria-hidden="true" focusable="false" width="25" height="25" viewBox="0 0 25 25">
+      <path d="M10.45 2.05h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5V2.55a.5.5 0 0 1 .5-.5zm2.05 1.024h1.05a.5.5 0 0 1 .5.5V3.6a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5v-.001zM10.45 0h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5V.5a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.024a.5.5 0 0 1 .5-.5zm-2.05 3.074h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.024a.5.5 0 0 1 .5-.5zm-2.05 1.024h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm-2.05 1.025h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.024a.5.5 0 0 1 .5-.5zm-1.656 3.074l-.82 5.946c.52.302 1.174.458 1.976.458.803 0 1.455-.156 1.975-.458l-.82-5.946h-2.311zm0-1.025h2.312c.512 0 .946.378 1.015.885l.82 5.946c.056.412-.142.817-.501 1.026-.686.398-1.515.597-2.49.597-.974 0-1.804-.199-2.49-.597a1.025 1.025 0 0 1-.5-1.026l.819-5.946c.07-.507.503-.885 1.015-.885zm.545 6.6a.5.5 0 0 1-.397-.561l.143-.999a.5.5 0 0 1 .495-.429h.74a.5.5 0 0 1 .495.43l.143.998a.5.5 0 0 1-.397.561c-.404.08-.819.08-1.222 0z" fill="#00C469" fill-rule="nonzero" />
+    </svg>
+  )
+}
+
+function iconFile () {
+  return (
+    <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width="25" height="25" viewBox="0 0 25 25">
+      <g fill="#A7AFB7" fill-rule="nonzero">
+        <path d="M5.5 22a.5.5 0 0 1-.5-.5v-18a.5.5 0 0 1 .5-.5h10.719a.5.5 0 0 1 .367.16l3.281 3.556a.5.5 0 0 1 .133.339V21.5a.5.5 0 0 1-.5.5h-14zm.5-1h13V7.25L16 4H6v17z" />
+        <path d="M15 4v3a1 1 0 0 0 1 1h3V7h-3V4h-1z" />
+      </g>
+    </svg>
+  )
+}
+
+function iconText () {
+  return (
+    <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width="25" height="25" viewBox="0 0 25 25">
+      <path d="M4.5 7h13a.5.5 0 1 1 0 1h-13a.5.5 0 0 1 0-1zm0 3h15a.5.5 0 1 1 0 1h-15a.5.5 0 1 1 0-1zm0 3h15a.5.5 0 1 1 0 1h-15a.5.5 0 1 1 0-1zm0 3h10a.5.5 0 1 1 0 1h-10a.5.5 0 1 1 0-1z" fill="#5A5E69" fill-rule="nonzero" />
+    </svg>
+  )
+}
 
 module.exports = function getIconByMime (fileType) {
   const defaultChoice = {

packages/@uppy/drag-drop/src/index.js

@@ -142,11 +142,8 @@ module.exports = class DragDrop extends Plugin {
     const restrictions = this.uppy.opts.restrictions
     return (
       <input
-        id={this.uppy.id + '-' + this.id}
-        class="uppy-DragDrop-input"
         type="file"
-        tabindex={-1}
-        focusable="false"
+        hidden
         ref={(ref) => { this.fileInputRef = ref }}
         name={this.opts.inputName}
         multiple={restrictions.maxNumberOfFiles !== 1}
@@ -158,7 +155,7 @@ module.exports = class DragDrop extends Plugin {
 
   renderArrowSvg () {
     return (
-      <svg aria-hidden="true" focusable="false" class="UppyIcon uppy-DragDrop-arrow" width="16" height="16" viewBox="0 0 16 16">
+      <svg aria-hidden="true" focusable="false" class="uppy-c-icon uppy-DragDrop-arrow" width="16" height="16" viewBox="0 0 16 16">
         <path d="M11 10V0H5v10H2l6 6 6-6h-3zm0 0" fill-rule="evenodd" />
       </svg>
     )
@@ -166,11 +163,11 @@ module.exports = class DragDrop extends Plugin {
 
   renderLabel () {
     return (
-      <label class="uppy-DragDrop-label" for={this.uppy.id + '-' + this.id}>
+      <div class="uppy-DragDrop-label">
         {this.i18nArray('dropHereOr', {
           browse: <span class="uppy-DragDrop-browse">{this.i18n('browse')}</span>
         })}
-      </label>
+      </div>
     )
   }
 
@@ -185,7 +182,7 @@ module.exports = class DragDrop extends Plugin {
       uppy-Root
       uppy-u-reset
       uppy-DragDrop-container
-      ${this.isDragDropSupported ? 'uppy-DragDrop--is-dragdrop-supported' : ''}
+      ${this.isDragDropSupported ? 'uppy-DragDrop--isDragDropSupported' : ''}
       ${this.getPluginState().isDraggingOver ? 'uppy-DragDrop--isDraggingOver' : ''}
     `
 

packages/@uppy/drag-drop/src/style.scss

@@ -29,16 +29,6 @@
   line-height: 1.4;
 }
 
-// http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
-.uppy-DragDrop-input {
-  width: 0.1px;
-  height: 0.1px;
-  opacity: 0;
-  overflow: hidden;
-  position: absolute;
-  z-index: -1;
-}
-
 .uppy-DragDrop-arrow {
   width: 60px;
   height: 60px;
@@ -46,7 +36,7 @@
   margin-bottom: 17px;
 }
 
-  .uppy-DragDrop--is-dragdrop-supported {
+  .uppy-DragDrop--isDragDropSupported {
     border: 2px dashed lighten($gray-500, 10%);
   }
 

packages/@uppy/dropbox/src/index.js

@@ -12,7 +12,7 @@ module.exports = class Dropbox extends Plugin {
     Provider.initPlugin(this, opts)
     this.title = this.opts.title || 'Dropbox'
     this.icon = () => (
-      <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+      <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
         <g fill="none" fill-rule="evenodd">
           <rect fill="#0D2481" width="32" height="32" rx="16" />
           <path d="M11 8l5 3.185-5 3.186-5-3.186L11 8zm10 0l5 3.185-5 3.186-5-3.186L21 8zM6 17.556l5-3.185 5 3.185-5 3.186-5-3.186zm15-3.185l5 3.185-5 3.186-5-3.186 5-3.185zm-10 7.432l5-3.185 5 3.185-5 3.186-5-3.186z" fill="#FFF" fill-rule="nonzero" />

packages/@uppy/facebook/src/index.js

@@ -12,7 +12,7 @@ module.exports = class Facebook extends Plugin {
     Provider.initPlugin(this, opts)
     this.title = this.opts.title || 'Facebook'
     this.icon = () => (
-      <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+      <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
         <g fill="none" fill-rule="evenodd">
           <rect width="32" height="32" rx="16" fill="#3C5A99" />
           <path d="M17.842 26v-8.667h2.653l.398-3.377h-3.051v-2.157c0-.978.248-1.644 1.527-1.644H21V7.132A19.914 19.914 0 0 0 18.623 7c-2.352 0-3.963 1.574-3.963 4.465v2.49H12v3.378h2.66V26h3.182z" fill="#FFF" fill-rule="nonzero" />

packages/@uppy/google-drive/src/index.js

@@ -13,7 +13,7 @@ module.exports = class GoogleDrive extends Plugin {
     Provider.initPlugin(this, opts)
     this.title = this.opts.title || 'Google Drive'
     this.icon = () => (
-      <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+      <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
         <g fill="none" fill-rule="evenodd">
           <rect fill="#4285F4" width="32" height="32" rx="16" />
           <path d="M10.324 23.3l3-5.1H25l-3 5.1H10.324zM13 18.2l-3 5.1-3-5.1 5.839-9.924 2.999 5.1L13 18.2zm11.838-.276h-6L13 8h6l5.84 9.924h-.002z" fill="#FFF" />

packages/@uppy/instagram/src/index.js

@@ -12,7 +12,7 @@ module.exports = class Instagram extends Plugin {
     Provider.initPlugin(this, opts)
     this.title = this.opts.title || 'Instagram'
     this.icon = () => (
-      <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+      <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
         <g fill="none" fill-rule="evenodd">
           <rect fill="#E1306C" width="32" height="32" rx="16" />
           <path d="M16 8.622c2.403 0 2.688.009 3.637.052.877.04 1.354.187 1.67.31.392.144.745.374 1.036.673.299.29.529.644.673 1.035.123.317.27.794.31 1.671.043.95.052 1.234.052 3.637s-.009 2.688-.052 3.637c-.04.877-.187 1.354-.31 1.671a2.98 2.98 0 0 1-1.708 1.708c-.317.123-.794.27-1.671.31-.95.043-1.234.053-3.637.053s-2.688-.01-3.637-.053c-.877-.04-1.354-.187-1.671-.31a2.788 2.788 0 0 1-1.035-.673 2.788 2.788 0 0 1-.673-1.035c-.123-.317-.27-.794-.31-1.671-.043-.949-.052-1.234-.052-3.637s.009-2.688.052-3.637c.04-.877.187-1.354.31-1.67.144-.392.374-.745.673-1.036.29-.299.644-.529 1.035-.673.317-.123.794-.27 1.671-.31.95-.043 1.234-.052 3.637-.052zM16 7c-2.444 0-2.75.01-3.71.054-.959.044-1.613.196-2.185.419-.6.225-1.145.58-1.594 1.038-.458.45-.813.993-1.039 1.594-.222.572-.374 1.226-.418 2.184C7.01 13.25 7 13.556 7 16s.01 2.75.054 3.71c.044.959.196 1.613.419 2.185.226.6.58 1.145 1.038 1.594.45.458.993.813 1.594 1.038.572.223 1.227.375 2.184.419.96.044 1.267.054 3.711.054s2.75-.01 3.71-.054c.959-.044 1.613-.196 2.185-.419a4.602 4.602 0 0 0 2.632-2.632c.223-.572.375-1.226.419-2.184.044-.96.054-1.267.054-3.711s-.01-2.75-.054-3.71c-.044-.959-.196-1.613-.419-2.185A4.412 4.412 0 0 0 23.49 8.51a4.412 4.412 0 0 0-1.594-1.039c-.572-.222-1.226-.374-2.184-.418C18.75 7.01 18.444 7 16 7zm0 4.5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9zm0 7.421a2.921 2.921 0 1 1 0-5.842 2.921 2.921 0 0 1 0 5.842zm4.875-6.671a1.125 1.125 0 1 1 0-2.25 1.125 1.125 0 0 1 0 2.25z" fill="#FFF" />

packages/@uppy/locales/src/gl_ES.js

@@ -1,9 +1,9 @@
 const gl_ES = {}
 
 gl_ES.strings = {
-  addMore: 'añadir más',
-  addMoreFiles: 'Agregar máis arquivos',
-  addingMoreFiles: 'Agregando máis arquivos',
+  addMore: 'Engadir máis',
+  addMoreFiles: 'Engadir máis arquivos',
+  addingMoreFiles: 'Engadir máis arquivos',
   allowAccessDescription: 'Para tomar fotos ou grabar video coa túa cámara, por favor permite a este sitio o acceso á cámara.',
   allowAccessTitle: 'Por favor permite o acceso á tua cámara',
   authenticateWith: 'Conectar a %{pluginName}',
@@ -48,9 +48,9 @@ gl_ES.strings = {
   filter: 'Filtrar',
   finishEditingFile: 'Rematar edición de arquivo',
   folderAdded: {
-    '0': 'Agregado %{smart_count} arquivo dende %{folder}',
-    '1': 'Agregados %{smart_count} arquivos dende %{folder}',
-    '2': 'Agregados %{smart_count} arquivos dende %{folder}'
+    '0': 'Engadido %{smart_count} arquivo dende %{folder}',
+    '1': 'Engadidos %{smart_count} arquivos dende %{folder}',
+    '2': 'Engadidos %{smart_count} arquivos dende %{folder}'
   },
   import: 'Importar',
   importFrom: 'Importar dende %{name}',
@@ -82,7 +82,7 @@ gl_ES.strings = {
   },
   smile: 'Sorrí!',
   startRecording: 'Comezar a grabación de vídeo',
-  stopRecording: 'Detener la grabación de vídeo',
+  stopRecording: 'Deter a grabación de vídeo',
   takePicture: 'Tomar unha foto',
   timedOut: 'Subida estancada por %{seconds} segundos, anulando.',
   upload: 'Subir',
@@ -99,7 +99,7 @@ gl_ES.strings = {
     '1': 'Subir +%{smart_count} arquivos',
     '2': 'Subir +%{smart_count} arquivos'
   },
-  uploading: 'Subiendo',
+  uploading: 'Subindo',
   uploadingXFiles: {
     '0': 'Subindo %{smart_count} arquivo',
     '1': 'Subindo %{smart_count} arquivos',
@@ -111,9 +111,9 @@ gl_ES.strings = {
     '2': '%{smart_count} arquivos seleccionados'
   },
   xMoreFilesAdded: {
-    '0': '%{smart_count} arquivo máis agregado',
-    '1': '%{smart_count} arquivos máis agregados',
-    '2': '%{smart_count} arquivos máis agregados'
+    '0': '%{smart_count} arquivo máis engadido',
+    '1': '%{smart_count} arquivos máis engadidos',
+    '2': '%{smart_count} arquivos máis engadidos'
   },
   xTimeLeft: '%{time} restantes',
   youCanOnlyUploadFileTypes: 'Soamente podes subir: %{types}',
@@ -127,11 +127,11 @@ gl_ES.strings = {
     '1': 'Tes que seleccionar polo menos %{smart_count} arquivos',
     '2': 'Tes que seleccionar polo menos %{smart_count} arquivos'
   },
-  selectAllFilesFromFolderNamed: 'Seleccionar todos los archivos de la carpeta %{name}',
-  unselectAllFilesFromFolderNamed: 'Deselecciona todos los archivos de la carpeta %{name}',
-  selectFileNamed: 'Seleccione archivo %{name}',
-  unselectFileNamed: 'Deseleccionar archivo %{name}',
-  openFolderNamed: 'Carpeta abierta %{name}'
+  selectAllFilesFromFolderNamed: 'Seleccionar todos os arquivos do cartafol %{name}',
+  unselectAllFilesFromFolderNamed: 'Deselecciona todos os arquivos do cartafol %{name}',
+  selectFileNamed: 'Seleccione arquivo %{name}',
+  unselectFileNamed: 'Deseleccionar arquivo %{name}',
+  openFolderNamed: 'Cartafol aberto %{name}'
 }
 
 gl_ES.pluralize = function (n) {

packages/@uppy/onedrive/src/index.js

@@ -12,7 +12,7 @@ module.exports = class OneDrive extends Plugin {
     Provider.initPlugin(this, opts)
     this.title = this.opts.title || 'OneDrive'
     this.icon = () => (
-      <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+      <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
         <g fill="none" fill-rule="evenodd">
           <rect width="32" height="32" rx="16" fill="#0262C0" />
           <g fill="#FFF" fill-rule="nonzero">

packages/@uppy/provider-views/src/Filter.js

@@ -27,7 +27,7 @@ module.exports = class Filter extends Component {
           oninput={(e) => this.props.filterQuery(e)}
           value={this.props.filterInput}
         />
-        <svg aria-hidden="true" focusable="false" class="UppyIcon uppy-ProviderBrowser-searchIcon" width="12" height="12" viewBox="0 0 12 12">
+        <svg aria-hidden="true" focusable="false" class="uppy-c-icon uppy-ProviderBrowser-searchIcon" width="12" height="12" viewBox="0 0 12 12">
           <path d="M8.638 7.99l3.172 3.172a.492.492 0 1 1-.697.697L7.91 8.656a4.977 4.977 0 0 1-2.983.983C2.206 9.639 0 7.481 0 4.819 0 2.158 2.206 0 4.927 0c2.721 0 4.927 2.158 4.927 4.82a4.74 4.74 0 0 1-1.216 3.17zm-3.71.685c2.176 0 3.94-1.726 3.94-3.856 0-2.129-1.764-3.855-3.94-3.855C2.75.964.984 2.69.984 4.819c0 2.13 1.765 3.856 3.942 3.856z" />
         </svg>
         {this.props.filterInput && (
@@ -38,7 +38,7 @@ module.exports = class Filter extends Component {
             title={this.props.i18n('resetFilter')}
             onclick={this.props.filterQuery}
           >
-            <svg aria-hidden="true" focusable="false" class="UppyIcon" viewBox="0 0 19 19">
+            <svg aria-hidden="true" focusable="false" class="uppy-c-icon" viewBox="0 0 19 19">
               <path d="M17.318 17.232L9.94 9.854 9.586 9.5l-.354.354-7.378 7.378h.707l-.62-.62v.706L9.318 9.94l.354-.354-.354-.354L1.94 1.854v.707l.62-.62h-.706l7.378 7.378.354.354.354-.354 7.378-7.378h-.707l.622.62v-.706L9.854 9.232l-.354.354.354.354 7.378 7.378.708-.707-7.38-7.378v.708l7.38-7.38.353-.353-.353-.353-.622-.622-.353-.353-.354.352-7.378 7.38h.708L2.56 1.23 2.208.88l-.353.353-.622.62-.353.355.352.353 7.38 7.38v-.708l-7.38 7.38-.353.353.352.353.622.622.353.353.354-.353 7.38-7.38h-.708l7.38 7.38z" />
             </svg>
           </button>

packages/@uppy/provider-views/src/Item/components/ItemIcon.js

@@ -2,7 +2,7 @@ const { h } = require('preact')
 
 function FileIcon () {
   return (
-    <svg aria-hidden="true" focusable="false" class="UppyIcon" width={11} height={14.5} viewBox="0 0 44 58">
+    <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width={11} height={14.5} viewBox="0 0 44 58">
       <path d="M27.437.517a1 1 0 0 0-.094.03H4.25C2.037.548.217 2.368.217 4.58v48.405c0 2.212 1.82 4.03 4.03 4.03H39.03c2.21 0 4.03-1.818 4.03-4.03V15.61a1 1 0 0 0-.03-.28 1 1 0 0 0 0-.093 1 1 0 0 0-.03-.032 1 1 0 0 0 0-.03 1 1 0 0 0-.032-.063 1 1 0 0 0-.03-.063 1 1 0 0 0-.032 0 1 1 0 0 0-.03-.063 1 1 0 0 0-.032-.03 1 1 0 0 0-.03-.063 1 1 0 0 0-.063-.062l-14.593-14a1 1 0 0 0-.062-.062A1 1 0 0 0 28 .708a1 1 0 0 0-.374-.157 1 1 0 0 0-.156 0 1 1 0 0 0-.03-.03l-.003-.003zM4.25 2.547h22.218v9.97c0 2.21 1.82 4.03 4.03 4.03h10.564v36.438a2.02 2.02 0 0 1-2.032 2.032H4.25c-1.13 0-2.032-.9-2.032-2.032V4.58c0-1.13.902-2.032 2.03-2.032zm24.218 1.345l10.375 9.937.75.718H30.5c-1.13 0-2.032-.9-2.032-2.03V3.89z" />
     </svg>
   )
@@ -10,7 +10,7 @@ function FileIcon () {
 
 function FolderIcon () {
   return (
-    <svg aria-hidden="true" focusable="false" class="UppyIcon" style={{ width: 16, marginRight: 3 }} viewBox="0 0 276.157 276.157">
+    <svg aria-hidden="true" focusable="false" class="uppy-c-icon" style={{ width: 16, marginRight: 3 }} viewBox="0 0 276.157 276.157">
       <path d="M273.08 101.378c-3.3-4.65-8.86-7.32-15.254-7.32h-24.34V67.59c0-10.2-8.3-18.5-18.5-18.5h-85.322c-3.63 0-9.295-2.875-11.436-5.805l-6.386-8.735c-4.982-6.814-15.104-11.954-23.546-11.954H58.73c-9.292 0-18.638 6.608-21.737 15.372l-2.033 5.752c-.958 2.71-4.72 5.37-7.596 5.37H18.5C8.3 49.09 0 57.39 0 67.59v167.07c0 .886.16 1.73.443 2.52.152 3.306 1.18 6.424 3.053 9.064 3.3 4.652 8.86 7.32 15.255 7.32h188.487c11.395 0 23.27-8.425 27.035-19.18l40.677-116.188c2.11-6.035 1.43-12.164-1.87-16.816zM18.5 64.088h8.864c9.295 0 18.64-6.607 21.738-15.37l2.032-5.75c.96-2.712 4.722-5.373 7.597-5.373h29.565c3.63 0 9.295 2.876 11.437 5.806l6.386 8.735c4.982 6.815 15.104 11.954 23.546 11.954h85.322c1.898 0 3.5 1.602 3.5 3.5v26.47H69.34c-11.395 0-23.27 8.423-27.035 19.178L15 191.23V67.59c0-1.898 1.603-3.5 3.5-3.5zm242.29 49.15l-40.676 116.188c-1.674 4.78-7.812 9.135-12.877 9.135H18.75c-1.447 0-2.576-.372-3.02-.997-.442-.625-.422-1.814.057-3.18l40.677-116.19c1.674-4.78 7.812-9.134 12.877-9.134h188.487c1.448 0 2.577.372 3.02.997.443.625.423 1.814-.056 3.18z" />
     </svg>
   )

packages/@uppy/robodog/src/addDashboardPlugin.js

@@ -9,7 +9,7 @@ const dashboardOptionNames = [
   'showLinkToFileUploadResult',
   'showProgressDetails',
   'hideRetryButton',
-  'hidePauseResumeCancelButtons',
+  'hideCancelButton',
   'hideUploadButton',
   'hideProgressAfterFinish',
   'note',

packages/@uppy/screen-capture/src/RecordButton.js

@@ -14,7 +14,7 @@ module.exports = function RecordButton ({ recording, onStartRecording, onStopRec
         onclick={onStopRecording}
         data-uppy-super-focusable
       >
-        <svg aria-hidden="true" focusable="false" class="UppyIcon" width="100" height="100" viewBox="0 0 100 100">
+        <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width="100" height="100" viewBox="0 0 100 100">
           <rect x="15" y="15" width="70" height="70" />
         </svg>
       </button>
@@ -30,7 +30,7 @@ module.exports = function RecordButton ({ recording, onStartRecording, onStopRec
       onclick={onStartRecording}
       data-uppy-super-focusable
     >
-      <svg aria-hidden="true" focusable="false" class="UppyIcon" width="100" height="100" viewBox="0 0 100 100">
+      <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width="100" height="100" viewBox="0 0 100 100">
         <circle cx="50" cy="50" r="40" />
       </svg>
     </button>

packages/@uppy/screen-capture/src/ScreenRecIcon.js

@@ -2,7 +2,7 @@ const { h } = require('preact')
 
 module.exports = () => {
   return (
-    <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
       <g fill="none" fill-rule="evenodd">
         <rect fill="#2C3E50" width="32" height="32" rx="16" />
         <path d="M24.182 9H7.818C6.81 9 6 9.742 6 10.667v10c0 .916.81 1.666 1.818 1.666h4.546V24h7.272v-1.667h4.546c1 0 1.809-.75 1.809-1.666l.009-10C26 9.742 25.182 9 24.182 9zM24 21H8V11h16v10z" fill="#FFF" fill-rule="nonzero" />

packages/@uppy/screen-capture/src/StreamStatus.js

@@ -3,11 +3,11 @@ const { h } = require('preact')
 module.exports = ({ streamActive, i18n }) => {
   if (streamActive) {
     return (
-      <div title={i18n('streamActive')} aria-label={i18n('streamActive')} class="uppy-ScreenCapture-icon--stream uppy-ScreenCapture-icon--streamActive"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" opacity=".1" fill="none" /><path d="M0 0h24v24H0z" fill="none" /><path d="M1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm18-7H5v1.63c3.96 1.28 7.09 4.41 8.37 8.37H19V7zM1 10v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11zm20-7H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" /></svg></div>
+      <div title={i18n('streamActive')} aria-label={i18n('streamActive')} class="uppy-ScreenCapture-icon--stream uppy-ScreenCapture-icon--streamActive"><svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" opacity=".1" fill="none" /><path d="M0 0h24v24H0z" fill="none" /><path d="M1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm18-7H5v1.63c3.96 1.28 7.09 4.41 8.37 8.37H19V7zM1 10v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11zm20-7H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" /></svg></div>
     )
   } else {
     return (
-      <div title={i18n('streamPassive')} aria-label={i18n('streamPassive')} class="uppy-ScreenCapture-icon--stream"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" opacity=".1" fill="none" /><path d="M0 0h24v24H0z" fill="none" /><path d="M21 3H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm0-4v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11z" /></svg></div>
+      <div title={i18n('streamPassive')} aria-label={i18n('streamPassive')} class="uppy-ScreenCapture-icon--stream"><svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" opacity=".1" fill="none" /><path d="M0 0h24v24H0z" fill="none" /><path d="M21 3H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm0-4v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11z" /></svg></div>
     )
   }
 }

packages/@uppy/screen-capture/src/SubmitButton.js

@@ -14,7 +14,7 @@ module.exports = function SubmitButton ({ recording, recordedVideo, onSubmit, i1
         onclick={onSubmit}
         data-uppy-super-focusable
       >
-        <svg aria-hidden="true" focusable="false" class="UppyIcon" width="48" height="48" viewBox="0 0 48 48">
+        <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width="48" height="48" viewBox="0 0 48 48">
           <path d="M0 0h48v48h-48z" fill="none" />
           <path d="M38.71 20.07c-1.36-6.88-7.43-12.07-14.71-12.07-5.78 0-10.79 3.28-13.3 8.07-6.01.65-10.7 5.74-10.7 11.93 0 6.63 5.37 12 12 12h26c5.52 0 10-4.48 10-10 0-5.28-4.11-9.56-9.29-9.93zm-10.71 5.93v8h-8v-8h-6l10-10 10 10h-6z" />
         </svg>

packages/@uppy/status-bar/src/StatusBar.js

@@ -172,7 +172,7 @@ const RetryBtn = (props) => {
       onclick={props.retryAll}
       data-uppy-super-focusable
     >
-      <svg aria-hidden="true" focusable="false" class="UppyIcon" width="8" height="10" viewBox="0 0 8 10">
+      <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width="8" height="10" viewBox="0 0 8 10">
         <path d="M4 2.408a2.75 2.75 0 1 0 2.75 2.75.626.626 0 0 1 1.25.018v.023a4 4 0 1 1-4-4.041V.25a.25.25 0 0 1 .389-.208l2.299 1.533a.25.25 0 0 1 0 .416l-2.3 1.533A.25.25 0 0 1 4 3.316v-.908z" />
       </svg>
       {props.i18n('retry')}
@@ -190,7 +190,7 @@ const CancelBtn = (props) => {
       onclick={props.cancelAll}
       data-uppy-super-focusable
     >
-      <svg aria-hidden="true" focusable="false" class="UppyIcon" width="16" height="16" viewBox="0 0 16 16">
+      <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width="16" height="16" viewBox="0 0 16 16">
         <g fill="none" fill-rule="evenodd">
           <circle fill="#888" cx="8" cy="8" r="8" />
           <path fill="#FFF" d="M9.283 8l2.567 2.567-1.283 1.283L8 9.283 5.433 11.85 4.15 10.567 6.717 8 4.15 5.433 5.433 4.15 8 6.717l2.567-2.567 1.283 1.283z" />
@@ -214,14 +214,14 @@ const PauseResumeButton = (props) => {
       data-uppy-super-focusable
     >
       {isAllPaused ? (
-        <svg aria-hidden="true" focusable="false" class="UppyIcon" width="16" height="16" viewBox="0 0 16 16">
+        <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width="16" height="16" viewBox="0 0 16 16">
           <g fill="none" fill-rule="evenodd">
             <circle fill="#888" cx="8" cy="8" r="8" />
             <path fill="#FFF" d="M6 4.25L11.5 8 6 11.75z" />
           </g>
         </svg>
       ) : (
-        <svg aria-hidden="true" focusable="false" class="UppyIcon" width="16" height="16" viewBox="0 0 16 16">
+        <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width="16" height="16" viewBox="0 0 16 16">
           <g fill="none" fill-rule="evenodd">
             <circle fill="#888" cx="8" cy="8" r="8" />
             <path d="M5 4.5h2v7H5v-7zm4 0h2v7H9v-7z" fill="#FFF" />
@@ -357,7 +357,7 @@ const ProgressBarComplete = ({ totalProgress, i18n }) => {
     <div class="uppy-StatusBar-content" role="status" title={i18n('complete')}>
       <div class="uppy-StatusBar-status">
         <div class="uppy-StatusBar-statusPrimary">
-          <svg aria-hidden="true" focusable="false" class="uppy-StatusBar-statusIndicator UppyIcon" width="15" height="11" viewBox="0 0 15 11">
+          <svg aria-hidden="true" focusable="false" class="uppy-StatusBar-statusIndicator uppy-c-icon" width="15" height="11" viewBox="0 0 15 11">
             <path d="M.414 5.843L1.627 4.63l3.472 3.472L13.202 0l1.212 1.213L5.1 10.528z" />
           </svg>
           {i18n('complete')}
@@ -377,7 +377,7 @@ const ProgressBarError = ({ error, retryAll, hideRetryButton, i18n }) => {
     <div class="uppy-StatusBar-content" role="alert" title={i18n('uploadFailed')}>
       <div class="uppy-StatusBar-status">
         <div class="uppy-StatusBar-statusPrimary">
-          <svg aria-hidden="true" focusable="false" class="uppy-StatusBar-statusIndicator UppyIcon" width="11" height="11" viewBox="0 0 11 11">
+          <svg aria-hidden="true" focusable="false" class="uppy-StatusBar-statusIndicator uppy-c-icon" width="11" height="11" viewBox="0 0 11 11">
             <path d="M4.278 5.5L0 1.222 1.222 0 5.5 4.278 9.778 0 11 1.222 6.722 5.5 11 9.778 9.778 11 5.5 6.722 1.222 11 0 9.778z" />
           </svg>
           {i18n('uploadFailed')}

packages/@uppy/url/src/index.js

@@ -7,7 +7,7 @@ const forEachDroppedOrPastedUrl = require('./utils/forEachDroppedOrPastedUrl')
 
 function UrlIcon () {
   return (
-    <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
       <g fill="none" fill-rule="evenodd">
         <rect fill="#FF753E" width="32" height="32" rx="16" />
         <path d="M22.788 15.389l-2.199 2.19a3.184 3.184 0 0 1-.513.437c-.806.584-1.686.876-2.638.876a4.378 4.378 0 0 1-3.519-1.752c-.22-.292-.146-.802.147-1.021.293-.22.806-.146 1.026.146.953 1.313 2.785 1.532 4.105.583a.571.571 0 0 0 .293-.292l2.199-2.189c1.1-1.167 1.1-2.992-.073-4.086a2.976 2.976 0 0 0-4.105 0l-1.246 1.24a.71.71 0 0 1-1.026 0 .703.703 0 0 1 0-1.022l1.246-1.24a4.305 4.305 0 0 1 6.083 0c1.833 1.605 1.906 4.451.22 6.13zm-7.183 5.035l-1.246 1.24a2.976 2.976 0 0 1-4.105 0c-1.172-1.094-1.172-2.991-.073-4.086l2.2-2.19.292-.291c.66-.438 1.393-.657 2.2-.584.805.146 1.465.51 1.905 1.168.22.292.733.365 1.026.146.293-.22.367-.73.147-1.022-.733-.949-1.76-1.532-2.859-1.678-1.1-.22-2.272.073-3.225.802l-.44.438-2.199 2.19c-1.686 1.75-1.612 4.524.074 6.202.88.803 1.979 1.241 3.078 1.241 1.1 0 2.199-.438 3.079-1.24l1.246-1.241a.703.703 0 0 0 0-1.022c-.294-.292-.807-.365-1.1-.073z" fill="#FFF" fill-rule="nonzero" />

packages/@uppy/webcam/src/RecordButton.js

@@ -11,7 +11,7 @@ module.exports = function RecordButton ({ recording, onStartRecording, onStopRec
         onclick={onStopRecording}
         data-uppy-super-focusable
       >
-        <svg aria-hidden="true" focusable="false" class="UppyIcon" width="100" height="100" viewBox="0 0 100 100">
+        <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width="100" height="100" viewBox="0 0 100 100">
           <rect x="15" y="15" width="70" height="70" />
         </svg>
       </button>
@@ -27,7 +27,7 @@ module.exports = function RecordButton ({ recording, onStartRecording, onStopRec
       onclick={onStartRecording}
       data-uppy-super-focusable
     >
-      <svg aria-hidden="true" focusable="false" class="UppyIcon" width="100" height="100" viewBox="0 0 100 100">
+      <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width="100" height="100" viewBox="0 0 100 100">
         <circle cx="50" cy="50" r="40" />
       </svg>
     </button>

packages/@uppy/webcam/src/index.js

@@ -81,7 +81,7 @@ module.exports = class Webcam extends Plugin {
     this.title = this.opts.title || 'Camera'
     this.type = 'acquirer'
     this.icon = () => (
-      <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+      <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
         <g fill="none" fill-rule="evenodd">
           <rect fill="#03BFEF" width="32" height="32" rx="16" />
           <path d="M22 11c1.133 0 2 .867 2 2v7.333c0 1.134-.867 2-2 2H10c-1.133 0-2-.866-2-2V13c0-1.133.867-2 2-2h2.333l1.134-1.733C13.6 9.133 13.8 9 14 9h4c.2 0 .4.133.533.267L19.667 11H22zm-6 1.533a3.764 3.764 0 0 0-3.8 3.8c0 2.129 1.672 3.801 3.8 3.801s3.8-1.672 3.8-3.8c0-2.13-1.672-3.801-3.8-3.801zm0 6.261c-1.395 0-2.46-1.066-2.46-2.46 0-1.395 1.065-2.461 2.46-2.461s2.46 1.066 2.46 2.46c0 1.395-1.065 2.461-2.46 2.461z" fill="#FFF" fill-rule="nonzero" />

test/endtoend/chaos-monkey/test.js

@@ -48,8 +48,8 @@ describe('Chaos monkey', function () {
         window.addLogMessage('Cancelling a file')
         // prefer deleting a file that is uploading right now
         var selector = Math.random() <= 0.7
-          ? '.is-inprogress .uppy-DashboardItem-action--remove'
-          : '.uppy-DashboardItem-action--remove'
+          ? '.is-inprogress .uppy-Dashboard-Item-action--remove'
+          : '.uppy-Dashboard-Item-action--remove'
         var buttons = document.querySelectorAll(selector)
         var del = buttons[Math.floor(Math.random() * buttons.length)]
         if (del) del.click()

website/src/docs/dashboard.md

@@ -163,21 +163,21 @@ Hide the upload button. Use this if you are providing a custom upload button som
 
 ### `hideRetryButton: false`
 
-Passed to the Status Bar plugin used in the Dashboard.
+Hide the retry button in StatusBar (the progress bar below the file list) and on each individual file.
 
-Hide the retry button. Use this if you are providing a custom retry button somewhere, and using the `uppy.retryAll()` or `uppy.retryUpload(fileID)` API.
+Use this if you are providing a custom retry button somewhere, and using the `uppy.retryAll()` or `uppy.retryUpload(fileID)` API.
 
 ### `hidePauseResumeButton: false`
 
-Passed to the Status Bar plugin used in the Dashboard.
+Hide the pause/resume button (for resumable uploads, via [tus](http://tus.io), for example) in StatusBar and on each individual file.
 
-Hide pause/resume buttons (for resumable uploads, via [tus](http://tus.io), for example). Use this if you are providing custom cancel or pause/resume buttons somewhere, and using the `uppy.pauseResume(fileID)` or `uppy.removeFile(fileID)` API.
+Use this if you are providing custom cancel or pause/resume buttons somewhere, and using the `uppy.pauseResume(fileID)` or `uppy.removeFile(fileID)` API.
 
 ### `hideCancelButton: false`
 
-Passed to the Status Bar plugin used in the Dashboard.
+Hide the cancel button in StatusBar and on each individual file.
 
-Hide the cancel button. Use this if you are providing a custom retry button somewhere, and using the `uppy.cancelAll()` API.
+Use this if you are providing a custom retry button somewhere, and using the `uppy.cancelAll()` API.
 
 ### `hideProgressAfterFinish: false`