archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(date-picker): resolve width clipping issue on 90/110% zoom (#3416)

Browse Source 
* fix(date-picker): resolve width clipping issue on 90/110% zoom

* fix(date-picker): resolve width clipping issue on 90/110% zoom

* Delete .changeset/metal-bats-reflect.md

* Update weak-dingos-chew.md

* chore: add storybook

---------

Co-authored-by: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>
This commit is contained in:
Abhinandan 2024-07-06 23:29:13 +05:30 committed by GitHub
parent 93f1787815
commit 5652e7bddc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 33 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/weak-dingos-chew.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/calendar": patch
---
Fixed calendar clipping issue on zoom (#2978)

2
packages/components/calendar/src/use-calendar-base.ts
View File

@ -280,7 +280,7 @@ export function useCalendarBase(originalProps: UseCalendarBasePropsComplete) {
style: {
// @ts-ignore
"--visible-months": visibleMonths,
"--calendar-width": calendarWidth,
"--calendar-width": typeof calendarWidth === "number" ? `${calendarWidth}px` : calendarWidth,
} as React.CSSProperties,
};

27
packages/components/calendar/stories/calendar.stories.tsx
View File

@ -237,6 +237,26 @@ const PresetsTemplate = (args: CalendarProps) => {
);
};
const CalendarWidthTemplate = (args: CalendarProps) => {
return (
<div className="flex gap-4">
<div className="flex flex-col items-center gap-4">
<p>calendarWidth: 300</p>
<p className="text-small text-default-600">calendarWidth: 300</p>
<Calendar {...args} calendarWidth={300} />
</div>
<div className="flex flex-col items-center gap-4">
<p className="text-small text-default-600">calendarWidth: 300px</p>
<Calendar {...args} calendarWidth="300px" />
</div>
<div className="flex flex-col items-center gap-4">
<p className="text-small text-default-600">calendarWidth: 30em</p>
<Calendar {...args} calendarWidth="30em" />
</div>
</div>
);
};
export const Default = {
render: Template,
args: {
@ -348,3 +368,10 @@ export const Presets = {
...defaultProps,
},
};
export const CalendarWidth = {
render: CalendarWidthTemplate,
args: {
...defaultProps,
},
};