{ "id": "FI01", "title": "Filter drawer", "topic": "filter", "use": "The drawer is where filters go by default. A click on the filter button and it slides in from the right. It has room for any number of filters, groups among them. Every change takes effect at once — there is no Apply. Modal over the list, contained in the content region, or contained and pushing the list aside — each of the three is right for filters; pick the one the screen needs.", "decisions": [ "The drawer is the default for filters: it has room for any number of filters and for groups, which a panel in the toolbar does not.", "It opens from the trailing edge: navigation comes from the leading edge, and supplementary surfaces come from the other side.", "Modal, contained, and contained with push are each valid for filters, and the screen picks the one it needs. Modal lays the filter surface over the whole height and makes filtering a step of its own, at the price that the list behind it cannot be used while it is open.", "The filter button says what it does — 'Filter' when closed, 'Close filter' when open. Where the drawer leaves the page usable, contained with push, a second click closes it; a modal or contained drawer covers the button and closes by Done, the cross or Escape.", "There is no Apply: every change takes effect at once, so closing discards nothing.", "The footer carries the way out, not an Apply: Done closes and Reset all filters clears. Closing needs a named button because the result is seen only once the drawer is shut, and the reset is in the footer so nothing has to be closed first to clear everything.", "The count stays in the row under the toolbar even with no filter, as the bare number, and 'X of Y' when filtered: it is the only statement of how much is not shown. Each filtered column adds a badge with its dimension and values, followed by the reset, which goes away with the last badge.", "The empty state names the filter as the cause and offers the reset in the same place, so 'no results' is not read as 'no data'." ], "try": [ { "do": "Press the filter button", "then": "the drawer slides in from the right and lies over the list, with the backdrop behind it" }, { "do": "Click beside the drawer", "then": "it closes, as a modal drawer does" }, { "do": "Set a filter in the drawer", "then": "the count under the toolbar changes with the click" }, { "do": "Switch Drawer to Contained and push, open the drawer and press the button again", "then": "it now reads “Close filter” and does that; the cross closes it as well, and so does Escape under Modal and Contained" }, { "do": "Look for Apply in the footer", "then": "there is none: Done and the reset stand there" }, { "do": "Press Done in the footer", "then": "the drawer closes, and the button in the toolbar reads Filter again" }, { "do": "Reset in the footer while the drawer is open", "then": "every field empties and the list is complete again, without closing the drawer" } ], "revision": 1, "changes": [], "reviewed": true, "source": "\n\n
\n \n \n \n Create document\n \n \n \n Filter\n \n \n No document matches the active filters\n \n \n \n Reset all filters\n \n \n \n\n \n
\n \n Bank voucher\n Cash receipt\n Incoming invoice\n Journal entry\n Outgoing invoice\n \n \n Andrea Jansen\n Marie-Luise Hoffmann-Grote\n Sophie Brandt\n Thorsten Reinke\n \n \n Error\n Finalized\n Open\n Reviewed\n \n
\n Done\n Reset all filters\n \n
\n\n\n\n\n\n\n\n", "page": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/filter/fi01-filter-drawer/", "topicPage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/filter/" }