fix(file-uploader): adjusts default button and removes clear file button #5166
Conversation
ghost
requested review from
abbeyhrt
requested review from
a team,
jeanservaas and
laurenmrice
and removed request for
a team and
jeanservaas
|
Deploy preview for the-carbon-components ready! Built with commit 49bdc4a https://deploy-preview-5166--the-carbon-components.netlify.com |
|
Deploy preview for carbon-elements ready! Built with commit 49bdc4a |
|
Deploy preview for carbon-components-react failed. Built with commit 49bdc4a https://app.netlify.com/sites/carbon-components-react/deploys/5e34b93114dbe800088d5823 |
| @@ -112,7 +112,7 @@ | |||
| grid-template-columns: 1fr auto; | |||
| grid-auto-rows: auto; | |||
| align-items: center; | |||
| min-height: $carbon--spacing-07; | |||
| min-height: $carbon--spacing-08; | |||
There was a problem hiding this comment.
want to double check if this change is across the board or for non drag-and-drop uploader only based on #2288 (comment)
There was a problem hiding this comment.
@laurenmrice any thoughts? This is the part that changes the uploaded file from 32px -> 40px, so we just want to confirm if only the non-drag and drop variants should have the 40px uploaded file size!
packages/components/src/components/file-uploader/_file-uploader.scss
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
- The 48px looks good and clear button is gone👍🏻.
- Since we now have the 48px input fields can we use that size for the uploaded files instead of 40px. When that issue was made we didn't have the 48px yet.
- The close icon should be 16px away from the container and it should be calling the
icon-01token. - I attached a spec of the spacing between buttons and uploaded files, we can follow this for the default file uploader and the drag and drop one.
|
@laurenmrice it should be good for a second look! 👍 |
There was a problem hiding this comment.
React and Vanilla
Drag and drop
- The first file that uploads needs to be 16px below the drag and drop box. The spacing between multiple files looks good though.
- The invalid state needs to now be bumped to 48px from 40px. The error border looks inset and the rules are coming outside of it. The border needs to be 2px. Here is a spec of the invalid state since we are bumping this to 48px.
File uploader
- The invalid state should follow the above spec too.
- This isn’t currently in vanilla but we can end up adding it in another pr if you want !
There was a problem hiding this comment.
One last thing and we should be good !!
Drag and drop
In React: There needs to be a 16px space below the drag and drop container and the first uploaded file. I think right now its around 20px.
In Vanilla: Needs to be a 16px space below the drag and drop container and the first uploaded file. I think right now its around 8px.
It doesn't close #3587 but checks off some of its points.
According to #3587, the "Upload Files" button should be our primary button not the small one so I removed ``${prefix}--btn--sm` from the list of class names. This also corrects the selectors for the file container so the margin is there. The issue states that the file container should be 40px instead of 32px so I changed the spacing token to $carbon--spacing-08. Also I removed the "Clear Files" button since the issue and the design spec show that it shouldn't be there.
Changelog
Changed
Removed
Testing / Reviewing
Check to make sure the FileUploader looks how it should!