Add initial forms components #299
Conversation
Using CSS only. Co-Authored-By: Sofia Minnemann <[email protected]>
Replace most CSS with Tailwind.
There was a problem hiding this comment.
I'd change this to be in the same storybook folder as the rest, for example in Atoms/Forms/Label Input
| let reader = new FileReader(); | ||
| reader.readAsDataURL(image); | ||
| reader.onload = (e) => { | ||
| avatar = e.target.result; |
There was a problem hiding this comment.
| avatar = e.target.result; | |
| if (e.target?.result) { | |
| avatar = e.target.result.toString(); | |
| } |
My IDE nagged me about this because e.target might be null in error cases ;p
| on:keydown={(e) => { | ||
| if (e.key === 'Enter' || e.key === ' ') { | ||
| fileinput.click(); | ||
| } | ||
| }} |
There was a problem hiding this comment.
These bindings are not working for me, are they for you?
There was a problem hiding this comment.
This is missing Storybook stories, if you need any help let me know!
| $: () => { | ||
| if (files) { | ||
| console.log(files); | ||
| for (const file of files) { | ||
| console.log(`${file.name}: ${file.size} bytes`); | ||
| } | ||
| } | ||
| }; |
There was a problem hiding this comment.
Don't forget to remove when you're done :)
| {#if files} | ||
| {#each Array.from(files) as file} | ||
| <div class="rounded-lg bg-taupe-200 px-4 py-2 text-rose-950"> | ||
| <p>{file.name}</p> |
There was a problem hiding this comment.
Hmm it would be useful if each file could have a little X to remove just that file, would that be doable?
| for="file-upload" | ||
| class="muted-red cursor-pointer rounded-lg px-4 py-2 text-white hover:bg-red-600" | ||
| > | ||
| Selecionar ficheiro |
There was a problem hiding this comment.
This should be an input to the component so that we can place whatever text here!
| <div class="flex items-center space-x-4"> | ||
| <label | ||
| for="file-upload" | ||
| class="muted-red cursor-pointer rounded-lg px-4 py-2 text-white hover:bg-red-600" |
There was a problem hiding this comment.
The button differs a bit currently from the mockups:
We should add the red background color to the button and maybe make that color a bit darker on hover?
Co-authored-by: Rita Lopes <[email protected]>
Co-authored-by: Rita Lopes <[email protected]>
Based on @MRita443 's suggestion, add class 'selected' to the label when hovered. Co-Authored-By: Rita Lopes <[email protected]>
Co-Authored-By: Rita Lopes <[email protected]>
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## develop #299 +/- ##
============================================
+ Coverage 0.86% 11.45% +10.59%
============================================
Files 51 64 +13
Lines 1857 2409 +552
Branches 53 143 +90
============================================
+ Hits 16 276 +260
- Misses 1792 2075 +283
- Partials 49 58 +9 ☔ View full report in Codecov by Sentry. |
|
@MRita443 Found an even better way to style selected labels on the
What do you think? |
As discussed in the previous sprint, @Lauranea and I started developing form components. So far, we have:
We've also added a new folder -
forms/- insidesrc/components/to store these and all future forms components.Please feel free to modify our code to your liking. Since we're just starting out, we'd appreciate any feedback we could get. 😄
Review checklist