From 75a1bda06d787f225f14cf784ec7b5f7985ddaf8 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 17 Mar 2025 15:34:43 -0400 Subject: [PATCH 01/10] refactor(clerk-js): Introduce `` component --- .../PricingTable/PlanDetailDrawer.tsx | 119 ++++++++++-------- packages/clerk-js/src/ui/elements/Drawer.tsx | 100 ++++++++++++++- 2 files changed, 163 insertions(+), 56 deletions(-) diff --git a/packages/clerk-js/src/ui/components/PricingTable/PlanDetailDrawer.tsx b/packages/clerk-js/src/ui/components/PricingTable/PlanDetailDrawer.tsx index abf44033e4f..2d3c054ecd1 100644 --- a/packages/clerk-js/src/ui/components/PricingTable/PlanDetailDrawer.tsx +++ b/packages/clerk-js/src/ui/components/PricingTable/PlanDetailDrawer.tsx @@ -1,8 +1,8 @@ import type { __experimental_CommercePlanResource } from '@clerk/types'; import * as React from 'react'; -import { Alert, Box, Button, Col, Flex, Heading, Text } from '../../customizables'; -import { Drawer } from '../../elements'; +import { Box, Button, Flex, Heading, Text } from '../../customizables'; +import { Alert, Drawer } from '../../elements'; import type { PlanPeriod } from './PlanCard'; import { PlanCardFeaturesList, PlanCardHeader } from './PlanCard'; @@ -27,10 +27,28 @@ export function PlanDetailDrawer({ planPeriod, setPlanPeriod, }: PlanDetailDrawerProps) { + const [showConfirmation, setShowConfirmation] = React.useState(false); + const [isSubmitting, setIsSubmitting] = React.useState(false); + const [hasError, setHasError] = React.useState(false); if (!plan) { return null; } const hasFeatures = plan.features.length > 0; + const cancelSubscription = async () => { + setHasError(false); + setIsSubmitting(true); + + // TODO: we need to get a handle on the subscription object in order to cancel it, + // but this method doesn't exist yet. + // + // await subscription.cancel().then(() => { + // setIsSubmitting(false); + // handleClose(); + // }).catch(() => { setHasError(true); setIsSubmitting(false); }); + }; + + // TODO: remove when we can hook up cancel button + // return null; return ( } /> + {hasFeatures ? ( ) : null} - setIsOpen(false)} - /> - - - ); -} - -const CancelFooter = ({ plan }: { plan: __experimental_CommercePlanResource; handleClose: () => void }) => { - // const { __experimental_commerce } = useClerk(); - const [showConfirmation, setShowConfirmation] = React.useState(false); - const [isSubmitting, setIsSubmitting] = React.useState(false); - const [hasError, setHasError] = React.useState(false); - - const cancelSubscription = async () => { - setHasError(false); - setIsSubmitting(true); - - // TODO: we need to get a handle on the subscription object in order to cancel it, - // but this method doesn't exist yet. - // - // await subscription.cancel().then(() => { - // setIsSubmitting(false); - // handleClose(); - // }).catch(() => { setHasError(true); setIsSubmitting(false); }); - }; - // TODO: remove when we can hook up cancel button - // return null; + + + - return ( - - {showConfirmation ? ( - - Cancel {plan.name} Subscription? - + + + Cancel {plan.name} Subscription? + + ({ + marginBlockStart: t.space.$1, + })} + colorScheme='secondary' + > You can keep using “{plan.name}” features until [DATE], after which you will no longer have access. {hasError && ( - There was a problem canceling your subscription, please try again. + ({ + marginBlockStart: t.space.$3, + })} + colorScheme='danger' + > + There was a problem canceling your subscription, please try again. + )} ({ + marginBlockStart: t.space.$8, + })} > {!isSubmitting && ( - )} - + + + ); -}; +} diff --git a/packages/clerk-js/src/ui/elements/Drawer.tsx b/packages/clerk-js/src/ui/elements/Drawer.tsx index 574bfc82505..6c723f27368 100644 --- a/packages/clerk-js/src/ui/elements/Drawer.tsx +++ b/packages/clerk-js/src/ui/elements/Drawer.tsx @@ -14,7 +14,7 @@ import { import * as React from 'react'; import { transitionDurationValues, transitionTiming } from '../../ui/foundations/transitions'; -import { Box, descriptors, Flex, Heading, Icon, useAppearance } from '../customizables'; +import { Box, descriptors, Flex, Heading, Icon, Span, useAppearance } from '../customizables'; import { usePrefersReducedMotion } from '../hooks'; import { useScrollLock } from '../hooks/useScrollLock'; import { Close as CloseIcon } from '../icons'; @@ -402,6 +402,103 @@ const Close = React.forwardRef((_, ref) => { Close.displayName = 'Drawer.Close'; +/* ------------------------------------------------------------------------------------------------- + * Drawer.Confirmation + * -----------------------------------------------------------------------------------------------*/ + +interface ConfirmationProps { + open: boolean; + onOpenChange: (open: boolean) => void; + children: React.ReactNode; +} + +const Confirmation = React.forwardRef(({ open, onOpenChange, children }, ref) => { + const prefersReducedMotion = usePrefersReducedMotion(); + const { animations: layoutAnimations } = useAppearance().parsedLayout; + const isMotionSafe = !prefersReducedMotion && layoutAnimations === true; + + const { refs, context } = useFloating({ + open, + onOpenChange, + transform: false, + strategy: 'absolute', + }); + + const mergedRefs = useMergeRefs([ref, refs.setFloating]); + + const { styles: overlayTransitionStyles } = useTransitionStyles(context, { + initial: { opacity: 0 }, + open: { opacity: 1 }, + close: { opacity: 0 }, + common: { + transitionProperty: 'opacity', + transitionTimingFunction: transitionTiming.bezier, + }, + duration: transitionDurationValues.drawer, + }); + + const { isMounted, styles: modalTransitionStyles } = useTransitionStyles(context, { + initial: { transform: 'translate3D(0, 100%, 0)' }, + open: { transform: 'translate3D(0, 0, 0)' }, + close: { transform: 'translate3D(0, 100%, 0)' }, + common: { + transitionProperty: 'transform', + transitionTimingFunction: transitionTiming.bezier, + }, + duration: isMotionSafe ? transitionDurationValues.drawer : 0, + }); + + const { getFloatingProps } = useInteractions([useClick(context), useDismiss(context), useRole(context)]); + + if (!isMounted) return null; + + return ( + <> + ({ + position: 'absolute', + inset: 0, + backgroundImage: `linear-gradient(to bottom, transparent, ${t.colors.$colorBackground})`, + })} + /> + + + ({ + outline: 'none', + willChange: 'transform', + position: 'absolute', + bottom: 0, + left: 0, + right: 0, + background: common.mergedColorsBackground( + colors.setAlpha(t.colors.$colorBackground, 1), + t.colors.$neutralAlpha50, + ), + borderBlockStartWidth: t.borderWidths.$normal, + borderBlockStartStyle: t.borderStyles.$solid, + borderBlockStartColor: t.colors.$neutralAlpha100, + padding: t.space.$4, + })} + > + {children} + + + + ); +}); + +Confirmation.displayName = 'Drawer.Confirmation'; + export const Drawer = { Root, Overlay, @@ -409,5 +506,6 @@ export const Drawer = { Header, Body, Footer, + Confirmation, Close, }; From c9bd3c0052f66d75659f2d39ad4b2203cf2c71f2 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 17 Mar 2025 15:40:37 -0400 Subject: [PATCH 02/10] add descriptors --- .../src/ui/components/PricingTable/PlanDetailDrawer.tsx | 5 ++++- packages/clerk-js/src/ui/customizables/elementDescriptors.ts | 5 +++++ packages/clerk-js/src/ui/elements/Drawer.tsx | 2 ++ packages/types/src/appearance.ts | 5 +++++ 4 files changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/clerk-js/src/ui/components/PricingTable/PlanDetailDrawer.tsx b/packages/clerk-js/src/ui/components/PricingTable/PlanDetailDrawer.tsx index 2d3c054ecd1..361bbb9e0c2 100644 --- a/packages/clerk-js/src/ui/components/PricingTable/PlanDetailDrawer.tsx +++ b/packages/clerk-js/src/ui/components/PricingTable/PlanDetailDrawer.tsx @@ -1,7 +1,7 @@ import type { __experimental_CommercePlanResource } from '@clerk/types'; import * as React from 'react'; -import { Box, Button, Flex, Heading, Text } from '../../customizables'; +import { Box, Button, descriptors, Flex, Heading, Text } from '../../customizables'; import { Alert, Drawer } from '../../elements'; import type { PlanPeriod } from './PlanCard'; import { PlanCardFeaturesList, PlanCardHeader } from './PlanCard'; @@ -107,12 +107,14 @@ export function PlanDetailDrawer({ onOpenChange={setShowConfirmation} > Cancel {plan.name} Subscription? ({ marginBlockStart: t.space.$1, })} @@ -132,6 +134,7 @@ export function PlanDetailDrawer({ )} ({ diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts index c6ac9d01884..529457b7db0 100644 --- a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts +++ b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts @@ -99,6 +99,11 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([ 'drawerBody', 'drawerFooter', 'drawerClose', + 'drawerConfirmationBackdrop', + 'drawerConfirmationRoot', + 'drawerConfirmationTitle', + 'drawerConfirmationDescription', + 'drawerConfirmationActions', 'formHeader', 'formHeaderTitle', diff --git a/packages/clerk-js/src/ui/elements/Drawer.tsx b/packages/clerk-js/src/ui/elements/Drawer.tsx index 6c723f27368..b22458913d7 100644 --- a/packages/clerk-js/src/ui/elements/Drawer.tsx +++ b/packages/clerk-js/src/ui/elements/Drawer.tsx @@ -455,6 +455,7 @@ const Confirmation = React.forwardRef(({ open return ( <> ({ position: 'absolute', @@ -471,6 +472,7 @@ const Confirmation = React.forwardRef(({ open > ({ diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts index 49bfe60287f..3802a0b1b03 100644 --- a/packages/types/src/appearance.ts +++ b/packages/types/src/appearance.ts @@ -217,6 +217,11 @@ export type ElementsConfig = { drawerBody: WithOptions; drawerFooter: WithOptions; drawerClose: WithOptions; + drawerConfirmationBackdrop: WithOptions; + drawerConfirmationRoot: WithOptions; + drawerConfirmationTitle: WithOptions; + drawerConfirmationDescription: WithOptions; + drawerConfirmationActions: WithOptions; formHeader: WithOptions; formHeaderTitle: WithOptions; From 22890f6deb9623a60fba313090730a1d26dac0dc Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 17 Mar 2025 15:44:41 -0400 Subject: [PATCH 03/10] add changeset --- .changeset/forty-ladybugs-tie.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/forty-ladybugs-tie.md diff --git a/.changeset/forty-ladybugs-tie.md b/.changeset/forty-ladybugs-tie.md new file mode 100644 index 00000000000..19092ffee6b --- /dev/null +++ b/.changeset/forty-ladybugs-tie.md @@ -0,0 +1,6 @@ +--- +'@clerk/clerk-js': patch +'@clerk/types': patch +--- + +Introduce `` component to be used within Commerce cancel subscription flow. From eb4f8a79420a8da187e9ec6f3e6205c72a34c53c Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 17 Mar 2025 15:55:33 -0400 Subject: [PATCH 04/10] visuallyHiddenDismiss --- packages/clerk-js/src/ui/elements/Drawer.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/clerk-js/src/ui/elements/Drawer.tsx b/packages/clerk-js/src/ui/elements/Drawer.tsx index b22458913d7..08020573c02 100644 --- a/packages/clerk-js/src/ui/elements/Drawer.tsx +++ b/packages/clerk-js/src/ui/elements/Drawer.tsx @@ -469,6 +469,7 @@ const Confirmation = React.forwardRef(({ open modal outsideElementsInert initialFocus={refs.floating} + visuallyHiddenDismiss > Date: Mon, 17 Mar 2025 16:00:35 -0400 Subject: [PATCH 05/10] alpha --- packages/clerk-js/src/ui/elements/Drawer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clerk-js/src/ui/elements/Drawer.tsx b/packages/clerk-js/src/ui/elements/Drawer.tsx index 08020573c02..55dfb49bd4c 100644 --- a/packages/clerk-js/src/ui/elements/Drawer.tsx +++ b/packages/clerk-js/src/ui/elements/Drawer.tsx @@ -460,7 +460,7 @@ const Confirmation = React.forwardRef(({ open sx={t => ({ position: 'absolute', inset: 0, - backgroundImage: `linear-gradient(to bottom, transparent, ${t.colors.$colorBackground})`, + backgroundImage: `linear-gradient(to bottom, ${colors.setAlpha(t.colors.$colorBackground, 0.28)}, ${t.colors.$colorBackground})`, })} /> From eaf0cdd6a5e9934649ec2b719a18d044bd1ecd17 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 17 Mar 2025 16:06:28 -0400 Subject: [PATCH 06/10] radii --- packages/clerk-js/src/ui/elements/Drawer.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/clerk-js/src/ui/elements/Drawer.tsx b/packages/clerk-js/src/ui/elements/Drawer.tsx index 55dfb49bd4c..a4cd182b2a3 100644 --- a/packages/clerk-js/src/ui/elements/Drawer.tsx +++ b/packages/clerk-js/src/ui/elements/Drawer.tsx @@ -487,10 +487,10 @@ const Confirmation = React.forwardRef(({ open colors.setAlpha(t.colors.$colorBackground, 1), t.colors.$neutralAlpha50, ), - borderBlockStartWidth: t.borderWidths.$normal, - borderBlockStartStyle: t.borderStyles.$solid, - borderBlockStartColor: t.colors.$neutralAlpha100, padding: t.space.$4, + borderStartStartRadius: t.radii.$md, + borderStartEndRadius: t.radii.$md, + boxShadow: `0 0 0 1px ${t.colors.$neutralAlpha100}`, })} > {children} From 1a3ac7fc4bad284c43a485a3e21947d26d553bc7 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 17 Mar 2025 16:11:39 -0400 Subject: [PATCH 07/10] actionsSlot --- .../PricingTable/PlanDetailDrawer.tsx | 73 +++---- packages/clerk-js/src/ui/elements/Drawer.tsx | 180 ++++++++++-------- 2 files changed, 126 insertions(+), 127 deletions(-) diff --git a/packages/clerk-js/src/ui/components/PricingTable/PlanDetailDrawer.tsx b/packages/clerk-js/src/ui/components/PricingTable/PlanDetailDrawer.tsx index 361bbb9e0c2..7da33bdfe73 100644 --- a/packages/clerk-js/src/ui/components/PricingTable/PlanDetailDrawer.tsx +++ b/packages/clerk-js/src/ui/components/PricingTable/PlanDetailDrawer.tsx @@ -1,7 +1,7 @@ import type { __experimental_CommercePlanResource } from '@clerk/types'; import * as React from 'react'; -import { Box, Button, descriptors, Flex, Heading, Text } from '../../customizables'; +import { Box, Button, descriptors, Heading, Text } from '../../customizables'; import { Alert, Drawer } from '../../elements'; import type { PlanPeriod } from './PlanCard'; import { PlanCardFeaturesList, PlanCardHeader } from './PlanCard'; @@ -105,6 +105,33 @@ export function PlanDetailDrawer({ + {!isSubmitting && ( + + )} + + + } > ({ - marginBlockStart: t.space.$1, - })} colorScheme='secondary' > You can keep using “{plan.name}” features until [DATE], after which you will no longer have access. {hasError && ( - ({ - marginBlockStart: t.space.$3, - })} - colorScheme='danger' - > - There was a problem canceling your subscription, please try again. - + There was a problem canceling your subscription, please try again. )} - ({ - marginBlockStart: t.space.$8, - })} - > - {!isSubmitting && ( - - )} - - diff --git a/packages/clerk-js/src/ui/elements/Drawer.tsx b/packages/clerk-js/src/ui/elements/Drawer.tsx index a4cd182b2a3..7673aafdb33 100644 --- a/packages/clerk-js/src/ui/elements/Drawer.tsx +++ b/packages/clerk-js/src/ui/elements/Drawer.tsx @@ -410,95 +410,109 @@ interface ConfirmationProps { open: boolean; onOpenChange: (open: boolean) => void; children: React.ReactNode; + actionsSlot: React.ReactNode; } -const Confirmation = React.forwardRef(({ open, onOpenChange, children }, ref) => { - const prefersReducedMotion = usePrefersReducedMotion(); - const { animations: layoutAnimations } = useAppearance().parsedLayout; - const isMotionSafe = !prefersReducedMotion && layoutAnimations === true; - - const { refs, context } = useFloating({ - open, - onOpenChange, - transform: false, - strategy: 'absolute', - }); - - const mergedRefs = useMergeRefs([ref, refs.setFloating]); - - const { styles: overlayTransitionStyles } = useTransitionStyles(context, { - initial: { opacity: 0 }, - open: { opacity: 1 }, - close: { opacity: 0 }, - common: { - transitionProperty: 'opacity', - transitionTimingFunction: transitionTiming.bezier, - }, - duration: transitionDurationValues.drawer, - }); - - const { isMounted, styles: modalTransitionStyles } = useTransitionStyles(context, { - initial: { transform: 'translate3D(0, 100%, 0)' }, - open: { transform: 'translate3D(0, 0, 0)' }, - close: { transform: 'translate3D(0, 100%, 0)' }, - common: { - transitionProperty: 'transform', - transitionTimingFunction: transitionTiming.bezier, - }, - duration: isMotionSafe ? transitionDurationValues.drawer : 0, - }); - - const { getFloatingProps } = useInteractions([useClick(context), useDismiss(context), useRole(context)]); - - if (!isMounted) return null; - - return ( - <> - ({ - position: 'absolute', - inset: 0, - backgroundImage: `linear-gradient(to bottom, ${colors.setAlpha(t.colors.$colorBackground, 0.28)}, ${t.colors.$colorBackground})`, - })} - /> - - - ( + ({ open, onOpenChange, children, actionsSlot }, ref) => { + const prefersReducedMotion = usePrefersReducedMotion(); + const { animations: layoutAnimations } = useAppearance().parsedLayout; + const isMotionSafe = !prefersReducedMotion && layoutAnimations === true; + + const { refs, context } = useFloating({ + open, + onOpenChange, + transform: false, + strategy: 'absolute', + }); + + const mergedRefs = useMergeRefs([ref, refs.setFloating]); + + const { styles: overlayTransitionStyles } = useTransitionStyles(context, { + initial: { opacity: 0 }, + open: { opacity: 1 }, + close: { opacity: 0 }, + common: { + transitionProperty: 'opacity', + transitionTimingFunction: transitionTiming.bezier, + }, + duration: transitionDurationValues.drawer, + }); + + const { isMounted, styles: modalTransitionStyles } = useTransitionStyles(context, { + initial: { transform: 'translate3D(0, 100%, 0)' }, + open: { transform: 'translate3D(0, 0, 0)' }, + close: { transform: 'translate3D(0, 100%, 0)' }, + common: { + transitionProperty: 'transform', + transitionTimingFunction: transitionTiming.bezier, + }, + duration: isMotionSafe ? transitionDurationValues.drawer : 0, + }); + + const { getFloatingProps } = useInteractions([useClick(context), useDismiss(context), useRole(context)]); + + if (!isMounted) return null; + + return ( + <> + ({ - outline: 'none', - willChange: 'transform', position: 'absolute', - bottom: 0, - left: 0, - right: 0, - background: common.mergedColorsBackground( - colors.setAlpha(t.colors.$colorBackground, 1), - t.colors.$neutralAlpha50, - ), - padding: t.space.$4, - borderStartStartRadius: t.radii.$md, - borderStartEndRadius: t.radii.$md, - boxShadow: `0 0 0 1px ${t.colors.$neutralAlpha100}`, + inset: 0, + backgroundImage: `linear-gradient(to bottom, ${colors.setAlpha(t.colors.$colorBackground, 0.28)}, ${t.colors.$colorBackground})`, })} + /> + + - {children} - - - - ); -}); + ({ + display: 'flex', + flexDirection: 'column', + rowGap: t.space.$8, + outline: 'none', + willChange: 'transform', + position: 'absolute', + bottom: 0, + left: 0, + right: 0, + background: common.mergedColorsBackground( + colors.setAlpha(t.colors.$colorBackground, 1), + t.colors.$neutralAlpha50, + ), + padding: t.space.$4, + borderStartStartRadius: t.radii.$md, + borderStartEndRadius: t.radii.$md, + boxShadow: `0 0 0 1px ${t.colors.$neutralAlpha100}`, + })} + > + {children} + + + {actionsSlot} + + + + + ); + }, +); Confirmation.displayName = 'Drawer.Confirmation'; From d44be2d65d1b202453572f7491d1fa7eac445166 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 17 Mar 2025 16:14:39 -0400 Subject: [PATCH 08/10] todos --- .../ui/components/PricingTable/PlanDetailDrawer.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/clerk-js/src/ui/components/PricingTable/PlanDetailDrawer.tsx b/packages/clerk-js/src/ui/components/PricingTable/PlanDetailDrawer.tsx index 7da33bdfe73..258c7c7eb57 100644 --- a/packages/clerk-js/src/ui/components/PricingTable/PlanDetailDrawer.tsx +++ b/packages/clerk-js/src/ui/components/PricingTable/PlanDetailDrawer.tsx @@ -38,7 +38,7 @@ export function PlanDetailDrawer({ setHasError(false); setIsSubmitting(true); - // TODO: we need to get a handle on the subscription object in order to cancel it, + // TODO(@COMMERCE): we need to get a handle on the subscription object in order to cancel it, // but this method doesn't exist yet. // // await subscription.cancel().then(() => { @@ -47,8 +47,6 @@ export function PlanDetailDrawer({ // }).catch(() => { setHasError(true); setIsSubmitting(false); }); }; - // TODO: remove when we can hook up cancel button - // return null; return ( setShowConfirmation(true)} > + {/* TODO(@COMMERCE): needs localization */} Cancel Subscription @@ -117,6 +116,7 @@ export function PlanDetailDrawer({ setShowConfirmation(false); }} > + {/* TODO(@COMMERCE): needs localization */} Keep Subscription )} @@ -128,6 +128,7 @@ export function PlanDetailDrawer({ isLoading={isSubmitting} onClick={cancelSubscription} > + {/* TODO(@COMMERCE): needs localization */} Cancel Subscription @@ -138,16 +139,19 @@ export function PlanDetailDrawer({ as='h2' textVariant='h3' > + {/* TODO(@COMMERCE): needs localization */} Cancel {plan.name} Subscription? + {/* TODO(@COMMERCE): needs localization */} You can keep using “{plan.name}” features until [DATE], after which you will no longer have access. {hasError && ( + // TODO(@COMMERCE): needs localization There was a problem canceling your subscription, please try again. )} From c5066bde526760471e7b4038f553ef4fcf170f7e Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 17 Mar 2025 16:17:32 -0400 Subject: [PATCH 09/10] Update bundlewatch.config.json --- packages/clerk-js/bundlewatch.config.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json index 50d50a6ce75..9f3ef3f9d76 100644 --- a/packages/clerk-js/bundlewatch.config.json +++ b/packages/clerk-js/bundlewatch.config.json @@ -1,9 +1,9 @@ { "files": [ - { "path": "./dist/clerk.js", "maxSize": "575kB" }, + { "path": "./dist/clerk.js", "maxSize": "576kB" }, { "path": "./dist/clerk.browser.js", "maxSize": "78kB" }, { "path": "./dist/clerk.headless.js", "maxSize": "50KB" }, - { "path": "./dist/ui-common*.js", "maxSize": "93KB" }, + { "path": "./dist/ui-common*.js", "maxSize": "94KB" }, { "path": "./dist/vendors*.js", "maxSize": "30KB" }, { "path": "./dist/coinbase*.js", "maxSize": "35.5KB" }, { "path": "./dist/createorganization*.js", "maxSize": "5KB" }, From c362b57284016c50364be635ef14ce2e4d41d49e Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 17 Mar 2025 16:20:23 -0400 Subject: [PATCH 10/10] fix row gap --- packages/clerk-js/src/ui/elements/Drawer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clerk-js/src/ui/elements/Drawer.tsx b/packages/clerk-js/src/ui/elements/Drawer.tsx index 7673aafdb33..1616200d74d 100644 --- a/packages/clerk-js/src/ui/elements/Drawer.tsx +++ b/packages/clerk-js/src/ui/elements/Drawer.tsx @@ -481,7 +481,7 @@ const Confirmation = React.forwardRef( sx={t => ({ display: 'flex', flexDirection: 'column', - rowGap: t.space.$8, + rowGap: t.space.$6, outline: 'none', willChange: 'transform', position: 'absolute',