fix(clerk-js): Move errors below the header in all components (#2796)

* fix(clerk-js): Move errors below the header in all components * chore(repo): Add Changeset
clerk · Feb 14, 2024 · 96f89f2 · 96f89f2
1 parent f582cce
commit 96f89f2
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 24 deletions.
diff --git a/.changeset/healthy-planets-clap.md b/.changeset/healthy-planets-clap.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui/common/CustomPageContentContainer.tsx b/packages/clerk-js/src/ui/common/CustomPageContentContainer.tsx
@@ -1,27 +1,22 @@
 import { Col, descriptors } from '../customizables';
-import { Card, useCardState, withCardStateProvider } from '../elements';
 import type { CustomPageContent } from '../utils';
 import { ExternalElementMounter } from '../utils';
 
-export const CustomPageContentContainer = withCardStateProvider(
-  ({ mount, unmount }: Omit<CustomPageContent, 'url'>) => {
-    const card = useCardState();
-    return (
+export const CustomPageContentContainer = ({ mount, unmount }: Omit<CustomPageContent, 'url'>) => {
+  return (
+    <Col
+      elementDescriptor={descriptors.page}
+      gap={8}
+    >
       <Col
-        elementDescriptor={descriptors.page}
+        elementDescriptor={descriptors.profilePage}
         gap={8}
       >
-        <Card.Alert>{card.error}</Card.Alert>
-        <Col
-          elementDescriptor={descriptors.profilePage}
-          gap={8}
-        >
-          <ExternalElementMounter
-            mount={mount}
-            unmount={unmount}
-          />
-        </Col>
+        <ExternalElementMounter
+          mount={mount}
+          unmount={unmount}
+        />
       </Col>
-    );
-  },
-);
+    </Col>
+  );
+};
diff --git a/packages/clerk-js/src/ui/common/EmailLinkStatusCard.tsx b/packages/clerk-js/src/ui/common/EmailLinkStatusCard.tsx
@@ -36,11 +36,11 @@ export const EmailLinkStatusCard = (props: EmailLinkStatusCardProps) => {
     <Flow.Part part='emailLinkStatus'>
       <Card.Root>
         <Card.Content>
-          <Card.Alert>{card.error}</Card.Alert>
           <Header.Root>
             <Header.Title localizationKey={props.title} />
             <Header.Subtitle localizationKey={props.subtitle} />
           </Header.Root>
+          <Card.Alert>{card.error}</Card.Alert>
           <Col elementDescriptor={descriptors.main}>
             <StatusRow status={props.status} />
           </Col>

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx
@@ -57,7 +57,6 @@ export const OrganizationMembers = withCardStateProvider(() => {
       elementDescriptor={descriptors.page}
       gap={2}
     >
-      <Card.Alert>{card.error}</Card.Alert>
       <Col
         elementDescriptor={descriptors.profilePage}
         elementId={descriptors.profilePage.setId('organizationMembers')}
@@ -92,6 +91,7 @@ export const OrganizationMembers = withCardStateProvider(() => {
               )}
             </Header.Root>
           </Animated>
+          <Card.Alert>{card.error}</Card.Alert>
           {canReadMemberships && (
             <Animated>
               <Action.Open value='invite'>

diff --git a/packages/clerk-js/src/ui/components/UserProfile/AccountPage.tsx b/packages/clerk-js/src/ui/components/UserProfile/AccountPage.tsx
@@ -27,7 +27,6 @@ export const AccountPage = withCardStateProvider(() => {
       elementDescriptor={descriptors.page}
       sx={t => ({ gap: t.space.$8, color: t.colors.$colorText })}
     >
-      <Card.Alert>{card.error}</Card.Alert>
       <Col
         elementDescriptor={descriptors.profilePage}
         elementId={descriptors.profilePage.setId('account')}
@@ -40,6 +39,8 @@ export const AccountPage = withCardStateProvider(() => {
           />
         </Header.Root>
 
+        <Card.Alert>{card.error}</Card.Alert>
+
         <UserProfileSection />
         {showUsername && <UsernameSection />}
         {showEmail && <EmailsSection />}

diff --git a/packages/clerk-js/src/ui/components/UserProfile/SecurityPage.tsx b/packages/clerk-js/src/ui/components/UserProfile/SecurityPage.tsx
@@ -22,7 +22,6 @@ export const SecurityPage = withCardStateProvider(() => {
       elementDescriptor={descriptors.page}
       sx={t => ({ gap: t.space.$8 })}
     >
-      <Card.Alert>{card.error}</Card.Alert>
       <Col
         elementDescriptor={descriptors.profilePage}
         elementId={descriptors.profilePage.setId('security')}
@@ -34,6 +33,7 @@ export const SecurityPage = withCardStateProvider(() => {
             textVariant='h2'
           />
         </Header.Root>
+        <Card.Alert>{card.error}</Card.Alert>
         {showPassword && <PasswordSection />}
         {showMfa && <MfaSection />}
         <ActiveDevicesSection />

diff --git a/packages/clerk-js/src/ui/elements/FormContainer.tsx b/packages/clerk-js/src/ui/elements/FormContainer.tsx
@@ -34,7 +34,6 @@ export const FormContainer = (props: PageProps) => {
       {...rest}
       sx={[sx]}
     >
-      <Card.Alert>{card.error}</Card.Alert>
       {(headerTitle || headerSubtitle) && (
         <Header.Root>
           {headerTitle && (
@@ -51,6 +50,7 @@ export const FormContainer = (props: PageProps) => {
           )}
         </Header.Root>
       )}
+      <Card.Alert>{card.error}</Card.Alert>
       <Col gap={8}>{children}</Col>
     </Col>
   );