Merge pull request #1167 from transloadit/improvement/split-core-styles

Separate Core and Plugin styles

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

@@ -1,4 +1,5 @@
-@import '@uppy/core/src/style.scss';
+@import '@uppy/core/src/_utils.scss';
+@import '@uppy/core/src/_variables.scss';
 @import '@uppy/informer/src/style.scss';
 @import '@uppy/status-bar/src/style.scss';
 @import '@uppy/provider-views/src/style.scss';

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

@@ -1,62 +1,59 @@
-@import '@uppy/core/src/style.scss';
-
-// .Uppy {
-
-  .uppy-DragDrop-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 7px;
-    background-color: $color-white;
-    // cursor: pointer;
-  }
-
-  .uppy-DragDrop-inner {
-    margin: 0;
-    text-align: center;
-    padding: 80px 20px;
-    line-height: 1.4;
+@import '@uppy/core/src/_utils.scss';
+@import '@uppy/core/src/_variables.scss';
+
+.uppy-DragDrop-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 7px;
+  background-color: $color-white;
+  // cursor: pointer;
+}
+
+.uppy-DragDrop-inner {
+  margin: 0;
+  text-align: center;
+  padding: 80px 20px;
+  line-height: 1.4;
+}
+
+.uppy-DragDrop-arrow {
+  width: 60px;
+  height: 60px;
+  fill: lighten($color-gray, 30%);
+  margin-bottom: 17px;
+}
+
+  .uppy-DragDrop--is-dragdrop-supported {
+    border: 2px dashed;
+    border-color: lighten($color-gray, 10%);
   }
 
-  .uppy-DragDrop-arrow {
-    width: 60px;
-    height: 60px;
-    fill: lighten($color-gray, 30%);
-    margin-bottom: 17px;
-  }
-
-    .uppy-DragDrop--is-dragdrop-supported {
-      border: 2px dashed;
-      border-color: lighten($color-gray, 10%);
-    }
-
-    // .uppy-DragDrop-container.is-dragdrop-supported .uppy-DragDrop-dragText {
-    //   display: inline;
-    // }
-
-    .uppy-DragDrop-container.drag {
-      border-color: $color-gray;
-      background-color: darken($color-white, 10%);
-    }
-
-    .uppy-DragDrop-container.drag .uppy-DragDrop-arrow {
-      fill: $color-gray;
-    }
-
-  .uppy-DragDrop-label {
-    display: block;
-    cursor: pointer;
-    font-size: 1.15em;
-    margin-bottom: 5px;
-  }
+  // .uppy-DragDrop-container.is-dragdrop-supported .uppy-DragDrop-dragText {
+  //   display: inline;
+  // }
 
-  .uppy-DragDrop-note {
-    font-size: 1em;
-    color: lighten($color-gray, 10%);
+  .uppy-DragDrop-container.drag {
+    border-color: $color-gray;
+    background-color: darken($color-white, 10%);
   }
 
-  .uppy-DragDrop-dragText {
-    color: $color-cornflower-blue;
+  .uppy-DragDrop-container.drag .uppy-DragDrop-arrow {
+    fill: $color-gray;
   }
 
-// }
+.uppy-DragDrop-label {
+  display: block;
+  cursor: pointer;
+  font-size: 1.15em;
+  margin-bottom: 5px;
+}
+
+.uppy-DragDrop-note {
+  font-size: 1em;
+  color: lighten($color-gray, 10%);
+}
+
+.uppy-DragDrop-dragText {
+  color: $color-cornflower-blue;
+}

packages/@uppy/file-input/src/style.scss

@@ -1,4 +1,5 @@
-@import '@uppy/core/src/style.scss';
+@import '@uppy/core/src/_utils.scss';
+@import '@uppy/core/src/_variables.scss';
 
 .uppy-FileInput-container {
   margin-bottom: 15px;

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

@@ -1,5 +1,5 @@
-@import '@uppy/core/src/style.scss';
-@import '@uppy/utils/src/microtip.scss';
+@import '@uppy/core/src/_utils.scss';
+@import '@uppy/core/src/_variables.scss';
 
 .uppy-Informer {
   position: absolute;

packages/@uppy/progress-bar/src/style.scss

@@ -1,4 +1,5 @@
-@import '@uppy/core/src/style.scss';
+@import '@uppy/core/src/_utils.scss';
+@import '@uppy/core/src/_variables.scss';
 
 .uppy-ProgressBar {
   /* no important */

packages/@uppy/provider-views/src/style.scss

@@ -1,4 +1,5 @@
-@import '@uppy/core/src/style.scss';
+@import '@uppy/core/src/_utils.scss';
+@import '@uppy/core/src/_variables.scss';
 
 .uppy-DashboardContent-panelBody {
   display: flex;

packages/@uppy/status-bar/src/style.scss

@@ -1,4 +1,5 @@
-@import '@uppy/core/src/style.scss';
+@import '@uppy/core/src/_utils.scss';
+@import '@uppy/core/src/_variables.scss';
 @import '@uppy/utils/src/microtip.scss';
 
 .uppy-StatusBar {

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

@@ -1,4 +1,5 @@
-@import '@uppy/core/src/style.scss';
+@import '@uppy/core/src/_utils.scss';
+@import '@uppy/core/src/_variables.scss';
 
 .uppy-Url {
   width: 100%;

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

@@ -1,4 +1,5 @@
-@import '@uppy/core/src/style.scss';
+@import '@uppy/core/src/_utils.scss';
+@import '@uppy/core/src/_variables.scss';
 
 .uppy-Webcam-container {
   width: 100%;

test/endtoend/create-react-app/src/App.js

@@ -4,6 +4,7 @@ import Tus from '@uppy/tus'
 import GoogleDrive from '@uppy/google-drive'
 import { Dashboard, DashboardModal } from '@uppy/react'
 // import { Dashboard, DashboardModal, DragDrop, ProgressBar } from '@uppy/react'
+import '@uppy/core/dist/style.css'
 import '@uppy/dashboard/dist/style.css'
 // import '@uppy/drag-drop/dist/style.css'
 // import '@uppy/progress-bar/dist/style.css'

website/src/docs/dashboard.md

@@ -43,11 +43,18 @@ const Dashboard = Uppy.Dashboard
 
 ## CSS
 
-The `@uppy/dashboard` plugin includes CSS for the Dashboard itself, and the various plugins used by the Dashboard, such as ([`@uppy/status-bar`](/docs/status-bar) and [`@uppy/informer`](/docs/informer)). If you also use the `@uppy/status-bar` or `@uppy/informer` plugin directly, you should not include their CSS files, but instead only use the one from the `@uppy/dashboard` plugin.
+The `@uppy/dashboard` plugin requires the following CSS for styling:
 
-The CSS file lives at `@uppy/dashboard/dist/style.css`. A minified version is at `@uppy/dashboard/dist/style.min.css`.
+```js
+import '@uppy/core/dist/style.css'
+import '@uppy/dashboard/dist/style.css'
+```
+
+Import general Core styles from `@uppy/core/dist/style.css` first, then add the Dashboard styles from `@uppy/dashboard/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system.
+
+⚠️ The `@uppy/dashboard` plugin includes CSS for the Dashboard itself, and the various plugins used by the Dashboard, such as ([`@uppy/status-bar`](/docs/status-bar) and [`@uppy/informer`](/docs/informer)). If you also use the `@uppy/status-bar` or `@uppy/informer` plugin directly, you should not include their CSS files, but instead only use the one from the `@uppy/dashboard` plugin.
 
-Import one of these files into your project. The way to do this depends on your build system.
+Styles for Provider plugins, like Google Drive and Instagram, are also bundled with Dashboard styles. Styles for other plugins, such as `@uppy/url` and `@uppy/webcam`, are not inluded. If you are using those, please see their docs and make sure to include styles for them as well.
 
 ## Options
 

website/src/docs/dragdrop.md

@@ -39,9 +39,12 @@ const DragDrop = Uppy.DragDrop
 
 The `@uppy/drag-drop` plugin includes some simple styles, like shown in the [example](/examples/dragdrop). You can also choose not to use it and provide your own styles instead.
 
-The CSS file lives at `@uppy/drag-drop/dist/style.css`. A minified version is at `@uppy/drag-drop/dist/style.min.css`.
+```js
+import '@uppy/core/dist/style.css'
+import '@uppy/drag-drop/dist/style.css'
+```
 
-Import one of these files into your project. The way to do this depends on your build system.
+Import general Core styles from `@uppy/core/dist/style.css` first, then add the Drag & Drop styles from `@uppy/drag-drop/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system.
 
 ## Options
 

website/src/docs/dropbox.md

@@ -36,6 +36,13 @@ In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` gl
 const Dropbox = Uppy.Dropbox
 ```
 
+## CSS
+
+Dashboard plugin is recommended as a container to all Provider plugins, including Dropbox. If you are using Dashboard, it [comes with all the nessesary styles](/docs/dashboard/#CSS) for Dropbox as well.
+
+⚠️ If you are feeling adventurous, and want to use Dropbox plugin separately, without Dashboard, make sure to include `@uppy/provider-views/dist/style.css` (or `style.min.css`) CSS file. This is experimental, not officialy supported and not recommended.
+
+
 ## Options
 
 The `@uppy/dropbox` plugin has the following configurable options:

website/src/docs/fileinput.md

@@ -42,9 +42,12 @@ const FileInput = Uppy.FileInput
 
 The `@uppy/file-input` plugin includes some simple styles for use with the [`pretty`](#pretty-true) option, like shown in the [example](/examples/xhrupload). You can also choose not to use it and provide your own styles instead.
 
-The CSS file lives at `@uppy/file-input/dist/style.css`. A minified version is at `@uppy/file-input/dist/style.min.css`.
+```js
+import '@uppy/core/dist/style.css'
+import '@uppy/file-input/dist/style.css'
+```
 
-Import one of these files into your project. The way to do this depends on your build system.
+Import general Core styles from `@uppy/core/dist/style.css` first, then add the Drag & Drop styles from `@uppy/file-input/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system.
 
 ## Options
 

website/src/docs/google-drive.md

@@ -36,6 +36,12 @@ In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` gl
 const GoogleDrive = Uppy.GoogleDrive
 ```
 
+## CSS
+
+Dashboard plugin is recommended as a container to all Provider plugins, including Google Drive. If you are using Dashboard, it [comes with all the nessesary styles](/docs/dashboard/#CSS) for Dropbox as well.
+
+⚠️ If you are feeling adventurous, and want to use Google Drive plugin separately, without Dashboard, make sure to include `@uppy/provider-views/dist/style.css` (or `style.min.css`) CSS file. This is experimental, not officialy supported and not recommended.
+
 ## Options
 
 The `@uppy/google-drive` plugin has the following configurable options:

website/src/docs/index.md

@@ -67,9 +67,14 @@ npm install @uppy/core @uppy/xhr-upload @uppy/dashboard
 ```
 
 ```js
+// Import the plugins
 const Uppy = require('@uppy/core')
 const XHRUpload = require('@uppy/xhr-upload')
 const Dashboard = require('@uppy/dashboard')
+
+// And their styles (for UI plugins)
+require('@uppy/core/dist/style.css')
+require('@uppy/dashboard/dist/style.css')
  
 const uppy = Uppy()
   .use(Dashboard, {

website/src/docs/informer.md

@@ -40,11 +40,16 @@ const Informer = Uppy.Informer
 
 ## CSS
 
-The `@uppy/informer` plugin includes CSS a file for styling. If you use the [`@uppy/dashboard`](/docs/dashboard) plugin, you do not need to include the styles for the Informer, because the Dashboard already includes it.
+The `@uppy/informer` plugin requires the following CSS for styling:
 
-The CSS file lives at `@uppy/informer/dist/style.css`. A minified version is at `@uppy/informer/dist/style.min.css`.
+```js
+import '@uppy/core/dist/style.css'
+import '@uppy/informer/dist/style.css'
+```
+
+Import general Core styles from `@uppy/core/dist/style.css` first, then add the Informer styles from `@uppy/informer/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system.
 
-Import one of these files into your project. The way to do this depends on your build system.
+⚠️ If you use the [`@uppy/dashboard`](/docs/dashboard) plugin, you do not need to include the styles for the Progress Bar, because the Dashboard already includes it.
 
 ## Options
 

website/src/docs/instagram.md

@@ -38,6 +38,12 @@ In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` gl
 const Instagram = Uppy.Instagram
 ```
 
+## CSS
+
+Dashboard plugin is recommended as a container to all Provider plugins, including Instagram. If you are using Dashboard, it [comes with all the nessesary styles](/docs/dashboard/#CSS) for Dropbox as well.
+
+⚠️ If you are feeling adventurous, and want to use Instagram plugin separately, without Dashboard, make sure to include `@uppy/provider-views/dist/style.css` (or `style.min.css`) CSS file. This is experimental, not officialy supported and not recommended.
+
 ## Options
 
 The `@uppy/instagram` plugin has the following configurable options:

website/src/docs/progressbar.md

@@ -37,6 +37,19 @@ In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` gl
 const ProgressBar = Uppy.ProgressBar
 ```
 
+## CSS
+
+The `@uppy/progress-bar` plugin requires the following CSS for styling:
+
+```js
+import '@uppy/core/dist/style.css'
+import '@uppy/progress-bar/dist/style.css'
+```
+
+Import general Core styles from `@uppy/core/dist/style.css` first, then add the Informer styles from `@uppy/progress-bar/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system.
+
+⚠️ If you use the [`@uppy/dashboard`](/docs/dashboard) plugin, you do not need to include the styles for the Progress Bar, because the Dashboard already includes it.
+
 ## Options
 
 The `@uppy/progress-bar` plugin has the following configurable options:

website/src/docs/providers.md

@@ -37,3 +37,7 @@ uppy.use(Instagram, {target: Dashboard, serverUrl: 'http://localhost:3020'})
 const Url = require('@uppy/url')
 uppy.use(Url, {target: Dashboard, serverUrl: 'http://localhost:3020'})
 ```
+
+⚠️ The [Dashboard](/docs/dashboard) plugin is recommended as a universal container to all Provider plugins. It also comes with file previews, progress reporting and more. If you are using the Dashboard, it already [comes with all the nessesary styles](/docs/dashboard/#CSS) and functionality for Providers to work well.
+
+If you are feeling adventurous, you can technically use a Provider plugin separately, without the Dashboard. Make sure to then include `@uppy/provider-views/dist/style.css` (or `style.min.css`) CSS file. But this is experimental, not officialy supported and not recommended.

website/src/docs/react-dashboard-modal.md

@@ -20,8 +20,24 @@ import DashboardModal from '@uppy/react/lib/DashboardModal'
 import { DashboardModal } from '@uppy/react'
 ```
 
+## CSS
+
+The `DashboardModal` component requires the following CSS for styling:
+
+```js
+import '@uppy/core/dist/style.css'
+import '@uppy/dashboard/dist/style.css'
+```
+
+Import general Core styles from `@uppy/core/dist/style.css` first, then add the Dashboard styles from `@uppy/dashboard/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system.
+
+⚠️ The `@uppy/dashboard` plugin includes CSS for the Dashboard itself, and the various plugins used by the Dashboard, such as ([`@uppy/status-bar`](/docs/status-bar) and [`@uppy/informer`](/docs/informer)). If you also use the `@uppy/status-bar` or `@uppy/informer` plugin directly, you should not include their CSS files, but instead only use the one from the `@uppy/dashboard` plugin.
+
+Styles for Provider plugins, like Google Drive and Instagram, are also bundled with Dashboard styles. Styles for other plugins, such as `@uppy/url` and `@uppy/webcam`, are not inluded. If you are using those, please see their docs and make sure to include styles for them as well.
+
 <!-- Make sure the old name of this section still works -->
 <a id="Options"></a>
+
 ## Props
 
 On top of all the [`@uppy/dashboard`][] options, the `<DashboardModal />` plugin adds two additional props:

website/src/docs/react-dashboard.md

@@ -20,6 +20,21 @@ import Dashboard from '@uppy/react/lib/Dashboard'
 import { Dashboard } from '@uppy/react'
 ```
 
+## CSS
+
+The `Dashboard` component requires the following CSS for styling:
+
+```js
+import '@uppy/core/dist/style.css'
+import '@uppy/dashboard/dist/style.css'
+```
+
+Import general Core styles from `@uppy/core/dist/style.css` first, then add the Dashboard styles from `@uppy/dashboard/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system.
+
+⚠️ The `@uppy/dashboard` plugin includes CSS for the Dashboard itself, and the various plugins used by the Dashboard, such as ([`@uppy/status-bar`](/docs/status-bar) and [`@uppy/informer`](/docs/informer)). If you also use the `@uppy/status-bar` or `@uppy/informer` plugin directly, you should not include their CSS files, but instead only use the one from the `@uppy/dashboard` plugin.
+
+Styles for Provider plugins, like Google Drive and Instagram, are also bundled with Dashboard styles. Styles for other plugins, such as `@uppy/url` and `@uppy/webcam`, are not inluded. If you are using those, please see their docs and make sure to include styles for them as well.
+
 ## Props
 
 The `<Dashboard />` component supports all [`@uppy/dashboard`][] options as props.

website/src/docs/react-dragdrop.md

@@ -21,6 +21,17 @@ import DragDrop from '@uppy/react/lib/DragDrop';
 import { DragDrop } from '@uppy/react';
 ```
 
+## CSS
+
+The `DragDrop` component includes some simple styles, like shown in the [example](/examples/dragdrop). You can also choose not to use it and provide your own styles instead:
+
+```js
+import '@uppy/core/dist/style.css'
+import '@uppy/drag-drop/dist/style.css'
+```
+
+Import general Core styles from `@uppy/core/dist/style.css` first, then add the Drag & Drop styles from `@uppy/drag-drop/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system.
+
 ## Props
 
 The `<DragDrop />` component supports all [DragDrop][] options as props.

website/src/docs/react-progressbar.md

@@ -21,6 +21,17 @@ import ProgressBar from '@uppy/react/lib/ProgressBar'
 import { ProgressBar } from '@uppy/react'
 ```
 
+## CSS
+
+The `ProgressBar` plugin requires the following CSS for styling:
+
+```js
+import '@uppy/core/dist/style.css'
+import '@uppy/progress-bar/dist/style.css'
+```
+
+Import general Core styles from `@uppy/core/dist/style.css` first, then add the Progress Bar styles from `@uppy/progress-bar/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system.
+
 ## Props
 
 The `<ProgressBar />` component supports all [`@uppy/progress-bar`][] options as props.

website/src/docs/react-statusbar.md

@@ -21,6 +21,17 @@ import StatusBar from '@uppy/react/lib/StatusBar'
 import { StatusBar } from '@uppy/react'
 ```
 
+## CSS
+
+The `StatusBar` component requires the following CSS for styling:
+
+```js
+import '@uppy/core/dist/style.css'
+import '@uppy/status-bar/dist/style.css'
+```
+
+Import general Core styles from `@uppy/core/dist/style.css` first, then add the Status Bar styles from `@uppy/status-bar/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system.
+
 ## Props
 
 The `<StatusBar />` component supports all [`@uppy/status-bar`][] options as props.

website/src/docs/react.md

@@ -17,6 +17,10 @@ Install from NPM:
 npm install @uppy/react
 ```
 
+## CSS
+
+Make sure to also include the nessesary CSS files for each Uppy React component you are using. Follow links for individual components docs below for details on that.
+
 ## Usage
 
 The components can be used with either [React][] or API-compatible alternatives such as [Preact][].

website/src/docs/statusbar.md

@@ -38,11 +38,16 @@ const StatusBar = Uppy.StatusBar
 
 ## CSS
 
-The `@uppy/status-bar` plugin includes a CSS file for styling. If you are using the [`@uppy/dashboard`](/docs/dashboard) plugin, you do not need to include the styles for the StatusBar, because the Dashboard already includes it.
+The `@uppy/status-bar` plugin requires the following CSS for styling:
 
-The CSS file lives at `@uppy/status-bar/dist/style.css`. A minified version can be found at `@uppy/status-bar/dist/style.min.css`.
+```js
+import '@uppy/core/dist/style.css'
+import '@uppy/status-bar/dist/style.css'
+```
+
+Import general Core styles from `@uppy/core/dist/style.css` first, then add the Status Bar styles from `@uppy/status-bar/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system.
 
-Import one of these files into your project. The way to do this depends on your build system.
+⚠️ If you use the [`@uppy/dashboard`](/docs/dashboard) plugin, you do not need to include the styles for the Progress Bar, because the Dashboard already includes it.
 
 ## Options
 

website/src/docs/url.md

@@ -36,6 +36,17 @@ In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` gl
 const Url = Uppy.Url
 ```
 
+## CSS
+
+The `@uppy/url` plugin requires the following CSS for styling:
+
+```js
+import '@uppy/core/dist/style.css'
+import '@uppy/url/dist/style.css'
+```
+
+Import general Core styles from `@uppy/core/dist/style.css` first, then add the Url styles from `@uppy/url/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system.
+
 ## Options
 
 The `@uppy/url` plugin has the following configurable options:

website/src/docs/webcam.md

@@ -36,6 +36,17 @@ In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` gl
 const Webcam = Uppy.Webcam
 ```
 
+## CSS
+
+The `@uppy/webcam` plugin requires the following CSS for styling:
+
+```js
+import '@uppy/core/dist/style.css'
+import '@uppy/webcam/dist/style.css'
+```
+
+Import general Core styles from `@uppy/core/dist/style.css` first, then add the Webcam styles from `@uppy/webcam/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system.
+
 ## Options
 
 The `@uppy/webcam` plugin has the following configurable options: