Repository navigation
[Calendar]: Scaling inside modal #505
Description
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
Metadata
Metadata
Assignees
Type
Projects
- Status
Activity
mart-sessman commentedon Jul 1, 2026
@airikej got more info on this? react already has this behavior? its described in Figma? How should it scale exactly?
airikej commentedon Jul 1, 2026
@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:
feat(calendar,date-field): support full-width modal calendar #505
feat(calendar,date-field): support full-width modal calendar #505
intermetric commentedon Sep 30, 2026
@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?mart-sessman commentedon Oct 7, 2026
Vaatasin reacti lahendust, seal skaleerub kalender mõlemas suunas proportsionaalselt ja ka nuppude suurused muutuvad:
https://storybook.tedi.ee/react/main/?path=/story/tedi-ready-content-calendar--full-width-sizes
15 remaining items
intermetric commentedon Oct 28, 2026
@karolin-kivisikk Scroll parandatud. See tekkis mobiilivaates pikemate kuunimedega, kui päis enam kalendri laiusesse ei mahtunud. Nüüd OK.
Ma arvan, et kogu Storybooki näidete uuendamise võiks jätta eraldi taskiks, et see PR jääks skaleerumise teema piiresse. Kui uus Figma frame on valmis, tee palun selle kohta uus issue.
karolin-kivisikk commentedon Oct 29, 2026
Kas figma frame-idele viimine peaks iga komponendi kohta olema eraldi või saame kuidagi rohkem korraga neid ka viia? Kuna see komponendi enda arendust ei mõjuta oleks kergem teha disain reviewd kui ka nö tarnida kui oleks korraga tehtud?
intermetric commentedon Nov 2, 2026
@karolin-kivisikk
Ma ei näe põhjust, miks ei võiks korraga suuremat kogust komponente migreerida, aga ühes issue's võiks pigem olla mõistlik kogus, näiteks kategooria kaupa (Form, Overlay jne)? Siis jääb nii arendus kui ka design review hallatavaks ja üks lahtine küsimus ei hoia kõiki teisi kinni.
fix(calendar): keep full-width minimum and re-measure on fullWidth #505
refactor(date-field): move modal template and styles to separate files …
feat(calendar,date-field): support full-width modal calendar #505 (#744)
chore(release): 10.0.0-rc.4