New - Filter box component

[Devaney]

Type of request
New

Component, pattern or foundation?
Component

Nature of request
Requesting we create a new 'filter' component which consists of a filter button/toggle that gives the users access to a panel.

In the designs created by Kevin, the panel show options for showing/hiding table columns.

This will allow us to show five columns by default and allow the user to access other columns as they wish.

The mobile design for tables means that the filter would not be needed at mobile width.

[elenagarrone]

When the panel opens, does the page shift down or does the panel go over the content?

I can see the api of the component being something like:

<lg-filter-button iconName="columns">Lorem ipsum - it will automatically add the chevron icon</lg-filter-button>
<lg-filter-panel>
    <lg-filter-body>
        Here users will add the various filters
    </lg-filter-body>
    <lg-filter-footer>
        Here users will add the button group
    </lg-filter-footer>
</lg-filter-panel>

I would position the button outside so that other content can go on the side of it - like the design above.

@paul-request @owensgit @aaronBery what do you think?

[alexcanning]

When Kev discussed this component, it was with the idea of it pushing the content down.

[elenagarrone]

@Devaney go for it 👍

[elenagarrone]

Currently being worked on by the FEP team. I'll post an update once the PR is open.

[elenagarrone]

PR: #985

[elenagarrone]

Available in v8.2.0.