fix(clerk-js): Fix phone input select button styles (#2468)

clerk · Jan 3, 2024 · a1214bf · a1214bf
1 parent 9bd8be3
commit a1214bf
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 7 deletions.
diff --git a/.changeset/weak-feet-love.md b/.changeset/weak-feet-love.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx b/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx
@@ -4,7 +4,7 @@ import React, { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
 import { descriptors, Flex, Icon, Input, Text } from '../../customizables';
 import { Select, SelectButton, SelectOptionList } from '../../elements';
 import { Check } from '../../icons';
-import type { PropsOfComponent } from '../../styledSystem';
+import { common, type PropsOfComponent } from '../../styledSystem';
 import { mergeRefs } from '../../utils';
 import type { CountryEntry, CountryIso } from './countryCodeData';
 import { IsoToCountryMap } from './countryCodeData';
@@ -69,6 +69,7 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps>((props, ref
       direction='row'
       hasError={rest.hasError}
       sx={theme => ({
+        ...common.borderVariants(theme).normal,
         position: 'relative',
         borderRadius: theme.radii.$md,
         zIndex: 1,
@@ -99,14 +100,14 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps>((props, ref
       >
         <SelectButton
           sx={t => ({
-            border: 'none',
             borderRadius: t.radii.$md, // needs to be specified as we can't use overflow: hidden on the parent, hides the popover
             borderBottomRightRadius: '0',
             borderTopRightRadius: '0',
-            ':hover': {
+            boxShadow: 'none',
+            ':focus': {
               zIndex: 2,
             },
-            ':focus': {
+            ':active': {
               zIndex: 2,
             },
           })}
@@ -145,7 +146,10 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps>((props, ref
           type='tel'
           sx={[
             {
-              border: 'none',
+              boxShadow: 'none',
+              ':hover:not(:focus)': {
+                boxShadow: 'none',
+              },
               height: '100%',
               borderTopLeftRadius: '0',
               borderBottomLeftRadius: '0',

diff --git a/packages/clerk-js/src/ui/elements/Select.tsx b/packages/clerk-js/src/ui/elements/Select.tsx
@@ -376,7 +376,7 @@ export const SelectButton = (props: PropsOfComponent<typeof Button>) => {
       elementDescriptor={descriptors.selectButton}
       elementId={descriptors.selectButton.setId(elementId)}
       ref={reference}
-      variant='ghost'
+      variant='unstyled'
       textVariant='buttonLarge'
       onClick={onTriggerClick}
       sx={[

diff --git a/packages/clerk-js/src/ui/primitives/Button.tsx b/packages/clerk-js/src/ui/primitives/Button.tsx
@@ -179,6 +179,7 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
           '&:hover': { textDecoration: 'underline' },
           '&:focus': props.hoverAsFocus ? { textDecoration: 'underline' } : undefined,
         },
+        unstyled: {},
         roundWrapper: { padding: 0, margin: 0, height: 'unset', width: 'unset', minHeight: 'unset' },
       },
       block: {
@@ -192,7 +193,7 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
       textVariant: 'buttonLarge',
       variant: 'primary',
       size: 'sm',
-      focusRing: false,
+      focusRing: true,
     },
   };
 });