fix(ui): Actions border radius consistency (#9146)

Author: alexcarpenter

.changeset/kind-cooks-brush.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Fix small actions button border radius to ensure consistency.

packages/ui/src/elements/Actions.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import type { LocalizationKey } from '../customizables';
-import { Button, Col, descriptors, Flex, Icon, SimpleButton, Spinner, useLocalizations } from '../customizables';
+import { Button, Col, descriptors, Flex, Icon, Spinner, useLocalizations } from '../customizables';
 import type { ElementDescriptor, ElementId } from '../customizables/elementDescriptors';
 import { useCardState } from '../elements/contexts';
 import { useLoadingStatus } from '../hooks';
@@ -43,84 +43,6 @@ type ActionProps = Omit<PropsOfComponent<typeof Button>, 'label'> & {
   spinnerSize?: PropsOfComponent<typeof Spinner>['size'];
 };
 
-export const ExtraSmallAction = (props: Omit<ActionProps, 'label'>) => {
-  const card = useCardState();
-  const status = useLoadingStatus();
-  const {
-    icon,
-    onClick: onClickProp,
-    iconElementDescriptor,
-    sx,
-    iconElementId,
-    iconSx,
-    iconBoxElementDescriptor,
-    iconBoxElementId,
-    iconBoxSx,
-    trailing,
-    spinnerSize,
-    ...rest
-  } = props;
-
-  const onClick: React.MouseEventHandler<HTMLButtonElement> = async e => {
-    card.setLoading();
-    status.setLoading();
-    try {
-      await onClickProp?.(e);
-    } finally {
-      card.setIdle();
-      status.setIdle();
-    }
-  };
-
-  return (
-    <SimpleButton
-      size='xs'
-      variant='outline'
-      hoverAsFocus
-      sx={[
-        t => ({
-          borderRadius: t.radii.$lg,
-          gap: 0,
-          justifyContent: 'center',
-          padding: t.space.$1,
-        }),
-        sx,
-      ]}
-      isDisabled={card.isLoading}
-      onClick={onClick}
-      {...rest}
-    >
-      <Flex
-        elementDescriptor={iconBoxElementDescriptor}
-        elementId={iconBoxElementId}
-        justify='center'
-        as='span'
-      >
-        {status.isLoading ? (
-          <Spinner
-            size={spinnerSize || 'xs'}
-            elementDescriptor={descriptors.spinner}
-          />
-        ) : (
-          <Icon
-            elementDescriptor={iconElementDescriptor}
-            elementId={iconElementId}
-            icon={icon}
-            sx={[
-              theme => ({
-                width: theme.sizes.$4,
-                height: theme.sizes.$4,
-              }),
-              iconSx,
-            ]}
-          />
-        )}
-      </Flex>
-      {trailing}
-    </SimpleButton>
-  );
-};
-
 export const SmallAction = (props: ActionProps) => {
   const { sx, iconBoxSx, iconSx, ...rest } = props;
   return (
@@ -130,7 +52,7 @@ export const SmallAction = (props: ActionProps) => {
       textVariant='buttonSmall'
       sx={[
         t => ({
-          borderRadius: t.radii.$lg,
+          borderRadius: t.radii.$md,
           gap: t.space.$0x5,
           justifyContent: 'center',
           flex: '1 1 0',