[Filters] Remove extra margin when rightAction is null

[alololox]

WHY are these changes introduced?

When the ResourceList & Filter components are used in either an empty state configuration, or one where no filters are passed in (i.e. just search via TextField), a class with extra right margin is added causing the input to appear misaligned. This can be seen on the "empty state resource list" story/example linked in the docs: https://codesandbox.io/s/uyg6i?module=App.js

Currently, with margin:

Empty state: Existing web example:

This PR proposes:

Empty state:

WHAT is this pull request doing?

Sets rightActionMarkup in Filters.tsx to null when no filters are passed in, which prevents appending an empty div with the offending classes in ConnectedFilterControl here.

How to 🎩

Either copy paste the following into the Playground example or run through all existing ResourceList and Filter examples.

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

import React, {useState} from 'react';

import {
  Page,
  Card,
  ResourceList,
  ResourceItem,
  Filters,
  TextStyle,
} from '../src';

export function Playground() {
  const [queryValue, setQueryValue] = useState(null);
  const handleClearAll = () => {
    setQueryValue(null);
  };

  const resourceName = {
    singular: 'customer',
    plural: 'customers',
  };

  const items = [
    {
      id: 108,
      url: 'customers/341',
      name: 'Mae Jemison',
      location: 'Decatur, USA',
    },
    {
      id: 208,
      url: 'customers/256',
      name: 'Ellen Ochoa',
      location: 'Los Angeles, USA',
    },
  ];

  const filters = [];

  const appliedFilters = [];

  const filterControl = (
    <Filters
      queryValue={queryValue}
      filters={filters}
      appliedFilters={appliedFilters}
      onQueryChange={setQueryValue}
      onQueryClear={() => setQueryValue(null)}
      onClearAll={handleClearAll}
    />
  );

  return (
    <Page>
      <Card>
        <ResourceList
          resourceName={resourceName}
          items={items}
          renderItem={renderItem}
          filterControl={filterControl}
        />
      </Card>
    </Page>
  );

  function renderItem(item) {
    const {id, url, name, location} = item;
    return (
      <ResourceItem id={id} url={url}>
        <div>
          {name}: {location}
        </div>
      </ResourceItem>
    );
  }
}

🎩 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
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[github-actions]

🟢 No significant changes to src/**/*.tsx were detected.

[kyledurand]

Thanks for adding the tests 🙌

[pedrodurek]

LGTM! 🎉