Skip to content

Commit

Permalink
fix(file-uploader): match experimental spec (#1772)
Browse files Browse the repository at this point in the history 
* fix(file-uploader): match experimental spec

* docs(file-uploader): add example upload states

* refactor(file-uploader): use caption style token

* refactor(file-uploader): update filename background color token

* fix(file-uploader): replace improper reference with mixin properties

* fix(file-uploader): increase right padding of file upload button

* fix(file-uploader): increase min-height of file labels

* style(file-uploader): increase svg icon size

* fix(file-uploader): use new type token for filenames

* fix(file-uploader): increase file container top margin

* fix(file-uploader): use state containers and fix icon sizes
  • Loading branch information
@emyarod @tw15egan
emyarod authored and tw15egan committed Feb 15, 2019
1 parent dacaaad commit a38042f
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 37 deletions.
60 changes: 38 additions & 22 deletions src/components/file-uploader/_file-uploader.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
@import '../button/button';
@import '../form/form';
@import '../loading/loading';
@import '@carbon/type/scss/type';

@mixin file-uploader {
.#{$prefix}--file {
Expand Down Expand Up @@ -112,6 +113,11 @@
width: 100%;
}

.#{$prefix}--file--invalid {
margin-right: $spacing-xs;
fill: $support-01;
}

// TODO: sync with type
.#{$prefix}--file--label {
@include reset;
Expand All @@ -127,9 +133,8 @@

.#{$prefix}--file-btn {
display: inline-flex;
width: rem(95px);
margin: 0;
padding-right: 1rem;
padding-right: rem(64px);
}

.#{$prefix}--label-description {
Expand All @@ -143,32 +148,53 @@
.#{$prefix}--file-container {
display: block;
width: 100%;
margin-top: $spacing-md;
margin-top: $spacing-lg;
}

.#{$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;
min-height: rem(32px);
max-width: rem(300px);
margin-bottom: $spacing-xs;
padding: 0 $spacing-xs 0 $spacing-md;
margin-bottom: $spacing-sm;
background-color: $field-01;
overflow: hidden;

&:last-child {
margin-bottom: 0;
}

.#{$prefix}--inline-loading__animation,
.#{$prefix}--loading {
right: -0.25rem; // offset for loading svg container
width: 1.5rem;
height: 1.5rem;
}
}

.#{$prefix}--file__selected-file--invalid {
@include focus-outline('invalid');
margin-bottom: $spacing-2xs;
}

.#{$prefix}--file__selected-file--invalid + .#{$prefix}--form-requirement {
display: block;
max-height: rem(200px);
color: $support-01;
font-weight: 400;
margin: 0 0 $spacing-xs 0;
overflow: visible;
}

.#{$prefix}--file-filename {
@include typescale('omega');
@include text-overflow(100%);
display: inline-flex;
@include carbon--type-style('body-short-01');
@include text-overflow(300px);
display: inline-block;
align-items: center;
color: $text-01;
margin-right: $spacing-md;
height: 1.875rem;
/*rtl:ignore*/
direction: ltr;
justify-content: flex-start; /*rtl:{flex-end}*/
Expand All @@ -178,21 +204,13 @@
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;
fill: $support-02;
cursor: pointer;

&:focus {
Expand All @@ -205,8 +223,6 @@
border: none;
cursor: pointer;
padding: 0;
width: 1rem;
height: 1rem;
}
}

Expand Down
13 changes: 13 additions & 0 deletions src/components/file-uploader/file-uploader.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,17 @@ module.exports = {
prefix,
componentsX,
},
variants: [
{
name: 'default',
label: 'File uploader',
},
{
name: 'example upload states',
label: 'File uploader with example upload states',
context: {
exampleUploadStates: true,
},
},
],
};
72 changes: 57 additions & 15 deletions src/components/file-uploader/file-uploader.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,69 @@
<!--
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->

<div class="{{@root.prefix}}--form-item">
<strong class="{{#if componentsX}}{{@root.prefix}}--file--label{{else}}{{@root.prefix}}--label{{/if}}">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"
<label for="your-file-importer-id-here"
class="{{@root.prefix}}--file-btn {{@root.prefix}}--btn {{@root.prefix}}--btn--primary {{@root.prefix}}--btn--sm"
role="button"
tabindex="0">Add file</label>
<input
type="file"
class="{{@root.prefix}}--file-input"
id="your-file-importer-id-here"
data-file-uploader
data-target="[data-file-container]"
multiple
/>
<div data-file-container class="{{@root.prefix}}--file-container"></div>
role="button" tabindex="0">Add file</label>
<input type="file" class="{{@root.prefix}}--file-input" id="your-file-importer-id-here" data-file-uploader
data-target="[data-file-container]" multiple />
<di data-file-container class="{{@root.prefix}}--file-container">
{{#if exampleUploadStates}}
<div class="{{@root.prefix}}--file__selected-file">
<p class="{{@root.prefix}}--file-filename">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero vero
sapiente illum reprehenderit molestiae perferendis voluptatem temporibus laudantium ducimus magni voluptatum
veniam, odit nesciunt corporis numquam maxime sunt excepturi sint!</p>
<span data-for="your-file-importer-id-here" class="{{@root.prefix}}--file__state-container">
{{#if componentsX}}
{{ carbon-icon 'CheckmarkFilled16' class=(add @root.prefix '--file-complete') }}
{{/if}}
</span>
</div>
<div class="{{@root.prefix}}--file__selected-file--invalid__wrapper">
<div class="{{@root.prefix}}--file__selected-file {{@root.prefix}}--file__selected-file--invalid" data-invalid>
<p class="{{@root.prefix}}--file-filename">color.jpeg</p>
<span data-for="your-file-importer-id-here" class="{{@root.prefix}}--file__state-container">
{{#if componentsX}}
{{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--file--invalid')}}
{{ carbon-icon 'Close16' class=(add @root.prefix '--file--close') }}
{{/if}}
</span>
</div>
{{#if componentsX}}
<div class="{{@root.prefix}}--form-requirement">
File size exceeds limit
</div>
{{/if}}
</div>
<div class="{{@root.prefix}}--file__selected-file">
<p class="{{@root.prefix}}--file-filename">color.jpeg</p>
<span data-for="your-file-importer-id-here" class="{{@root.prefix}}--file__state-container">
{{#if componentsX}}
<div class="{{@root.prefix}}--inline-loading__animation">
<div data-inline-loading-spinner="" class="{{@root.prefix}}--loading {{@root.prefix}}--loading--small">
<svg class="{{@root.prefix}}--loading__svg" viewBox="-75 -75 150 150">
<circle class="{{@root.prefix}}--loading__background" cx="0" cy="0" r="37.5"></circle>
<circle class="{{@root.prefix}}--loading__stroke" cx="0" cy="0" r="37.5"></circle>
</svg>
</div>
<svg data-inline-loading-finished="" hidden=""
class="{{@root.prefix}}--inline-loading__checkmark-container {{@root.prefix}}--inline-loading__svg"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
<polyline class="{{@root.prefix}}--inline-loading__checkmark" points="0.74 3.4 3.67 6.34 9.24 0.74">
</polyline>
</svg>
</div>
{{/if}}
</span>
</div>
{{/if}}
</div>
</div>

0 comments on commit a38042f

Please sign in to comment.