fix(clerk-js): Update input group styles match the designs (#2996)

* fix(clerk-js): Update input group styles match the designs * chore(repo): Add Changeset
clerk · Mar 14, 2024 · 1c199d1 · 1c199d1
1 parent 94bbdf7
commit 1c199d1
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/.changeset/grumpy-jobs-doubt.md b/.changeset/grumpy-jobs-doubt.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fix for input group components with prefix or suffix to match the rest of the design
diff --git a/packages/clerk-js/src/ui/elements/InputGroup.tsx b/packages/clerk-js/src/ui/elements/InputGroup.tsx
@@ -42,6 +42,11 @@ export const InputGroup = forwardRef<
         position: 'relative',
         zIndex: 1,
         ...common.borderVariants(theme).normal,
+        ':focus-within': {
+          ...common.borderVariants(theme, {
+            focusRignt: true,
+          }).normal['&:focus'],
+        },
       })}
     >
       {groupPrefix && (
@@ -56,17 +61,11 @@ export const InputGroup = forwardRef<
         maxLength={25}
         sx={[
           {
-            boxShadow: 'none',
-            borderWidth: 0,
-            ':hover:not(:focus)': {
-              borderWidth: 0,
-              boxShadow: 'none',
-            },
-            height: '100%',
             ...inputBorder,
           },
           sx,
         ]}
+        variant='unstyled'
         ref={ref}
         {...rest}
       />

diff --git a/packages/clerk-js/src/ui/polishedAppearance.ts b/packages/clerk-js/src/ui/polishedAppearance.ts
@@ -153,6 +153,9 @@ export const polishedAppearance: Appearance = {
       phoneInputBox: {
         ...inputStyles(theme),
       },
+      formInputGroup: {
+        ...inputStyles(theme),
+      },
       selectSearchInput__countryCode: {
         boxShadow: 'none',
         '&:focus': { boxShadow: 'none' },