From ccdaba721250eba66b16fcdddbd9e550bc55eb11 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 21 Feb 2025 17:06:17 -0500 Subject: [PATCH 1/5] refactor(clerk-js): SocialButton row distribution --- .../src/ui/elements/SocialButtons.tsx | 20 ++++++------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/packages/clerk-js/src/ui/elements/SocialButtons.tsx b/packages/clerk-js/src/ui/elements/SocialButtons.tsx index 584d2ba8738..3d68b952e7b 100644 --- a/packages/clerk-js/src/ui/elements/SocialButtons.tsx +++ b/packages/clerk-js/src/ui/elements/SocialButtons.tsx @@ -17,7 +17,7 @@ import { Text, useAppearance, } from '../customizables'; -import { useEnabledThirdPartyProviders, useResizeObserver } from '../hooks'; +import { useEnabledThirdPartyProviders } from '../hooks'; import { mqu, type PropsOfComponent } from '../styledSystem'; import { sleep } from '../utils'; import { useCardState } from './contexts'; @@ -46,7 +46,6 @@ export const SocialButtons = React.memo((props: SocialButtonsRootProps) => { const { web3Strategies, authenticatableOauthStrategies, strategyToDisplayData } = useEnabledThirdPartyProviders(); const card = useCardState(); const { socialButtonsVariant } = useAppearance().parsedLayout; - const [firstStrategyRef, firstElementRect] = useResizeObserver(); const strategies = [ ...(enableOAuthProviders ? authenticatableOauthStrategies : []), @@ -58,6 +57,7 @@ export const SocialButtons = React.memo((props: SocialButtonsRootProps) => { } const strategyRows = distributeStrategiesIntoRows([...strategies], MAX_STRATEGIES_PER_ROW); + const strategyRowOneLength = strategyRows.at(0)?.length; const preferBlockButtons = socialButtonsVariant === 'blockButton' @@ -95,7 +95,7 @@ export const SocialButtons = React.memo((props: SocialButtonsRootProps) => { key={row.join('-')} elementDescriptor={descriptors.socialButtons} gap={2} - sx={{ + sx={t => ({ justifyContent: 'center', [mqu.sm]: { gridTemplateColumns: 'repeat(1, 1fr)', @@ -103,10 +103,10 @@ export const SocialButtons = React.memo((props: SocialButtonsRootProps) => { gridTemplateColumns: strategies.length < 1 ? `repeat(1, 1fr)` - : `repeat(${row.length}, ${rowIndex === 0 ? `1fr` : `${firstElementRect.width}px`})`, - }} + : `repeat(${row.length}, ${rowIndex === 0 ? `1fr` : `calc((100% - (${strategyRowOneLength} - 1) * ${t.sizes.$2}) / ${strategyRowOneLength})`})`, + })} > - {row.map((strategy, strategyIndex) => { + {row.map(strategy => { const label = strategies.length === SOCIAL_BUTTON_PRE_TEXT_THRESHOLD ? `Continue with ${strategyToDisplayData[strategy].name}` @@ -121,13 +121,6 @@ export const SocialButtons = React.memo((props: SocialButtonsRootProps) => { provider: strategyToDisplayData[strategy].name, }); - // When strategies break into 2 rows or more, use the first item of the first - // row as reference for the width of the buttons in the second row and beyond - const ref = - strategies.length > MAX_STRATEGIES_PER_ROW && rowIndex === 0 && strategyIndex === 0 - ? firstStrategyRef - : null; - const imageOrInitial = strategyToDisplayData[strategy].iconUrl ? ( { Date: Fri, 21 Feb 2025 17:11:50 -0500 Subject: [PATCH 2/5] add changeset --- .changeset/forty-apricots-fly.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/forty-apricots-fly.md diff --git a/.changeset/forty-apricots-fly.md b/.changeset/forty-apricots-fly.md new file mode 100644 index 00000000000..e76ad5bd7d5 --- /dev/null +++ b/.changeset/forty-apricots-fly.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Refactor social button row distribution calculation to prevent overlapping on page load. From 8832d30127bd6be77947c01a48a8741366614593 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 24 Feb 2025 15:00:43 -0500 Subject: [PATCH 3/5] add fallback --- packages/clerk-js/src/ui/elements/SocialButtons.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clerk-js/src/ui/elements/SocialButtons.tsx b/packages/clerk-js/src/ui/elements/SocialButtons.tsx index 3d68b952e7b..7d75d644097 100644 --- a/packages/clerk-js/src/ui/elements/SocialButtons.tsx +++ b/packages/clerk-js/src/ui/elements/SocialButtons.tsx @@ -57,7 +57,7 @@ export const SocialButtons = React.memo((props: SocialButtonsRootProps) => { } const strategyRows = distributeStrategiesIntoRows([...strategies], MAX_STRATEGIES_PER_ROW); - const strategyRowOneLength = strategyRows.at(0)?.length; + const strategyRowOneLength = strategyRows.at(0)?.length ?? 0; const preferBlockButtons = socialButtonsVariant === 'blockButton' From dff0e56a03d910743a990237455a8ab1b6fd7785 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 24 Feb 2025 15:07:09 -0500 Subject: [PATCH 4/5] add comment --- packages/clerk-js/src/ui/elements/SocialButtons.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/clerk-js/src/ui/elements/SocialButtons.tsx b/packages/clerk-js/src/ui/elements/SocialButtons.tsx index 7d75d644097..8e55cdc2a89 100644 --- a/packages/clerk-js/src/ui/elements/SocialButtons.tsx +++ b/packages/clerk-js/src/ui/elements/SocialButtons.tsx @@ -103,7 +103,13 @@ export const SocialButtons = React.memo((props: SocialButtonsRootProps) => { gridTemplateColumns: strategies.length < 1 ? `repeat(1, 1fr)` - : `repeat(${row.length}, ${rowIndex === 0 ? `1fr` : `calc((100% - (${strategyRowOneLength} - 1) * ${t.sizes.$2}) / ${strategyRowOneLength})`})`, + : `repeat(${row.length}, ${ + rowIndex === 0 + ? `1fr` + : // Calculate the width of each button based on the width of the buttons within the first row. + // t.sizes.$2 is used here to represent the gap defined on the Grid component. + `calc((100% - (${strategyRowOneLength} - 1) * ${t.sizes.$2}) / ${strategyRowOneLength})` + })`, })} > {row.map(strategy => { From 6fe01fc4a122d19e48c1eac94a855c0084bad002 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 24 Feb 2025 16:49:43 -0500 Subject: [PATCH 5/5] bump size --- packages/clerk-js/bundlewatch.config.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json index 9e8093a5971..dbb2d854c7e 100644 --- a/packages/clerk-js/bundlewatch.config.json +++ b/packages/clerk-js/bundlewatch.config.json @@ -2,7 +2,7 @@ "files": [ { "path": "./dist/clerk.js", "maxSize": "560kB" }, { "path": "./dist/clerk.browser.js", "maxSize": "75kB" }, - { "path": "./dist/clerk.headless.js", "maxSize": "48kB" }, + { "path": "./dist/clerk.headless.js", "maxSize": "48.1kB" }, { "path": "./dist/ui-common*.js", "maxSize": "89KB" }, { "path": "./dist/vendors*.js", "maxSize": "25KB" }, { "path": "./dist/coinbase*.js", "maxSize": "35.5KB" },