improvement: adding a prop called variant for datepicker range#133
Conversation
lloydaf
requested review from
LeonardKoch,
agonzalezUX,
duranmla,
lukahartwig,
nlopin,
rafael-sepeda and
snapsnapturtle
as code owners
duranmla
left a comment
duranmla
left a comment
There was a problem hiding this comment.
Love it. It is simple.
Nonetheless, I will create an issue for the future in order to explore https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
## [1.8.0](v1.7.0...v1.8.0) (2021-06-29) ### Features * **date-range:** Allow to force picker to show a single month via props ([#133](#133)) ([bc635b0](bc635b0))
|
🎉 This PR is included in version 1.8.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
| * @value `'compact'` displays only a single month | ||
| * @default 'normal' | ||
| */ | ||
| variant?: 'compact' | 'normal'; |
There was a problem hiding this comment.
Usually variant describes the difference between a bottom-lined and a boxed input (at the moment we only have boxed date picker versions). Have you considered exposing the numberOfMonths field instead?
There was a problem hiding this comment.
I thought about it, but it seemed more technical and on the path of being a workaround rather than a solution. Plus, that opens up the pandoras box of being able to have 3 months displayed, 4 months displayed etc, which will require changes in the component logic to not break anything, imo.
If you are strongly opinionated about this, maybe we can expose something like displaySingleMonth: boolean or other alternatives, but compact seemed much more developer friendly :)
I know the PR is merged already, but happy to keep the conversation going.
| ref={ref} | ||
| // TODO: refer to https://stash.intapps.it/projects/DS/repos/wave/pull-requests/104/overview?commentId=168382 | ||
| numberOfMonths={window.innerWidth >= 768 ? 2 : 1} | ||
| numberOfMonths={variant === 'normal' && window.innerWidth >= 768 ? 2 : 1} |
There was a problem hiding this comment.
In case we go for this, we should also add a test please
3 participants
What: This PR intends to add a
variantproperty to the datepicker
Why: This is introduced to enable developers to decide whether to show only a single month or two months, according to their needs, without breaking the current responsive behavior.
How:
variant
Media: https://www.loom.com/share/9cf8700746d14419a0c4610face30006
Checklist: