fix(floating-label): override inline transform during autofill #2079
Conversation
There was a problem hiding this comment.
Besides the fact that :has doesn't have full support and the fix will not work on many browsers, the selectors look to need tweaking.
If we do use this solution, we should have an autofill example in Skin docs and storybook.
I realize this is somewhat of a user-specific thing that gets triggered on page usage, but it will help to confirm fixes and see breaks in the future by using a fairly common autocomplete="username" attribute.
|
|
||
| // Autofill | ||
|
|
||
| label.floating-label__label:has(+ .textbox :autofill) { |
There was a problem hiding this comment.
The transform is getting overwritten. The selector seems to need more specificity...
There was a problem hiding this comment.
...or possibly, that transform is from a different selector and the :has isn't getting applied at all?
| transform: scale(0.75, 0.75) translate(0, 2px); | ||
| } | ||
|
|
||
| .floating-label--large label.floating-label__label:has(+ .textbox :autofill) { |
There was a problem hiding this comment.
This selector seems to need more specificity as it's getting overwritten.
|
Where are the before and after screenshots from? |
|
Thanks for the comments @ArtBlue, we talked offline and resolved all of the issues. As it turns out, for sufficiently large websites such as the |
fix(floating-label): override inline transform during autofill (#2079)
Description
There are some edge cases that we can't currently handle without a major JavaScript refactor regarding floating labels, which are simple to fix with modern CSS. In this PR I provide a few selectors which will fix these issues on modern browsers, and preserve current behavior if the
:hasselector is not supported.I tested this using
npm linkfromebayui-core'sfloating-label-autocompletebranch. It may be worth it to add this as a test, but for now I think it is ok just to have up for testing purposes.Notes
@supportsgroup to handle browsers which did not support:has, but ourlessbundler is outdated and it will not compile properly. Related to this issue, which was fixed in version10.2.5ofautoprefixer, butless-plugin-autoprefixuses an older version and also breaks when I force it to use the newest.@supports.transformrules here are duplicated from above which I am not a fan of, butstylelintwon't let me group them together because of theno-descending-specificityrule.Screenshots
Before:
After:
Checklist