fix(s2): make avatar-only action button have square dimension (#8400)

* fix border radius of avatar in action button

* fix button dimensions with avatar-only

* add to chromatic

* fix negative margin on avatar-only case

* move padding logic to control utility

* move avatar logic back to ActionButton

Author: reidbarber

packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {ActionButton, Text} from '../src';
+import {ActionButton, Avatar, Text} from '../src';
 import {Fonts, NotificationBadges, UnsafeClassName} from '../stories/ActionButton.stories';
 import {generatePowerset} from '@react-spectrum/story-utils';
 import type {Meta} from '@storybook/react';
@@ -82,4 +82,18 @@ export const IconOnly = {
   }
 };
 
+export const WithAvatar = {
+  render: Template,
+  args: {
+    children: <><Avatar src="https://i.imgur.com/xIe7Wlb.png" /><Text>Press me</Text></>
+  }
+};
+
+export const AvatarOnly = {
+  render: Template,
+  args: {
+    children: <Avatar src="https://i.imgur.com/xIe7Wlb.png" />
+  }
+};
+
 export {Fonts, UnsafeClassName, NotificationBadges};

packages/@react-spectrum/s2/src/ActionButton.tsx

@@ -60,6 +60,7 @@ export interface ActionButtonProps extends Omit<ButtonProps, 'className' | 'styl
 
 // These styles handle both ActionButton and ToggleButton
 const iconOnly = ':has([slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))';
+const avatarOnly = ':has([slot=avatar]):not(:has([slot=icon], [data-rsp-slot=text]))';
 const textOnly = ':has([data-rsp-slot=text]):not(:has([slot=icon], [slot=avatar]))';
 const controlStyle = control({shape: 'default', icon: true});
 export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps & ActionGroupItemStyleProps & {isInGroup: boolean, isStaticColor: boolean}>({
@@ -226,6 +227,10 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
       [iconOnly]: 'calc(self(minWidth)/2 + var(--iconWidth)/2)',
       [textOnly]: 'full'
     }
+  },
+  paddingX: {
+    default: controlStyle.paddingX,
+    [avatarOnly]: 0
   }
 }, getAllowedOverrides());
 
@@ -291,7 +296,14 @@ export const ActionButton = forwardRef(function ActionButton(props: ActionButton
           }],
           [AvatarContext, {
             size: avatarSize[size],
-            styles: style({marginStart: '--iconMargin', flexShrink: 0, order: 0})
+            styles: style({
+              marginStart: {
+                default: '--iconMargin',
+                ':last-child': 0
+              },
+              flexShrink: 0,
+              order: 0
+            })
           }],
           [NotificationBadgeContext, {
             staticColor: staticColor,