Skip to content

Design issue with Quick edit and DateCalendar #76325

@ntsekouras

Description

@ntsekouras

DataForm uses DateCalendar private component which internally use react-day-picker.

Right now in Quick edit the design is not great (see screenshot below) because there is a min-width for the dialog and a smaller max-width for the calendar itself.

I've already tried a few things to expand it by adding some styles and a new month classname here but the problem is more convoluted because the internal library renders the months grid as a table element. It seems we can provide custom components though if we want to.

I'd expect the end design to be more like DateTimePicker which expands by default and uses a grid that handles well the alignment of navigation arrows for months, the days header (e.g M, T, etc..) and the days number.

Image

--cc @WordPress/gutenberg-components

Metadata

Metadata

Assignees

Labels

[Package] Components/packages/components[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions