Filters component

[tmlayton]

WHY are these changes introduced?

Closes #1167
Closes #1510

WHAT is this pull request doing?

Moving the <Filters /> component to Polaris

Documentation

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import * as React from 'react';
import {Page} from '@shopify/polaris';

interface State {}

export default class Playground extends React.Component<never, State> {
  render() {
    return (
      <Page title="Playground">
        {/* Add the code you want to test here */}
      </Page>
    );
  }
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

Known issues

@danrosenthal did some digging and looks like any children which cause a reflow (here is all of the things that can cause a reflow) during the entering animation will force the animation to skip to the end. For more details see reactjs/react-transition-group#382. For now this is a won’t fix.

Related todos

The following will be done in other PRs:

• Move ResourceList.Item to its own component named ResourceItem
• Update ResourceList examples to use ResourceFilters
• Deprecate FilterControl

[ry5n]

😍

[danrosenthal]

😍

[tmlayton]

I went ahead an updated the component to be called Filters and provided an example of using it with data table and resource list.

[sadiesaurus]

Nice work! 💖 A few comments and questions.

I didn't see the related components section. Did we decide it was best to not include it here?

[tmlayton]

I didn't see the related components section. Did we decide it was best to not include it here?

Yes, the format for related components is to suggest other components if trying to do something related, but we have no other filter component so it didn’t feel right to include.

[tmlayton]

Okay going to merge! If there are any other changes to docs we can do them in follow-up PRs.