From ebc215630379bc0cb45789635dd7d904e0341d34 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 27 Aug 2024 13:27:17 -0400 Subject: [PATCH 1/8] fix(clerk-js): Update flex gap compat to use css @supports --- packages/clerk-js/src/ui/primitives/Flex.tsx | 107 ++++++++++-------- .../createSupportedFlexGapProperty.ts | 13 +++ .../src/ui/primitives/gapPropertyCompat.ts | 13 --- 3 files changed, 71 insertions(+), 62 deletions(-) create mode 100644 packages/clerk-js/src/ui/primitives/createSupportedFlexGapProperty.ts delete mode 100644 packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts diff --git a/packages/clerk-js/src/ui/primitives/Flex.tsx b/packages/clerk-js/src/ui/primitives/Flex.tsx index 14d5ee39f66..98d989c041f 100644 --- a/packages/clerk-js/src/ui/primitives/Flex.tsx +++ b/packages/clerk-js/src/ui/primitives/Flex.tsx @@ -4,59 +4,68 @@ import type { StateProps, StyleVariants } from '../styledSystem'; import { createVariants } from '../styledSystem'; import type { BoxProps } from './Box'; import { Box } from './Box'; -import { createFlexGapPropertyIosCompat } from './gapPropertyCompat'; +import { createSupportedFlexGapProperty } from './createSupportedFlexGapProperty'; -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: createSupportedFlexGapProperty(theme.space.$1, dir), + 2: createSupportedFlexGapProperty(theme.space.$2, dir), + 3: createSupportedFlexGapProperty(theme.space.$3, dir), + 4: createSupportedFlexGapProperty(theme.space.$4, dir), + 5: createSupportedFlexGapProperty(theme.space.$5, dir), + 6: createSupportedFlexGapProperty(theme.space.$6, dir), + 7: createSupportedFlexGapProperty(theme.space.$7, dir), + 8: createSupportedFlexGapProperty(theme.space.$8, dir), + 9: createSupportedFlexGapProperty(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; diff --git a/packages/clerk-js/src/ui/primitives/createSupportedFlexGapProperty.ts b/packages/clerk-js/src/ui/primitives/createSupportedFlexGapProperty.ts new file mode 100644 index 00000000000..e408d6a28f6 --- /dev/null +++ b/packages/clerk-js/src/ui/primitives/createSupportedFlexGapProperty.ts @@ -0,0 +1,13 @@ +export const createSupportedFlexGapProperty = (val: string, dir: 'col' | 'row') => { + return { + '@supports (gap: 1rem)': { + gap: val, + }, + '@supports not (gap: 1rem)': { + '& > *:not([hidden]):not([style*="visibility: hidden"]) + *:not([hidden]):not([style*="visibility: hidden"])': { + marginLeft: dir === 'row' ? val : undefined, + marginTop: dir === 'col' ? val : undefined, + }, + }, + }; +}; diff --git a/packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts b/packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts deleted file mode 100644 index fc6bc00d233..00000000000 --- a/packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts +++ /dev/null @@ -1,13 +0,0 @@ -export const createFlexGapPropertyIosCompat = (val: string) => { - // 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)) { - return { - '& > * + *': { - marginTop: val, - }, - }; - } - return { gap: val }; -}; From a6bf229cd6d5deca4b5c75b2a4c34a3301731ef1 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 27 Aug 2024 14:23:44 -0400 Subject: [PATCH 2/8] update to selector supports --- .../src/ui/primitives/createSupportedFlexGapProperty.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/clerk-js/src/ui/primitives/createSupportedFlexGapProperty.ts b/packages/clerk-js/src/ui/primitives/createSupportedFlexGapProperty.ts index e408d6a28f6..9bf10c47359 100644 --- a/packages/clerk-js/src/ui/primitives/createSupportedFlexGapProperty.ts +++ b/packages/clerk-js/src/ui/primitives/createSupportedFlexGapProperty.ts @@ -1,9 +1,14 @@ +/** + * @supports selector() was released roughly at the same point as flexbox gap, + * so we use that to check support since flexbox gap check is not supported. + * @see https://birdsong.dev/blog/sloppy-supports-for-flexbox-gap/ + */ export const createSupportedFlexGapProperty = (val: string, dir: 'col' | 'row') => { return { - '@supports (gap: 1rem)': { + '@supports selector(:first-child)': { gap: val, }, - '@supports not (gap: 1rem)': { + '@supports not selector(:first-child)': { '& > *:not([hidden]):not([style*="visibility: hidden"]) + *:not([hidden]):not([style*="visibility: hidden"])': { marginLeft: dir === 'row' ? val : undefined, marginTop: dir === 'col' ? val : undefined, From c07abbb50903b40b16adec785f4d028e8cf1945b Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 27 Aug 2024 16:52:10 -0400 Subject: [PATCH 3/8] fix navigator check --- .../createSupportedFlexGapProperty.ts | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/packages/clerk-js/src/ui/primitives/createSupportedFlexGapProperty.ts b/packages/clerk-js/src/ui/primitives/createSupportedFlexGapProperty.ts index 9bf10c47359..75773d7b10e 100644 --- a/packages/clerk-js/src/ui/primitives/createSupportedFlexGapProperty.ts +++ b/packages/clerk-js/src/ui/primitives/createSupportedFlexGapProperty.ts @@ -1,18 +1,11 @@ -/** - * @supports selector() was released roughly at the same point as flexbox gap, - * so we use that to check support since flexbox gap check is not supported. - * @see https://birdsong.dev/blog/sloppy-supports-for-flexbox-gap/ - */ export const createSupportedFlexGapProperty = (val: string, dir: 'col' | 'row') => { - return { - '@supports selector(:first-child)': { - gap: val, - }, - '@supports not selector(:first-child)': { + if (navigator?.userAgent?.match(/(iphone|ipad).+(os).*(\s13).+safari/i)) { + return { '& > *:not([hidden]):not([style*="visibility: hidden"]) + *:not([hidden]):not([style*="visibility: hidden"])': { marginLeft: dir === 'row' ? val : undefined, marginTop: dir === 'col' ? val : undefined, }, - }, - }; + }; + } + return { gap: val }; }; From 9112b3b91a7897fa82b12a96f8c5d6f58912982a Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 27 Aug 2024 16:54:25 -0400 Subject: [PATCH 4/8] rename --- packages/clerk-js/src/ui/primitives/Flex.tsx | 20 +++++++++---------- ...lexGapProperty.ts => gapPropertyCompat.ts} | 2 +- 2 files changed, 11 insertions(+), 11 deletions(-) rename packages/clerk-js/src/ui/primitives/{createSupportedFlexGapProperty.ts => gapPropertyCompat.ts} (85%) diff --git a/packages/clerk-js/src/ui/primitives/Flex.tsx b/packages/clerk-js/src/ui/primitives/Flex.tsx index 98d989c041f..190586f30ca 100644 --- a/packages/clerk-js/src/ui/primitives/Flex.tsx +++ b/packages/clerk-js/src/ui/primitives/Flex.tsx @@ -4,7 +4,7 @@ import type { StateProps, StyleVariants } from '../styledSystem'; import { createVariants } from '../styledSystem'; import type { BoxProps } from './Box'; import { Box } from './Box'; -import { createSupportedFlexGapProperty } from './createSupportedFlexGapProperty'; +import { createFlexGapPropertyIosCompat } from './gapPropertyCompat'; const { applyVariants, filterProps } = createVariants((theme, props) => { const dir = @@ -44,15 +44,15 @@ const { applyVariants, filterProps } = createVariants((theme, props) => { wrapReverse: { flexWrap: 'wrap-reverse' }, }, gap: { - 1: createSupportedFlexGapProperty(theme.space.$1, dir), - 2: createSupportedFlexGapProperty(theme.space.$2, dir), - 3: createSupportedFlexGapProperty(theme.space.$3, dir), - 4: createSupportedFlexGapProperty(theme.space.$4, dir), - 5: createSupportedFlexGapProperty(theme.space.$5, dir), - 6: createSupportedFlexGapProperty(theme.space.$6, dir), - 7: createSupportedFlexGapProperty(theme.space.$7, dir), - 8: createSupportedFlexGapProperty(theme.space.$8, dir), - 9: createSupportedFlexGapProperty(theme.space.$9, dir), + 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' }, diff --git a/packages/clerk-js/src/ui/primitives/createSupportedFlexGapProperty.ts b/packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts similarity index 85% rename from packages/clerk-js/src/ui/primitives/createSupportedFlexGapProperty.ts rename to packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts index 75773d7b10e..0ce7290d862 100644 --- a/packages/clerk-js/src/ui/primitives/createSupportedFlexGapProperty.ts +++ b/packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts @@ -1,4 +1,4 @@ -export const createSupportedFlexGapProperty = (val: string, dir: 'col' | 'row') => { +export const createFlexGapPropertyIosCompat = (val: string, dir: 'col' | 'row') => { if (navigator?.userAgent?.match(/(iphone|ipad).+(os).*(\s13).+safari/i)) { return { '& > *:not([hidden]):not([style*="visibility: hidden"]) + *:not([hidden]):not([style*="visibility: hidden"])': { From f1439eca37d62367935c049bc30e83f7d8db95d2 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 27 Aug 2024 17:00:43 -0400 Subject: [PATCH 5/8] add changeset --- .changeset/nine-spies-own.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/nine-spies-own.md diff --git a/.changeset/nine-spies-own.md b/.changeset/nine-spies-own.md new file mode 100644 index 00000000000..7f2fbcf2faf --- /dev/null +++ b/.changeset/nine-spies-own.md @@ -0,0 +1,5 @@ +--- +"@clerk/clerk-js": patch +--- + +Fixes issue where `createFlexGapPropertyIosCompat` was incorrectly detecting a chrome browser agent From 8a0580813e4787b93404185576a7c0df8c43df66 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 27 Aug 2024 17:02:16 -0400 Subject: [PATCH 6/8] bring back comment --- packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts b/packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts index 0ce7290d862..477a825a95c 100644 --- a/packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts +++ b/packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts @@ -1,4 +1,6 @@ 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 if (navigator?.userAgent?.match(/(iphone|ipad).+(os).*(\s13).+safari/i)) { return { '& > *:not([hidden]):not([style*="visibility: hidden"]) + *:not([hidden]):not([style*="visibility: hidden"])': { From 4b53f18e42938b9f2341cdd0cb12283bfbf2d0dc Mon Sep 17 00:00:00 2001 From: Bryce Kalow Date: Tue, 27 Aug 2024 16:16:45 -0500 Subject: [PATCH 7/8] Update packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts --- packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts b/packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts index 477a825a95c..580555e8890 100644 --- a/packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts +++ b/packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts @@ -1,7 +1,7 @@ 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 - if (navigator?.userAgent?.match(/(iphone|ipad).+(os).*(\s13).+safari/i)) { + if (navigator?.userAgent?.match(/(iphone|ipad).+(os).*(\s13_).+safari/i)) { return { '& > *:not([hidden]):not([style*="visibility: hidden"]) + *:not([hidden]):not([style*="visibility: hidden"])': { marginLeft: dir === 'row' ? val : undefined, From b77607faf67bc0c29328c93a388b64f52fc96fac Mon Sep 17 00:00:00 2001 From: Bryce Kalow Date: Tue, 27 Aug 2024 16:17:30 -0500 Subject: [PATCH 8/8] Apply suggestions from code review --- .changeset/nine-spies-own.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/nine-spies-own.md b/.changeset/nine-spies-own.md index 7f2fbcf2faf..5a1279da1b2 100644 --- a/.changeset/nine-spies-own.md +++ b/.changeset/nine-spies-own.md @@ -2,4 +2,4 @@ "@clerk/clerk-js": patch --- -Fixes issue where `createFlexGapPropertyIosCompat` was incorrectly detecting a chrome browser agent +Fixes issue where `createFlexGapPropertyIosCompat` was incorrectly detecting a modern Chrome for iOS user agent.