From 3d30c35902ddf7a620a885729cb3c1cda743829a Mon Sep 17 00:00:00 2001
From: Rob Snow <rsnow@adobe.com>
Date: Wed, 22 Jul 2020 11:26:19 -0700
Subject: [PATCH] Fix hover styles Missed a hover style in ActionGroup Add
 transitions to hover for icons in buttons and textfields

---
 .../@adobe/spectrum-css-temp/components/button/index.css  | 3 +++
 .../spectrum-css-temp/components/textfield/index.css      | 5 ++++-
 packages/@react-spectrum/actiongroup/src/ActionGroup.tsx  | 8 +++++---
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/@adobe/spectrum-css-temp/components/button/index.css b/packages/@adobe/spectrum-css-temp/components/button/index.css
index 6e8a5fde391..da1a6eb62cf 100644
--- a/packages/@adobe/spectrum-css-temp/components/button/index.css
+++ b/packages/@adobe/spectrum-css-temp/components/button/index.css
@@ -101,6 +101,9 @@ governing permissions and limitations under the License.
     max-block-size: 100%;
     flex-shrink: 0;
     order: 0; /* always be before the label, regardless of DOM order */
+
+    transition: background var(--spectrum-global-animation-duration-100) ease-out,
+                color var(--spectrum-global-animation-duration-100) ease-out;
   }
 
 }
diff --git a/packages/@adobe/spectrum-css-temp/components/textfield/index.css b/packages/@adobe/spectrum-css-temp/components/textfield/index.css
index a34d7ab5eaa..06b9a36e905 100644
--- a/packages/@adobe/spectrum-css-temp/components/textfield/index.css
+++ b/packages/@adobe/spectrum-css-temp/components/textfield/index.css
@@ -72,7 +72,8 @@ governing permissions and limitations under the License.
   line-height: var(--spectrum-textfield-text-line-height);
   text-overflow: ellipsis;
 
-  transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out, box-shadow var(--spectrum-global-animation-duration-100) ease-in-out;
+  transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out,
+              box-shadow var(--spectrum-global-animation-duration-100) ease-in-out;
 
   outline: none;
 
@@ -188,6 +189,7 @@ governing permissions and limitations under the License.
   position: absolute;
   padding-inline-end: calc(var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) / 2);
   pointer-events: all;
+  transition: color var(--spectrum-global-animation-duration-100) ease-in-out;
 
   .spectrum-Textfield--quiet & {
     padding-inline-end: 0;
@@ -215,6 +217,7 @@ governing permissions and limitations under the License.
   width: var(--spectrum-icon-info-medium-width);
   inset-inline-start: var(--spectrum-global-dimension-size-100);
   top: var(--spectrum-global-dimension-size-85);
+  transition: color var(--spectrum-global-animation-duration-100) ease-in-out;
 }
 
 /* styles the textfield properly if the left icon is provided */
diff --git a/packages/@react-spectrum/actiongroup/src/ActionGroup.tsx b/packages/@react-spectrum/actiongroup/src/ActionGroup.tsx
index b3734dba5e7..6a04cc79f3d 100644
--- a/packages/@react-spectrum/actiongroup/src/ActionGroup.tsx
+++ b/packages/@react-spectrum/actiongroup/src/ActionGroup.tsx
@@ -16,7 +16,7 @@ import {classNames, unwrapDOMRef, useDOMRef, useStyleProps} from '@react-spectru
 import {DOMProps, DOMRef, Node, StyleProps} from '@react-types/shared';
 import {ListState, useListState} from '@react-stately/list';
 import {mergeProps} from '@react-aria/utils';
-import {PressResponder} from '@react-aria/interactions';
+import {PressResponder, useHover} from '@react-aria/interactions';
 import {Provider} from '@react-spectrum/provider';
 import React, {forwardRef, Key, ReactElement, useRef} from 'react';
 import {SpectrumActionGroupProps} from '@react-types/actiongroup';
@@ -100,6 +100,7 @@ function ActionGroupItem<T>({item, state, isDisabled, isEmphasized, onAction}: A
   let {buttonProps} = useActionGroupItem({key: item.key}, state, unwrapDOMRef(ref));
   isDisabled = isDisabled || state.disabledKeys.has(item.key);
   let isSelected = state.selectionManager.isSelected(item.key);
+  let {hoverProps, isHovered} = useHover({isDisabled});
 
   if (onAction && !isDisabled) {
     buttonProps = mergeProps(buttonProps, {
@@ -110,7 +111,7 @@ function ActionGroupItem<T>({item, state, isDisabled, isEmphasized, onAction}: A
   let button = (
     // Use a PressResponder to send DOM props through.
     // ActionButton doesn't allow overriding the role by default.
-    <PressResponder {...buttonProps}>
+    <PressResponder {...mergeProps(buttonProps, hoverProps)}>
       <ActionButton
         ref={ref}
         UNSAFE_className={
@@ -118,7 +119,8 @@ function ActionGroupItem<T>({item, state, isDisabled, isEmphasized, onAction}: A
             styles,
             'spectrum-ActionGroup-item',
             {
-              'is-selected': isSelected
+              'is-selected': isSelected,
+              'is-hovered': isHovered
             },
             classNames(
               buttonStyles,