fix(clerk-js): Update createFlexGapPropertyIosCompat user agent reg…

…ex check (#4034) Co-authored-by: Bryce Kalow <[email protected]>
clerk · Aug 27, 2024 · 3d6f992 · 3d6f992
1 parent 0d87140
commit 3d6f992
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 53 deletions.
diff --git a/.changeset/nine-spies-own.md b/.changeset/nine-spies-own.md
@@ -0,0 +1,5 @@
+---
+"@clerk/clerk-js": patch
+---
+
+Fixes issue where `createFlexGapPropertyIosCompat` was incorrectly detecting a modern Chrome for iOS user agent.
diff --git a/packages/clerk-js/src/ui/primitives/Flex.tsx b/packages/clerk-js/src/ui/primitives/Flex.tsx
@@ -6,57 +6,66 @@ import type { BoxProps } from './Box';
 import { Box } from './Box';
 import { createFlexGapPropertyIosCompat } from './gapPropertyCompat';
 
-const { applyVariants, filterProps } = createVariants(theme => ({
-  base: {
-    display: 'flex',
-  },
-  variants: {
-    direction: {
-      row: { flexDirection: 'row' },
-      col: { flexDirection: 'column' },
-      rowReverse: { flexDirection: 'row-reverse' },
-      columnReverse: { flexDirection: 'column-reverse' },
+const { applyVariants, filterProps } = createVariants((theme, props) => {
+  const dir =
+    props.flexDirection === 'col' ||
+    props.flexDirection === 'colReverse' ||
+    props.direction === 'col' ||
+    props.direction === 'colReverse'
+      ? 'col'
+      : 'row';
+  return {
+    base: {
+      display: 'flex',
     },
-    align: {
-      start: { alignItems: 'flex-start' },
-      center: { alignItems: 'center' },
-      end: { alignItems: 'flex-end' },
-      stretch: { alignItems: 'stretch' },
-      baseline: { alignItems: 'baseline' },
+    variants: {
+      direction: {
+        row: { flexDirection: 'row' },
+        col: { flexDirection: 'column' },
+        rowReverse: { flexDirection: 'row-reverse' },
+        columnReverse: { flexDirection: 'column-reverse' },
+      },
+      align: {
+        start: { alignItems: 'flex-start' },
+        center: { alignItems: 'center' },
+        end: { alignItems: 'flex-end' },
+        stretch: { alignItems: 'stretch' },
+        baseline: { alignItems: 'baseline' },
+      },
+      justify: {
+        start: { justifyContent: 'flex-start' },
+        center: { justifyContent: 'center' },
+        end: { justifyContent: 'flex-end' },
+        between: { justifyContent: 'space-between' },
+      },
+      wrap: {
+        noWrap: { flexWrap: 'nowrap' },
+        wrap: { flexWrap: 'wrap' },
+        wrapReverse: { flexWrap: 'wrap-reverse' },
+      },
+      gap: {
+        1: createFlexGapPropertyIosCompat(theme.space.$1, dir),
+        2: createFlexGapPropertyIosCompat(theme.space.$2, dir),
+        3: createFlexGapPropertyIosCompat(theme.space.$3, dir),
+        4: createFlexGapPropertyIosCompat(theme.space.$4, dir),
+        5: createFlexGapPropertyIosCompat(theme.space.$5, dir),
+        6: createFlexGapPropertyIosCompat(theme.space.$6, dir),
+        7: createFlexGapPropertyIosCompat(theme.space.$7, dir),
+        8: createFlexGapPropertyIosCompat(theme.space.$8, dir),
+        9: createFlexGapPropertyIosCompat(theme.space.$9, dir),
+      },
+      center: {
+        true: { justifyContent: 'center', alignItems: 'center' },
+      },
     },
-    justify: {
-      start: { justifyContent: 'flex-start' },
-      center: { justifyContent: 'center' },
-      end: { justifyContent: 'flex-end' },
-      between: { justifyContent: 'space-between' },
+    defaultVariants: {
+      direction: 'row',
+      align: 'stretch',
+      justify: 'start',
+      wrap: 'noWrap',
     },
-    wrap: {
-      noWrap: { flexWrap: 'nowrap' },
-      wrap: { flexWrap: 'wrap' },
-      wrapReverse: { flexWrap: 'wrap-reverse' },
-    },
-    gap: {
-      1: createFlexGapPropertyIosCompat(theme.space.$1),
-      2: createFlexGapPropertyIosCompat(theme.space.$2),
-      3: createFlexGapPropertyIosCompat(theme.space.$3),
-      4: createFlexGapPropertyIosCompat(theme.space.$4),
-      5: createFlexGapPropertyIosCompat(theme.space.$5),
-      6: createFlexGapPropertyIosCompat(theme.space.$6),
-      7: createFlexGapPropertyIosCompat(theme.space.$7),
-      8: createFlexGapPropertyIosCompat(theme.space.$8),
-      9: createFlexGapPropertyIosCompat(theme.space.$9),
-    },
-    center: {
-      true: { justifyContent: 'center', alignItems: 'center' },
-    },
-  },
-  defaultVariants: {
-    direction: 'row',
-    align: 'stretch',
-    justify: 'start',
-    wrap: 'noWrap',
-  },
-}));
+  };
+});
 
 // @ts-ignore
 export type FlexProps = StateProps & BoxProps & StyleVariants<typeof applyVariants>;

diff --git a/packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts b/packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts
@@ -1,11 +1,11 @@
-export const createFlexGapPropertyIosCompat = (val: string) => {
+export const createFlexGapPropertyIosCompat = (val: string, dir: 'col' | 'row') => {
   // Resolve gap property compatibility issue on iOS 13
   // This is not needed for css grid, only for flex
-  // TODO: Test whether we need to make the check more generic
-  if (navigator?.userAgent?.match(/(iphone|ipad).+os.+13.+safari/i)) {
+  if (navigator?.userAgent?.match(/(iphone|ipad).+(os).*(\s13_).+safari/i)) {
     return {
-      '& > * + *': {
-        marginTop: val,
+      '& > *:not([hidden]):not([style*="visibility: hidden"]) + *:not([hidden]):not([style*="visibility: hidden"])': {
+        marginLeft: dir === 'row' ? val : undefined,
+        marginTop: dir === 'col' ? val : undefined,
       },
     };
   }