[Date Range Picker] Dropdown / Dialog has some sizing discrepancies

[yradoeva]

The dropdown and the dialog with the calendar picker of the Date range picker don't appear in the correct size for S, M and L date range input/s.

All sizes, paddings, fonts and styles can be checked in the Design Handoff.

Material:

Small:

• row height of the calendar dates should be 28px
• font style of the dates should be Body 2
• (dialog) the action buttons in the footer should be in S size, gap between them should be 8px
• (dialog) footer padding should be 8px, no double-padding (currently there is one additional around the buttons)

Medium:

• row height of the calendar dates should be 32px
• font style of the dates should be Body 2
• (dialog) the action buttons in the footer should be in M size, gap between them should be 8px
• (dialog) footer padding should be 8px, no double-padding (currently there is one additional around the buttons)

Large:

• row height of the calendar dates should be 36px
• font style of the dates should be Body 1
• (dialog) the action buttons in the footer should be in L size, gap between them should be 8px
• (dialog) footer padding should be 8px, no double-padding (currently there is one additional around the buttons)

Fluent:

Small:

• row height of the calendar dates should be 28px
• font style of the dates should be Body 2
• (dialog) the action buttons in the footer should be in S size, gap between them should be 8px
• (dialog) footer padding should be 8px, no double-padding (currently there is one additional around the buttons)

Medium:

• row height of the calendar dates should be 32px
• font style of the dates should be Body 2
• (dialog) the action buttons in the footer should be in M size, gap between them should be 8px
• (dialog) footer padding should be 8px, no double-padding (currently there is one additional around the buttons)

Large:

• row height of the calendar dates should be 40px
• font style of the dates should be Body 1
• (dialog) the action buttons in the footer should be in L size, gap between them should be 8px
• (dialog) footer padding should be 8px, no double-padding (currently there is one additional around the buttons)

Bootstrap:

Small:

• row height of the calendar dates should be 28px
• font style of the dates should be Body 2
• (dialog) the action buttons in the footer should be in S size, gap between them should be 8px
• (dialog) footer padding should be 8px, no double-padding (currently there is one additional around the buttons)

Medium:

• row height of the calendar dates should be 32px
• font style of the dates should be Body 2
• (dialog) the action buttons in the footer should be in M size, gap between them should be 8px
• (dialog) footer padding should be 8px, no double-padding (currently there is one additional around the buttons)

Large:

• row height of the calendar dates should be 36px
• font style of the dates should be Body 1
• (dialog) the action buttons in the footer should be in L size, gap between them should be 8px
• (dialog) footer padding should be 8px, no double-padding (currently there is one additional around the buttons)

Indigo:

Small:

• row height of the calendar dates should be 28px
• font style of the dates should be Body 2
• (dialog) the action buttons in the footer should be in S size, gap between them should be 8px
• (dialog) footer padding should be 8px 16px, no double-padding (currently there is one additional around the buttons)
• (dialog) "Cancel" button should be Outlined, "Done" button should be Contained

Medium:

• row height of the calendar dates should be 32px
• font style of the dates should be Body 2
• (dialog) the action buttons in the footer should be in M size, gap between them should be 8px
• (dialog) footer padding should be 8px 16px, no double-padding (currently there is one additional around the buttons)
• (dialog) "Cancel" button should be Outlined, "Done" button should be Contained

Large:

• row height of the calendar dates should be 36px
• font style of the dates should be Body 1
• (dialog) the action buttons in the footer should be in L size, gap between them should be 8px
• (dialog) footer padding should be 8px 16px, no double-padding (currently there is one additional around the buttons)
• (dialog) "Cancel" button should be Outlined, "Done" button should be Contained