From 445b6304d34bb94dacb29912923580d2a82de80c Mon Sep 17 00:00:00 2001
From: amrocha <andre.rocha@shopify.com>
Date: Thu, 7 May 2020 09:52:20 -0700
Subject: [PATCH 01/12] Add customizable empty state prop in resource list

---
 src/components/ResourceList/ResourceList.tsx  |  4 ++
 .../ResourceList/tests/ResourceList.test.tsx  | 58 ++++++++++++++++---
 2 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/src/components/ResourceList/ResourceList.tsx b/src/components/ResourceList/ResourceList.tsx
index bcd8f7028d5..d4332672f54 100644
--- a/src/components/ResourceList/ResourceList.tsx
+++ b/src/components/ResourceList/ResourceList.tsx
@@ -90,6 +90,8 @@ export interface ResourceListProps {
   idForItem?(item: any, index: number): string;
   /** Function to resolve an id from a item */
   resolveItemId?(item: any): string;
+  /** React node to display instead of the default empty state */
+  alternateEmptyState?: React.ReactNode;
 }
 
 type CombinedProps = ResourceListProps & WithAppProviderProps;
@@ -391,6 +393,7 @@ class ResourceListInner extends React.Component<CombinedProps, State> {
       selectedItems,
       resourceName = this.defaultResourceName,
       onSortChange,
+      alternateEmptyState,
       polaris: {intl},
     } = this.props;
     const {selectMode, loadingPosition, smallScreen} = this.state;
@@ -518,6 +521,7 @@ class ResourceListInner extends React.Component<CombinedProps, State> {
       );
 
     const emptyStateMarkup = showEmptyState ? (
+      alternateEmptyState ||
       <div className={styles.EmptySearchResultWrapper}>
         <EmptySearchResult {...this.emptySearchResultText()} withIllustration />
       </div>
diff --git a/src/components/ResourceList/tests/ResourceList.test.tsx b/src/components/ResourceList/tests/ResourceList.test.tsx
index e57b5ba6e34..7862932989c 100644
--- a/src/components/ResourceList/tests/ResourceList.test.tsx
+++ b/src/components/ResourceList/tests/ResourceList.test.tsx
@@ -59,9 +59,13 @@ describe('<ResourceList />', () => {
       const resourceList = mountWithAppProvider(
         <ResourceList items={itemsWithID} renderItem={renderCustomMarkup} />,
       );
-      expect(resourceList.find('li').first().children().html()).toBe(
-        '<p>title 1</p>',
-      );
+      expect(
+        resourceList
+          .find('li')
+          .first()
+          .children()
+          .html(),
+      ).toBe('<p>title 1</p>');
     });
   });
 
@@ -319,14 +323,24 @@ describe('<ResourceList />', () => {
       const resourceList = mountWithAppProvider(
         <ResourceList items={itemsNoID} renderItem={renderItem} />,
       );
-      expect(resourceList.find('li').first().key()).toBe('0');
+      expect(
+        resourceList
+          .find('li')
+          .first()
+          .key(),
+      ).toBe('0');
     });
 
     it('generates a key using the ID if there’s no idForItem prop but there and ID key in the data', () => {
       const resourceList = mountWithAppProvider(
         <ResourceList items={itemsWithID} renderItem={renderItem} />,
       );
-      expect(resourceList.find('li').first().key()).toBe('5');
+      expect(
+        resourceList
+          .find('li')
+          .first()
+          .key(),
+      ).toBe('5');
     });
 
     it('generates a key using the idForItem prop callback when one is provided', () => {
@@ -337,9 +351,12 @@ describe('<ResourceList />', () => {
           renderItem={renderItem}
         />,
       );
-      expect(resourceList.find('li').first().key()).toBe(
-        idForItem(itemsWithID[0]),
-      );
+      expect(
+        resourceList
+          .find('li')
+          .first()
+          .key(),
+      ).toBe(idForItem(itemsWithID[0]));
     });
   });
 
@@ -525,6 +542,24 @@ describe('<ResourceList />', () => {
       );
       expect(resourceList.find(EmptySearchResult).exists()).toBe(false);
     });
+
+    it('does not render when alternateEmptyState is set', () => {
+      const resourceList = mountWithAppProvider(
+        <ResourceList
+          items={[]}
+          renderItem={renderItem}
+          filterControl={<div>fake filterControl</div>}
+          alternateEmptyState={
+            <div id="alternateEmptyState">Alternate empty state</div>
+          }
+        />,
+      );
+
+      console.log(resourceList.debug());
+
+      expect(resourceList.find(EmptySearchResult).exists()).toBe(false);
+      expect(resourceList.find('div#alternateEmptyState').exists()).toBe(true);
+    });
   });
 
   describe('Sorting', () => {
@@ -1041,7 +1076,12 @@ describe('<ResourceList />', () => {
       setSmallScreen();
       trigger(resourceList.find(EventListener), 'handler');
 
-      expect(resourceList.find(Select).first().prop('labelInline')).toBe(false);
+      expect(
+        resourceList
+          .find(Select)
+          .first()
+          .prop('labelInline'),
+      ).toBe(false);
     });
 
     it('select mode is turned off on large screen when no items are selected', () => {

From 4cdcdb4fed7f38f867cde25ae3938e80eabc3b2e Mon Sep 17 00:00:00 2001
From: amrocha <andre.rocha@shopify.com>
Date: Thu, 7 May 2020 10:27:21 -0700
Subject: [PATCH 02/12] Add example

---
 src/components/ResourceList/README.md | 125 +++++++++++++++++++++++++-
 1 file changed, 124 insertions(+), 1 deletion(-)

diff --git a/src/components/ResourceList/README.md b/src/components/ResourceList/README.md
index 0da7aad05ba..5c1e2a28a9e 100644
--- a/src/components/ResourceList/README.md
+++ b/src/components/ResourceList/README.md
@@ -507,7 +507,8 @@ function ResourceListWithFilteringExample() {
     [],
   );
   const handleQueryValueChange = useCallback(
-    (value) => setQueryValue(value),
+    (value) =>
+      setQueryValue(value),
     [],
   );
   const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
@@ -534,9 +535,128 @@ function ResourceListWithFilteringExample() {
       url: 'customers/256',
       name: 'Ellen Ochoa',
       location: 'Los Angeles, USA',
+    }
+  ];
+
+  const filters = [
+    {
+      key: 'taggedWith',
+      label: 'Tagged with',
+      filter: (
+        <TextField
+          label="Tagged with"
+          value={taggedWith}
+          onChange={handleTaggedWithChange}
+          labelHidden
+        />
+      ),
+      shortcut: true,
     },
   ];
 
+  const appliedFilters = !isEmpty(taggedWith)
+    ? [
+        {
+          key: 'taggedWith',
+          label: disambiguateLabel('taggedWith', taggedWith),
+          onRemove: handleTaggedWithRemove,
+        },
+      ]
+    : [];
+
+  const filterControl = (
+    <Filters
+      queryValue={queryValue}
+      filters={filters}
+      appliedFilters={appliedFilters}
+      onQueryChange={handleQueryValueChange}
+      onQueryClear={handleQueryValueRemove}
+      onClearAll={handleClearAll}
+    >
+      <div style={{paddingLeft: '8px'}}>
+        <Button onClick={() => console.log('New filter saved')}>Save</Button>
+      </div>
+    </Filters>
+  );
+
+  return (
+    <Card>
+      <ResourceList
+        resourceName={resourceName}
+        items={items}
+        renderItem={renderItem}
+        filterControl={filterControl}
+      />
+    </Card>
+  );
+
+  function renderItem(item) {
+    const {id, url, name, location} = item;
+    const media = <Avatar customer size="medium" name={name} />;
+
+    return (
+      <ResourceItem id={id} url={url} media={media}>
+        <h3>
+          <TextStyle variation="strong">{name}</TextStyle>
+        </h3>
+        <div>{location}</div>
+      </ResourceItem>
+    );
+  }
+
+  function disambiguateLabel(key, value) {
+    switch (key) {
+      case 'taggedWith':
+        return `Tagged with ${value}`;
+      default:
+        return value;
+    }
+  }
+
+  function isEmpty(value) {
+    if (Array.isArray(value)) {
+      return value.length === 0;
+    } else {
+      return value === '' || value == null;
+    }
+  }
+}
+```
+
+### Resource list with a custom empty state
+
+Allows merchants to narrow the resource list to a subset of the original items.
+
+```jsx
+function ResourceListWithFilteringExample() {
+  const [taggedWith, setTaggedWith] = useState('VIP');
+  const [queryValue, setQueryValue] = useState(null);
+  const [items, setItems] = useState([
+  ]);
+
+  const handleTaggedWithChange = useCallback(
+    (value) => setTaggedWith(value),
+    [],
+  );
+  const handleQueryValueChange = useCallback(
+    (value) => {
+      setQueryValue(value);
+      setItems([]);
+    },
+    [],
+  );
+  const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
+  const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
+  const handleClearAll = useCallback(() => {
+    handleTaggedWithRemove();
+    handleQueryValueRemove();
+  }, [handleQueryValueRemove, handleTaggedWithRemove]);
+
+  const resourceName = {
+    singular: 'customer',
+    plural: 'customers',
+  };
+
   const filters = [
     {
       key: 'taggedWith',
@@ -585,6 +705,9 @@ function ResourceListWithFilteringExample() {
         items={items}
         renderItem={renderItem}
         filterControl={filterControl}
+        alternateEmptyState={
+          <div>This is a custom empty state</div>
+        }
       />
     </Card>
   );

From 2cabcfc9217418b2f53b8cdd91ea14690c64d346 Mon Sep 17 00:00:00 2001
From: amrocha <andre.rocha@shopify.com>
Date: Thu, 7 May 2020 10:44:04 -0700
Subject: [PATCH 03/12] Linting and changelog

---
 UNRELEASED.md                                    |  1 +
 src/components/ResourceList/ResourceList.tsx     | 16 ++++++++++------
 .../ResourceList/tests/ResourceList.test.tsx     |  2 --
 src/components/Select/Select.scss                | 10 +++++-----
 4 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index c5c2a7515be..656cd2d5f64 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -8,6 +8,7 @@
 
 - Truncated long sort options in `ResourceList` ([#2957](https://github.com/Shopify/polaris-react/pull/2957)
 - Updated type restrictions for `Pagination` to allow its `label` prop to accept `React.ReactNode` instead of `string` ([#2972](https://github.com/Shopify/polaris-react/pull/2972))
+- Added a prop to `ResourceList` to enable the customization of the empty search state ([#2971](https://github.com/Shopify/polaris-react/pull/2971))
 
 ### Bug fixes
 
diff --git a/src/components/ResourceList/ResourceList.tsx b/src/components/ResourceList/ResourceList.tsx
index d4332672f54..a2d2f1459a5 100644
--- a/src/components/ResourceList/ResourceList.tsx
+++ b/src/components/ResourceList/ResourceList.tsx
@@ -520,12 +520,16 @@ class ResourceListInner extends React.Component<CombinedProps, State> {
         </div>
       );
 
-    const emptyStateMarkup = showEmptyState ? (
-      alternateEmptyState ||
-      <div className={styles.EmptySearchResultWrapper}>
-        <EmptySearchResult {...this.emptySearchResultText()} withIllustration />
-      </div>
-    ) : null;
+    const emptyStateMarkup = showEmptyState
+      ? alternateEmptyState || (
+          <div className={styles.EmptySearchResultWrapper}>
+            <EmptySearchResult
+              {...this.emptySearchResultText()}
+              withIllustration
+            />
+          </div>
+        )
+      : null;
 
     const defaultTopPadding = 8;
     const topPadding =
diff --git a/src/components/ResourceList/tests/ResourceList.test.tsx b/src/components/ResourceList/tests/ResourceList.test.tsx
index 7862932989c..cb080030203 100644
--- a/src/components/ResourceList/tests/ResourceList.test.tsx
+++ b/src/components/ResourceList/tests/ResourceList.test.tsx
@@ -555,8 +555,6 @@ describe('<ResourceList />', () => {
         />,
       );
 
-      console.log(resourceList.debug());
-
       expect(resourceList.find(EmptySearchResult).exists()).toBe(false);
       expect(resourceList.find('div#alternateEmptyState').exists()).toBe(true);
     });
diff --git a/src/components/Select/Select.scss b/src/components/Select/Select.scss
index f521e4c6ef8..7889cdbe4a5 100644
--- a/src/components/Select/Select.scss
+++ b/src/components/Select/Select.scss
@@ -150,6 +150,11 @@ $stacking-order: (
 
 .newDesignLanguage {
   .Backdrop {
+
+    // 'position' needs to sit below focus-ring since it will be overwritten
+    // with relative when the focus ring style is 'base'
+    // stylelint-disable-next-line order/properties-order
+    position: absolute;
     z-index: z-index(backdrop, $stacking-order);
     top: 0;
     right: 0;
@@ -159,11 +164,6 @@ $stacking-order: (
     border-radius: var(--p-border-radius-base);
     background-color: var(--p-surface);
     @include focus-ring($border-width: rem(1px));
-
-    // 'position' needs to sit below focus-ring since it will be overwritten
-    // with relative when the focus ring style is 'base'
-    // stylelint-disable-next-line order/properties-order
-    position: absolute;
   }
 
   &.error {

From 45c598c7cca4561e007686d8cc39938203781dbc Mon Sep 17 00:00:00 2001
From: amrocha <andre.rocha@shopify.com>
Date: Thu, 7 May 2020 11:15:27 -0700
Subject: [PATCH 04/12] Linting

---
 src/components/Select/Select.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Select/Select.scss b/src/components/Select/Select.scss
index 7889cdbe4a5..2ad51f0cc03 100644
--- a/src/components/Select/Select.scss
+++ b/src/components/Select/Select.scss
@@ -150,7 +150,6 @@ $stacking-order: (
 
 .newDesignLanguage {
   .Backdrop {
-
     // 'position' needs to sit below focus-ring since it will be overwritten
     // with relative when the focus ring style is 'base'
     // stylelint-disable-next-line order/properties-order

From ba3ebfd803777777e41b22e75369c5d74d24a849 Mon Sep 17 00:00:00 2001
From: Andre Rocha <amrocha@users.noreply.github.com>
Date: Mon, 11 May 2020 09:56:29 -0700
Subject: [PATCH 05/12] Update src/components/ResourceList/README.md

Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>
---
 src/components/ResourceList/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ResourceList/README.md b/src/components/ResourceList/README.md
index 5c1e2a28a9e..75a0d00cb33 100644
--- a/src/components/ResourceList/README.md
+++ b/src/components/ResourceList/README.md
@@ -623,7 +623,7 @@ function ResourceListWithFilteringExample() {
 }
 ```
 
-### Resource list with a custom empty state
+### Resource list with a custom empty search result state
 
 Allows merchants to narrow the resource list to a subset of the original items.
 

From 27ff6a918bf3fcb5c5970581bdfba3c2143c42b5 Mon Sep 17 00:00:00 2001
From: amrocha <andre.rocha@shopify.com>
Date: Thu, 7 May 2020 15:54:58 -0700
Subject: [PATCH 06/12] reformat

---
 src/components/ResourceList/README.md         | 23 ++++-------
 .../ResourceList/tests/ResourceList.test.tsx  | 40 +++++--------------
 2 files changed, 17 insertions(+), 46 deletions(-)

diff --git a/src/components/ResourceList/README.md b/src/components/ResourceList/README.md
index 75a0d00cb33..6ef4bc08ec5 100644
--- a/src/components/ResourceList/README.md
+++ b/src/components/ResourceList/README.md
@@ -507,8 +507,7 @@ function ResourceListWithFilteringExample() {
     [],
   );
   const handleQueryValueChange = useCallback(
-    (value) =>
-      setQueryValue(value),
+    (value) => setQueryValue(value),
     [],
   );
   const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
@@ -535,7 +534,7 @@ function ResourceListWithFilteringExample() {
       url: 'customers/256',
       name: 'Ellen Ochoa',
       location: 'Los Angeles, USA',
-    }
+    },
   ];
 
   const filters = [
@@ -631,20 +630,16 @@ Allows merchants to narrow the resource list to a subset of the original items.
 function ResourceListWithFilteringExample() {
   const [taggedWith, setTaggedWith] = useState('VIP');
   const [queryValue, setQueryValue] = useState(null);
-  const [items, setItems] = useState([
-  ]);
+  const [items, setItems] = useState([]);
 
   const handleTaggedWithChange = useCallback(
     (value) => setTaggedWith(value),
     [],
   );
-  const handleQueryValueChange = useCallback(
-    (value) => {
-      setQueryValue(value);
-      setItems([]);
-    },
-    [],
-  );
+  const handleQueryValueChange = useCallback((value) => {
+    setQueryValue(value);
+    setItems([]);
+  }, []);
   const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
   const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
   const handleClearAll = useCallback(() => {
@@ -705,9 +700,7 @@ function ResourceListWithFilteringExample() {
         items={items}
         renderItem={renderItem}
         filterControl={filterControl}
-        alternateEmptyState={
-          <div>This is a custom empty state</div>
-        }
+        alternateEmptyState={<div>This is a custom empty state</div>}
       />
     </Card>
   );
diff --git a/src/components/ResourceList/tests/ResourceList.test.tsx b/src/components/ResourceList/tests/ResourceList.test.tsx
index cb080030203..d6a22e32126 100644
--- a/src/components/ResourceList/tests/ResourceList.test.tsx
+++ b/src/components/ResourceList/tests/ResourceList.test.tsx
@@ -59,13 +59,9 @@ describe('<ResourceList />', () => {
       const resourceList = mountWithAppProvider(
         <ResourceList items={itemsWithID} renderItem={renderCustomMarkup} />,
       );
-      expect(
-        resourceList
-          .find('li')
-          .first()
-          .children()
-          .html(),
-      ).toBe('<p>title 1</p>');
+      expect(resourceList.find('li').first().children().html()).toBe(
+        '<p>title 1</p>',
+      );
     });
   });
 
@@ -323,24 +319,14 @@ describe('<ResourceList />', () => {
       const resourceList = mountWithAppProvider(
         <ResourceList items={itemsNoID} renderItem={renderItem} />,
       );
-      expect(
-        resourceList
-          .find('li')
-          .first()
-          .key(),
-      ).toBe('0');
+      expect(resourceList.find('li').first().key()).toBe('0');
     });
 
     it('generates a key using the ID if there’s no idForItem prop but there and ID key in the data', () => {
       const resourceList = mountWithAppProvider(
         <ResourceList items={itemsWithID} renderItem={renderItem} />,
       );
-      expect(
-        resourceList
-          .find('li')
-          .first()
-          .key(),
-      ).toBe('5');
+      expect(resourceList.find('li').first().key()).toBe('5');
     });
 
     it('generates a key using the idForItem prop callback when one is provided', () => {
@@ -351,12 +337,9 @@ describe('<ResourceList />', () => {
           renderItem={renderItem}
         />,
       );
-      expect(
-        resourceList
-          .find('li')
-          .first()
-          .key(),
-      ).toBe(idForItem(itemsWithID[0]));
+      expect(resourceList.find('li').first().key()).toBe(
+        idForItem(itemsWithID[0]),
+      );
     });
   });
 
@@ -1074,12 +1057,7 @@ describe('<ResourceList />', () => {
       setSmallScreen();
       trigger(resourceList.find(EventListener), 'handler');
 
-      expect(
-        resourceList
-          .find(Select)
-          .first()
-          .prop('labelInline'),
-      ).toBe(false);
+      expect(resourceList.find(Select).first().prop('labelInline')).toBe(false);
     });
 
     it('select mode is turned off on large screen when no items are selected', () => {

From 21c80594c0ef888d84ac16c25e6f1bc9db7a2e48 Mon Sep 17 00:00:00 2001
From: amrocha <andre.rocha@shopify.com>
Date: Mon, 11 May 2020 10:01:58 -0700
Subject: [PATCH 07/12] Rename prop

---
 src/components/ResourceList/README.md                  |  8 ++------
 src/components/ResourceList/ResourceList.tsx           |  8 ++++----
 .../ResourceList/tests/ResourceList.test.tsx           | 10 ++++++----
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/components/ResourceList/README.md b/src/components/ResourceList/README.md
index 6ef4bc08ec5..7b9bf3b7632 100644
--- a/src/components/ResourceList/README.md
+++ b/src/components/ResourceList/README.md
@@ -506,10 +506,6 @@ function ResourceListWithFilteringExample() {
     (value) => setTaggedWith(value),
     [],
   );
-  const handleQueryValueChange = useCallback(
-    (value) => setQueryValue(value),
-    [],
-  );
   const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
   const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
   const handleClearAll = useCallback(() => {
@@ -568,7 +564,7 @@ function ResourceListWithFilteringExample() {
       queryValue={queryValue}
       filters={filters}
       appliedFilters={appliedFilters}
-      onQueryChange={handleQueryValueChange}
+      onQueryChange={setQueryValue}
       onQueryClear={handleQueryValueRemove}
       onClearAll={handleClearAll}
     >
@@ -700,7 +696,7 @@ function ResourceListWithFilteringExample() {
         items={items}
         renderItem={renderItem}
         filterControl={filterControl}
-        alternateEmptyState={<div>This is a custom empty state</div>}
+        emptySearchStateMarkup={<div>This is a custom empty state</div>}
       />
     </Card>
   );
diff --git a/src/components/ResourceList/ResourceList.tsx b/src/components/ResourceList/ResourceList.tsx
index a2d2f1459a5..10857934e0a 100644
--- a/src/components/ResourceList/ResourceList.tsx
+++ b/src/components/ResourceList/ResourceList.tsx
@@ -90,8 +90,8 @@ export interface ResourceListProps {
   idForItem?(item: any, index: number): string;
   /** Function to resolve an id from a item */
   resolveItemId?(item: any): string;
-  /** React node to display instead of the default empty state */
-  alternateEmptyState?: React.ReactNode;
+  /** React node to display when `filterControl` is set and no results are returned on search or filter of the list. */
+  emptySearchStateMarkup?: React.ReactNode;
 }
 
 type CombinedProps = ResourceListProps & WithAppProviderProps;
@@ -393,7 +393,7 @@ class ResourceListInner extends React.Component<CombinedProps, State> {
       selectedItems,
       resourceName = this.defaultResourceName,
       onSortChange,
-      alternateEmptyState,
+      emptySearchStateMarkup,
       polaris: {intl},
     } = this.props;
     const {selectMode, loadingPosition, smallScreen} = this.state;
@@ -521,7 +521,7 @@ class ResourceListInner extends React.Component<CombinedProps, State> {
       );
 
     const emptyStateMarkup = showEmptyState
-      ? alternateEmptyState || (
+      ? emptySearchStateMarkup || (
           <div className={styles.EmptySearchResultWrapper}>
             <EmptySearchResult
               {...this.emptySearchResultText()}
diff --git a/src/components/ResourceList/tests/ResourceList.test.tsx b/src/components/ResourceList/tests/ResourceList.test.tsx
index d6a22e32126..f45264f7101 100644
--- a/src/components/ResourceList/tests/ResourceList.test.tsx
+++ b/src/components/ResourceList/tests/ResourceList.test.tsx
@@ -526,20 +526,22 @@ describe('<ResourceList />', () => {
       expect(resourceList.find(EmptySearchResult).exists()).toBe(false);
     });
 
-    it('does not render when alternateEmptyState is set', () => {
+    it('does not render when emptySearchStateMarkup is set', () => {
       const resourceList = mountWithAppProvider(
         <ResourceList
           items={[]}
           renderItem={renderItem}
           filterControl={<div>fake filterControl</div>}
-          alternateEmptyState={
-            <div id="alternateEmptyState">Alternate empty state</div>
+          emptySearchStateMarkup={
+            <div id="emptySearchStateMarkup">Alternate empty state</div>
           }
         />,
       );
 
       expect(resourceList.find(EmptySearchResult).exists()).toBe(false);
-      expect(resourceList.find('div#alternateEmptyState').exists()).toBe(true);
+      expect(resourceList.find('div#emptySearchStateMarkup').exists()).toBe(
+        true,
+      );
     });
   });
 

From 7b5062b4063185af9198729ec3eb27a28ad2c7fd Mon Sep 17 00:00:00 2001
From: amrocha <andre.rocha@shopify.com>
Date: Mon, 11 May 2020 12:00:51 -0700
Subject: [PATCH 08/12] Rename prop

---
 src/components/ResourceList/ResourceList.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/ResourceList/ResourceList.tsx b/src/components/ResourceList/ResourceList.tsx
index 10857934e0a..f166e2b6835 100644
--- a/src/components/ResourceList/ResourceList.tsx
+++ b/src/components/ResourceList/ResourceList.tsx
@@ -91,7 +91,7 @@ export interface ResourceListProps {
   /** Function to resolve an id from a item */
   resolveItemId?(item: any): string;
   /** React node to display when `filterControl` is set and no results are returned on search or filter of the list. */
-  emptySearchStateMarkup?: React.ReactNode;
+  emptySearchState?: React.ReactNode;
 }
 
 type CombinedProps = ResourceListProps & WithAppProviderProps;
@@ -393,7 +393,7 @@ class ResourceListInner extends React.Component<CombinedProps, State> {
       selectedItems,
       resourceName = this.defaultResourceName,
       onSortChange,
-      emptySearchStateMarkup,
+      emptySearchState,
       polaris: {intl},
     } = this.props;
     const {selectMode, loadingPosition, smallScreen} = this.state;
@@ -479,9 +479,10 @@ class ResourceListInner extends React.Component<CombinedProps, State> {
       <div className={styles['HeaderWrapper-overlay']} />
     ) : null;
 
-    const showEmptyState = filterControl && !this.itemsExist() && !loading;
+    const showEmptySearchState =
+      filterControl && !this.itemsExist() && !loading;
 
-    const headerMarkup = !showEmptyState &&
+    const headerMarkup = !showEmptySearchState &&
       (showHeader || needsHeader) &&
       this.listRef.current && (
         <div className={styles.HeaderOuterWrapper}>
@@ -520,8 +521,8 @@ class ResourceListInner extends React.Component<CombinedProps, State> {
         </div>
       );
 
-    const emptyStateMarkup = showEmptyState
-      ? emptySearchStateMarkup || (
+    const emptySearchStateMarkup = showEmptySearchState
+      ? emptySearchState || (
           <div className={styles.EmptySearchResultWrapper}>
             <EmptySearchResult
               {...this.emptySearchResultText()}
@@ -575,7 +576,7 @@ class ResourceListInner extends React.Component<CombinedProps, State> {
         {items.map(this.renderItem)}
       </ul>
     ) : (
-      emptyStateMarkup
+      emptySearchStateMarkup
     );
 
     const context = {

From 3eb4ffabe2ffd8853d5702b35c27b85ad2fb3ba3 Mon Sep 17 00:00:00 2001
From: amrocha <andre.rocha@shopify.com>
Date: Mon, 11 May 2020 12:15:46 -0700
Subject: [PATCH 09/12] Docs + formatting

---
 UNRELEASED.md                                          |  1 +
 src/components/ResourceList/README.md                  |  2 +-
 .../ResourceList/tests/ResourceList.test.tsx           | 10 ++++------
 src/components/Select/Select.scss                      |  8 ++++----
 4 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 656cd2d5f64..0d184052a03 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -9,6 +9,7 @@
 - Truncated long sort options in `ResourceList` ([#2957](https://github.com/Shopify/polaris-react/pull/2957)
 - Updated type restrictions for `Pagination` to allow its `label` prop to accept `React.ReactNode` instead of `string` ([#2972](https://github.com/Shopify/polaris-react/pull/2972))
 - Added a prop to `ResourceList` to enable the customization of the empty search state ([#2971](https://github.com/Shopify/polaris-react/pull/2971))
+- Added a `emptySearchState` prop to `ResourceList` to enable the customization of the empty search state ([#2971](https://github.com/Shopify/polaris-react/pull/2971))
 
 ### Bug fixes
 
diff --git a/src/components/ResourceList/README.md b/src/components/ResourceList/README.md
index 7b9bf3b7632..3915bd20fdc 100644
--- a/src/components/ResourceList/README.md
+++ b/src/components/ResourceList/README.md
@@ -620,7 +620,7 @@ function ResourceListWithFilteringExample() {
 
 ### Resource list with a custom empty search result state
 
-Allows merchants to narrow the resource list to a subset of the original items.
+Allows merchants to narrow the resource list to a subset of the original items. If the filters or search applied return no results, then display a custom empty search state.
 
 ```jsx
 function ResourceListWithFilteringExample() {
diff --git a/src/components/ResourceList/tests/ResourceList.test.tsx b/src/components/ResourceList/tests/ResourceList.test.tsx
index f45264f7101..9409cc43f5e 100644
--- a/src/components/ResourceList/tests/ResourceList.test.tsx
+++ b/src/components/ResourceList/tests/ResourceList.test.tsx
@@ -526,22 +526,20 @@ describe('<ResourceList />', () => {
       expect(resourceList.find(EmptySearchResult).exists()).toBe(false);
     });
 
-    it('does not render when emptySearchStateMarkup is set', () => {
+    it('renders the provided markup when emptySearchState is set', () => {
       const resourceList = mountWithAppProvider(
         <ResourceList
           items={[]}
           renderItem={renderItem}
           filterControl={<div>fake filterControl</div>}
-          emptySearchStateMarkup={
-            <div id="emptySearchStateMarkup">Alternate empty state</div>
+          emptySearchState={
+            <div id="emptySearchState">Alternate empty state</div>
           }
         />,
       );
 
       expect(resourceList.find(EmptySearchResult).exists()).toBe(false);
-      expect(resourceList.find('div#emptySearchStateMarkup').exists()).toBe(
-        true,
-      );
+      expect(resourceList.find('div#emptySearchState').exists()).toBe(true);
     });
   });
 
diff --git a/src/components/Select/Select.scss b/src/components/Select/Select.scss
index 2ad51f0cc03..47f576232da 100644
--- a/src/components/Select/Select.scss
+++ b/src/components/Select/Select.scss
@@ -150,10 +150,6 @@ $stacking-order: (
 
 .newDesignLanguage {
   .Backdrop {
-    // 'position' needs to sit below focus-ring since it will be overwritten
-    // with relative when the focus ring style is 'base'
-    // stylelint-disable-next-line order/properties-order
-    position: absolute;
     z-index: z-index(backdrop, $stacking-order);
     top: 0;
     right: 0;
@@ -163,6 +159,10 @@ $stacking-order: (
     border-radius: var(--p-border-radius-base);
     background-color: var(--p-surface);
     @include focus-ring($border-width: rem(1px));
+    // 'position' needs to sit below focus-ring since it will be overwritten
+    // with relative when the focus ring style is 'base'
+    // stylelint-disable-next-line order/properties-order
+    position: absolute;
   }
 
   &.error {

From 02f53eb25963aecfa5e195ac91fd1bdd2e2535a1 Mon Sep 17 00:00:00 2001
From: amrocha <andre.rocha@shopify.com>
Date: Mon, 11 May 2020 12:23:05 -0700
Subject: [PATCH 10/12] Update example

---
 src/components/ResourceList/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ResourceList/README.md b/src/components/ResourceList/README.md
index 3915bd20fdc..cdc1e0cc7a3 100644
--- a/src/components/ResourceList/README.md
+++ b/src/components/ResourceList/README.md
@@ -696,7 +696,7 @@ function ResourceListWithFilteringExample() {
         items={items}
         renderItem={renderItem}
         filterControl={filterControl}
-        emptySearchStateMarkup={<div>This is a custom empty state</div>}
+        emptySearchState={<div>This is a custom empty state</div>}
       />
     </Card>
   );

From 9c27b48671b50fc76af2bf38a79c2588bd62dee1 Mon Sep 17 00:00:00 2001
From: amrocha <andre.rocha@shopify.com>
Date: Mon, 11 May 2020 12:24:58 -0700
Subject: [PATCH 11/12] Rebase snag

---
 UNRELEASED.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 0d184052a03..5f218b890e4 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -8,7 +8,6 @@
 
 - Truncated long sort options in `ResourceList` ([#2957](https://github.com/Shopify/polaris-react/pull/2957)
 - Updated type restrictions for `Pagination` to allow its `label` prop to accept `React.ReactNode` instead of `string` ([#2972](https://github.com/Shopify/polaris-react/pull/2972))
-- Added a prop to `ResourceList` to enable the customization of the empty search state ([#2971](https://github.com/Shopify/polaris-react/pull/2971))
 - Added a `emptySearchState` prop to `ResourceList` to enable the customization of the empty search state ([#2971](https://github.com/Shopify/polaris-react/pull/2971))
 
 ### Bug fixes

From 52c565cf77310b73cf9de01322399847230ea5c7 Mon Sep 17 00:00:00 2001
From: amrocha <andre.rocha@shopify.com>
Date: Mon, 11 May 2020 12:25:33 -0700
Subject: [PATCH 12/12] grammar

---
 UNRELEASED.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 5f218b890e4..ecd5b8f76db 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -8,7 +8,7 @@
 
 - Truncated long sort options in `ResourceList` ([#2957](https://github.com/Shopify/polaris-react/pull/2957)
 - Updated type restrictions for `Pagination` to allow its `label` prop to accept `React.ReactNode` instead of `string` ([#2972](https://github.com/Shopify/polaris-react/pull/2972))
-- Added a `emptySearchState` prop to `ResourceList` to enable the customization of the empty search state ([#2971](https://github.com/Shopify/polaris-react/pull/2971))
+- Added an `emptySearchState` prop to `ResourceList` to enable the customization of the empty search state ([#2971](https://github.com/Shopify/polaris-react/pull/2971))
 
 ### Bug fixes