feat: adds floating label #955
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Codecov ReportAttention:
Additional details and impacted files@@ Coverage Diff @@
## main #955 +/- ##
==========================================
- Coverage 99.54% 93.59% -5.96%
==========================================
Files 163 184 +21
Lines 6621 8088 +1467
Branches 401 446 +45
==========================================
+ Hits 6591 7570 +979
- Misses 30 518 +488
☔ View full report in Codecov by Sentry. |
|
Hey @okelloMarvinSophany, Thank you for your contribution! For the docs page, can you please create a new category called "Forms" in the Sidebar and make the URL like this:
It should be categorized the same way the one from the main library is: https://flowbite.com/docs/forms/floating-label/ Should be something like this in the sidebar: 
Thank you for your contribution! Cheers, |
|
@okelloMarvinSophany thanks for the PR, for now, I just have two notes. You have 2 commits in your PR that are merge commits. I would recommend removing those merges and using rebase instead, otherwise, it can cause some history issues. |
okelloMarvinSophany
force-pushed
the
feat/floating-label
branch
from
995e447 to
7f06ff7
Compare
|
@rluders I have completed the rebase |
|
Checking the deployed preview version I noticed some inconsistencies with the core library Flowbite The label always have a solid bg on all cases, which is noticible in the On the other hand the core library does not Also in the Your PR: One last thing is that in the validation examples, only the label has the color accordingly to the validation state. This is probably due to the issue I mentioned here: https://github.com/themesberg/flowbite-react/pull/955/files/7f06ff7ae2494b9ab3ff93633aab7433135aad6c#diff-cff7813980f3b1bce4f7bf26b6fe9fef8f7272e24b44ac3c59560ba5ed423287
|
okelloMarvinSophany
force-pushed
the
feat/floating-label
branch
from
104bd18 to
73bd3d3
Compare
okelloMarvinSophany
force-pushed
the
feat/floating-label
branch
from
73bd3d3 to
24a5d7e
Compare
|
@nigellima Can we merge this one? |
rluders
force-pushed
the
feat/floating-label
branch
from
24a5d7e to
14f93a7
Compare
Hi. I guess there are some unresolved comments yet... could you take a look at them @okelloMarvinSophany ? |
|
@nigellima I resolved the comments, If you preview, you'll see that I worked on the issues you raised |
Yes. Visually it's great now... but there are some code comments I made regarding the use of the theme object (currently it's just an empty file) and the naming of the props of the main component |
I do not see those comments |
Sorry. I had made the comments but forgot to Submit the review... 🥲 |
okelloMarvinSophany
force-pushed
the
feat/floating-label
branch
from
7901ff6 to
68a4ed9
Compare
It is complete now. @nigellima can check now |
Hi.
|
|
BTW, that "blinking" bug also happens at the standard flowbite library. |
Yeah, |
|
The Animation is tied to the class duration-300, when I remove it, the blinking stops, but we loose the animation. So I have returned the anomation, but the blinking is back |
|
So whats the way forward ? @rluders , @nigellima |
|
Easy fix... Replace the |
Yes. You can also use transition withou changing the duration time... the "blinking" issue is due to a difference of animation duration between classes. The fix is basically making sure every animation has the same duration |
Thw first option has worked, am gonna push, and thanks for the insights |
|
Now just a |
There was a problem hiding this comment.
@okelloMarvinSophany thanks for all the good work. @nigellima thanks for all the reviews here.
|
Why comment out kbd? |
oh-ho... I didn't noticed that |
|
Let me put a hotfix |
|
I think this image is missing also. |
|
#1022 looks like a regression also |
For this Issue, do I need to address it directly from here or in the issue created itself? |
* created component Floating Label and added its story * feat: Created floating label component, with the possibility of styles filled, outlined and standard as well as for each case, success and failure * feat: added more stories, for different cases, implementation for disabled and sizes * feat: added documentation for the floating label * feat: wrote tests for the the Floating label component * formatting code * formatted the code with prettier * Added Floating Label under Forms in the docs * fix: updated code to fix the validation styles * fix: small sizing of floating label is fixed * feat: added more stories, for different cases, implementation for disabled and sizes * feat: added documentation for the floating label * formatted the code with prettier * Added Floating Label under Forms in the docs * fix: updated code to fix the validation styles * fix: updated naming of props as reccomended * feat: added more stories, for different cases, implementation for disabled and sizes * feat: added documentation for the floating label * feat: wrote tests for the the Floating label component * formatting code * formatted the code with prettier * Added Floating Label under Forms in the docs * fix: updated code to fix the validation styles * fix: small sizing of floating label is fixed * feat: added more stories, for different cases, implementation for disabled and sizes * feat: added documentation for the floating label * formatted the code with prettier * Added Floating Label under Forms in the docs * fix: updated code to fix the validation styles * fix: adjusted tests * fix: unique ids for helper text * fix: removed template strings * Revert "fix: removed template strings" This reverts commit 6e80a67. * fix: added theme and twmerge to the codebase * created component Floating Label and added its story * feat: added documentation for the floating label * feat: wrote tests for the the Floating label component * formatting code * formatted the code with prettier * Added Floating Label under Forms in the docs * fix: updated code to fix the validation styles * feat: added more stories, for different cases, implementation for disabled and sizes * feat: added documentation for the floating label * formatted the code with prettier * Added Floating Label under Forms in the docs * fix: updated code to fix the validation styles * fix: updated naming of props as reccomended * feat: added more stories, for different cases, implementation for disabled and sizes * feat: added documentation for the floating label * feat: wrote tests for the the Floating label component * formatting code * formatted the code with prettier * Added Floating Label under Forms in the docs * fix: updated code to fix the validation styles * fix: small sizing of floating label is fixed * feat: added more stories, for different cases, implementation for disabled and sizes * feat: added documentation for the floating label * formatted the code with prettier * Added Floating Label under Forms in the docs * fix: updated code to fix the validation styles * fix: adjusted tests * fix: this commit is because I forgot to force push after rebasing :( * fix: structured the theme.ts file to avoid if else in the component * fix: removing the lag in label background when the theme changes * fix: resolved missing label for the standard floating label (z-0) was missing * fix: fixing after rebase * created component Floating Label and added its story * feat: Created floating label component, with the possibility of styles filled, outlined and standard as well as for each case, success and failure * feat: added more stories, for different cases, implementation for disabled and sizes * feat: added documentation for the floating label * feat: wrote tests for the the Floating label component * formatting code * formatted the code with prettier * Added Floating Label under Forms in the docs * fix: updated code to fix the validation styles * fix: small sizing of floating label is fixed * feat: added more stories, for different cases, implementation for disabled and sizes * feat: added documentation for the floating label * formatted the code with prettier * Added Floating Label under Forms in the docs * fix: updated code to fix the validation styles * fix: updated naming of props as reccomended * feat: added more stories, for different cases, implementation for disabled and sizes * feat: added documentation for the floating label * feat: wrote tests for the the Floating label component * formatting code * formatted the code with prettier * Added Floating Label under Forms in the docs * fix: updated code to fix the validation styles * fix: small sizing of floating label is fixed * feat: added more stories, for different cases, implementation for disabled and sizes * feat: added documentation for the floating label * formatted the code with prettier * Added Floating Label under Forms in the docs * fix: updated code to fix the validation styles * fix: adjusted tests * fix: unique ids for helper text * fix: removed template strings * Revert "fix: removed template strings" This reverts commit 6e80a67. * fix: added theme and twmerge to the codebase * created component Floating Label and added its story * feat: Created floating label component, with the possibility of styles filled, outlined and standard as well as for each case, success and failure * feat: added more stories, for different cases, implementation for disabled and sizes * feat: added documentation for the floating label * feat: wrote tests for the the Floating label component * formatting code * formatted the code with prettier * Added Floating Label under Forms in the docs * fix: updated code to fix the validation styles * fix: small sizing of floating label is fixed * feat: added more stories, for different cases, implementation for disabled and sizes * feat: added documentation for the floating label * formatted the code with prettier * Added Floating Label under Forms in the docs * fix: updated code to fix the validation styles * fix: updated naming of props as reccomended * created component Floating Label and added its story * feat: Created floating label component, with the possibility of styles filled, outlined and standard as well as for each case, success and failure * feat: added more stories, for different cases, implementation for disabled and sizes * feat: added documentation for the floating label * feat: wrote tests for the the Floating label component * formatting code * formatted the code with prettier * Added Floating Label under Forms in the docs * fix: updated code to fix the validation styles * fix: small sizing of floating label is fixed * feat: added more stories, for different cases, implementation for disabled and sizes * feat: added documentation for the floating label * formatted the code with prettier * Added Floating Label under Forms in the docs * fix: updated code to fix the validation styles * fix: adjusted tests * fix: this commit is because I forgot to force push after rebasing :( * fix: structured the theme.ts file to avoid if else in the component * fix: removing the lag in label background when the theme changes * fix: resolved missing label for the standard floating label (z-0) was missing * fixes after rebase * fix: returned the animation for the floating label * fix: removed blinking on theme change * fix: prettier fix
Summarize the changes made and the motivation behind them.
I have created a new component called Floating Label as directed by the issue. While it is still an input, it was better to created the new component so as not to mix and possibly redo or undo the work that someone else might have undertaken.
Reference related issues using
#followed by the issue number.The issue number is: #189