refactor(clerk-js): Improve input + button group styling

.changeset/full-hounds-find.md

@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Input + button group styling improvements.
+
+- Increases touch area for button
+- Removes the absolute positioning on button

packages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx

@@ -21,6 +21,7 @@ import {
   Tr,
 } from '@/ui/customizables';
 import type { ElementDescriptor } from '@/ui/customizables/elementDescriptors';
+import { IconButton } from '@/ui/elements/IconButton';
 import { ThreeDotsMenu } from '@/ui/elements/ThreeDotsMenu';
 import { useClipboard } from '@/ui/hooks';
 import { Check, ClipboardOutline, Eye, EyeSlash } from '@/ui/icons';
@@ -68,40 +69,35 @@ const SecretInputWithToggle = ({ apiKeyID }: { apiKeyID: string }) => {
 
   return (
     <Flex
-      center
-      sx={{
-        width: '100%',
-        position: 'relative',
-      }}
+      sx={theme => ({
+        ...common.borderVariants(theme).normal,
+        '&:focus-within,&[data-focus-within="true"]': {
+          ...common.borderVariants(theme).normal['&:focus'],
+        },
+      })}
     >
       <Input
         type={revealed ? 'text' : 'password'}
         value={revealed && apiKeySecret ? apiKeySecret : `•`.repeat(25)}
         readOnly
-        aria-label='API key (hidden)'
-        sx={t => ({
-          paddingInlineEnd: t.sizes.$12,
-        })}
+        variant='unstyled'
       />
-      <Button
+      <IconButton
+        aria-label={`${revealed ? 'Show' : 'Hide'} api key`}
         variant='ghost'
-        sx={t => ({
-          position: 'absolute',
-          right: 0,
-          '&:focus-visible': {
-            ...common.focusRingStyles(t),
-          },
-        })}
+        size='xs'
         focusRing={false}
-        aria-label={'Show key'}
-        elementDescriptor={descriptors.apiKeysRevealButton}
-        onClick={() => setRevealed(!revealed)}
-      >
-        <Icon
-          icon={revealed ? EyeSlash : Eye}
-          sx={t => ({ color: t.colors.$colorMutedForeground })}
-        />
-      </Button>
+        hoverAsFocus
+        onClick={() => setRevealed(s => !s)}
+        sx={theme => ({
+          color: theme.colors.$neutralAlpha400,
+          borderStartStartRadius: '0',
+          borderEndStartRadius: '0',
+          borderStartEndRadius: `calc(${theme.radii.$md} - ${theme.borderWidths.$normal})`,
+          borderEndEndRadius: `calc(${theme.radii.$md} - ${theme.borderWidths.$normal})`,
+        })}
+        icon={revealed ? Eye : EyeSlash}
+      />
     </Flex>
   );
 };

packages/clerk-js/src/ui/elements/PasswordInput.tsx

@@ -7,7 +7,7 @@ import { useEnvironment } from '../contexts';
 import { descriptors, Flex, Input, localizationKeys, useLocalizations } from '../customizables';
 import { usePassword } from '../hooks/usePassword';
 import { Eye, EyeSlash } from '../icons';
-import type { PropsOfComponent } from '../styledSystem';
+import { common, type PropsOfComponent } from '../styledSystem';
 import { mergeRefs } from '../utils/mergeRefs';
 import { IconButton } from './IconButton';
 
@@ -80,9 +80,12 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>((p
   return (
     <Flex
       elementDescriptor={descriptors.formFieldInputGroup}
-      direction='col'
-      justify='center'
-      sx={{ position: 'relative' }}
+      sx={theme => ({
+        ...common.borderVariants(theme, { hasError: rest.hasError }).normal,
+        '&:focus-within,&[data-focus-within="true"]': {
+          ...common.borderVariants(theme, { hasError: rest.hasError }).normal['&:focus'],
+        },
+      })}
     >
       <Input
         {...rest}
@@ -100,21 +103,23 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>((p
         //@ts-expect-error Type mismatch between ForwardRef and RefObject due to null
         ref={mergeRefs(ref, inputRef)}
         type={hidden ? 'password' : 'text'}
-        sx={theme => ({ paddingRight: theme.space.$10 })}
+        variant='unstyled'
       />
       <IconButton
         elementDescriptor={descriptors.formFieldInputShowPasswordButton}
         iconElementDescriptor={descriptors.formFieldInputShowPasswordIcon}
         aria-label={`${hidden ? 'Show' : 'Hide'} password`}
         variant='ghost'
         size='xs'
-        tabIndex={-1}
+        focusRing={false}
+        hoverAsFocus
         onClick={() => setHidden(s => !s)}
         sx={theme => ({
-          position: 'absolute',
-          right: 0,
-          marginRight: theme.space.$1,
           color: theme.colors.$neutralAlpha400,
+          borderStartStartRadius: '0',
+          borderEndStartRadius: '0',
+          borderStartEndRadius: `calc(${theme.radii.$md} - ${theme.borderWidths.$normal})`,
+          borderEndEndRadius: `calc(${theme.radii.$md} - ${theme.borderWidths.$normal})`,
         })}
         icon={hidden ? Eye : EyeSlash}
       />