Using date picker within a filter menu

[Khushli]

Hi team,

For the internal tools project, I have a filter where user needs the ability to select a date range. Wanted to show how I've used the date picker within a menu. And also check if a blank menu component can be made available for such purposes

A screenshot of the larger page with filters

[SiTaggart]

Hi @Khushli

Thanks for posting. Let me tackle the date picker first.

Unfortunately what you are trying to do with a Combobox is not possible.

Firstly, I'm making the distinction on Combobox, instead of a Menu, because a Menu component can only perform an action, where as a Combobox, as it is a form input control, stores a selected value. What that essentially means is that the triggering element for a Menu is a button, who's text always stays the same because it describes the available actions that are inside. Because you are creating filter selections and are inside a form, you are looking for input controls.

For a Combobox, the options that are displayed when you expand it are values that you can select for the input. So, "last 24 hours", "Last 7 days" are the options that set the value you display. Unfortunately though, options can only represent values right now, and can't represent mixed content types. (the same can be said about menu items too, and these constraints are based on the w3C ARIA specification for Menu and Combobox controls, and current browser and assistive technology support).

What you should do in this case, is when you select custom date, upon selecting that value, new controls are then displayed underneath, that can be used to set the date ranges.

For the last part:

And also check if a black menu component can be made available for such purposes

I'm not sure I fully understand what you mean by a "black menu", and also for what purposes are you describing?

[Khushli]

The last thing was a typo - I meant a blank menu component for holding the date picker.

Also, I should have explained better - I wasn't trying to use the combobox for the date picker, I used the combobox component in lieu of the date picker component as it wasn't available in figma yet.

Can I get a simple sketch of this suggestion "What you should do in this case, is when you select custom date, upon selecting that value, new controls are then displayed underneath, that can be used to set the date ranges."
I want to make sure I understand it well. Thanks!

[SiTaggart]

I meant a blank menu component for holding the date picker.

OK, so like yesterday, we can't really mix and match interactive components like that anyway. I'm fairly certain the the types of available content for each type of component would be together with that specific component inside the Figma library. It's slightly different if the component is a layout, or container component, but if it's interactive, it likely has some very specific rules around valid content types.

And for the proposal, all I mean is take these two date inputs

and place them directly below the Time Updated field, and above the Person Mentioned field when the user selects "Custom Date", in your second screen shot.