Merge branch 'main' into renovate/react-monorepo

jonambas · Sep 19, 2023 · b960fc1 · b960fc1
2 parents 40edf34 + 7ba9923
commit b960fc1
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @sweatpants/react
 
+## 0.7.1
+
+### Patch Changes
+
+- 9555bf4: Fix Select overlay zindex within drawers
+
 ## 0.7.0
 
 ### Minor Changes

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sweatpants/react",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

diff --git a/packages/react/src/select/Select.tsx b/packages/react/src/select/Select.tsx
@@ -160,7 +160,9 @@ const Select = forwardRef<HTMLButtonElement, SelectProps>((props, userRef) => {
           )}
         </RadixSelect.Trigger>
         <RadixSelect.Portal>
-          <RadixSelect.Content>
+          <RadixSelect.Content
+            className={css({ position: 'relative', zIndex: '2' })}
+          >
             <RadixSelect.Viewport asChild>
               <Card kind="elevated" space="tight">
                 <Stack space="tight">{children}</Stack>

diff --git a/packages/react/src/text-field/TextField.tsx b/packages/react/src/text-field/TextField.tsx
@@ -43,7 +43,8 @@ const inputStyles = cva({
     background: 'transparent',
     fontSize: '3',
     paddingX: '3',
-    transition: '0.15s',
+    transitionDuration: '0.15s',
+    transitionProperty: 'background, border',
     outline: 'none',
     color: 'gray12',
     '&:hover:not(:focus)': {
@@ -116,8 +117,8 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
 
     useEffect(() => {
       const styles: HTMLAttributes<'input'>['style'] = {
-        paddingLeft: undefined,
-        paddingRight: undefined
+        paddingLeft: prefix ? `calc(1rem + 1ch)` : undefined,
+        paddingRight: suffix ? `calc(1rem + 1ch)` : undefined
       };
 
       if (prefixRef.current) {
@@ -129,7 +130,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       }
 
       setPadding(styles);
-    }, [prefixRef, suffixRef]);
+    }, [prefix, suffix, prefixRef, suffixRef]);
 
     return (
       <div className={containerStyles}>