[Calendar]: Scaling inside modal

[airikej]

Problem

Currently the calendar inside date fields modal picker doesnt scale but stays in its 315px width when modal is larger. Design wants it to be configurable and allow scaling

Solution

Examples and information

Project

DoD

• The component is developed using best practices, conventions, and modern frontend trends
• The component follows BEM naming conventions (if applicable)
• The component implementation matches the Figma design, including all defined states and interactions
• The component supports responsiveness and scales across breakpoints (if applicable)
• The component does not introduce runtime errors or warnings
• Linter passes
• Component has export if needed
• The component has unit tests with at least 80% code coverage
• CodeCov passes minimum coverage threshold
• The component has passed code review
• The component has passed Chromatic visual review
• Storybook stories are created:
  • Cover all Figma variations
  • Include edge cases, empty/error states
• Component’s API (props, slots, events) is documented
• ZeroHeight is updated with design/development guidelines
• External dependencies used in the component are documented in Confluence with rationale.
• Semantic commit format is used (for semantic-release)
• External libraries comply with validated open source licenses
• Component is versioned correctly and ready for release if required
• Update statuses page in Zeroheight

[mart-sessman]

@airikej got more info on this? react already has this behavior? its described in Figma? How should it scale exactly?

[airikej]

@mart-sessman currently in full width modal in mobile the calendar sits inside modal like this:

but design wants the calendar to fill the width of the modal like side to side e.g similarly to this:

[intermetric]

@karolin-kivisikk Palun vaata üle DateField'i Mobile Modal näide. Teise välja kalender täidab modaali laiuse. Selle saab sisse lülitada sisendiga [calendarFullWidth]="true". Kas see lahendus tundub sobiv?