[docs][base] Add Tailwind CSS & plain CSS demos on the Input page #37685
Conversation
mnajdova
added
docs
Netlify deploy previewBundle size report |
|
Submitted a PR for this on #37688
|
|
One more thing, as I was reviewing it on mobile, I noticed that the demo container and its toolbar are not displayed, and therefore, the style selector is missing as well. Overall, I think it makes sense, but perhaps for Base UI we should have a way to switch demo styles, considering it's one of the major advantages of using it. What are your thoughts, @danilo-leal @mnajdova? |
|
Uhm, good point about the styling menu not being shown on mobile. The demo toolbar was already not displayed but it might make sense to at least have the option to toggle the styles 🤔 We can think about that in parallel (not within the scope of this PR). |
| theme: { | ||
| extend: { | ||
| boxShadow: { | ||
| 'outline-purple': '0 0 0 3px #c084fc', |
There was a problem hiding this comment.
@danilo-leal @zanivan I noticed that we use different strategy for the outlined shadow, for e.g. here we use boxShadow, while in the select we use outline. Should we normalize this?
There was a problem hiding this comment.
For sure, yes! It seems box-shadow is a safer approach, right (due to outlines not following border radii on Safari)?
There was a problem hiding this comment.
Cool, I followed this in the select PR.
|
@zanivan @danilo-leal is there something else worth addressing here? We'll need to merge this one before the select, as it uses the same extended theme for the focus visible outline :) |
mnajdova
changed the title
I added a custom box-shadow value in the theme for the outline - it's used in more components, so I believe it makes sense.
Preview: https://deploy-preview-37685--material-ui.netlify.app/base-ui/react-input/#basics
Part of #37222