Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(file-uploader): adjusts default button and removes clear file button #5166

Merged
merged 25 commits into from
Jan 31, 2020
Merged

fix(file-uploader): adjusts default button and removes clear file button #5166

Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
dfa9ae0
fix(file-uploader): adjusts default button and removes clear file button
abbeyhrt Jan 23, 2020
f1deb2b
fix(file-uploader): add css rule for backwards compatibility
abbeyhrt Jan 27, 2020
2484872
chore(fileuploader): add comment for style rule
abbeyhrt Jan 27, 2020
2ecd3bd
Merge branch 'master' into 3587=file-uploader
laurenmrice Jan 27, 2020
fa32a94
Merge branch 'master' into 3587=file-uploader
tw15egan Jan 27, 2020
076aa0a
Merge branch 'master' of https://github.com/carbon-design-system/carb…
abbeyhrt Jan 28, 2020
885d3c5
Merge branch '3587=file-uploader' of https://github.com/abbeyhrt/my-c…
abbeyhrt Jan 28, 2020
62313d3
Merge branch 'master' into 3587=file-uploader
abbeyhrt Jan 28, 2020
1bc21ba
fix(file-uploader): check in progress
abbeyhrt Jan 29, 2020
6baf564
fix(file-uploader): adjust icon positioning and color
abbeyhrt Jan 29, 2020
a33e953
Merge branch '3587=file-uploader' of https://github.com/abbeyhrt/my-c…
abbeyhrt Jan 29, 2020
dc9b253
Merge branch 'master' into 3587=file-uploader
abbeyhrt Jan 29, 2020
1c534e0
Merge branch 'master' into 3587=file-uploader
abbeyhrt Jan 29, 2020
f6c9543
fix(file-uploader): adjust styles on invalid files
abbeyhrt Jan 30, 2020
68578c8
Merge branch '3587=file-uploader' of https://github.com/abbeyhrt/my-c…
abbeyhrt Jan 30, 2020
3e23eac
Merge branch 'master' into 3587=file-uploader
abbeyhrt Jan 30, 2020
7d65fd7
fix(file-uploader): adjust styles for vanilla
abbeyhrt Jan 30, 2020
205305f
Merge branch '3587=file-uploader' of https://github.com/abbeyhrt/my-c…
abbeyhrt Jan 30, 2020
0ae60da
Merge branch 'master' into 3587=file-uploader
tw15egan Jan 30, 2020
78c91b6
Merge branch 'master' into 3587=file-uploader
tw15egan Jan 30, 2020
200b62f
Merge branch 'master' into 3587=file-uploader
abbeyhrt Jan 31, 2020
69afeee
fix(file-uploader): combine like style selectors
abbeyhrt Jan 31, 2020
d9eb293
Merge branch '3587=file-uploader' of https://github.com/abbeyhrt/my-c…
abbeyhrt Jan 31, 2020
cc65273
Merge branch 'master' into 3587=file-uploader
abbeyhrt Jan 31, 2020
49bdc4a
Merge branch 'master' into 3587=file-uploader
asudoh Jan 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 12 additions & 7 deletions packages/components/docs/sass.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3471,7 +3471,6 @@ $carbon--spacing-07: 2rem;
- `spacing-07`
- **Used by**:
- [snippet [mixin]](#snippet-mixin)
- [file-uploader [mixin]](#file-uploader-mixin)
- [form [mixin]](#form-mixin)
- [listbox [mixin]](#listbox-mixin)
- [number-input [mixin]](#number-input-mixin)
Expand All @@ -3494,6 +3493,7 @@ $carbon--spacing-08: 2.5rem;
- `spacing-08`
- **Used by**:
- [snippet [mixin]](#snippet-mixin)
- [file-uploader [mixin]](#file-uploader-mixin)
- [listbox [mixin]](#listbox-mixin)
- [search [mixin]](#search-mixin)
- [text-area [mixin]](#text-area-mixin)
Expand Down Expand Up @@ -6534,6 +6534,7 @@ $icon-01: if(
- [snippet [mixin]](#snippet-mixin)
- [data-table-v2-action [mixin]](#data-table-v2-action-mixin)
- [date-picker [mixin]](#date-picker-mixin)
- [file-uploader [mixin]](#file-uploader-mixin)
- [listbox [mixin]](#listbox-mixin)
- [modal [mixin]](#modal-mixin)
- [number-input [mixin]](#number-input-mixin)
Expand Down Expand Up @@ -6565,7 +6566,6 @@ $icon-02: if(
- **Type**: `{undefined}`
- **Used by**:
- [carbon--theme [mixin]](#carbon--theme-mixin)
- [file-uploader [mixin]](#file-uploader-mixin)
- [listbox [mixin]](#listbox-mixin)
- [overflow-menu [mixin]](#overflow-menu-mixin)
- [text-input [mixin]](#text-input-mixin)
Expand Down Expand Up @@ -16952,17 +16952,22 @@ File uploader styles
margin-bottom: $carbon--spacing-05;
}

// For backwards compatibility
.#{$prefix}--file-btn ~ .#{$prefix}--file-container {
margin-top: $carbon--spacing-06;
}

.#{$prefix}--btn ~ .#{$prefix}--file-container {
margin-top: $carbon--spacing-05;
}

.#{$prefix}--file__selected-file {
display: grid;
grid-gap: $carbon--spacing-03 $carbon--spacing-05;
grid-template-columns: 1fr auto;
grid-auto-rows: auto;
align-items: center;
min-height: $carbon--spacing-07;
min-height: $carbon--spacing-08;
max-width: rem(320px);
margin-bottom: $carbon--spacing-03;
background-color: $field-01;
Expand Down Expand Up @@ -17091,15 +17096,15 @@ File uploader styles
border: none;
cursor: pointer;
padding: 0;
fill: $icon-02;
fill: $icon-01;

&:focus {
@include focus-outline('border');
}
}

.#{$prefix}--file__state-container .#{$prefix}--file-close svg path {
fill: $icon-02;
fill: $icon-01;
}

.#{$prefix}--file__state-container .#{$prefix}--inline-loading__animation {
Expand Down Expand Up @@ -17139,14 +17144,14 @@ File uploader styles
- [text-02 [variable]](#text-02-variable)
- [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
- [carbon--spacing-06 [variable]](#carbon--spacing-06-variable)
- [carbon--spacing-07 [variable]](#carbon--spacing-07-variable)
- [carbon--spacing-08 [variable]](#carbon--spacing-08-variable)
- [field-01 [variable]](#field-01-variable)
- [carbon--spacing-04 [variable]](#carbon--spacing-04-variable)
- [ui-03 [variable]](#ui-03-variable)
- [ui-05 [variable]](#ui-05-variable)
- [interactive-04 [variable]](#interactive-04-variable)
- [icon-03 [variable]](#icon-03-variable)
- [icon-02 [variable]](#icon-02-variable)
- [icon-01 [variable]](#icon-01-variable)
- [ui-04 [variable]](#ui-04-variable)

## form
Expand Down
31 changes: 21 additions & 10 deletions packages/components/src/components/file-uploader/_file-uploader.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,17 +102,30 @@
margin-bottom: $carbon--spacing-05;
}

// For backwards compatibility
.#{$prefix}--file-btn ~ .#{$prefix}--file-container {
margin-top: $carbon--spacing-06;
}

.#{$prefix}--btn ~ .#{$prefix}--file-container {
margin-top: $carbon--spacing-05;
}

.#{$prefix}--file ~ .#{$prefix}--file-container {
abbeyhrt marked this conversation as resolved.
Show resolved Hide resolved
margin-top: $carbon--spacing-03;
}

.#{$prefix}--file .#{$prefix}--file-container {
margin-top: $carbon--spacing-03;
}

.#{$prefix}--file__selected-file {
display: grid;
grid-gap: $carbon--spacing-03 $carbon--spacing-05;
grid-gap: $carbon--spacing-05;
grid-template-columns: 1fr auto;
grid-auto-rows: auto;
align-items: center;
min-height: $carbon--spacing-07;
min-height: $carbon--spacing-09;
max-width: rem(320px);
margin-bottom: $carbon--spacing-03;
background-color: $field-01;
Expand Down Expand Up @@ -160,22 +173,20 @@

.#{$prefix}--file__selected-file--invalid {
@include focus-outline('invalid');
outline-width: 1px;
padding: $carbon--spacing-04 0;
padding: $carbon--spacing-05 0;
}

.#{$prefix}--file__selected-file--invalid .#{$prefix}--form-requirement {
border-top: 1px solid $ui-03;
padding-top: $carbon--spacing-03;
padding-top: $carbon--spacing-05;
}

.#{$prefix}--file__selected-file--invalid
.#{$prefix}--form-requirement__title,
.#{$prefix}--file__selected-file--invalid
.#{$prefix}--form-requirement__supplement {
@include type-style('label-01');
padding-right: $carbon--spacing-03;
padding-left: $carbon--spacing-05;
padding: 0 $carbon--spacing-05;
}

.#{$prefix}--file__selected-file--invalid
Expand Down Expand Up @@ -205,7 +216,7 @@
display: flex;
justify-content: center;
min-width: 1.5rem;
padding-right: $carbon--spacing-03;
padding-right: $carbon--spacing-05;

.#{$prefix}--loading__svg {
stroke: $ui-05;
Expand Down Expand Up @@ -241,15 +252,15 @@
border: none;
cursor: pointer;
padding: 0;
fill: $icon-02;
fill: $icon-01;

&:focus {
@include focus-outline('border');
}
}

.#{$prefix}--file__state-container .#{$prefix}--file-close svg path {
fill: $icon-02;
fill: $icon-01;
}

.#{$prefix}--file__state-container .#{$prefix}--inline-loading__animation {
Expand Down
16 changes: 1 addition & 15 deletions packages/react/src/components/FileUploader/FileUploader-story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ import {
import { settings } from 'carbon-components';
import FileUploader, { FileUploaderButton } from '../FileUploader';
import FileUploaderSkeleton from '../FileUploader/FileUploader.Skeleton';
import Button from '../Button';
import FileUploaderItem from './FileUploaderItem';
import FileUploaderDropContainer from './FileUploaderDropContainer';

Expand Down Expand Up @@ -133,22 +132,9 @@ storiesOf('FileUploader', module)
.add(
'FileUploader',
() => {
let fileUploader;
return (
<div className={`${prefix}--file__container`}>
<FileUploader
{...props.fileUploader()}
ref={node => (fileUploader = node)}
/>
<Button
kind="secondary"
size="small"
style={{ marginTop: '1rem' }}
onClick={() => {
fileUploader.clearFiles();
}}>
Clear File
</Button>
<FileUploader {...props.fileUploader()} />
</div>
);
},
Expand Down
13 changes: 4 additions & 9 deletions packages/react/src/components/FileUploader/FileUploader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,15 +151,10 @@ export class FileUploaderButton extends Component {
disabled,
...other
} = this.props;
const classes = classNames(
`${prefix}--btn`,
`${prefix}--btn--sm`,
className,
{
[`${prefix}--btn--${buttonKind}`]: buttonKind,
[`${prefix}--btn--disabled`]: disabled,
}
);
const classes = classNames(`${prefix}--btn`, className, {
[`${prefix}--btn--${buttonKind}`]: buttonKind,
[`${prefix}--btn--disabled`]: disabled,
});

this.uid = this.props.id || uid();

Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/FileUploader/stories/drop-container.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ function ExampleDropContainerApp(props) {
Only .jpg and .png files. 500kb max file size
</p>
<FileUploaderDropContainer {...props} onAddFiles={onAddFiles} />
<div className="uploaded-files" style={{ width: '100%' }}>
<div className={`${prefix}--file-container`}>
{files.map(
({ uuid, name, size, status, iconDescription, invalid, ...rest }) => (
<FileUploaderItem
Expand Down