solid-ui
solid-ui copied to clipboard
SolidOS
Style basic fields
Working on this in the basic-field-style branch.
@megoth I'm styling the basic field with JSS, and it needs to go grey / green / red based on sync status and client-side validation. I noticed I could do field.setAttribute('validation', 'pending') and then in regular CSS I could do [validation = "pending"] { color: grey; } (found that on https://www.geeksforgeeks.org/css-attribute-selector/) but this doesn't seem to be supported by JSS, right?
Maybe I'll just stick to style on the element for this one, since it doesn't need hover anyway.
The border does go blue when the input is focused but I think that's because of -webkit-focus-ring-color.
https://solid.github.io/solid-ui/examples/forms/index.html#basicField actually seems pretty close to https://design.inrupt.com/atomic-core/?cat=Atoms#Input already, apart from the font.
@michielbdejong If you want to indificate state with JSS, you should have a classname that state (e.g. .field--pending to continue using BEM methodology) and toggle that class using JavaScript.
You might also just want to style, but I would prefer if we can keep the responsibility of styling in a component to JSS once we've started using JSS for that component.
