fix datepicker with 400% zoom and mobileview#4143
Open
walldenfilippa wants to merge 4 commits intomainfrom
Open
fix datepicker with 400% zoom and mobileview#4143walldenfilippa wants to merge 4 commits intomainfrom
walldenfilippa wants to merge 4 commits intomainfrom
Conversation
walldenfilippa
added
kind/bug
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthroughAdds modal-specific CSS and responsive rules for the datepicker, introduces a DatePickerCloseContext and exported Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Review rate limit: 0/1 reviews remaining, refill in 60 minutes.Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/app-components/Datepicker/DatepickerDialog.tsx (1)
62-67: Add a focused regression test for the custom close path.Since the built-in dialog close button is disabled at Line 62, I’d recommend an interaction test asserting the custom close button remains present and closes the dialog in mobile mode.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app-components/Datepicker/DatepickerDialog.tsx` around lines 62 - 67, DatepickerDialog disables the built-in close button (closeButton={false}), so add a focused regression test that renders the DatepickerDialog in mobile mode, locates the custom close button exposed in the component (e.g., the element inside styles.datepickerModalContent or the custom close button text/aria-label), simulates a user click (userEvent.click) and asserts the dialog closes by either verifying the onClose/setIsDialogOpen handler was called or the dialog is removed from the DOM; ensure the test sets up mobile sizing (window.innerWidth or the same mobile condition your component uses) and uses RTL queries to avoid implementation coupling.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/app-components/Datepicker/DatepickerDialog.tsx`:
- Around line 62-67: DatepickerDialog disables the built-in close button
(closeButton={false}), so add a focused regression test that renders the
DatepickerDialog in mobile mode, locates the custom close button exposed in the
component (e.g., the element inside styles.datepickerModalContent or the custom
close button text/aria-label), simulates a user click (userEvent.click) and
asserts the dialog closes by either verifying the onClose/setIsDialogOpen
handler was called or the dialog is removed from the DOM; ensure the test sets
up mobile sizing (window.innerWidth or the same mobile condition your component
uses) and uses RTL queries to avoid implementation coupling.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 903c975d-b7db-40c3-b4db-12527ad55ba0
📒 Files selected for processing (3)
src/app-components/Datepicker/Calendar.module.csssrc/app-components/Datepicker/DatepickerDialog.tsxsrc/layout/Datepicker/DropdownCaption.tsx
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/layout/Datepicker/DatepickerComponent.test.tsx (1)
223-233: Centralize dialog prototype mocks to prevent cross-test leakage.This test duplicates global
HTMLDialogElement.prototypemutations already present at line 72–82. These mocks persist across tests with no cleanup, causing potential isolation issues. Extract to a helper and restore inafterEach.♻️ Suggested refactor
+const mockDialogElementMethods = () => { + const originalShow = HTMLDialogElement.prototype.show; + const originalShowModal = HTMLDialogElement.prototype.showModal; + const originalClose = HTMLDialogElement.prototype.close; + + HTMLDialogElement.prototype.show = function mock(this: HTMLDialogElement) { + this.open = true; + }; + HTMLDialogElement.prototype.showModal = function mock(this: HTMLDialogElement) { + this.open = true; + }; + HTMLDialogElement.prototype.close = function mock(this: HTMLDialogElement) { + this.open = false; + }; + + return () => { + HTMLDialogElement.prototype.show = originalShow; + HTMLDialogElement.prototype.showModal = originalShowModal; + HTMLDialogElement.prototype.close = originalClose; + }; +}; + describe('DatepickerComponent', () => { + let restoreDialogMethods: (() => void) | undefined; beforeEach(() => { setScreenWidth(1366); + restoreDialogMethods = undefined; }); + + afterEach(() => { + restoreDialogMethods?.(); + }); it('should show close button in mobile screen and close modal when clicked', async () => { - //Workaround since there is no support for dialog element functions yet in jest. - HTMLDialogElement.prototype.show = jest.fn(function mock(this: HTMLDialogElement) { - this.open = true; - }); - HTMLDialogElement.prototype.showModal = jest.fn(function mock(this: HTMLDialogElement) { - this.open = true; - }); - HTMLDialogElement.prototype.close = jest.fn(function mock(this: HTMLDialogElement) { - this.open = false; - }); + restoreDialogMethods = mockDialogElementMethods();🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/layout/Datepicker/DatepickerComponent.test.tsx` around lines 223 - 233, Duplicate mutations to HTMLDialogElement.prototype (show, showModal, close) in DatepickerComponent.test.tsx cause cross-test leakage; extract the three prototype mocks into a shared helper (e.g., createDialogMocks or setupDialogMocks) and call it from tests or global test setup, then in an afterEach restore the original methods (keep references to originals before mocking) to ensure isolation and remove the duplicate mock block at lines where show/showModal/close are currently redefined.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/layout/Datepicker/DatepickerComponent.test.tsx`:
- Around line 223-233: Duplicate mutations to HTMLDialogElement.prototype (show,
showModal, close) in DatepickerComponent.test.tsx cause cross-test leakage;
extract the three prototype mocks into a shared helper (e.g., createDialogMocks
or setupDialogMocks) and call it from tests or global test setup, then in an
afterEach restore the original methods (keep references to originals before
mocking) to ensure isolation and remove the duplicate mock block at lines where
show/showModal/close are currently redefined.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: f7b021d4-32a8-486f-9211-3cb703dd4e36
📒 Files selected for processing (1)
src/layout/Datepicker/DatepickerComponent.test.tsx
| > | ||
| {children} | ||
| </Dialog> | ||
| <DatePickerCloseContext.Provider value={() => setIsDialogOpen(false)}> |
Contributor
There was a problem hiding this comment.
Maybe as sonarCloud suggest , we can add callback something like ;
const closeDatePicker = useCallback(() => setIsDialogOpen(false), [setIsDialogOpen]);
and then use it in:
DatePickerCloseContext.Provider value={closeDatePicker}
Mobile Dialog onClose={closeDatePicker}
Desktop Popover onClose={closeDatePicker}
Contributor
Author
There was a problem hiding this comment.
Good catch! Extracting it as a named const to avoid repeating the same inline function in three places is a good idea. I will skipp useCallback since setIsDialogOpen never changes between renders.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Designsystemet’s datepicker component does not currently handle larger layouts very well. As a result, I have had to make some adjustments to the layout in the caption section in order to support mobile screens and zooming.
Datepicker with 400% zoom and browser size is 1280px:
datepicker.mp4
Mobile view:
Related Issue(s)
Verification/QA
kind/*andbackport*label to this PR for proper release notes groupingSummary by CodeRabbit
New Features
Style
Tests