feat(clerk-js): Retheme OAuth buttons (#2139)

* feat(clerk-js): Retheme OAuth buttons * fix(clerk-js): Add missing descriptors on OAuth block button * chore(clerk-js): Move ResizeObserver to its own hook * chore(clerk-js): Add descriptor to all <Spinner /> * chore(clerk-js): Move `distributeStrategiesIntoRows` to separate utils file --------- Co-authored-by: Marcel <{ID}+{username}@users.noreply.github.com>
clerk · Nov 27, 2023 · eca1ec9 · eca1ec9
1 parent 929215f
commit eca1ec9
Show file tree

Hide file tree

Showing 25 changed files with 285 additions and 99 deletions.
diff --git a/.changeset/friendly-months-film.md b/.changeset/friendly-months-film.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/nice-dingos-argue.md b/.changeset/nice-dingos-argue.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/rotten-ways-do.md b/.changeset/rotten-ways-do.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/silly-emus-boil.md b/.changeset/silly-emus-boil.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui.retheme/common/EmailLinkStatusCard.tsx b/packages/clerk-js/src/ui.retheme/common/EmailLinkStatusCard.tsx
@@ -61,6 +61,7 @@ const StatusRow = (props: { status: VerificationStatus }) => {
           size='xl'
           colorScheme='primary'
           sx={theme => ({ margin: `${theme.space.$12} 0` })}
+          elementDescriptor={descriptors.spinner}
         />
       ) : (
         <>

diff --git a/packages/clerk-js/src/ui.retheme/common/InfiniteListSpinner.tsx b/packages/clerk-js/src/ui.retheme/common/InfiniteListSpinner.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Box, Spinner } from '../customizables';
+import { Box, descriptors, Spinner } from '../customizables';
 
 export const InfiniteListSpinner = forwardRef<HTMLDivElement>((_, ref) => {
   return (
@@ -24,6 +24,7 @@ export const InfiniteListSpinner = forwardRef<HTMLDivElement>((_, ref) => {
         <Spinner
           size='sm'
           colorScheme='primary'
+          elementDescriptor={descriptors.spinner}
         />
       </Box>
     </Box>

diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationList/OrganizationListPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationList/OrganizationListPage.tsx
@@ -67,6 +67,7 @@ export const OrganizationListPage = withCardStateProvider(() => {
           <Spinner
             size={'lg'}
             colorScheme={'primary'}
+            elementDescriptor={descriptors.spinner}
           />
         </Flex>
       )}

diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationList/shared.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationList/shared.tsx
@@ -85,6 +85,7 @@ export const PreviewListSpinner = forwardRef<HTMLDivElement>((_, ref) => {
         <Spinner
           size='sm'
           colorScheme='primary'
+          elementDescriptor={descriptors.spinner}
         />
       </Box>
     </Box>

diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/DomainList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/DomainList.tsx
@@ -10,7 +10,7 @@ import { stripOrigin, toURL, trimLeadingSlash } from '../../../utils';
 import { useGate, withGate } from '../../common';
 import { useCoreOrganization } from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
-import { Box, Col, localizationKeys, Spinner } from '../../customizables';
+import { Box, Col, descriptors, localizationKeys, Spinner } from '../../customizables';
 import { ArrowBlockButton, BlockWithTrailingComponent, ThreeDotsMenu } from '../../elements';
 import { useInView } from '../../hooks';
 import { useRouter } from '../../router';
@@ -193,6 +193,7 @@ export const DomainList = withGate(
               <Spinner
                 size='sm'
                 colorScheme='primary'
+                elementDescriptor={descriptors.spinner}
               />
             </Box>
           </Box>

diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/MemberListTable.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/MemberListTable.tsx
@@ -60,6 +60,7 @@ export const DataTable = (props: MembersListTableProps) => {
                   <Spinner
                     colorScheme='primary'
                     sx={{ margin: 'auto', display: 'block' }}
+                    elementDescriptor={descriptors.spinner}
                   />
                 </Td>
               </Tr>

diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/RemoveDomainPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/RemoveDomainPage.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import { RemoveResourcePage } from '../../common';
 import { useCoreOrganization, useEnvironment } from '../../contexts';
-import { Flex, Spinner } from '../../customizables';
+import { descriptors, Flex, Spinner } from '../../customizables';
 import { useFetch } from '../../hooks';
 import { localizationKeys } from '../../localization';
 import { useRouter } from '../../router';
@@ -51,6 +51,7 @@ export const RemoveDomainPage = () => {
         <Spinner
           size={'lg'}
           colorScheme={'primary'}
+          elementDescriptor={descriptors.spinner}
         />
       </Flex>
     );

diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifiedDomainPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifiedDomainPage.tsx
@@ -7,7 +7,7 @@ import type {
 import { CalloutWithAction, useGate } from '../../common';
 import { useCoreOrganization, useEnvironment } from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
-import { Col, Flex, localizationKeys, Spinner, Text } from '../../customizables';
+import { Col, descriptors, Flex, localizationKeys, Spinner, Text } from '../../customizables';
 import {
   ContentPage,
   Form,
@@ -189,6 +189,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
         <Spinner
           size={'lg'}
           colorScheme={'primary'}
+          elementDescriptor={descriptors.spinner}
         />
       </Flex>
     );

diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifyDomainPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifyDomainPage.tsx
@@ -114,6 +114,7 @@ export const VerifyDomainPage = withCardStateProvider(() => {
         <Spinner
           size={'lg'}
           colorScheme={'primary'}
+          elementDescriptor={descriptors.spinner}
         />
       </Flex>
     );

diff --git a/packages/clerk-js/src/ui.retheme/components/SignIn/ResetPasswordSuccess.tsx b/packages/clerk-js/src/ui.retheme/components/SignIn/ResetPasswordSuccess.tsx
@@ -1,8 +1,8 @@
 import { withRedirectToHomeSingleSessionGuard } from '../../common';
-import { Col, descriptors, localizationKeys, Text } from '../../customizables';
+import { Col, descriptors, localizationKeys, Spinner, Text } from '../../customizables';
 import { Card, CardAlert, Header, useCardState, withCardStateProvider } from '../../elements';
 import { useSetSessionWithTimeout } from '../../hooks/useSetSessionWithTimeout';
-import { Flex, Spinner } from '../../primitives';
+import { Flex } from '../../primitives';
 
 export const _ResetPasswordSuccess = () => {
   const card = useCardState();
@@ -29,6 +29,7 @@ export const _ResetPasswordSuccess = () => {
           <Spinner
             size='xl'
             colorScheme='primary'
+            elementDescriptor={descriptors.spinner}
           />
         </Flex>
       </Col>

diff --git a/packages/clerk-js/src/ui.retheme/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui.retheme/customizables/elementDescriptors.ts
@@ -279,6 +279,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'notificationBadge',
   'button',
   'providerIcon',
+  'spinner',
   // Decide if we want to keep the keys as camel cased in HTML as well,
   // if yes, refactor and remove the .map(camelize) method
 ] as const).map(camelize) as (keyof ElementsConfig)[];

diff --git a/packages/clerk-js/src/ui.retheme/elements/Actions.tsx b/packages/clerk-js/src/ui.retheme/elements/Actions.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import type { LocalizationKey } from '../customizables';
-import { Button, Col, Flex, Icon, Spinner, Text } from '../customizables';
+import { Button, Col, descriptors, Flex, Icon, Spinner, Text } from '../customizables';
 import type { ElementDescriptor, ElementId } from '../customizables/elementDescriptors';
 import { useCardState } from '../elements/contexts';
 import { useLoadingStatus } from '../hooks';
@@ -96,7 +96,10 @@ export const Action = (props: ActionProps) => {
         sx={theme => ({ flex: `0 0 ${theme.sizes.$11}` })}
       >
         {status.isLoading ? (
-          <Spinner size='xs' />
+          <Spinner
+            size='xs'
+            elementDescriptor={descriptors.spinner}
+          />
         ) : (
           <Icon
             elementDescriptor={iconElementDescriptor}

diff --git a/packages/clerk-js/src/ui.retheme/elements/CodeControl.tsx b/packages/clerk-js/src/ui.retheme/elements/CodeControl.tsx
@@ -321,6 +321,7 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
         <Spinner
           colorScheme='neutral'
           sx={theme => ({ marginLeft: theme.space.$2 })}
+          elementDescriptor={descriptors.spinner}
         />
       )}
     </Flex>

diff --git a/packages/clerk-js/src/ui.retheme/elements/FullHeightLoader.tsx b/packages/clerk-js/src/ui.retheme/elements/FullHeightLoader.tsx
@@ -1,4 +1,4 @@
-import { Flex, Spinner } from '../customizables';
+import { descriptors, Flex, Spinner } from '../customizables';
 
 export const FullHeightLoader = (): JSX.Element => {
   return (
@@ -9,6 +9,7 @@ export const FullHeightLoader = (): JSX.Element => {
       <Spinner
         colorScheme='primary'
         size='lg'
+        elementDescriptor={descriptors.spinner}
       />
     </Flex>
   );

diff --git a/packages/clerk-js/src/ui.retheme/elements/LoadingCard.tsx b/packages/clerk-js/src/ui.retheme/elements/LoadingCard.tsx
@@ -21,6 +21,7 @@ export const LoadingCardContainer = ({ children }: PropsWithChildren) => {
       <Spinner
         size='xl'
         colorScheme='primary'
+        elementDescriptor={descriptors.spinner}
       />
       {children}
     </Flex>