[#52] Form components #59
Conversation
joshuapease
force-pushed
the
jp/52-form-components
branch
from
d8a39e4 to
50a95ea
Compare
joshuapease
force-pushed
the
jp/52-form-components
branch
from
fa5635e to
2f08701
Compare
joshuapease
force-pushed
the
jp/52-form-components
branch
from
2f08701 to
8a1596d
Compare
| '@apply size-20 border-0 text-blue-500 checked:bg-blue-500 min-h-0': | ||
| {}, | ||
| }, | ||
| '&:is([aria-invalid="true"])': { |
There was a problem hiding this comment.
https://github.com/vigetlabs/blueprint/blob/main/config/tailwind/inputs.js#L65
The error state slightly deviates from Blueprint here.
It's worth setting aria-invalid on inputs with errors... so this lets us only modify a single attribute rather than keeping both data-state and aria-invalid in sync.
joshuapease
requested review from
andrewmosby,
ten1seven,
maxdmyers and
maxfenton
| @@ -0,0 +1,84 @@ | |||
| import plugin from 'tailwindcss/plugin' | |||
|
|
|||
| export default plugin(({ addComponents }) => { | |||
There was a problem hiding this comment.
What do you think about styling adjustments (e.g., the design has a black background so the inputs need white outlines and pink error states)? Would that happen in here or is there a way to create some basic config values?
There was a problem hiding this comment.
That's a good thought, I've put in a ticket to consider that. #65
Would you apply that same idea to the button, rich text, and other Tailwind plugins?
My interpretation of the Blueprint components is that devs will get their hands dirty and modify TW plugins & classes to their liking.
A few config options might be handy... but it could be easy to overbuild a bunch of configuration options that will only ever be set once per project (where swapping a few Tailwind classes might be a similar level of effort).
There was a problem hiding this comment.
I guess the question is: where do they get their hands dirty? Is it okay having the form styles stored in this file or should they be placed directly on the fields (even if it means some duplication) so developers can access the styles without leaving the component.
There was a problem hiding this comment.
Gotcha! Yeah, all form styles would be controlled via this plugin.
All the TW plugins are meant to be edited.
There was a problem hiding this comment.
A few config options might be handy... but it could be easy to overbuild a bunch of configuration options that will only ever be set once per project
Yes, exactly. If you ever feel like you're wading into overbuilding waters, turn back! We don't want these to be just as much work to undo as the components are to just build from scratch.
Overview
Starter Form Components #52
Implements all of the items under "Forms" in Blueprint.
selectorstrategy for dark mode (used to be called class). This is how we typically style components to work with dark backgrounds. Although it prevents us from doing a true light/dark mode across the entire site.Screenshots
Text Input
Textarea
Select