feat(clerk-js,types): Add socialButtonsRoot descriptor (#4729)

Author: alexcarpenter

.changeset/tiny-brooms-learn.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Add `socialButtonsRoot` descriptor.

packages/clerk-js/bundlewatch.config.json

@@ -3,7 +3,7 @@
     { "path": "./dist/clerk.js", "maxSize": "707kB" },
     { "path": "./dist/clerk.browser.js", "maxSize": "75kB" },
     { "path": "./dist/clerk.headless.js", "maxSize": "48kB" },
-    { "path": "./dist/ui-common*.js", "maxSize": "88KB" },
+    { "path": "./dist/ui-common*.js", "maxSize": "89KB" },
     { "path": "./dist/vendors*.js", "maxSize": "70KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "58KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -47,6 +47,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'backRow',
   'backLink',
 
+  'socialButtonsRoot',
   'socialButtons',
   'socialButtonsIconButton',
   'socialButtonsBlockButton',

packages/clerk-js/src/ui/elements/SocialButtons.tsx

@@ -88,6 +88,7 @@ export const SocialButtons = React.memo((props: SocialButtonsRootProps) => {
     <Flex
       direction='col'
       gap={2}
+      elementDescriptor={descriptors.socialButtonsRoot}
     >
       {strategyRows.map((row, rowIndex) => (
         <Grid

packages/types/src/appearance.ts

@@ -166,6 +166,7 @@ export type ElementsConfig = {
   footerPages: WithOptions;
   footerPagesLink: WithOptions<'help' | 'terms' | 'privacy'>;
 
+  socialButtonsRoot: WithOptions;
   socialButtons: WithOptions;
   socialButtonsIconButton: WithOptions<OAuthProvider | Web3Provider, LoadingState>;
   socialButtonsBlockButton: WithOptions<OAuthProvider | Web3Provider, LoadingState>;