feat(file-uploader): markup and experimental changes (#1450)

* feat(file-uploader): markup and experimental changes * chore(file-uploader): clean up css * chore(file-uploader): style changes
carbon-design-system · Nov 26, 2018 · d2ec90a · d2ec90a
1 parent 8fef6c5
commit d2ec90a
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 8 deletions.
diff --git a/src/components/file-uploader/_file-uploader.scss b/src/components/file-uploader/_file-uploader.scss
@@ -11,7 +11,7 @@
 @import '../form/form';
 @import '../loading/loading';
 
-@include exports('file-uploader') {
+@mixin file-uploader {
   .#{$prefix}--file {
     width: 100%;
   }
@@ -103,3 +103,114 @@
     fill: $support-02;
   }
 }
+
+@mixin file-uploader--x {
+  .#{$prefix}--file {
+    width: 100%;
+  }
+
+  // TODO: sync with type
+  .#{$prefix}--file--label {
+    @include reset;
+    @include font-family;
+    @include typescale('zeta');
+    color: $text-01;
+    margin-bottom: $spacing-xs;
+  }
+
+  .#{$prefix}--file-input {
+    @include hidden;
+  }
+
+  .#{$prefix}--file-btn {
+    display: inline-flex;
+    width: rem(95px);
+    margin: 0;
+    padding-right: 1rem;
+  }
+
+  .#{$prefix}--label-description {
+    @include reset;
+    @include typescale('zeta');
+    @include line-height('body');
+    color: $text-02;
+    margin-bottom: $spacing-md;
+  }
+
+  .#{$prefix}--file-container {
+    display: block;
+    width: 100%;
+    margin-top: $spacing-md;
+  }
+
+  .#{$prefix}--file__selected-file {
+    @include text-overflow(300px);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: rem(30px);
+    background-color: $inverse-01;
+    padding: 0 $spacing-xs 0 $spacing-md;
+    margin-bottom: $spacing-sm;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .#{$prefix}--file-filename {
+    @include typescale('omega');
+    @include text-overflow(100%);
+    display: inline-flex;
+    align-items: center;
+    color: $text-01;
+    margin-right: $spacing-md;
+    height: 1.875rem;
+    /*rtl:ignore*/
+    direction: ltr;
+    justify-content: flex-start; /*rtl:{flex-end}*/
+  }
+
+  .#{$prefix}--file__state-container {
+    display: flex;
+    align-items: center;
+
+    .#{$prefix}--loading {
+      width: 1rem;
+      height: 1rem;
+      margin-right: $spacing-xs;
+    }
+
+    .#{$prefix}--loading__svg {
+      stroke: $ui-05;
+    }
+  }
+
+  .#{$prefix}--file__state-container .#{$prefix}--file-complete {
+    width: 1rem;
+    height: 1rem;
+    fill: $text-01;
+    cursor: pointer;
+
+    &:focus {
+      @include focus-outline('border');
+    }
+  }
+
+  .#{$prefix}--file__state-container .#{$prefix}--file-close {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
+@include exports('file-uploader') {
+  @if feature-flag-enabled('components-x') {
+    @include file-uploader--x;
+  } @else {
+    @include file-uploader;
+  }
+}
diff --git a/src/components/file-uploader/file-uploader.config.js b/src/components/file-uploader/file-uploader.config.js
@@ -1,9 +1,11 @@
 'use strict';
 
 const { prefix } = require('../../globals/js/settings');
+const { componentsX } = require('../../globals/js/feature-flags');
 
 module.exports = {
   context: {
     prefix,
+    componentsX,
   },
 };
diff --git a/src/components/file-uploader/file-uploader.hbs b/src/components/file-uploader/file-uploader.hbs
@@ -1,12 +1,12 @@
 <div class="{{@root.prefix}}--form-item">
-  <strong class="{{@root.prefix}}--label">Account photo</strong>
+  <strong class="{{#if componentsX}}{{@root.prefix}}--file--label{{else}}{{@root.prefix}}--label{{/if}}">Account photo</strong>
   <p class="{{@root.prefix}}--label-description">only .jpg and .png files. 500kb max file size.</p>
   <div class="{{@root.prefix}}--file" data-file>
     <label
       for="your-file-importer-id-here"
-      class="{{@root.prefix}}--file-btn {{@root.prefix}}--btn {{@root.prefix}}--btn--secondary"
+      class="{{@root.prefix}}--file-btn {{@root.prefix}}--btn {{@root.prefix}}--btn--primary {{@root.prefix}}--btn--sm"
       role="button"
-      tabindex="0">Add files</label>
+      tabindex="0">Add file</label>
     <input
       type="file"
       class="{{@root.prefix}}--file-input"

diff --git a/src/components/file-uploader/file-uploader.js b/src/components/file-uploader/file-uploader.js
@@ -1,3 +1,4 @@
+import { componentsX } from '../../globals/js/feature-flags';
 import settings from '../../globals/js/settings';
 import mixin from '../../globals/js/misc/mixin';
 import createComponent from '../../globals/js/mixins/create-component';
@@ -52,11 +53,19 @@ class FileUploader extends mixin(createComponent, initComponentBySearch, evented
   }
 
   _closeButtonHTML() {
+    if (componentsX) {
+      return `
+      <button class="${this.options.classFileClose}" type="button" aria-label="close">
+      <svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16">
+      <path fill="#231F20" d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"/>
+      </svg>
+      </button>`;
+    }
     return `
-      <svg class="${this.options.classFileClose}" tabindex="0" viewBox="0 0 16 16" fill-rule="evenodd" width="16" height="16">
-        <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8
-          9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z" />
-      </svg>`;
+    <svg class="${this.options.classFileClose}" tabindex="0" viewBox="0 0 16 16" fill-rule="evenodd" width="16" height="16">
+      <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8
+        9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z" />
+    </svg>`;
   }
 
   _checkmarkHTML() {