You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Ultimately, users should implement their own sizing to suit their needs. However, at the moment many of our Storybook components are too large for the preview container on mobile and this doesn't give a good first impression for the library. Additionally, some users might not want to implement responsiveness themselves and would rather use a general purpose default option.
Include the responsive prop name when destructuring the component's Props type in it's definition
Using the clsx library, add sizing for the sm, md, and lg TailwindCSS breakpoints (or wherever applicable), set conditionally when responsive equals true. For example:
clsx({'m-2 sm:m-4 md:m-8 lg:m-16': responsive,})
The text was updated successfully, but these errors were encountered:
Instead of adding responsive specifically to start, thoughts on just adding first class support for className in ways that make sense for each component? I'm hitting that right now with the Dropdown component - you cannot pass custom classes into it and as a result things like a full width button trigger are a pain.
For built-in responsiveness we need to add an optional "responsive" prop (defaulted to true in Storybook) pre-baked with TailwindCSS breakpoints:
https://tailwindcss.com/docs/screens
Ultimately, users should implement their own sizing to suit their needs. However, at the moment many of our Storybook components are too large for the preview container on mobile and this doesn't give a good first impression for the library. Additionally, some users might not want to implement responsiveness themselves and would rather use a general purpose default option.
Adding the prop would look something like this:
responsive?: boolean
to theIComponentBaseProps
interface in types.ts (https://github.com/daisyui/react-daisyui/blob/main/src/types.ts) to make the prop available on all react-daisyUI components.responsive
prop name when destructuring the component's Props type in it's definitionclsx
library, add sizing for thesm
,md
, andlg
TailwindCSS breakpoints (or wherever applicable), set conditionally whenresponsive
equals true. For example:The text was updated successfully, but these errors were encountered: