[ResourceList] Fix persistent Action on MouseOut

UNRELEASED.md

@@ -14,6 +14,7 @@
 - Fixed focus state color on monochrome `Buttons` ([#2684](https://github.com/Shopify/polaris-react/pull/2684))
 - Fixed container's width on `Modal` ([#2692](https://github.com/Shopify/polaris-react/pull/2692))
 - Fixed the position property for the backdrop on `Select` from being overwritten by the focus ring ([#2748](https://github.com/Shopify/polaris-react/pull/2748))
+- Fixed `ResourceItem` `Actions` visibility on mouse out ([#2742](https://github.com/Shopify/polaris-react/pull/2742))
 
 ### Documentation
 

src/components/ResourceItem/ResourceItem.scss

@@ -39,6 +39,13 @@ $resource-list-item-variables: (
   outline: none;
   cursor: pointer;
 
+  &:not(.persistActions) {
+    // stylelint-disable-next-line selector-max-combinators
+    .Actions {
+      right: spacing();
+    }
+  }
+
   &:hover {
     &:not(.newDesignLanguage) {
       background-image: linear-gradient(
@@ -51,7 +58,6 @@ $resource-list-item-variables: (
       // stylelint-disable-next-line selector-max-specificity
       .Actions {
         @include action-unhide;
-        right: spacing();
 
         // stylelint-disable-next-line max-nesting-depth
         @include page-content-when-partially-condensed {

src/components/ResourceItem/ResourceItem.tsx

@@ -305,6 +305,7 @@ class BaseResourceItem extends React.Component<CombinedProps, State> {
         onFocus={this.handleFocus}
         onBlur={this.handleBlur}
         onKeyUp={this.handleKeyUp}
+        onMouseOut={this.handleMouseOut}
         testID="Item-Wrapper"
         data-href={url}
       >
@@ -342,6 +343,10 @@ class BaseResourceItem extends React.Component<CombinedProps, State> {
     this.setState({focused: false, focusedInner: false});
   };
 
+  private handleMouseOut = () => {
+    this.state.focused && this.setState({focused: false, focusedInner: false});
+  };
+
   private handleLargerSelectionArea = (event: React.MouseEvent<any>) => {
     stopPropagation(event);
     this.handleSelection(!this.state.selected, event.nativeEvent.shiftKey);

src/components/ResourceItem/tests/ResourceItem.test.tsx

@@ -652,6 +652,31 @@ describe('<ResourceItem />', () => {
       });
     });
   });
+
+  describe('focused', () => {
+    it('removes the focus state when mousing out a focused item', () => {
+      const resourceItem = mountWithApp(
+        <ResourceListContext.Provider value={mockSelectModeContext}>
+          <ResourceItem id={itemId} url={url} />
+        </ResourceListContext.Provider>,
+      );
+      const wrapperDiv = resourceItem.find('div');
+
+      wrapperDiv!.trigger('onFocus', {
+        target: wrapperDiv!.domNode as HTMLDivElement,
+      });
+
+      expect(resourceItem).toContainReactComponent('div', {
+        className: 'ResourceItem focused selectable selectMode focusedInner',
+      });
+
+      wrapperDiv!.trigger('onMouseOut');
+
+      expect(resourceItem).toContainReactComponent('div', {
+        className: 'ResourceItem selectable selectMode',
+      });
+    });
+  });
 });
 
 function noop() {}