Merge pull request #1701 from transloadit/add-pretty-focus-styles-everywhere

Added focus styles for all elements

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

@@ -25,26 +25,29 @@
 }
 
 @mixin highlight-focus() {
+  @include clear-focus();
+
   &:hover {
     color: darken($blue, 10%);
   }
 
   &:focus {
-    outline: none;
     background-color: $highlight;
   }
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
 }
 
 @mixin blue-border-focus() {
+  @include clear-focus();
+
   &:focus {
-    outline: none;
     box-shadow: 0 0 0 3px rgba($blue, 0.5);
   }
+}
 
+@mixin clear-focus() {
+  &:focus {
+    outline: none;
+  }
   &::-moz-focus-inner {
     border: 0;
   }

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

@@ -66,7 +66,7 @@ class AddFiles extends Component {
   renderDropPasteBrowseTagline () {
     const browse =
       <button type="button"
-        class="uppy-Dashboard-browse"
+        class="uppy-u-reset uppy-Dashboard-browse"
         onclick={this.triggerFileInputClick}>
         {this.props.i18n('browse')}
       </button>

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

@@ -11,13 +11,13 @@
   transition: all .35 ease;
 }
   .uppy-DashboardItem-progressIndicator {
+    @include clear-focus;
     display: inline-block;
     width: 38px;
     height: 38px;
     opacity: 0.9;
     cursor: pointer;
     &:focus{
-      outline: none;
       svg.UppyIcon-progressCircle .bg,
       svg.retry{
         fill: lighten($blue, 20%);

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

@@ -170,6 +170,7 @@
 }
 
 .uppy-Dashboard-close {
+  @include clear-focus;
   display: block;
   position: absolute;
   top: -33px;
@@ -179,6 +180,9 @@
   font-size: 27px;
   z-index: $zIndex-5;
 
+  &:focus{
+    color: lighten($blue, 25%);
+  }
   @media #{$screen-medium} {
     font-size: 35px;
     top: -10px;
@@ -252,19 +256,14 @@
 }
 
 .uppy-Dashboard-browse {
-  @include reset-button;
+  @include clear-focus;
   cursor: pointer;
   color: rgba($blue, 0.9);
 
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-  .uppy-Dashboard-browse:focus {
-    outline: none;
+  &:hover, &:focus {
     border-bottom: 2px solid $blue;
   }
+}
 
 .uppy-DashboardTabs-list {
   display: flex;

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

@@ -1,16 +1,13 @@
 const { h } = require('preact')
 
-const Breadcrumb = (props) => {
-  return (
-    <span>
-      <button
-        type="button"
-        class="uppy-u-reset"
-        onclick={props.getFolder}>{props.title}</button>
-      {!props.isLast ? ' / ' : ''}
-    </span>
-  )
-}
+const Breadcrumb = (props) => [
+  <button
+    type="button"
+    class="uppy-u-reset"
+    onclick={props.getFolder}>{props.title}
+  </button>,
+  !props.isLast ? ' / ' : ''
+]
 
 module.exports = (props) => {
   return (

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

@@ -60,31 +60,32 @@
     margin-bottom: 0;
   }
 }
-
-.uppy-Provider-breadcrumbsIcon {
-  display: inline-block;
-  color: $gray-700;
-  vertical-align: bottom;
-  margin-right: 8px;
-  line-height: 1;
-}
-
-  .uppy-Provider-breadcrumbsIcon svg {
-    width: 13px;
-    height: 13px;
-    fill: $gray-700;
+  .uppy-Provider-breadcrumbsIcon {
+    display: inline-block;
+    color: $gray-700;
+    vertical-align: middle;
+    margin-right: 4px;
+    line-height: 1;
   }
-
-.uppy-Provider-breadcrumbs button {
-  display: inline-block;
-  line-height: inherit;
-  // font-size: 14px;
-}
-
-.uppy-Provider-breadcrumbs button:hover {
-  text-decoration: underline;
-  cursor: pointer;
-}
+    .uppy-Provider-breadcrumbsIcon svg {
+      width: 13px;
+      height: 13px;
+      fill: $gray-700;
+    }
+
+  .uppy-Provider-breadcrumbs button {
+    @include highlight-focus;
+    display: inline-block;
+    line-height: inherit;
+    // for focus
+    padding: 4px;
+    border-radius: 3px;
+    &:hover {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+// ...uppy-Provider-breadcrumbs|
 
 .uppy-ProviderBrowser {
   display: flex;
@@ -116,7 +117,7 @@
 }
 
 .uppy-ProviderBrowser-headerBar {
-  padding: 12px 15px;
+  padding: 7px 15px;
   background-color: $gray-50;
   z-index: $zIndex-2;
   color: $gray-600;
@@ -126,9 +127,6 @@
   .uppy-size--md & {
     display: flex;
     align-items: center;
-    // height: 40px;
-    // line-height: 40px;
-    padding: 12px 15px;
   }
 }
 
@@ -210,9 +208,13 @@
 }
 
 .uppy-ProviderBrowser-userLogout {
+  @include highlight-focus;
   cursor: pointer;
   line-height: inherit;
   color: $blue;
+  // for focus
+  padding: 4px;
+  border-radius: 3px;
 
   &:hover {
     text-decoration: underline;

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

@@ -232,14 +232,42 @@ const ProgressBarProcessing = (props) => {
   </div>
 }
 
+const renderDot = () =>
+  ' \u00B7 '
+
 const ProgressDetails = (props) => {
+  const ifShowFilesUploadedOfTotal = props.numUploads > 1
+
   return <div class="uppy-StatusBar-statusSecondary">
-    { props.numUploads > 1 && props.i18n('filesUploadedOfTotal', { complete: props.complete, smart_count: props.numUploads }) + ' \u00B7 ' }
-    { props.i18n('dataUploadedOfTotal', {
-      complete: prettyBytes(props.totalUploadedSize),
-      total: prettyBytes(props.totalSize)
-    }) + ' \u00B7 ' }
-    { props.i18n('xTimeLeft', { time: prettyETA(props.totalETA) }) }
+    {
+      ifShowFilesUploadedOfTotal &&
+      props.i18n('filesUploadedOfTotal', {
+        complete: props.complete,
+        smart_count: props.numUploads
+      })
+    }
+    <span class="uppy-StatusBar-additionalInfo">
+      {/* When should we render this dot?
+        1. .-additionalInfo is shown (happens only on desktops)
+        2. AND 'filesUploadedOfTotal' was shown
+      */}
+      {ifShowFilesUploadedOfTotal && renderDot()}
+
+      {
+        props.i18n('dataUploadedOfTotal', {
+          complete: prettyBytes(props.totalUploadedSize),
+          total: prettyBytes(props.totalSize)
+        })
+      }
+
+      {renderDot()}
+
+      {
+        props.i18n('xTimeLeft', {
+          time: prettyETA(props.totalETA)
+        })
+      }
+    </span>
   </div>
 }
 
@@ -253,7 +281,8 @@ const UploadNewlyAddedFiles = (props) => {
   const uploadBtnClassNames = classNames(
     'uppy-u-reset',
     'uppy-c-btn',
-    'uppy-StatusBar-actionBtn'
+    'uppy-StatusBar-actionBtn',
+    'uppy-StatusBar-actionBtn--uploadNewlyAdded'
   )
 
   return <div class="uppy-StatusBar-statusSecondary">

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

@@ -109,13 +109,12 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  max-width: 170px;
-  overflow-x: hidden;
   padding-right: 0.3em;
+}
 
-  .uppy-size--md & {
-    max-width: 400px;
-  }
+// Don't display elements with class .-additionalInfo if we're not at least on .md
+.uppy-Root:not(.uppy-size--md) .uppy-StatusBar-additionalInfo {
+  display: none;
 }
 
 .uppy-StatusBar-statusPrimary {
@@ -128,10 +127,7 @@
   line-height: 1.2;
   display: inline-block;
   color: $gray-600;
-  text-overflow: ellipsis;
   white-space: nowrap;
-  overflow-x: hidden;
-  // max-width: 170px;
 }
 
   .uppy-StatusBar-statusSecondaryHint {
@@ -178,37 +174,21 @@
 }
 
 .uppy-StatusBar-actionCircleBtn {
+  @include blue-border-focus;
   line-height: 1;
   cursor: pointer;
-  padding: 3px;
+  margin: 3px;
   opacity: 0.9;
-  // display: flex;
-  // align-items: center;
-  // justify-content: center;
-  // width: 20px;
-  // height: 20px;
-  // border-radius: 50%;
-  // color: rgba($black, 0.6);
-  // background-color: rgba($gray-500, 0.3);
-  // text-align: center;
 
   &:hover {
     opacity: 1;
   }
+  &:focus {
+    border-radius: 50%;
+  }
 }
 
-  // .uppy-StatusBar-actionCircleBtn:not(:last-child) {
-  //   margin-right: 2px;
-  // }
-
-  // .uppy-size--md .uppy-StatusBar-actionCircleBtn {
-  //   padding: 1px 4px;
-  // }
-
   .uppy-StatusBar-actionCircleBtn svg {
-    // width: 12px;
-    // height: 12px;
-    // fill: currentColor;
     vertical-align: bottom;
   }
 
@@ -229,6 +209,7 @@
   // }
 
   .uppy-StatusBar-actionBtn--retry {
+    @include blue-border-focus();
     height: 16px;
     border-radius: 8px;
     margin-right: 6px;
@@ -273,6 +254,15 @@
     color: $blue;
   }
 
+  .uppy-StatusBar-actionBtn--uploadNewlyAdded {
+    // for focus
+    @include blue-border-focus;
+    padding-right: 3px;
+    padding-left: 3px;
+    padding-bottom: 1px;
+    border-radius: 3px;
+  }
+
 .uppy-StatusBar-details {
   line-height: 12px;
   width: 13px;