Create standardized set of basic filter components

[404DataVizNotFound]

Need to create a design for our filter components so they all feel consistent.

Filters proposed for this version:

1. Dropdown (single select)✅
2. Dropdown (multi-select)✅
3. Text entry for single value (with x to clear)✅
4. Text entry for multiple value with tags (x to clear)✅
5. Toggle button (boolean operation)✅
6. Toggle button (multiple selections)✅
7. Date picker✅

Design Guide: https://zeroheight.com/955194c45/p/650adf-filters

[404DataVizNotFound]

Filter 1 & 2: Dropdowns

Our Dropdown menus will utilize the Vuetify select component (outlined style) seen here. Component design guide Dropdown API properties Figma design file - displaying variants including different states (hover, disabled, error state).

For our version of the dropdown control, we want two modes:

1. A single select mode where only one choice is allowed and it's text populates the input field when the menu is collapsed. When no option is selected the field should show the filter name in it.
2. A multi-select option where more than one choice is allowed and the selections are populated as tags (i.e. chips) in the input field as they are chosen.

Notes on multi-select functionality:

• When more tags then will fit in the input field (at its maximum width) are selected, the input mode should change to display the following the first few tags and "(+N others)" to indicate the additional selections. See vuetify spec here
• When at least one tag is populated in the input, an x should appear at the end of the input bar and allow the user to clear the input.
• Each individual tag should also expose an 'x' to remove it when hovered so they can each be cleared individually (if this proves too time consuming, this feature can be put off until the next version and the x can be left visible as it is by default)
• When no option is selected the field should say "Please Select" or some similar default option.
• The menu should close automatically when focus is lost.

Dropdown Menus: The menus themselves are pretty straightforward. Currently they have two forms:

1. Default which is just text
2. Checkbox which has a checkbox to the left of the text. The only difference between the two is their selected state. The state of the selected one is styled differently for each. See figma file for example Menu Vuetify API Vuetify component page

Note: The Menu functionality should mimic the behavior demonstrated in the Vuetify component page. Styling is also consistent with what appears there. Figma design spec here. Width can be dynamic to the text inside or set to min width of parent object.

Tags: Chip API reference When hovered they should resemble this with the 'x' on the end

[404DataVizNotFound]

Filter 3 & 4: Text entry

Based on Vuetify outlined text input Component design guide Figma reference file

Similar in many ways to the dropdown and nearly identical in style. The text entry also comes in two flavors:

1. Single text entry mode where only one string can be entered at a time and will be applied to whatever that filter is connected to.
2. Multi string entry mode where the enter key inserts a tag and the cursor returns allowing the user to enter more text.

Notes on the multi-string entry:

• We also run into the issue with this control of what happens with too many selections but I think we might be able to overcome that be clever utilization of vuetify's combobox control. It will allow us to place chips in from the user's text entry and I believe it may be possible to utilize the dropdown menu it generates to allow the user to remove items from their filter once they've entered so many that it cannot be read all at once.
• We will need to evaluate the best solution for the input field display when the field has overflow. The two options I think most promising suitable at the moment are: internal scroll or "(+N others)" roll up style like the dropdown uses. We could have it wrap to a second line but I really want to avoid having any filter become taller so that would be a last resort.

Figma design showing Text entry fields in each of their different states (hover, disabled, error state)

[404DataVizNotFound]

Closed by accident. Hit the wrong button while trying to save a comment. Reopened.

[404DataVizNotFound]

Filter 5 & 6: Toggle buttons (i.e. button group)

This design is based on Vuetify's button group Figma reference file

This component will be valuable both as a filter and as a control elsewhere so it should be built with reuse in mind. The button group can be styled with or without a text label, and be text or icon based, and is visually cohesive together but each button can operate independently. They should have a mode to enable them to become a toggle, enabling this mode means that only one button within the group can be selected at a time.

When we use this component in the context of a filter, it would be great if we could have it default to have the toggle mode enabled, as that is the ideal mode for this context.

Modes:

1. Label on / label off
2. Icon buttons / text buttons
3. Button mode / toggle mode

[404DataVizNotFound]

Filter 7: Calendar picker (Upgrade)

This is an improvement to the existing calendar picker input box to more effectively utilize space.

Picker somewhat based on Vuetify's multi-date input Figma reference file

With this revised control, the date range input functions the same regardless of whether the calendar is in single date or date range mode and the date selected is placed in a tag. (When hovered over, it should reveal an 'x' like any other tag.) Although when in single date mode, it will not prevent you from choosing an additional date but as far as the control is concerned, it is agnostic.

Date format should be customizable at the app level (but overridable at the component level). Default for now should be Month, day, year. with hint text below demonstrating that.

[kissu]

Btw @404DataVizNotFound, you can also use the baked-in Github checkboxes with this kind of syntax 😉

• [ ] unchecked
• [x] checked

[404DataVizNotFound]

@kissu You didn't like my silly apple emotes? lol

[kissu]

Haha, it's more because it's native, faster and that you can check it without even editing it. 😉

[404DataVizNotFound]

Maximum efficiency, even in your Github commenting